/* Cristal — Liquid Glass (Apple): ver el comentario de más abajo. Claro, y oscuro con el mismo criterio que Cupertino. */
html[data-tema="cristal"]:not([data-z]) {
  color-scheme: light;
  --brand: #105c3a; --brand-ink: #fff; --brand-soft: #e2ebe7; --navy: #093522;
  --bg: #eef0f5; --surface: #ffffff; --surface-2: #f1f3f8;
  --line: rgba(15,26,58,.08); --line-strong: rgba(15,26,58,.15);
  --ink: #0e1a3a; --ink-2: #46526f; --ink-3: #7783a3;
  --ok: #0f7d57; --ok-soft: #e1f3ea; --warn: #9c5a00; --warn-soft: #fbefd9; --bad: #c0301d; --bad-soft: #fde8e5; --info: #2757c9; --info-soft: #e6eefb;
  --radius: 24px; --shadow: 0 1px 1px rgba(30,50,110,.05), 0 14px 40px rgba(30,50,120,.12); --shadow-hi: 0 2px 3px rgba(30,50,110,.06), 0 22px 54px rgba(30,50,120,.18);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --fill: rgba(15,26,58,.055); --fill-2: rgba(15,26,58,.09); --side-bg: transparent; --bar-bg: rgba(238,240,245,.62);
  --seg-on: #ffffff; --warn-icon: #e08a00; --top: 64px;
  /* el material: vidrio con borde iluminado */
  --g1: rgba(255,255,255,.66); --g2: rgba(255,255,255,.3); --gl: rgba(255,255,255,.55); --gh: rgba(255,255,255,.95);
  --gs1: rgba(30,50,110,.06); --gs2: rgba(30,50,120,.14); --spec: rgba(255,255,255,.75); --rim1: rgba(255,255,255,.95); --rim2: rgba(255,255,255,.6);
  --inset: rgba(255,255,255,.5); --inset-line: rgba(255,255,255,.7); --lens: rgba(255,255,255,.85);
  --luz1: color-mix(in srgb, var(--brand) 8%, transparent); --luz2: rgba(120,200,225,.10); --luz3: rgba(240,200,150,.10);
  --g1t: color-mix(in srgb, var(--bg) 25%, transparent); --g2t: color-mix(in srgb, var(--bg) 3%, transparent); --lens-t: rgba(255,255,255,.62);
}
@media (prefers-color-scheme: dark) {
  html[data-tema="cristal"]:not([data-theme="light"]):not([data-z]) {
  color-scheme: dark;
  --brand: #93b6a6; --brand-ink: #0b1224; --brand-soft: rgba(122,167,255,.16);
  --bg: #0a1022; --surface: #161c2e; --surface-2: #1e2540;
  --line: rgba(255,255,255,.1); --line-strong: rgba(255,255,255,.18);
  --ink: #eef2ff; --ink-2: #b5bfdc; --ink-3: #7c88ad;
  --ok: #4fd49a; --ok-soft: rgba(79,212,154,.13); --warn: #f5b64a; --warn-soft: rgba(245,182,74,.13); --bad: #ff8277; --bad-soft: rgba(255,130,119,.14); --info: #82b4ff; --info-soft: rgba(130,180,255,.13);
  --shadow: 0 0 0 1px rgba(255,255,255,.06), 0 14px 40px rgba(0,0,0,.4); --shadow-hi: 0 0 0 1px rgba(255,255,255,.1), 0 22px 54px rgba(0,0,0,.5);
  --fill: rgba(255,255,255,.08); --fill-2: rgba(255,255,255,.13); --bar-bg: rgba(10,16,34,.6);
  --seg-on: rgba(255,255,255,.2); --warn-icon: #f5b64a;
  --g1: rgba(255,255,255,.13); --g2: rgba(255,255,255,.045); --gl: rgba(255,255,255,.14); --gh: rgba(255,255,255,.26);
  --gs1: rgba(0,0,0,.25); --gs2: rgba(0,0,0,.4); --spec: rgba(150,180,255,.3); --rim1: rgba(255,255,255,.5); --rim2: rgba(255,255,255,.2);
  --inset: rgba(255,255,255,.07); --inset-line: rgba(255,255,255,.1); --lens: rgba(255,255,255,.2);
  --luz1: color-mix(in srgb, var(--brand) 11%, transparent); --luz2: rgba(27,138,166,.10); --luz3: rgba(176,112,42,.08);
  --g1t: color-mix(in srgb, var(--bg) 7%, transparent); --g2t: color-mix(in srgb, var(--bg) 1%, transparent); --lens-t: rgba(255,255,255,.16);
}
}
html[data-tema="cristal"][data-theme="dark"]:not([data-z]) {
  color-scheme: dark;
  --brand: #93b6a6; --brand-ink: #0b1224; --brand-soft: rgba(122,167,255,.16);
  --bg: #0a1022; --surface: #161c2e; --surface-2: #1e2540;
  --line: rgba(255,255,255,.1); --line-strong: rgba(255,255,255,.18);
  --ink: #eef2ff; --ink-2: #b5bfdc; --ink-3: #7c88ad;
  --ok: #4fd49a; --ok-soft: rgba(79,212,154,.13); --warn: #f5b64a; --warn-soft: rgba(245,182,74,.13); --bad: #ff8277; --bad-soft: rgba(255,130,119,.14); --info: #82b4ff; --info-soft: rgba(130,180,255,.13);
  --shadow: 0 0 0 1px rgba(255,255,255,.06), 0 14px 40px rgba(0,0,0,.4); --shadow-hi: 0 0 0 1px rgba(255,255,255,.1), 0 22px 54px rgba(0,0,0,.5);
  --fill: rgba(255,255,255,.08); --fill-2: rgba(255,255,255,.13); --bar-bg: rgba(10,16,34,.6);
  --seg-on: rgba(255,255,255,.2); --warn-icon: #f5b64a;
  --g1: rgba(255,255,255,.13); --g2: rgba(255,255,255,.045); --gl: rgba(255,255,255,.14); --gh: rgba(255,255,255,.26);
  --gs1: rgba(0,0,0,.25); --gs2: rgba(0,0,0,.4); --spec: rgba(150,180,255,.3); --rim1: rgba(255,255,255,.5); --rim2: rgba(255,255,255,.2);
  --inset: rgba(255,255,255,.07); --inset-line: rgba(255,255,255,.1); --lens: rgba(255,255,255,.2);
  --luz1: color-mix(in srgb, var(--brand) 11%, transparent); --luz2: rgba(27,138,166,.10); --luz3: rgba(176,112,42,.08);
  --g1t: color-mix(in srgb, var(--bg) 7%, transparent); --g2t: color-mix(in srgb, var(--bg) 1%, transparent); --lens-t: rgba(255,255,255,.16);
}

/* Cristal — Liquid Glass (Apple, 2025): vidrio translúcido con borde iluminado, menú flotante, barra de abajo en cápsula.
   El fondo casi no tiene color (apenas una luz de la marca): el vidrio es lo que se ve, no la mancha de atrás. */
html[data-tema="cristal"] body { font-size: 14.5px; letter-spacing: -.003em;
  background: radial-gradient(900px 560px at 6% -10%, var(--luz1), transparent 62%), radial-gradient(760px 520px at 100% 4%, var(--luz2), transparent 62%), radial-gradient(700px 520px at 72% 108%, var(--luz3), transparent 62%), var(--bg);
  background-attachment: fixed; }
/* lo que es de vidrio: el menú, las tarjetas, los indicadores y la barra de abajo del celular */
html[data-tema="cristal"] :is(.side, .card, .kpi, .fl-card, .tabbar) {
  background: linear-gradient(145deg, var(--g1), var(--g2));
  -webkit-backdrop-filter: blur(26px) saturate(185%); backdrop-filter: blur(26px) saturate(185%);
  border: 0; box-shadow: inset 0 0 0 1px var(--gl), inset 0 1.5px 0 var(--gh), 0 1px 1px var(--gs1), 0 16px 40px var(--gs2); }
html[data-tema="cristal"] :is(.card, .kpi, .fl-card) { position: relative; isolation: isolate; border-radius: var(--radius); }
/* brillo que sigue al puntero (apariencia.js pone --mx y --my) y borde con luz */
html[data-tema="cristal"] :is(.side, .card, .kpi, .fl-card, .tabbar)::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(260px circle at var(--mx, 20%) var(--my, -20%), var(--spec), transparent 62%); }
html[data-tema="cristal"] :is(.side, .card, .kpi, .fl-card, .tabbar)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, var(--rim1), transparent 34%, transparent 66%, var(--rim2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
html[data-tema="cristal"] .card { padding: 22px 24px; }
html[data-tema="cristal"] .card.flush { padding: 0; }
html[data-tema="cristal"] .card.flush > .card-h { padding: 20px 24px 6px; }
html[data-tema="cristal"] .card-h h2, html[data-tema="cristal"] .card > h2 { font-size: 16px; font-weight: 650; letter-spacing: -.014em; }
html[data-tema="cristal"] .kpi { padding: 20px 22px 18px; transition: transform .3s cubic-bezier(.3,1.4,.5,1), box-shadow .3s ease; }
html[data-tema="cristal"] a.kpi:hover, html[data-tema="cristal"] a.fl-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--gl), inset 0 1.5px 0 var(--gh), 0 2px 2px var(--gs1), 0 24px 54px var(--gs2); }
html[data-tema="cristal"] .kpi .l { font-size: 12.5px; font-weight: 600; }
html[data-tema="cristal"] .kpi .v { font-size: 30px; font-weight: 680; letter-spacing: -.032em; margin-top: 8px; }
html[data-tema="cristal"] .kpi .s { color: var(--ink-3); margin-top: 4px; }
/* el menú: una isla de vidrio que flota, con aire alrededor */
html[data-tema="cristal"] .side { inset: 12px auto 12px 12px; width: calc(var(--side) - 12px); border-radius: 32px; }
html[data-tema="cristal"] .side .brand img { border-radius: 9px; }
html[data-tema="cristal"] .side .brand img.con-logo { border-radius: 0; box-shadow: none; }
html[data-tema="cristal"] .side .brand b { font-size: 15px; letter-spacing: -.01em; }
html[data-tema="cristal"] .side .grp { text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 600; padding: 16px 12px 4px; }
html[data-tema="cristal"] .side nav { padding: 4px 10px 16px; }
html[data-tema="cristal"] .side nav a { color: var(--ink-2); font-weight: 520; padding: 8px 12px; border-radius: 14px; font-size: 14px; transition: background .2s, color .2s; }
html[data-tema="cristal"] .side nav a svg { color: var(--brand); opacity: .9; width: 18px; height: 18px; }
html[data-tema="cristal"] .side nav a:hover { background: var(--inset); color: var(--ink); }
html[data-tema="cristal"] .side nav a.on { background: var(--lens); color: var(--brand); font-weight: 650; box-shadow: inset 0 1px 0 var(--gh), 0 4px 14px var(--gs2); }
html[data-tema="cristal"] .side .me { border-top: 0; margin: 4px 10px 10px; padding: 10px; border-radius: 20px; background: var(--inset); box-shadow: inset 0 0 0 1px var(--inset-line); }
html[data-tema="cristal"] .topbar { background: var(--bar-bg); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border-bottom-color: transparent; padding: 0 32px; }
html[data-tema="cristal"] .topbar h1 { font-size: 26px; font-weight: 720; letter-spacing: -.03em; }
html[data-tema="cristal"] .content { padding: 12px 32px var(--flot); }
html[data-tema="cristal"] .stack > * + * { margin-top: 20px; }
html[data-tema="cristal"] .grid { gap: 16px; }
html[data-tema="cristal"] .card .stack > * + * { margin-top: 0; }
html[data-tema="cristal"] .btn { border: 0; border-radius: 980px; background: var(--inset); box-shadow: inset 0 0 0 1px var(--inset-line), 0 4px 12px var(--gs1); font-weight: 560; padding: 0 18px; transition: transform .2s; }
html[data-tema="cristal"] .btn:hover { background: var(--lens); transform: translateY(-1px); }
html[data-tema="cristal"] .btn.pri { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 88%, #fff), var(--brand)); color: var(--brand-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 22px color-mix(in srgb, var(--brand) 38%, transparent); }
html[data-tema="cristal"] .btn.ghost { background: transparent; box-shadow: none; }
html[data-tema="cristal"] .btn.ghost:hover { background: var(--fill); }
html[data-tema="cristal"] .btn.icon { padding: 0; }
html[data-tema="cristal"] .tabs { display: inline-flex; max-width: 100%; border: 0; background: var(--inset); box-shadow: inset 0 0 0 1px var(--inset-line); border-radius: 99px; padding: 4px; gap: 2px; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
html[data-tema="cristal"] .tabs a { border: 0; border-radius: 99px; padding: 7px 16px; font-size: 13.5px; color: var(--ink-2); font-weight: 560; }
html[data-tema="cristal"] .tabs a.on { background: var(--lens); color: var(--ink); box-shadow: inset 0 1px 0 var(--gh), 0 3px 10px var(--gs2); }
html[data-tema="cristal"] .tbl th { background: transparent; font-size: 12px; font-weight: 600; padding: 10px 22px; }
html[data-tema="cristal"] .tbl td { padding: 11px 22px; }
html[data-tema="cristal"] .tbl tbody tr.click:hover td { background: var(--fill); }
html[data-tema="cristal"] .badge { font-weight: 600; font-size: 11.5px; padding: 2px 9px; }
html[data-tema="cristal"] .alert { border-radius: 16px; padding: 12px 14px; }
html[data-tema="cristal"] .card a.alert { background: transparent; border-radius: 0; padding: 12px 2px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 14px; }
html[data-tema="cristal"] .card a.alert:last-child { border-bottom: 0; }
html[data-tema="cristal"] .card a.alert svg { color: var(--info); }
html[data-tema="cristal"] .card a.alert.warn svg { color: var(--warn-icon); }
html[data-tema="cristal"] .card a.alert.bad svg { color: var(--bad); }
html[data-tema="cristal"] .card a.alert:hover { background: var(--fill); }
html[data-tema="cristal"] input, html[data-tema="cristal"] select, html[data-tema="cristal"] textarea { border-radius: 14px; }
html[data-tema="cristal"] .search input { background: var(--fill); border-color: transparent; }
html[data-tema="cristal"] .modal { border-radius: 28px; }
html[data-tema="cristal"] .login .card { border-radius: 30px; padding: 36px; }
/* en el celular: el menú se abre como una hoja de vidrio, y la barra de abajo es una cápsula que flota */
@media (max-width: 900px) {
  html[data-tema="cristal"] { --flot: calc(var(--tabbar) + 92px + env(safe-area-inset-bottom)); }
  html[data-tema="cristal"] .side { transform: translateX(calc(-100% - 24px)); width: min(320px, calc(100vw - 48px)); }
  html[data-tema="cristal"] .side.open { transform: none; }
  html[data-tema="cristal"] .topbar { padding: 0 12px; padding-top: env(safe-area-inset-top); }
  html[data-tema="cristal"] .content { padding: 12px 16px var(--flot); }
  html[data-tema="cristal"] .tabbar { left: 14px; right: 14px; bottom: calc(12px + env(safe-area-inset-bottom)); height: 64px; padding: 6px; border-radius: 99px; }
  html[data-tema="cristal"] .tabbar a { border-radius: 99px; color: var(--ink-2); font-weight: 560; transition: background .3s, color .3s; }
  html[data-tema="cristal"] .tabbar a.on { background: var(--lens); color: var(--brand); box-shadow: inset 0 1.5px 0 var(--gh), 0 4px 16px var(--gs2); }
  @media (max-width: 640px) { html[data-tema="cristal"] .topbar { padding: 0 6px; } }
}
@media (max-width: 640px) {
  html[data-tema="cristal"] .grid.g4 { grid-template-columns: 1fr 1fr; }
  html[data-tema="cristal"] .grid.g4 > .kpi:first-child { grid-column: 1 / -1; }
  html[data-tema="cristal"] .kpi .v { font-size: 22px; }
  html[data-tema="cristal"] .grid.g4 > .kpi:first-child .v { font-size: 32px; }
  html[data-tema="cristal"] .topbar h1 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { html[data-tema="cristal"] * { transition: none !important; } }

/* ---------- el Mic plateado del centro de la barra del celular y los tres puntos del costado ----------
   El mismo círculo metálico del Mic dorado de Guadagnini, en plata. Sólo con asistente prendido (html.con-mic-centro). */
html[data-tema="cristal"] { --grafito: #5a5f69; --plata-met: linear-gradient(175deg, #F7F8FA 0%, #CDD0D7 30%, #8F939C 52%, #E3E5EA 72%, #8C9099 100%); --halo-plata: rgba(205,210,222,.85); }
@keyframes escucha-plata {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.16), 0 6px 18px rgba(20,30,70,.32), 0 0 0 0 var(--halo-plata); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.16), 0 6px 18px rgba(20,30,70,.32), 0 0 0 12px rgba(205,210,222,0); }
}
@media (max-width: 900px) {
  /* la barra y la solapa, más traslúcidas: se ve lo que pasa por detrás */
  html[data-tema="cristal"] .tabbar { background: linear-gradient(145deg, var(--g1t), var(--g2t)); -webkit-backdrop-filter: blur(20px) saturate(185%); backdrop-filter: blur(20px) saturate(185%); }
  html[data-tema="cristal"] .tabbar a.on { background: var(--lens-t); }
  html[data-tema="cristal"].con-mic-centro .tabbar a[data-mas] { display: none; }
  html[data-tema="cristal"].con-mic-centro .tabbar .tab-mic { display: flex; flex: 1; align-items: flex-start; justify-content: center; border: 0; background: none; padding: 0; min-height: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  html[data-tema="cristal"] .tab-mic .bola { display: grid; place-items: center; position: relative; box-sizing: border-box; width: 58px; height: 58px; margin-top: -20px; border-radius: 50%; background: var(--plata-met); color: #1a1e27;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.16), 0 6px 18px rgba(20,30,70,.32); transition: transform .25s cubic-bezier(.3,1.5,.5,1); }
  html[data-tema="cristal"] .tab-mic .bola svg { width: 24px; height: 24px; }
  /* la línea grafito, fina: una sombra interna de 1,35 px (un borde se redondea al píxel del aparato y no deja afinar un 10 %) */
  html[data-tema="cristal"] .tab-mic .bola::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; box-shadow: inset 0 0 0 1.35px var(--grafito); }
  html[data-tema="cristal"] .tab-mic:active .bola { transform: scale(.93); }
  html[data-tema="cristal"] .tab-mic:focus-visible .bola { outline: 2px solid var(--brand); outline-offset: 3px; }
  html[data-tema="cristal"] .tab-mic.escucha .bola { animation: escucha-plata 1s ease-in-out infinite; }
  /* los tres puntos verticales, pegados al borde izquierdo a media altura: abren el menú. Traslúcidos como la barra de abajo
     (mismo tono del fondo); a la vista por el tamaño, los puntos oscuros y el borde de la marca */
  html[data-tema="cristal"].con-mic-centro .asa-menu { display: grid; place-items: center; position: fixed; left: 0; top: 34%; width: 30px; height: 92px; padding: 0 2px 0 0; border: 0; z-index: 15; cursor: pointer;
    border-radius: 0 22px 22px 0; color: var(--ink); background: linear-gradient(145deg, var(--g1t), var(--g2t)); -webkit-backdrop-filter: blur(16px) saturate(185%); backdrop-filter: blur(16px) saturate(185%);
    box-shadow: inset 0 0 0 1px var(--gl), inset 0 1.5px 0 var(--gh), inset -3px 0 0 color-mix(in srgb, var(--brand) 55%, transparent), 0 10px 26px var(--gs2); }
  html[data-tema="cristal"] .asa-menu svg { width: 22px; height: 22px; }
  html[data-tema="cristal"] .asa-menu:active { color: var(--brand); }
  /* el asistente queda encima de la barra, no la tapa: el Mic sigue a mano para enviar */
  html[data-tema="cristal"].con-mic-centro .tabbar { z-index: 30; }
  html[data-tema="cristal"].con-mic-centro .asis-dock { padding-bottom: calc(var(--tabbar) + 44px + env(safe-area-inset-bottom)); }
  html[data-tema="cristal"].con-mic-centro.teclado-abierto .asis-dock { padding-bottom: 0; }
  html[data-tema="cristal"].con-mic-centro.con-asis.teclado-abierto .tabbar { display: none; }
  html[data-tema="cristal"].con-asis .asa-menu { display: none; }
  /* el menú lateral termina arriba de la barra, no por detrás */
  html[data-tema="cristal"].con-mic-centro .side { bottom: calc(var(--tabbar) + 34px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { html[data-tema="cristal"] .tab-mic.escucha .bola { animation: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 4px var(--halo-plata); } }