/* ===== AODrag Legacy · Panel — tema medieval dorado ===== */
@font-face{font-family:'Texturina';src:url('/assets/fonts/Texturina-Light.ttf');font-weight:300;font-display:swap}
@font-face{font-family:'Texturina';src:url('/assets/fonts/Texturina-Regular.ttf');font-weight:400;font-display:swap}
@font-face{font-family:'Texturina';src:url('/assets/fonts/Texturina-SemiBold.ttf');font-weight:600;font-display:swap}

:root{
  --bg:#080808;--card:rgba(20,15,10,.86);--line:rgba(171,102,0,.30);
  --txt:#efefef;--mut:#a79b88;--acc:#ab6600;--acc2:#e99134;--acc3:#ffd27a;
  --ok:#34c98a;--err:#e0524a;--warn:#e99134;
  --serif:'Texturina',Georgia,'Times New Roman',serif;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;font-family:var(--serif);background:var(--bg);color:var(--txt);position:relative;overflow-x:hidden}

/* Aurora dorada (GPU) */
body::before{content:"";position:fixed;inset:-25%;z-index:-3;will-change:transform;
  background:
    radial-gradient(38% 48% at 18% 22%,rgba(171,102,0,.32),transparent 62%),
    radial-gradient(42% 52% at 82% 26%,rgba(233,145,52,.20),transparent 62%),
    radial-gradient(55% 60% at 50% 92%,rgba(120,55,0,.28),transparent 60%);
  filter:blur(48px);animation:aurora 26s ease-in-out infinite alternate}
@keyframes aurora{0%{transform:translate3d(-3%,-2%,0) scale(1)}100%{transform:translate3d(3%,2%,0) scale(1.16)}}
body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%,transparent 52%,rgba(0,0,0,.7) 100%)}

/* Lienzo de partículas interactivas */
#fondo-aodrag{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

a{color:var(--acc2);text-decoration:none}a:hover{color:var(--acc3)}

.panel-top{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;
  background:rgba(10,8,6,.92);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.panel-logo{font-size:1.5rem;font-weight:600;letter-spacing:.5px;color:var(--txt)}
.panel-logo span{background:linear-gradient(90deg,var(--acc2),var(--acc3));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 10px rgba(233,145,52,.35))}
/* Navegación agrupada (desplegables + hamburguesa en móvil) */
.nav-burger{display:none;background:none;border:1px solid var(--line);border-radius:8px;color:var(--acc3);font-size:1.25rem;line-height:1;padding:6px 11px;cursor:pointer}
.panel-nav{display:flex;gap:4px;align-items:center}
.nav-group{position:relative}
.nav-top{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:8px;color:var(--mut);font-weight:600;white-space:nowrap;cursor:default;transition:.15s}
.nav-group:hover .nav-top,.nav-group.active .nav-top,.nav-group:focus-within .nav-top{color:var(--acc3);text-shadow:0 0 12px rgba(233,145,52,.35)}
.nav-top:focus-visible{outline:2px solid var(--acc2);outline-offset:-2px}
.nav-top i{font-style:normal;font-size:.66rem;opacity:.7}
.nav-menu{position:absolute;top:100%;left:0;min-width:190px;background:rgba(14,11,8,.98);border:1px solid var(--line);border-radius:11px;padding:6px;display:none;flex-direction:column;gap:2px;box-shadow:0 16px 36px rgba(0,0,0,.55);z-index:30}
.nav-group:hover .nav-menu,.nav-group:focus-within .nav-menu{display:flex}
.nav-menu a{padding:9px 12px;border-radius:7px;color:var(--mut);font-weight:600;font-size:.92rem;white-space:nowrap;transition:.12s}
.nav-menu a:hover{background:rgba(233,145,52,.12);color:var(--acc3)}
.nav-menu a.on{color:var(--acc3);background:rgba(233,145,52,.10)}
.nav-menu a.logout{color:var(--err)}
@media(max-width:760px){
  .nav-burger{display:block}
  .panel-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;
    background:rgba(10,8,6,.99);border-bottom:1px solid var(--line);padding:8px 10px;max-height:80vh;overflow-y:auto}
  .panel-nav.open{display:flex}
  .nav-group{position:static}
  .nav-top{cursor:default}
  .nav-menu{position:static;display:flex;border:0;box-shadow:none;background:none;padding:2px 0 8px 16px;min-width:0;border-radius:0}
}
.panel-main{max-width:1040px;margin:0 auto;padding:30px 18px 60px}
.panel-foot{text-align:center;color:var(--mut);padding:30px;font-size:.85rem}

.seccion{margin:26px 0 16px;font-size:1.5rem;font-weight:600;background:linear-gradient(90deg,var(--acc3),var(--acc));-webkit-background-clip:text;background-clip:text;color:transparent}

.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;
  box-shadow:0 8px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,210,122,.06);position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,transparent,var(--acc2),transparent);opacity:.7}

.resumen{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px}
.resumen .lbl{display:block;color:var(--mut);font-size:.8rem;text-transform:uppercase;letter-spacing:.5px}
.resumen .val{display:block;font-size:1.15rem;font-weight:600;margin-top:4px;color:var(--acc3)}

.grid-pjs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.pj{transition:transform .25s,box-shadow .25s}
.pj:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(0,0,0,.55),0 0 0 1px rgba(233,145,52,.4)}
.pj-head{display:flex;align-items:center;justify-content:space-between}
.pj-head h3{margin:0;font-size:1.2rem;color:var(--acc3)}
.estado{font-size:.7rem;font-weight:700;padding:3px 10px;border-radius:20px;text-transform:uppercase}
.estado.on{background:rgba(52,201,138,.16);color:var(--ok);box-shadow:0 0 10px rgba(52,201,138,.3)}
.estado.off{background:rgba(160,150,135,.14);color:var(--mut)}
.pj-clase{color:var(--mut);margin:6px 0 14px;font-style:italic}
.pj-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:7px 16px}
.pj-stats li{display:flex;justify-content:space-between;border-bottom:1px solid rgba(171,102,0,.15);padding:4px 0;font-size:.9rem}
.pj-stats span{color:var(--mut)}.pj-stats b{color:var(--txt)}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:680px){.grid-2{grid-template-columns:1fr}.panel-logo{font-size:1.2rem}}
.card h3{margin-top:0;color:var(--acc3);font-weight:600}
.form{display:flex;flex-direction:column;gap:13px;margin-top:12px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--mut)}
.form input{background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:10px;padding:12px;color:var(--txt);font-size:1rem;font-family:var(--serif);transition:.2s}
.form input:focus{outline:none;border-color:var(--acc2);box-shadow:0 0 0 3px rgba(233,145,52,.18)}
.actual{color:var(--mut);font-size:.85rem}
.btn{cursor:pointer;border:none;border-radius:10px;padding:13px 18px;font-weight:700;font-size:1rem;font-family:var(--serif);color:#1a1206;
  background:linear-gradient(135deg,var(--acc3),var(--acc2) 55%,var(--acc));box-shadow:0 6px 20px rgba(171,102,0,.4);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(233,145,52,.55)}
.btn:active{transform:translateY(0)}

.msg{padding:12px 15px;border-radius:10px;margin:10px 0;font-size:.92rem;border:1px solid}
.msg.ok{background:rgba(52,201,138,.1);color:var(--ok);border-color:rgba(52,201,138,.35)}
.msg.error{background:rgba(224,82,74,.1);color:var(--err);border-color:rgba(224,82,74,.35)}
.msg.warn{background:rgba(233,145,52,.1);color:var(--warn);border-color:rgba(233,145,52,.35)}

.tabla{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.tabla th,.tabla td{padding:12px 14px;text-align:left;border-bottom:1px solid rgba(171,102,0,.15);font-size:.9rem}
.tabla th{background:rgba(0,0,0,.35);color:var(--acc3);text-transform:uppercase;letter-spacing:.5px;font-size:.78rem}
.badge{font-size:.74rem;font-weight:700;padding:3px 10px;border-radius:20px}
.badge.ok{background:rgba(52,201,138,.16);color:var(--ok)}.badge.pend{background:rgba(233,145,52,.16);color:var(--warn)}

/* Login premium (sin backdrop-filter para máxima fluidez) */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.login-card{width:100%;max-width:400px;border:1px solid var(--line);border-radius:20px;padding:38px 32px;position:relative;
  background:linear-gradient(160deg,rgba(30,23,15,.95),rgba(12,10,7,.97));
  box-shadow:0 24px 70px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,210,122,.08)}
.login-card::before{content:"";position:absolute;inset:-60px;z-index:-1;border-radius:50%;will-change:transform;
  background:conic-gradient(from 0deg,rgba(171,102,0,0),rgba(233,145,52,.5),rgba(255,210,122,.18),rgba(171,102,0,0));
  filter:blur(36px);animation:spin 16s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.login-title{text-align:center;margin:0;font-size:2rem;font-weight:600}
.login-title span{background:linear-gradient(90deg,var(--acc2),var(--acc3));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(233,145,52,.4))}
.login-sub{text-align:center;color:var(--mut);margin:8px 0 22px;font-style:italic}
.login-foot{color:var(--mut);font-size:.78rem;text-align:center;margin-top:18px}
.login-card .btn{width:100%;margin-top:6px}
@media(prefers-reduced-motion:reduce){body::before,.login-card::before{animation:none}}

/* ===== Título flamígero AODrag Legacy ===== */
.login-title,.panel-logo{
  background:linear-gradient(92deg,#ab6600,#ffd27a,#fff3cc,#e99134,#ffd27a,#ab6600);
  background-size:240% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:tShimmer 6s linear infinite,tFlame 2.4s ease-in-out infinite alternate}
.login-title span,.panel-logo span{background:none;-webkit-text-fill-color:transparent;filter:none}
.login-title{font-size:2.6rem;letter-spacing:1px}
@keyframes tShimmer{to{background-position:240% center}}
@keyframes tFlame{
  0%{filter:drop-shadow(0 0 5px rgba(233,145,52,.45)) drop-shadow(0 0 12px rgba(255,80,20,.25))}
  100%{filter:drop-shadow(0 0 12px rgba(255,180,60,.85)) drop-shadow(0 0 26px rgba(255,80,20,.5))}}
@media(prefers-reduced-motion:reduce){.login-title,.panel-logo{animation:none}}

/* ===== Soporte / Tickets ===== */
.form select,.form textarea{width:100%;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:10px;padding:12px;color:var(--txt);font-size:1rem;font-family:var(--serif);transition:.2s;resize:vertical}
.form select:focus,.form textarea:focus{outline:none;border-color:var(--acc2);box-shadow:0 0 0 3px rgba(233,145,52,.18)}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--acc3);box-shadow:none}
.btn.ghost:hover{border-color:var(--acc2);background:rgba(233,145,52,.1);transform:none;box-shadow:none}
.tk-nuevo{margin-bottom:8px}
.tk-nuevo>summary{display:inline-block;width:auto;list-style:none;cursor:pointer;margin-bottom:14px}
.tk-nuevo>summary::-webkit-details-marker{display:none}
.tk-nuevo[open]>summary{opacity:.85}
.tk-nuevo .form.card{margin-top:0}
.tk-subtit{color:var(--acc3);margin:22px 0 12px;font-weight:600}
.tk-tabla tbody tr{cursor:pointer}
.tk-tabla tbody tr:hover{background:rgba(233,145,52,.06)}
.tk-estado{display:inline-block;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:20px;text-transform:uppercase;white-space:nowrap}
.tk-estado.abierto{background:rgba(233,145,52,.16);color:var(--warn)}
.tk-estado.respondido{background:rgba(52,201,138,.16);color:var(--ok)}
.tk-estado.cerrado{background:rgba(160,150,135,.14);color:var(--mut)}
.tk-volver{margin:0 0 14px}
.tk-detalle-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.tk-detalle-head h3{margin:0 0 8px}
.tk-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}
.tk-cat{font-size:.78rem;color:var(--mut);background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:20px;padding:3px 10px}
.tk-inline{margin:0}
.tk-hilo{display:flex;flex-direction:column;gap:12px;margin:20px 0}
.tk-msg{display:flex}
.tk-msg.staff{justify-content:flex-start}
.tk-msg.jugador{justify-content:flex-end}
.tk-bubble{max-width:80%;border:1px solid var(--line);border-radius:14px;padding:11px 14px;background:rgba(0,0,0,.28)}
.tk-msg.staff .tk-bubble{background:rgba(233,145,52,.08);border-color:rgba(233,145,52,.3)}
.tk-autor{display:flex;justify-content:space-between;gap:14px;font-size:.76rem;font-weight:700;color:var(--acc3);margin-bottom:6px}
.tk-fecha{color:var(--mut);font-weight:400}
.tk-cuerpo{font-size:.95rem;line-height:1.5;word-break:break-word}
.tk-responder{margin-top:18px}
@media(max-width:680px){.tk-bubble{max-width:92%}}