/* === AGS • Tema Oscuro (base) =========================================
   Enfocado en estructura visual, contraste y “buen gusto” sin fuegos artificiales.
   Los tokens se consumen desde base.css (inputs, cards, botones, etc).
   =====================================================================*/

body.theme-dark{
  /* PALETA BASE */
  --bg:        #0f1216;
  --fg:        #e8e9ed;
  --muted:     #a6acb9;

  /* Superficies */
  --card:      #151a21;
  --card-2:    #11161c;

  /* AGS (institucional) */
  --accent:    #ff6600;       /* primario naranja */
  --accent-2:  #ff8533;       /* hover */
  --accent-3:  #ffa366;       /* activo/focus suave */

  /* Bordes / sombras */
  --ui-bd:     rgba(255,255,255,.12);
  --ui-bd-2:   rgba(255,255,255,.08);
  --ring:      rgba(255,102,0,.28);

  /* Decor util */
  --chip-bg:   #12171d;
  --dash:      rgba(255,255,255,.18);

  color-scheme: dark;
  background:
    radial-gradient(1100px 500px at 75% -10%, rgba(255,102,0,.06), transparent 60%),
    radial-gradient(900px 520px at 15% -12%, rgba(0,153,255,.04), transparent 60%),
    linear-gradient(#0f1216,#0f1216);
  color: var(--fg);
}

/* CONTENEDOR PRINCIPAL */
body.theme-dark .container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px;
}

/* TARJETAS */
body.theme-dark .card{
  background: var(--card);
  border: 1px solid var(--ui-bd);
  box-shadow:
    0 1px 0 rgba(0,0,0,.25) inset,
    0 6px 22px rgba(0,0,0,.25);
}

/* TITULARES */
body.theme-dark h1{ color: var(--fg); }
body.theme-dark .badge{ color: var(--muted); border-color: var(--ui-bd); }

/* CAMPOS */
body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea{
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--ui-bd);
  border-radius: 12px;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder{ color: rgba(232,233,237,.36); }

body.theme-dark input:focus,
body.theme-dark select:focus,
body.theme-dark textarea:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 6px var(--ring);
}

/* BOTONES */
body.theme-dark .btn{
  color: var(--fg);
  border: 1px solid var(--ui-bd);
  background: transparent;
  border-radius: 12px;
  font-weight: 700;
  transition: transform .08s ease, box-shadow .2s, background-color .2s, border-color .2s, opacity .2s;
}
body.theme-dark .btn:hover{
  border-color: var(--ui-bd-2);
  background: rgba(255,255,255,.03);
}
body.theme-dark .btn:active{ transform: translateY(1px); }

body.theme-dark .btn.primary{
  color: #16181d;
  border-color: transparent;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  box-shadow:
    0 6px 18px rgba(255,102,0,.20),
    0 1px 0 rgba(255,255,255,.08) inset;
}
body.theme-dark .btn.primary:hover{
  background: linear-gradient(180deg, var(--accent-3), var(--accent-2));
  box-shadow:
    0 10px 26px rgba(255,102,0,.28),
    0 1px 0 rgba(255,255,255,.10) inset;
}
body.theme-dark .btn.primary:active{
  transform: translateY(1px);
  box-shadow:
    0 4px 12px rgba(255,102,0,.22),
    0 1px 0 rgba(0,0,0,.15) inset;
}
body.theme-dark .btn:disabled{
  opacity:.55; cursor:not-allowed; filter:saturate(.6);
}

/* OVALITOS (resumen rápido) */
body.theme-dark .nu-quick{ gap: 10px; }
body.theme-dark .nu-quick .chip{
  background: var(--chip-bg);
  border: 1px solid var(--ui-bd);
  border-radius: 999px;
}
body.theme-dark .nu-quick .k{ color: var(--muted); }
body.theme-dark .nu-quick .v{ font-weight: 800; }

/* ENERGÍAS (día/semana/mes/año) */
body.theme-dark .nu-energy .pill{
  background: rgba(255,255,255,.02);
  border: 1px dashed var(--dash);
  border-radius: 12px;
}
body.theme-dark .nu-energy .k{ color: var(--muted); }
body.theme-dark .nu-energy .v{ font-weight: 800; }

/* SEPARADORES */
body.theme-dark .hr{
  height:1px;
  background: var(--ui-bd);
  margin:12px 0;
}

/* Botones “+ Agregar …” con contorno visible */
body.theme-dark #nu-btn-parents,
body.theme-dark #nu-btn-add-child{
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--ui-bd);
}
body.theme-dark #nu-btn-parents:hover,
body.theme-dark #nu-btn-add-child:hover{
  color: var(--fg);
  border-color: var(--ui-bd-2);
  background: rgba(255,255,255,.03);
}

/* COMPARADOR (pequeñas sutilezas) */
body.theme-dark #nu-compare-btn{
  border-color: var(--ui-bd);
}
body.theme-dark #nu-compare-out{
  border-color: var(--ui-bd);
  color: var(--muted);
}

/* Portal oculto por defecto (la lógica lo abre) */
body.theme-dark #secretModal{ display:none; }

/* Fondo de runas estáticas (si algún tema lo usa) */
body.theme-dark #rv-runes-static{ pointer-events:none; }

/* === BORDES VISIBLES (sin magia) =================================== */
body.theme-dark{
  /* colores de borde un poco más presentes */
  --chip-bd: rgba(160, 195, 230, .22);   /* ovalitos de arriba */
  --pill-bd: rgba(200, 210, 225, .26);   /* Día/Semana/Mes/Año (dashed) */
}

/* Ovalitos superiores */
body.theme-dark .nu-quick .chip{
  border-color: var(--chip-bd);
  /* leve relieve sin “magia” */
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.25)) border-box;
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 6px 18px rgba(0,0,0,.25);
}
body.theme-dark .nu-quick .k{ color: var(--muted); }
body.theme-dark .nu-quick .v{ font-weight: 800; letter-spacing: .3px; }

/* Energías (Día/Semana/Mes/Año) */
body.theme-dark .nu-energy .pill{
  border: 1px dashed var(--pill-bd);
  background: rgba(255,255,255,.02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}