/* Compuasociados · modo oscuro «negro puro» estilo iOS (2026-10-21)
   Hoja adicional: se enlaza en index.html DESPUÉS de tahoe-motion.css. Solo actúa con html.dark; el claro no cambia.
   Paleta: fondo #000 · tarjetas #1c1c1e (vidrio rgba(28,28,30,.72)) · terciaria #2c2c2e · separadores #38383a / rgba(84,84,88,.65)
   texto #fff / rgba(235,235,245,.60) · acento de marca = dorado (#E2C77A → #B8964D). Sin tintes azules en fondos, bordes ni sombras.
   Se conservan los colores de datos (etiquetas semánticas, barras de gráficas) y la ilustración de Artemisa.
   Especificidad: «html.dark body …» iguala a «html:is(:root,.dark) body …» de tahoe.css y gana por orden; !important solo donde el bundle o un widget usan estilos en línea. */

/* ================= 1. TOKENS Y RAÍZ ================= */
html.dark {
  color-scheme: dark;
  background-color: #000;
  --th-text: #ffffff;
  --th-muted: rgba(235, 235, 245, .60);
  --th-surface: rgba(28, 28, 30, .72);
  --th-surface-2: rgba(44, 44, 46, .55);
  --th-surface-3: rgba(28, 28, 30, .96);
  --th-edge: rgba(255, 255, 255, .12);
  --th-line: rgba(84, 84, 88, .65);
  --th-hair: rgba(84, 84, 88, .55);
  --th-shadow: 0 1px 0 rgba(255, 255, 255, .10) inset, 0 18px 40px -18px rgba(0, 0, 0, .9), 0 2px 8px -3px rgba(0, 0, 0, .6);
  --th-shadow-sm: 0 1px 0 rgba(255, 255, 255, .09) inset, 0 10px 24px -14px rgba(0, 0, 0, .85);
  --th-solid: #1c1c1e;
  --th-navy: #2c2c2e; --th-navy-2: #3a3a3c; --th-ink: #000000;
  --ng-gold: linear-gradient(135deg, #E2C77A, #B8964D);
  --ng-gold-sheen: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 55%);
  --ng-lbl-2: rgba(235, 235, 245, .80);   /* texto de cuerpo */
  --ng-lbl-3: rgba(235, 235, 245, .60);   /* leyendas */
  --ng-lbl-4: rgba(235, 235, 245, .56);   /* iconos / deshabilitado */
}
@media (prefers-reduced-transparency: reduce) {
  html.dark { --th-surface: rgba(28, 28, 30, .98); --th-surface-2: rgba(44, 44, 46, .98); --th-surface-3: #1c1c1e; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.dark { --th-surface: rgba(28, 28, 30, .94); --th-surface-2: rgba(44, 44, 46, .94); }
}

/* fondo de página: negro puro, sin halos ni degradados */
html.dark body:is(body) { background: #000 !important; background-color: #000 !important; color: #fff; }

/* ================= 2. TEXTO (utilidades del bundle) ================= */
html.dark body :is(.text-ink-900, .text-slate-900, .text-slate-800, .text-slate-100) { color: #fff !important; }
html.dark body :is(.text-ink-700, .text-ink-600, .text-slate-700, .text-slate-600) { color: var(--ng-lbl-2) !important; }
html.dark body :is(.text-ink-500, .text-slate-500) { color: var(--th-muted) !important; }
html.dark body :is(.text-ink-400, .text-slate-400) { color: var(--ng-lbl-3) !important; }
html.dark body :is(.text-ink-300, .text-slate-300) { color: var(--ng-lbl-4) !important; }
html.dark body .text-navy { color: #fff !important; }
html.dark body :is(a, button).text-navy { color: #E2C77A !important; }
html.dark body input::placeholder, html.dark body textarea::placeholder { color: rgba(235, 235, 245, .58); opacity: 1; }

/* ================= 3. BORDES, SEPARADORES, FONDOS NEUTROS ================= */
html.dark body :is(.border-slate-50, .border-slate-100, .border-ink-100) { border-color: rgba(84, 84, 88, .45) !important; }
html.dark body .border-slate-200 { border-color: var(--th-line) !important; }
html.dark body .border-slate-300 { border-color: rgba(99, 99, 102, .75) !important; }
html.dark body .border-navy { border-color: rgba(201, 169, 97, .55) !important; }
html.dark body .ring-navy { --tw-ring-color: rgba(201, 169, 97, .55) !important; }
html.dark body .divide-y > :not([hidden]) ~ :not([hidden]), html.dark body .divide-slate-50 > :not([hidden]) ~ :not([hidden]) { border-color: var(--th-line); }
html.dark body .bg-slate-200 { background-color: rgba(255, 255, 255, .14) !important; }
html.dark body .bg-slate-300 { background-color: rgba(255, 255, 255, .22) !important; }
html.dark body .bg-slate-900 { background-color: #000 !important; }
html.dark body .bg-cream { background-color: rgba(226, 199, 122, .12) !important; }
html.dark body :is(.hover\:bg-slate-200:hover, .hover\:bg-cream:hover) { background-color: var(--th-hover) !important; }
html.dark body .bg-ink-100.rounded, html.dark body .bg-ink-100.rounded.overflow-hidden { background-color: rgba(255, 255, 255, .10) !important; }
html.dark ::-webkit-scrollbar-thumb { border-color: transparent !important; }
html.dark body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea) {
  background-color: rgba(44, 44, 46, .72); border-color: var(--th-line); box-shadow: 0 1px 2px rgba(0, 0, 0, .35) inset;
}
html.dark body .rounded-full.border { border-color: var(--th-line); }

/* ================= 4. SOMBRAS NEUTRAS (las compartidas de tahoe.css llevan azul marino) ================= */
html.dark body aside.w-64 .inline-flex.h-9.w-9, html.dark body aside.w-64 .h-9.w-9 { box-shadow: 0 1px 0 rgba(255, 255, 255, .16) inset, 0 4px 10px -6px rgba(0, 0, 0, .8); }
html.dark body .bg-navy.bg-navy:not(button):not(a) { background-image: none !important; background-color: #2c2c2e !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 4px 10px -6px rgba(0, 0, 0, .8); }

/* ================= 5. BOTONES PRIMARIOS = DORADO CON TEXTO NEGRO ================= */
html.dark body :is(button, a).bg-navy.bg-navy,
html.dark body :is(button, a)[style*="linear-gradient"][style*="rgb(11, 31, 58)"],
html.dark body :is(button, a)[style*="linear-gradient"][style*="rgb(27, 51, 96)"],
html.dark body .pw-pop-btn,
html.dark body div.min-h-screen.grid form.max-w-sm button[type=submit] {
  background-image: var(--ng-gold-sheen), var(--ng-gold) !important; background-color: #C9A961 !important;
  color: #000 !important; border: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 10px 20px -12px rgba(0, 0, 0, .9);
}
html.dark body :is(button, a).bg-navy.bg-navy:hover,
html.dark body :is(button, a)[style*="linear-gradient"][style*="rgb(11, 31, 58)"]:hover,
html.dark body :is(button, a)[style*="linear-gradient"][style*="rgb(27, 51, 96)"]:hover,
html.dark body .pw-pop-btn:hover { filter: brightness(1.06); }
/* cabeceras de modal con degradado azul en línea → gris iOS con filete */
html.dark body :not(button):not(a)[style*="linear-gradient"][style*="rgb(27, 51, 96)"] { background-image: none !important; background-color: #1c1c1e !important; border-bottom: 1px solid var(--th-line); }
/* botones/etiquetas inyectados (Estado de fuentes, etc.) con fondo azul marino en línea */
html.dark body :is(button, a)[style*="background: rgb(27, 51, 96)"]:not([style*="gradient"]),
html.dark body :is(button, a)[style*="background:#1B3360" i]:not([style*="gradient"]) { background: #1c1c1e !important; }
/* control segmentado / pestañas: el indicador pasa a gris iOS */
html.dark body .tm-ind.tm-ind-pill { background-color: #48484a; background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 55%); box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 6px 12px -8px rgba(0, 0, 0, .85); }
/* barra lateral: activo en dorado */
html.dark body aside.w-64 nav a.bg-cream, html.dark body aside.w-64 nav a.bg-cream:hover { color: #E2C77A; }

/* ================= 6. LOGIN ================= */
html.dark body div.hidden.flex-col.justify-center[style*="rgb(6, 20, 42)"] { background-color: #000 !important; }
html.dark body div.hidden.flex-col.justify-center > img.absolute { filter: grayscale(1) contrast(1.05); }
html.dark body div.hidden.flex-col.justify-center > div.absolute.inset-0[style*="linear-gradient"] { background-image: linear-gradient(160deg, rgba(0, 0, 0, .90) 0%, rgba(0, 0, 0, .80) 55%, rgba(0, 0, 0, .70) 100%) !important; }
html.dark body img[style*="background-color: rgb(6, 20, 42)"] { background-color: #000 !important; }

/* ================= 7. FONDOS DE MODAL, AVISOS, BURBUJAS ================= */
html.dark body .fixed.inset-0 > .absolute.inset-0 { background: rgba(0, 0, 0, .55) !important; }
html.dark body .pw-pop-overlay { background: rgba(0, 0, 0, .50) !important; }
html.dark body .fixed[style*="rgba(6, 20, 42"], html.dark body .fixed[style*="rgba(15, 30, 60"] { background: rgba(0, 0, 0, .62) !important; }
html.dark body div[style*="background-color: rgb(11, 31, 58)"] { background-color: #3a3a3c !important; }

/* ================= 8. MÁS UTILIDADES DEL BUNDLE (claras en el claro; aquí neutras o legibles) ================= */
html.dark body .text-slate-200 { color: #e5e5ea !important; }
html.dark body .text-gold-dark { color: #C9A961 !important; }
html.dark body :is(.text-navy\/40, .text-navy\/50) { color: var(--ng-lbl-3) !important; }
html.dark body :is(.hover\:text-navy:hover, .group:hover .group-hover\:text-navy) { color: #E2C77A !important; }
html.dark body .text-brand-600 { color: #E2C77A !important; }                        /* enlaces (radicados…) en dorado */
html.dark body .hover\:text-brand-700:hover { color: #F3DC93 !important; }
html.dark body button.text-violet-600 { color: #E2C77A; }
html.dark body button[style*="background-color: rgb(109, 40, 217)"] { background-color: #2c2c2e !important; color: #E2C77A !important; box-shadow: inset 0 0 0 1px rgba(201, 169, 97, .5); }
html.dark body .bg-slate-50\/60 { background-color: rgba(44, 44, 46, .55) !important; }
html.dark body .bg-slate-200\/80 { background-color: rgba(255, 255, 255, .14) !important; }
html.dark body .bg-slate-400 { background-color: #8e8e93 !important; }
html.dark body .bg-white\/80 { background-color: rgba(28, 28, 30, .80) !important; }
html.dark body :is(.bg-navy\/5, .bg-navy\/10) { background-color: rgba(255, 255, 255, .06) !important; }
html.dark body :is(.bg-navy\/40, .bg-navy\/50) { background-color: rgba(0, 0, 0, .55) !important; }
html.dark body [class~="bg-fuchsia-50"] { background-color: rgba(217, 70, 239, .14) !important; }
html.dark body [class~="bg-lime-50"] { background-color: rgba(132, 204, 22, .14) !important; }
html.dark body [class~="bg-amber-200"] { background-color: rgba(245, 158, 11, .30) !important; }
html.dark body :is(.hover\:bg-brand-50\/40:hover, .hover\:bg-brand-50\/50:hover, .hover\:bg-cream\/40:hover, .hover\:bg-cream\/50:hover, .hover\:bg-navy\/5:hover) { background-color: var(--th-hover) !important; }
html.dark body :is(.hover\:bg-red-50:hover, .hover\:bg-rose-100:hover) { background-color: rgba(239, 68, 68, .16) !important; }
html.dark body .hover\:bg-amber-100:hover { background-color: rgba(245, 158, 11, .18) !important; }
html.dark body :is(.hover\:bg-violet-50:hover, .hover\:bg-violet-100:hover, .hover\:bg-violet-200:hover) { background-color: rgba(139, 92, 246, .18) !important; }
html.dark body :is(.border-amber-200, .border-amber-300) { border-color: rgba(245, 158, 11, .45) !important; }
html.dark body :is(.border-emerald-200, .border-emerald-300) { border-color: rgba(16, 185, 129, .45) !important; }
html.dark body :is(.border-sky-200, .border-sky-300) { border-color: rgba(14, 165, 233, .45) !important; }
html.dark body :is(.border-violet-100, .border-violet-200, .border-violet-300) { border-color: rgba(139, 92, 246, .45) !important; }
html.dark body :is(.border-navy\/30, .border-navy\/40, .hover\:border-navy:hover, .hover\:border-navy\/40:hover) { border-color: rgba(201, 169, 97, .5) !important; }
/* colores semánticos de texto (etiquetas): se conserva el tono, solo se aclara para leerse sobre negro */
html.dark body :is(.text-blue-700, .text-sky-700, .text-sky-800) { color: #93c5fd; }
html.dark body :is(.text-cyan-700) { color: #67e8f9; }
html.dark body :is(.text-indigo-700) { color: #a5b4fc; }
html.dark body :is(.text-violet-400, .text-violet-500, .text-violet-700, .text-violet-800) { color: #c4b5fd; }
html.dark body :is(.text-purple-700) { color: #d8b4fe; }
html.dark body :is(.text-fuchsia-700) { color: #f0abfc; }
html.dark body :is(.text-pink-700) { color: #f9a8d4; }
html.dark body :is(.text-teal-700) { color: #5eead4; }
html.dark body :is(.text-lime-700) { color: #bef264; }
html.dark body :is(.text-orange-700) { color: #fdba74; }
html.dark body :is(.text-amber-500, .text-amber-600, .text-amber-700, .text-amber-800) { color: #fcd34d; }
html.dark body :is(.text-emerald-600, .text-emerald-700, .text-emerald-800, .text-green-700) { color: #6ee7b7; }
html.dark body :is(.text-red-600, .text-red-700, .text-rose-500, .text-rose-600, .text-rose-700) { color: #fca5a5; }

/* ================= 9. BOTÓN PRIMARIO DESHABILITADO ================= */
html.dark body :is(button, a).bg-navy.bg-navy:is(:disabled, [disabled], [aria-disabled=true]),
html.dark body :is(button, a)[style*="linear-gradient"]:is([style*="rgb(11, 31, 58)"], [style*="rgb(27, 51, 96)"]):is(:disabled, [disabled]) {
  background-image: none !important; background-color: #2c2c2e !important; color: var(--ng-lbl-4) !important; box-shadow: none; filter: none; opacity: 1;
}

/* ================= 10. WIDGETS INYECTADOS EN index.html (Estado de fuentes, Backups…): hojas con estilos en línea ================= */
html.dark body div[style*="position: fixed"][style*="rgba(15, 30, 60"] { background: rgba(0, 0, 0, .62) !important; }
html.dark body div[style*="position: fixed"][style*="rgba(15, 30, 60"] > div[style*="background:#fff"] { background: #1c1c1e !important; color: #fff; border: 1px solid var(--th-edge); box-shadow: 0 24px 60px rgba(0, 0, 0, .65) !important; }
html.dark body div[style*="position: fixed"][style*="rgba(15, 30, 60"] div div[style*="background:#fff" i] { background: #2c2c2e !important; }
html.dark body div[style*="position: fixed"][style*="rgba(15, 30, 60"] :is([style*="background:#F7F9FC" i], [style*="background:#f8fafc" i], [style*="background:#f1f5f9" i]) { background: rgba(255, 255, 255, .06) !important; }
html.dark body div[style*="position: fixed"][style*="rgba(15, 30, 60"] :is([style*="color:#1B3360" i], [style*="color:#0b0b0b" i], [style*="color:#0b1f3a" i]) { color: #fff !important; }
html.dark body div[style*="position: fixed"][style*="rgba(15, 30, 60"] [style*="color:#64748b" i] { color: var(--th-muted) !important; }
html.dark body div[style*="position: fixed"][style*="rgba(15, 30, 60"] [style*="color:#334155" i] { color: var(--ng-lbl-2) !important; }
html.dark body div[style*="position: fixed"][style*="rgba(15, 30, 60"] :is([style*="solid #e5e9f0" i], [style*="solid #e6eaf1" i], [style*="solid #e2e8f0" i], [style*="solid #eef1f6" i]) { border-color: var(--th-line) !important; }
html.dark body div[style*="position: fixed"][style*="rgba(15, 30, 60"] :is(tr:hover, .mjmf-frow:hover, .mjmf-row:hover) { background: var(--th-hover) !important; }

/* píldora OK dentro de la hoja «Estado de fuentes»: texto oscuro (blanco sobre verde no llega a AA); el botón lateral lo gobierna tahoe-busqueda.css */
html.dark body div[style*="rgba(15, 30, 60"] span[style*="background:#1baf7a"] { color: #04210f !important; }
html.dark body :is(button, a)[style*="background: rgb(248, 250, 252)"] { background: #2c2c2e !important; color: var(--ng-lbl-3) !important; }

/* indicador deslizante del control segmentado: el segmento activo conserva texto blanco sobre el gris iOS */
html.dark body .tm-seg > button.bg-navy.bg-navy { color: #fff !important; }

/* ================= 11. MÓVIL: telón del cajón lateral sin tinte azul ================= */
html.dark.th-open-m body aside.w-64 + main::after { background: rgba(0, 0, 0, .55); }
