/* Compuasociados · diseño Liquid Glass / Tahoe (2026-10-20)
   Hoja adicional: se carga al final de index.html y sobreescribe, sin tocar el bundle minificado.
   «html:is(:root, .dark) body» = html:is(:root,.dark) body  (sube la especificidad por encima de las reglas html.dark ... del tema negro).
   Reglas de oro: un solo nivel de backdrop-filter anidado; no se anima blur ni box-shadow; solo transform/opacity. */

/* ================= TOKENS ================= */
:root {
  --th-navy: #0B1F3A; --th-navy-2: #1B3360; --th-ink: #06142A;
  --th-gold: #C9A961; --th-gold-2: #E2C77A; --th-gold-d: #9A7E3A; --th-blue: #1E88E5;
  --th-text: #0f1e33; --th-muted: #5b6b82;
  --th-surface: rgba(255, 255, 255, .62);      /* paneles / tarjetas */
  --th-surface-2: rgba(255, 255, 255, .46);    /* interior de paneles, filas */
  --th-surface-3: rgba(255, 255, 255, .86);    /* campos, menús, hojas modales */
  --th-edge: rgba(255, 255, 255, .78);         /* borde especular 1 px */
  --th-line: rgba(11, 31, 58, .09);            /* separadores */
  --th-hair: rgba(11, 31, 58, .10);            /* hairline exterior */
  --th-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 16px 36px -18px rgba(11, 31, 58, .30), 0 2px 8px -3px rgba(11, 31, 58, .10);
  --th-shadow-sm: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 8px 20px -12px rgba(11, 31, 58, .26);
  --th-focus: rgba(201, 169, 97, .50);
  --th-active: linear-gradient(135deg, rgba(226, 199, 122, .34), rgba(201, 169, 97, .14));
  --th-hover: rgba(11, 31, 58, .06);
  --th-r: 22px; --th-r-md: 16px; --th-r-sm: 12px;
  --th-blur: blur(20px) saturate(1.6);
  --th-solid: #F8FAFD;
  --th-sb: 216px; --th-sb-min: 64px;
}
html.dark {
  --th-text: #e7ecf3; --th-muted: #93a3bb;
  --th-surface: rgba(22, 30, 46, .58);
  --th-surface-2: rgba(30, 40, 62, .42);
  --th-surface-3: rgba(18, 26, 40, .92);
  --th-edge: rgba(255, 255, 255, .16);
  --th-line: rgba(255, 255, 255, .08);
  --th-hair: rgba(0, 0, 0, .55);
  --th-shadow: 0 1px 0 rgba(255, 255, 255, .10) inset, 0 18px 40px -18px rgba(0, 0, 0, .85), 0 2px 8px -3px rgba(0, 0, 0, .5);
  --th-shadow-sm: 0 1px 0 rgba(255, 255, 255, .09) inset, 0 10px 24px -14px rgba(0, 0, 0, .8);
  --th-focus: rgba(226, 199, 122, .45);
  --th-active: linear-gradient(135deg, rgba(226, 199, 122, .24), rgba(201, 169, 97, .08));
  --th-hover: rgba(255, 255, 255, .07);
  --th-solid: #0E1624;
}

/* ================= FONDO (papel tapiz) ================= */
html:is(:root, .dark) body:is(body) {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  background:
    radial-gradient(1100px 640px at 6% -10%, rgba(30, 136, 229, .27), transparent 60%),
    radial-gradient(900px 560px at 100% 0%, rgba(201, 169, 97, .32), transparent 55%),
    radial-gradient(1000px 700px at 65% 112%, rgba(27, 51, 96, .22), transparent 60%),
    linear-gradient(180deg, #EEF3FA, #F7F3E9) !important;
  background-color: #EEF3FA !important;
}
html.dark body:is(body) {
  background:
    radial-gradient(900px 560px at 6% -12%, rgba(40, 76, 131, .42), transparent 60%),
    radial-gradient(800px 520px at 100% 0%, rgba(201, 169, 97, .15), transparent 55%),
    radial-gradient(900px 600px at 62% 115%, rgba(30, 136, 229, .13), transparent 60%),
    #04070D !important;
  background-color: #04070D !important;
}
html:is(:root, .dark) body main.bg-\[\#F4F6FA\], html:is(:root, .dark) body .bg-\[\#F4F6FA\], html:is(:root, .dark) body .bg-\[\#F7F9FC\], html:is(:root, .dark) body main { background: transparent !important; background-color: transparent !important; }

/* ================= MARCO DE LA APP ================= */
html:is(:root, .dark) body #root > div.flex.h-screen.overflow-hidden { padding: 10px; gap: 10px; }
html:is(:root, .dark) body main.flex-1 { min-width: 0; border-radius: var(--th-r); }

/* ================= SUPERFICIES DE VIDRIO ================= */
/* base translúcida barata (sin blur) para todo bg-white */
html:is(:root, .dark) body .bg-white { background-color: var(--th-surface) !important; }
html:is(:root, .dark) body .bg-slate-50, html:is(:root, .dark) body .bg-ink-100 { background-color: var(--th-surface-2) !important; }
html:is(:root, .dark) body .bg-slate-100 { background-color: var(--th-hover) !important; }
/* paneles grandes: blur + borde especular */
html:is(:root, .dark) body aside.w-64, html:is(:root, .dark) body main > div.px-7.py-4.bg-white,
html:is(:root, .dark) body .bg-white.rounded-xl, html:is(:root, .dark) body .bg-white.rounded-2xl, html:is(:root, .dark) body .bg-white.rounded-3xl {
  -webkit-backdrop-filter: var(--th-blur); backdrop-filter: var(--th-blur);
  border: 1px solid var(--th-edge); box-shadow: var(--th-shadow);
}
/* un modal «fixed» dentro de una tarjeta con blur quedaría anclado a ella: sin blur en ese caso */
html:is(:root, .dark) body :is(.rounded-xl, .rounded-2xl, .rounded-3xl).bg-white:has(.fixed.inset-0), html:is(:root, .dark) body main > div.px-7.py-4.bg-white:has(.fixed) { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* un solo nivel de blur anidado */
html:is(:root, .dark) body :is(.rounded-xl, .rounded-2xl, .rounded-3xl, aside.w-64).bg-white :is(.bg-white, .rounded-xl, .rounded-2xl) {
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html:is(:root, .dark) body .bg-white.rounded-xl, html:is(:root, .dark) body .bg-white.rounded-2xl { border-radius: var(--th-r-md); }
html:is(:root, .dark) body .bg-white.rounded-2xl.shadow-2xl, html:is(:root, .dark) body .bg-white.rounded-2xl.w-full { border-radius: 24px; }
html:is(:root, .dark) body .shadow-sm { box-shadow: var(--th-shadow-sm); }
html:is(:root, .dark) body .shadow-xl, html:is(:root, .dark) body .shadow-2xl { box-shadow: var(--th-shadow); }
/* hojas modales: más opacas para legibilidad */
html:is(:root, .dark) body .fixed.inset-0 .bg-white.rounded-2xl, html:is(:root, .dark) body .fixed.inset-0 .bg-white.rounded-xl { background-color: var(--th-surface-3) !important; }
html:is(:root, .dark) body .fixed.inset-0 > .absolute.inset-0 { -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; background: rgba(6, 20, 42, .42) !important; }

/* bordes y separadores */
html:is(:root, .dark) body .border-slate-100, html:is(:root, .dark) body .border-slate-200, html:is(:root, .dark) body .border-ink-100, html:is(:root, .dark) body .divide-slate-50 > :not([hidden]) ~ :not([hidden]), html:is(:root, .dark) body .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: var(--th-line); }
html:is(:root, .dark) body .border-slate-300 { border-color: var(--th-hair); }

/* ================= CABECERA DE PÁGINA ================= */
html:is(:root, .dark) body main > div.px-7.py-4.bg-white { border-radius: var(--th-r-md); margin-bottom: 10px; padding: 12px 18px; flex-shrink: 0; }
html:is(:root, .dark) body main > div.px-7.py-4.bg-white h1 { letter-spacing: -.012em; }
html:is(:root, .dark) body main > div.flex-1.overflow-auto, html:is(:root, .dark) body main > .flex-1 { scrollbar-width: thin; }
html:is(:root, .dark) body main > div.flex-1.overflow-auto.p-7 { padding: 6px 4px 6px 4px; border-radius: var(--th-r-md); }

/* ================= BARRA LATERAL COMPACTA ================= */
html:is(:root, .dark) body aside.w-64 {
  width: var(--th-sb); border-radius: var(--th-r); position: relative; z-index: 30;
  transition: width .24s cubic-bezier(.3, .8, .3, 1); overflow: hidden;
}
html:is(:root, .dark) body aside.w-64 > div:first-of-type { padding: 12px 10px 10px 12px; gap: 9px; border-color: var(--th-line); min-height: 58px; }
html:is(:root, .dark) body aside.w-64 > div:first-of-type img { height: 34px; width: 34px; flex-shrink: 0; }
html:is(:root, .dark) body aside.w-64 > div:first-of-type .font-bold { font-size: 14px; letter-spacing: .01em; }
html:is(:root, .dark) body aside.w-64 > div:first-of-type .uppercase { font-size: 6.8px; letter-spacing: .1em; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:is(:root, .dark) body aside.w-64 > div:first-of-type > div { min-width: 0; flex: 1; }
html:is(:root, .dark) body aside.w-64 nav { padding: 4px 8px 6px; scrollbar-width: none; }
html:is(:root, .dark) body aside.w-64 nav::-webkit-scrollbar { display: none; }
html:is(:root, .dark) body aside.w-64 nav > div.px-2 { padding-left: 8px; padding-right: 8px; }
html:is(:root, .dark) body aside.w-64 nav > div.text-\[10px\] { font-size: 9px; padding-top: 8px; padding-bottom: 3px; letter-spacing: .16em; }
html:is(:root, .dark) body aside.w-64 nav > div.py-3 { padding-top: 6px; padding-bottom: 4px; }
html:is(:root, .dark) body aside.w-64 nav > div.py-3 > div { border-color: var(--th-line); }
html:is(:root, .dark) body aside.w-64 nav a, html:is(:root, .dark) body aside.w-64 > div:last-child a, html:is(:root, .dark) body aside.w-64 > div:last-child button {
  padding: 4px 6px; gap: 8px; border-radius: 14px; font-size: 12px; min-height: 40px; color: var(--th-text);
  transition: background-color .18s ease, transform .15s ease;
}
html:is(:root, .dark) body aside.w-64 nav a:hover, html:is(:root, .dark) body aside.w-64 > div:last-child a:hover, html:is(:root, .dark) body aside.w-64 > div:last-child button:hover { background-color: var(--th-hover); }
html:is(:root, .dark) body aside.w-64 nav a:active, html:is(:root, .dark) body aside.w-64 > div:last-child button:active { transform: scale(.975); }
html:is(:root, .dark) body aside.w-64 nav a.bg-cream, html:is(:root, .dark) body aside.w-64 nav a.bg-cream:hover {
  background: var(--th-active) !important; box-shadow: inset 0 0 0 1px rgba(201, 169, 97, .38), 0 6px 14px -10px rgba(154, 126, 58, .6);
  color: var(--th-text);
}
html:is(:root, .dark) body aside.w-64 nav a.bg-cream .absolute { height: 18px; width: 3px; left: 1px; }
html:is(:root, .dark) body aside.w-64 .inline-flex.h-9.w-9, html:is(:root, .dark) body aside.w-64 .h-9.w-9 {
  height: 30px; width: 30px; border-radius: 10px; flex-shrink: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 4px 10px -6px rgba(11, 31, 58, .6);
}
html:is(:root, .dark) body aside.w-64 img.w-9 { height: 30px; width: 30px; }
html:is(:root, .dark) body aside.w-64 svg { width: 16px; height: 16px; }
html:is(:root, .dark) body aside.w-64 .truncate { font-size: 12px; letter-spacing: 0; }
html:is(:root, .dark) body aside.w-64 > div:last-child { padding: 6px 8px 8px; border-color: var(--th-line); }
html:is(:root, .dark) body aside.w-64 > div:last-child a { min-height: 42px; }
html:is(:root, .dark) body aside.w-64 > div:last-child .text-xs { font-size: 11.5px; }
html:is(:root, .dark) body aside.w-64 > div:last-child .text-\[10px\] { font-size: 8.5px; }
/* botón Estado de fuentes (widget inyectado) */
html:is(:root, .dark) body aside.w-64 > button { width: calc(100% - 16px) !important; margin: 6px 8px 0 !important; padding: 5px 10px !important; border-radius: 12px !important; font-size: 10.5px !important; box-shadow: var(--th-shadow-sm) !important; }
/* tirador de colapso (lo crea tahoe.js) */
.th-toggle {
  margin-left: auto; flex-shrink: 0; width: 26px; height: 26px; border-radius: 9px; border: 1px solid var(--th-edge);
  background: var(--th-surface-2); color: var(--th-muted); display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: background-color .18s ease, transform .15s ease;
}
.th-toggle:hover { background: var(--th-hover); color: var(--th-text); }
.th-toggle:active { transform: scale(.92); }
.th-toggle:focus-visible { outline: 2px solid var(--th-gold); outline-offset: 2px; }
.th-toggle svg { width: 14px; height: 14px; transition: transform .24s ease; }

/* —— colapsada: solo iconos —— */
html.th-min body aside.w-64 { width: var(--th-sb-min); }
html.th-min body aside.w-64 > div:first-of-type { flex-direction: column; padding: 10px 0 6px; gap: 6px; justify-content: center; align-items: center; }
html.th-min body aside.w-64 > div:first-of-type > div { display: none; }
html.th-min body aside.w-64 > div:first-of-type .th-toggle { margin: 0; }
html.th-min body aside.w-64 .th-toggle svg { transform: rotate(180deg); }
html.th-min body aside.w-64 nav { padding: 2px 6px 6px; margin-top: 34px; }
html.th-min body aside.w-64 nav > div.px-2:not(.py-3) { display: none; }
html.th-min body aside.w-64 nav > div.py-3 { padding: 4px 10px; }
html.th-min body aside.w-64 nav a, html.th-min body aside.w-64 > div:last-child a, html.th-min body aside.w-64 > div:last-child button {
  justify-content: center; padding: 4px 0; gap: 0; font-size: 0;
}
html.th-min body aside.w-64 nav a .truncate, html.th-min body aside.w-64 > div:last-child a > div, html.th-min body aside.w-64 > div:last-child a > svg,
html.th-min body aside.w-64 > div:last-child button .flex-1, html.th-min body aside.w-64 nav a .absolute { display: none; }
html.th-min body aside.w-64 > div:last-child { padding: 6px; }
html.th-min body aside.w-64 > button { display: none !important; }
/* el widget «Estado de fuentes», al no caber en el carril, se queda como píldora flotante: la acomodamos */
html.th-min body > button:has(#mjmf-badge) {
  left: 20px !important; bottom: auto !important; top: 96px !important; padding: 4px 0 !important; width: 44px !important; justify-content: center !important;
  border-radius: 12px !important; font-size: 0 !important; z-index: 31 !important; box-shadow: var(--th-shadow-sm) !important;
}
html.th-min body > button:has(#mjmf-badge) > span:first-child { display: none; }
html:not(.th-min) body > button:has(#mjmf-badge) { left: 22px !important; bottom: 22px !important; }

/* ================= CONTENIDO ================= */
html:is(:root, .dark) body .rounded-xl.border.p-4.flex.items-center, html:is(:root, .dark) body button.rounded-xl.border.p-4 { transition: transform .16s ease; }
html:is(:root, .dark) body button.rounded-xl.border.p-4:hover { transform: translateY(-1px); border-color: var(--th-gold); }
html:is(:root, .dark) body .bg-ink-100.rounded, html:is(:root, .dark) body .bg-ink-100.rounded.overflow-hidden { background-color: rgba(11, 31, 58, .08) !important; }
html.dark body .bg-ink-100.rounded { background-color: rgba(255, 255, 255, .08) !important; }
html:is(:root, .dark) body table { border-collapse: separate; border-spacing: 0; }
html:is(:root, .dark) body thead, html:is(:root, .dark) body thead th { background: transparent !important; }
html:is(:root, .dark) body thead th { color: var(--th-muted); letter-spacing: .06em; font-weight: 700; border-bottom: 1px solid var(--th-line); }
html:is(:root, .dark) body tbody tr { transition: background-color .15s ease; }
html:is(:root, .dark) body tbody tr:hover { background-color: rgba(201, 169, 97, .09) !important; }
html:is(:root, .dark) body tbody td { border-color: var(--th-line); }
html:is(:root, .dark) body .hover\:bg-slate-50:hover, html:is(:root, .dark) body .hover\:bg-slate-100:hover { background-color: var(--th-hover) !important; }

/* botones primarios (bg-navy) y secundarios */
html:is(:root, .dark) body button.bg-navy, html:is(:root, .dark) body a.bg-navy, html:is(:root, .dark) body .bg-navy.text-white {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, var(--th-navy-2), var(--th-navy)) !important;
  background-color: var(--th-navy) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 8px 16px -10px rgba(11, 31, 58, .8); border-radius: var(--th-r-sm);
}
html.dark body button.bg-navy, html.dark body a.bg-navy, html.dark body .bg-navy.text-white { background-color: #284c83 !important; }
html:is(:root, .dark) body button, html:is(:root, .dark) body a { -webkit-tap-highlight-color: transparent; }
html:is(:root, .dark) body button.rounded-lg.border, html:is(:root, .dark) body a.rounded-lg.border { border-radius: var(--th-r-sm); }
html:is(:root, .dark) body button.rounded-lg, html:is(:root, .dark) body a.rounded-lg, html:is(:root, .dark) body .rounded-lg { transition: background-color .16s ease, transform .14s ease; }
html:is(:root, .dark) body button:active:not(:disabled) { transform: scale(.985); }

/* campos */
html:is(:root, .dark) body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), html:is(:root, .dark) body select, html:is(:root, .dark) body textarea {
  background-color: var(--th-surface-3); border: 1px solid var(--th-hair); border-radius: var(--th-r-sm);
  box-shadow: 0 1px 2px rgba(11, 31, 58, .06) inset; color: var(--th-text);
}
html:is(:root, .dark) body input:focus, html:is(:root, .dark) body select:focus, html:is(:root, .dark) body textarea:focus { outline: none; border-color: var(--th-gold); box-shadow: 0 0 0 3px var(--th-focus); }
html:is(:root, .dark) body input::placeholder, html:is(:root, .dark) body textarea::placeholder { color: var(--th-muted); opacity: .75; }
html:is(:root, .dark) body input[type=checkbox], html:is(:root, .dark) body input[type=radio] { accent-color: var(--th-navy); }
html.dark body input[type=checkbox], html.dark body input[type=radio] { accent-color: var(--th-gold); }

/* chips / badges */
html:is(:root, .dark) body .rounded-full.border { border-color: var(--th-hair); background-color: var(--th-surface-2); }

/* barras de desplazamiento finas */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(11, 31, 58, .22) !important; border: 2px solid transparent !important; background-clip: padding-box; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(11, 31, 58, .38) !important; background-clip: padding-box; }
html.dark ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .20) !important; background-clip: padding-box; }
html.dark ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .34) !important; background-clip: padding-box; }

/* widgets inyectados (galería de mapas, etc.) */
#mjgal-btn { background: linear-gradient(135deg, var(--th-navy-2), var(--th-navy)) !important; border: 1px solid rgba(226, 199, 122, .5) !important; box-shadow: var(--th-shadow-sm) !important; color: #fff !important; }
#mjgal-btn .b { background: var(--th-gold) !important; color: var(--th-ink) !important; }
.mjmod, .mjconf, .pw-pop { background: var(--th-surface-3) !important; color: var(--th-text); border: 1px solid var(--th-edge); border-radius: 22px !important; }
.mjmh h3, .mjconf h4 { color: var(--th-text) !important; }
.mjcard { background: var(--th-surface-2) !important; border-color: var(--th-line) !important; }

/* ================= LOGIN ================= */
html:is(:root, .dark) body div.min-h-screen.grid { padding: 14px; gap: 14px; min-height: 100vh; min-height: 100dvh; box-sizing: border-box; }
html:is(:root, .dark) body div.min-h-screen.grid > div.hidden.lg\:flex { border-radius: 30px; border: 1px solid var(--th-edge); box-shadow: var(--th-shadow); }
html:is(:root, .dark) body div.min-h-screen.grid > div.hidden.lg\:flex > .relative .grid.h-9.w-9 {
  background: rgba(255, 255, 255, .10) !important; border: 1px solid rgba(255, 255, 255, .22); border-radius: 12px !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset;
}
html:is(:root, .dark) body div.min-h-screen.grid > div.hidden.lg\:flex > .relative .rounded-full { background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 255, 255, .22) !important; }
html:is(:root, .dark) body div.min-h-screen.grid > div.flex.items-center.justify-center { padding: 18px; }
html:is(:root, .dark) body div.min-h-screen.grid form.max-w-sm {
  max-width: 400px; border-radius: 30px; padding: 30px 30px 24px; position: relative;
  -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7);
  background-color: var(--th-surface) !important;
}
html:is(:root, .dark) body div.min-h-screen.grid form.max-w-sm:has(.pw-pop-overlay) { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: var(--th-surface-3) !important; }
html:is(:root, .dark) body div.min-h-screen.grid form.max-w-sm h1 { font-size: 21px; letter-spacing: -.015em; }
html:is(:root, .dark) body div.min-h-screen.grid form.max-w-sm button[type=submit] {
  border-radius: 14px; padding-top: 12px; padding-bottom: 12px; font-size: 14px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, var(--th-navy-2), var(--th-navy)) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 12px 22px -12px rgba(11, 31, 58, .9);
}
html.dark body div.min-h-screen.grid form.max-w-sm button[type=submit] {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, #C9A961, #8f7438) !important; color: #06142A;
}
html:is(:root, .dark) body div.min-h-screen.grid form.max-w-sm input:not([type=checkbox]) { border-radius: 14px; padding: 12px 14px; }
html:is(:root, .dark) body #mj-remember-wrap { color: var(--th-muted) !important; }
html:is(:root, .dark) body .pw-pop-overlay { background: rgba(6, 20, 42, .38) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html:is(:root, .dark) body .pw-pop { padding: 24px 28px; }
html:is(:root, .dark) body .pw-pop-title { color: #c0262d; }
html.dark body .pw-pop-title { color: #ff8d92; }
html:is(:root, .dark) body .pw-pop-btn { background: linear-gradient(135deg, var(--th-navy-2), var(--th-navy)); border-radius: 12px; }
/* Crear cuenta: hoja */
html:is(:root, .dark) body .fixed.inset-0.z-50.grid { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* botón de passkey (lo inyecta artemisa.js solo si el servidor lo ofrece) */
.th-passkey {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; margin-top: 10px; padding: 11px 14px; border-radius: 14px;
  border: 1px solid var(--th-hair); background: var(--th-surface-3); color: var(--th-text); font: 600 13px/1.2 Inter, system-ui, sans-serif; cursor: pointer;
  transition: transform .14s ease, background-color .16s ease;
}
.th-passkey:hover { background: var(--th-surface-2); }
.th-passkey:active { transform: scale(.985); }
.th-passkey:focus-visible { outline: 2px solid var(--th-gold); outline-offset: 2px; }
.th-passkey[disabled] { opacity: .6; cursor: progress; }
.th-passkey svg { width: 18px; height: 18px; flex-shrink: 0; }
.th-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: 11px; color: var(--th-muted); text-transform: uppercase; letter-spacing: .12em; }
.th-or::before, .th-or::after { content: ""; height: 1px; flex: 1; background: var(--th-line); }

/* ================= ARTEMISA (personaje de vidrio del login) ================= */
.art { position: relative; width: 160px; height: 139px; margin: -72px auto 6px; pointer-events: none; user-select: none; contain: layout style; z-index: 2; }
.art svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.art { --a-glass-1: rgba(255, 255, 255, .95); --a-glass-2: rgba(186, 210, 242, .62); --a-glass-3: rgba(120, 160, 214, .46); --a-rim: rgba(255, 255, 255, .95); --a-eye: #fff; --a-pupil: #0B1F3A; --a-mouth: #0B1F3A; --a-gold-1: #F3DC93; --a-gold-2: #C9A961; --a-shadow: rgba(11, 31, 58, .22); }
html.dark .art { --a-glass-1: rgba(190, 214, 255, .70); --a-glass-2: rgba(74, 112, 176, .55); --a-glass-3: rgba(30, 52, 98, .62); --a-rim: rgba(255, 255, 255, .55); --a-eye: #EAF1FF; --a-pupil: #06142A; --a-mouth: #E7ECF3; --a-shadow: rgba(0, 0, 0, .5); }
.art-float { animation: art-float 5.2s ease-in-out infinite; transform-origin: 50% 100%; }
.art-body-g { transform-origin: 80px 118px; }
.art-pupils { transition: transform .14s ease-out; will-change: transform; }
.art-eye { transform-box: fill-box; transform-origin: center; transition: transform .1s ease-in; }
.art--blink .art-eye { transform: scaleY(.08); }
.art-hand { transform: translateY(96px); opacity: 0; transition: transform .46s cubic-bezier(.3, 1.35, .45, 1), opacity .2s ease; }
.art--cover .art-hand { transform: translateY(0); opacity: 1; }
.art--cover .art-pupils { opacity: 0; }
.art-pupils { transition: transform .14s ease-out, opacity .2s ease; }
.art-mouth { opacity: 0; transition: opacity .18s ease; }
.art-mouth--n { opacity: 1; }
.art--sad .art-mouth--n, .art--happy .art-mouth--n { opacity: 0; }
.art--sad .art-mouth--s { opacity: 1; }
.art--happy .art-mouth--h { opacity: 1; }
.art-arc { opacity: 0; transition: opacity .16s ease; }
.art--happy .art-arc { opacity: 1; }
.art--happy .art-eye, .art--happy .art-pupils { opacity: 0; }
.art-eye { transition: transform .1s ease-in, opacity .16s ease; }
.art-tear { opacity: 0; transform: translateY(0); }
.art--sad .art-tear { animation: art-tear 1.5s ease-in 1 both; }
.art--sad .art-float { animation: art-shake .55s ease 1, art-float 5.2s ease-in-out .55s infinite; }
.art--happy .art-float { animation: art-hop .62s cubic-bezier(.3, .9, .3, 1) 2, art-float 5.2s ease-in-out 1.3s infinite; }
.art-spark { opacity: 0; transform-box: fill-box; transform-origin: center; }
.art--happy .art-spark { animation: art-spark .9s ease-out both; }
.art--happy .art-spark:nth-of-type(2) { animation-delay: .08s; }
.art--happy .art-spark:nth-of-type(3) { animation-delay: .16s; }
.art-star { transform-box: fill-box; transform-origin: center; animation: art-twinkle 3.4s ease-in-out infinite; }
.art-star:nth-of-type(2) { animation-delay: 1.1s; }
.art-star:nth-of-type(3) { animation-delay: 2.1s; }
@keyframes art-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes art-shake { 0%, 100% { transform: translateX(0) rotate(0); } 20% { transform: translateX(-7px) rotate(-3deg); } 40% { transform: translateX(6px) rotate(2.5deg); } 60% { transform: translateX(-4px) rotate(-1.5deg); } 80% { transform: translateX(2px); } }
@keyframes art-hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 45% { transform: translateY(-14px) scale(.97, 1.04); } 80% { transform: translateY(0) scale(1.03, .97); } }
@keyframes art-tear { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .9; } 100% { opacity: 0; transform: translateY(26px); } }
@keyframes art-spark { 0% { opacity: 0; transform: scale(.3); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5) translateY(-10px); } }
@keyframes art-twinkle { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }
html.th-static .art *, html.th-static .art { animation: none !important; transition: none !important; }

/* ===== MODO OSCURO: fondos tintados claros (bg-*-50 / -100, también con /60) pasan a tinte translúcido para no dejar texto claro sobre fondo claro ===== */
html.dark body [class~="bg-emerald-50"], html.dark body [class~="bg-emerald-50/60"] { background-color: rgba(16, 185, 129, .14) !important; }
html.dark body [class~="bg-emerald-100"] { background-color: rgba(16, 185, 129, .22) !important; }
html.dark body [class~="bg-green-50"], html.dark body [class~="bg-green-50/60"] { background-color: rgba(34, 197, 94, .14) !important; }
html.dark body [class~="bg-green-100"] { background-color: rgba(34, 197, 94, .22) !important; }
html.dark body [class~="bg-teal-50"], html.dark body [class~="bg-teal-50/60"] { background-color: rgba(20, 184, 166, .14) !important; }
html.dark body [class~="bg-teal-100"] { background-color: rgba(20, 184, 166, .22) !important; }
html.dark body [class~="bg-cyan-50"], html.dark body [class~="bg-cyan-50/60"] { background-color: rgba(6, 182, 212, .14) !important; }
html.dark body [class~="bg-cyan-100"] { background-color: rgba(6, 182, 212, .22) !important; }
html.dark body [class~="bg-sky-50"], html.dark body [class~="bg-sky-50/60"] { background-color: rgba(14, 165, 233, .14) !important; }
html.dark body [class~="bg-sky-100"] { background-color: rgba(14, 165, 233, .22) !important; }
html.dark body [class~="bg-blue-50"], html.dark body [class~="bg-blue-50/60"] { background-color: rgba(59, 130, 246, .14) !important; }
html.dark body [class~="bg-blue-100"] { background-color: rgba(59, 130, 246, .22) !important; }
html.dark body [class~="bg-indigo-50"], html.dark body [class~="bg-indigo-50/60"] { background-color: rgba(99, 102, 241, .14) !important; }
html.dark body [class~="bg-indigo-100"] { background-color: rgba(99, 102, 241, .22) !important; }
html.dark body [class~="bg-violet-50"], html.dark body [class~="bg-violet-50/60"] { background-color: rgba(139, 92, 246, .14) !important; }
html.dark body [class~="bg-violet-100"] { background-color: rgba(139, 92, 246, .22) !important; }
html.dark body [class~="bg-purple-50"], html.dark body [class~="bg-purple-50/60"] { background-color: rgba(168, 85, 247, .14) !important; }
html.dark body [class~="bg-purple-100"] { background-color: rgba(168, 85, 247, .22) !important; }
html.dark body [class~="bg-pink-50"], html.dark body [class~="bg-pink-50/60"] { background-color: rgba(236, 72, 153, .14) !important; }
html.dark body [class~="bg-pink-100"] { background-color: rgba(236, 72, 153, .22) !important; }
html.dark body [class~="bg-rose-50"], html.dark body [class~="bg-rose-50/60"] { background-color: rgba(244, 63, 94, .14) !important; }
html.dark body [class~="bg-rose-100"] { background-color: rgba(244, 63, 94, .22) !important; }
html.dark body [class~="bg-red-50"], html.dark body [class~="bg-red-50/60"] { background-color: rgba(239, 68, 68, .14) !important; }
html.dark body [class~="bg-red-100"] { background-color: rgba(239, 68, 68, .22) !important; }
html.dark body [class~="bg-orange-50"], html.dark body [class~="bg-orange-50/60"] { background-color: rgba(249, 115, 22, .14) !important; }
html.dark body [class~="bg-orange-100"] { background-color: rgba(249, 115, 22, .22) !important; }
html.dark body [class~="bg-amber-50"], html.dark body [class~="bg-amber-50/60"] { background-color: rgba(245, 158, 11, .14) !important; }
html.dark body [class~="bg-amber-100"] { background-color: rgba(245, 158, 11, .22) !important; }
html.dark body [class~="bg-yellow-50"], html.dark body [class~="bg-yellow-50/60"] { background-color: rgba(234, 179, 8, .14) !important; }
html.dark body [class~="bg-yellow-100"] { background-color: rgba(234, 179, 8, .22) !important; }

/* ================= MÓVIL (390 × 844) ================= */
@media (max-width: 767px) {
  html:is(:root, .dark) body #root > div.flex.h-screen.overflow-hidden { padding: 6px; gap: 6px; }
  html:is(:root, .dark) body aside.w-64 { border-radius: 20px; }
  html.th-open-m body aside.w-64 { position: fixed; left: 6px; top: 6px; bottom: 6px; height: auto; width: min(230px, 78vw); z-index: 60; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55), var(--th-shadow); }
  html.th-open-m body aside.w-64 + main::after { content: ""; position: fixed; inset: 0; background: rgba(6, 20, 42, .4); z-index: 50; }
  html:is(:root, .dark) body main > div.px-7.py-4.bg-white { padding: 10px 12px; margin-bottom: 6px; gap: 10px; }
  html:is(:root, .dark) body main > div.px-7.py-4.bg-white .text-lg { font-size: 15px; }
  html:is(:root, .dark) body main > div.px-7.py-4.bg-white p.text-xs { display: none; }
  html:is(:root, .dark) body main > div.flex-1.overflow-auto.p-7 { padding: 2px; }
  html:is(:root, .dark) body main .p-7, html:is(:root, .dark) body main .px-7 { padding-left: 12px; padding-right: 12px; }
  html:is(:root, .dark) body div.min-h-screen.grid { padding: 8px; }
  html:is(:root, .dark) body div.min-h-screen.grid > div.flex.items-center.justify-center { padding: 10px 6px; }
  html:is(:root, .dark) body div.min-h-screen.grid form.max-w-sm { padding: 24px 22px 20px; border-radius: 28px; }
  .art { width: 136px; height: 118px; margin: -62px auto 10px; }
  html:is(:root, .dark) body main > div.px-7.py-4.bg-white { flex-wrap: wrap; row-gap: 6px; }
  html:is(:root, .dark) body main > div.px-7.py-4.bg-white > .ml-auto { margin-left: 0; width: 100%; flex-wrap: wrap; }
  html:is(:root, .dark) body main .w-96, html:is(:root, .dark) body main .w-80, html:is(:root, .dark) body main .w-72, html:is(:root, .dark) body main .w-[380px], html:is(:root, .dark) body main .w-[420px] { width: 100%; max-width: 100%; }
  html:is(:root, .dark) body main div.flex-1.rounded-xl.overflow-hidden.flex-col > div.overflow-auto > div:not(.grid), html:is(:root, .dark) body main div.flex-1.rounded-xl.overflow-hidden.flex-col > div.overflow-auto > div:only-child { position: sticky; left: 0; width: calc(100vw - 118px); min-width: 0; box-sizing: border-box; }
  /* páginas de listado: el contenedor pasa a desplazarse y la tabla conserva una altura útil */
  html:is(:root, .dark) body main > div.flex-1.overflow-hidden.flex-col { overflow-y: auto; }
  html:is(:root, .dark) body main > div.flex-1.overflow-hidden.flex-col > div.flex-1 { min-height: 72vh; flex-shrink: 0; }
  /* tablas de rejilla: la tarjeta se desplaza en horizontal (cabecera y filas juntas) */
  html:is(:root, .dark) body main div.flex-1.rounded-xl.overflow-hidden.flex-col { overflow-x: auto; overflow-y: hidden; }
  html:is(:root, .dark) body main div.flex-1.rounded-xl.overflow-hidden.flex-col > * { min-width: 1380px; }
  html:is(:root, .dark) body main div.relative:has(> input) { min-width: 0 !important; max-width: 100% !important; width: 100% !important; flex: 1 1 100%; }
  html:is(:root, .dark) body main input[type=text], html:is(:root, .dark) body main input[type=search], html:is(:root, .dark) body main input:not([type]), html:is(:root, .dark) body main select { max-width: 100%; min-width: 0; }
  /* chat: el historial pasa a ser un panel que se abre con el botón «Historial» (lo crea tahoe.js) */
  html:is(:root, .dark) body main > div.flex-1.flex.overflow-hidden:has(> aside.w-60) { position: relative; }
  html:is(:root, .dark) body aside.w-60 { position: absolute; z-index: 6; left: 0; top: 0; bottom: 0; width: min(280px, 84%); transform: translateX(-104%); transition: transform .26s cubic-bezier(.3, .8, .3, 1); border-radius: 0 20px 20px 0; background-color: var(--th-solid) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html.th-hist body aside.w-60 { transform: none; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .55); }
  html:is(:root, .dark) body main aside.shrink-0.border-l { position: absolute; right: 0; top: 0; bottom: 0; z-index: 6; max-width: 90%; background-color: var(--th-solid) !important; border-radius: 20px 0 0 20px; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html:is(:root, .dark) body .th-hist-btn { display: inline-flex; margin-left: auto; }
  html:is(:root, .dark) body .grid.grid-cols-2 > * { padding: 10px; gap: 8px; }
  html:is(:root, .dark) body .grid.grid-cols-2 .text-2xl { font-size: 19px; }
  html:is(:root, .dark) body .grid.grid-cols-2 .h-11.w-11 { height: 34px; width: 34px; border-radius: 11px; }
  html:is(:root, .dark) body .grid.grid-cols-2 .h-11.w-11 svg { width: 17px; height: 17px; }
}
.th-hist-btn { display: none; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 12px; border: 1px solid var(--th-hair); background: var(--th-surface-3); color: var(--th-text); font: 600 12px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.th-hist-btn:active { transform: scale(.97); }
@media (min-width: 768px) and (max-width: 1023px) {
  html:not(.th-min) { --th-sb: 200px; }
}

/* ================= ACCESIBILIDAD ================= */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .art-float, .art-star { animation: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --th-surface: rgba(255, 255, 255, .96); --th-surface-2: rgba(244, 246, 250, .98); --th-surface-3: #fff; }
  html.dark { --th-surface: rgba(18, 26, 40, .98); --th-surface-2: rgba(26, 36, 54, .98); --th-surface-3: #101a2a; }
  html:is(:root, .dark) body aside.w-64, html:is(:root, .dark) body main > div.px-7.py-4.bg-white, html:is(:root, .dark) body .bg-white.rounded-xl, html:is(:root, .dark) body .bg-white.rounded-2xl, html:is(:root, .dark) body .bg-white.rounded-3xl, html:is(:root, .dark) body div.min-h-screen.grid form.max-w-sm,
  html:is(:root, .dark) body .pw-pop-overlay, html:is(:root, .dark) body .fixed.inset-0.z-50.grid, html:is(:root, .dark) body .fixed.inset-0 > .absolute.inset-0 { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --th-surface: rgba(255, 255, 255, .92); --th-surface-2: rgba(246, 248, 252, .95); }
  html.dark { --th-surface: rgba(20, 28, 44, .94); --th-surface-2: rgba(28, 38, 58, .94); }
}
html:is(:root, .dark) body :focus-visible { outline-color: var(--th-gold); }