/* --- Tokens Material 3 (tema oscuro), acotados al admin (login/inicio/panel/preguntas). ---
   El resto de la app (player/screen) mantiene la estética "arcade" de game.css sin tocar;
   estas variables solo existen dentro de body.admin-body / body.admin-page-body. */
body.admin-body, body.admin-page-body{
  --md-surface:#141316;
  --md-surface-container:#1e1d21;
  --md-surface-container-high:#28262c;
  --md-outline:#49454f;
  --md-on-surface:#e6e1e5;
  --md-on-surface-variant:#a8a3ab;
  --md-primary:#c9c3ff;
  --md-primary-strong:#6e6def;
  --md-primary-strong-hover:#8382f2;
  --md-on-primary:#ffffff;
  --md-error:#f2b8b5;
  --md-on-error:#410002;
  --md-elev-1:0 1px 2px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.25);
  --md-elev-2:0 2px 6px rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.25);
}

body.admin-body{
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; padding:16px;
  background:var(--md-surface);
}
body.admin-body::before{ content:none; }
body.admin-body .logo-badge{ color:var(--md-on-surface-variant); border-color:var(--md-outline); }
body.admin-body .auth-card{
  background:var(--md-surface-container); border:1px solid var(--md-outline);
  box-shadow:var(--md-elev-2); border-radius:24px;
}
body.admin-body .auth-card input[type=password], body.admin-body .auth-card input[type=text]{
  background:var(--md-surface-container-high); border:1px solid var(--md-outline); border-radius:12px; color:var(--md-on-surface);
}
body.admin-body .auth-card input:focus{ border-color:var(--md-primary); box-shadow:0 0 0 3px rgba(201,195,255,.2); }

/* Panel de control / preguntas: contenido de alto variable (tablas, formularios),
   no debe centrarse verticalmente como las pantallas de juego, ni mostrar la
   curva decorativa de fondo (pensada para el "stage" cuadrado del juego, no
   para un panel de administración con scroll). */
body.admin-page-body{
  display:block;
  min-height:100vh;
  padding:16px;
  background:var(--md-surface);
}
body.admin-page-body::before{ content:none; }

/* Botones: Material 3 usa formas full-rounded, sin bisel 3D ni mayúsculas.
   Se pisa acá .btn (compartido con player/screen) solo dentro del admin. */
body.admin-body .btn, body.admin-page-body .btn{
  font-family:'Inter',Arial,sans-serif; font-weight:600; font-size:14px;
  text-transform:none; letter-spacing:normal;
  border:none; border-radius:20px; padding:10px 24px; cursor:pointer;
  background:var(--md-primary-strong); color:var(--md-on-primary);
  box-shadow:none;
  transition:background .15s ease, box-shadow .15s ease;
}
body.admin-body .btn:hover, body.admin-page-body .btn:hover{ background:var(--md-primary-strong-hover); }
body.admin-body .btn:active, body.admin-page-body .btn:active{ transform:none; box-shadow:none; }
body.admin-body .btn:disabled, body.admin-page-body .btn:disabled{ opacity:.38; cursor:not-allowed; }
body.admin-page-body .btn.danger{ background:var(--md-error); color:var(--md-on-error); }
body.admin-page-body .btn.danger:hover{ background:#ffcdc9; }
body.admin-page-body .btn.secondary{ background:var(--md-surface-container-high); color:var(--md-on-surface); border:1px solid var(--md-outline); }
body.admin-page-body .admin-actions .btn{ font-size:13.5px; padding:10px 20px; }

/* Inicio: hub de acceso a las secciones del admin. */
body.admin-inicio-body{
  display:flex; align-items:center; justify-content:center;
}
.admin-inicio{
  width:100%; max-width:720px; position:relative;
  display:flex; flex-direction:column; align-items:center; gap:36px;
}
.admin-inicio-exit{
  position:absolute; top:-6px; right:0; font-size:13px; color:var(--md-on-surface-variant);
}
.admin-inicio-brand{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.admin-inicio-brand .logo-360{ width:90px; }
.admin-inicio-brand .logo-challenge{ width:170px; }

.admin-inicio-menu{
  width:100%; display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:16px;
}
.admin-inicio-card{
  display:flex; flex-direction:column; gap:8px; text-align:left; text-decoration:none;
  background:var(--md-surface-container); border:1px solid var(--md-outline); border-radius:16px;
  padding:22px 20px; box-shadow:var(--md-elev-1);
  transition:box-shadow .15s ease, background .15s ease;
}
.admin-inicio-card:hover{ background:var(--md-surface-container-high); box-shadow:var(--md-elev-2); }
.admin-inicio-card-title{ font-family:'Inter',Arial,sans-serif; font-weight:700; font-size:17px; color:var(--md-on-surface); }
.admin-inicio-card-desc{ font-size:13px; color:var(--md-on-surface-variant); line-height:1.4; }

/* Dashboard (Partida / Preguntas / Editar) */
.admin-dashboard{ max-width:960px; margin:0 auto; padding:20px 16px; font-family:'Inter',Arial,sans-serif; color:var(--md-on-surface); position:relative; z-index:1; }
.admin-panel{
  background:var(--md-surface-container); border:1px solid var(--md-outline); border-radius:16px;
  padding:18px; margin-bottom:16px; box-shadow:var(--md-elev-1);
}
.admin-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.admin-topbar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--md-outline);
}
.admin-topbar h1{ font-family:'Inter',Arial,sans-serif; font-weight:700; font-size:19px; color:var(--md-on-surface); }
.admin-nav{ display:flex; align-items:center; gap:18px; font-size:13px; }
.admin-nav a{ color:var(--md-on-surface-variant); text-decoration:none; }
.admin-nav a:hover{ color:var(--md-primary); }
.admin-nav-exit{ color:var(--md-on-surface-variant) !important; opacity:.7; }

.admin-card{
  background:var(--md-surface-container); border:1px solid var(--md-outline); border-radius:20px;
  padding:22px 24px; margin-bottom:14px; box-shadow:var(--md-elev-1);
}
.admin-card .admin-actions{ margin-top:18px; padding-top:16px; border-top:1px solid var(--md-outline); }

.admin-log{ font-size:13px; color:var(--md-on-surface-variant); }
.admin-log summary{
  cursor:pointer; padding:10px 4px; color:var(--md-on-surface-variant); letter-spacing:.3px;
  font-size:12.5px;
}
.admin-log summary:hover{ color:var(--md-primary); }
.admin-log .log-list{ margin-top:8px; padding:0 4px; }

.status-line{ display:flex; gap:18px; flex-wrap:wrap; font-size:13.5px; margin-bottom:10px; }
.status-line b{ color:var(--md-primary); }
.admin-scoreboard{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:10px; }
.admin-scoreboard .chip{ border-radius:12px; padding:10px; text-align:center; border:1px solid var(--tc); }
.admin-scoreboard .chip.active{ background:var(--tc); color:#08123a; }
.admin-scoreboard .chip.wrong{ opacity:.5; }

table.q-table{ width:100%; border-collapse:collapse; font-size:13px; }
table.q-table th, table.q-table td{ padding:8px 10px; border-bottom:1px solid var(--md-outline); text-align:left; color:var(--md-on-surface); }
table.q-table a{ color:var(--md-primary); text-decoration:none; margin-right:10px; }
.badge-tipo{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; background:var(--md-surface-container-high); color:var(--md-on-surface-variant); }

.q-form label{ display:block; margin-bottom:12px; font-size:13px; color:var(--md-on-surface-variant); }
.q-form input[type=text], .q-form input[type=number], .q-form textarea, .q-form select{
  width:100%; margin-top:4px; padding:9px 10px; border-radius:10px; border:1px solid var(--md-outline);
  background:var(--md-surface-container-high); color:var(--md-on-surface); font-family:'Inter',Arial,sans-serif; font-size:14px;
}
.q-form input:focus, .q-form textarea:focus, .q-form select:focus{
  outline:none; border-color:var(--md-primary); box-shadow:0 0 0 3px rgba(201,195,255,.2);
}
.q-form textarea{ min-height:70px; }
.opcion-row, .punto-row{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.opcion-row input[type=text]{ flex:1; }
.opcion-row input[type=radio], .punto-row input[type=radio]{ width:auto; }
.log-list{ font-size:12px; max-height:180px; overflow-y:auto; }
.log-list div{ padding:4px 0; border-bottom:1px solid rgba(255,255,255,.06); color:var(--md-on-surface-variant); }
.field-error{ color:var(--md-error); font-size:12.5px; margin-bottom:10px; }