/* ============================================================
   ZAIRI — Dashboard Clínico
   Paleta: negro + blanco (principal), morado IA (secundario)
   ============================================================ */

:root{
  --bg:        #f4f3f7;
  --surface:   #ffffff;
  --surface-2: #ecebf2;
  --ink:       #16141c;
  --ink-soft:  #6b6878;
  --line:      #e4e2ec;
  --black:     #0b0b10;
  --black-2:   #15141c;
  --purple:    #7c4dff;
  --purple-2:  #6a3df0;
  --purple-soft:#efe9ff;
  --danger:    #c0392b;
  --ok:        #2e9e63;
  --radius:    14px;
  --shadow:    0 10px 30px rgba(20,18,28,.07);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body,#root{ height:100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Hanken Grotesk',system-ui,sans-serif;
  background:var(--bg); color:var(--ink);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{ font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Hanken Grotesk',system-ui,sans-serif; font-weight:600; letter-spacing:-.01em; }

/* ---------- LOGIN ---------- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:
    radial-gradient(80% 60% at 50% 12%, rgba(124,77,255,.30) 0%, rgba(124,77,255,0) 60%),
    linear-gradient(180deg,#0d0c12,#070709);
}
.login-card{
  background:var(--black-2); width:100%; max-width:400px; border:1px solid #221f2c;
  border-radius:20px; padding:40px 36px; box-shadow:0 30px 70px rgba(0,0,0,.5); text-align:center;
}
.login-logo{ width:170px; margin:0 auto 22px; display:block; }
.login-card .tag{ color:#8e8a9c; font-size:11px; margin-bottom:26px; letter-spacing:.18em; text-transform:uppercase; }
.login-card label{ text-align:left; color:#a7a3b6; }
.login-card input{ background:#201d2a; border:1px solid #322e3f; color:#fff; }
.login-card input:focus{ border-color:var(--purple); box-shadow:0 0 0 3px rgba(124,77,255,.25); }

/* ---------- LAYOUT ---------- */
.app{ display:grid; grid-template-columns:232px 1fr; height:100vh; overflow:hidden; }
.sidebar{
  background:linear-gradient(180deg,#0d0c12,#060608); color:#cfccda;
  padding:20px 14px; display:flex; flex-direction:column; overflow-y:auto;
}
.side-logo{ height:30px; width:auto; max-width:172px; display:block; margin:4px 0 20px 6px; object-fit:contain; }
.side-sub{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:#7a7689; text-align:center; padding-bottom:26px; }
.nav-item{
  display:flex; align-items:center; gap:11px; padding:7px 12px; border-radius:17px;
  color:#a7a3b6; cursor:pointer; font-weight:500; font-size:13px; transition:background .15s, color .15s; margin-bottom:2px;
  border:1px solid transparent;
}
.nav-item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav-label{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Módulos "Pro" (add-on) destacados en amarillo, como en la landing */
/* `.destacado` viaja en el MISMO amarillo que `.pro` a propósito: no es un color
   nuevo, es el color que en esta app ya significa "esto no es un módulo más". Si
   Zairi Notes estrenara un tono propio, el menú tendría dos amarillos distintos
   diciendo lo mismo. */
.nav-item.pro .nav-label, .nav-item.destacado .nav-label{ color:#d7e84c; }
.nav-item.pro .ic, .nav-item.destacado .ic{ color:#d7e84c; }
.pro-badge{ flex:0 0 auto; font-size:9px; font-weight:800; letter-spacing:.06em; color:#d7e84c; border:1px solid rgba(215,232,76,.5); border-radius:20px; padding:1px 6px; line-height:1.5; }
.app.collapsed .pro-badge{ display:none; }
.nav-item.active{ background:linear-gradient(135deg,var(--purple),#6a3ff0); color:#fff; font-weight:600; box-shadow:0 6px 18px rgba(124,77,255,.38); }
/* Los módulos Pro, al seleccionarse, usan su identidad amarilla (experiencia distinta) en vez del morado */
.nav-item.pro.active, .nav-item.destacado.active{ background:color-mix(in srgb, #d7e84c 15%, transparent); border-color:rgba(215,232,76,.5); box-shadow:0 5px 16px rgba(215,232,76,.16); }
.nav-item.pro.active .nav-label, .nav-item.pro.active .ic,
.nav-item.destacado.active .nav-label, .nav-item.destacado.active .ic{ color:#e6f24e; }
.nav-item .ic{ width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; opacity:.92; flex:0 0 auto; }
.nav-item{ position:relative; }
/* Badge rojo de novedades (ej. citas nuevas en Agenda) */
.nav-badge{ flex:0 0 auto; min-width:18px; height:18px; padding:0 5px; border-radius:20px; background:#e5484d; color:#fff; font-size:10.5px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 0 0 3px rgba(229,72,77,.22); animation:badgePop .34s cubic-bezier(.2,1.5,.4,1); }
.app.collapsed .nav-badge{ position:absolute; top:2px; right:5px; min-width:16px; height:16px; }
@keyframes badgePop{ 0%{ transform:scale(0); opacity:0 } 55%{ transform:scale(1.28) } 100%{ transform:scale(1); opacity:1 } }
/* Campanita de notificaciones en la barra superior */
.deskbar-bell{ position:relative; width:38px; height:38px; border-radius:11px; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); display:grid; place-items:center; cursor:pointer; transition:border .15s, color .15s; }
.deskbar-bell:hover{ border-color:var(--purple); color:var(--ink); }
.bell-badge{ position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px; border-radius:20px; background:#e5484d; color:#fff; font-size:10px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; border:2px solid var(--bg); animation:badgePop .34s cubic-bezier(.2,1.5,.4,1); }
.notif-ov{ position:fixed; inset:0; z-index:44; }
.notif-menu{ position:absolute; top:50px; right:0; width:344px; max-height:min(72vh, 560px); overflow-y:auto; overscroll-behavior:contain; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:0 18px 50px rgba(0,0,0,.28); z-index:45; padding:6px; }
/* La barra de desplazamiento seguía el estilo del sistema y en modo nocturno salía
   como un bloque blanco. Se pinta con los colores del tema. */
.notif-menu{ scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.notif-menu::-webkit-scrollbar{ width:8px; }
.notif-menu::-webkit-scrollbar-track{ background:transparent; }
.notif-menu::-webkit-scrollbar-thumb{ background:var(--line); border-radius:99px; border:2px solid transparent; background-clip:content-box; }
.notif-menu::-webkit-scrollbar-thumb:hover{ background:var(--ink-soft); background-clip:content-box; }
/* El título queda fijo arriba mientras se desplaza la lista. */
.notif-head{ position:sticky; top:0; background:var(--surface); z-index:1; }
.notif-head{ display:flex; align-items:center; justify-content:space-between; padding:9px 10px 8px; font-weight:700; font-size:13px; color:var(--ink); }
.notif-head button{ font-size:11.5px; font-weight:600; color:var(--purple); background:transparent; border:none; cursor:pointer; }
.notif-empty{ padding:22px 12px; text-align:center; color:var(--ink-soft); font-size:12.5px; }
.notif-item{ display:flex; gap:10px; padding:9px 10px; border-radius:10px; color:var(--ink); font-family:inherit; }
/* Los hallazgos urgentes son <button>: sin esto heredan el gris oscuro que trae el
   navegador por defecto y en modo nocturno quedaban ilegibles (texto oscuro sobre
   fondo oscuro). El color se fuerza para que siga al tema. */
button.notif-item{ color:var(--ink); font-family:inherit; }
button.notif-item b, button.notif-item div{ color:inherit; }
button.notif-item .muted{ color:var(--ink-soft); }
.notif-item:hover{ background:var(--surface-2); }
.notif-item.unread{ background:color-mix(in srgb, var(--purple) 9%, transparent); }
.notif-dot{ flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:var(--purple); margin-top:5px; }
.notif-dot.web{ background:#0ea5a5; } .notif-dot.zairi{ background:#e0981c; }
.notif-txt{ font-size:12.5px; color:var(--ink); line-height:1.4; }
.notif-meta{ font-size:11px; color:var(--ink-soft); margin-top:2px; }
/* Título de sección del menú (Clínica, Comercial, Finanzas…). Solo rótulo, no clickeable. */
.nav-group{ font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.34); padding:14px 12px 5px; user-select:none; }
.nav-item .ic svg{ width:17px; height:17px; display:block; }
.nav-spacer{ flex:1; }
.nav-user{ border-top:1px solid rgba(255,255,255,.1); padding-top:16px; font-size:13px; color:#9a96a9; }
.nav-user-m{ display:none; }
@media(max-width:820px){ .nav-user-m{ display:block; } }
.nav-user b{ color:#fff; display:block; font-weight:600; }
.logout{ margin-top:10px; background:none; border:1px solid rgba(255,255,255,.18); color:#c3bfd1;
  padding:7px 12px; border-radius:8px; cursor:pointer; font-size:12.5px; width:100%; }
.logout:hover{ background:rgba(255,255,255,.07); }

/* Columna principal: barra superior de escritorio + contenido */
.main-col{ display:flex; flex-direction:column; height:100vh; overflow-y:auto; min-width:0; }
.deskbar{ position:fixed; top:0; left:232px; right:0; z-index:40; display:flex; align-items:center; gap:16px;
  height:62px; padding:0 22px; background:var(--bg,#f4f3f7); border-bottom:1px solid var(--line); }
/* Leyenda interactiva de la agenda (filtro por tipo) */
.leyenda-agenda{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:4px 2px 12px; }
.leg-chip{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:var(--ink-soft); background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:5px 11px; cursor:pointer; transition:opacity .15s, border-color .15s, background .15s, box-shadow .15s; }
.leg-chip:hover{ border-color:var(--purple); color:var(--ink); }
.leg-chip.on{ background:color-mix(in srgb, var(--purple) 15%, var(--surface)); border-color:var(--purple); color:var(--ink); box-shadow:0 2px 8px rgba(124,77,255,.18); }
.leg-chip.dim{ opacity:.42; }
.leg-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.leg-clear{ font-size:12px; font-weight:600; color:var(--purple); background:transparent; border:none; cursor:pointer; padding:5px 6px; }
.leg-clear:hover{ text-decoration:underline; }
.prof-chip{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:var(--ink-soft); background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:5px 11px; cursor:pointer; transition:border-color .15s, color .15s, background .15s; }
.prof-chip:hover{ border-color:var(--purple); color:var(--ink); background:var(--surface-2); }
.deskbar-search{ flex:1; max-width:560px; margin:0 auto; display:flex; align-items:center; gap:10px;
  height:40px; padding:0 12px 0 8px; border-radius:12px; border:1px solid var(--line);
  background:var(--surface,#fff); color:var(--ink-soft); cursor:text; transition:border .15s, box-shadow .15s; }
.deskbar-logo{ height:26px; width:auto; max-width:150px; object-fit:contain; flex:0 0 auto; }
@media(min-width:821px){ .side-logo-mini{ display:none; } .sidebar{ padding-top:16px; } .deskbar-logo{ display:none; } }
.deskbar-search:hover{ border-color:var(--purple); box-shadow:0 2px 14px rgba(124,77,255,.12); }
.ds-orb{ width:26px; height:26px; flex:0 0 auto; display:grid; place-items:center; }
.ds-ph{ flex:1; text-align:left; font-size:13.5px; }
.ds-kbd,.cmd-kbd{ font-size:11px; color:var(--ink-soft); border:1px solid var(--line); border-radius:6px; padding:2px 6px; }
.deskbar-right{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.acct{ position:relative; }
.acct-btn{ display:flex; align-items:center; gap:9px; background:transparent; border:1px solid var(--line);
  border-radius:12px; padding:5px 10px 5px 6px; cursor:pointer; color:var(--ink); transition:.15s; }
.acct-btn:hover{ border-color:var(--purple); }
.acct-logo{ width:30px; height:30px; border-radius:8px; object-fit:cover; background:var(--surface-2,#eee); }
.acct-txt{ display:flex; flex-direction:column; line-height:1.15; text-align:left; }
.acct-txt b{ font-size:13px; } .acct-txt small{ font-size:11px; color:var(--ink-soft); }
.acct-ov{ position:fixed; inset:0; z-index:44; }
.acct-menu{ position:absolute; right:0; top:calc(100% + 8px); z-index:50; width:244px; background:var(--surface,#fff);
  border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 44px rgba(0,0,0,.18); padding:8px; }
.acct-head{ display:flex; align-items:center; gap:10px; padding:8px 8px 12px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.acct-head img{ width:38px; height:38px; border-radius:9px; object-fit:cover; background:var(--surface-2,#eee); }
.acct-head b{ display:block; font-size:13.5px; color:var(--ink); } .acct-head small{ font-size:11.5px; color:var(--ink-soft); }
.acct-item{ display:flex; align-items:center; gap:10px; width:100%; background:transparent; border:0; border-radius:9px;
  padding:9px 10px; cursor:pointer; color:var(--ink); font-size:13.5px; text-align:left; }
.acct-item:hover{ background:var(--surface-2,rgba(124,77,255,.08)); }
.acct-item svg{ width:17px; height:17px; }
.acct-item.danger{ color:#c0392b; } .acct-item.danger:hover{ background:rgba(192,57,43,.09); }

/* Buscador de módulos (paleta de comandos) con orbe de Zairi — estilo glass/minimalista */
.cmd-ov{ position:fixed; inset:0; z-index:95; background:rgba(10,8,20,.14); backdrop-filter:blur(12px) saturate(1.1); -webkit-backdrop-filter:blur(12px) saturate(1.1);
  display:flex; align-items:flex-start; justify-content:center; padding:11vh 16px 24px; overflow-y:auto; animation:cmdFade .14s ease; }
.cmd{ width:min(580px,100%); max-height:78vh; display:flex; flex-direction:column;
  background:color-mix(in srgb, var(--surface) 55%, transparent); backdrop-filter:blur(26px) saturate(1.25); -webkit-backdrop-filter:blur(26px) saturate(1.25);
  border:1px solid color-mix(in srgb, var(--ink) 9%, transparent); border-radius:20px; box-shadow:0 16px 44px rgba(0,0,0,.18);
  overflow:hidden; animation:cmdUp .16s ease; }
.cmd-search{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid color-mix(in srgb, var(--ink) 8%, transparent); flex:0 0 auto; }
.cmd-orb{ width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center; }
.cmd-search input{ flex:1; border:0; background:transparent; font-size:16px; color:var(--ink); outline:none; padding:0; margin:0; height:auto; }
.cmd-list{ flex:1 1 auto; min-height:0; overflow:auto; padding:8px; }
.cmd-sec{ font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); padding:10px 12px 4px; }
.cmd-item{ display:flex; align-items:center; gap:12px; width:100%; background:transparent; border:0; border-radius:11px;
  padding:11px 12px; cursor:pointer; color:var(--ink); text-align:left; }
.cmd-item:hover,.cmd-item.current{ background:var(--surface-2,rgba(124,77,255,.09)); }
.cmd-ic{ width:20px; height:20px; display:grid; place-items:center; color:var(--purple); flex:0 0 auto; }
.cmd-ic svg{ width:19px; height:19px; }
.cmd-lbl{ flex:1; font-size:14px; font-weight:500; }
.cmd-grp{ font-size:11px; color:var(--ink-soft); border:1px solid var(--line); border-radius:20px; padding:2px 9px; }
.cmd-empty{ padding:22px; text-align:center; color:var(--ink-soft); font-size:14px; }
@keyframes cmdFade{ from{opacity:0} to{opacity:1} }
@keyframes cmdUp{ from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none} }

.main{ padding:86px 34px 40px; flex:1 0 auto; }
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:26px; gap:16px; flex-wrap:wrap; }
.page-head h1{ font-size:28px; color:var(--ink); }
.page-head p{ color:var(--ink-soft); font-size:13.5px; }

/* ---------- CARDS / STATS ---------- */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin-bottom:30px; }
.stat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow); overflow:hidden; }
.stat .label{ font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); }
.stat .value{ font-family:inherit; font-weight:700; font-size:23px; letter-spacing:-.02em; color:var(--ink); margin-top:6px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.stat.gold{ background:linear-gradient(140deg,#2a1d4d,#1b1530); border-color:#3a2d63; }
.stat.gold .label{ color:#c9bdf0; } .stat.gold .value{ color:#fff; }

.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px; margin-bottom:20px; }

/* ---------- TABLES ---------- */
table{ width:100%; border-collapse:collapse; }
th{ text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); padding:10px 12px; border-bottom:2px solid var(--line); }
td{ padding:13px 12px; border-bottom:1px solid var(--line); font-size:14px; }
tr:hover td{ background:rgba(124,77,255,.04); }
/* Listas largas: caja con alto máximo + scroll interno y encabezado fijo, para que la página no se estire hasta el fondo */
.tbl-scroll{ max-height:60vh; overflow:auto; }
.tbl-scroll thead th{ position:sticky; top:0; background:var(--surface); z-index:2; }
.row-click{ cursor:pointer; }

/* ---------- FORMS ---------- */
label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:5px; }
input,select,textarea{ width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:var(--surface); font:inherit; color:var(--ink); margin-bottom:14px; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--purple); box-shadow:0 0 0 3px rgba(124,77,255,.14); }
textarea{ resize:vertical; min-height:70px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 16px; }
.char-count{ font-size:11px; color:var(--ink-soft); margin-top:-10px; margin-bottom:12px; text-align:right; }

/* ---------- BUTTONS ---------- */
.btn{ background:var(--ink); color:#fff; border:none; padding:11px 20px; border-radius:9px; font:inherit; font-weight:600; cursor:pointer; transition:.15s; }
.btn:hover{ background:#2c2838; }
.btn.gold{ background:var(--purple); color:#fff; }
.btn.gold:hover{ background:var(--purple-2); }
.btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn.ghost:hover{ background:var(--surface-2); }
/* Botones sobre paneles oscuros (videoconsulta): mantienen texto legible en hover */
.btn.vbtn{ background:#1f1f2e; color:#f4f4f8; border:1px solid #3a3a52; }
.btn.vbtn:hover{ background:#2c2c46; color:#ffffff; border-color:#524f77; }
.btn.vbtn:disabled{ opacity:.45; cursor:default; }
.btn.sm{ padding:7px 14px; font-size:13px; }
.btn.danger{ background:var(--danger); }

/* ---------- BADGES / PILLS ---------- */
.pill{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:600; }
.pill.cat{ background:var(--purple-soft); color:var(--purple-2); }
.pill.facial{ background:#e7eef0; color:#2c5a66; }
.pill.corporal{ background:var(--purple-soft); color:var(--purple-2); }
.pill.clinica{ background:#efe9ff; color:#6a3df0; }
.pill.green{ background:#e1efe6; color:var(--ok); }
.pill.red{ background:#f6e3e1; color:var(--danger); }
.pill.gray{ background:#e6e4ea; color:#6b6878; }

/* ---------- MODAL ---------- */
/* FONDO DE TODAS LAS VENTANAS.
   Antes solo oscurecía. Ahora además DESENFOCA lo de atrás, igual que el buscador:
   la ventana se despega del fondo y la vista se va sola a lo que importa.
   Como el desenfoque ya separa, el oscurecido baja de .6 a .45 y se ve más limpio.
   Todas las ventanas del sistema pasan por aquí, así que con esto quedan todas. */
/* Mientras haya una ventana (modal) abierta, la página de atrás no se desplaza:
   el scroll queda dentro de la ventana. La clase la pone y quita el propio Modal. */
body.modal-abierto{ overflow:hidden; }
.modal-bg{ position:fixed; inset:0; background:rgba(12,10,18,.45);
  backdrop-filter:blur(12px) saturate(1.08); -webkit-backdrop-filter:blur(12px) saturate(1.08);
  display:flex; align-items:flex-start; justify-content:center; padding:40px 20px; z-index:50; overflow:auto; }
/* Si el navegador no sabe desenfocar (algunos antiguos), se oscurece más para que
   igual se note la separación entre la ventana y el fondo. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .modal-bg{ background:rgba(12,10,18,.66); }
}
/* PANTALLA PARTIDA EN DOS durante la videoconsulta: el video ocupa la mitad izquierda
   entera y la ficha la mitad derecha entera. Ninguna tapa a la otra, así el médico ve al
   paciente mientras escribe. Antes la ventana solo se "corría con padding" y quedaba una
   banda flotante encima del video; ahora su lienzo EMPIEZA donde termina el video. El
   corte lo fija el propio panel en --video-lado. */
body.video-lado .modal-bg{ left:var(--video-lado, 50vw); padding:24px 20px; justify-content:center; }
.modal{ background:var(--surface); border-radius:18px; width:100%; max-width:680px; padding:30px 32px; box-shadow:0 30px 70px rgba(0,0,0,.3); }
.modal h2{ color:var(--ink); margin-bottom:18px; font-size:23px; }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:8px; }
.close-x{ float:right; background:none; border:none; font-size:22px; cursor:pointer; color:var(--ink-soft); }

/* ---------- MISC ---------- */
.empty{ text-align:center; padding:50px 20px; color:var(--ink-soft); }
.empty .ic{ font-size:40px; opacity:.35; display:block; margin-bottom:10px; }
.toolbar{ display:flex; gap:12px; margin-bottom:18px; align-items:center; flex-wrap:wrap; }
.toolbar input{ margin-bottom:0; max-width:280px; }
.section-title{ font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Hanken Grotesk',system-ui,sans-serif; color:var(--ink); font-size:18px; margin:20px 0 10px; }
.treatment-line{ display:grid; grid-template-columns:2fr 1fr 90px 36px; gap:10px; align-items:center; margin-bottom:8px; }
.treatment-line input,.treatment-line select{ margin-bottom:0; }
.x-btn{ background:#f6e3e1; color:var(--danger); border:none; border-radius:8px; cursor:pointer; padding:8px; font-weight:700; }
.muted{ color:var(--ink-soft); font-size:13px; }
.hint{ font-size:12px; color:var(--purple-2); margin-top:-8px; margin-bottom:12px; }
.soon{ background:var(--surface-2); border:1px dashed var(--purple); border-radius:var(--radius); padding:40px; text-align:center; }
.soon h3{ color:var(--ink); font-size:20px; margin-bottom:8px; }

/* ---------- Barra superior móvil + cajón ---------- */
.topbar{ display:none; }
.burger{ background:none; border:none; cursor:pointer; padding:6px; display:flex; flex-direction:column; gap:5px; align-items:flex-start; }
.burger span{ width:20px; height:1.6px; background:#fff; border-radius:2px; display:block; opacity:.92; transition:.2s; }
.burger span:nth-child(2){ width:13px; }
.burger:active span:nth-child(2){ width:20px; }
.topbar-logo{ height:30px; width:auto; }
.topbar-logo[src*="horizontal"]{ height:26px; }
.topbar-name{ font-weight:600; font-size:15px; color:#fff; letter-spacing:.02em; }
.topbar-search-m{ display:none; }
.drawer-ov{ display:none; }

@media(max-width:820px){
  .app{ grid-template-columns:1fr; }
  .deskbar{ display:none; }
  /* Barra superior fija */
  .topbar{ display:flex; align-items:center; gap:12px; position:fixed; top:0; left:0; right:0; height:56px;
    padding:0 16px; background:linear-gradient(180deg,#0d0c12,#0a090f); z-index:60; border-bottom:1px solid rgba(255,255,255,.08); }
  .topbar-search-m{ display:grid; place-items:center; margin-left:auto; background:transparent; border:1px solid rgba(255,255,255,.18);
    color:#e7e4f2; width:36px; height:36px; border-radius:10px; cursor:pointer; }
  .topbar-search-m svg{ width:18px; height:18px; }
  /* Sidebar se vuelve cajón deslizante */
  .sidebar{ position:fixed; top:0; left:0; bottom:0; width:80%; max-width:300px; z-index:70;
    transform:translateX(-100%); transition:transform .28s cubic-bezier(.4,0,.2,1); overflow-y:auto; box-shadow:0 0 40px rgba(0,0,0,.5); }
  .app.menu-open .sidebar{ transform:translateX(0); }
  /* Menú lateral en el teléfono: mismo desenfoque que las ventanas. */
  .drawer-ov{ display:block; position:fixed; inset:0; background:rgba(0,0,0,.38);
    backdrop-filter:blur(10px) saturate(1.05); -webkit-backdrop-filter:blur(10px) saturate(1.05); z-index:65; }
  .side-logo{ height:26px; width:auto; margin:8px 0 16px 6px; }
  .side-logo-mini{ display:none; } /* el logo cuadrado es solo del menú colapsado de escritorio */
  .collapse-btn{ display:none; }   /* colapsar el menú no aplica en móvil (es un cajón) */
  .nav-spacer{ flex:1; } .nav-user{ display:block; }
  /* Contenido empujado bajo la barra */
  .main{ padding:74px 16px 40px; overflow-x:hidden; }
  .grid-2,.grid-3{ grid-template-columns:1fr; }
  .card{ overflow-x:auto; }
  .page-head h1{ font-size:23px; }
  .stats{ grid-template-columns:1fr 1fr; gap:11px; }
  table{ font-size:13px; }
  .modal-bg{ padding:74px 12px 24px; }
  .modal{ padding:22px 18px; }
}
@media(max-width:430px){
  .stats{ grid-template-columns:1fr; }
}

/* checkbox alineado */
.check-row{ display:flex; align-items:center; gap:9px; margin-bottom:14px; cursor:pointer; }
.check-row input{ width:auto; margin:0; }
.check-row span{ font-weight:500; color:var(--ink); }

/* ---------- Segmented control (Lista / Calendario) ---------- */
.seg{ display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:3px; }
.seg button{ border:none; background:none; padding:7px 16px; border-radius:8px; cursor:pointer; font:inherit; font-weight:600; color:var(--ink-soft); }
.seg button.on{ background:var(--ink); color:#fff; }

/* ---------- Configuración: filas de horario ---------- */
.hours-row{ display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); }
.hours-row:last-child{ border-bottom:none; }

/* ---------- Calendario en grilla ---------- */
.cal-nav{ display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.cal-scroll{ overflow:auto; -webkit-overflow-scrolling:touch; border-radius:10px; max-height:calc(100vh - 220px); overscroll-behavior:contain; }
.cal-head,.cal-corner{ position:sticky; top:0; z-index:9; }
.cal-time{ position:sticky; left:0; z-index:8; }
.cal-corner{ left:0; z-index:10; }
.cal-grid{ user-select:none; -webkit-user-select:none; }
.cal-grid{ display:grid; grid-template-columns:60px repeat(7,minmax(120px,1fr)); border:1px solid var(--line); border-radius:10px; min-width:760px; }
.cal-corner{ background:var(--surface-2); border-bottom:1px solid var(--line); }
.cal-head{ background:var(--surface-2); padding:8px 6px; text-align:center; font-weight:600; font-size:13px; border-bottom:1px solid var(--line); border-left:1px solid var(--line); }
.cal-head.today{ background:var(--purple-soft); color:var(--purple-2); }
.cal-time{ padding:6px; font-size:11.5px; color:var(--ink-soft); text-align:right; border-bottom:1px solid var(--line); background:var(--surface); }
.cal-cell{ position:relative; min-height:36px; border-bottom:1px solid var(--line); border-left:1px solid var(--line); padding:3px; cursor:pointer; transition:.1s; }
.cal-cell:hover{ background:rgba(124,77,255,.05); }
.cal-appt{ color:#fff; border-radius:7px; padding:4px 7px; font-size:11.5px; margin-bottom:3px; line-height:1.25; box-shadow:0 2px 6px rgba(0,0,0,.12); }
.cal-appt b{ font-weight:700; }
.cal-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:#ffd36b; margin-left:5px; vertical-align:middle; }

/* embudo de conversión (Mensajes) */
.funnel{ display:flex; gap:14px; overflow-x:auto; overflow-y:hidden; padding-bottom:10px; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; }
.funnel-col{ flex:0 0 300px; max-width:300px; scroll-snap-align:start; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:10px; min-height:120px; max-height:68vh; overflow-y:auto; overflow-x:hidden; min-width:0; }
.funnel-head{ font-weight:700; font-size:13px; color:var(--ink); padding:4px 6px 10px; }
.lead-card{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px 11px; margin-bottom:9px; box-shadow:0 2px 6px rgba(20,18,28,.05); overflow:hidden; word-break:break-word; overflow-wrap:anywhere; max-width:100%; }
.lead-card *{ max-width:100%; overflow-wrap:anywhere; }
.lead-move{ margin:8px 0 0; padding:6px 8px; font-size:12px; }
@media(max-width:820px){ .funnel-col{ flex:0 0 82vw; max-width:82vw; } }

/* barras de informes */
.bar{ background:var(--surface-2); border-radius:6px; height:10px; overflow:hidden; }
.bar-fill{ height:100%; background:linear-gradient(90deg,var(--purple),var(--purple-2)); border-radius:6px; }


/* ============== LOGIN estilo Apple ============== */
.applogin{ position:fixed; inset:0; overflow:hidden; color:#fff; z-index:50; padding:24px;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(70% 50% at 50% 8%,rgba(124,77,255,.28),rgba(124,77,255,0) 60%),linear-gradient(180deg,#0d0c14,#07070b); }
.applogin::before,.applogin::after{ content:''; position:absolute; border-radius:50%; filter:blur(120px); pointer-events:none; }
.applogin::before{ width:480px; height:480px; background:#5b34d6; top:-160px; left:-120px; opacity:.5; }
.applogin::after{ width:420px; height:420px; background:#7c4dff; bottom:-180px; right:-130px; opacity:.35; }
.applogin .inner{ position:relative; z-index:2; width:100%; max-width:400px; text-align:center; animation:appfade .9s ease both;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.1);
  border-radius:26px; padding:40px 34px; box-shadow:0 40px 100px rgba(0,0,0,.5); backdrop-filter:blur(14px); }
.applogin img{ height:46px; width:auto; opacity:.98; margin-bottom:22px; animation:appfade 1.1s ease both; }
.applogin h1{ font-weight:700; font-size:34px; letter-spacing:-.025em; margin:0 0 8px; }
.applogin .sub{ color:#a7a3b8; font-size:15px; margin-bottom:28px; min-height:20px; }
.applogin .fld{ text-align:left; margin-bottom:14px; }
.applogin label{ color:#8b8794; font-size:12px; letter-spacing:.02em; }
.applogin input{ width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#fff;
  border-radius:12px; padding:13px 14px; font-size:16px; margin-top:5px; outline:none; transition:.18s; }
.applogin input:focus{ border-color:var(--purple); background:rgba(255,255,255,.1); box-shadow:0 0 0 3px rgba(124,77,255,.22); }
.applogin .go{ width:100%; background:linear-gradient(135deg,var(--purple),#6a3ff0); color:#fff; border:none; border-radius:100px;
  padding:15px; font-size:16px; font-weight:600; margin-top:12px; cursor:pointer; transition:.2s; box-shadow:0 14px 36px rgba(124,77,255,.45); }
.applogin .go:hover{ transform:translateY(-2px); box-shadow:0 18px 46px rgba(124,77,255,.6); }
.applogin .err{ color:#ff8a80; font-size:13px; margin-bottom:10px; }
@keyframes appfade{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* ============== Bienvenida difuminada diaria ============== */
.welcome{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  background:rgba(8,7,12,.55); backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px);
  animation:wfadein .6s ease both; }
.welcome.out{ animation:wfadeout .8s ease both; }
.welcome .c{ text-align:center; color:#fff; padding:24px; }
.welcome .hi{ color:#b9b4cc; font-size:20px; font-weight:500; opacity:0; animation:wword .9s .15s ease both; }
.welcome .name{ font-family:inherit; font-weight:600; font-size:54px; letter-spacing:-.02em; margin:6px 0 16px;
  opacity:0; filter:blur(16px); animation:wname 1.1s .35s cubic-bezier(.2,.7,.2,1) both; }
.welcome .ph{ color:#cfcbe0; font-size:18px; max-width:520px; margin:auto; opacity:0; filter:blur(10px);
  animation:wname 1.1s .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes wname{ from{ opacity:0; filter:blur(16px); transform:translateY(16px); } to{ opacity:1; filter:blur(0); transform:none; } }
@keyframes wword{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes wfadein{ from{ opacity:0; } to{ opacity:1; } }
@keyframes wfadeout{ from{ opacity:1; } to{ opacity:0; visibility:hidden; } }

/* ============== Visita guiada ============== */
.tour{ position:fixed; inset:0; z-index:70; background:rgba(8,7,12,.6); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:24px; }
.tour .box{ background:#fff; border-radius:18px; max-width:420px; padding:26px; box-shadow:0 30px 80px rgba(0,0,0,.5); text-align:center; }
.tour .ic{ font-size:34px; }
.tour h3{ font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Hanken Grotesk',system-ui,sans-serif; margin:10px 0 6px; color:var(--ink); }
.tour p{ color:#6b6680; font-size:15px; }
.tour .dots{ display:flex; gap:6px; justify-content:center; margin:16px 0; }
.tour .dot{ width:7px; height:7px; border-radius:50%; background:#dcd8ea; }
.tour .dot.on{ background:var(--purple); }
.tour .row{ display:flex; gap:10px; justify-content:center; }

/* Paginación */
.pager{ display:flex; gap:8px; align-items:center; justify-content:center; margin:16px 0; flex-wrap:wrap; }
.pager .muted{ margin:0 6px; }

/* Ticks de confirmación en agenda (estilo WhatsApp) */
.tick{ font-size:11px; margin-left:4px; }
.tick.conf{ color:#34b7f1; }        /* doble check azul = confirmada */
.tick.pend{ color:rgba(255,255,255,.7); } /* check simple = agendada */
.appt.cancel{ opacity:.5; text-decoration:line-through; }

/* Detalle de cita */
.appt-detail .row{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line); }
.appt-detail .row b{ color:var(--ink); }

/* ---------- Orbe 3D de Zairi ---------- */
.orb3d-wrap{ position:relative; display:flex; align-items:center; justify-content:center; }
.orb3d-glow{ position:absolute; inset:-6% ; border-radius:50%; z-index:0;
  background:radial-gradient(circle at 50% 45%, rgba(124,77,255,.65), rgba(124,77,255,.18) 45%, transparent 72%);
  filter:blur(26px); animation:orbglow 4s ease-in-out infinite; }
@keyframes orbglow{ 0%,100%{ transform:scale(1); opacity:.85 } 50%{ transform:scale(1.08); opacity:1 } }

/* Presentación de una sola pasada para la tarjeta de oportunidades de Zairi.
   El borde recorre el perímetro, ilumina suavemente el contenido y termina en
   una tarjeta estable. Es la prueba visual antes de llevar el efecto a otros módulos. */
@property --zairi-card-angle{ syntax:'<angle>'; inherits:false; initial-value:-80deg; }
.zairi-opportunity-card{
  background:linear-gradient(135deg,rgba(124,77,255,.11),rgba(210,198,255,.07) 48%,rgba(92,242,194,.055));
  border-color:rgba(124,77,255,.30);
}
.zairi-opportunity-card,.zairi-reveal-card,.sim-hero{
  position:relative; isolation:isolate;
  animation:zairi-card-settle 2.9s cubic-bezier(.2,.75,.25,1) 1 both;
}
.zairi-opportunity-card > *,.zairi-reveal-card > *,.sim-hero > *{ position:relative; z-index:2; }
.zairi-opportunity-card::before,.zairi-reveal-card::before,.sim-hero::before{
  content:''; position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:inherit; padding:2px;
  background:conic-gradient(from var(--zairi-card-angle), transparent 0deg, transparent 246deg, #6840ff 278deg, #d9cfff 306deg, #63e3d1 334deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:zairi-border-once 2.9s cubic-bezier(.18,.78,.28,1) 1 forwards;
}
.zairi-opportunity-card::after,.zairi-reveal-card::after,.sim-hero::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit;
  background:linear-gradient(112deg,transparent 30%,rgba(255,255,255,.38) 46%,rgba(191,168,255,.18) 54%,transparent 70%);
  background-size:250% 100%; background-position:120% 0; opacity:0;
  animation:zairi-card-light-once 2.45s cubic-bezier(.2,.72,.3,1) .12s 1 forwards;
}
@keyframes zairi-border-once{
  0%{ --zairi-card-angle:-80deg; opacity:0; }
  12%{ opacity:1; }
  76%{ opacity:.92; }
  100%{ --zairi-card-angle:640deg; opacity:0; }
}
@keyframes zairi-card-light-once{
  0%{ background-position:120% 0; opacity:0; }
  18%{ opacity:.7; }
  76%{ opacity:.28; }
  100%{ background-position:-20% 0; opacity:0; }
}
@keyframes zairi-card-settle{
  0%{ box-shadow:0 0 0 rgba(124,77,255,0); }
  32%{ box-shadow:0 18px 52px rgba(124,77,255,.21),0 0 24px rgba(99,227,209,.09); }
  100%{ box-shadow:0 10px 30px rgba(43,31,78,.08); }
}
@media(prefers-reduced-motion:reduce){
  .zairi-opportunity-card,.zairi-reveal-card,.sim-hero{ animation:none; }
  .zairi-opportunity-card::before,.zairi-opportunity-card::after,
  .zairi-reveal-card::before,.zairi-reveal-card::after,
  .sim-hero::before,.sim-hero::after{ display:none; }
}

/* ---------- Orbe de Zairi (CSS, fallback / mini) ---------- */
.zairi-orb{ position:relative; width:160px; height:160px; margin:0 auto;
  -webkit-mask:url(/logo.png) center/contain no-repeat; mask:url(/logo.png) center/contain no-repeat;
  filter:drop-shadow(0 0 26px rgba(124,77,255,.95)) saturate(1.5) brightness(1.15);
  animation:zairi-rot 7s linear infinite; }
.zairi-orb span{ position:absolute; inset:0; mix-blend-mode:screen; animation:zairi-pulse 3.5s ease-in-out infinite; }
.zairi-orb span:nth-child(1){ background:radial-gradient(circle at 30% 30%, #b79bff, transparent 60%); }
.zairi-orb span:nth-child(2){ background:radial-gradient(circle at 70% 40%, #7c4dff, transparent 62%); animation-delay:-1.2s; }
.zairi-orb span:nth-child(3){ background:radial-gradient(circle at 50% 78%, #e3d8ff, transparent 58%); animation-delay:-2.4s; }
.zairi-orb::after{ content:''; position:absolute; inset:0;
  background:conic-gradient(from 0deg, #9d7bff, #7c4dff, #d7c9ff, #7c4dff, #9d7bff); opacity:.55; mix-blend-mode:screen;
  animation:zairi-rot 5s linear infinite reverse; }
@keyframes zairi-rot{ to{ transform:rotate(360deg); } }
@keyframes zairi-pulse{ 0%,100%{ transform:scale(1); opacity:.9; } 50%{ transform:scale(1.08); opacity:1; } }

/* ---------- Tarjetas de estado clicleables (panel Hoy) ---------- */
.stat.clickable{ cursor:pointer; transition:.18s; position:relative; }
.stat.clickable:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.1); }
.stat.clickable .mini{ font-size:12px; color:var(--purple); margin-top:6px; font-weight:600; opacity:.85; }
/* La tarjeta dorada ("Gasto total") tiene fondo oscuro: el morado de --purple
   sobre ese fondo queda en ~2.9:1 de contraste y la pista "Ver desglose ›"
   —lo único que dice que la tarjeta se puede tocar— era casi invisible. */
.stat.gold.clickable .mini{ color:#ffd479; opacity:1; }
.stat.clickable.sel{ outline:2px solid var(--purple); outline-offset:0; }
.badge.ok{ background:rgba(31,138,91,.14); color:#1f8a5b; padding:3px 9px; border-radius:100px; font-size:12px; font-weight:600; }
.badge.wait{ background:rgba(214,158,46,.16); color:#a9791b; padding:3px 9px; border-radius:100px; font-size:12px; font-weight:600; }
/* Estado negativo (cancelada / no asistió) en las métricas de recepción */
.badge.no{ background:rgba(192,57,43,.14); color:#c0392b; padding:3px 9px; border-radius:100px; font-size:12px; font-weight:600; }

/* ---------- Orbe de ayuda flotante ---------- */
.help-orb{ position:fixed; right:22px; bottom:22px; width:62px; height:62px; cursor:pointer; z-index:55;
  border-radius:50%; filter:drop-shadow(0 8px 24px rgba(124,77,255,.5)); transition:transform .2s; }
.help-orb:hover{ transform:scale(1.08); }
.help-bubble{ position:absolute; bottom:74px; right:0; white-space:nowrap; background:#15141c; color:#fff;
  border:1px solid #2a2636; padding:10px 14px; border-radius:12px; font-size:13.5px; font-weight:500;
  box-shadow:0 12px 30px rgba(0,0,0,.35); animation:appfade .2s ease both; }
@media(max-width:820px){ .help-orb{ right:14px; bottom:14px; width:54px; height:54px; } }

/* ---------- Agenda vista de un día (móvil) ---------- */
.day-grid{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.day-row{ display:grid; grid-template-columns:58px 1fr; min-height:90px; border-bottom:1px solid var(--line); }
.day-row:last-child{ border-bottom:none; }
.day-time{ padding:8px 6px; font-size:12px; color:var(--muted); border-right:1px solid var(--line); display:flex; align-items:flex-start; justify-content:center; }
.day-cell{ position:relative; padding:6px; cursor:pointer; display:flex; flex-direction:column; gap:6px; }
.day-cell:active{ background:rgba(124,77,255,.06); }
.day-cell .cal-appt{ position:relative; padding:9px 11px; border-radius:9px; font-size:14px; }

/* ---------- Mensajes: ver conversación ---------- */
.lead-chat{ width:100%; margin-top:8px; background:none; border:1px solid var(--line); color:var(--purple-2);
  border-radius:8px; padding:6px; font-size:12.5px; cursor:pointer; transition:.15s; }
.lead-chat:hover{ background:rgba(124,77,255,.08); border-color:var(--purple); }
.chat-thread{ max-height:60vh; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:6px 2px; }
.chat-msg{ display:flex; flex-direction:column; max-width:78%; }
.chat-msg.in{ align-self:flex-start; align-items:flex-start; }
.chat-msg.out{ align-self:flex-end; align-items:flex-end; }
.chat-bubble{ padding:9px 13px; border-radius:14px; font-size:14px; line-height:1.45; white-space:pre-wrap; word-break:break-word; }
.chat-msg.in .chat-bubble{ background:var(--surface-2); color:var(--ink); border-bottom-left-radius:4px; }
.chat-msg.out .chat-bubble{ background:linear-gradient(135deg,var(--purple),var(--purple-2)); color:#fff; border-bottom-right-radius:4px; }
.chat-time{ font-size:10.5px; color:var(--muted); margin-top:3px; }

/* ============================================================
   MENSAJES · Vista "Chats" (estilo WhatsApp Web)
   Panel izquierdo = lista de conversaciones; derecho = el chat.
   ============================================================ */
.wa-funnel{ display:flex; gap:6px; overflow-x:auto; padding:2px 2px 8px; margin-bottom:10px; -webkit-overflow-scrolling:touch; }
.wa-chip{ font-size:11.5px; padding:5px 11px; border-radius:999px; border:1px solid var(--line); background:var(--surface);
  cursor:pointer; color:var(--ink-soft); font-weight:600; white-space:nowrap; transition:background .12s, color .12s, border-color .12s; }
.wa-chip b{ font-weight:800; margin-left:2px; }
.wa-chip:hover{ background:var(--surface-2); }
.wa-chip.on{ background:var(--purple-soft); color:var(--purple-2); border-color:var(--purple-2); }

.wa-wrap{ display:grid; grid-template-columns:340px minmax(0,1fr); grid-template-rows:minmax(0,1fr);
  padding:0; overflow:hidden; height:calc(100vh - 285px); min-height:480px; }
.wa-list{ border-right:1px solid var(--line); display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--surface); }
.wa-search{ padding:10px 12px 8px; border-bottom:1px solid var(--line); }
.wa-search input{ width:100%; margin:0; background:var(--surface-2); border:1px solid transparent; border-radius:10px; padding:9px 13px; font-size:13.5px; }
.wa-search input:focus{ border-color:var(--purple); background:var(--surface); }
.wa-chips{ display:flex; gap:6px; padding:8px 12px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.wa-items{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.wa-item{ display:flex; gap:11px; padding:11px 12px; cursor:pointer; border-bottom:1px solid var(--line); align-items:center; transition:background .12s; }
.wa-item:hover{ background:var(--surface-2); }
.wa-item.sel{ background:var(--purple-soft); }
.wa-ava{ width:42px; height:42px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:16px; color:#fff; user-select:none; }
.wa-ava.wsp{ background:linear-gradient(135deg,#2fca6c,#128c7e); }
.wa-ava.ig{ background:linear-gradient(135deg,#8a3ab9,#e95950 85%); }
.wa-item-main{ flex:1; min-width:0; }
.wa-row1{ display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.wa-name{ font-weight:650; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wa-time{ font-size:10.5px; color:var(--ink-soft); flex:0 0 auto; }
.wa-row2{ display:flex; justify-content:space-between; gap:8px; align-items:center; margin-top:2px; }
.wa-prev{ font-size:12px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.wa-dot{ width:9px; height:9px; border-radius:50%; background:var(--purple); flex:0 0 auto; box-shadow:0 0 0 3px rgba(124,77,255,.15); }
.wa-stage{ font-size:9.5px; padding:2px 8px; border-radius:999px; background:var(--surface-2); color:var(--ink-soft);
  flex:0 0 auto; max-width:112px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }

.wa-chat{ display:flex; flex-direction:column; min-width:0; min-height:0; background:#f1eff7;
  background-image:radial-gradient(rgba(124,77,255,.06) 1px, transparent 1.35px); background-size:22px 22px; }
.wa-head{ display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--surface); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.wa-head-info{ flex:1; min-width:130px; }
.wa-head-name{ font-weight:700; font-size:14.5px; line-height:1.25; }
.wa-head-sub{ font-size:11.5px; color:var(--ink-soft); }
.wa-thread{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:16px 20px; display:flex; flex-direction:column; gap:3px; }
.wa-day{ align-self:center; font-size:10.5px; color:var(--ink-soft); background:var(--surface); border:1px solid var(--line);
  padding:3px 13px; border-radius:999px; margin:10px 0 8px; box-shadow:0 1px 3px rgba(20,18,28,.06); text-transform:capitalize; }
.wa-msg{ display:flex; max-width:72%; }
.wa-msg.in{ align-self:flex-start; }
.wa-msg.out{ align-self:flex-end; }
.wa-bub{ padding:7px 11px 7px 12px; border-radius:13px; font-size:13.5px; line-height:1.45; white-space:pre-wrap;
  word-break:break-word; box-shadow:0 1px 2px rgba(20,18,28,.08); }
.wa-msg.in .wa-bub{ background:var(--surface); border-top-left-radius:4px; }
.wa-msg.out .wa-bub{ background:linear-gradient(135deg,var(--purple),var(--purple-2)); color:#fff; border-top-right-radius:4px; }
.wa-meta{ display:inline-block; font-size:9.5px; margin-left:9px; color:var(--ink-soft); float:right; margin-top:7px; }
.wa-msg.out .wa-meta{ color:rgba(255,255,255,.78); }
.wa-foot{ padding:10px 12px; background:var(--surface); border-top:1px solid var(--line); }
.wa-banner{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.wa-compose{ display:flex; gap:8px; align-items:flex-end; }
.wa-compose textarea{ flex:1; margin:0; resize:none; border-radius:12px; min-height:42px; max-height:130px; }
.wa-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color:var(--ink-soft); text-align:center; padding:24px; }
.wa-back{ display:none; }
/* ---- Chats en modo oscuro: fondo del hilo y burbujas se adaptan al tema ---- */
[data-theme="dark"] .wa-chat{ background:#0f0d16; background-image:radial-gradient(rgba(124,77,255,.12) 1px, transparent 1.35px); background-size:22px 22px; }
[data-theme="dark"] .wa-msg.in .wa-bub{ background:var(--surface-2); }
[data-theme="dark"] .wa-day{ background:var(--surface-2); box-shadow:none; }
[data-theme="dark"] .wa-search input{ background:var(--surface-2); }
[data-theme="dark"] .wa-search input:focus{ background:var(--surface); }

@media(max-width:880px){
  .wa-wrap{ grid-template-columns:1fr; grid-template-rows:minmax(0,1fr); height:calc(100vh - 250px); min-height:420px; }
  .wa-wrap.chat-open .wa-list{ display:none; }
  .wa-wrap:not(.chat-open) .wa-chat{ display:none; }
  .wa-back{ display:inline-flex; }
  .wa-msg{ max-width:86%; }
}

/* ---------- Informes: tarjetas clickeables ---------- */
.stat.clickable{ cursor:pointer; transition:transform .12s, box-shadow .12s, border-color .12s; }
.stat.clickable:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.08); border-color:var(--purple); }
.stat.active-stat{ border-color:var(--purple); box-shadow:0 0 0 2px rgba(124,77,255,.25); }

/* ---------- TABS (pestañas con diseño) ---------- */
.tabs{ display:flex; gap:6px; flex-wrap:wrap; background:var(--surface-2); padding:5px; border-radius:12px; margin-bottom:14px; }
.tab{ border:0; background:transparent; color:var(--ink-soft); font-weight:600; font-size:13.5px; padding:8px 15px; border-radius:9px; cursor:pointer; transition:.16s ease; white-space:nowrap; font-family:inherit; }
.tab:hover{ color:var(--ink); background:rgba(124,77,255,.08); }
.tab.active{ background:var(--surface); color:var(--purple-2); box-shadow:0 2px 8px rgba(20,18,28,.10); }

/* ---------- TEMA OSCURO (automático por hora o manual) ---------- */
[data-theme="dark"]{
  --bg:        #0c0b11;
  --surface:   #16141d;
  --surface-2: #211d2e;
  --ink:       #f1eff7;
  --ink-soft:  #9a96aa;
  --line:      #2b2740;
  --black:     #050509;
  --black-2:   #0f0e15;
  --purple-soft:#241a3d;
  --shadow:    0 12px 34px rgba(0,0,0,.45);
}
[data-theme="dark"] .tab.active{ box-shadow:0 2px 10px rgba(0,0,0,.5); }
[data-theme="dark"] body{ background:var(--bg); }
.theme-toggle{ background:transparent; border:1px solid var(--line); color:var(--ink-soft); width:38px; height:38px; border-radius:10px; cursor:pointer; font-size:17px; display:grid; place-items:center; transition:.15s; }
.theme-toggle:hover{ color:var(--ink); border-color:var(--purple); }

/* ---------- Correcciones modo oscuro ---------- */
[data-theme="dark"] .btn{ background:var(--purple); color:#fff; }
[data-theme="dark"] .btn:hover{ background:var(--purple-2); }
[data-theme="dark"] .btn.ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
[data-theme="dark"] .btn.ghost:hover{ background:var(--surface-2); }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea{ background:var(--surface-2); color:var(--ink); border-color:var(--line); }
[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder{ color:#6f6b80; }
[data-theme="dark"] table th{ color:var(--ink-soft); }
[data-theme="dark"] .logout{ color:var(--ink-soft); }
/* Pestañas segmentadas (Calendario/Lista, etc.): la activa usaba --ink (casi
   blanco en oscuro) con texto blanco → invisible. En oscuro usamos el morado. */
[data-theme="dark"] .seg button.on{ background:var(--purple); color:#fff; }

/* Pulso del orbe-avatar de Zairi cuando está pensando */
.zairi-pulse{animation:zairiPulse 1.3s ease-in-out infinite}
@keyframes zairiPulse{0%,100%{transform:scale(1);box-shadow:0 0 8px rgba(124,77,255,.5),inset 0 0 6px rgba(255,255,255,.45)}50%{transform:scale(1.12);box-shadow:0 0 16px rgba(124,77,255,.9),inset 0 0 6px rgba(255,255,255,.6)}}

/* ===== Simulador IA (experiencia con Zairi) ===== */
.sim-hero{ background:linear-gradient(135deg, rgba(124,77,255,.16), rgba(124,77,255,.03)); border:1px solid rgba(124,77,255,.28); border-radius:18px; padding:22px 24px; margin-bottom:20px; display:flex; align-items:center; gap:22px; }
.sim-chip{ display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:12.5px; cursor:pointer; transition:.15s; user-select:none; line-height:1.2; }
.sim-chip:hover{ border-color:var(--purple); }
.sim-chip.on{ background:var(--purple); border-color:var(--purple); color:#fff; box-shadow:0 6px 16px rgba(124,77,255,.35); }
.sim-chip.warn.on{ background:#c0392b; border-color:#c0392b; box-shadow:0 6px 16px rgba(192,57,43,.3); }
.sim-drop{ border:2px dashed var(--line); border-radius:14px; padding:28px 20px; text-align:center; cursor:pointer; transition:.15s; background:var(--surface-2); }
.sim-drop:hover{ border-color:var(--purple); background:rgba(124,77,255,.06); }
.sim-drop.has{ padding:10px; border-style:solid; }
.sim-ta{ position:relative; }
.sim-ta-list{ position:absolute; z-index:30; left:0; right:0; margin-top:4px; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); max-height:240px; overflow:auto; }
.sim-ta-item{ padding:9px 12px; cursor:pointer; font-size:13.5px; }
.sim-ta-item:hover{ background:var(--surface-2); }
.sim-patient-chip{ display:inline-flex; align-items:center; gap:8px; margin-top:8px; padding:7px 12px; border-radius:12px; background:rgba(124,77,255,.12); border:1px solid rgba(124,77,255,.35); font-size:13px; }

/* Consentimientos · defensa jurídica preventiva con Zairi */
.zairi-consent-hero{ padding:22px 24px; }
.zairi-consent-head{ display:flex; align-items:center; gap:18px; }
.zairi-legal-stats{ display:grid; grid-template-columns:repeat(4,minmax(120px,1fr)); gap:9px; margin-top:17px; }
.zairi-legal-stats span{ background:rgba(255,255,255,.48); border:1px solid rgba(124,77,255,.13); border-radius:12px; padding:10px 12px; font-size:12.5px; color:var(--ink-soft); }
.zairi-legal-stats span b{ font-size:18px; color:var(--ink); margin-right:5px; }
.zairi-legal-stats span.warn{ background:rgba(211,146,45,.10); border-color:rgba(211,146,45,.28); }
.zairi-legal-profile{ border-left:3px solid #d69a31; }
.zairi-result-title{ display:flex; align-items:center; padding:16px 18px; background:var(--surface-2); border-bottom:1px solid var(--line); }
.zairi-legal-result{ display:flex; align-items:center; gap:13px; padding:13px 17px; border-bottom:1px solid var(--line); }
.zairi-legal-result:last-child{ border-bottom:0; }
.zairi-score{ width:56px; height:56px; flex:0 0 56px; border-radius:18px; display:flex; align-items:baseline; justify-content:center; background:#f1eff8; color:#5b5470; padding-top:13px; box-sizing:border-box; }
.zairi-score b{ font-size:20px; line-height:1; }
.zairi-score small{ font-size:9px; margin-left:1px; }
.zairi-score.bad{ background:#fff0f0; color:#ba3535; }
.zairi-score.warn{ background:#fff7e5; color:#9a6b17; }
.zairi-score.good{ background:#eaf8f2; color:#21805b; }
.consent-treatment-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px; margin:10px 0 14px; max-height:270px; overflow:auto; }
.consent-treatment-grid.compact{ max-height:210px; }
.consent-treatment-check{ display:flex; gap:9px; align-items:flex-start; margin:0; padding:10px 11px; border:1px solid var(--line); border-radius:12px; background:var(--surface); cursor:pointer; transition:.15s; }
.consent-treatment-check:hover,.consent-treatment-check.on{ border-color:rgba(124,77,255,.55); background:rgba(124,77,255,.07); }
.consent-treatment-check input{ width:auto; flex:0 0 auto; margin:3px 0 0; }
.consent-treatment-check span{ display:flex; flex-direction:column; font-size:12.5px; }
.consent-treatment-check small{ font-size:10.5px; color:var(--muted); margin-top:2px; font-weight:400; }
.consent-chips{ display:flex; gap:5px; flex-wrap:wrap; }
.consent-chips .pill{ font-size:10px; }
.zairi-proposal-summary{ display:flex; gap:12px; align-items:center; padding:12px; border-radius:14px; background:rgba(124,77,255,.07); margin-bottom:12px; }
.zairi-findings{ display:flex; flex-direction:column; gap:7px; max-height:280px; overflow:auto; margin-bottom:14px; }
.zairi-finding{ display:flex; gap:10px; padding:10px 11px; border:1px solid var(--line); border-radius:12px; }
.zairi-finding>span{ flex:0 0 52px; height:max-content; text-align:center; border-radius:999px; padding:3px 6px; font-size:9px; font-weight:800; text-transform:uppercase; background:#eee; }
.zairi-finding.critica>span{ background:#ffe4e4; color:#a82424; }
.zairi-finding.alta>span{ background:#fff0db; color:#945e0a; }
.zairi-finding.media>span{ background:#ece8ff; color:#5c3eb5; }
.zairi-finding p,.zairi-finding small{ display:block; margin:2px 0 0; font-size:11.5px; color:var(--muted); line-height:1.35; }
.zairi-finding small{ color:var(--ink-soft); }
.legal-sources{ margin:12px 0; padding:10px 12px; border:1px solid var(--line); border-radius:12px; font-size:12px; }
.legal-sources summary{ cursor:pointer; font-weight:700; }
.legal-sources>div{ padding:9px 2px; border-top:1px solid var(--line); }
.legal-sources>div:first-of-type{ margin-top:8px; }
.legal-sources p{ margin:3px 0 0; color:var(--muted); }
.danger-text{ color:#b63232!important; border-color:rgba(182,50,50,.24)!important; }
.danger-text:hover{ background:rgba(182,50,50,.08)!important; }
@media(max-width:760px){
  .zairi-consent-head{ flex-direction:column; align-items:flex-start; }
  .zairi-legal-stats{ grid-template-columns:repeat(2,1fr); }
  .zairi-legal-result{ align-items:flex-start; flex-wrap:wrap; }
}

/* ===== Botón para ocultar el menú (dentro del menú, solo escritorio) ===== */
.collapse-btn{ display:none; align-items:center; justify-content:center; width:34px; height:34px; align-self:flex-end; margin:0 2px 8px 0; background:transparent; border:1px solid rgba(255,255,255,.12); border-radius:10px; color:#a7a3b6; cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
.collapse-btn:hover{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.25); }
/* El logo blanco de la barra se oscurece en modo claro para que se vea */
html:not([data-theme="dark"]) .deskbar-logo{ filter:brightness(0) opacity(.82); }
@media(min-width:821px){ .sidebar{ position:relative; } }
@media(min-width:900px){
  .collapse-btn{ display:inline-flex; }
  .side-logo-mini{ display:none; }
  .app.collapsed{ grid-template-columns:70px 1fr; }
  .app.collapsed .collapse-btn{ align-self:center; margin-right:0; }
  .app.collapsed .nav-group{ display:none; }
  .app.collapsed .nav-label{ display:none; }
  .app.collapsed .nav-item{ justify-content:center; padding-left:0; padding-right:0; }
  .app.collapsed .nav-item:hover{ transform:none; }
  .app.collapsed .sidebar{ padding-top:16px; }
  .app.collapsed .side-logo-full{ display:none; }
  .app.collapsed .side-logo-mini{ display:block; height:30px; margin:4px auto 16px; }
  .app.collapsed .deskbar{ left:70px; }
}

/* ===== Refuerzos de estructura móvil ===== */
img{ max-width:100%; }
html,body{ overflow-x:hidden; }
@media(max-width:820px){
  .page-head{ align-items:flex-start; }
  .page-head > div:last-child{ width:100%; flex-wrap:wrap; }
  .treatment-line{ grid-template-columns:1fr 1fr; gap:8px 10px; padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:12px; }
  .treatment-line > *:nth-child(1){ grid-column:1 / -1; }
  .sim-hero{ flex-direction:column; text-align:center; gap:14px; padding:18px; }
  .sim-hero p{ max-width:100%!important; }
  .modal-actions{ flex-wrap:wrap; }
  .modal-actions .btn{ flex:1 1 auto; }
  .grid-2,.grid-3{ gap:0; }
  .section-title{ font-size:15px; }
}
@media(max-width:520px){
  .treatment-line{ grid-template-columns:1fr; }
  .page-head h1{ font-size:21px; }
  .modal{ padding:20px 14px; }
  .sim-ta-list{ max-height:200px; }
}

/* ===== Agenda: solapamiento (chip +N) y tarjeta interactiva ===== */
.cal-appt{ transition:transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.cal-appt:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.22); filter:saturate(1.08); z-index:9; }
.cal-more{ display:flex; align-items:center; justify-content:center; border-radius:8px; cursor:pointer;
  background:rgba(124,77,255,.16); color:#5b39c9; font-weight:800; font-size:12px;
  border:1px dashed rgba(124,77,255,.5); transition:background .12s, transform .12s; }
.cal-more:hover{ background:rgba(124,77,255,.28); color:#3f2795; transform:translateY(-1px); }
/* El aviso que sale al tocar un espacio libre de la agenda: mismo criterio que el
   resto de las ventanas, para que no haya dos estilos de fondo distintos. */
.slot-pop-overlay{ position:fixed; inset:0; background:rgba(20,16,40,.3);
  backdrop-filter:blur(10px) saturate(1.08); -webkit-backdrop-filter:blur(10px) saturate(1.08);
  display:flex; align-items:center; justify-content:center; z-index:60; animation:slotFade .14s ease; }
.slot-pop{ background:var(--card,#fff); border-radius:16px; padding:16px 16px 18px; width:min(460px,92vw);
  max-height:80vh; overflow:auto; box-shadow:0 24px 60px rgba(0,0,0,.32); animation:slotUp .16s ease; }
.slot-pop-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px;
  font-size:14px; color:var(--text,#241d3a); }
.slot-pop-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px; }
.slot-pop-box{ display:flex; flex-direction:column; gap:1px; padding:9px 10px; border-radius:10px; cursor:pointer;
  font-size:11.5px; line-height:1.25; transition:transform .12s ease, box-shadow .12s ease; overflow:hidden; }
.slot-pop-box:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.24); }
.slot-pop-box b{ font-size:12px; }
.slot-pop-box .spn{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.slot-pop-box small{ opacity:.85; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.slot-pop-box .cancel-tag{ font-size:9.5px; font-weight:700; text-decoration:none; margin-top:2px; }
@keyframes slotFade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes slotUp{ from{ opacity:0; transform:translateY(8px) scale(.98) } to{ opacity:1; transform:none } }

/* Etiqueta de franja de almuerzo en la agenda */
.cal-lunch{ position:relative; }
.lunch-tag{ position:absolute; top:2px; left:50%; transform:translateX(-50%); z-index:3;
  font-size:9px; font-weight:700; letter-spacing:.02em; color:#8a6212; background:rgba(224,152,28,.18);
  border:1px solid rgba(224,152,28,.4); border-radius:20px; padding:1px 7px; white-space:nowrap; pointer-events:none; }

/* Barra de acciones masivas (Tratamientos) */
.bulk-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; padding:10px 14px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:12px; font-size:13.5px; color:var(--ink); }
.bulk-bar b{ color:var(--purple); }
tr.row-sel{ background:rgba(124,77,255,.06); }

/* Telemedicina — bloques por día compactos */
.tele-day{ overflow:hidden; }
.tele-day > summary.tele-day-head{ padding:11px 14px; font-size:13px; font-weight:700; color:var(--ink); background:var(--surface-2); border-bottom:1px solid var(--line); cursor:pointer; list-style:none; user-select:none; display:flex; align-items:center; }
.tele-day > summary.tele-day-head::-webkit-details-marker{ display:none; }
.tele-day > summary.tele-day-head::before{ content:'▸'; display:inline-block; margin-right:9px; color:var(--ink-soft); transition:transform .15s; }
.tele-day[open] > summary.tele-day-head::before{ transform:rotate(90deg); }
.tele-day:not([open]) > summary.tele-day-head{ border-bottom:none; }
.tele-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 14px; border-bottom:1px solid var(--line); }
.tele-row:last-child{ border-bottom:none; }
.tele-hora{ font-weight:700; font-size:13px; color:var(--purple); min-width:46px; }
.tele-pasadas > summary{ cursor:pointer; font-weight:700; font-size:14px; color:var(--ink); padding:6px 2px; list-style:none; user-select:none; }
.tele-pasadas > summary::-webkit-details-marker{ display:none; }
.tele-pasadas > summary::before{ content:'▸'; display:inline-block; margin-right:8px; color:var(--ink-soft); transition:transform .15s; }
.tele-pasadas[open] > summary::before{ transform:rotate(90deg); }

/* Agenda — vista de clínica por columnas de profesional (día) */
.cd-nav{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.cd-wrap{ overflow:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:12px; max-height:calc(100vh - 220px); min-height:340px; overscroll-behavior:contain; }
.cd-body{ display:flex; }
.cd-gutter{ flex:0 0 56px; position:sticky; left:0; z-index:8; background:var(--surface); border-right:1px solid var(--line); }
.cd-col{ flex:1 1 0; min-width:150px; border-right:1px solid var(--line); }
.cd-col:last-child{ border-right:none; }
.cd-colhead{ height:42px; display:flex; align-items:center; gap:6px; padding:0 10px; font-size:12.5px; font-weight:600; color:var(--ink);
  background:var(--surface-2); border-bottom:1px solid var(--line); border-top:3px solid transparent; position:sticky; top:0; z-index:7;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cd-gh{ border-top-color:transparent; background:var(--surface); }
.cd-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.cd-count{ margin-left:auto; font-size:11px; color:var(--ink-soft); background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:0 7px; }
.cd-th{ display:flex; align-items:flex-start; justify-content:flex-end; padding:2px 8px 0; font-size:11px; color:var(--ink-soft); border-bottom:1px solid var(--line); }
.cd-colbody{ position:relative; }
.cd-slot{ position:absolute; left:0; right:0; border-bottom:1px solid var(--line); cursor:pointer; }
/* Franja marcada mientras se arrastra el mouse: se ve al tiro cuánto se está tomando. */
.cd-slot-sel{ background:color-mix(in srgb, var(--purple) 22%, transparent) !important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--purple) 55%, transparent); }
/* Sin esto, arrastrar sobre el calendario selecciona el texto de la página y se ve mal. */
.cd-col, .cd-colbody{ user-select:none; -webkit-user-select:none; }
.cd-slot:hover{ background:rgba(124,77,255,.06); }
.cd-slot-off{ cursor:default; }
.cd-slot-off:hover{ background:transparent; }
.cd-lunch{ position:absolute; left:0; right:0; background:repeating-linear-gradient(45deg,transparent,transparent 6px,rgba(224,152,28,.16) 6px,rgba(224,152,28,.16) 12px); pointer-events:none; }
.cd-lunch span{ position:absolute; top:2px; left:50%; transform:translateX(-50%); font-size:9px; font-weight:700; color:#8a6212; background:rgba(224,152,28,.18); border:1px solid rgba(224,152,28,.4); border-radius:20px; padding:1px 7px; }
.cd-block{ position:absolute; left:0; right:0; z-index:1; cursor:not-allowed;
  background:repeating-linear-gradient(45deg, rgba(120,122,140,.13), rgba(120,122,140,.13) 7px, rgba(120,122,140,.22) 7px, rgba(120,122,140,.22) 14px);
  border-top:1px solid rgba(140,142,165,.35); border-bottom:1px solid rgba(140,142,165,.35); }
.cd-block span{ position:absolute; top:3px; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:9.5px; font-weight:700; color:var(--ink-soft); background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:1px 8px; max-width:92%; overflow:hidden; text-overflow:ellipsis; }
.cd-colhead-click{ cursor:pointer; transition:background .14s; }
.cd-colhead-click:hover{ background:var(--surface); }
.cd-colhead-click:hover .cd-dot{ box-shadow:0 0 0 3px rgba(124,77,255,.18); }
.cd-appt{ position:absolute; border-radius:8px; padding:3px 7px; font-size:11.5px; line-height:1.25; box-shadow:0 2px 6px rgba(0,0,0,.14); overflow:hidden; cursor:pointer; z-index:2; transition:transform .1s, box-shadow .1s; }
.cd-appt:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.22); z-index:5; }
.cd-appt b{ font-weight:700; }

/* ── Adjuntos en los chats (fotos y audios que manda el cliente) ───────────── */
.wa-img{display:block;max-width:230px;max-height:300px;width:auto;border-radius:10px;margin-bottom:6px;cursor:zoom-in;object-fit:cover}
.wa-audio{display:block;width:230px;max-width:100%;height:38px;margin-bottom:6px}
.wa-doc{display:inline-flex;align-items:center;gap:6px;margin-bottom:6px;font-size:.85rem;text-decoration:underline}
@media (max-width:640px){.wa-img,.wa-audio{max-width:180px;width:180px}}

/* ── Control humano en Mensajes ──────────────────────────────────────────── */
.wa-chip.humano.on{background:#7c5cff;color:#fff;border-color:#7c5cff}
.wa-chip.humano b{margin-left:5px}
.wa-stage.humano{background:rgba(124,92,255,.14);color:#7c5cff;font-weight:700;white-space:nowrap}

/* ---------- AGENDA COMPACTA: la grilla se ve de inmediato ---------- */
.page-head.compact{ margin-bottom:12px; align-items:center; }
.page-head.compact h1{ font-size:22px; }
.page-head.compact p{ font-size:12.5px; }
.zairi-slim{ padding:9px 14px; gap:12px; border-radius:14px; }
.agenda-filtros{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.af-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.af-chips{ gap:6px; }
.af-grupo{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.af-lab{ font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#8a879c; margin:0 2px; user-select:none; }
.af-div{ width:1px; height:20px; background:var(--line); margin:0 3px; flex:0 0 auto; }
.af-help{ width:22px; height:22px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); font-size:12px; font-weight:700; display:inline-grid; place-items:center; cursor:help; flex:0 0 auto; }
.af-help:hover{ border-color:var(--purple); color:var(--ink); }

/* Tarjeta flotante al posar el cursor sobre una cita (la grilla compacta muestra
   lo esencial; el detalle grande vive aquí, con el botón "Ver ficha"). */
.ficha-hover{ position:fixed; z-index:70; background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 16px 40px rgba(0,0,0,.26); padding:12px 14px; animation:cmdUp .14s ease; }
.ficha-hover .fh-hora{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:13px; color:var(--ink); }
.ficha-hover .fh-nombre{ font-size:15px; font-weight:700; color:var(--ink); margin-top:4px; display:flex; align-items:center; flex-wrap:wrap; }
.ficha-hover .fh-trat{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.ficha-hover .fh-linea{ font-size:12px; color:var(--ink-soft); margin-top:4px; }

/* En pantallas chicas la agenda vuelve a scroll de página completa. */
@media(max-width:820px){ .cd-wrap,.cal-scroll{ max-height:none; min-height:0; } .ficha-hover{ display:none; } }

/* ============================================================
   CHAT INTERNO DEL EQUIPO — como un Messenger propio de la clínica
   ============================================================ */
/* Panel de conversaciones (se despliega desde el globito de arriba) */
.chat-menu{ position:fixed; top:66px; right:70px; width:356px; max-height:min(74vh,580px); overflow-y:auto; overscroll-behavior:contain;
  background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:0 18px 50px rgba(0,0,0,.28); z-index:46; padding:6px;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.chat-menu::-webkit-scrollbar{ width:8px; }
.chat-menu::-webkit-scrollbar-track{ background:transparent; }
.chat-menu::-webkit-scrollbar-thumb{ background:var(--line); border-radius:99px; border:2px solid transparent; background-clip:content-box; }
.chat-menu-head{ position:sticky; top:0; z-index:1; background:var(--surface); display:flex; align-items:center; justify-content:space-between; padding:9px 10px 8px; }
.chat-menu-titulo{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:13px; color:var(--ink); }
.chat-menu-titulo svg{ color:var(--purple); }
.chat-buscar{ padding:2px 6px 8px; }
.chat-buscar input{ width:100%; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); border-radius:10px; padding:8px 11px; font-size:13px; }
.chat-vacio{ padding:18px 14px; text-align:center; color:var(--ink-soft); font-size:12.5px; line-height:1.55; }

/* Fila de una conversación o de una persona del equipo */
.chat-conv{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:8px 9px; border-radius:12px; color:var(--ink); transition:background .12s; }
.chat-conv:hover{ background:var(--surface-2); }
.chat-conv-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.chat-conv-txt b{ font-size:13px; }
.chat-conv-txt small{ color:var(--ink-soft); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-conv.sinleer .chat-conv-txt small{ color:var(--ink); font-weight:600; }
.chat-conv-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.chat-conv-meta small{ color:var(--ink-soft); font-size:10.5px; }
.chat-pill{ font-style:normal; min-width:17px; height:17px; padding:0 4px; border-radius:20px; background:var(--purple); color:#fff;
  font-size:10px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.chat-ava{ flex:0 0 auto; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:800; color:#fff;
  background:linear-gradient(135deg, var(--purple), #a487ff); letter-spacing:.02em; }

/* Ventanas acopladas abajo a la derecha (como los chats de Facebook en escritorio) */
.chat-dock{ position:fixed; bottom:0; right:86px; display:flex; align-items:flex-end; gap:12px; z-index:60; }
.chat-win{ width:326px; height:438px; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-bottom:none; border-radius:14px 14px 0 0; box-shadow:0 -6px 40px rgba(0,0,0,.22); overflow:hidden;
  animation:chatSube .22s ease; }
@keyframes chatSube{ from{ transform:translateY(14px); opacity:0 } to{ transform:translateY(0); opacity:1 } }
.chat-win-head{ display:flex; align-items:center; gap:9px; padding:8px 9px; border-bottom:1px solid var(--line); cursor:pointer; background:var(--surface); }
.chat-win-quien{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2; }
.chat-win-quien b{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-win-quien small{ color:var(--ink-soft); font-size:10.5px; }
.chat-win-min{ display:flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--line); border-bottom:none;
  border-radius:12px 12px 0 0; padding:7px 11px; cursor:pointer; color:var(--ink); font-size:12.5px; box-shadow:0 -4px 22px rgba(0,0,0,.18); }
.chat-mini-btn{ width:28px; height:28px; border-radius:9px; border:none; background:none; color:var(--ink-soft); display:grid; place-items:center; cursor:pointer; }
.chat-mini-btn:hover, .chat-mini-btn.activo{ background:var(--surface-2); color:var(--purple); }

/* Mensajes */
.chat-msgs{ flex:1; overflow-y:auto; padding:12px 10px; display:flex; flex-direction:column; gap:7px; background:var(--bg);
  scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.chat-msgs::-webkit-scrollbar{ width:8px; }
.chat-msgs::-webkit-scrollbar-thumb{ background:var(--line); border-radius:99px; }
.chat-burb-fila{ display:flex; }
.chat-burb-fila.mia{ justify-content:flex-end; }
.chat-burb{ max-width:82%; background:var(--surface); border:1px solid var(--line); border-radius:15px 15px 15px 5px; padding:7px 11px 5px; }
.chat-burb.mia{ background:var(--purple); border-color:var(--purple); color:#fff; border-radius:15px 15px 5px 15px; }
.chat-burb-txt{ font-size:13px; line-height:1.45; white-space:pre-wrap; word-break:break-word; }
.chat-burb-hora{ font-size:9.5px; opacity:.62; text-align:right; margin-top:2px; }
.chat-adj-img{ display:block; max-width:100%; max-height:190px; border-radius:10px; margin:2px 0 4px; cursor:zoom-in; }
.chat-adj-pdf{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; background:var(--surface-2); color:var(--ink);
  border:1px solid var(--line); border-radius:10px; padding:6px 10px; margin:2px 0 4px; text-decoration:none; }
.chat-burb.mia .chat-adj-pdf{ background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.3); }

/* Chip de vínculo (ficha / plan / cotización) */
.chat-link-chip{ display:flex; align-items:center; gap:8px; background:var(--purple-soft); color:var(--purple-2); border:1px solid transparent;
  border-radius:11px; padding:7px 10px; margin:2px 0 4px; cursor:pointer; text-align:left; max-width:100%; }
.chat-link-chip:hover{ border-color:var(--purple); }
.chat-link-chip span{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.chat-link-chip small{ font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; opacity:.75; }
.chat-link-chip b{ font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-burb.mia .chat-link-chip{ background:rgba(255,255,255,.18); color:#fff; }
.chat-chip-x{ flex:0 0 auto; width:17px; height:17px; border-radius:50%; background:rgba(0,0,0,.14); color:inherit; display:inline-flex;
  align-items:center; justify-content:center; font-size:12px; line-height:1; cursor:pointer; margin-left:4px; }

/* Redactor */
.chat-comp{ border-top:1px solid var(--line); background:var(--surface); padding:7px 8px; position:relative; }
.chat-comp-fila{ display:flex; align-items:flex-end; gap:4px; }
.chat-comp textarea{ flex:1; resize:none; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); border-radius:12px;
  padding:8px 11px; font-size:13px; font-family:inherit; line-height:1.4; max-height:86px; }
.chat-comp textarea:focus{ outline:none; border-color:var(--purple); }
.chat-send{ width:32px; height:32px; border-radius:10px; border:none; background:var(--purple); color:#fff; display:grid; place-items:center; cursor:pointer; }
.chat-send:disabled{ opacity:.55; cursor:default; }
.chat-comp-previa{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:0 2px 7px; }
.chat-previa-img{ position:relative; display:inline-flex; }
.chat-previa-img img{ height:52px; border-radius:9px; }
.chat-previa-img .chat-chip-x{ position:absolute; top:-6px; right:-6px; background:var(--ink); color:var(--surface); }
.chat-link-pop{ position:absolute; bottom:calc(100% + 6px); left:8px; right:8px; background:var(--surface); border:1px solid var(--line);
  border-radius:13px; box-shadow:0 14px 40px rgba(0,0,0,.28); padding:8px; z-index:5; }
.chat-link-pop input{ width:100%; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); border-radius:9px; padding:7px 10px; font-size:12.5px; }
.chat-link-lista{ max-height:190px; overflow-y:auto; margin-top:6px; display:flex; flex-direction:column; }
.chat-link-lista button{ text-align:left; background:none; border:none; cursor:pointer; color:var(--ink); font-size:12.5px; padding:7px 8px; border-radius:9px; }
.chat-link-lista button:hover{ background:var(--surface-2); }
.chat-link-lista button small{ display:inline-block; min-width:64px; color:var(--purple-2); font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; }

/* Aviso emergente cuando llega un mensaje (se despliega abajo, como Messenger) */
.chat-toast{ position:fixed; bottom:18px; right:18px; z-index:70; display:flex; align-items:center; gap:11px; max-width:330px;
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--purple); border-radius:14px; padding:11px 13px;
  box-shadow:0 16px 50px rgba(0,0,0,.32); cursor:pointer; animation:chatToastSube .3s cubic-bezier(.2,1.1,.4,1); }
@keyframes chatToastSube{ from{ transform:translateY(24px); opacity:0 } to{ transform:translateY(0); opacity:1 } }
.chat-toast-txt{ flex:1; min-width:0; font-size:12px; color:var(--ink-soft); }
.chat-toast-txt b{ color:var(--ink); font-size:13px; }
.chat-toast-txt div{ margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:230px; }

/* En el teléfono: la ventana ocupa toda la pantalla y el panel usa todo el ancho */
@media (max-width:780px){
  .chat-menu{ top:62px; left:8px; right:8px; width:auto; }
  .chat-dock{ right:0; left:0; }
  .chat-win{ position:fixed; inset:0; width:100%; height:100%; border-radius:0; border:none; }
  .chat-win-min{ margin-left:8px; }
  .chat-toast{ left:12px; right:12px; max-width:none; }
}

/* ── Chat del equipo: grupos, mensajes de voz y grabación ── */
.chat-conv.sel{ background:var(--purple-soft); }
.chat-check{ flex:0 0 auto; width:20px; height:20px; border-radius:50%; border:1.6px solid var(--line); display:inline-flex; align-items:center; justify-content:center; color:#fff; }
.chat-check.on{ background:var(--purple); border-color:var(--purple); }
.chat-crear-grupo{ width:100%; border:none; border-radius:11px; background:var(--purple); color:#fff; font-weight:700; font-size:13px; padding:10px; cursor:pointer; }
.chat-crear-grupo:disabled{ opacity:.5; cursor:default; }
.chat-gente-link{ cursor:pointer; color:var(--purple-2) !important; }
.chat-gente-link:hover{ text-decoration:underline; }
.chat-gente{ border-bottom:1px solid var(--line); background:var(--surface); padding:8px; max-height:46%; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.chat-gente-fila{ display:flex; align-items:center; gap:9px; padding:5px 6px; border-radius:9px; font-size:12.5px; color:var(--ink); width:100%; text-align:left; }
.chat-gente-fila span{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-gente-fila small{ color:var(--ink-soft); font-size:10.5px; }
.chat-gente-fila.boton{ background:none; border:none; cursor:pointer; }
.chat-gente-fila.boton:hover{ background:var(--surface-2); }
.chat-gente-acciones{ display:flex; gap:8px; padding:7px 4px 2px; }
.chat-gente-acciones button{ flex:1; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); border-radius:9px; padding:7px; font-size:12px; font-weight:600; cursor:pointer; }
.chat-gente-acciones button:hover{ border-color:var(--purple); }
.chat-gente-acciones button.peligro{ color:var(--danger); }
.chat-burb-quien{ font-size:10.5px; font-weight:700; color:var(--purple-2); margin-bottom:1px; }
.chat-adj-audio{ display:block; width:214px; max-width:100%; height:36px; margin:3px 0 4px; }
.chat-burb.mia .chat-adj-audio{ filter:invert(1) hue-rotate(180deg); } /* controles legibles sobre morado */
.chat-grab{ display:flex; align-items:center; gap:9px; padding:4px 2px; font-size:12.5px; color:var(--ink); }
.chat-grab-punto{ width:10px; height:10px; border-radius:50%; background:#e5484d; animation:grabLate 1s ease-in-out infinite; }
@keyframes grabLate{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.35; transform:scale(.82) } }
/* El avatar dentro de la fila de integrantes no debe estirarse (la regla del
   nombre le llegaba también al círculo y lo dejaba ovalado). */
.chat-gente-fila .chat-ava{ flex:0 0 auto; overflow:hidden; }

/* ── Contabilidad: jerarquía visual tranquila, compacta y consistente ── */
.accounting-shell{ --acct-blue:#4f46e5; position:relative; }
.accounting-head{ padding:22px 24px; margin-bottom:14px; border:1px solid var(--line); border-radius:22px;
  background:linear-gradient(135deg,rgba(124,77,255,.10),rgba(255,255,255,.02) 55%),var(--surface);
  box-shadow:0 16px 45px rgba(35,25,66,.07); align-items:center; }
.accounting-head h1{ margin:2px 0 3px; letter-spacing:-.035em; }
.acct-eyebrow{ display:block; color:var(--purple-2); font-size:10px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.acct-head-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.accounting-filters{ border-radius:16px; padding:13px 15px; box-shadow:none; background:color-mix(in srgb,var(--surface) 92%,var(--purple-soft)); }
.accounting-tabs{ padding:5px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); gap:3px; overflow-x:auto; flex-wrap:nowrap !important; scrollbar-width:thin; }
.accounting-tabs .tab{ flex:0 0 auto; border-radius:10px; padding:8px 12px; border:none; }
.accounting-tabs .tab.active{ background:var(--surface); color:var(--purple-2); box-shadow:0 3px 12px rgba(35,25,66,.09); }
.accounting-shell>.card,.accounting-shell>div>.card{ border-radius:16px; }
.accounting-shell table thead th{ font-size:10px; text-transform:uppercase; letter-spacing:.055em; color:var(--muted); background:var(--surface-2); }
.accounting-shell table tbody tr{ transition:background .16s ease; }
.accounting-shell table tbody tr:hover{ background:color-mix(in srgb,var(--purple-soft) 42%,transparent); }
.acct-tax-card{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:16px 18px; margin:0 0 12px;
  border:1px solid rgba(124,77,255,.22); border-radius:16px; background:linear-gradient(145deg,rgba(124,77,255,.08),rgba(124,77,255,.025)); }
.acct-tax-title{ margin-top:3px; font-size:17px; font-weight:750; letter-spacing:-.02em; }
.acct-tax-card p{ margin:4px 0 2px; color:var(--ink-soft); font-size:12.5px; }
.acct-tax-card small{ color:var(--muted); }
.acct-tax-edit{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.acct-tax-edit select,.acct-tax-edit input{ width:auto; min-width:130px; margin:0; }
.acct-required{ display:inline-flex; margin-left:4px; padding:2px 6px; border-radius:999px; color:#b42318; background:rgba(217,45,32,.09); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; vertical-align:middle; }
input.input-required{ border-color:rgba(217,45,32,.55) !important; background:rgba(217,45,32,.035); }
.acct-tax-use,.acct-reference{ margin:4px 0 12px; padding:11px 12px; border:1px solid rgba(124,77,255,.22); border-radius:12px; background:var(--purple-soft); }
.acct-tax-use select{ margin-bottom:3px; }
.acct-sii-status{ display:flex; flex-direction:column; gap:3px; margin-bottom:15px; padding:12px 14px; border-radius:13px; font-size:12.5px; }
.acct-sii-status.pending{ color:#785700; background:#fff8dd; border:1px solid #ecd992; }
.acct-sii-status.ready{ color:#11643f; background:#eaf8f1; border:1px solid #a9dec3; }

@media(max-width:780px){
  .accounting-head{ padding:17px; align-items:flex-start; }
  .acct-head-actions{ width:100%; justify-content:flex-start; }
  .acct-tax-card{ flex-direction:column; }
  .acct-tax-edit{ justify-content:flex-start; width:100%; }
}

/* ========================================================================
   ZAIRI SIGNATURE · v462
   Lenguaje visual premium compartido. Esta capa solo modifica presentación:
   no altera flujos, permisos, datos ni comportamiento de los módulos.
   ======================================================================== */
:root{
  --bg:#f6f5f8;
  --surface:#ffffff;
  --surface-2:#f0eef4;
  --ink:#17151d;
  --ink-soft:#716d7d;
  --line:#e6e2eb;
  --purple:#7551ff;
  --purple-2:#6240e8;
  --purple-soft:#f0ebff;
  --radius:18px;
  --shadow:0 16px 44px rgba(31,24,49,.065),0 2px 8px rgba(31,24,49,.035);
  --signature-ease:cubic-bezier(.22,1,.36,1);
  --signature-spring:cubic-bezier(.16,1,.3,1);
  --signature-glass:rgba(255,255,255,.78);
  --signature-hairline:rgba(58,49,78,.10);
  --signature-purple-rgb:117,81,255;
  --signature-mint-rgb:91,225,203;
}

[data-theme="dark"]{
  --bg:#0c0b10;
  --surface:#17151d;
  --surface-2:#211e2a;
  --ink:#f4f1f7;
  --ink-soft:#aaa4b5;
  --line:#302c39;
  --purple:#8a6cff;
  --purple-2:#a68fff;
  --purple-soft:#28203e;
  --shadow:0 18px 52px rgba(0,0,0,.35),0 2px 10px rgba(0,0,0,.2);
  --signature-glass:rgba(23,21,29,.79);
  --signature-hairline:rgba(255,255,255,.09);
}

html{ scroll-behavior:smooth; }
body{
  background:
    radial-gradient(900px 620px at 78% -12%,rgba(var(--signature-purple-rgb),.065),transparent 68%),
    radial-gradient(720px 520px at -8% 106%,rgba(var(--signature-mint-rgb),.04),transparent 70%),
    var(--bg);
  letter-spacing:-.006em;
}
button,input,select,textarea{ -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,[role="button"]:focus-visible,.nav-item:focus-visible{
  outline:3px solid rgba(var(--signature-purple-rgb),.28);
  outline-offset:2px;
}
::selection{ background:rgba(var(--signature-purple-rgb),.22); color:var(--ink); }
*{ scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--ink-soft) 34%,transparent) transparent; }
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:color-mix(in srgb,var(--ink-soft) 32%,transparent); border:3px solid transparent; background-clip:content-box; border-radius:999px; }
*::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb,var(--ink-soft) 52%,transparent); background-clip:content-box; }

/* El shell respira: expansión y contracción sin saltos ni desapariciones duras. */
.app{
  grid-template-columns:242px minmax(0,1fr);
  transition:grid-template-columns .62s cubic-bezier(.2,.86,.24,1);
  background:transparent;
}
.sidebar{
  margin:10px 0 10px 10px;
  height:calc(100vh - 20px);
  padding:15px 12px 18px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:22px;
  background:
    radial-gradient(150% 36% at 28% 0%,rgba(var(--signature-purple-rgb),.19),transparent 63%),
    linear-gradient(180deg,#111016 0%,#09090d 60%,#07070a 100%);
  box-shadow:0 24px 62px rgba(9,7,16,.24),inset 0 1px 0 rgba(255,255,255,.045);
  transition:width .62s cubic-bezier(.2,.86,.24,1),padding .62s cubic-bezier(.2,.86,.24,1),border-radius .45s ease,transform .48s var(--signature-spring);
  overscroll-behavior:contain;
  will-change:width,padding;
}
.side-brand{
  position:relative;
  flex:0 0 39px;
  height:39px;
  margin:1px 0 14px;
  overflow:hidden;
}
.side-brand .side-logo{
  position:absolute;
  top:1px;
  margin:0;
  object-fit:contain;
  transition:opacity .32s ease,transform .58s cubic-bezier(.2,.86,.24,1),filter .42s ease;
}
.side-brand .side-logo-full{ left:7px;height:30px;max-width:172px;opacity:1;transform:translateX(0) scale(1);transform-origin:left center; }
.side-brand .side-logo-mini{ display:block;left:50%;height:31px;max-width:31px;opacity:0;transform:translateX(-50%) scale(.72) rotate(-8deg);transform-origin:center;pointer-events:none; }
.nav-group{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:38px;
  max-height:44px;
  opacity:1;
  overflow:hidden;
  white-space:nowrap;
  padding:16px 10px 7px;
  color:rgba(242,239,250,.72);
  font-size:10px;
  font-weight:720;
  letter-spacing:.145em;
  line-height:1;
  transition:opacity .28s ease,max-height .52s cubic-bezier(.2,.86,.24,1),min-height .52s cubic-bezier(.2,.86,.24,1),padding .52s cubic-bezier(.2,.86,.24,1),transform .52s cubic-bezier(.2,.86,.24,1);
}
.nav-group span{
  flex:0 0 auto;
  max-width:130px;
  opacity:1;
  transform:translateX(0);
  overflow:hidden;
  transition:max-width .48s cubic-bezier(.2,.86,.24,1),opacity .24s ease,transform .48s cubic-bezier(.2,.86,.24,1);
}
.nav-group::after{
  content:'';
  flex:1 1 auto;
  min-width:12px;
  height:1px;
  background:linear-gradient(90deg,rgba(214,205,236,.34),rgba(214,205,236,.04));
  transition:opacity .3s ease,transform .52s cubic-bezier(.2,.86,.24,1);
}
.nav-item{
  min-height:38px;
  padding:8px 11px;
  border-radius:12px;
  transition:background .32s ease,color .25s ease,border-color .25s ease,transform .48s var(--signature-spring),box-shadow .35s ease,padding .55s var(--signature-spring);
  transform:translateZ(0);
}
.nav-item .ic{
  transition:transform .52s var(--signature-spring),color .25s ease,opacity .25s ease;
}
.nav-label{
  display:block !important;
  max-width:160px;
  opacity:1;
  transform:translateX(0);
  transition:max-width .52s cubic-bezier(.2,.86,.24,1),opacity .28s ease,transform .52s cubic-bezier(.2,.86,.24,1);
}
.nav-item.active{
  background:linear-gradient(135deg,rgba(var(--signature-purple-rgb),.98),rgba(100,58,230,.92));
  border-color:rgba(255,255,255,.13);
  box-shadow:0 11px 26px rgba(var(--signature-purple-rgb),.27),inset 0 1px 0 rgba(255,255,255,.18);
}
.nav-item.active::after{
  content:'';
  position:absolute;
  left:12px; right:12px; bottom:-8px; height:12px;
  border-radius:50%;
  background:rgba(var(--signature-purple-rgb),.28);
  filter:blur(12px);
  z-index:-1;
  opacity:.62;
}
.collapse-btn{
  width:36px;height:36px;border-radius:12px;
  transition:background .28s ease,color .25s ease,border-color .25s ease,transform .58s cubic-bezier(.2,.86,.24,1),margin .52s cubic-bezier(.2,.86,.24,1);
}
.collapse-btn svg{ transition:transform .65s var(--signature-spring); }

.deskbar{
  left:242px;
  height:66px;
  padding:0 28px;
  background:color-mix(in srgb,var(--signature-glass) 92%,transparent);
  border-bottom:1px solid var(--signature-hairline);
  box-shadow:0 10px 34px rgba(30,24,43,.035);
  backdrop-filter:blur(22px) saturate(1.32);
  -webkit-backdrop-filter:blur(22px) saturate(1.32);
  transition:left .62s cubic-bezier(.2,.86,.24,1),background .3s ease;
}
.deskbar-search{
  height:42px;
  max-width:610px;
  border-radius:14px;
  border-color:var(--signature-hairline);
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  box-shadow:0 4px 18px rgba(28,22,42,.035),inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .45s var(--signature-spring),border-color .25s ease,box-shadow .35s ease,background .3s ease;
}
.deskbar-search:hover{
  transform:translateY(-1px);
  border-color:rgba(var(--signature-purple-rgb),.36);
  box-shadow:0 12px 30px rgba(var(--signature-purple-rgb),.095),inset 0 1px 0 rgba(255,255,255,.55);
}
.deskbar-search:active{ transform:translateY(0) scale(.995); }
.deskbar-bell,.theme-toggle,.acct-btn{
  background:color-mix(in srgb,var(--surface) 74%,transparent);
  border-color:var(--signature-hairline);
  box-shadow:0 4px 14px rgba(28,22,42,.028),inset 0 1px 0 rgba(255,255,255,.38);
  transition:transform .44s var(--signature-spring),border-color .24s ease,color .24s ease,background .25s ease,box-shadow .3s ease;
}
.deskbar-bell:hover,.theme-toggle:hover,.acct-btn:hover{
  transform:translateY(-2px);
  border-color:rgba(var(--signature-purple-rgb),.34);
  box-shadow:0 10px 24px rgba(var(--signature-purple-rgb),.09);
}
.deskbar-bell:active,.theme-toggle:active,.acct-btn:active{ transform:scale(.94); }
.acct-logo{ border-radius:10px; }

.main{
  width:100%;
  max-width:1680px;
  margin:0 auto;
  padding:94px clamp(24px,2.6vw,44px) 52px;
}
.main > *{ animation:signature-page-enter .62s var(--signature-ease) both; }
@keyframes signature-page-enter{
  from{ opacity:0; transform:translateY(9px); filter:blur(3px); }
  to{ opacity:1; transform:none; filter:blur(0); }
}
.page-head{ margin-bottom:24px; }
.page-head h1{
  font-size:clamp(25px,2vw,31px);
  font-weight:680;
  letter-spacing:-.038em;
  line-height:1.08;
}
.page-head p{ margin-top:6px; font-size:13.5px; line-height:1.55; }

/* Superficies: profundidad baja, textura limpia y respuesta táctil. */
.card,.stat,.soon,.accounting-head,.chat-menu,.notif-menu,.acct-menu,.ficha-hover{
  border-color:var(--signature-hairline);
  box-shadow:var(--shadow);
}
.card,.stat{
  background:linear-gradient(155deg,color-mix(in srgb,var(--surface) 98%,white),color-mix(in srgb,var(--surface) 97%,var(--purple-soft)));
  border-radius:var(--radius);
  transition:transform .5s var(--signature-spring),border-color .28s ease,box-shadow .42s ease,background .35s ease;
}
.card{ padding:clamp(20px,2vw,27px); }
.stats{ gap:14px; }
.stat{ padding:21px 22px; }
.stat .label{ font-size:10.5px; font-weight:700; letter-spacing:.095em; }
.stat .value{ font-size:24px; letter-spacing:-.04em; }

.btn{
  position:relative;
  overflow:hidden;
  min-height:40px;
  padding:10px 19px;
  border-radius:12px;
  letter-spacing:-.012em;
  box-shadow:0 7px 18px rgba(20,17,27,.10),inset 0 1px 0 rgba(255,255,255,.11);
  transition:transform .44s var(--signature-spring),box-shadow .34s ease,background .24s ease,border-color .24s ease,color .24s ease;
}
.btn::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(108deg,transparent 30%,rgba(255,255,255,.20) 48%,transparent 66%);
  transform:translateX(-135%);
  transition:transform .72s var(--signature-ease);
}
.btn:hover::after{ transform:translateX(135%); }
.btn:active{ transform:translateY(1px) scale(.975); box-shadow:0 3px 10px rgba(20,17,27,.12); }
.btn.ghost{ box-shadow:inset 0 1px 0 rgba(255,255,255,.28); }
.btn.sm{ min-height:34px; border-radius:10px; }
.pill,.badge{ border:1px solid color-mix(in srgb,currentColor 10%,transparent); }

input,select,textarea{
  min-height:42px;
  border-radius:12px;
  border-color:var(--signature-hairline);
  background:color-mix(in srgb,var(--surface) 94%,var(--surface-2));
  transition:border-color .22s ease,box-shadow .28s ease,background .25s ease,transform .32s var(--signature-spring);
}
input:hover,select:hover,textarea:hover{ border-color:color-mix(in srgb,var(--ink-soft) 30%,var(--line)); }
input:focus,select:focus,textarea:focus{
  border-color:rgba(var(--signature-purple-rgb),.68);
  background:var(--surface);
  box-shadow:0 0 0 4px rgba(var(--signature-purple-rgb),.105),0 8px 20px rgba(var(--signature-purple-rgb),.055);
}
label{ font-size:12px; letter-spacing:.01em; }
.tabs,.seg{
  border:1px solid var(--signature-hairline);
  border-radius:14px;
  background:color-mix(in srgb,var(--surface-2) 84%,transparent);
}
.tab,.seg button{ border-radius:10px; transition:transform .4s var(--signature-spring),background .25s ease,color .25s ease,box-shadow .3s ease; }
.tab:hover,.seg button:hover{ transform:translateY(-1px); }
.tab.active,.seg button.on{ box-shadow:0 5px 16px rgba(30,23,47,.09),inset 0 1px 0 rgba(255,255,255,.5); }

th{ padding-top:12px;padding-bottom:12px;font-size:10.5px;border-bottom-width:1px; }
td{ padding-top:14px;padding-bottom:14px;transition:background .22s ease,color .22s ease; }
tbody tr{ transition:transform .38s var(--signature-spring),filter .25s ease; }
.row-click:hover{ transform:translateX(2px); }
.row-click:hover td{ background:rgba(var(--signature-purple-rgb),.045); }
.tbl-scroll{ border-radius:14px; }

/* Listas largas: la información sigue completa, pero la página no crece sin fin. */
.bounded-list{
  min-width:0;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.bounded-list.is-expanded{
  max-height:min(58vh,560px);
  overflow:auto;
  padding-right:4px;
  mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 22px),transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 22px),transparent 100%);
}
.kpi-detail-list{ border:1px solid color-mix(in srgb,var(--line) 82%,transparent);border-radius:13px; }
.kpi-detail-list table{ min-width:610px; }
.kpi-detail-list thead{
  position:sticky;
  top:0;
  z-index:2;
  background:color-mix(in srgb,var(--surface) 94%,var(--surface-2));
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.zairi-findings-list{ display:flex;flex-direction:column;gap:6px;margin-top:8px; }
.day-patient-list{ margin-top:14px; }
.day-patient-list table{ min-width:720px;width:100%; }
.bounded-list-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 2px 0;
  color:var(--ink-soft);
  font-size:11.5px;
}
.bounded-list-footer .btn{ flex:0 0 auto; }

.modal-bg{
  background:rgba(11,9,16,.40);
  backdrop-filter:blur(18px) saturate(1.12);
  -webkit-backdrop-filter:blur(18px) saturate(1.12);
  animation:signature-overlay-in .25s ease both;
}
.modal{
  border:1px solid color-mix(in srgb,var(--line) 86%,rgba(255,255,255,.2));
  border-radius:26px;
  padding:32px 34px;
  box-shadow:0 36px 100px rgba(7,5,14,.30),inset 0 1px 0 rgba(255,255,255,.42);
  animation:signature-modal-in .58s var(--signature-spring) both;
}
.modal h2{ font-size:24px;letter-spacing:-.035em; }
.close-x{ width:38px;height:38px;border-radius:12px;transition:transform .5s var(--signature-spring),background .25s ease,color .25s ease; }
.close-x:hover{ transform:rotate(6deg) scale(1.05);background:var(--surface-2);color:var(--ink); }
@keyframes signature-overlay-in{ from{opacity:0}to{opacity:1} }
@keyframes signature-modal-in{ from{opacity:0;transform:translateY(18px) scale(.972);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)} }

.cmd,.acct-menu,.notif-menu,.chat-menu,.ficha-hover,.chat-link-pop{
  border-color:var(--signature-hairline);
  background:color-mix(in srgb,var(--signature-glass) 96%,transparent);
  backdrop-filter:blur(24px) saturate(1.25);
  -webkit-backdrop-filter:blur(24px) saturate(1.25);
  box-shadow:0 28px 72px rgba(17,12,28,.19),inset 0 1px 0 rgba(255,255,255,.36);
}
.cmd-item,.acct-item,.notif-item,.chat-conv{ transition:background .25s ease,transform .4s var(--signature-spring),color .22s ease; }
.cmd-item:hover,.acct-item:hover,.notif-item:hover,.chat-conv:hover{ transform:translateX(2px); }

/* Agenda: movimiento suficiente para orientar sin alterar geometría ni eventos. */
.cal-cell,.cd-cell,.cd-colhead-click{
  transition:background .24s ease,box-shadow .3s ease,transform .35s var(--signature-spring);
}
.cal-cell:hover,.cd-cell:hover{ background:rgba(var(--signature-purple-rgb),.055);box-shadow:inset 0 0 0 1px rgba(var(--signature-purple-rgb),.12); }
.cal-appt,.cd-appt{
  transition:transform .44s var(--signature-spring),box-shadow .34s ease,filter .25s ease;
}
.cal-appt:hover,.cd-appt:hover{ transform:translateY(-2px) scale(1.012);filter:saturate(1.06);box-shadow:0 9px 22px rgba(16,12,26,.22); }

/* Zairi Signature: borde que presenta una vez + blur vivo continuo y orgánico. */
.zairi-opportunity-card,.zairi-reveal-card,.sim-hero{
  overflow:hidden;
  border-color:rgba(var(--signature-purple-rgb),.25);
  background-color:color-mix(in srgb,var(--surface) 92%,var(--purple-soft));
  background-image:
    radial-gradient(95% 150% at 4% 0%,rgba(var(--signature-purple-rgb),.15),transparent 64%),
    radial-gradient(80% 130% at 100% 100%,rgba(var(--signature-mint-rgb),.075),transparent 67%);
  box-shadow:0 16px 46px rgba(58,42,104,.09),inset 0 1px 0 rgba(255,255,255,.52);
  transition:transform .62s var(--signature-spring),border-color .35s ease,box-shadow .5s ease;
  animation:zairi-card-settle 2.9s var(--signature-ease) 1 both,zairi-surface-breathe 12s ease-in-out 3s infinite alternate;
}
.zairi-opportunity-card::before,.zairi-reveal-card::before,.sim-hero::before{
  padding:1.5px;
  filter:drop-shadow(0 0 7px rgba(var(--signature-purple-rgb),.22));
}
.zairi-opportunity-card::after,.zairi-reveal-card::after,.sim-hero::after{
  content:'';
  position:absolute;
  inset:-55% -30%;
  z-index:1;
  pointer-events:none;
  border-radius:45%;
  background:
    radial-gradient(circle at 30% 42%,rgba(var(--signature-purple-rgb),.19),transparent 31%),
    radial-gradient(circle at 68% 58%,rgba(var(--signature-mint-rgb),.105),transparent 27%);
  filter:blur(32px);
  opacity:.36;
  transform:translate3d(-7%,-3%,0) rotate(-5deg);
  animation:zairi-blur-drift 13s ease-in-out 2.7s infinite alternate;
}
@keyframes zairi-blur-drift{
  0%{ transform:translate3d(-8%,-4%,0) rotate(-6deg) scale(.96);opacity:.28; }
  48%{ transform:translate3d(7%,5%,0) rotate(4deg) scale(1.05);opacity:.43; }
  100%{ transform:translate3d(-1%,8%,0) rotate(-1deg) scale(1);opacity:.32; }
}
@keyframes zairi-surface-breathe{
  from{ background-position:0 0,100% 100%;box-shadow:0 15px 44px rgba(58,42,104,.085),inset 0 1px 0 rgba(255,255,255,.50); }
  to{ background-position:5% 2%,95% 96%;box-shadow:0 20px 54px rgba(58,42,104,.12),0 0 34px rgba(var(--signature-mint-rgb),.035),inset 0 1px 0 rgba(255,255,255,.55); }
}
.orb3d-wrap{
  transform:translateZ(0);
  transition:transform .8s var(--signature-spring),filter .5s ease;
}
.orb3d-wrap > canvas{ opacity:0;transition:opacity .65s ease; }
.orb3d-wrap > canvas.ready{ opacity:1; }
.orb3d-fallback{
  position:absolute;inset:6%;width:88%;height:88%;object-fit:contain;z-index:1;
  border-radius:50%;opacity:.92;transform:scale(.92);
  filter:saturate(1.06) drop-shadow(0 0 13px rgba(var(--signature-purple-rgb),.22));
  transition:opacity .7s ease,transform .8s var(--signature-spring),filter .6s ease;
}
.orb3d-fallback.hidden{ opacity:0;transform:scale(1.04);filter:blur(5px); }
.orb3d-glow{
  inset:-12%;
  background:
    radial-gradient(circle at 44% 40%,rgba(205,189,255,.60),rgba(var(--signature-purple-rgb),.25) 42%,rgba(var(--signature-mint-rgb),.09) 60%,transparent 74%);
  filter:blur(24px);
  animation:signature-orb-breathe 5.6s ease-in-out infinite;
}
.orb3d-wrap::after{
  content:'';position:absolute;inset:7%;border-radius:50%;pointer-events:none;z-index:0;
  border:1px solid rgba(218,209,255,.18);
  box-shadow:inset 0 0 19px rgba(255,255,255,.08),0 0 20px rgba(var(--signature-purple-rgb),.12);
  animation:signature-orb-ring 8s linear infinite;
}
@keyframes signature-orb-breathe{
  0%,100%{ transform:scale(.96) translate3d(-2%,1%,0);opacity:.72;filter:blur(25px); }
  50%{ transform:scale(1.12) translate3d(3%,-2%,0);opacity:1;filter:blur(31px); }
}
@keyframes signature-orb-ring{ to{ transform:rotate(360deg); } }
.zairi-legal-stats span{
  background:color-mix(in srgb,var(--surface) 70%,transparent);
  border-color:rgba(var(--signature-purple-rgb),.14);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:transform .46s var(--signature-spring),border-color .25s ease,background .25s ease;
}

@media(hover:hover) and (pointer:fine){
  .nav-item:hover{ transform:translateX(3px); }
  .nav-item:hover .ic{ transform:scale(1.08) rotate(-2deg); }
  .card:hover,.stat:hover{ border-color:color-mix(in srgb,var(--purple) 17%,var(--line));box-shadow:0 20px 55px rgba(35,27,56,.085),0 3px 10px rgba(35,27,56,.035); }
  .stat.clickable:hover,.row-click:hover{ transform:translateY(-3px); }
  .zairi-opportunity-card:hover,.zairi-reveal-card:hover,.sim-hero:hover{
    transform:translateY(-3px);
    border-color:rgba(var(--signature-purple-rgb),.42);
    box-shadow:0 24px 66px rgba(var(--signature-purple-rgb),.15),0 0 38px rgba(var(--signature-mint-rgb),.05),inset 0 1px 0 rgba(255,255,255,.62);
  }
  .zairi-opportunity-card:hover .orb3d-wrap,.zairi-reveal-card:hover .orb3d-wrap,.sim-hero:hover .orb3d-wrap{
    transform:translateY(-2px) scale(1.045) rotate(-1deg);
    filter:saturate(1.08);
  }
  .zairi-legal-stats span:hover{ transform:translateY(-2px);border-color:rgba(var(--signature-purple-rgb),.3); }
}

@media(min-width:900px){
  .app.collapsed{ grid-template-columns:82px minmax(0,1fr); }
  .app.collapsed .sidebar{ padding-left:10px;padding-right:10px; }
  .app.collapsed .side-brand .side-logo-full{ opacity:0;transform:translateX(-18px) scale(.88);pointer-events:none; }
  .app.collapsed .side-brand .side-logo-mini{ display:block;opacity:1;transform:translateX(-50%) scale(1) rotate(0);pointer-events:auto; }
  .app.collapsed .nav-group{
    display:flex;
    min-height:18px;
    max-height:18px;
    opacity:1;
    padding:8px 8px 5px;
    transform:none;
    pointer-events:none;
  }
  .app.collapsed .nav-group span{ max-width:0;opacity:0;transform:translateX(-9px); }
  .app.collapsed .nav-group::after{ min-width:18px;background:linear-gradient(90deg,transparent,rgba(225,218,241,.34),transparent);transform:scaleX(.92); }
  .app.collapsed .nav-label{
    display:block;
    max-width:0;
    opacity:0;
    transform:translateX(-8px);
    pointer-events:none;
  }
  .app.collapsed .nav-item{ padding-left:10px;padding-right:10px; }
  .app.collapsed .collapse-btn{ transform:rotate(180deg); }
  .app.collapsed .collapse-btn svg{ transform:scale(.92); }
  .app.collapsed .deskbar{ left:82px; }
}

@media(max-width:1100px) and (min-width:821px){
  .app{ grid-template-columns:220px minmax(0,1fr); }
  .deskbar{ left:220px;padding-left:20px;padding-right:20px; }
  .main{ padding-left:24px;padding-right:24px; }
  .acct-txt{ display:none; }
}

@media(max-width:820px){
  .app,.app.collapsed{ grid-template-columns:1fr; }
  .sidebar{
    width:min(86%,320px);
    max-width:320px;
    height:100dvh;
    margin:0;
    border-radius:0 22px 22px 0;
    padding:18px 14px;
    transform:translateX(-104%) scale(.985);
    transition:transform .52s var(--signature-spring);
  }
  .side-brand .side-logo-full{ opacity:1;transform:none; }
  .side-brand .side-logo-mini{ opacity:0; }
  .app.menu-open .sidebar{ transform:translateX(0) scale(1); }
  .drawer-ov{ animation:signature-overlay-in .25s ease both; }
  .topbar{
    height:62px;
    padding:0 14px;
    background:rgba(10,9,14,.90);
    backdrop-filter:blur(22px) saturate(1.25);
    -webkit-backdrop-filter:blur(22px) saturate(1.25);
    box-shadow:0 9px 28px rgba(0,0,0,.15);
  }
  .burger span{ transition:width .38s var(--signature-spring),transform .35s ease; }
  .burger:hover span:nth-child(2){ width:20px; }
  .topbar-search-m{ border-radius:12px;transition:transform .38s var(--signature-spring),background .24s ease; }
  .topbar-search-m:active{ transform:scale(.91);background:rgba(255,255,255,.09); }
  .main{ padding:82px 14px 38px; }
  .main > *{ animation-duration:.48s; }
  .page-head{ margin-bottom:18px;gap:12px; }
  .card{ padding:18px;border-radius:17px; }
  .stat{ padding:18px; }
  .modal-bg{ padding:72px 10px 18px;align-items:flex-start; }
  .modal{ border-radius:22px;padding:23px 18px; }
  .cmd-ov{ padding-top:72px; }
  .cmd{ border-radius:19px; }
  .zairi-opportunity-card,.zairi-reveal-card,.sim-hero{ padding:18px; }
}

@media(max-width:480px){
  .main{ padding-left:11px;padding-right:11px; }
  .stats{ grid-template-columns:1fr; }
  .page-head h1{ font-size:24px; }
  .btn{ width:auto;min-height:42px; }
  .toolbar{ gap:8px; }
  .modal-actions{ display:grid;grid-template-columns:1fr; }
  .modal-actions .btn{ width:100%; }
  .zairi-legal-stats{ grid-template-columns:1fr 1fr; }
  .bounded-list-footer{ align-items:flex-start;flex-direction:column; }
  .bounded-list-footer .btn{ width:100%; }
}

[data-theme="dark"] .card,[data-theme="dark"] .stat{
  background:linear-gradient(155deg,#19171f,#16141c);
  box-shadow:0 18px 48px rgba(0,0,0,.27),inset 0 1px 0 rgba(255,255,255,.025);
}
[data-theme="dark"] .deskbar-search,[data-theme="dark"] .deskbar-bell,[data-theme="dark"] .theme-toggle,[data-theme="dark"] .acct-btn{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
[data-theme="dark"] .modal{ box-shadow:0 38px 110px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.055); }
[data-theme="dark"] .zairi-opportunity-card,[data-theme="dark"] .zairi-reveal-card,[data-theme="dark"] .sim-hero{
  background-color:#191621;
  box-shadow:0 20px 58px rgba(0,0,0,.29),0 0 42px rgba(var(--signature-purple-rgb),.045),inset 0 1px 0 rgba(255,255,255,.05);
}
[data-theme="dark"] .zairi-legal-stats span{ background:rgba(255,255,255,.035); }
[data-theme="dark"] .acct-sii-status.pending{ color:#f0ce75;background:#2a2415;border-color:#5c4c24; }
[data-theme="dark"] .acct-sii-status.ready{ color:#87deb1;background:#13271f;border-color:#275b43; }

@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important; }
  .main > *{ opacity:1;transform:none;filter:none; }
}

/* ============================================================================
   ZAIRI · SIGNATURE v465 — "LIQUID PREMIUM"
   Capa puramente visual añadida al final del archivo: la cascada gana sin
   tocar reglas anteriores ni la lógica de la app. Principios aplicados:
   - apple-design: springs críticos (sin rebote gratuito), materiales
     translúcidos, feedback en pointer-down, trayectorias simétricas.
   - animate: solo transform/opacity, ease-out en entradas, duraciones
     150–300ms para UI frecuente, delight solo en momentos raros.
   - ui-ux-pro-max (tabla de prioridades): contraste, foco visible,
     touch ≥40px, reduced-motion/transparency/contrast al final.
   ============================================================================ */

:root{
  --lq-ease:cubic-bezier(.23,1,.32,1);            /* strong ease-out */
  --lq-inout:cubic-bezier(.77,0,.175,1);          /* strong ease-in-out */
  --lq-spring:cubic-bezier(.16,1,.3,1);           /* settle sin rebote */
  --lq-purple:124,77,255;
  --lq-violet:151,120,255;
  --lq-mint:91,225,203;
  --lq-sky:96,165,250;
  --lq-blob-a:rgba(var(--lq-purple),.16);
  --lq-blob-b:rgba(var(--lq-mint),.11);
  --lq-blob-c:rgba(var(--lq-sky),.10);
  --lq-blob-d:rgba(var(--lq-violet),.12);
  --lq-sheen:rgba(255,255,255,.5);
}
[data-theme="dark"]{
  --lq-blob-a:rgba(var(--lq-purple),.20);
  --lq-blob-b:rgba(var(--lq-mint),.075);
  --lq-blob-c:rgba(var(--lq-sky),.085);
  --lq-blob-d:rgba(var(--lq-violet),.14);
  --lq-sheen:rgba(255,255,255,.045);
}

/* ---------------------------------------------------------------------------
   1 · LIENZO LÍQUIDO (fondo vivo, claro y oscuro)
   El color base vive en <html>; el body se vuelve transparente y sus dos
   pseudo-elementos pintan el "líquido": blobs desenfocados que respiran
   (keyframes solo con transform/opacity) + una capa de parallax ligada al
   scroll real del panel vía --liquid-scroll (scrollytelling).
--------------------------------------------------------------------------- */
html{ background:var(--lq-canvas,var(--bg)); transition:background .6s ease; }
html body,
html[data-theme="dark"] body{
  background:transparent;
  position:relative;
  z-index:0;
}
body::before,
body::after{
  content:'';
  position:fixed;
  inset:-22%;
  z-index:-1;
  pointer-events:none;
}
/* Capa A — blobs autónomos que derivan lentamente (respiración del sistema) */
body::before{
  background:
    radial-gradient(42% 38% at 16% 18%, var(--lq-blob-a), transparent 70%),
    radial-gradient(36% 34% at 84% 12%, var(--lq-blob-c), transparent 70%),
    radial-gradient(40% 36% at 78% 86%, var(--lq-blob-b), transparent 72%),
    radial-gradient(34% 30% at 8% 82%,  var(--lq-blob-d), transparent 70%);
  filter:blur(58px) saturate(1.15);
  will-change:transform;
  animation:lq-drift 36s var(--lq-inout) infinite alternate;
}
/* Capa B — velo con parallax de scroll + deriva cromática muy lenta */
body::after{
  background:
    radial-gradient(52% 44% at 50% -6%, rgba(var(--lq-purple),.10), transparent 74%),
    conic-gradient(from 210deg at 68% 40%, transparent 0 62%, var(--lq-sheen) 74%, transparent 86%);
  filter:blur(70px);
  opacity:.8;
  will-change:transform;
  transform:translate3d(0, calc(var(--liquid-scroll,0) * -70px), 0)
            rotate(calc(var(--liquid-scroll,0) * 4deg))
            scale(calc(1 + var(--liquid-scroll,0) * .045));
  transition:transform 1.1s var(--lq-spring);
  animation:lq-hue 60s linear infinite;
}
@keyframes lq-drift{
  0%  { transform:translate3d(-2.5%, -1.5%, 0) rotate(-2deg) scale(1); }
  45% { transform:translate3d( 2.5%,  2.2%, 0) rotate( 1.5deg) scale(1.06); }
  100%{ transform:translate3d(-1%,    3%,   0) rotate(-.5deg) scale(1.02); }
}
@keyframes lq-hue{
  0%{ filter:blur(70px) hue-rotate(0deg); }
  50%{ filter:blur(70px) hue-rotate(-14deg); }
  100%{ filter:blur(70px) hue-rotate(0deg); }
}

/* ---------------------------------------------------------------------------
   2 · SIDEBAR — riel oscuro con aurora líquida propia
--------------------------------------------------------------------------- */
.sidebar{
  background:
    radial-gradient(120% 34% at 0% 0%,   rgba(var(--lq-purple),.20), transparent 62%),
    radial-gradient(120% 30% at 100% 96%,rgba(var(--lq-mint),.065),  transparent 64%),
    radial-gradient(90% 26% at 60% 55%,  rgba(var(--lq-violet),.09), transparent 70%),
    linear-gradient(180deg,#0d0c13,#060609);
  background-size:200% 200%, 200% 200%, 220% 220%, 100% 100%;
  animation:lq-aurora 26s ease-in-out infinite alternate;
  border-right:1px solid rgba(255,255,255,.055);
  box-shadow:inset -1px 0 0 rgba(var(--lq-purple),.10), 8px 0 40px rgba(8,6,14,.18);
}
@keyframes lq-aurora{
  0%  { background-position:0% 0%, 100% 100%, 50% 60%, 0 0; }
  100%{ background-position:24% 14%, 78% 84%, 42% 44%, 0 0; }
}
.side-brand{ position:relative; }
.side-logo{ transition:transform .6s var(--lq-spring), filter .4s ease; }
.side-brand:hover .side-logo-full{ transform:translateY(-1px); filter:drop-shadow(0 4px 18px rgba(var(--lq-purple),.45)); }

/* Entrada escalonada del menú (una sola vez, al montar el panel) */
.sidebar > *{ animation:lq-nav-in .55s var(--lq-ease) both; }
.sidebar > *:nth-child(1){ animation-delay:.02s } .sidebar > *:nth-child(2){ animation-delay:.05s }
.sidebar > *:nth-child(3){ animation-delay:.08s } .sidebar > *:nth-child(4){ animation-delay:.11s }
.sidebar > *:nth-child(5){ animation-delay:.14s } .sidebar > *:nth-child(6){ animation-delay:.17s }
.sidebar > *:nth-child(7){ animation-delay:.19s } .sidebar > *:nth-child(8){ animation-delay:.21s }
.sidebar > *:nth-child(9){ animation-delay:.23s } .sidebar > *:nth-child(10){ animation-delay:.25s }
.sidebar > *:nth-child(11){ animation-delay:.27s } .sidebar > *:nth-child(12){ animation-delay:.29s }
.sidebar > *:nth-child(13){ animation-delay:.31s } .sidebar > *:nth-child(14){ animation-delay:.33s }
.sidebar > *:nth-child(15){ animation-delay:.35s } .sidebar > *:nth-child(16){ animation-delay:.36s }
.sidebar > *:nth-child(17){ animation-delay:.37s } .sidebar > *:nth-child(18){ animation-delay:.38s }
.sidebar > *:nth-child(19){ animation-delay:.39s } .sidebar > *:nth-child(20){ animation-delay:.40s }
.sidebar > *:nth-child(n+21){ animation-delay:.41s }
@keyframes lq-nav-in{
  from{ opacity:0; transform:translateX(-14px); filter:blur(2px); }
  to  { opacity:1; transform:none; filter:blur(0); }
}

/* Ítems del menú: pill flotante, indicador vivo y respuesta táctil */
.nav-item{
  min-height:40px;
  padding:8px 13px;
  border-radius:14px;
  gap:12px;
  transition:background .22s ease, color .22s ease,
             transform .5s var(--lq-spring), box-shadow .35s ease,
             border-color .25s ease;
}
.nav-item .ic{ transition:transform .5s var(--lq-spring), opacity .25s ease; }
.nav-item .nav-label{ transition:letter-spacing .35s ease; }
.nav-item:active{ transform:scale(.965); transition-duration:.12s; }
.nav-item.active{
  background:linear-gradient(135deg, rgba(var(--lq-purple),1), rgba(106,63,240,1));
  box-shadow:0 8px 24px rgba(var(--lq-purple),.42),
             0 0 0 1px rgba(255,255,255,.10) inset,
             0 1px 0 rgba(255,255,255,.22) inset;
  animation:lq-active-pop .5s var(--lq-spring);
}
@keyframes lq-active-pop{
  0%{ transform:scale(.96); }
  60%{ transform:scale(1.015); }
  100%{ transform:scale(1); }
}
/* Indicador lateral que "aterriza" en el módulo activo */
.nav-item::before{
  content:'';
  position:absolute;
  left:-8px; top:50%;
  width:3.5px; height:0;
  border-radius:8px;
  background:linear-gradient(180deg,#c9b6ff,rgba(var(--lq-purple),1));
  box-shadow:0 0 12px rgba(var(--lq-purple),.8);
  transform:translateY(-50%);
  transition:height .45s var(--lq-spring), opacity .3s ease;
  opacity:0;
}
.nav-item.active::before{ height:62%; opacity:1; }
.nav-item.active .ic{ transform:scale(1.06); }
.nav-item.pro.active::before, .nav-item.destacado.active::before{ background:linear-gradient(180deg,#f2ff9c,#d7e84c); box-shadow:0 0 12px rgba(215,232,76,.7); }
@media(hover:hover) and (pointer:fine){
  .nav-item:hover{ transform:translateX(4px); box-shadow:0 4px 16px rgba(0,0,0,.22); }
  .nav-item:hover .ic{ transform:scale(1.12) rotate(-3deg); }
  .nav-item.active:hover{ transform:translateX(2px); }
}

/* Rótulos de grupo con línea de luz */
.nav-group{ position:relative; display:flex; align-items:center; gap:8px; }
.nav-group::after{
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,.14), transparent 82%);
  transform-origin:left center;
  animation:lq-hairline .8s var(--lq-ease) both;
}
@keyframes lq-hairline{ from{ transform:scaleX(0); opacity:0 } to{ transform:scaleX(1); opacity:1 } }

.collapse-btn{ transition:transform .55s var(--lq-spring), background .25s ease, color .25s ease; }
.collapse-btn:hover{ transform:scale(1.08); }
.collapse-btn:active{ transform:scale(.9); }
.logout{ transition:transform .4s var(--lq-spring), border-color .25s ease, color .25s ease, background .25s ease; }
.logout:hover{ border-color:rgba(var(--lq-purple),.55); color:#fff; transform:translateY(-1px); }
.logout:active{ transform:scale(.97); }

/* ---------------------------------------------------------------------------
   3 · DESKBAR — vidrio más profundo, con presentación al cargar
--------------------------------------------------------------------------- */
.deskbar{
  background:color-mix(in srgb, var(--signature-glass) 86%, transparent);
  backdrop-filter:blur(26px) saturate(1.45);
  -webkit-backdrop-filter:blur(26px) saturate(1.45);
  /* `backwards` y no `both` a propósito: con `both` el fotograma final queda
     retenido para siempre y el transform computa `matrix(1,0,0,1,0,0)` en vez de
     `none`. Un transform, aunque sea la identidad, convierte a la barra en el
     bloque contenedor de todo `position:fixed` que cuelgue de ella — y el velo
     difuminado del panel de notificaciones cuelga de ella. Con `both` el velo
     medía 66px de alto (la barra) en lugar de la pantalla completa. */
  animation:lq-deskbar-in .6s var(--lq-ease) backwards;
}
@keyframes lq-deskbar-in{
  from{ opacity:0; transform:translateY(-10px); }
  to  { opacity:1; transform:none; }
}
.ds-kbd{ transition:transform .4s var(--lq-spring), background .25s ease; }
.deskbar-search:hover .ds-kbd{ transform:translateY(-1px) scale(1.05); }
.deskbar-search .ds-orb{ transition:transform .6s var(--lq-spring); }
.deskbar-search:hover .ds-orb{ transform:scale(1.12) rotate(6deg); }

/* ---------------------------------------------------------------------------
   4 · TARJETAS Y KPIs — entrada escalonada + brillo líquido al pasar
   (sin overflow:hidden para no recortar menús internos)
--------------------------------------------------------------------------- */
.stats .stat{ animation:lq-rise .55s var(--lq-ease) both; }
.stats .stat:nth-child(1){ animation-delay:.03s } .stats .stat:nth-child(2){ animation-delay:.08s }
.stats .stat:nth-child(3){ animation-delay:.13s } .stats .stat:nth-child(4){ animation-delay:.18s }
.stats .stat:nth-child(5){ animation-delay:.23s } .stats .stat:nth-child(6){ animation-delay:.27s }
.stats .stat:nth-child(n+7){ animation-delay:.3s }
@keyframes lq-rise{
  from{ opacity:0; transform:translateY(12px) scale(.985); }
  to  { opacity:1; transform:none; }
}
.card,.stat{
  background-image:
    linear-gradient(155deg, color-mix(in srgb,var(--surface) 98%, white),
                             color-mix(in srgb,var(--surface) 96%, var(--purple-soft))),
    radial-gradient(120% 90% at 110% -10%, rgba(var(--lq-purple),.05), transparent 60%);
  background-blend-mode:normal, normal;
}
[data-theme="dark"] .card,[data-theme="dark"] .stat{
  background-image:
    linear-gradient(155deg,#1a1822,#15131c),
    radial-gradient(120% 90% at 110% -10%, rgba(var(--lq-purple),.075), transparent 60%);
}
.stat .value{ transition:transform .45s var(--lq-spring), color .25s ease; }
.stat:hover .value{ transform:translateY(-1px) scale(1.03); }
.stat .label{ transition:color .25s ease, letter-spacing .3s ease; }
.stat:hover .label{ color:var(--purple); letter-spacing:.12em; }

/* ---------------------------------------------------------------------------
   5 · MICRO-INTERACCIONES GLOBALES (cada acción responde)
--------------------------------------------------------------------------- */
/* Botones: feedback en pointer-down + halo de marca en el primario */
.btn{ transition:transform .42s var(--lq-spring), box-shadow .32s ease, background .22s ease, border-color .22s ease, color .22s ease, filter .25s ease; }
.btn:hover{ transform:translateY(-1.5px); box-shadow:0 12px 26px rgba(var(--lq-purple),.22), inset 0 1px 0 rgba(255,255,255,.16); }
.btn:active{ transform:translateY(.5px) scale(.965); transition-duration:.1s; box-shadow:0 3px 10px rgba(20,17,27,.14); }
.btn.ghost:hover{ box-shadow:0 8px 20px rgba(20,17,27,.09); }
.x-btn,.close-x{ transition:transform .45s var(--lq-spring), background .22s ease, color .22s ease; }
.x-btn:hover{ transform:rotate(90deg) scale(1.06); }
.x-btn:active,.close-x:active{ transform:scale(.85); }

/* Casillas y filas de verificación */
input[type="checkbox"],input[type="radio"]{
  min-height:unset;
  accent-color:var(--purple);
  transition:transform .35s var(--lq-spring);
}
input[type="checkbox"]:active,input[type="radio"]:active{ transform:scale(.82); }
input[type="checkbox"]:checked,input[type="radio"]:checked{ animation:lq-check-pop .4s var(--lq-spring); }
@keyframes lq-check-pop{ 0%{transform:scale(.7)} 60%{transform:scale(1.18)} 100%{transform:scale(1)} }
.check-row{ border-radius:11px; transition:background .22s ease, transform .4s var(--lq-spring); }
.check-row:hover{ background:rgba(var(--lq-purple),.06); transform:translateX(2px); }

/* Pills y badges con presencia */
.pill{ transition:transform .4s var(--lq-spring), box-shadow .3s ease, border-color .25s ease; }
.pill:hover{ transform:translateY(-1px); }

/* Selects e inputs: elevación mínima al enfocar */
input:focus,select:focus,textarea:focus{ transform:translateY(-1px); }

/* Filas de tabla: aparición suave (sin desplazamiento para no marear en filtros) */
tbody tr{ animation:lq-row-in .3s ease-out both; }
tbody tr:nth-child(1){ animation-delay:.015s } tbody tr:nth-child(2){ animation-delay:.03s }
tbody tr:nth-child(3){ animation-delay:.045s } tbody tr:nth-child(4){ animation-delay:.06s }
tbody tr:nth-child(5){ animation-delay:.075s } tbody tr:nth-child(6){ animation-delay:.09s }
tbody tr:nth-child(7){ animation-delay:.105s } tbody tr:nth-child(8){ animation-delay:.12s }
tbody tr:nth-child(9){ animation-delay:.135s } tbody tr:nth-child(10){ animation-delay:.15s }
tbody tr:nth-child(11){ animation-delay:.16s } tbody tr:nth-child(12){ animation-delay:.17s }
@keyframes lq-row-in{ from{ opacity:0 } to{ opacity:1 } }

/* Tabs y segmentos: el activo aterriza con spring */
.tab.active,.seg button.on{ animation:lq-active-pop .45s var(--lq-spring); }

/* Menús flotantes (cuenta, notificaciones, chat, comandos): materializan
   desde su origen — escala + blur juntos, como material real llegando */
.acct-menu,.notif-menu,.chat-menu,.chat-link-pop{
  transform-origin:top right;
  animation:lq-pop-menu .34s var(--lq-ease) both;
}
.cmd{ animation:lq-pop-cmd .42s var(--lq-spring) both; }
@keyframes lq-pop-menu{
  from{ opacity:0; transform:translateY(-7px) scale(.96); filter:blur(6px); }
  to  { opacity:1; transform:none; filter:blur(0); }
}
@keyframes lq-pop-cmd{
  from{ opacity:0; transform:translateY(14px) scale(.97); filter:blur(7px); }
  to  { opacity:1; transform:none; filter:blur(0); }
}

/* Modales: material que llega (blur + escala, ya existente, refinado) */
.modal{ animation:lq-modal-in .55s var(--lq-spring) both; }
@keyframes lq-modal-in{
  from{ opacity:0; transform:translateY(22px) scale(.962); filter:blur(9px); }
  to  { opacity:1; transform:none; filter:blur(0); }
}

/* Estados vacíos y pistas con respiración sutil */
.empty{ animation:lq-rise .5s var(--lq-ease) both; }

/* Badge de novedades: pulso periódico suave además del pop de entrada */
.nav-badge,.bell-badge{ animation:badgePop .34s cubic-bezier(.2,1.5,.4,1), lq-badge-breathe 3.4s ease-in-out 1.2s infinite; }
@keyframes lq-badge-breathe{
  0%,86%,100%{ box-shadow:0 0 0 3px rgba(229,72,77,.22); }
  92%{ box-shadow:0 0 0 6px rgba(229,72,77,.0); }
}

/* ---------------------------------------------------------------------------
   6 · SCROLL — barras al estilo del sistema en el panel principal
--------------------------------------------------------------------------- */
.main-col{ scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--ink-soft) 36%, transparent) transparent; }
.main-col::-webkit-scrollbar{ width:10px; }
.main-col::-webkit-scrollbar-track{ background:transparent; }
.main-col::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--ink-soft) 32%, transparent);
  border-radius:99px; border:3px solid transparent; background-clip:content-box;
  transition:background .25s ease;
}
.main-col::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb,var(--ink-soft) 55%, transparent); background-clip:content-box; }
.sidebar{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.16) transparent; }
.sidebar::-webkit-scrollbar{ width:7px; }
.sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:99px; }

/* ---------------------------------------------------------------------------
   7 · ACCESIBILIDAD Y PREFERENCIAS DEL SISTEMA (siempre al final)
--------------------------------------------------------------------------- */
@media(prefers-reduced-transparency:reduce){
  .deskbar,.acct-menu,.notif-menu,.chat-menu,.cmd,.chat-link-pop{
    background:var(--surface);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  body::before,body::after{ display:none; }
}
@media(prefers-contrast:more){
  .card,.stat,.modal,.acct-menu,.notif-menu{ border-color:var(--ink-soft); }
  body::before,body::after{ opacity:.35; }
}
@media(prefers-reduced-motion:reduce){
  body::before,body::after{ animation:none; transform:none; transition:none; }
  .sidebar{ animation:none; }
  .sidebar > *,.stats .stat,tbody tr,.empty{ animation:none; opacity:1; transform:none; filter:none; }
  .acct-menu,.notif-menu,.chat-menu,.cmd,.modal,.chat-link-pop{ animation:lq-fade .18s ease both; }
  @keyframes lq-fade{ from{opacity:0} to{opacity:1} }
}

/* ============================================================================
   ZAIRI · SIGNATURE v466 — "LIQUID WATER + MAC DOTS"
   1) Fondo líquido MUY visible, estilo agua: capas en contrafase que
      interfieren entre sí (sensación de oleaje), parallax fuerte al hacer
      scroll y una gota luminosa que sigue al cursor con retardo elástico.
   2) Controles tipo semáforo de macOS: cerrar = círculo rojo (la ✕ aparece
      al posar el cursor, en rojo oscuro), minimizar = amarillo, ampliar =
      verde. El glifo vive dentro del punto, exactamente como en macOS.
   ============================================================================ */

/* ------------------------- 1 · AGUA LÍQUIDA ------------------------------ */
:root{
  /* DIURNO — wallpaper claro estilo Apple: lienzo casi blanco y luminoso,
     con velos pastel apenas perceptibles pero vivos. */
  --lq-canvas:#f9f8fc;
  --lq-blob-a:rgba(196,178,255,.34);
  --lq-blob-b:rgba(170,236,224,.26);
  --lq-blob-c:rgba(186,214,255,.26);
  --lq-blob-d:rgba(214,198,255,.30);
  --lq-drop:rgba(206,188,255,.32);
  --lq-drop-2:rgba(178,238,226,.20);
  --lq-sat:1.05;
}
[data-theme="dark"]{
  /* NOCTURNO — wallpaper oscuro estilo Apple: fondo profundo casi negro,
     el agua es un resplandor contenido que no aclara el lienzo. */
  --lq-canvas:#060509;
  --lq-blob-a:rgba(var(--lq-purple),.17);
  --lq-blob-b:rgba(var(--lq-mint),.06);
  --lq-blob-c:rgba(var(--lq-sky),.07);
  --lq-blob-d:rgba(var(--lq-violet),.12);
  --lq-drop:rgba(var(--lq-purple),.20);
  --lq-drop-2:rgba(var(--lq-mint),.07);
  --lq-sat:1.0;
}

/* Capa A — oleaje principal (fase 1): blobs grandes, deriva amplia */
body::before{
  inset:-30%;
  background:
    radial-gradient(46% 40% at 14% 20%, var(--lq-blob-a), transparent 66%),
    radial-gradient(40% 36% at 86% 10%, var(--lq-blob-c), transparent 66%),
    radial-gradient(44% 40% at 80% 88%, var(--lq-blob-b), transparent 68%),
    radial-gradient(38% 34% at 6% 84%,  var(--lq-blob-d), transparent 66%),
    radial-gradient(30% 26% at 50% 50%, rgba(var(--lq-purple),.14), transparent 70%);
  filter:blur(64px) saturate(var(--lq-sat,1.1));
  animation:lq-wave-a 22s var(--lq-inout) infinite alternate;
}
/* Capa B — contrafase (fase 2) + parallax de scroll FUERTE: al desplazarse,
   el agua se corre, gira y cambia de tono — el efecto scrollytelling pedido. */
body::after{
  inset:-30%;
  background:
    radial-gradient(42% 38% at 70% 30%, var(--lq-blob-d), transparent 64%),
    radial-gradient(38% 34% at 22% 66%, var(--lq-blob-b), transparent 66%),
    radial-gradient(50% 42% at 50% -8%, rgba(var(--lq-purple),.20), transparent 72%),
    conic-gradient(from 200deg at 64% 42%, transparent 0 58%, var(--lq-sheen) 72%, transparent 84%);
  opacity:.9;
  will-change:transform,filter;
  transform:translate3d(calc(var(--liquid-scroll,0) * 5%),
                        calc(var(--liquid-scroll,0) * -150px), 0)
            rotate(calc(-4deg + var(--liquid-scroll,0) * 10deg))
            scale(calc(1 + var(--liquid-scroll,0) * .09));
  filter:blur(72px) saturate(var(--lq-sat,1.1)) hue-rotate(calc(var(--liquid-scroll,0) * -38deg));
  transition:transform 1s var(--lq-spring), filter 1s var(--lq-spring);
  animation:lq-wave-b 28s var(--lq-inout) infinite alternate;
}
/* Las dos fases se cruzan a ritmos distintos → interferencia = agua viva */
@keyframes lq-wave-a{
  0%  { transform:translate3d(-3.5%, -2%, 0) rotate(-3deg) scale(1); }
  40% { transform:translate3d( 3%,  2.6%, 0) rotate( 2deg) scale(1.08); }
  70% { transform:translate3d(-1%,  4%,   0) rotate(-1deg) scale(1.03); }
  100%{ transform:translate3d( 2%, -1.5%, 0) rotate( 1.5deg) scale(1.06); }
}
@keyframes lq-wave-b{
  0%  { opacity:.78; }
  50% { opacity:1; }
  100%{ opacity:.85; }
}

/* Capa C — la GOTA que sigue al cursor. El retardo elástico de 1s hace que
   "nade" detrás del mouse como agua, en vez de pegarse a él. */
#root::before{
  content:'';
  position:fixed;
  z-index:-1;
  left:0; top:0;
  width:760px; height:760px;
  margin:-380px 0 0 -380px;
  pointer-events:none;
  border-radius:50%;
  background:
    radial-gradient(circle at 42% 40%, var(--lq-drop), transparent 58%),
    radial-gradient(circle at 62% 62%, var(--lq-drop-2), transparent 52%);
  filter:blur(56px) saturate(1.3);
  opacity:0;
  transform:translate3d(var(--cur-x,50vw), var(--cur-y,40vh), 0) scale(.9);
  transition:transform 1.05s var(--lq-spring), opacity .8s ease;
}
html.lq-pointer #root::before{ opacity:.8; animation:lq-drop-breathe 4.5s ease-in-out infinite; }
[data-theme="dark"] html.lq-pointer #root::before,
html[data-theme="dark"].lq-pointer #root::before{ opacity:.65; }
@keyframes lq-drop-breathe{
  0%,100%{ filter:blur(56px) saturate(1.3); }
  50%    { filter:blur(66px) saturate(1.45); }
}

/* --------------------- 2 · SEMÁFORO ESTILO macOS ------------------------- */
/* Base común de los tres puntos: círculo, glifo oculto que aparece al posar
   el cursor (también con teclado, via :focus-visible), presión con feedback. */
.x-btn,.close-x,
.chat-mini-btn[title^="Cerrar"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border-radius:50%;
  float:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 1px 2px rgba(0,0,0,.18);
  transition:transform .35s var(--lq-spring), background .18s ease,
             border-color .18s ease, box-shadow .25s ease;
}
.x-btn svg,.close-x svg,
.chat-mini-btn[title^="Cerrar"] svg{
  width:11px; height:11px;
  stroke-width:2.6;
  color:transparent;
  transition:color .16s ease, transform .3s var(--lq-spring);
}
.x-btn:hover svg,.close-x:hover svg,
.chat-mini-btn[title^="Cerrar"]:hover svg,
.x-btn:focus-visible svg,.close-x:focus-visible svg,
.chat-mini-btn[title^="Cerrar"]:focus-visible svg{ color:var(--dot-glyph); transform:scale(1.05); }
.x-btn:active,.close-x:active,
.chat-mini-btn[title^="Cerrar"]:active{ transform:scale(.86); filter:brightness(.92); }

/* ROJO — cerrar (✕ en rojo oscuro al posar el cursor, como macOS) */
.x-btn,.close-x,.chat-mini-btn[title^="Cerrar"]{
  --dot-glyph:#5e0d08;
  width:26px; height:26px; min-width:26px;
  background:#ff5f57;
  border:1px solid #e0443e;
  color:transparent;
  font-size:0;
}
.x-btn:hover,.close-x:hover,.chat-mini-btn[title^="Cerrar"]:hover{
  background:#ff544a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 3px 10px rgba(255,95,87,.45);
}
.close-x{ width:28px; height:28px; }
.modal .close-x{ position:absolute; top:18px; right:18px; }
.modal{ position:relative; }

/* Chat: el cierre mantiene el punto rojo, más pequeño en la cabecera */
.chat-mini-btn[title^="Cerrar"] svg{ width:10px; height:10px; }

/* En pantallas táctiles no hay hover: el glifo se muestra siempre y el
   objetivo crece para cumplir el mínimo táctil. */
@media(pointer:coarse){
  .x-btn,.close-x,.chat-mini-btn[title^="Cerrar"]{ width:32px; height:32px; min-width:32px; }
  .x-btn svg,.close-x svg,
  .chat-mini-btn[title^="Cerrar"] svg{ color:var(--dot-glyph); width:13px; height:13px; }
}

/* ------------------- 3 · PREFERENCIAS DEL SISTEMA ------------------------ */
@media(prefers-reduced-transparency:reduce){
  #root::before{ display:none; }
}
@media(prefers-contrast:more){
  body::before,body::after,#root::before{ opacity:.3; }
}
@media(prefers-reduced-motion:reduce){
  body::before,body::after{ animation:none; transform:none; transition:none; }
  #root::before{ display:none; }
  .x-btn svg,.close-x svg,
  .chat-mini-btn[title^="Cerrar"] svg{ color:var(--dot-glyph); }
}

/* ============================================================================
   ZAIRI · SIGNATURE v468 — "VIDRIO EMPAVONADO"
   Feedback directo aplicado (apple-design + ui-styling):
   1) Menú lateral en vidrio empavonado (~80%): translúcido con blur, deja
      pasar el agua del fondo. Diurno = vidrio lechoso con texto oscuro;
      nocturno = vidrio ahumado con texto claro.
   2) La barra superior se disuelve en transparencia por su borde inferior
      e izquierdo: desaparece el corte recto contra el fondo y el menú.
   3) Se elimina la línea morada lateral del módulo activo.
   4) Puntos rojos de cierre tamaño Apple real (14px, glifo 8px), arriba a
      la derecha en modales, con zona de toque ampliada e invisible.
   ============================================================================ */

/* ------------------- 1 · MENÚ EN VIDRIO EMPAVONADO ----------------------- */
.sidebar{
  background:
    linear-gradient(180deg, rgba(252,251,255,.80), rgba(247,245,252,.62)),
    radial-gradient(130% 40% at 0% 0%, rgba(var(--lq-purple),.10), transparent 62%);
  background-size:100% 100%, 100% 100%;
  animation:none;
  backdrop-filter:blur(32px) saturate(1.6);
  -webkit-backdrop-filter:blur(32px) saturate(1.6);
  border-right:1px solid rgba(28,22,52,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset -1px 0 0 rgba(255,255,255,.35),
    10px 0 44px rgba(46,32,92,.08);
}
[data-theme="dark"] .sidebar{
  background:
    linear-gradient(180deg, rgba(20,17,28,.66), rgba(12,10,18,.58)),
    radial-gradient(130% 40% at 0% 0%, rgba(var(--lq-purple),.14), transparent 62%);
  backdrop-filter:blur(32px) saturate(1.4);
  -webkit-backdrop-filter:blur(32px) saturate(1.4);
  border-right:1px solid rgba(255,255,255,.07);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    10px 0 44px rgba(4,3,10,.35);
}

/* Diurno sobre vidrio claro: tinta oscura legible (WCAG) y logo en silueta */
html:not([data-theme="dark"]) .sidebar .nav-item{ color:#4d4763; }
html:not([data-theme="dark"]) .sidebar .nav-item:hover{
  background:rgba(var(--lq-purple),.09);
  color:#241f3a;
}
html:not([data-theme="dark"]) .sidebar .nav-item.active{ color:#fff; }
html:not([data-theme="dark"]) .sidebar .nav-group{ color:rgba(56,50,82,.52); }
html:not([data-theme="dark"]) .sidebar .nav-group::after{
  background:linear-gradient(90deg, rgba(40,32,72,.16), transparent 82%);
}
html:not([data-theme="dark"]) .sidebar .side-logo{
  filter:brightness(0) opacity(.85);
}
html:not([data-theme="dark"]) .side-brand:hover .side-logo-full{
  filter:brightness(0) opacity(1) drop-shadow(0 3px 12px rgba(var(--lq-purple),.35));
}
html:not([data-theme="dark"]) .sidebar .logout{
  border-color:rgba(30,24,56,.16);
  color:#565070;
}
html:not([data-theme="dark"]) .sidebar .logout:hover{
  border-color:rgba(var(--lq-purple),.5);
  color:#241f3a;
}
html:not([data-theme="dark"]) .sidebar .collapse-btn{ color:#565070; }
html:not([data-theme="dark"]) .sidebar .nav-badge{ box-shadow:0 0 0 3px rgba(229,72,77,.14); }
/* Ítems Pro: el lima de la marca no contrasta sobre vidrio claro → oliva */
html:not([data-theme="dark"]) .sidebar .nav-item.pro .nav-label,
html:not([data-theme="dark"]) .sidebar .nav-item.pro .ic,
html:not([data-theme="dark"]) .sidebar .nav-item.destacado .nav-label,
html:not([data-theme="dark"]) .sidebar .nav-item.destacado .ic{ color:#78851c; }
html:not([data-theme="dark"]) .sidebar .nav-item.pro.active,
html:not([data-theme="dark"]) .sidebar .nav-item.destacado.active{
  background:color-mix(in srgb, #d7e84c 30%, #fff);
  border-color:rgba(151,166,32,.55);
}
html:not([data-theme="dark"]) .sidebar .nav-item.pro.active .nav-label,
html:not([data-theme="dark"]) .sidebar .nav-item.pro.active .ic,
html:not([data-theme="dark"]) .sidebar .nav-item.destacado.active .nav-label,
html:not([data-theme="dark"]) .sidebar .nav-item.destacado.active .ic{ color:#55600f; }

/* ------- 2 · BARRA SUPERIOR DISUELTA (adiós al corte recto) -------------- */
.deskbar{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--signature-glass) 72%, transparent),
    color-mix(in srgb, var(--signature-glass) 40%, transparent));
  border-bottom:none;
  box-shadow:none;
  -webkit-mask-image:linear-gradient(180deg, #000 68%, transparent 100%),
                     linear-gradient(90deg, transparent 0, #000 34px);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg, #000 68%, transparent 100%),
             linear-gradient(90deg, transparent 0, #000 34px);
  mask-composite:intersect;
}

/* --------- 3 · SIN LÍNEA MORADA EN EL MÓDULO ACTIVO ---------------------- */
.nav-item::before,
.nav-item.active::before,
.nav-item.pro.active::before{ display:none; }

/* --------- 4 · PUNTOS ROJOS TAMAÑO APPLE, ARRIBA A LA DERECHA ------------ */
.x-btn,.close-x,.chat-mini-btn[title^="Cerrar"]{
  width:14px; height:14px; min-width:14px;
  border-width:.5px;
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.3);
  position:relative;
}
.x-btn svg,.close-x svg,
.chat-mini-btn[title^="Cerrar"] svg{
  width:8px; height:8px;
  stroke-width:2.2;
}
/* Zona de toque invisible ampliada: el punto es chico, el objetivo no */
.x-btn::after,.close-x::after,
.chat-mini-btn[title^="Cerrar"]::after{
  content:'';
  position:absolute;
  inset:-9px;
  border-radius:50%;
}
.close-x{ width:14px; height:14px; }
.modal .close-x{ top:16px; right:16px; }
.x-btn:hover,.close-x:hover,.chat-mini-btn[title^="Cerrar"]:hover{
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.35), 0 2px 8px rgba(255,95,87,.5);
}
@media(pointer:coarse){
  .x-btn,.close-x,.chat-mini-btn[title^="Cerrar"]{ width:22px; height:22px; min-width:22px; }
  .x-btn svg,.close-x svg,
  .chat-mini-btn[title^="Cerrar"] svg{ width:11px; height:11px; }
}

/* ------------------- PREFERENCIAS DEL SISTEMA ---------------------------- */
@media(prefers-reduced-transparency:reduce){
  .sidebar{ background:#f3f1f8; backdrop-filter:none; -webkit-backdrop-filter:none; }
  [data-theme="dark"] .sidebar{ background:#12101a; }
  .deskbar{ -webkit-mask-image:none; mask-image:none; background:var(--surface); }
}
@media(prefers-contrast:more){
  html:not([data-theme="dark"]) .sidebar .nav-item{ color:#2a2540; }
  .sidebar{ border-right-color:rgba(28,22,52,.3); }
}

/* ============================================================================
   ZAIRI · SIGNATURE v469 — CORRECCIÓN + AJUSTES DE FEEDBACK
   1) FIX CRÍTICO: la máscara del v468 sobre .deskbar recortaba también a sus
      hijos absolutos (notificaciones, cuenta, chat): los paneles se abrían
      invisibles. El vidrio y su desvanecido se mueven a un ::before que solo
      pinta el fondo — los menús desplegables quedan fuera de la máscara.
   2) Vidrio del menú al 75% de transparencia (25% de opacidad) con más blur
      para mantener legibilidad.
   3) Logo Zairi centrado en el menú.
   ============================================================================ */

/* 1 · El deskbar vuelve a ser un contenedor limpio; el vidrio vive en ::before */
.deskbar{
  background:transparent;
  -webkit-mask-image:none;
  mask-image:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom:none;
  box-shadow:none;
}
.deskbar::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--signature-glass) 72%, transparent),
    color-mix(in srgb, var(--signature-glass) 40%, transparent));
  backdrop-filter:blur(26px) saturate(1.45);
  -webkit-backdrop-filter:blur(26px) saturate(1.45);
  -webkit-mask-image:linear-gradient(180deg, #000 68%, transparent 100%),
                     linear-gradient(90deg, transparent 0, #000 34px);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg, #000 68%, transparent 100%),
             linear-gradient(90deg, transparent 0, #000 34px);
  mask-composite:intersect;
}

/* 2 · Vidrio empavonado al 75% de transparencia */
.sidebar{
  background:
    linear-gradient(180deg, rgba(252,251,255,.30), rgba(247,245,252,.20)),
    radial-gradient(130% 40% at 0% 0%, rgba(var(--lq-purple),.08), transparent 62%);
  backdrop-filter:blur(38px) saturate(1.7);
  -webkit-backdrop-filter:blur(38px) saturate(1.7);
}
[data-theme="dark"] .sidebar{
  background:
    linear-gradient(180deg, rgba(18,15,26,.32), rgba(10,8,16,.24)),
    radial-gradient(130% 40% at 0% 0%, rgba(var(--lq-purple),.12), transparent 62%);
  backdrop-filter:blur(38px) saturate(1.4);
  -webkit-backdrop-filter:blur(38px) saturate(1.4);
}

/* 3 · Logo centrado en el menú */
.sidebar .side-brand{
  display:flex;
  align-items:center;
  justify-content:center;
}
.app.collapsed .sidebar .side-brand{ justify-content:center; }

@media(prefers-reduced-transparency:reduce){
  .deskbar::before{ -webkit-mask-image:none; mask-image:none; background:var(--surface); backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* ============================================================================
   ZAIRI · SIGNATURE v470 — PLEGADO SUAVE DE TARJETAS ZAIRI (/animate)
   View Transitions por tarjeta: la caja hace morph de tamaño mientras el
   contenido saliente se desvanece con blur y el entrante se materializa.
   Curva ease-in-out fuerte (acelera y desacelera), entrada con ease-out.
   ============================================================================ */
::view-transition-group(zt-bandeja),
::view-transition-group(zt-modulo),
::view-transition-group(zt-trat),
::view-transition-group(zt-agenda),
::view-transition-group(zt-finanzas){
  animation-duration:.46s;
  animation-timing-function:var(--lq-inout);
}
::view-transition-old(zt-bandeja), ::view-transition-old(zt-modulo),
::view-transition-old(zt-trat), ::view-transition-old(zt-agenda),
::view-transition-old(zt-finanzas){
  animation:zt-fold-out .34s var(--lq-inout) both;
}
::view-transition-new(zt-bandeja), ::view-transition-new(zt-modulo),
::view-transition-new(zt-trat), ::view-transition-new(zt-agenda),
::view-transition-new(zt-finanzas){
  animation:zt-fold-in .46s var(--lq-ease) both;
}
@keyframes zt-fold-out{ to{ opacity:0; filter:blur(10px); } }
@keyframes zt-fold-in{ from{ opacity:0; filter:blur(10px); } to{ opacity:1; filter:blur(0); } }
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation:none !important; }
}

/* ============================================================
   ZAIRI · SIGNATURE v473 — REBRANDING ZAIRI (logos + orbe perla)
   Capa nueva: no modifica reglas anteriores, solo las precisa.
   ============================================================ */

/* --- Logo según tema: los archivos ya vienen en blanco y negro,
       así que el truco brightness(0) del deskbar ya no es necesario. --- */
html:not([data-theme="dark"]) .deskbar-logo{ filter:none; opacity:.92; }

/* --- Animación del logo al plegar el menú (/animate) ---
   Frecuencia: ocasional (se pliega unas pocas veces al día) → animación estándar.
   Propósito: continuidad espacial — el logo horizontal "se guarda" hacia la
   izquierda y el orbe circular toma su lugar en el centro.
   Herramienta: transición CSS (cambio de estado por clase .collapsed).
   Propiedades: solo transform + opacity (GPU). Curva: ease-out fuerte.
   Duración: 260 ms (bajo el techo de 300 ms para UI). */
.side-brand .side-logo-full,
.side-brand .side-logo-mini{
  transition:opacity .26s cubic-bezier(.23,1,.32,1), transform .26s cubic-bezier(.23,1,.32,1);
  will-change:transform, opacity;
}
/* estado expandido (por defecto): horizontal visible, orbe en espera */
.side-brand .side-logo-mini{
  display:block; left:50%; height:34px; max-width:34px;
  opacity:0; transform:translateX(-50%) scale(.9); transform-origin:center;
  pointer-events:none; border-radius:50%;
}
@media(min-width:821px){
  /* al plegar: el horizontal sale hacia la izquierda encogiéndose;
     el orbe entra desde scale(.9) — nunca desde 0 — con un giro sutil de -6°
     que remata en 0°, como una perla que se asienta */
  .app.collapsed .side-brand .side-logo-full{
    opacity:0; transform:translateX(-16px) scale(.9); pointer-events:none;
  }
  .app.collapsed .side-brand .side-logo-mini{
    opacity:1; transform:translateX(-50%) scale(1) rotate(0deg); pointer-events:auto;
  }
  .side-brand .side-logo-mini{ transform:translateX(-50%) scale(.9) rotate(-6deg); }
  /* halo suave del orbe al posarse (solo con puntero fino, no en táctil) */
  @media(hover:hover) and (pointer:fine){
    .app.collapsed .side-brand:hover .side-logo-mini{
      transform:translateX(-50%) scale(1.06) rotate(0deg);
      filter:drop-shadow(0 4px 16px rgba(154,129,246,.55));
    }
  }
}
/* accesibilidad: sin movimiento, solo fundido */
@media(prefers-reduced-motion:reduce){
  .side-brand .side-logo-full,
  .side-brand .side-logo-mini{ transition:opacity .2s ease; transform:none !important; }
}

/* --- Orbe «Perla»: el aro difuso morado del orbe antiguo compite con el
       borde luminoso propio de la perla → glow más tenue y lavanda-celeste. --- */
.orb3d-glow{
  background:radial-gradient(circle,
    rgba(177,138,247,.30) 0%, rgba(201,239,253,.16) 42%, rgba(177,138,247,0) 70%) !important;
}

/* --- Avatar mini-perla: pulso de "pensando" en la paleta nueva --- */
.zairi-pulse{ box-shadow:0 0 0 0 rgba(154,129,246,.55); animation:zairi-perla-pulse 1.8s ease-out infinite; }
@keyframes zairi-perla-pulse{
  0%{ box-shadow:0 0 0 0 rgba(154,129,246,.5); }
  70%{ box-shadow:0 0 0 10px rgba(154,129,246,0); }
  100%{ box-shadow:0 0 0 0 rgba(154,129,246,0); }
}

/* v473.b — dos correcciones de causa raíz para los logos nuevos:
   1) El tema claro pintaba TODO logo con brightness(0) (herencia de cuando el
      logo era un único archivo blanco). Ahora hay archivo negro dedicado y el
      orbe es a color: el filtro sobra y arruina ambos.
   2) Una regla antigua ocultaba el logo horizontal con display:none al colapsar,
      lo que anula la transición (display no se anima). Se restituye display:block
      y el ocultamiento queda a cargo de opacity + pointer-events (sí animables). */
html:not([data-theme="dark"]) .sidebar .side-logo{ filter:none; opacity:1; }
html:not([data-theme="dark"]) .side-brand:hover .side-logo-full{
  filter:drop-shadow(0 3px 12px rgba(var(--lq-purple),.35)); opacity:1;
}
@media(min-width:821px){
  .app.collapsed .side-logo-full{ display:block; }
}

/* ============================================================
   ZAIRI · SIGNATURE v474 — CORRECCIÓN DOBLE LOGO + CENTRADO
   Causa raíz del doble logo: el arreglo del tema claro (v473.b)
   forzaba opacity:1 sobre TODOS los .side-logo y, por especificidad
   mayor (html:not(...)), pisaba el opacity:0 del orbe en estado
   expandido. Solo ocurría en tema claro.
   ============================================================ */

/* 1) El orbe vuelve a obedecer al plegado también en tema claro */
html:not([data-theme="dark"]) .sidebar .side-logo-mini{ opacity:0; }
@media(min-width:821px){
  html:not([data-theme="dark"]) .app.collapsed .sidebar .side-logo-mini{ opacity:1; }
}

/* 2) Logo al medio, pedido de diseño: centrado por caja (left/right +
      margin auto), no por transform. Así el transform queda reservado
      para la animación y el centrado sobrevive a prefers-reduced-motion
      (que anula transforms con transform:none). */
.side-brand .side-logo-full{
  left:0; right:0; margin:0 auto;
  transform-origin:center; transform:translateX(0) scale(1);
}
.side-brand .side-logo-mini{
  left:0; right:0; margin:0 auto;
  transform:scale(.9) rotate(-6deg);
}
@media(min-width:821px){
  /* misma coreografía de v473, re-expresada sin translateX(-50%) */
  .app.collapsed .side-brand .side-logo-full{ transform:translateX(-16px) scale(.9); }
  .app.collapsed .side-brand .side-logo-mini{ transform:scale(1) rotate(0deg); }
  @media(hover:hover) and (pointer:fine){
    .app.collapsed .side-brand:hover .side-logo-mini{
      transform:scale(1.06) rotate(0deg);
      filter:drop-shadow(0 4px 16px rgba(154,129,246,.55));
    }
  }
}


/* ============================================================
   ZAIRI · v476 — BLINDAJE DE LA BIENVENIDA
   Mientras el saludo se desvanece (.out, 0.8 s) ya no debe comerse
   los clics: el usuario ansioso que clickea temprano llega directo
   a lo que quería tocar. Capa nueva: precisa, no modifica.
   ============================================================ */
.welcome.out{ pointer-events:none; }

/* ============================================================
   ZAIRI · v477 — LA LÍNEA ROJA DEL AHORA (agenda)
   Marca la hora actual cruzando la grilla en tiempo real; en la
   columna de horas lleva la etiqueta hh:mm. Capa nueva: precisa,
   no modifica reglas históricas.
   ============================================================ */
.cd-gutter{ position:relative; }
.cd-ahora{ position:absolute; left:0; right:0; height:0;
  border-top:2px solid #e5484d; z-index:6; pointer-events:none; }
.cd-ahora-punto{ position:absolute; left:-1px; top:-4px; width:8px; height:8px;
  border-radius:50%; background:#e5484d; }
.cd-ahora-hora{ position:absolute; right:3px; top:-9px; font-size:10px; font-weight:700;
  color:#fff; background:#e5484d; padding:1px 6px; border-radius:7px; line-height:1.4;
  box-shadow:0 1px 4px rgba(229,72,77,.4); }
[data-theme="dark"] .cd-ahora{ border-top-color:#ff5c62; }
[data-theme="dark"] .cd-ahora-punto{ background:#ff5c62; }
[data-theme="dark"] .cd-ahora-hora{ background:#ff5c62; color:#22090b; }

/* ============================================================
   ZAIRI · v481 — AVISOS DEL EQUIPO (rectángulos arriba a la derecha)
   El puente entre el box y el mesón: lo que hace el médico le llega a la
   secretaria y viceversa. Capa nueva: no modifica reglas anteriores.
   ============================================================ */
.zx-avisos{ position:fixed; top:14px; right:14px; z-index:1200;
  display:flex; flex-direction:column; gap:9px; width:min(360px, calc(100vw - 28px));
  pointer-events:none; }
/* v485 · Estilo notificación de macOS: vidrio esmerilado que difumina lo que
   pasa por debajo, esquinas muy redondeadas y sombra alta. Sin la barra
   lateral de color: el orbe de Zairi es la firma. */
.zx-aviso{ pointer-events:auto; display:flex; gap:11px; align-items:flex-start;
  padding:13px 14px; border-radius:18px;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 16px 44px rgba(20,12,42,.22), 0 2px 6px rgba(20,12,42,.10);
  animation:zx-aviso-entra .38s cubic-bezier(.23,1,.32,1) both; }
[data-theme="dark"] .zx-aviso{
  background:rgba(24,20,40,.72);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 16px 44px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4); }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
  .zx-aviso{ background:var(--surface); }
  [data-theme="dark"] .zx-aviso{ background:#181428; }
}
.zx-aviso-orbe{ flex:0 0 auto; width:26px; height:26px; margin-top:1px; }
@keyframes zx-aviso-entra{ from{ opacity:0; transform:translateX(26px) scale(.97); } to{ opacity:1; transform:none; } }
@media(max-width:700px){ .zx-avisos{ top:auto; bottom:14px; right:8px; left:8px; width:auto; } }
@media(prefers-reduced-motion:reduce){ .zx-aviso{ animation:none; } }

/* ============================================================
   ZAIRI · v482 — VIDRIO EMPAVONADO EN LOS DESPLEGABLES
   El panel de notificaciones y el menú de "Mi panel" se veían con el fondo
   transparente plano: lo de atrás se leía a través y ensuciaba el texto.
   Ahora difuminan lo que tienen detrás, como el resto del material del
   sistema. Capa nueva: no modifica reglas anteriores.
   ============================================================ */
.notif-menu, .acct-menu{
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  backdrop-filter:blur(26px) saturate(180%);
  background:rgba(255,255,255,.78) !important;
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 26px 70px rgba(20,12,42,.20);
}
[data-theme="dark"] .notif-menu, [data-theme="dark"] .acct-menu{
  background:rgba(18,15,32,.80) !important;
  border-color:rgba(255,255,255,.10);
  box-shadow:0 26px 70px rgba(0,0,0,.60);
}
/* Si el navegador no soporta desenfoque, el fondo se vuelve sólido: nunca
   se lee el contenido de atrás a través del panel. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
  .notif-menu, .acct-menu{ background:var(--surface) !important; }
}
@media(prefers-reduced-transparency:reduce){
  .notif-menu, .acct-menu{
    -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--surface) !important; }
}

/* ============================================================
   ZAIRI · v484 — EL DESPLEGABLE APAGA LO QUE HAY DETRÁS
   La capa v482 difuminaba solo el rectángulo del panel, y con el fondo al
   80% seguía leyéndose la pantalla por debajo. El desenfoque va ahora en el
   TELÓN completo (como en iOS): al abrir notificaciones o "Mi panel", todo
   lo que queda atrás se difumina y el panel se lee limpio.
   ============================================================ */
/* v511 · el telón sí difumina. Antes solo capturaba el clic de "cerrar" y era
   transparente: el panel se leía bien, pero el resto de la pantalla seguía
   nítido y competía por la atención. Ahora, como en iOS, al abrir la campana o
   "Mi panel" todo lo de atrás se difumina y el panel queda solo. El desenfoque
   va en el telón (position:fixed sobre la página), no en la barra superior,
   que es donde no funcionaba. */
@keyframes velo-entra{ from{ opacity:0 } to{ opacity:1 } }
.notif-ov, .acct-ov{
  background:rgba(18,12,38,.16);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  backdrop-filter:blur(14px) saturate(1.1);
  animation:velo-entra .18s ease both;
}
/* La barra superior queda POR ENCIMA del velo (44): el botón que acabas de tocar
   tiene que seguir nítido, si no parece que se apagó la pantalla. El panel sigue
   colgando de la barra, así que se dibuja sobre ella. Esto solo funciona porque
   el velo se monta en el <body> con un portal (app.js); si volviera a colgar de
   la barra, quedaría dentro de su contexto de apilado y la difuminaría. */
.deskbar{ z-index:45; }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
  .notif-ov, .acct-ov{ background:rgba(18,12,38,.52); }
}
@media(prefers-reduced-transparency:reduce){
  .notif-ov, .acct-ov{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(18,12,38,.52); }
}
/* Vidrio real: el panel difumina lo que tiene detrás y se lee limpio. */
.notif-menu, .acct-menu{
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  backdrop-filter:blur(30px) saturate(180%);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
  .notif-menu, .acct-menu{ background:var(--surface) !important; }
}
@media(prefers-reduced-transparency:reduce){
  .notif-menu, .acct-menu{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--surface) !important; }
}

/* ============================================================
   ZAIRI · v486 — POR QUÉ EL VIDRIO NO FUNCIONABA EN ESTOS DOS
   El panel de MENSAJES sí se veía bien y estos no. La diferencia no era el
   color: mensajes usa `position:fixed` y fondo OPACO, mientras que la campana
   y «Mi panel» son `position:absolute` dentro de la barra superior. Un
   `backdrop-filter` solo difumina lo que hay bajo su capa de composición, y
   ahí adentro esa capa es la propia barra — nunca el contenido de la página.
   Por eso el texto de atrás se seguía leyendo a través del panel.
   Solución: misma receta que mensajes — fijos respecto de la ventana y con
   fondo sólido — más el desenfoque encima, que ahora sí tiene debajo el
   contenido real de la pantalla.
   ============================================================ */
.notif-menu, .acct-menu{
  position:fixed !important;
  top:64px !important;
  background:var(--surface) !important;   /* opaco: nada se lee a través */
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  backdrop-filter:blur(30px) saturate(180%);
  box-shadow:0 22px 60px rgba(20,12,42,.24);
  z-index:46;
}
.notif-menu{ right:70px !important; left:auto !important; }
.acct-menu{ right:14px !important; left:auto !important; }
/* La capa v482 dejó un fondo al 80% con [data-theme] — más específico que un
   selector de clase suelto, así que ganaba y por eso seguía leyéndose el texto
   de atrás. Aquí se iguala esa especificidad y se vuelve sólido. */
[data-theme="dark"] .notif-menu, [data-theme="dark"] .acct-menu{
  background:var(--surface) !important;
  border-color:rgba(255,255,255,.10);
  box-shadow:0 22px 60px rgba(0,0,0,.62);
}
html .notif-menu, html .acct-menu{ background:var(--surface) !important; }
@media(max-width:700px){
  .notif-menu, .acct-menu{ left:8px !important; right:8px !important; width:auto !important; top:60px !important; }
}

/* ============================================================
   ZAIRI · v508 — INICIO Y NOTIFICACIONES CON CONTEXTO VISUAL
   ============================================================ */
/* v511 · vuelve el rojo. El degradado morado-verde se confundía con el resto de
   la interfaz —que ya es morada— y el contador se perdía. El rojo es el único
   color que en esta pantalla no significa otra cosa: se ve al instante en la
   campana, en el chat del equipo y en el punto de Agenda cuando entra una hora. */
.nav-badge,.bell-badge{
  background:#e5484d;
  box-shadow:0 0 0 3px rgba(229,72,77,.20);
}

/* Mismo vidrio vivo del chat del equipo. La regla va al final porque versiones
   antiguas forzaban un fondo sólido con selectores más específicos. */
html .notif-menu{
  background:rgba(249,248,255,.72) !important;
  border:1px solid rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(30px) saturate(165%);
  backdrop-filter:blur(30px) saturate(165%);
  box-shadow:0 24px 70px rgba(30,18,55,.22),inset 0 1px 0 rgba(255,255,255,.72);
}
.notif-head{
  background:rgba(249,248,255,.76) !important;
  -webkit-backdrop-filter:blur(18px) saturate(145%);
  backdrop-filter:blur(18px) saturate(145%);
  border-radius:11px;
}
.notif-item,button.notif-item{
  width:100%; text-align:left; cursor:pointer; border:1px solid transparent;
  background:rgba(255,255,255,.43) !important;
  color:var(--ink); box-sizing:border-box;
}
.notif-item.unread,button.notif-item.unread{
  background:linear-gradient(120deg,rgba(124,77,255,.13),rgba(14,165,164,.08)) !important;
  border-color:rgba(124,77,255,.16);
}
.notif-item:hover,button.notif-item:hover{
  background:rgba(255,255,255,.76) !important;
  border-color:rgba(124,77,255,.18);
}
[data-theme="dark"] .notif-menu,html [data-theme="dark"] .notif-menu{
  background:rgba(22,18,38,.76) !important;
  border-color:rgba(255,255,255,.12);
}
[data-theme="dark"] .notif-head{ background:rgba(22,18,38,.80) !important; }
[data-theme="dark"] .notif-item,[data-theme="dark"] button.notif-item{ background:rgba(255,255,255,.045) !important; }
[data-theme="dark"] .notif-item.unread,[data-theme="dark"] button.notif-item.unread{ background:linear-gradient(120deg,rgba(124,77,255,.22),rgba(14,165,164,.12)) !important; }
[data-theme="dark"] .notif-item:hover,[data-theme="dark"] button.notif-item:hover{ background:rgba(255,255,255,.10) !important; }

.inicio-cita-row{ cursor:pointer; transition:background .2s ease,transform .28s var(--signature-spring),box-shadow .2s ease; }
.inicio-cita-row:hover,.inicio-cita-row:focus-visible{ background:rgba(124,77,255,.055); box-shadow:inset 3px 0 0 rgba(124,77,255,.5); outline:none; }
.inicio-paciente-link{ border:0; padding:0; background:transparent; color:var(--purple-2); font:inherit; font-weight:700; cursor:pointer; text-align:left; }
.inicio-paciente-link:hover{ text-decoration:underline; text-underline-offset:3px; }

/* El bloque buscado sube, vibra y queda rodeado por un halo. z-index importa
   porque varias citas pueden compartir el mismo bloque. */
@keyframes agenda-focus-buzz{
  0%{ transform:translate3d(0,0,0) scale(1); }
  8%{ transform:translate3d(-5px,-7px,0) rotate(-.7deg) scale(1.045); }
  16%{ transform:translate3d(5px,-8px,0) rotate(.7deg) scale(1.045); }
  24%{ transform:translate3d(-4px,-6px,0) rotate(-.5deg) scale(1.04); }
  32%{ transform:translate3d(4px,-7px,0) rotate(.5deg) scale(1.04); }
  45%{ transform:translate3d(0,-9px,0) scale(1.055); }
  62%{ transform:translate3d(0,-5px,0) scale(1.035); }
  100%{ transform:translate3d(0,-3px,0) scale(1.025); }
}
/* Los anillos blanco+morado que había acá (`agenda-focus-halo`) se cambiaron en
   v536 por el borde de luz de las tarjetas de Zairi: ver el bloque v536 al final
   de este archivo. Acá quedan el salto y el z-index, que siguen valiendo. */
.cal-appt.agenda-focus-buzz,.cd-appt.agenda-focus-buzz,.slot-pop-box.agenda-focus-buzz{
  z-index:80 !important;
  opacity:1 !important;
  animation:agenda-focus-buzz .82s cubic-bezier(.2,.9,.25,1) 2 !important;
  transform:translateY(-3px) scale(1.025);
}
@media(prefers-reduced-transparency:reduce){
  html .notif-menu,.notif-head{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--surface) !important; }
}

/* ============================================================
   ZAIRI · v487 — LA TARJETA DE HORAS, EN MODO NOCTURNO
   El popover del arrastre («2 h 30 min · Agendar aquí / Bloquear») usaba
   `var(--card, #fff)`: como esa variable no está definida en el tema oscuro,
   caía al blanco fijo. Resultado: tarjeta blanca con texto claro — ilegible
   justo cuando la secretaria acaba de arrastrar y espera confirmar la hora.
   Capa nueva: no modifica reglas anteriores.
   ============================================================ */
[data-theme="dark"] .slot-pop{
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--text, #ede9fb);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
[data-theme="dark"] .slot-pop .slot-pop-head,
[data-theme="dark"] .slot-pop b,
[data-theme="dark"] .slot-pop strong{ color:var(--text, #ede9fb); }
[data-theme="dark"] .slot-pop .muted{ color:var(--muted, #948eae); }
/* El telón del popover también se oscurece: en nocturno un velo claro
   encandila. */
[data-theme="dark"] .slot-pop-overlay{ background:rgba(4,3,9,.55); }

/* ═══════════════════════════════════════════════════════════════════════════
   VISOR DE COMPROBANTE DE TRANSFERENCIA  (capa nueva, no pisa nada anterior)
   La secretaría abre acá la foto que la persona mandó por el chat para
   cuadrarla contra el banco. Prioridades: que la imagen se LEA (los
   comprobantes traen letra chica), que nunca haya un cuadro vacío sin
   explicación, y que funcione igual en claro y en nocturno.
   ═══════════════════════════════════════════════════════════════════════════ */

/* El botón lleva ícono + texto: un ícono solo no dice qué hace, y esta acción
   es poco frecuente, así que no hay memoria muscular que la respalde. */
.btn-comprobante{
  display:inline-flex; align-items:center; gap:6px;
  /* Área de toque cómoda: la agenda también se usa desde tablet en recepción. */
  min-height:32px;
}
.btn-comprobante svg{ width:14px; height:14px; flex:none; }

.comprobante-marco{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:220px;                 /* reserva el espacio: evita el salto al cargar */
  max-height:min(64vh, 560px);
  overflow:auto;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-2);
  padding:10px;
}
.comprobante-img{
  max-width:100%;
  height:auto;
  border-radius:8px;
  cursor:zoom-in;
  /* La transición hace legible el cambio de tamaño en vez de un salto seco. */
  transition:transform .2s ease;
  transform-origin:top center;
}
.comprobante-marco.zoom{ align-items:flex-start; }
.comprobante-marco.zoom .comprobante-img{
  transform:scale(1.9);
  cursor:zoom-out;
}
.comprobante-pdf{ width:100%; height:min(64vh, 560px); border:0; border-radius:8px; }

.comprobante-estado{
  color:var(--ink-soft);
  font-size:13px;
  text-align:center;
  padding:24px 16px;
  line-height:1.5;
}

/* Quien pidió menos movimiento no recibe el zoom animado. */
@media (prefers-reduced-motion: reduce){
  .comprobante-img{ transition:none; }
}

/* Nocturno: el marco no puede quedar más claro que la ventana que lo contiene. */
[data-theme="dark"] .comprobante-marco{
  background:rgba(8,7,14,.55);
  border-color:rgba(255,255,255,.10);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ECO DEL MONTO ESCRITO  (capa nueva)
   Muestra, al lado del campo, cuánto se va a guardar REALMENTE. Nace de un caso
   real: se escribió "35.000" y quedó registrado $35 sin que nadie lo notara
   hasta revisar la ficha. Ver el monto formateado mientras se escribe convierte
   un error silencioso en uno evidente.
   ═══════════════════════════════════════════════════════════════════════════ */
.monto-eco{
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-soft);
  white-space:nowrap;
  padding:2px 6px;
  border-radius:6px;
  background:var(--surface-2);
}
[data-theme="dark"] .monto-eco{
  background:rgba(255,255,255,.07);
  color:#cfc9e4;
}

/* Aviso de ficha duplicada (capa nueva). Aparece dentro del formulario de paciente
   nuevo cuando el RUT o el teléfono ya existen: la decisión queda en manos de quien
   atiende, pero con la consecuencia dicha de frente. */
.aviso-duplicado{
  margin-top:14px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #e0b400;
  background:rgba(224,180,0,.10);
  font-size:13.5px;
  line-height:1.5;
}
[data-theme="dark"] .aviso-duplicado{
  border-color:rgba(255,205,60,.45);
  background:rgba(255,205,60,.10);
}

/* ============================================================
   CAPA FINAL · BOTONES DEL SISTEMA (rediseño Apple) + SEMÁFORO DEL PANEL DE VIDEO
   Va al final a propósito: reconcilia las tres capas anteriores de .btn, que se
   pisaban entre sí y dejaban un botón "duro" — brillo que barría en cada hover,
   levantada lenta de 420 ms, halo morado en TODOS los botones y una compresión al
   click que hundía y encogía a la vez.
   ============================================================ */

/* --- 1 · El botón deja de ser duro -------------------------------------------
   Reposo plano y sólido, sin sombra dramática. La materialidad viene del color y
   del radio, no de una sombra de 18 px. */
.btn{
  border-radius:11px;
  letter-spacing:-.006em;
  box-shadow:0 1px 2px rgba(20,17,27,.10), inset 0 1px 0 rgba(255,255,255,.08);
  transition:background .18s ease, color .18s ease, border-color .18s ease,
             box-shadow .22s ease, transform .16s var(--signature-spring), filter .18s ease;
}
/* El barrido de brillo se retira: llamaba la atención sobre cada botón, incluidos
   los que solo acompañan. Un botón no debería brillar por existir. */
.btn::after{ content:none; }
/* Hover: responde en ~180 ms y no se despega de la página. Antes subía 1,5 px en
   420 ms, que se lee como goma que llega tarde al dedo. */
.btn:hover{
  transform:none;
  filter:brightness(1.07);
  box-shadow:0 2px 6px rgba(20,17,27,.12), inset 0 1px 0 rgba(255,255,255,.10);
}
/* Click: un solo gesto (encoger), inmediato. Sin hundir + encoger a la vez. */
.btn:active{
  transform:scale(.98);
  transition-duration:.08s;
  filter:brightness(.96);
  box-shadow:0 1px 2px rgba(20,17,27,.14);
}
.btn:focus-visible{ outline:2px solid var(--purple); outline-offset:2px; }
/* El halo morado se reserva para el botón principal: si lo tienen todos, ninguno
   destaca y se pierde la jerarquía. */
.btn.gold:hover{ box-shadow:0 6px 18px rgba(124,77,255,.24), inset 0 1px 0 rgba(255,255,255,.14); }
/* Secundarios de vidrio, no de tinta: acompañan sin competir. */
.btn.ghost{
  background:rgba(255,255,255,.55); border:1px solid var(--line);
  box-shadow:none;
}
.btn.ghost:hover{ background:var(--surface-2); filter:none; box-shadow:0 2px 6px rgba(20,17,27,.08); }
.btn.vbtn{ box-shadow:none; }
.btn.vbtn:hover{ filter:none; box-shadow:0 2px 8px rgba(0,0,0,.28); }
/* Tipografía por tamaño (§15): el texto chico no necesita el mismo apretado que el
   grande. Antes todos compartían -.012em y el chico se veía comprimido. */
.btn.sm{ letter-spacing:0; min-height:32px; padding:6px 13px; border-radius:9px; }
.btn.lg,.btn.xl{ letter-spacing:-.014em; }
[data-theme="dark"] .btn.ghost{ background:rgba(255,255,255,.05); }

/* --- 2 · Semáforo del panel de videoconsulta ---------------------------------
   Los tres controles del sistema, en la esquina de siempre y en el orden de
   siempre: cerrar, reducir, pantalla completa. Los glifos aparecen al pasar por
   encima del grupo (como en macOS), no antes: en reposo son tres puntos limpios. */
.vc-luces{ display:flex; align-items:center; gap:8px; }
.vc-luz{
  width:13px; height:13px; min-width:13px; padding:0; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:.5px solid rgba(0,0,0,.22); cursor:pointer; position:relative;
  font-size:9px; font-weight:700; line-height:1; color:transparent;
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.32);
  transition:filter .16s ease, color .14s ease, transform .16s var(--signature-spring);
}
/* Blanco de click cómodo aunque el punto sea de 13 px (§ tamaño mínimo táctil). */
.vc-luz::after{ content:''; position:absolute; inset:-8px; border-radius:50%; }
.vc-luz svg{ width:8px; height:8px; stroke-width:2.4; }
.vc-luces:hover .vc-luz{ color:var(--vc-glifo); }
.vc-luz:active{ transform:scale(.88); filter:brightness(.9); }
.vc-luz:focus-visible{ outline:2px solid rgba(255,255,255,.7); outline-offset:2px; color:var(--vc-glifo); }
.vc-luz.cerrar{ --vc-glifo:#5e0d08; background:#ff5f57; }
.vc-luz.reducir{ --vc-glifo:#7a5200; background:#febc2e; }
.vc-luz.pantalla{ --vc-glifo:#0b4d13; background:#28c840; }
/* Dedo grueso: el punto crece pero mantiene su sitio. */
@media(pointer:coarse){ .vc-luz{ width:20px; height:20px; min-width:20px; font-size:12px; } .vc-luz svg{ width:11px; height:11px; } }

/* --- 3 · Accesibilidad (§14) -------------------------------------------------
   Si el sistema pide menos movimiento, el botón responde igual pero sin animar. */
@media (prefers-reduced-motion: reduce){
  .btn,.vc-luz{ transition:background .12s linear, color .12s linear; }
  .btn:active,.vc-luz:active{ transform:none; }
}
@media (prefers-contrast: more){
  .btn.ghost{ background:var(--surface); border-color:var(--ink); }
  .vc-luz{ border-color:rgba(0,0,0,.55); }
}

/* ============================================================================
   ZAIRI NOTES (v521) — la consulta grabada, mientras se escribe
   ----------------------------------------------------------------------------
   Dos ideas mandan sobre el resto del diseño:
   1) El médico está mirando al paciente, no a la pantalla. Lo único que tiene que
      poder leer de reojo es "¿está grabando o no?" — por eso el punto rojo late y
      el cronómetro es lo segundo más grande del panel.
   2) La transcripción se lee como una conversación, no como un log: cada turno
      lleva quién habló a la izquierda y el texto al lado, y el nombre es un botón
      porque la máquina se equivoca y corregirla tiene que costar un clic.
   ========================================================================== */
.zn-modal{ max-width:820px; width:min(820px,94vw); display:flex; flex-direction:column; max-height:88vh; }
.zn-modal h2{ margin-bottom:14px; }

/* El pulso: rojo sólo aquí, porque aquí sí significa "se está grabando". */
.zn-vivo{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
  letter-spacing:.01em; color:#c0392b; background:rgba(192,57,43,.09);
  border:1px solid rgba(192,57,43,.2); border-radius:999px; padding:4px 11px 4px 9px; }
.zn-vivo i{ width:8px; height:8px; border-radius:50%; background:#e5484d; display:block;
  animation:zn-pulso 1.4s ease-in-out infinite; }
@keyframes zn-pulso{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.78); } }
.zn-pausado{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
  color:var(--ink-soft); background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; padding:4px 11px; }

.zn-aviso{ background:var(--purple-soft); border:1px solid var(--line); border-radius:10px;
  padding:11px 13px; font-size:13px; line-height:1.5; color:var(--ink); margin-bottom:12px;
  flex:0 0 auto; }

/* El aviso de "usa parlantes" no puede parecer una nota al pie: si no se lee, la
   consulta se graba a medias. Se separa del resto con ámbar —advertencia, no error:
   nada se ha roto todavía y el médico aún está a tiempo de cambiar de audio. */
.zn-aviso-ojo{ background:rgba(214,158,46,.13); border-color:rgba(214,158,46,.45); }
.zn-aviso-ojo b{ color:#b4791f; }
body.dark .zn-aviso-ojo{ background:rgba(214,158,46,.16); border-color:rgba(214,158,46,.4); }
body.dark .zn-aviso-ojo b{ color:#e0ab4d; }

/* --- Pantalla de permiso ---------------------------------------------------
   Es la primera pantalla a propósito: no se abre grabando, se abre preguntando. */
/* El permiso es el cuerpo que se desplaza. El panel es una columna flex con techo
   (92vh); la cabeza y los pasos no ceden, así que si esto no scrollea por dentro,
   en pantallas bajas el último botón —«No autoriza»— y la línea de abajo se salen
   del borde redondeado en vez de quedarse dentro. */
.zn-permiso{ flex:1 1 auto; min-height:0; overflow-y:auto; }
.zn-permiso h3{ margin:0 0 8px; font-size:16px; }
.zn-permiso p{ margin:0 0 12px; font-size:13.5px; line-height:1.6; color:var(--ink-soft); }
.zn-permiso blockquote{ margin:0 0 18px; padding:13px 16px; background:var(--surface-2);
  border-left:3px solid var(--purple); border-radius:0 10px 10px 0;
  font-size:14px; line-height:1.6; color:var(--ink); font-style:italic; }
/* La decisión —autorizó, tiene firmado, no autoriza— nunca se va de la vista:
   queda pegada abajo del permiso aunque el texto de arriba se desplace. */
.zn-permiso-btns{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:0;
  position:sticky; bottom:20px; background:var(--surface); padding:9px 0 6px; }
.zn-permiso small{ color:var(--ink-soft); font-size:12px; display:block;
  position:sticky; bottom:0; background:var(--surface); padding-bottom:2px; }

/* Mientras se pide el permiso hay que leer una frase y elegir entre tres botones:
   eso es lo que manda. El orbe grande y el paso a paso completo son presentación,
   y en un notebook (700px de alto) se comen 442 de los 644 del panel — por eso el
   último botón quedaba fuera. Aquí se achican solo en esta pantalla; apenas empieza
   la grabación vuelven a su tamaño. */
/* !important porque el tamaño del orbe llega como estilo en línea desde React
   (size={132}); acá no se cambia el orbe, solo cuánto ocupa en esta pantalla. */
.zn-panel:has(.zn-permiso) .zn-cabeza .orb3d-wrap{ width:84px !important; height:84px !important; }
.zn-panel:has(.zn-permiso) .zn-cabeza .orb3d-wrap > *{ width:100% !important; height:100% !important; }
.zn-panel:has(.zn-permiso) .zn-cabeza h2{ font-size:20px; }
.zn-panel:has(.zn-permiso) .zn-marcas{ margin-top:8px; }
/* Los cinco pasos siguen a la vista, pero en fila: se lee dónde vas sin gastar
   media pantalla. El nombre completo queda solo en el paso en el que estás. */
.zn-panel:has(.zn-permiso) .zn-pasos{ margin-top:12px; padding-top:11px;
  flex-direction:row; align-items:center; flex-wrap:wrap; gap:5px; overflow:hidden; }
.zn-panel:has(.zn-permiso) .zn-paso{ padding:3px 7px; }
.zn-panel:has(.zn-permiso) .zn-paso em{ display:none; }
.zn-panel:has(.zn-permiso) .zn-paso:not(.actual) .zn-paso-txt{ display:none; }

/* --- Barra de mando -------------------------------------------------------- */
.zn-barra{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:12px; }
.zn-flex{ flex:1; }

/* --- La conversación ------------------------------------------------------- */
.zn-conversacion{ flex:1; overflow-y:auto; min-height:180px; max-height:46vh;
  display:flex; flex-direction:column; gap:10px; padding-right:4px; }
.zn-vacio{ color:var(--ink-soft); font-size:13.5px; padding:34px 0; text-align:center; }

.zn-turno{ position:relative; display:grid; grid-template-columns:132px 1fr; gap:12px;
  align-items:start; padding:9px 11px; border-radius:11px; background:var(--surface-2);
  border:1px solid transparent; }
.zn-turno.medico{ background:var(--purple-soft); border-color:rgba(124,77,255,.16); }
.zn-turno.paciente{ background:var(--surface-2); }
.zn-turno.otro{ background:transparent; border-color:var(--line); border-style:dashed; }
.zn-turno p{ margin:0; font-size:14px; line-height:1.6; color:var(--ink); }

.zn-quien{ display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  background:none; border:0; padding:2px 4px; margin:-2px -4px; border-radius:7px;
  font:inherit; font-size:12.5px; font-weight:600; color:var(--ink); cursor:pointer;
  text-align:left; transition:background .12s linear; }
.zn-quien:hover{ background:rgba(124,77,255,.12); }
.zn-quien:focus-visible{ outline:2px solid var(--purple); outline-offset:1px; }
.zn-t{ font-size:11px; font-weight:500; color:var(--ink-soft); font-variant-numeric:tabular-nums; }

.zn-menu{ position:absolute; z-index:5; top:34px; left:8px; min-width:214px;
  background:var(--surface); border:1px solid var(--line); border-radius:11px;
  box-shadow:var(--shadow); padding:5px; display:flex; flex-direction:column; }
.zn-menu button{ background:none; border:0; text-align:left; font:inherit; font-size:13px;
  color:var(--ink); padding:8px 10px; border-radius:7px; cursor:pointer; }
.zn-menu button:hover{ background:var(--surface-2); }
.zn-menu hr{ border:0; border-top:1px solid var(--line); margin:4px 6px; }

@media (max-width:640px){
  .zn-turno{ grid-template-columns:1fr; gap:4px; }
  .zn-quien{ flex-direction:row; align-items:baseline; gap:8px; }
}
@media (prefers-reduced-motion: reduce){ .zn-vivo i{ animation:none; opacity:.9; } }

/* --- El borrador dentro de la ficha ----------------------------------------
   Marca morada = "esto lo escribió la máquina y nadie lo ha leído". Es una pista,
   no una alarma: no usa rojo porque el texto no está mal, solo está sin revisar. */
.zn-borrador{ background:var(--purple-soft); border:1px solid rgba(124,77,255,.28);
  border-radius:12px; padding:12px 14px; margin-bottom:12px; }
.zn-borrador b{ font-size:13.5px; display:block; color:var(--ink); }
.zn-borrador p{ margin:6px 0 0; font-size:12.5px; line-height:1.55; color:var(--ink-soft); }
.zn-faltantes{ margin-top:10px; padding-top:9px; border-top:1px solid rgba(124,77,255,.22); }
.zn-faltantes ul{ margin:5px 0 0; padding-left:18px; }
.zn-faltantes li{ font-size:12.5px; line-height:1.55; color:var(--ink); margin-bottom:3px; }

.ia-sin-revisar{ border-color:rgba(124,77,255,.55) !important;
  box-shadow:inset 3px 0 0 var(--purple); background:rgba(124,77,255,.045); }
.ia-sin-revisar:focus{ box-shadow:inset 3px 0 0 var(--purple), 0 0 0 3px rgba(124,77,255,.16); }

/* ============================================================================
   ZAIRI NOTES (v522) — el panel con la perla adelante
   ----------------------------------------------------------------------------
   El panel se rehízo alrededor de una sola decisión: la perla manda. No está de
   adorno arriba a la izquierda, está al centro y grande, porque es lo único que
   el médico va a mirar mientras habla con el paciente — y como solo se mueve
   cuando hay voz, verla quieta significa "no te estoy oyendo", que es justo lo
   que hay que poder notar sin dejar de atender.

   Debajo, los cinco pasos SIEMPRE completos, incluso los que faltan. Una barra
   de progreso diría "vas en el 40%"; esta lista dice qué se hizo, qué se está
   haciendo y qué falta, con nombre. Un sistema que graba una consulta y escribe
   una ficha no puede pedirle al médico que firme sin saber qué ocurrió en medio.
   ========================================================================== */
.zn-bg{ align-items:flex-start; }
.zn-panel{ position:relative; width:min(680px,94vw); margin:auto;
  max-height:92vh; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-radius:26px;
  padding:26px 26px 20px; box-shadow:0 30px 90px rgba(0,0,0,.42); }
/* El punto rojo de cerrar vive donde vive en todas las demás ventanas de la app.
   Sin esto flota arriba a la izquierda, encima del texto, porque .zn-panel no es .modal. */
.zn-panel .close-x{ position:absolute; top:16px; right:16px; float:none; }

/* --- La cabecera: perla, nombre, y UNA frase de qué está pasando ----------- */
.zn-cabeza{ text-align:center; flex:0 0 auto; }
.zn-cabeza .orb3d-wrap{ margin:0 auto 2px; }
.zn-cabeza h2{ margin:0; font-size:21px; font-weight:600; letter-spacing:-.01em; }
.zn-estado{ margin:6px auto 0; max-width:44ch; font-size:13.5px; line-height:1.5;
  color:var(--ink-soft); min-height:20px; }
.zn-estado.mal{ color:#c0392b; }
.zn-marcas{ display:flex; justify-content:center; flex-wrap:wrap; gap:7px; margin-top:11px; }

/* --- El paso a paso -------------------------------------------------------- */
.zn-pasos{ list-style:none; margin:16px 0 0; padding:14px 0 0; flex:0 1 auto; min-height:0;
  border-top:1px solid var(--line); display:flex; flex-direction:column; gap:2px; }
.zn-paso{ display:grid; grid-template-columns:24px 1fr; gap:11px; align-items:start;
  padding:6px 8px; border-radius:10px; }
.zn-num{ width:22px; height:22px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; font-size:11.5px; font-weight:700;
  border:1px solid var(--line); color:var(--ink-soft); background:var(--surface-2); }
.zn-paso-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.zn-paso-txt b{ font-size:13.5px; font-weight:600; color:var(--ink-soft); }
.zn-paso-txt em{ font-style:normal; font-size:12.5px; line-height:1.5; color:var(--ink-soft); }
/* Hecho: se apaga, pero no desaparece — sigue siendo parte del relato. */
.zn-paso.hecho .zn-num{ background:var(--purple); border-color:var(--purple); color:#fff; }
.zn-paso.hecho .zn-paso-txt b{ color:var(--ink-soft); opacity:.75; }
/* El actual es el único que se explica: el resto ya se leyó o todavía no toca. */
.zn-paso.actual{ background:var(--purple-soft); }
.zn-paso.actual .zn-num{ background:var(--purple); border-color:var(--purple); color:#fff;
  box-shadow:0 0 0 4px rgba(124,77,255,.16); }
.zn-paso.actual .zn-paso-txt b{ color:var(--ink); }
.zn-paso.pendiente{ opacity:.5; }
/* En la portada del módulo los cinco pasos se leen enteros: ahí no hay "actual",
   se están mostrando como promesa de lo que va a pasar. */
.zn-pasos-quieto{ border-top:0; padding-top:0; text-align:left; }
.zn-pasos-quieto .zn-paso{ opacity:.85; }

/* --- El chat --------------------------------------------------------------- */
.zn-chat{ flex:1 1 auto; overflow-y:auto; min-height:150px; max-height:40vh;
  display:flex; flex-direction:column; gap:12px; margin-top:14px; padding:14px 4px 4px;
  border-top:1px solid var(--line); scroll-behavior:smooth; }
.zn-chat .zn-turno{ display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  background:none; border:0; padding:0; max-width:82%; }
/* El médico a la derecha, el paciente a la izquierda: la misma convención de
   cualquier mensajería, para no tener que aprender nada nuevo. */
.zn-chat .zn-turno.medico{ align-self:flex-end; align-items:flex-end; }
.zn-burbuja{ margin:0; padding:10px 14px; border-radius:18px; font-size:14px;
  line-height:1.55; color:var(--ink); background:var(--surface-2);
  border:1px solid var(--line); border-bottom-left-radius:6px; }
.zn-chat .zn-turno.medico .zn-burbuja{ background:var(--purple-soft);
  border-color:rgba(124,77,255,.2); border-bottom-left-radius:18px; border-bottom-right-radius:6px; }
.zn-chat .zn-turno.otro .zn-burbuja{ border-style:dashed; }
.zn-chat .zn-quien{ flex-direction:row; align-items:baseline; gap:7px; font-size:11.5px;
  font-weight:600; color:var(--ink-soft); }
.zn-pie{ display:block; margin-top:9px; font-size:12px; color:var(--ink-soft); text-align:center; }
.zn-panel .zn-barra{ border-bottom:0; border-top:1px solid var(--line);
  padding:13px 0 0; margin:0; flex:0 0 auto; }

@media (max-width:640px){
  .zn-panel{ width:100vw; max-height:100vh; border-radius:0; padding:18px 16px; }
  .zn-chat .zn-turno{ max-width:94%; }
}

/* --- La tarjeta de la ficha ------------------------------------------------
   Va arriba de todo y con la perla al lado, porque compite con la costumbre de
   empezar a teclear: si aparece después del primer campo, ya nadie la ve. */
.zn-tarjeta{ display:flex; align-items:center; gap:14px; cursor:pointer;
  background:linear-gradient(135deg, var(--purple-soft), transparent 70%);
  border:1px solid rgba(124,77,255,.3); border-radius:16px;
  padding:12px 16px; margin-bottom:14px; transition:border-color .15s, transform .15s; }
.zn-tarjeta:hover{ border-color:rgba(124,77,255,.55); transform:translateY(-1px); }
.zn-tarjeta:focus-visible{ outline:2px solid var(--purple); outline-offset:2px; }
.zn-tarjeta-orbe{ flex:0 0 auto; width:72px; height:72px; }
.zn-tarjeta-orbe .orb3d-wrap{ margin:0 !important; }
.zn-tarjeta-txt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.zn-tarjeta-txt b{ font-size:14.5px; color:var(--ink); }
.zn-tarjeta-txt span{ font-size:12.5px; line-height:1.5; color:var(--ink-soft); }

/* --- Portada del módulo ---------------------------------------------------- */
.zn-portada{ text-align:center; max-width:620px; margin:0 auto; }
.zn-portada .orb3d-wrap{ margin:0 auto 6px !important; }
.zn-portada h2{ margin:0 0 8px; font-size:22px; font-weight:600; letter-spacing:-.01em; }
.zn-portada > p{ margin:0 auto 18px; max-width:52ch; font-size:14px; line-height:1.65; color:var(--ink-soft); }
.zn-portada .zn-pasos{ max-width:460px; margin:0 auto 20px; }
.zn-portada-btns{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; }
.zn-ok{ margin:14px 0 0; font-size:13px; color:var(--green,#1f8a5b); }

/* --- Lo que la IA PROPUSO (ámbar), distinto de lo que se dijo (morado) ------
   Dos marcas, no una. El morado dice "esto salió de la consulta, léelo"; el
   ámbar dice "esto no lo dijo nadie". Con un solo color, una suposición y una
   frase del paciente se verían igual, y ahí es donde se firma lo que no ocurrió. */
.ia-propuesta{ border-color:rgba(214,158,46,.6) !important;
  box-shadow:inset 3px 0 0 #d69e2e; background:rgba(214,158,46,.06); }
.ia-propuesta:focus{ box-shadow:inset 3px 0 0 #d69e2e, 0 0 0 3px rgba(214,158,46,.18); }
.ia-porque{ display:block; margin:-6px 0 10px; font-size:11.5px; line-height:1.5; color:#a67514; }
.zn-ojo{ margin-top:9px !important; padding-top:9px; border-top:1px solid rgba(124,77,255,.22); }
.zn-ojo b{ display:inline !important; color:#a67514 !important; }

/* --- El resumen que se queda en la ficha ---------------------------------- */
.zn-resumen{ margin-bottom:14px; }
.zn-resumen label{ display:block; margin-bottom:5px; }
.zn-resumen textarea{ width:100%; }
.zn-resumen small{ display:block; margin-top:4px; font-size:11.5px; color:var(--ink-soft); }

/* ============================================================================
   v524 · NOCTURNO DE TINTA
   El modo oscuro era morado oscuro: el fondo, las superficies, los bordes y la
   luz que sigue al cursor tiraban todos al violeta. Con todo morado, el morado
   dejaba de significar algo — Zairi se confundía con el mueble.
   Acá el lienzo pasa a negro tinta (#08080B: negro con un pelo de azul para que
   no se vea plano) y las superficies se vuelven neutras. La luz del cursor deja
   de ser una gota morada y pasa a ser un halo blanco frío, grande y muy tenue,
   como el brillo que corre por un vidrio.
   El morado queda reservado para lo que ES Zairi: el orbe, los botones de
   acción, los acentos. Capa final: no reescribe nada anterior, solo lo corrige.
   ============================================================================ */
[data-theme="dark"]{
  --lq-canvas:#08080B;
  --bg:        #08080B;
  --surface:   #101015;
  --surface-2: #17171E;
  --line:      #26262F;
  --ink:       #F2F3F7;
  --ink-soft:  #9C9EAA;
  --black:     #030304;
  --black-2:   #0B0B0F;
  /* El único que sigue morado: es el fondo de lo que Zairi escribe o propone. */
  --purple-soft:#1B1533;
  --shadow:0 20px 56px rgba(0,0,0,.62),0 2px 10px rgba(0,0,0,.34);
  --signature-glass:rgba(16,16,21,.80);
  --signature-hairline:rgba(255,255,255,.07);

  /* El agua deja de ser violeta: acero frío, casi sin color, y una sola nota
     morada muy baja para que el sistema no quede muerto. */
  --lq-blob-a:rgba(150,168,205,.065);
  --lq-blob-b:rgba(120,150,180,.042);
  --lq-blob-c:rgba(158,182,220,.050);
  --lq-blob-d:rgba(var(--lq-purple),.070);
  --lq-sheen:rgba(255,255,255,.032);
  /* La luz que sigue al mouse: blanco frío, no morado. */
  --lq-drop:rgba(200,215,255,.050);
  --lq-drop-2:rgba(176,198,236,.032);
  --lq-sat:1;
}
/* El velo con parallax también venía teñido de morado desde su regla base. */
[data-theme="dark"] body::after{
  background:
    radial-gradient(52% 44% at 50% -6%, rgba(168,186,220,.045), transparent 74%),
    conic-gradient(from 210deg at 68% 40%, transparent 0 62%, var(--lq-sheen) 74%, transparent 86%);
}
/* Y los dos halos fijos del body, que sumaban morado y menta sobre el lienzo. */
[data-theme="dark"] body{
  background:
    radial-gradient(900px 620px at 78% -12%,rgba(150,168,205,.030),transparent 68%),
    radial-gradient(720px 520px at -8% 106%,rgba(120,150,180,.022),transparent 70%),
    var(--bg);
}
/* La gota se agranda y se difumina más: deja de leerse como una mancha que
   persigue al cursor y pasa a ser un reflejo sobre el vidrio. */
[data-theme="dark"] #root::before,
html[data-theme="dark"] #root::before{
  width:1040px; height:1040px; margin:-520px 0 0 -520px;
  filter:blur(96px) saturate(1);
}
[data-theme="dark"] html.lq-pointer #root::before,
html[data-theme="dark"].lq-pointer #root::before{ opacity:.85; }
@keyframes lq-drop-breathe-frio{
  0%,100%{ filter:blur(96px) saturate(1); }
  50%    { filter:blur(112px) saturate(1.05); }
}
html[data-theme="dark"].lq-pointer #root::before{
  animation:lq-drop-breathe-frio 5.5s ease-in-out infinite;
}
/* Quien pidió menos movimiento no recibe el latido de la luz. */
@media (prefers-reduced-motion: reduce){
  html[data-theme="dark"].lq-pointer #root::before{ animation:none; }
}

/* Las tarjetas traían su propio morado cocido a mano (#1a1822 → #15131c más un
   halo violeta en la esquina). Como las tarjetas cubren casi toda la pantalla,
   eran ellas —más que el fondo— las que hacían ver el sistema morado. Acá pasan
   a grises de tinta y el halo de la esquina se vuelve luz fría, apenas un brillo
   que marca de dónde viene la luz. */
[data-theme="dark"] .card,
[data-theme="dark"] .stat{
  background:linear-gradient(155deg,#131318,#0F0F14);
  background-image:
    linear-gradient(155deg,#131318,#0F0F14),
    radial-gradient(120% 90% at 110% -10%, rgba(190,208,240,.030), transparent 62%);
  border-color:var(--line);
  box-shadow:0 18px 48px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.030);
}
/* La barra lateral es vidrio: el vidrio no tiene color propio, refleja. */
[data-theme="dark"] .sidebar{
  background-image:
    linear-gradient(rgba(16,16,21,.42), rgba(8,8,11,.30)),
    radial-gradient(130% 40% at 0% 0%, rgba(190,208,240,.030), transparent 70%);
}
@media (max-width:900px){
  [data-theme="dark"] .sidebar{ background:#0E0E13; }
}
/* Rincones sueltos que seguían tirando a violeta. */
[data-theme="dark"] .wa-chat{ background:#0D0D12; }
[data-theme="dark"] .zx-aviso{ background:#15131F; }

/* ============================================================================
   v525 · ZAIRI NOTES: LA CONVERSACIÓN OCUPA EL PANEL, Y EL PANEL ES DE ZAIRI

   Dos cosas del panel de notas quedaban a medias:

   1) La conversación vivía en una ventanita de 40vh mientras la cabecera, los
      cinco pasos y el aviso se llevaban el resto. En una consulta de veinte
      minutos eso significa leer la conversación por una rendija y andar
      scrolleando para revisar lo que se dijo antes de firmar. Acá el panel se
      alarga y, en cuanto empieza la conversación, la cabecera se compacta: la
      perla se achica, los pasos pasan a una fila. Ni la perla ni los pasos
      desaparecen —siguen diciendo dónde vas—, pero dejan de ser el protagonista.
      El protagonista pasa a ser lo que se está diciendo.

   2) El panel no se veía de Zairi. Las demás tarjetas de Zairi se presentan con
      una luz que recorre el borde una vez y se apaga. Este panel usa la MISMA
      receta —el mismo conic-gradient, el mismo recorrido— para que se reconozca
      sin leer nada. Después queda un latido lentísimo (14 s, muy tenue) mientras
      hay conversación en pantalla: la señal de que Zairi sigue escuchando.

   Todo el movimiento es transform/opacity, por debajo de 300 ms en lo que es
   interfaz, y se apaga entero con prefers-reduced-motion.
   ============================================================================ */

/* --- 1 · El panel se alarga ------------------------------------------------ */
.zn-panel{
  width:min(780px,95vw);
  max-height:94vh;
}
/* El chat se come todo el alto que sobra en vez de quedarse en 40vh. */
.zn-panel .zn-chat{
  flex:1 1 auto;
  min-height:200px;
  max-height:none;
}
/* Mientras hay conversación, la cabecera cede el espacio. Mismo criterio que en
   la pantalla de permiso: lo que manda es lo que se está leyendo ahora.
   !important porque el tamaño del orbe llega como estilo en línea desde React. */
.zn-panel:has(.zn-chat) .zn-cabeza .orb3d-wrap{ width:76px !important; height:76px !important; }
.zn-panel:has(.zn-chat) .zn-cabeza .orb3d-wrap > *{ width:100% !important; height:100% !important; }
.zn-panel:has(.zn-chat) .zn-cabeza h2{ font-size:18px; }
.zn-panel:has(.zn-chat) .zn-marcas{ margin-top:8px; }
/* flex:0 0 auto es la parte que importa: en una fila los pasos ya ocupan poco, y
   si además se dejan encoger el chat se los come y el nombre del paso actual
   queda cortado por la mitad. */
.zn-panel:has(.zn-chat) .zn-pasos{
  margin-top:11px; padding-top:10px; flex:0 0 auto;
  flex-direction:row; align-items:center; flex-wrap:wrap; gap:5px; overflow:hidden;
}
.zn-panel:has(.zn-chat) .zn-paso{ padding:3px 7px; }
.zn-panel:has(.zn-chat) .zn-paso em{ display:none; }
.zn-panel:has(.zn-chat) .zn-paso:not(.actual) .zn-paso-txt{ display:none; }

/* --- 2 · El borde de Zairi ------------------------------------------------- */
/* El contenido sube por encima del barrido de luz; si no, la luz lo lava. */
.zn-panel > *{ position:relative; z-index:2; }
.zn-panel{ isolation:isolate; }
/* La presentación: la luz recorre el perímetro una vez, igual que en las
   tarjetas de oportunidades. Reusa @property --zairi-card-angle y los mismos
   keyframes, para que sea literalmente el mismo gesto y no un primo lejano. */
.zn-panel::before{
  content:''; position:absolute; inset:0; z-index:4; pointer-events:none;
  border-radius:inherit; padding:2px;
  background:conic-gradient(from var(--zairi-card-angle), transparent 0deg, transparent 246deg, #6840ff 278deg, #d9cfff 306deg, #63e3d1 334deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:zairi-border-once 2.9s cubic-bezier(.18,.78,.28,1) 1 forwards;
}
/* Y el barrido de luz que atraviesa la tarjeta al abrirse. */
.zn-panel::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(112deg,transparent 30%,rgba(255,255,255,.30) 46%,rgba(191,168,255,.16) 54%,transparent 70%);
  background-size:250% 100%; background-position:120% 0; opacity:0;
  animation:zairi-card-light-once 2.45s cubic-bezier(.2,.72,.3,1) .12s 1 forwards;
}
/* El borde recorre UNA vez y se apaga, igual que en el resto del sistema. La
   tentación era dejarlo girando mientras se graba para decir "sigue vivo", pero
   un borde que nunca para se convierte en ruido en una consulta de veinte
   minutos —y quien tiene que estar mirando al paciente termina mirando la
   pantalla. Ese trabajo ya lo hacen el orbe, que late, y la línea de estado, que
   dice en palabras qué está pasando. */

/* --- 3 · Las burbujas entran ---------------------------------------------- */
/* Cada frase transcrita aparece deslizándose desde su lado —el paciente por la
   izquierda, el médico por la derecha—, así se ve DE QUIÉN es antes de leerla.
   200 ms: lo justo para que el ojo la siga sin que el chat se sienta lento. */
@keyframes zn-turno-entra-izq{
  from{ opacity:0; transform:translate3d(-10px,6px,0); }
  to  { opacity:1; transform:none; }
}
@keyframes zn-turno-entra-der{
  from{ opacity:0; transform:translate3d(10px,6px,0); }
  to  { opacity:1; transform:none; }
}
.zn-chat .zn-turno{ animation:zn-turno-entra-izq .2s cubic-bezier(.23,1,.32,1) both; }
.zn-chat .zn-turno.medico{ animation-name:zn-turno-entra-der; }

/* "Escuchando…" respira: un cartel quieto durante dos minutos de silencio deja
   la duda de si el micrófono se cayó. */
@keyframes zn-vacio-respira{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
.zn-chat .zn-vacio{ animation:zn-vacio-respira 2.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  .zn-panel::before,.zn-panel::after{ display:none; }
  .zn-chat .zn-turno{ animation:none; }
  .zn-chat .zn-vacio{ animation:none; opacity:1; }
}
@media (max-width:640px){
  .zn-panel{ width:100vw; max-height:100vh; }
}

/* ============================================================
   v527 · DESDE ESTA ATENCIÓN
   Bloque de acciones dentro de la ficha clínica. La regla de diseño acá es que
   NO compita con el contenido: la ficha es para escribir, esto es para emitir.
   Por eso va con fondo levemente hundido y no con una tarjeta elevada — se lee
   como "una repisa dentro de la ficha", no como otra sección más que llenar.
   ============================================================ */
.fx-emitir{
  margin:16px 0 4px; padding:13px 14px 12px;
  border:1px solid var(--line); border-radius:12px;
  background:linear-gradient(180deg, rgba(124,77,255,.045), rgba(124,77,255,.015));
}
[data-theme="dark"] .fx-emitir{
  background:linear-gradient(180deg, rgba(150,168,205,.045), rgba(150,168,205,.012));
}
.fx-emitir-cab{ display:flex; flex-direction:column; gap:2px; margin-bottom:10px; }
.fx-emitir-cab b{ font-size:13.5px; letter-spacing:.01em; }
.fx-emitir-cab span{ font-size:12px; color:var(--ink-soft); line-height:1.45; }
.fx-emitir-btns{ display:flex; flex-wrap:wrap; gap:7px; }
/* Los botones se levantan apenas al pasar por encima. 1px es a propósito: la mano
   del médico está en el teclado escribiendo la ficha, esto tiene que responder
   sin pedir atención. */
.fx-emitir-btns .btn{ transition:transform .16s var(--lq-ease), box-shadow .16s var(--lq-ease); }
.fx-emitir-btns .btn:hover:not(:disabled){ transform:translateY(-1px); }
.fx-emitir-btns .btn:disabled{ opacity:.55; cursor:default; }

.fx-emitir-foto{ display:flex; gap:7px; margin-top:8px; }
.fx-emitir-foto select{ width:120px; flex:0 0 auto; }
.fx-emitir-foto input{ flex:1 1 auto; min-width:0; }
.fx-emitir-foto select,.fx-emitir-foto input{ font-size:12.5px; padding:6px 8px; margin:0; }

.fx-emitidos{ list-style:none; margin:11px 0 0; padding:10px 0 0; border-top:1px solid var(--line); }
.fx-emitidos li{
  display:flex; align-items:center; gap:8px;
  padding:4px 0; font-size:12.5px; line-height:1.4;
}
.fx-emitido-txt{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fx-emitido-fecha{ flex:0 0 auto; color:var(--ink-soft); font-size:11.5px; }
.fx-tag{
  flex:0 0 auto; font-size:10.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:2px 7px; border-radius:999px;
  background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line);
}
.fx-tag-examen{ color:#1f6fb2; border-color:rgba(31,111,178,.35); background:rgba(31,111,178,.10); }
.fx-tag-receta{ color:#8a5a12; border-color:rgba(190,130,30,.35); background:rgba(190,130,30,.10); }
.fx-tag-foto  { color:#1f8a5b; border-color:rgba(31,138,91,.35);  background:rgba(31,138,91,.10); }
.fx-tag-plan  { color:#6840ff; border-color:rgba(104,64,255,.35); background:rgba(104,64,255,.10); }

/* Lo recién emitido entra con un destello corto y se apaga. Es el único momento en
   que esta lista se mueve: confirma que el documento salió, sin quedarse parpadeando
   el resto de la consulta. */
@keyframes fx-emitido-entra{
  0%  { opacity:0; transform:translate3d(-6px,0,0); background:rgba(104,64,255,.14); }
  60% { opacity:1; transform:none; background:rgba(104,64,255,.10); }
  100%{ opacity:1; transform:none; background:transparent; }
}
.fx-emitidos li.nuevo{
  animation:fx-emitido-entra 1.5s cubic-bezier(.23,1,.32,1) both;
  border-radius:6px; padding-left:6px; padding-right:6px; margin-left:-6px; margin-right:-6px;
}
@media (prefers-reduced-motion: reduce){
  .fx-emitidos li.nuevo{ animation:none; }
  .fx-emitir-btns .btn:hover:not(:disabled){ transform:none; }
}
@media (max-width:640px){
  .fx-emitir-btns .btn{ flex:1 1 auto; }
  .fx-emitir-foto{ flex-wrap:wrap; }
  .fx-emitir-foto select{ width:100%; }
}

/* ============================================================================
   v536 · LAS LUCES DEL SISTEMA HABLAN EL MISMO IDIOMA

   Dos lugares donde el sistema "ilumina algo" usaban recetas propias, inventadas
   en su momento, que no se parecían a nada más:

   1) La cita que se acaba de buscar en la agenda quedaba envuelta en dos anillos
      sólidos —blanco de 3px y morado de 7px— que parpadeaban. Se veía como un
      error de validación, no como "es esta". Ahora usa exactamente el mismo
      gesto que presenta las tarjetas de Zairi: una luz que recorre el perímetro
      y se apaga. Mismo conic-gradient, mismos keyframes (`zairi-border-once` y
      `zairi-card-light-once`), reusados tal cual — no una copia parecida.

   2) El módulo activo del menú era un ladrillo morado sólido. Se leía como un
      relleno, no como una selección viva. Ahora lleva el borde del botón "Acceso
      clientes" de la landing: un anillo de luz que gira despacio alrededor del
      ítem, sobre un fondo apenas teñido. Los módulos Pro/destacados (el lima de
      Zairi Notes) llevan el mismo anillo en amarillo, para no perder de un
      vistazo cuáles son.

   El fondo se aclara a propósito: con el bloque sólido, el anillo giratorio
   quedaba invisible contra su propio relleno. Al aclararlo hay que rehacer el
   color del texto en modo claro (antes era blanco sobre morado), o el nombre del
   módulo activo desaparece contra el vidrio.
   ============================================================================ */

/* --- 1 · La cita buscada se presenta como una tarjeta de Zairi -------------- */
/* El movimiento (el salto y la vibración) se conserva: es lo que hace que el ojo
   la encuentre entre veinte bloques. Lo que cambia son las luces. */
.cal-appt.agenda-focus-buzz,.cd-appt.agenda-focus-buzz,.slot-pop-box.agenda-focus-buzz{
  position:relative;
  isolation:isolate;
  box-shadow:0 16px 40px rgba(49,29,99,.34);
}
.cal-appt.agenda-focus-buzz::before,.cd-appt.agenda-focus-buzz::before,.slot-pop-box.agenda-focus-buzz::before{
  content:''; position:absolute; inset:0; z-index:4; pointer-events:none;
  border-radius:inherit; padding:2px;
  background:conic-gradient(from var(--zairi-card-angle), transparent 0deg, transparent 246deg, #6840ff 278deg, #d9cfff 306deg, #63e3d1 334deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  /* Dos vueltas: una sola pasa demasiado rápido para encontrar un bloque de 40px
     de alto perdido en una grilla de doce horas. */
  animation:zairi-border-once 2.9s cubic-bezier(.18,.78,.28,1) 2 forwards;
}
.cal-appt.agenda-focus-buzz::after,.cd-appt.agenda-focus-buzz::after,.slot-pop-box.agenda-focus-buzz::after{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(112deg,transparent 30%,rgba(255,255,255,.34) 46%,rgba(191,168,255,.16) 54%,transparent 70%);
  background-size:250% 100%; background-position:120% 0; opacity:0;
  animation:zairi-card-light-once 2.45s cubic-bezier(.2,.72,.3,1) .12s 1 forwards;
}
@media(prefers-reduced-motion:reduce){
  /* Sin movimiento queda el recorrido del borde, que es la única señal que
     sobrevive: sin él no habría forma de saber cuál es la cita buscada. */
  .cal-appt.agenda-focus-buzz,.cd-appt.agenda-focus-buzz,.slot-pop-box.agenda-focus-buzz{
    animation:none !important;
    transform:none;
  }
  .cal-appt.agenda-focus-buzz::after,.cd-appt.agenda-focus-buzz::after,.slot-pop-box.agenda-focus-buzz::after{
    display:none;
  }
}

/* --- 2 · El módulo activo: el anillo de "Acceso clientes" ------------------- */
/* El ángulo es una propiedad registrada porque las variables CSS normales no se
   pueden animar: sin @property el conic-gradient no gira, se queda quieto. */
@property --nav-ring-angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes nav-ring-spin{ to{ --nav-ring-angle:360deg; } }

.nav-item.active{
  background:linear-gradient(135deg,rgba(var(--signature-purple-rgb),.20),rgba(var(--signature-purple-rgb),.075));
  border-color:transparent;
  box-shadow:0 8px 22px rgba(var(--signature-purple-rgb),.20),inset 0 1px 0 rgba(255,255,255,.14);
}
/* Este ::after reemplaza al halo borroso que había debajo del ítem: hay que
   deshacer a mano height/border-radius/filter/z-index/opacity, o el anillo sale
   como una mancha ovalada bajo el menú. */
.nav-item.active::after{
  content:''; position:absolute; inset:0; height:auto; z-index:0;
  pointer-events:none; border-radius:inherit; padding:1.4px;
  background:conic-gradient(from var(--nav-ring-angle),#7E96FF,#FC38FC 28%,#C9EFFD 52%,#9A81F6 74%,#7E96FF 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  filter:drop-shadow(0 0 6px rgba(var(--signature-purple-rgb),.45));
  opacity:.85;
  animation:nav-ring-spin 5.5s linear infinite;
  transition:opacity .3s ease;
}
.nav-item.active:hover::after{ opacity:1; }

/* Los módulos lima (Zairi Notes y compañía) conservan su color: el anillo cambia
   de paleta, no de gesto. */
.nav-item.pro.active,.nav-item.destacado.active{
  background:linear-gradient(135deg,rgba(215,232,76,.24),rgba(215,232,76,.08));
  border-color:transparent;
  box-shadow:0 8px 22px rgba(215,232,76,.18),inset 0 1px 0 rgba(255,255,255,.12);
}
.nav-item.pro.active::after,.nav-item.destacado.active::after{
  background:conic-gradient(from var(--nav-ring-angle),#f7ffb0,#d7e84c 26%,#fffbcf 50%,#b9cf2e 74%,#f7ffb0 100%);
  filter:drop-shadow(0 0 6px rgba(215,232,76,.5));
  animation-duration:6.4s;
}

/* Modo claro: el relleno dejó de ser morado sólido, así que el texto blanco de
   antes quedaría invisible sobre el vidrio. */
html:not([data-theme="dark"]) .sidebar .nav-item.active{ color:#291b5e; font-weight:650; }
html:not([data-theme="dark"]) .sidebar .nav-item.active .ic{ color:#5b39c9; }
html:not([data-theme="dark"]) .sidebar .nav-item.pro.active,
html:not([data-theme="dark"]) .sidebar .nav-item.destacado.active{
  background:linear-gradient(135deg,rgba(151,166,32,.20),rgba(151,166,32,.06));
  border-color:transparent;
}
html:not([data-theme="dark"]) .sidebar .nav-item.pro.active .nav-label,
html:not([data-theme="dark"]) .sidebar .nav-item.pro.active .ic,
html:not([data-theme="dark"]) .sidebar .nav-item.destacado.active .nav-label,
html:not([data-theme="dark"]) .sidebar .nav-item.destacado.active .ic{ color:#444d0c; }

@media(prefers-reduced-motion:reduce){
  /* El anillo se queda quieto, pero se queda: es lo que marca qué módulo está
     abierto ahora que el relleno ya no es un bloque sólido. */
  .nav-item.active::after{ animation:none; opacity:1; }
}

/* ============================================================================
   v537 · NOCTURNO DE GRAFITO

   El v524 llevó el modo oscuro de morado a negro tinta (#08080B). Corrigió el
   problema de entonces —todo era violeta— pero se pasó al otro lado: un negro
   casi absoluto no tiene material, se ve como un agujero. Las tarjetas
   desaparecían contra el fondo y la única forma de distinguirlas era el borde.

   Acá el lienzo pasa a GRAFITO: gris oscuro neutro, con superficies que suben
   por escalones parejos. Es la lógica de macOS — el fondo no es negro, es un
   material gris sobre el que las cosas se apoyan y proyectan sombra. Se nota
   dónde termina una tarjeta sin tener que dibujarle un contorno.

   Y el botón principal se invierte. En diurno es tinta con letras blancas: la
   cosa más oscura de la pantalla. En nocturno eso lo dejaba casi invisible
   (llegó a pintarse morado, que es el color reservado para Zairi). Ahora es
   blanco con letras negras: sigue siendo el elemento de mayor contraste contra
   su fondo, que es lo que lo hace el botón principal — el color cambia, la
   jerarquía se conserva. El morado vuelve a significar solo Zairi.

   La luz que sigue al mouse se recalibra: sobre negro un halo al 5% se veía;
   sobre grafito se pierde. Sube apenas y se entibia, para que siga leyéndose
   como un reflejo sobre el vidrio y no como una mancha.
   ============================================================================ */
[data-theme="dark"]{
  /* Escalones parejos de grafito: cada superficie que sube, sube lo mismo. */
  --lq-canvas:#1A1A1D;
  --bg:        #1A1A1D;
  --surface:   #232327;
  --surface-2: #2C2C31;
  --line:      #3A3A41;
  --ink:       #F2F2F5;
  --ink-soft:  #9B9BA4;
  --black:     #101013;
  --black-2:   #17171A;
  /* Sigue siendo el fondo de lo que Zairi escribe: es lo único morado. */
  --purple-soft:#2A2340;
  /* Sombra más suave que sobre negro: contra grafito una sombra dura se ve
     como suciedad, no como profundidad. */
  --shadow:0 20px 52px rgba(0,0,0,.46),0 2px 10px rgba(0,0,0,.26);
  --signature-glass:rgba(35,35,39,.80);
  --signature-hairline:rgba(255,255,255,.09);

  /* El agua sobre grafito necesita un punto más de luz para existir. */
  --lq-blob-a:rgba(168,182,212,.075);
  --lq-blob-b:rgba(136,164,194,.050);
  --lq-blob-c:rgba(174,196,230,.058);
  --lq-blob-d:rgba(var(--lq-purple),.075);
  --lq-sheen:rgba(255,255,255,.040);
  --lq-drop:rgba(226,234,250,.075);
  --lq-drop-2:rgba(198,214,240,.048);
  --lq-sat:1;
}
/* La capa líquida dejó `html body{background:transparent}` y pintó el lienzo en
   <html>. Un selector de una sola clase acá no alcanza: el ambiente hay que
   pedirlo con la misma especificidad o no se pinta nada. */
html[data-theme="dark"] body{
  background:
    radial-gradient(900px 620px at 78% -12%,rgba(176,190,218,.038),transparent 68%),
    radial-gradient(720px 520px at -8% 106%,rgba(140,166,196,.026),transparent 70%),
    transparent;
}
[data-theme="dark"] body::after{
  background:
    radial-gradient(52% 44% at 50% -6%, rgba(180,196,226,.052), transparent 74%),
    conic-gradient(from 210deg at 68% 40%, transparent 0 62%, var(--lq-sheen) 74%, transparent 86%);
}
/* La luz del cursor, un escalón más presente que sobre negro. */
[data-theme="dark"] html.lq-pointer #root::before,
html[data-theme="dark"].lq-pointer #root::before{ opacity:.9; }

/* Las tarjetas se apoyan sobre el grafito: suben dos escalones y traen el
   reflejo frío en la esquina de donde viene la luz. */
[data-theme="dark"] .card,
[data-theme="dark"] .stat{
  background:linear-gradient(155deg,#26262B,#1F1F23);
  background-image:
    linear-gradient(155deg,#26262B,#1F1F23),
    radial-gradient(120% 90% at 110% -10%, rgba(200,214,242,.045), transparent 62%);
  border-color:var(--line);
  box-shadow:0 18px 44px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.045);
}
[data-theme="dark"] .zairi-opportunity-card,
[data-theme="dark"] .zairi-reveal-card,
[data-theme="dark"] .sim-hero{
  background-color:#272430;
  box-shadow:0 20px 54px rgba(0,0,0,.32),0 0 42px rgba(var(--signature-purple-rgb),.06),inset 0 1px 0 rgba(255,255,255,.06);
}
[data-theme="dark"] .sidebar{
  background-image:
    linear-gradient(rgba(35,35,39,.46), rgba(26,26,29,.34)),
    radial-gradient(130% 40% at 0% 0%, rgba(200,214,242,.042), transparent 70%);
}
@media (max-width:900px){
  [data-theme="dark"] .sidebar{ background:#212125; }
}
@media(prefers-reduced-transparency:reduce){
  [data-theme="dark"] .sidebar{ background:#212125; }
}
[data-theme="dark"] .wa-chat{ background:#1F1F23; }
[data-theme="dark"] .zx-aviso{ background:#2A2440; }

/* --- El botón principal se invierte -------------------------------------- */
/* Blanco con letras negras: lo de mayor contraste contra el grafito, igual que
   la tinta negra lo es contra el papel del modo diurno. */
[data-theme="dark"] .btn{
  background:#F2F2F5;
  color:#141417;
  box-shadow:0 1px 2px rgba(0,0,0,.34), inset 0 -1px 0 rgba(0,0,0,.07);
}
[data-theme="dark"] .btn:hover{ background:#FFFFFF; filter:none; box-shadow:0 4px 14px rgba(0,0,0,.36); }
[data-theme="dark"] .btn:active{ background:#DEDEE3; }
[data-theme="dark"] .btn:disabled{ background:#3A3A41; color:#8B8B94; box-shadow:none; }
/* Las excepciones que NO se invierten: el morado sigue siendo Zairi, el rojo
   sigue siendo peligro, y un botón fantasma sigue siendo vidrio. Van después
   porque el bloque de arriba los alcanzaba a todos. */
[data-theme="dark"] .btn.gold{ background:var(--purple); color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.34); }
[data-theme="dark"] .btn.gold:hover{ background:var(--purple-2); }
[data-theme="dark"] .btn.danger{ background:var(--danger); color:#fff; }
[data-theme="dark"] .btn.danger:hover{ background:var(--danger); filter:brightness(1.08); }
[data-theme="dark"] .btn.ghost{
  background:rgba(255,255,255,.06); color:var(--ink); border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
[data-theme="dark"] .btn.ghost:hover{ background:rgba(255,255,255,.11); }
/* El panel de videoconsulta es oscuro por dentro incluso de día: un botón
   blanco ahí sería un flash en la cara de quien está en cámara. */
[data-theme="dark"] .btn.vbtn{ background:#2A2A31; color:#F2F2F5; border:1px solid #43434E; box-shadow:none; }
[data-theme="dark"] .btn.vbtn:hover{ background:#35353E; color:#fff; border-color:#55555F; }

/* ============================================================================
   v538 · LO NUEVO SE ANUNCIA, EL MORADO SE RETIRA DE LOS BOTONES

   Dos cosas que se estorbaban entre sí.

   El morado era el color del botón principal (`.btn.gold`: "+ Nueva cita",
   "+ Nuevo paciente", "Zairi Notes" en la ficha). Pero el morado también es el
   color de Zairi en todo el resto del sistema — sus tarjetas, sus bordes de
   luz, su avatar. Cuando el mismo tono significa "acá aprietas" y "esto lo
   escribió la IA", deja de significar cualquiera de las dos. Ahora el botón
   principal es tinta, igual que el resto: una sola forma de decir "este es el
   botón". El morado queda libre para significar solo Zairi.

   Y como el morado ya no está disponible para llamar la atención, los dos
   módulos recién llegados necesitaban otra manera de hacerse notar en un menú
   de veintinueve entradas. Va una etiqueta "Nuevo" al lado del nombre, que
   respira despacio. Zairi Notes la lleva en tinta; Zairi Vision en lima, el
   mismo amarillo con el que ya se marcan los módulos destacados, para que se
   entienda que son de la misma familia sin ser lo mismo.
   ============================================================================ */

/* --- 1 · La etiqueta "Nuevo" del menú ------------------------------------- */
@keyframes nav-nuevo-latido{
  0%,100%{ opacity:1;   transform:scale(1); }
  50%    { opacity:.42; transform:scale(.94); }
}
.nav-nuevo{
  flex:0 0 auto;
  padding:2px 7px 3px;
  border-radius:6px;
  background:#17151d;
  color:#fff;
  font-size:9px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.15;
  white-space:nowrap;
  box-shadow:0 1px 3px rgba(20,17,27,.28);
  animation:nav-nuevo-latido 2.1s ease-in-out infinite;
}
/* Zairi Vision: el mismo lima de los módulos destacados, con texto oliva
   porque el blanco sobre amarillo no se lee. */
.nav-nuevo.lima{
  background:#d7e84c;
  color:#2f3606;
  box-shadow:0 1px 3px rgba(120,138,20,.32);
}
/* Sobre el grafito la tinta desaparece: la etiqueta negra se invierte, igual
   que el botón principal. */
[data-theme="dark"] .nav-nuevo{
  background:#F2F2F5; color:#141417; box-shadow:0 1px 3px rgba(0,0,0,.4);
}
/* Con el menú plegado solo se ve el ícono: la etiqueta no cabe y taparía el
   nombre que aparece en el tooltip. */
.app.collapsed .nav-nuevo{ display:none; }
@media(prefers-reduced-motion:reduce){
  /* Se queda, quieta: es la única marca de que el módulo es nuevo. */
  .nav-nuevo{ animation:none; }
}

/* --- 2 · El botón principal deja de ser morado ---------------------------- */
/* `.btn.gold` pasa a ser exactamente el botón de siempre. No se borra la clase
   del JSX: son decenas de llamadas y todas siguen queriendo decir "este es el
   principal" — lo que cambia es con qué color se dice. */
.btn.gold{ background:var(--ink); color:#fff; }
.btn.gold:hover{ background:#2c2838; box-shadow:0 6px 18px rgba(20,17,27,.20), inset 0 1px 0 rgba(255,255,255,.10); }
[data-theme="dark"] .btn.gold{ background:#F2F2F5; color:#141417; box-shadow:0 1px 2px rgba(0,0,0,.34), inset 0 -1px 0 rgba(0,0,0,.07); }
[data-theme="dark"] .btn.gold:hover{ background:#FFFFFF; box-shadow:0 4px 14px rgba(0,0,0,.36); }

/* Los otros botones que también estaban pintados de morado. El de entrar, el de
   enviar en el chat interno, el de crear grupo, los chips que se eligen en Zairi
   Vision y el segmento activo en nocturno. Todos pasan a tinta —o a blanco sobre
   grafito— por lo mismo: apretar no es un color, es una forma. */
.applogin .go{ background:linear-gradient(135deg,#221d2e,#14111b); }
.applogin .go:hover{ box-shadow:0 18px 46px rgba(0,0,0,.5); }
.sim-chip:hover{ border-color:var(--ink); }
.sim-chip.on{ background:var(--ink); border-color:var(--ink); color:#fff; box-shadow:0 6px 16px rgba(20,17,27,.24); }
.chat-send{ background:var(--ink); }
.chat-crear-grupo{ background:var(--ink); }
[data-theme="dark"] .seg button.on{ background:#F2F2F5; color:#141417; }
[data-theme="dark"] .sim-chip.on{ background:#F2F2F5; border-color:#F2F2F5; color:#141417; box-shadow:0 6px 16px rgba(0,0,0,.32); }
[data-theme="dark"] .chat-send,
[data-theme="dark"] .chat-crear-grupo{ background:#F2F2F5; color:#141417; }

/* ============================================================
   v539 · EL BORDE DE ZAIRI SE VUELVE "ESTO ESTÁ ABIERTO"
          + EL NÁCAR NOCTURNO

   Dos cosas que se apoyan en lo mismo: el sistema ya tiene un gesto de luz
   propio —el borde que recorre las tarjetas de Zairi— y lo estaba usando en un
   solo lugar mientras la selección de tarjetas se resolvía con un outline
   morado de 2px, que es lo que dibuja un formulario cuando algo está mal.

    · Tarjeta seleccionada: mismo conic-gradient, mismos colores, mismo aro.
      La diferencia con el de Zairi es que aquel corre una vez y se apaga
      (anuncia que la tarjeta llegó); este tiene que quedarse mientras el panel
      esté abierto, así que gira en loop y sobre un aro base tenue, para que
      ningún lado del rectángulo quede sin borde cuando el arco no pasa por ahí.

    · De noche, el lienzo de grafito de v537 es correcto pero inerte. El nácar
      —violeta, cian, un azul frío— aparece solamente alrededor del cursor y se
      reacomoda con el scroll. Es luz reflejada, no luz emitida: por eso va
      enmascarado, desaturado hacia el borde y con opacidades de un dígito.
      Trabajar de noche ocho horas con una pantalla que brilla es lo que se
      estaba evitando.

   Notas de mantención:
    · --zairi-sel-angle y --nz-drift son @property registradas. Una variable CSS
      normal no interpola: el conic se queda quieto y no hay efecto.
    · .stat trae `border:1px solid var(--line)` y `overflow:hidden`. El aro se
      dibuja con máscara sobre un ::before de inset:0, así que el borde propio
      se apaga o se ven dos.
    · El nácar vive en #root::after. #root::before ya es la gota que sigue al
      cursor: son capas distintas y las dos van en z-index:-1.
   ============================================================ */

/* --- 1 · La tarjeta seleccionada lleva el borde de Zairi ------------------ */

@property --zairi-sel-angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes zairi-sel-spin{ to{ --zairi-sel-angle:360deg; } }

/* El outline morado y el borde de color se retiran: los reemplaza el aro. */
.stat.clickable.sel,
.stat.active-stat{
  outline:none;
  border-color:transparent !important;
  position:relative;
  isolation:isolate;
  box-shadow:0 12px 34px rgba(104,64,255,.13), 0 2px 8px rgba(0,0,0,.05);
}
.stat.clickable.sel > *,
.stat.active-stat > *{ position:relative; z-index:2; }

.stat.clickable.sel::before,
.stat.active-stat::before{
  content:''; position:absolute; inset:0; z-index:4; pointer-events:none;
  border-radius:inherit; padding:2px;
  background:
    /* El arco que viaja: los mismos tres colores de .zairi-opportunity-card. */
    conic-gradient(from var(--zairi-sel-angle),
      transparent 0deg, transparent 214deg,
      #6840ff 258deg, #d9cfff 300deg, #63e3d1 336deg, transparent 360deg),
    /* El aro base, para que el lado por donde no pasa el arco igual tenga canto. */
    linear-gradient(rgba(124,77,255,.30) 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:zairi-sel-spin 3.6s linear infinite;
}
[data-theme="dark"] .stat.clickable.sel,
[data-theme="dark"] .stat.active-stat{
  box-shadow:0 18px 44px rgba(0,0,0,.34), 0 0 34px rgba(104,64,255,.14), inset 0 1px 0 rgba(255,255,255,.05);
}
[data-theme="dark"] .stat.clickable.sel::before,
[data-theme="dark"] .stat.active-stat::before{
  background:
    conic-gradient(from var(--zairi-sel-angle),
      transparent 0deg, transparent 214deg,
      #8a63ff 258deg, #e6dcff 300deg, #6ff0dc 336deg, transparent 360deg),
    linear-gradient(rgba(150,116,255,.26) 0 0);
}
/* El hover también pintaba de morado el borde: sobre una tarjeta que al tocarla
   se va a envolver en el aro, era anunciar el gesto equivocado. */
.stat.clickable:hover{ border-color:rgba(124,77,255,.28); }

@media(prefers-reduced-motion:reduce){
  /* El aro se queda: es lo único que dice qué tarjeta está abierta. Quieto y
     completo, porque un arco detenido deja tres lados sin borde. */
  .stat.clickable.sel::before,
  .stat.active-stat::before{
    animation:none;
    background:linear-gradient(135deg,#6840ff,#d9cfff 52%,#63e3d1);
  }
}

/* --- 2 · El nácar nocturno ------------------------------------------------ */

@property --nz-drift{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes nz-drift{ to{ --nz-drift:360deg; } }

html[data-theme="dark"] #root::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    /* Destellos sueltos: el barrido del cursor los va encendiendo de a uno. */
    radial-gradient(30px 30px at 16% 22%, rgba(226,236,255,.85), transparent 68%),
    radial-gradient(24px 24px at 74% 16%, rgba(150,232,255,.78), transparent 68%),
    radial-gradient(34px 34px at 62% 68%, rgba(206,168,255,.70), transparent 68%),
    radial-gradient(22px 22px at 31% 79%, rgba(126,238,214,.70), transparent 68%),
    radial-gradient(28px 28px at 88% 54%, rgba(160,178,255,.66), transparent 68%),
    radial-gradient(20px 20px at 45% 34%, rgba(236,240,255,.64), transparent 68%),
    radial-gradient(26px 26px at  8% 58%, rgba(140,168,255,.62), transparent 68%),
    /* El nácar del orbe. Gira con el scroll y además deriva solo, para que la
       pantalla quieta no quede muerta. */
    conic-gradient(from calc(var(--liquid-scroll,0) * 300deg + var(--nz-drift,0deg)) at 50% 46%,
      rgba(112,84,238,.62), rgba(64,196,222,.54) 20%, rgba(198,128,246,.48) 42%,
      rgba(74,120,236,.58) 62%, rgba(92,224,198,.50) 82%, rgba(112,84,238,.62) 100%);
  filter:blur(22px) saturate(1.6);
  /* Sin la máscara esto sería una pantalla de colores. Enmascarado contra el
     cursor es un reflejo: solo se ve donde uno está mirando. */
  -webkit-mask:radial-gradient(38vmax 38vmax at var(--cur-x,50vw) var(--cur-y,42vh),
    #000 0, rgba(0,0,0,.55) 36%, transparent 74%);
          mask:radial-gradient(38vmax 38vmax at var(--cur-x,50vw) var(--cur-y,42vh),
    #000 0, rgba(0,0,0,.55) 36%, transparent 74%);
  transform:translate3d(0, calc(var(--liquid-scroll,0) * -7vh), 0);
  opacity:.20;
  transition:opacity 1.1s ease;
  animation:nz-drift 46s linear infinite;
  will-change:transform;
}
html[data-theme="dark"].lq-pointer #root::after{ opacity:.55; }

@media(prefers-reduced-motion:reduce){
  html[data-theme="dark"] #root::after{ animation:none; transform:none; }
}
@media(prefers-reduced-transparency:reduce){
  html[data-theme="dark"] #root::after{ display:none; }
}
@media (max-width:900px){
  /* En un teléfono no hay cursor que enmascare nada y el blur cuesta batería. */
  html[data-theme="dark"] #root::after{ display:none; }
}

/* ============================================================================
   v540 · EL NEGRO ES NEGRO, Y LA LUZ PASA POR VIDRIO

   Tres cosas que el nocturno todavía hacía mal.

   1 · EL LIENZO TENÍA TINTE. El grafito de v537 (#1A1A1D) no era gris: tenía
       tres puntos más de azul que de rojo, y encima el sistema seguía pintando
       blobs morados y velos azulados sobre él. En una pantalla grande eso se
       lee como una nube violeta permanente detrás del contenido. Acá todos los
       grises pasan a ser grises de verdad —R, G y B idénticos— y el ambiente
       que se mueve detrás se vuelve blanco a muy baja opacidad. El fondo deja
       de tener opinión sobre el color; el morado queda solo donde vive Zairi:
       su orbe, sus tarjetas, el riel activo del menú.

   2 · LA LUZ TENÍA BORDES. El nácar que sigue al cursor estaba hecho de puntos
       chicos y de una máscara que se cortaba de golpe: se veían los cantos de
       cada mancha y el filo del círculo. Un reflejo no tiene contorno. Ahora
       las manchas son pozos anchos, el desenfoque es tres veces mayor, la
       máscara se apaga en cuatro tiempos en vez de dos, y por encima va un velo
       blanco lechoso — que es lo que hace que un vidrio sea empavonado y no
       transparente: la luz no se ve, se ve el vidrio iluminado.

   3 · UN BOTÓN APAGADO PARECÍA UN BOTÓN GRIS. "Aplicar" se pintaba de gris
       sólido cuando estaba deshabilitado, igual que un botón secundario
       cualquiera, así que no se leía "todavía no puedes" sino "este botón es
       así". Y en modo diurno directamente no cambiaba nada: un botón muerto se
       veía idéntico a uno vivo. Ahora conserva su color —el principal sigue
       siendo el principal— y se atenúa. Es la diferencia entre apagar la luz de
       una pieza y cambiarle los muebles.
   ============================================================================ */

/* --- 1 · Grises que son grises -------------------------------------------- */
[data-theme="dark"]{
  --lq-canvas:#0A0A0A;
  --bg:        #0A0A0A;
  --surface:   #151515;
  --surface-2: #1E1E1E;
  --line:      #2C2C2C;
  --ink:       #F2F2F2;
  --ink-soft:  #9A9A9A;
  --black:     #050505;
  --black-2:   #111111;
  --signature-glass:rgba(21,21,21,.82);
  --signature-hairline:rgba(255,255,255,.08);
  --shadow:0 20px 52px rgba(0,0,0,.62),0 2px 10px rgba(0,0,0,.38);
  /* La respiración del sistema se queda: lo que se va es su color. Blanco a
     dos por ciento sobre negro es material, no tinte. */
  --lq-blob-a:rgba(255,255,255,.022);
  --lq-blob-b:rgba(255,255,255,.014);
  --lq-blob-c:rgba(255,255,255,.018);
  --lq-blob-d:rgba(255,255,255,.012);
  --lq-sheen:rgba(255,255,255,.026);
  --lq-drop:rgba(255,255,255,.070);
  --lq-drop-2:rgba(255,255,255,.042);
  --lq-sat:1;
}
/* Los velos del lienzo. Iban en azul acero; van en blanco. */
html[data-theme="dark"] body{
  background:
    radial-gradient(900px 620px at 78% -12%,rgba(255,255,255,.020),transparent 68%),
    radial-gradient(720px 520px at -8% 106%,rgba(255,255,255,.012),transparent 70%),
    transparent;
}
[data-theme="dark"] body::after{
  background:
    radial-gradient(52% 44% at 50% -6%, rgba(255,255,255,.024), transparent 74%),
    conic-gradient(from 210deg at 68% 40%, transparent 0 62%, var(--lq-sheen) 74%, transparent 86%);
}
/* Las superficies suben por escalones, pero de gris a gris. Sin esto las
   tarjetas conservaban el azul de v537 y el fondo negro las delataba. */
[data-theme="dark"] .card,
[data-theme="dark"] .stat{
  background:linear-gradient(155deg,#1A1A1A,#131313);
  background-image:
    linear-gradient(155deg,#1A1A1A,#131313),
    radial-gradient(120% 90% at 110% -10%, rgba(255,255,255,.030), transparent 62%);
  border-color:var(--line);
  box-shadow:0 18px 44px rgba(0,0,0,.50),inset 0 1px 0 rgba(255,255,255,.035);
}
/* El riel del menú es el vidrio de referencia del sistema: si él tiene tinte,
   todo lo demás parece tenerlo también. */
[data-theme="dark"] .sidebar{
  background-image:
    linear-gradient(rgba(20,20,20,.52), rgba(10,10,10,.40)),
    radial-gradient(130% 40% at 0% 0%, rgba(255,255,255,.028), transparent 70%);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.05), 8px 0 40px rgba(0,0,0,.30);
}
@media (max-width:900px){
  [data-theme="dark"] .sidebar{ background:#121212; }
}
@media(prefers-reduced-transparency:reduce){
  [data-theme="dark"] .sidebar{ background:#121212; }
}
[data-theme="dark"] .wa-chat{ background:#131313; }
/* Lo que NO se destiñe: el fondo de lo que escribe Zairi, sus tarjetas y su
   orbe siguen siendo morados. Ese morado ahora significa una sola cosa. */
[data-theme="dark"] .zairi-opportunity-card,
[data-theme="dark"] .zairi-reveal-card,
[data-theme="dark"] .sim-hero{
  background-color:#1E1A28;
  box-shadow:0 20px 54px rgba(0,0,0,.50),0 0 42px rgba(var(--signature-purple-rgb),.07),inset 0 1px 0 rgba(255,255,255,.05);
}

/* --- 2 · La luz pasa por vidrio empavonado -------------------------------- */
html[data-theme="dark"] #root::after{
  background:
    /* El velo lechoso. Va primero —encima de todo lo demás— porque es el vidrio:
       lo que se ve iluminado es él, no la luz que hay detrás. */
    radial-gradient(60vmax 60vmax at var(--cur-x,50vw) var(--cur-y,42vh),
      rgba(255,255,255,.055), rgba(255,255,255,.018) 42%, transparent 72%),
    /* Pozos anchos en vez de puntos: un destello del tamaño de una moneda deja
       ver su canto por más que se lo desenfoque. */
    radial-gradient(150px 150px at 16% 22%, rgba(226,236,255,.42), transparent 72%),
    radial-gradient(130px 130px at 74% 16%, rgba(150,232,255,.36), transparent 72%),
    radial-gradient(170px 170px at 62% 68%, rgba(206,168,255,.34), transparent 72%),
    radial-gradient(120px 120px at 31% 79%, rgba(126,238,214,.32), transparent 72%),
    radial-gradient(150px 150px at 88% 54%, rgba(160,178,255,.30), transparent 72%),
    radial-gradient(130px 130px at 45% 34%, rgba(236,240,255,.30), transparent 72%),
    radial-gradient(140px 140px at  8% 58%, rgba(140,168,255,.28), transparent 72%),
    conic-gradient(from calc(var(--liquid-scroll,0) * 300deg + var(--nz-drift,0deg)) at 50% 46%,
      rgba(112,84,238,.52), rgba(64,196,222,.46) 20%, rgba(198,128,246,.40) 42%,
      rgba(74,120,236,.48) 62%, rgba(92,224,198,.42) 82%, rgba(112,84,238,.52) 100%);
  /* Tres veces el desenfoque de antes y menos saturación: de vitral a reflejo. */
  filter:blur(70px) saturate(1.22);
  /* Cuatro tiempos en vez de dos, y un radio mucho más corto. Antes la máscara
     medía media pantalla: eso no era una luz que sigue al cursor, era un fondo
     de color con el cursor adentro. Ahora el negro es el fondo y la luz es un
     halo donde uno está mirando, que es lo que se pidió: fondo negro, efecto al
     pasar el mouse. El filo del círculo era además el borde más duro de la
     pantalla, por ser el único perfectamente redondo. */
  -webkit-mask:radial-gradient(36vmax 36vmax at var(--cur-x,50vw) var(--cur-y,42vh),
    #000 0, rgba(0,0,0,.72) 22%, rgba(0,0,0,.34) 46%, rgba(0,0,0,.10) 68%, transparent 86%);
          mask:radial-gradient(36vmax 36vmax at var(--cur-x,50vw) var(--cur-y,42vh),
    #000 0, rgba(0,0,0,.72) 22%, rgba(0,0,0,.34) 46%, rgba(0,0,0,.10) 68%, transparent 86%);
  /* Antes de que el mouse se mueva por primera vez, el lienzo es negro y nada
     más. La luz aparece porque uno la trae. */
  opacity:0;
}
html[data-theme="dark"].lq-pointer #root::after{ opacity:.74; }
/* La gota que sigue al cursor comparte el mismo vidrio: si ella queda nítida y
   el nácar difuso, se ven como dos efectos distintos peleando. */
[data-theme="dark"] #root::before,
html[data-theme="dark"] #root::before{ filter:blur(84px) saturate(1); }

/* --- 3 · Un botón apagado sigue siendo el mismo botón --------------------- */
/* Conserva su color y se atenúa. Antes, en diurno, un botón deshabilitado se
   veía exactamente igual que uno vivo: la única forma de saber que no servía
   era apretarlo y que no pasara nada. */
.btn:disabled,
.btn[disabled]{
  opacity:.5;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}
.btn:disabled:hover,
.btn[disabled]:hover{ transform:none; filter:none; box-shadow:none; }
/* En nocturno el botón vivo es blanco, así que el apagado también tiene que
   serlo: bajarle la opacidad sobre fondo negro lo convertía en gris, que es
   justo lo que se veía mal. Se apaga el texto, no el botón. */
[data-theme="dark"] .btn:disabled,
[data-theme="dark"] .btn[disabled]{
  background:#E2E2E2;
  color:rgba(18,18,18,.56);
  opacity:1;
  box-shadow:none;
}
[data-theme="dark"] .btn.ghost:disabled,
[data-theme="dark"] .btn.ghost[disabled]{
  background:rgba(255,255,255,.05);
  color:rgba(242,242,242,.42);
  opacity:1;
}

/* ============================================================================
   v541 · MIRAR ANTES DE UNIR
   Unir dos fichas borra una para siempre. Hasta ahora la pantalla mostraba una
   línea y un desplegable: se decidía a ciegas. Acá se agrega la casilla por
   grupo, la barra de acciones y el comparador lado a lado, donde lo que difiere
   y lo que falta se ven sin tener que leer con lupa.
   ============================================================================ */

.dup-fila{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  font-size:12.5px; background:var(--purple-soft); border-radius:8px;
  padding:6px 10px; margin-bottom:6px;
  border:1px solid transparent;
  transition:border-color .18s ease, background .18s ease;
}
.dup-fila.marcada{ border-color:var(--purple,#7c5cff); background:var(--surface-2); }
.dup-check{ display:flex; align-items:center; margin:0; cursor:pointer; }
.dup-check input{ margin:0; width:16px; height:16px; cursor:pointer; }

.dup-barra{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  font-size:12.5px; font-weight:600;
  padding:6px 10px; margin-bottom:8px;
  border-radius:8px; background:var(--surface-2); border:1px solid var(--line);
}

/* --- Comparador --- */
.cmp-grid{
  display:grid; gap:1px;
  background:var(--line);
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
  font-size:12.5px;
}
.cmp-grid > div{ background:var(--surface); padding:7px 10px; }
.cmp-h{ display:flex; flex-direction:column; gap:2px; background:var(--surface-2) !important; }
.cmp-h .muted{ font-size:11px; }
.cmp-h.es-keep{ box-shadow:inset 0 3px 0 var(--purple,#7c5cff); }
.cmp-keep{ display:flex; align-items:center; gap:5px; margin:4px 0 0; font-size:11.5px; cursor:pointer; }
.cmp-keep input{ margin:0; width:14px; height:14px; }
.cmp-l{ font-weight:600; color:var(--ink-soft); background:var(--surface-2) !important; }
.cmp-c{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Lo que difiere entre fichas: es lo único que hay que mirar. */
.cmp-c.dif{ font-weight:600; }
/* El hueco es la señal de que la fusión SUMA (una tiene RUT, la otra no). */
.cmp-c.falta{ color:var(--ink-soft); font-weight:400; opacity:.75; }
.cmp-c.es-keep{ background:var(--purple-soft) !important; }
.cmp-resumen{ margin:10px 0 0; font-size:12.5px; line-height:1.5; }

@media (max-width:760px){
  .cmp-grid{ font-size:11.5px; }
  .cmp-grid > div{ padding:6px 7px; }
}

/* ====================================================================
   v542 · ZAIRI VISION PARA TODO EL CATÁLOGO
   El formulario largo pasa a cuatro pasos y el resultado deja de ser
   dos fotos sueltas. Solo CSS, sobre el negro neutro de v540; todo lo
   que se mueve se apaga con prefers-reduced-motion.
   ==================================================================== */

/* --- Pasos --- */
.sim-pasos{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.sim-paso{
  display:flex; align-items:center; gap:8px; padding:9px 14px 9px 10px;
  border:1px solid var(--line); border-radius:999px; background:var(--surface);
  font-size:13px; font-weight:600; color:var(--muted); cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}
.sim-paso:hover{ border-color:var(--purple); }
.sim-paso.off{ opacity:.45; cursor:default; }
.sim-paso.off:hover{ border-color:var(--line); }
.sim-paso.ok{ color:var(--text); border-color:color-mix(in srgb, var(--purple) 40%, var(--line)); }
.sim-paso.on{
  color:#fff; border-color:transparent;
  background:linear-gradient(135deg,var(--purple),var(--purple-2));
  box-shadow:0 3px 14px color-mix(in srgb, var(--purple) 32%, transparent);
}
.sim-paso-n{
  width:21px; height:21px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; font-size:11.5px; font-weight:700;
  background:var(--surface-2); color:var(--muted); flex:none;
}
.sim-paso.on .sim-paso-n{ background:rgba(255,255,255,.22); color:#fff; }
.sim-paso.ok .sim-paso-n{ background:color-mix(in srgb, var(--purple) 18%, transparent); color:var(--purple); }

/* Entrada escalonada del panel al cambiar de paso (el key={paso} lo remonta). */
.sim-panel{ animation:simEntra .34s cubic-bezier(.2,.7,.3,1) both; }
.sim-panel > div > *{ animation:simSube .4s cubic-bezier(.2,.7,.3,1) both; }
.sim-panel > div > *:nth-child(1){ animation-delay:.02s; }
.sim-panel > div > *:nth-child(2){ animation-delay:.06s; }
.sim-panel > div > *:nth-child(3){ animation-delay:.10s; }
.sim-panel > div > *:nth-child(4){ animation-delay:.14s; }
.sim-panel > div > *:nth-child(n+5){ animation-delay:.18s; }
@keyframes simEntra{ from{ opacity:0; transform:translateY(8px) scale(.995); } to{ opacity:1; transform:none; } }
@keyframes simSube{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }

.sim-nav{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:12px; flex-wrap:wrap;
}
.sim-nav > span{ flex:1; text-align:center; min-width:120px; }

/* --- Catálogo por categoría --- */
.sim-cat{ margin-top:14px; }
.sim-cat-h{
  font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin-bottom:7px;
}
.sim-cat-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.sim-tchip{
  display:inline-flex; align-items:center; gap:5px; padding:8px 12px;
  border:1px solid var(--line); border-radius:10px; background:var(--surface);
  font-size:13px; cursor:pointer;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
.sim-tchip:hover{ border-color:var(--purple); transform:translateY(-1px); }
.sim-tchip.on{
  border-color:var(--purple); background:color-mix(in srgb, var(--purple) 10%, var(--surface));
  font-weight:600;
}
.sim-badge{
  margin-left:4px; padding:2px 7px; border-radius:999px; font-size:10px; font-weight:700;
  letter-spacing:.02em; background:var(--surface-2); color:var(--muted); white-space:nowrap;
}
.sim-badge.ok{ background:color-mix(in srgb, #2e9e5b 16%, transparent); color:#2e9e5b; }

/* --- Encuadre que pide el tratamiento --- */
.sim-encuadre{
  display:flex; align-items:flex-start; gap:8px; padding:10px 12px; margin-bottom:10px;
  border:1px dashed color-mix(in srgb, var(--purple) 45%, var(--line));
  border-radius:10px; background:color-mix(in srgb, var(--purple) 6%, transparent);
  font-size:12.5px; line-height:1.45;
}

/* --- Criterio médico --- */
.sim-crit-h{ display:flex; align-items:center; gap:11px; margin-bottom:12px; }
/* El orbe trae margin:0 auto de su propio componente, y acá eso lo mandaba al
   centro de la fila dejando el título flotando lejos. */
.sim-crit-h .orb3d-wrap{ margin:0; flex:none; }
.sim-crit-h > div:last-child{ flex:1; min-width:0; }
.sim-crit{
  border:1px solid var(--line); border-radius:12px; padding:14px;
  background:var(--surface-2);
}
.sim-crit textarea{ font-size:13px; line-height:1.5; }
.sim-crit-msg{
  margin:8px 0; padding:9px 12px; border-radius:9px; font-size:12.5px;
  background:color-mix(in srgb, var(--purple) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--purple) 30%, var(--line));
}
.sim-barrera{
  margin-top:10px; padding:10px 12px; border-radius:9px; font-size:12.5px; line-height:1.5;
  background:color-mix(in srgb, #b8860b 12%, transparent);
  border:1px solid color-mix(in srgb, #b8860b 40%, var(--line));
}

/* --- Slider antes / después --- */
.sim-slider{
  --pos:50%;
  position:relative; width:100%; max-width:560px; margin:0 auto;
  border-radius:12px; overflow:hidden; border:1px solid var(--line);
  line-height:0; user-select:none;
}
.sim-slider-img{ width:100%; display:block; }
/* El "después" tapa desde la línea hacia la DERECHA: izquierda antes, derecha
   después, como se lee. Con clip-path la foto no se estira ni se descuadra. */
.sim-slider-tapa{
  position:absolute; inset:0;
  clip-path:inset(0 0 0 var(--pos));
}
.sim-slider-tapa .sim-slider-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.sim-slider-linea{
  position:absolute; top:0; bottom:0; left:var(--pos); width:2px;
  background:rgba(255,255,255,.92); box-shadow:0 0 0 1px rgba(0,0,0,.25);
  pointer-events:none;
}
.sim-slider-tirador{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.95); color:#333;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.3);
}
.sim-slider-et{
  position:absolute; top:10px; padding:3px 9px; border-radius:999px;
  font-size:11px; font-weight:700; line-height:1.6; letter-spacing:.03em;
  background:rgba(0,0,0,.55); color:#fff; pointer-events:none;
}
.sim-slider-et.izq{ left:10px; }
.sim-slider-et.der{ right:10px; background:color-mix(in srgb, var(--purple) 80%, #000); }
/* El input es el que manda: invisible pero encima de todo, así funciona con
   mouse, con dedo y con el teclado sin escribir una línea de JS de arrastre. */
.sim-slider-input{
  position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0;
  opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none; background:none;
}
.sim-slider-input:focus-visible{ outline:2px solid var(--purple); outline-offset:2px; }

@media (max-width:760px){
  .sim-paso{ padding:7px 11px 7px 8px; font-size:12px; }
  .sim-nav > span{ order:3; flex-basis:100%; text-align:left; }
}

@media (prefers-reduced-motion:reduce){
  .sim-panel, .sim-panel > div > *{ animation:none !important; }
  .sim-paso, .sim-tchip{ transition:none !important; }
  .sim-tchip:hover{ transform:none; }
}

/* ============================================================
   v543 · Mercado Pago Point — cobrar en el mesón
   Solo la ventana del cobro y el logo del menú. Nada de esto pisa
   estilos anteriores: todas las clases empiezan en .mp-
   ============================================================ */

/* El logo real de Mercado Pago va a color, así que su SVG trae fill propio y
   no puede heredar el currentColor del resto de los iconos del menú. */
.mp-logo{ display:inline-flex; align-items:center; justify-content:center; line-height:0; }
.mp-logo svg{ width:20px; height:20px; display:block; }
.mp-logo.lg svg{ width:44px; height:44px; }
.nav-item .ic .mp-logo svg, .mp-btn .mp-logo svg{ width:17px; height:17px; }
.mp-btn{ display:inline-flex; align-items:center; gap:7px; }

.mp-cobro .modal-head h2{ font-size:17px; }
.mp-cobro .mp-error{
  margin:10px 0 0; padding:8px 10px; border-radius:9px; font-size:12.5px;
  background:color-mix(in srgb,#c0392b 10%,transparent); color:#c0392b;
}

.mp-espera, .mp-ok, .mp-falla{ text-align:center; padding:6px 0 2px; }
.mp-estado{ font-size:16px; font-weight:700; margin-top:12px; }
.mp-monto{ font-size:27px; font-weight:800; letter-spacing:-.4px; margin-top:2px; }

/* El tótem esperando la tarjeta: dos ondas que salen de la máquina. Es la única
   señal de que el sistema sigue vivo mientras la paciente busca la tarjeta. */
.mp-totem{
  position:relative; width:78px; height:78px; margin:6px auto 0;
  border-radius:18px; background:linear-gradient(160deg,#00b1ea,#0b7fa8);
  display:grid; place-items:center; box-shadow:0 8px 22px rgba(0,177,234,.28);
}
.mp-totem .mp-tarjeta{
  width:38px; height:25px; border-radius:4px; background:#fff;
  box-shadow:0 2px 5px rgba(0,0,0,.18); animation:mpTarjeta 1.9s ease-in-out infinite;
}
.mp-totem .mp-onda{
  position:absolute; inset:0; border-radius:18px;
  border:2px solid rgba(0,177,234,.55); animation:mpOnda 1.9s ease-out infinite;
}
.mp-totem .mp-onda.d2{ animation-delay:.95s; }
@keyframes mpOnda{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.65); opacity:0; } }
@keyframes mpTarjeta{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }

.mp-check, .mp-cruz{
  width:62px; height:62px; margin:4px auto 0; border-radius:50%;
  display:grid; place-items:center; font-size:31px; font-weight:800; color:#fff;
}
.mp-check{ background:#1f8a5b; box-shadow:0 8px 20px rgba(31,138,91,.26); animation:mpPop .34s ease-out; }
.mp-cruz{ background:#c0392b; box-shadow:0 8px 20px rgba(192,57,43,.24); }
@keyframes mpPop{ 0%{ transform:scale(.55); opacity:0; } 70%{ transform:scale(1.08); } 100%{ transform:scale(1); opacity:1; } }

/* Lo que pasó solo, sin que nadie escribiera nada. */
.mp-hechos{
  list-style:none; margin:14px 0 0; padding:11px 13px; text-align:left;
  background:var(--surface-2); border-radius:11px; font-size:12.5px; color:var(--muted);
}
.mp-hechos li{ position:relative; padding-left:19px; margin:3px 0; }
.mp-hechos li::before{ content:'✓'; position:absolute; left:0; color:#1f8a5b; font-weight:800; }

@media (prefers-reduced-motion:reduce){
  .mp-totem .mp-onda, .mp-totem .mp-tarjeta, .mp-check{ animation:none !important; }
  .mp-totem .mp-onda{ opacity:.35; }
}


/* ============  v546 · Código de confirmación en Ventas Shopify  ============
   Es el código que la paciente ve en su comprobante y manda por WhatsApp.
   Se muestra en monoespaciado porque se lee carácter por carácter para
   cruzarlo con lo que llega, y se copia con un clic para no transcribirlo
   a mano (un 0 por una O manda a buscar un pedido que no existe). */
.conf-cod{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; letter-spacing: .02em;
  padding: 2px 7px; border-radius: 6px; cursor: copy;
  background: var(--surface-2); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  white-space: nowrap;
}
.conf-cod:hover{ border-color: var(--purple-2); color: var(--purple-2); }
.conf-cod:active{ transform: scale(.97); }

/* ============  v549 · Operativo sin dirección  ============
   Un operativo sin dirección hace que el correo de confirmación salga solo
   con el nombre de la ciudad. Antes salía con la dirección de la sede
   principal, que es peor: mandaba a la paciente a otra región. Se marca en
   ámbar porque no impide trabajar, pero hay que completarlo antes del viaje. */
.sede-falta{
  color: #b26a00; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  background: color-mix(in srgb, #f0a500 14%, transparent);
  padding: 2px 8px; border-radius: 999px;
}

/* ============  v552 · Trazar la reagenda  ============
   Marlene (Galvis) terminó con cuatro citas activas de lo mismo, una de
   $33.000 y tres de $99.990: pedía cambiar la hora, y se agendaba la nueva
   sin cerrar la anterior. Ahora se pregunta antes de crear la segunda, y la
   que nace de una reagenda queda marcada en la agenda.

   El ámbar es el mismo de "reagendada para…" que ya usa la ficha: no es un
   error —la cita está bien— pero cuenta de dónde salió. */
.pill-reag{
  flex: 0 0 auto; font-size: 8.5px; font-weight: 700; line-height: 1.4;
  padding: 0 4px; border-radius: 4px; white-space: nowrap;
  background: color-mix(in srgb, #f0a500 26%, transparent);
  color: #7a4a00;
}
[data-theme="dark"] .pill-reag{ background: color-mix(in srgb, #f0a500 30%, transparent); color: #ffdca8; }

/* La ventana que pregunta. El dato de la hora que ya existe va primero y
   grande: es lo único que hay que leer para poder responder. */
.reag-aviso{
  background: var(--surface-2); border-radius: 10px; padding: 12px 14px;
  border-left: 3px solid #f0a500; margin-bottom: 4px;
}
.reag-cuando{ font-weight: 700; font-size: 15px; text-transform: capitalize; }
.reag-que{ font-size: 13px; opacity: .8; margin-top: 3px; }
.reag-pago{ font-size: 12.5px; font-weight: 600; color: #b26a00; margin-top: 6px; }
[data-theme="dark"] .reag-pago{ color: #ffc86b; }
.reag-pregunta{ font-size: 14.5px; font-weight: 600; margin: 14px 0 2px; }
.reag-nota{ font-size: 12px; opacity: .65; line-height: 1.45; margin-top: 10px; }

/* ============  v564 · Cobrar en el Punto: elegir cómo va a pagar  ============
   La secretaria elige antes de mandar el cobro; la máquina puede desmentirla y
   entonces manda la máquina. Botones grandes porque se aprietan con la paciente
   al frente, esperando. */
.mp-metodos{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.mp-metodo{
  flex:1 1 auto; min-width:96px; padding:9px 10px; border-radius:10px; cursor:pointer;
  font-size:13px; font-weight:600; text-align:center;
  background:var(--surface-2); color:var(--text);
  border:1px solid color-mix(in srgb, var(--text) 12%, transparent);
}
.mp-metodo:hover{ border-color:var(--purple-2); }
.mp-metodo.on{ background:var(--purple-2); color:#fff; border-color:var(--purple-2); }

/* ============  v565 · El orbe de Zairi en el menú  ============
   Zairi Notes, Zairi Vision y Zairi AI compartían el MISMO vector, así que no
   se distinguían entre sí ni del resto del menú. Ahora llevan el orbe.

   Es CSS y no el orbe 3D: ese monta un canvas WebGL con shaders y tener tres
   corriendo siempre en la barra sería un costo permanente por 17 píxeles de
   decoración. A ese tamaño no se ve el shader; sí se ve que brilla y respira. */
.orbe-mini{
  width:17px; height:17px; flex:0 0 auto; display:block; border-radius:50%;
  /* Perla: luz arriba-izquierda, cuerpo violeta, un dejo turquesa abajo —los
     mismos tonos del orbe grande, resumidos a lo que se alcanza a ver. */
  background:
    radial-gradient(circle at 34% 26%, #fff 0%, rgba(255,255,255,.9) 14%, rgba(255,255,255,0) 46%),
    radial-gradient(circle at 74% 24%, rgba(255,190,235,.75) 0%, rgba(255,190,235,0) 46%),
    radial-gradient(circle at 68% 80%, rgba(150,225,235,.6) 0%, rgba(150,225,235,0) 52%),
    radial-gradient(circle at 46% 52%, #efe7ff 0%, #c9b6f7 46%, #8f6ae8 82%, #6a3df0 100%);
  box-shadow: 0 0 5px rgba(124,77,255,.45), inset 0 -1px 2px rgba(80,40,160,.18);
  animation: orbe-mini-late 3.4s ease-in-out infinite;
}
/* El destacado del módulo abierto lo hace crecer apenas: se nota vivo sin saltar. */
.nav-item.on .orbe-mini{ box-shadow:0 0 9px rgba(124,77,255,.8), inset 0 -1px 2px rgba(80,40,160,.18); }
[data-theme="dark"] .orbe-mini{ box-shadow:0 0 7px rgba(167,139,250,.6), inset 0 -1px 2px rgba(40,20,80,.35); }
@keyframes orbe-mini-late{
  0%,100%{ background-position:0% 0%, 100% 100%, 50% 50%; transform:scale(1); }
  50%    { background-position:12% 8%, 88% 92%, 50% 50%; transform:scale(1.06); }
}
@media(prefers-reduced-motion:reduce){
  .orbe-mini{ animation:none; }
}