/* =====================================================================
   La Gran Casa — aspecto nuevo (capa que va encima de style.css)

   Idea: interfaz oscura de tarjetas con brillo suave y UN solo color de
   acento. Por defecto el acento es dorado; el celeste se activa con
   data-accent="celeste" (ver accent-celeste.css).

   El acento se controla con cuatro variables:
     --gold       color principal (botones, íconos, bordes activos)
     --gold-soft  fondo suave del acento
     --gold-ink   texto sobre fondo suave
     --gold-rgb   el mismo color como "R,G,B" (para brillos y transparencias)
   ===================================================================== */

:root {
  --gold-rgb: 200, 155, 60;
  --on-accent: #14110A;
  --r-card: 20px;
  --r-ctl: 12px;
  --sheen: none;
}

/* ---------- Paleta oscura (la de la imagen de referencia) ---------- */
:root[data-theme="dark"] {
  --paper: #07070B; --card: #0F1016; --field: #15161E; --hover: #1B1C26; --border: #252631;
  --ink: #F4F1E8; --ink-soft: #9D9BA6;
  --gold: #D9AC45; --gold-ink: #EBCB7A; --gold-soft: rgba(217, 172, 69, .16); --gold-rgb: 217, 172, 69;
  --teal: #7FD1A4; --teal-soft: rgba(127, 209, 164, .14);
  --red: #EE9A8A; --red-soft: rgba(238, 154, 138, .14);
  --pend-bg: rgba(238, 154, 138, .14); --pend-ink: #EE9A8A;
  --g1: .16; --g2: .10;
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
  --cglow-h: 0 16px 44px rgba(var(--gold-rgb), .30);
  --cglow-p: 0 10px 38px rgba(var(--gold-rgb), .18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #07070B; --card: #0F1016; --field: #15161E; --hover: #1B1C26; --border: #252631;
    --ink: #F4F1E8; --ink-soft: #9D9BA6;
    --gold: #D9AC45; --gold-ink: #EBCB7A; --gold-soft: rgba(217, 172, 69, .16); --gold-rgb: 217, 172, 69;
    --teal: #7FD1A4; --teal-soft: rgba(127, 209, 164, .14);
    --red: #EE9A8A; --red-soft: rgba(238, 154, 138, .14);
    --pend-bg: rgba(238, 154, 138, .14); --pend-ink: #EE9A8A;
    --g1: .16; --g2: .10;
    --sheen: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
    --cglow-h: 0 16px 44px rgba(var(--gold-rgb), .30);
    --cglow-p: 0 10px 38px rgba(var(--gold-rgb), .18);
  }
}

/* ---------- Tipografía ---------- */
body { -webkit-font-smoothing: antialiased; }
h1, h2, h3 { letter-spacing: -.015em; }
.top h1 { font-size: 36px; font-weight: 700; letter-spacing: -.025em; line-height: 1.12; }
.top p { margin-top: 6px; }
.stat .v { font-weight: 600; letter-spacing: -.02em; }
th { font-weight: 500; }

/* ---------- Luces de fondo (siguen el color de acento) ---------- */
body::before {
  background:
    radial-gradient(820px 520px at 6% 12%, rgba(var(--gold-rgb), var(--g1)), transparent 62%),
    radial-gradient(760px 560px at 96% 100%, rgba(var(--gold-rgb), var(--g2)), transparent 60%),
    radial-gradient(560px 380px at 100% 0%, rgba(var(--gold-rgb), calc(var(--g2) * .6)), transparent 62%),
    radial-gradient(560px 420px at 0% 100%, rgba(var(--gold-rgb), calc(var(--g2) * .6)), transparent 62%);
}

/* ---------- Tarjetas ---------- */
.stat, .panel, .ev, .choice, .filt {
  border-radius: var(--r-card);
  background-image: var(--sheen);
}
.stat { padding: 22px 24px; }
.stat .l { color: var(--ink-soft); }
.pill { background: var(--gold-soft); color: var(--gold-ink); font-weight: 500; }
.ev { transition: border-color .2s, box-shadow .25s, transform .25s; }
.ev:hover { border-color: var(--gold); box-shadow: var(--cglow-h); transform: translateY(-3px); }
.choice { transition: border-color .2s, box-shadow .25s, transform .25s; }
.choice:hover { border-color: var(--gold); box-shadow: var(--cglow-p); transform: translateY(-2px); }
.ci { border-radius: 50%; width: 46px; height: 46px; background: var(--gold-soft); color: var(--gold-ink); }
:root[data-theme="dark"] .stat:hover, :root[data-theme="dark"] .panel:hover { border-color: rgba(var(--gold-rgb), .5); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stat:hover, :root:not([data-theme="light"]) .panel:hover { border-color: rgba(var(--gold-rgb), .5); }
}

/* ---------- Botones ---------- */
.btn { border-radius: var(--r-ctl); padding: 10px 18px; font-weight: 500;
  transition: background .18s, border-color .18s, box-shadow .2s, transform .18s, filter .18s; }
.btn:hover { border-color: rgba(var(--gold-rgb), .55); }
.btn.primary, .btn.primary:hover { background: var(--gold); color: var(--on-accent); border-color: transparent; font-weight: 600; opacity: 1; }
.btn.primary { box-shadow: 0 8px 22px rgba(var(--gold-rgb), .28); }
.btn.primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn.primary:active { transform: none; }

/* ---------- Campos ---------- */
.tb input, .tb select, .f input, .f select, .top select, .cb input[type=text], .rsel { border-radius: var(--r-ctl); transition: border-color .15s, box-shadow .15s; }
.tb input:focus, .tb select:focus, .f input:focus, .f select:focus, .top select:focus, .cb input[type=text]:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .2);
}

/* ---------- Tablas y etiquetas ---------- */
tr.row:hover { background: rgba(var(--gold-rgb), .07); }
.pend { background: var(--pend-bg, #EFE3E1); color: var(--pend-ink, #9A6558); }

/* ---------- Ventanas ---------- */
dialog { border-radius: 24px; box-shadow: 0 30px 90px rgba(0, 0, 0, .5); }
dialog::backdrop { background: rgba(4, 4, 8, .66); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }

/* ---------- Pantalla de acceso ---------- */
body.locked #auth {
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(var(--gold-rgb), .22), transparent 62%),
    radial-gradient(760px 560px at 100% 100%, rgba(var(--gold-rgb), .14), transparent 60%),
    #06060A;
}
.acard { border-radius: 26px; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 30px 90px rgba(0, 0, 0, .6); }
.acard h1 { font-weight: 700; letter-spacing: -.02em; }

/* ---------- Encabezado (solo en pantallas anchas: en el celular el menú va abajo) ---------- */
header { border-bottom: 1px solid rgba(255, 255, 255, .06); }
@media (min-width: 801px) {
  header { background: rgba(7, 7, 11, .82); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
  nav a { border-radius: 999px; padding: 9px 17px; transition: background .18s, color .18s; }
  nav a:hover { background: rgba(255, 255, 255, .06); }
  nav a.on { background: rgba(var(--gold-rgb), .14); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .38); }
}

/* ---- Marca del encabezado: logo legible y texto alineado ---- */
.brand { gap: 14px; }
.brand-logo { height: 46px; width: auto; display: block; filter: drop-shadow(0 2px 8px rgba(var(--gold-rgb), .35)); }
.brand > span { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding-left: 14px; border-left: 1px solid rgba(var(--gold-rgb), .35); }
.brand b { font-size: 21px; font-weight: 600; letter-spacing: .01em; line-height: 1.05; }
.brand small { font-size: 10.5px; font-weight: 500; letter-spacing: .28em; color: var(--gold); line-height: 1; }
@media (max-width: 800px) {
  .brand-logo { height: 38px; }
  .brand { gap: 11px; }
  .brand > span { padding-left: 11px; }
  .brand b { font-size: 18px; }
  .brand small { font-size: 9.5px; }
}

/* ---- Encabezado en una sola fila (pantallas de escritorio y tablet) ---- */
.brand { flex: none; }
.brand-logo { flex: none; }
@media (min-width: 801px) {
  header { flex-wrap: nowrap; gap: 14px; padding-left: 22px; padding-right: 22px; }
  header nav#nav { flex: 1 1 auto; min-width: 0; justify-content: center; gap: 2px; overflow: hidden; }
  header nav#nav a { padding: 9px 11px; font-size: 15px; gap: 6px; }
  .me { flex: none; gap: 8px; }
  .mep > div { max-width: 150px; }
}
@media (min-width: 801px) and (max-width: 1280px) { #meE { display: none; } }
@media (min-width: 801px) and (max-width: 1040px) {
  .mep > div { display: none; }
  header nav#nav a { padding: 9px 8px; font-size: 14px; gap: 5px; }
}
@media (min-width: 801px) and (max-width: 1180px) { header nav#nav a svg { display: none; } }
@media (min-width: 801px) and (max-width: 900px) {
  header { gap: 8px; padding-left: 16px; padding-right: 16px; }
  .brand-logo { height: 40px; }
  .brand b { font-size: 18px; }
  header nav#nav a { padding: 9px 5px; font-size: 13.5px; }
}

/* ---- Menú superior con 7 pestañas (administrador): que siempre entre ---- */
@media (min-width: 801px) {
  .nx { display: none; }
  header nav#nav { overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
  header nav#nav::-webkit-scrollbar { display: none; }
  header nav#nav { justify-content: center; }
  .mep > div { display: none; }
}
@media (min-width: 1500px) { .mep > div { display: block; } }
@media (min-width: 801px) and (max-width: 860px) {
  header nav#nav a { padding: 9px 3px; font-size: 12.5px; }
}
@media (min-width: 901px) and (max-width: 1040px) {
  header nav#nav a { padding: 9px 6px; font-size: 13.5px; }
}
@media (min-width: 1181px) and (max-width: 1240px) { header nav#nav a svg { display: none; } }
@media (min-width: 901px) and (max-width: 1000px) { header nav#nav a { padding: 9px 4px; font-size: 13px; } }
@media (min-width: 801px) and (max-width: 840px) { header nav#nav a { padding: 9px 2px; font-size: 12px; } .brand b { font-size: 17px; } .brand-logo { height: 36px; } }