/* ============================================================
   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%); }
/* v609 · Messenger: el azul de Facebook, bien lejos del morado de Instagram. */
.wa-ava.fbm{ background:linear-gradient(135deg,#00b2ff,#006aff); }
.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); }
[data-theme="dark"] .wa-ava.fbm{ background:linear-gradient(135deg,#1a9bff,#0a5ce0); }

@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}}
/* Videos (y los GIF, que WhatsApp entrega como video) se reproducen en el hilo. */
.wa-video{display:block;width:260px;max-width:100%;max-height:340px;border-radius:10px;margin-bottom:6px;background:#000}
@media (max-width:640px){.wa-video{width:200px}}
/* De dónde viene el mensaje (anuncio, historia): contexto para el equipo, no texto de la persona. */
.wa-contexto{display:block;margin-bottom:4px;font-size:11.5px;line-height:1.35;opacity:.72;white-space:normal}
/* Un archivo que no alcanzó a guardarse: se dice, para que alguien lo pida de nuevo. */
.wa-perdido{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;margin-bottom:4px;border:1px dashed currentColor;border-radius:8px;font-size:12.5px;line-height:1.35;opacity:.85;white-space:normal}

/* ── 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:sticky; left:0; }
.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:10 !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ú ------------------------------------- */
/* v620 · Retirada. Jaime pidió quitar todo lo que dice «nuevo» del menú: se fueron
   la bandera `nuevo` de NAV, su render y estas reglas (.nav-nuevo, su variante
   lima y el latido), que ya no tenían a quién vestir. */

/* --- 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, .mp-duda{
  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); }
/* Sin resultado: ni aprobado ni fallido. Se verifica en la cuenta de Mercado Pago. */
.mp-duda{ background:#b7791f; box-shadow:0 8px 20px rgba(183,121,31,.24); }
.mp-verificar{
  text-align:left; margin-top:12px; padding:12px 13px; border-radius:11px;
  background:var(--surface-2); font-size:13px;
}
.mp-verificar textarea{ width:100%; margin-top:4px; }
.mp-verificar-check{ display:flex; gap:9px; align-items:flex-start; font-weight:400; cursor:pointer; }
.mp-verificar-check input{ width:18px; height:18px; margin:1px 0 0; flex:0 0 auto; }
.mp-verificar .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;
}
@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 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  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 misma señal en Mensajes y en el embudo: quién pidió reagendar o reagendó
   (y de qué hora a cuál). Un poco más grande: ahí se lee, no se escanea. */
.pill-reag-msj{
  display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; line-height: 1.45; padding: 1px 7px; border-radius: 5px;
  background: color-mix(in srgb, #f0a500 22%, transparent); color: #7a4a00;
}
[data-theme="dark"] .pill-reag-msj{ 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; }
}


/* ============================================================================
   v568 · zairi · DOS LIENZOS
   ----------------------------------------------------------------------------
   Re-estilo completo al lenguaje de la landing de zairi (ESTILO-ZAIRI.md):
   papel blanco de día, noche casi negra, un solo acento azul, DM Sans + Qurova,
   contenedores de vidrio y ningún plano grande de color.

   Cómo está hecha esta capa (y por qué así):
   · Se APILA al final: no se borra ni se edita nada anterior. Las capas viejas
     siguen ahí porque 32 pruebas leen sus propios tramos por marcador.
   · Los componentes leen tokens vivos (--fondo, --texto, --linea, --acento…).
     Los tokens ANTIGUOS (--bg, --surface, --ink, --purple…) se redefinen aquí
     para que las 4.500 líneas anteriores y los 340 estilos en línea de app.js
     que usan var(--purple-2) etc. caigan solos en la paleta nueva.
   · El tema oscuro va en html[data-theme="dark"] (0,1,1): pesa más que todos los
     [data-theme="dark"] previos sin depender del orden.
   · Lo que abajo lleva !important es porque una capa anterior ya lo llevaba
     (menús de notificaciones, borde de .ia-sin-revisar, halo del orbe).
   ============================================================================ */

/* ---------- 0 · Tipografía auto-hospedada (sin CDN) ---------- */
@font-face{ font-family:'Qurova'; src:url('/fonts/Qurova-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Qurova'; src:url('/fonts/Qurova-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'DM Sans'; src:url('/fonts/DMSans-var.woff2') format('woff2-variations'); font-weight:100 1000; font-style:normal; font-display:swap; }

/* ---------- 1 · Paleta y tokens vivos ---------- */
:root{
  /* marca */
  --azul:#0A36F7; --azul-alto:#3358F8; --azul-luz:#5C79FA; --azul-pal:#ADBCFC; --azul-hondo:#051B7C;
  /* día */
  --papel:#FFFFFF; --papel-2:#F5F5F7; --tinta:#05070F; --tinta-2:#55596B; --tinta-3:#8A8F9E; --pelo:#D9DAE0;
  /* noche */
  --lienzo-0:#000209; --lienzo-1:#01040D; --blanco:#FFFFFF; --plata:#B9C0DA; --humo:#7A83A6;
  /* tokens vivos (lo único que leen los componentes nuevos) */
  --fondo:var(--papel); --texto:var(--tinta); --texto-2:var(--tinta-2); --texto-3:var(--tinta-3);
  --linea:var(--pelo); --acento:var(--azul); --acento-alto:var(--azul-alto); --acento-tinta:#FFFFFF;
  --acento-suave:#E9EFFF; --acento-rgb:10,54,247;
  --vidrio:rgba(255,255,255,.72);
  /* vidrio sobre papel */
  --v-fondo:linear-gradient(150deg,rgba(255,255,255,.74),rgba(255,255,255,.50));
  --v-fondo-alto:linear-gradient(150deg,rgba(255,255,255,.90),rgba(255,255,255,.78));
  --v-borde:rgba(16,20,40,.07);
  --v-sombra:inset 0 1px 0 rgba(255,255,255,.92), 0 1px 2px rgba(16,20,40,.04), 0 16px 40px -34px rgba(16,20,40,.42);
  --v-filtro:blur(18px) saturate(170%);
  /* superficies sólidas (menús, cabeceras pegajosas, tooltips) */
  --solido:#FFFFFF; --solido-2:#F5F5F7;
  /* movimiento */
  --sal:cubic-bezier(0.23, 1, 0.32, 1); --puerta:cubic-bezier(0.32, 0.72, 0, 1); --mudanza:.6s;
  /* radios */
  --r-boton:999px; --r-tarjeta:22px; --r-chica:14px; --r-campo:12px;
  /* sombra de dos capas (nunca un halo) */
  --pz-sombra:0 1px 2px rgba(16,20,40,.05), 0 18px 44px -30px rgba(16,20,40,.45);

  /* ---- puente a los tokens antiguos: así las capas previas y app.js cambian de lienzo ---- */
  --bg:var(--fondo); --lq-canvas:var(--fondo);
  --surface:var(--solido); --surface-2:var(--solido-2);
  --ink:var(--texto); --ink-soft:var(--texto-2); --line:var(--linea);
  --black:var(--tinta); --black-2:#0E1220;
  --purple:var(--acento); --purple-2:var(--acento-alto); --purple-soft:var(--acento-suave);
  --signature-purple-rgb:var(--acento-rgb); --lq-purple:var(--acento-rgb); --lq-violet:var(--acento-rgb);
  --signature-glass:rgba(255,255,255,.78); --signature-hairline:rgba(16,20,40,.07);
  --radius:var(--r-chica); --shadow:var(--pz-sombra);
  --danger:#C0392B; --ok:#1F8A5B;
  /* tokens que app.js usa en línea y nadie había declarado (se veían rotos) */
  --muted:var(--texto-2); --border:var(--linea); --text:var(--texto); --card:var(--solido);
  --gold:#C79A3A; --green:#1F8A5B;
  /* el agua/aurora antiguas quedan sin color por si alguna regla las sigue leyendo */
  --lq-blob-a:transparent; --lq-blob-b:transparent; --lq-blob-c:transparent; --lq-blob-d:transparent;
  --lq-drop:transparent; --lq-drop-2:transparent; --lq-sheen:transparent; --lq-sat:1;
}
html[data-theme="dark"]{
  --fondo:var(--lienzo-1); --texto:var(--blanco); --texto-2:var(--plata); --texto-3:var(--humo);
  --linea:rgba(255,255,255,.14); --acento:var(--azul-pal); --acento-alto:#C5D0FD; --acento-tinta:var(--tinta);
  --acento-suave:rgba(173,188,252,.14); --acento-rgb:173,188,252;
  --vidrio:rgba(3,7,24,.6);
  /* vidrio sobre noche */
  --v-fondo:linear-gradient(145deg,rgba(25,50,92,.46),rgba(3,10,27,.48)), rgba(4,12,31,.42);
  --v-fondo-alto:linear-gradient(145deg,rgba(25,50,92,.62),rgba(3,10,27,.78)), rgba(4,12,31,.72);
  --v-borde:rgba(184,220,255,.18);
  --v-sombra:inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(90,159,242,.08), 0 34px 80px -48px rgba(0,0,0,.88), 0 0 70px -46px rgba(72,177,255,.54);
  --v-filtro:blur(28px) saturate(142%);
  --solido:#070C1B; --solido-2:#0E1428;
  --pz-sombra:0 1px 2px rgba(0,0,0,.4), 0 18px 44px -30px rgba(0,0,0,.85);
  --bg:var(--fondo); --lq-canvas:var(--fondo);
  --surface:var(--solido); --surface-2:var(--solido-2);
  --ink:var(--texto); --ink-soft:var(--texto-2); --line:var(--linea);
  --black:#000209; --black-2:#070C1B;
  --purple:var(--acento); --purple-2:var(--acento-alto); --purple-soft:var(--acento-suave);
  --signature-purple-rgb:var(--acento-rgb); --lq-purple:var(--acento-rgb); --lq-violet:var(--acento-rgb);
  --signature-glass:rgba(7,12,27,.78); --signature-hairline:rgba(255,255,255,.10);
  --shadow:var(--pz-sombra);
  --muted:var(--texto-2); --border:var(--linea); --text:var(--texto); --card:var(--solido);
  --lq-blob-a:transparent; --lq-blob-b:transparent; --lq-blob-c:transparent; --lq-blob-d:transparent;
  --lq-drop:transparent; --lq-drop-2:transparent; --lq-sheen:transparent; --lq-sat:1;
}

/* ---------- 2 · Los dos lienzos (y fuera el agua) ---------- */
html{ background:var(--fondo); color-scheme:light; }
html[data-theme="dark"]{ color-scheme:dark; }
html body, html[data-theme="dark"] body{ background:var(--fondo); background-image:none; color:var(--texto); transition:background-color var(--mudanza) ease, color var(--mudanza) ease; }
body::before, body::after{ display:none; content:none; animation:none; }
/* El vidrio necesita algo detrás que difuminar: dos manchas al 5-6 %, quietas,
   apagadas antes de los cantos. Sin esto una lámina de vidrio se ve igual que
   una tarjeta opaca. */
#root::before{
  content:''; display:block; position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:1; filter:none; mask:none; -webkit-mask:none; animation:none; transform:none; width:auto; height:auto; left:0; top:0; border-radius:0; mix-blend-mode:normal;
  background:
    radial-gradient(52% 44% at 18% 8%, rgba(10,54,247,.06) 0%, rgba(10,54,247,.02) 45%, rgba(10,54,247,0) 72%),
    radial-gradient(46% 40% at 86% 92%, rgba(10,54,247,.05) 0%, rgba(10,54,247,.015) 48%, rgba(10,54,247,0) 74%);
}
html.lq-pointer #root::before, html[data-theme="dark"] #root::before, html[data-theme="dark"].lq-pointer #root::before{ opacity:1; filter:none; transform:none; animation:none; mask:none; -webkit-mask:none; }
html[data-theme="dark"] #root::before{
  background:
    radial-gradient(52% 44% at 18% 8%, rgba(72,120,255,.10) 0%, rgba(72,120,255,.035) 45%, rgba(72,120,255,0) 72%),
    radial-gradient(46% 40% at 86% 92%, rgba(72,177,255,.07) 0%, rgba(72,177,255,.02) 48%, rgba(72,177,255,0) 74%);
}
#root::after, html.lq-pointer #root::after, html[data-theme="dark"] #root::after, html[data-theme="dark"].lq-pointer #root::after{ display:none; content:none; animation:none; }

/* ---------- 3 · Tipografía ---------- */
body{ font-family:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size:14.5px; line-height:1.5; letter-spacing:-.01em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-optical-sizing:auto; }
h1,h2,h3,h4,.serif,.section-title,.tour h3,.welcome .name{ font-family:'DM Sans', system-ui, -apple-system, sans-serif; }
h1{ font-weight:600; letter-spacing:-.03em; line-height:1.1; }
h2{ font-weight:600; letter-spacing:-.024em; line-height:1.15; }
h3,h4{ font-weight:600; letter-spacing:-.016em; line-height:1.2; }
.page-head h1, .page-head h2{ font-size:24px; font-weight:600; letter-spacing:-.03em; color:var(--texto); }
.page-head .muted, .page-head p.muted{ color:var(--texto-2); font-size:13.5px; letter-spacing:-.012em; }
.section-title{ font-size:11.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--texto-3); }
.muted{ color:var(--texto-2); }
.hint{ color:var(--texto-3); }
a{ color:var(--acento); }
/* La palabra de marca va en Qurova y en minúscula; todo lo demás es DM Sans. */
.qz{ font-family:'Qurova','DM Sans',sans-serif; font-weight:500; font-size:1.06em; letter-spacing:-.005em; text-transform:lowercase; }
::selection{ background:rgba(var(--acento-rgb),.18); }

/* ---------- 4 · El vidrio (tres recetas y ninguna otra) ---------- */
/* receta A · tarjeta de contenido (papel de día, noche de noche) */
.card, .stat, .sim-hero, .zairi-reveal-card, .zairi-opportunity-card, .card.zn-portada, .zn-tarjeta, .kpi-card,
html[data-theme="dark"] .card, html[data-theme="dark"] .stat, html[data-theme="dark"] .sim-hero,
html[data-theme="dark"] .zairi-reveal-card, html[data-theme="dark"] .zairi-opportunity-card{
  background:var(--v-fondo); background-image:var(--v-fondo);
  -webkit-backdrop-filter:var(--v-filtro); backdrop-filter:var(--v-filtro);
  border:1px solid var(--v-borde); border-radius:var(--r-tarjeta);
  box-shadow:var(--v-sombra); color:var(--texto);
  animation:none; transform:none; filter:none; opacity:1;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.card::before, .card::after, .stat::before, .stat::after{ content:none; display:none; animation:none; }
.stat{ overflow:visible; }
.stat.gold, html[data-theme="dark"] .stat.gold{ background:var(--v-fondo); background-image:var(--v-fondo); color:var(--texto); }
.stat.gold .label, .stat.gold .mini{ color:var(--texto-3); }
.stat.gold .value{ color:var(--acento); }
.stat .label{ font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--texto-3); transition:none; }
.stat .value{ font-size:26px; font-weight:600; letter-spacing:-.03em; color:var(--texto); transition:none; }
.stat:hover .label{ color:var(--texto-3); letter-spacing:.12em; }
.stat:hover .value{ transform:none; }
.stat.clickable{ cursor:pointer; transition:border-color .2s ease, box-shadow .2s ease, transform .16s var(--sal); }
.stat.clickable.sel, .stat.active-stat{ border-color:rgba(var(--acento-rgb),.55) !important; outline:none; box-shadow:var(--v-sombra), 0 0 0 3px rgba(var(--acento-rgb),.14); }
.stat.clickable.sel::before, .stat.active-stat::before, .stat.clickable.sel::after, .stat.active-stat::after{ content:none; display:none; animation:none; }
@media(hover:hover) and (pointer:fine){
  .stat.clickable:hover{ border-color:rgba(var(--acento-rgb),.35); }
}
/* receta B · barra fija: sólo blur (saturate tiñe y deja un canto que viaja con el scroll) */
.deskbar, .sidebar, html[data-theme="dark"] .sidebar, .topbar{ -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); }
/* receta C · tooltip: tinta sólida, se tiene que leer sobre cualquier cosa */
.help-bubble, .ficha-hover{ background:var(--tinta); color:#fff; border:0; border-radius:var(--r-chica); box-shadow:0 24px 50px -20px rgba(16,20,40,.7); -webkit-backdrop-filter:none; backdrop-filter:none; }
html[data-theme="dark"] .help-bubble, html[data-theme="dark"] .ficha-hover{ background:#0E1428; border:1px solid var(--linea); }

/* ---------- 5 · Cáscara: menú lateral ---------- */
@media(min-width:821px){ .app{ grid-template-columns:240px 1fr; } }
.sidebar, html[data-theme="dark"] .sidebar, html:not([data-theme="dark"]) .sidebar{
  background:var(--vidrio); background-image:none; color:var(--texto-2);
  border-right:1px solid var(--linea); border-radius:0; box-shadow:none; animation:none;
  padding:18px 12px 16px;
}
.sidebar::before, .sidebar::after{ content:none; display:none; animation:none; }
.sidebar > *{ animation:none; opacity:1; transform:none; }
.side-brand{ height:40px; margin:2px 0 14px; }
.side-brand .side-logo-full{ height:30px; max-width:150px; left:8px; }
.side-brand .side-logo-mini{ height:30px; max-width:30px; }
.side-brand .side-logo, html:not([data-theme="dark"]) .sidebar .side-logo{ filter:none; }
.side-brand:hover .side-logo-full, html:not([data-theme="dark"]) .side-brand:hover .side-logo-full{ filter:none; transform:none; }
.nav-group{ font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--texto-3); padding:16px 12px 6px; }
.nav-group::after{ content:none; display:none; animation:none; }
html:not([data-theme="dark"]) .sidebar .nav-group, html[data-theme="dark"] .sidebar .nav-group{ color:var(--texto-3); }
.nav-item, html:not([data-theme="dark"]) .sidebar .nav-item{
  color:var(--texto-2); font-weight:400; font-size:13.5px; letter-spacing:-.012em;
  padding:8px 12px; border-radius:var(--r-boton); border:1px solid transparent; background:transparent;
  transition:background-color .18s ease, color .18s ease; animation:none; transform:none; box-shadow:none;
}
.nav-item::before, .nav-item::after, .nav-item.active::before, .nav-item.active::after,
.nav-item.pro.active::before, .nav-item.destacado.active::before,
.nav-item.pro.active::after, .nav-item.destacado.active::after{ content:none; display:none; animation:none; }
.nav-item .ic{ opacity:1; color:var(--texto-3); transition:color .18s ease, transform .18s var(--sal); }
@media(hover:hover) and (pointer:fine){
  .nav-item:hover, html:not([data-theme="dark"]) .sidebar .nav-item:hover{ background:rgba(5,7,15,.05); color:var(--texto); }
  html[data-theme="dark"] .sidebar .nav-item:hover{ background:rgba(255,255,255,.07); color:var(--texto); }
  .nav-item:hover .ic{ color:var(--texto); }
}
.nav-item.active, .nav-item.pro.active, .nav-item.destacado.active,
html:not([data-theme="dark"]) .sidebar .nav-item.active,
html:not([data-theme="dark"]) .sidebar .nav-item.pro.active,
html:not([data-theme="dark"]) .sidebar .nav-item.destacado.active,
html[data-theme="dark"] .sidebar .nav-item.active{
  background:rgba(var(--acento-rgb),.10); color:var(--acento); font-weight:500;
  border-color:transparent; box-shadow:none; animation:none;
}
.nav-item.active .ic, .nav-item.active .nav-label,
html:not([data-theme="dark"]) .sidebar .nav-item.active .ic,
html:not([data-theme="dark"]) .sidebar .nav-item.active .nav-label,
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,
.nav-item.pro.active .nav-label, .nav-item.pro.active .ic,
.nav-item.destacado.active .nav-label, .nav-item.destacado.active .ic{ color:var(--acento); }
/* Los módulos Pro ya no van en lima: mismo color que todos y una etiqueta discreta */
.nav-item.pro .nav-label, .nav-item.destacado .nav-label, .nav-item.pro .ic, .nav-item.destacado .ic,
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:inherit; }
.pro-badge{ font-size:9px; font-weight:600; letter-spacing:.08em; color:var(--texto-3); border:1px solid var(--linea); border-radius:var(--r-boton); padding:1px 6px; }
.nav-badge, .bell-badge{ background:var(--acento); color:var(--acento-tinta); box-shadow:0 0 0 2px var(--fondo); animation:none; font-weight:600; }
.nav-spacer{ flex:1; }
.nav-user, html:not([data-theme="dark"]) .sidebar .nav-user{ border-top:1px solid var(--linea); color:var(--texto-2); padding-top:14px; }
.nav-user b{ color:var(--texto); font-weight:500; }
.collapse-btn, html:not([data-theme="dark"]) .sidebar .collapse-btn{
  background:transparent; color:var(--texto-3); border:1px solid transparent; border-radius:var(--r-boton);
  width:32px; height:32px; box-shadow:none; transition:background-color .18s ease, color .18s ease;
}
@media(hover:hover) and (pointer:fine){
  .collapse-btn:hover, html:not([data-theme="dark"]) .sidebar .collapse-btn:hover{ background:rgba(5,7,15,.05); color:var(--texto); }
  html[data-theme="dark"] .collapse-btn:hover{ background:rgba(255,255,255,.07); }
}
.logout, .sidebar .logout, html:not([data-theme="dark"]) .sidebar .logout{
  background:transparent; color:var(--texto-2); border:1px solid var(--linea); border-radius:var(--r-boton);
  padding:6px 12px; font-size:12.5px; font-weight:500; box-shadow:none;
}
.theme-toggle{ background:transparent; color:var(--texto-2); border:1px solid var(--linea); border-radius:var(--r-boton); width:36px; height:36px; display:inline-grid; place-items:center; box-shadow:none; }
/* scroll del menú */
.sidebar{ scrollbar-width:thin; scrollbar-color:rgba(127,131,150,.35) transparent; }
.sidebar::-webkit-scrollbar{ width:6px; }
.sidebar::-webkit-scrollbar-thumb{ background:rgba(127,131,150,.35); border:0; border-radius:99px; }

/* ---------- 6 · Cáscara: barra superior ---------- */
.deskbar{ background:transparent; border:0; box-shadow:none; animation:none; -webkit-backdrop-filter:none; backdrop-filter:none; mask:none; -webkit-mask:none; }
.deskbar::before{
  content:''; display:block; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:var(--vidrio); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);
  /* el canto de la banda se apaga con una curva cuya pendiente llega a cero */
  -webkit-mask-image:linear-gradient(180deg,#000 0 62%,rgba(0,0,0,.74) 76%,rgba(0,0,0,.42) 86%,rgba(0,0,0,.17) 94%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0 62%,rgba(0,0,0,.74) 76%,rgba(0,0,0,.42) 86%,rgba(0,0,0,.17) 94%,transparent 100%);
  border:0; box-shadow:none;
}
.deskbar-search{
  background:var(--solido-2); border:1px solid var(--linea); border-radius:var(--r-boton); color:var(--texto-3);
  min-height:40px; padding:0 14px 0 10px; box-shadow:none; transition:border-color .18s ease, background-color .18s ease;
}
html[data-theme="dark"] .deskbar-search{ background:rgba(255,255,255,.05); }
@media(hover:hover) and (pointer:fine){
  .deskbar-search:hover{ border-color:rgba(var(--acento-rgb),.4); }
}
.ds-ph{ color:var(--texto-3); font-size:13.5px; letter-spacing:-.01em; }
.ds-kbd{ background:transparent; border:1px solid var(--linea); border-radius:8px; color:var(--texto-3); font-size:11px; padding:2px 6px; }
.deskbar-bell, .deskbar .theme-toggle{ width:38px; height:38px; border-radius:var(--r-boton); border:1px solid var(--linea); background:transparent; color:var(--texto-2); box-shadow:none; transition:background-color .18s ease, border-color .18s ease, color .18s ease; }
@media(hover:hover) and (pointer:fine){
  .deskbar-bell:hover, .deskbar .theme-toggle:hover{ background:var(--solido-2); border-color:var(--linea); color:var(--texto); }
}
.acct-btn{ background:transparent; border:1px solid var(--linea); border-radius:var(--r-boton); color:var(--texto); box-shadow:none; padding:4px 12px 4px 4px; }
.acct-btn .acct-txt small, .acct-txt small{ color:var(--texto-3); }
.acct-logo{ border-radius:50%; background:var(--solido-2); }

/* ---------- 7 · Botones: todo control es una píldora ---------- */
.btn, .btn.ghost, .btn.gold, .btn.danger, .btn.sm, .go, .seg button, .tab,
html[data-theme="dark"] .btn, html[data-theme="dark"] .btn.ghost, html[data-theme="dark"] .btn.gold{
  display:inline-flex; align-items:center; justify-content:center; gap:.45em;
  min-height:40px; padding:9px 18px; border-radius:var(--r-boton);
  font-family:inherit; font-size:14px; font-weight:500; letter-spacing:-.01em; line-height:1.2;
  background:var(--solido); color:var(--texto); border:1px solid var(--linea);
  box-shadow:none; background-image:none; overflow:visible; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .14s var(--sal), background-color .18s ease, border-color .18s ease, color .18s ease;
}
html[data-theme="dark"] .btn, html[data-theme="dark"] .btn.ghost, html[data-theme="dark"] .seg button, html[data-theme="dark"] .tab{ background:rgba(255,255,255,.04); }
.btn::before, .btn::after{ content:none; display:none; }
.btn:active, .go:active{ transform:scale(.97); }
.btn.gold, html[data-theme="dark"] .btn.gold, .go, .applogin .go{ background:var(--acento); color:var(--acento-tinta); border-color:transparent; }
.btn.ghost, html[data-theme="dark"] .btn.ghost{ background:transparent; color:var(--texto); border-color:var(--linea); }
.btn.danger{ color:var(--danger); border-color:rgba(192,57,43,.35); background:transparent; }
.btn.sm{ min-height:32px; padding:5px 12px; font-size:13px; }
.btn.sm.ghost{ min-height:32px; }
.btn[disabled], .btn:disabled, .go[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }
@media(hover:hover) and (pointer:fine){
  .btn:hover, html[data-theme="dark"] .btn:hover{ background:var(--solido-2); border-color:var(--linea); box-shadow:none; transform:none; }
  html[data-theme="dark"] .btn:hover{ background:rgba(255,255,255,.09); }
  .btn.gold:hover, html[data-theme="dark"] .btn.gold:hover, .go:hover, .applogin .go:hover{ background:var(--acento-alto); color:var(--acento-tinta); border-color:transparent; box-shadow:none; }
  .btn.ghost:hover, html[data-theme="dark"] .btn.ghost:hover{ background:var(--solido-2); }
  html[data-theme="dark"] .btn.ghost:hover{ background:rgba(255,255,255,.07); }
  .btn.danger:hover{ background:rgba(192,57,43,.08); }
}
/* segmentos y pestañas: una píldora contenedora con la píldora activa en tinta */
.seg{ display:inline-flex; gap:2px; padding:3px; border-radius:var(--r-boton); background:var(--solido-2); border:1px solid var(--linea); }
html[data-theme="dark"] .seg{ background:rgba(255,255,255,.05); }
.seg button, html[data-theme="dark"] .seg button{ min-height:32px; padding:5px 14px; font-size:13px; background:transparent; border-color:transparent; color:var(--texto-2); }
.seg button.on, html[data-theme="dark"] .seg button.on{ background:var(--tinta); color:#fff; border-color:transparent; box-shadow:none; }
html[data-theme="dark"] .seg button.on{ background:#fff; color:var(--tinta); }
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--linea); padding-bottom:0; }
.tab, html[data-theme="dark"] .tab{ min-height:36px; padding:6px 14px; border:0; border-radius:var(--r-boton) var(--r-boton) 0 0; background:transparent; color:var(--texto-2); font-size:13.5px; }
.tab.active{ color:var(--texto); box-shadow:inset 0 -2px 0 var(--acento); background:transparent; }
/* cerrar: un botón de icono neutro (adiós al punto rojo) */
.x-btn, .close-x, .chat-mini-btn[title^="Cerrar"], .modal .close-x, .zn-panel .close-x{
  width:32px; height:32px; min-width:32px; padding:0; border:1px solid transparent; border-radius:var(--r-boton);
  background:transparent; color:var(--texto-2); font-size:16px; line-height:1; box-shadow:none;
  display:inline-grid; place-items:center; transform:none; transition:background-color .18s ease, color .18s ease;
}
.x-btn svg, .close-x svg, .chat-mini-btn[title^="Cerrar"] svg{ width:16px; height:16px; opacity:1; color:currentColor; stroke:currentColor; transform:none; }
.x-btn::after, .close-x::after, .chat-mini-btn[title^="Cerrar"]::after, .x-btn::before, .close-x::before{ content:none; display:none; }
@media(hover:hover) and (pointer:fine){
  .x-btn:hover, .close-x:hover, .chat-mini-btn[title^="Cerrar"]:hover{ background:var(--solido-2); color:var(--texto); box-shadow:none; }
  html[data-theme="dark"] .x-btn:hover, html[data-theme="dark"] .close-x:hover{ background:rgba(255,255,255,.08); }
}
@media(pointer:coarse){
  .x-btn, .close-x, .chat-mini-btn[title^="Cerrar"], .modal .close-x{ width:40px; height:40px; min-width:40px; }
  .x-btn::after, .close-x::after{ content:none; }
  .btn, .go{ min-height:44px; }
}
.modal .close-x{ position:absolute; top:14px; right:14px; float:none; }

/* ---------- 8 · Formularios ---------- */
label{ color:var(--texto-2); font-size:12.5px; font-weight:500; letter-spacing:.01em; }
input, select, textarea, .login-card input, .applogin input,
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea{
  font-family:inherit; font-size:14px; letter-spacing:-.01em; color:var(--texto);
  background:var(--solido); border:1px solid var(--linea); border-radius:var(--r-campo);
  min-height:40px; padding:8px 12px; box-shadow:none; transform:none;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea, html[data-theme="dark"] .applogin input{ background:rgba(255,255,255,.05); }
textarea{ min-height:88px; line-height:1.45; }
input[type="checkbox"], input[type="radio"]{ min-height:0; width:16px; height:16px; accent-color:var(--acento); padding:0; border-radius:4px; box-shadow:none; }
input[type="color"]{ padding:2px; min-height:32px; }
input::placeholder, textarea::placeholder{ color:var(--texto-3); opacity:1; }
input:focus, select:focus, textarea:focus, .login-card input:focus, .applogin input:focus,
html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus{
  outline:none; border-color:var(--azul-luz); box-shadow:0 0 0 3px rgba(var(--acento-rgb),.14); background:var(--solido); transform:none;
}
html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus{ background:rgba(255,255,255,.07); }
input.input-required{ border-color:rgba(192,57,43,.55) !important; }
.err{ color:var(--danger); font-size:13px; }
.ok{ color:var(--ok); }
.fld{ margin-bottom:12px; }
.check-row{ border-radius:var(--r-chica); }

/* ---------- 9 · Tablas ---------- */
table{ border-collapse:collapse; }
th{ font-size:11.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-3); border-bottom:1px solid var(--linea); padding:10px 14px; background:transparent; }
td{ font-size:13.5px; padding:11px 14px; border-bottom:1px solid var(--linea); color:var(--texto); vertical-align:middle; }
tbody tr{ animation:none; transition:background-color .15s ease; opacity:1; transform:none; }
tbody tr:last-child td{ border-bottom:0; }
tr:hover td, .row-click:hover td{ background:rgba(5,7,15,.03); }
html[data-theme="dark"] tr:hover td, html[data-theme="dark"] .row-click:hover td{ background:rgba(255,255,255,.04); }
.row-click:hover{ transform:none; }
tr.row-sel, tr.row-sel td{ background:rgba(var(--acento-rgb),.07); }
.tbl-scroll, .card.tbl-scroll{ padding:0; overflow:auto; }
.card.tbl-scroll table th:first-child, .card.tbl-scroll table td:first-child{ padding-left:20px; }
.card.tbl-scroll table th:last-child, .card.tbl-scroll table td:last-child{ padding-right:20px; }
.kpi-detail-list thead{ background:var(--solido); -webkit-backdrop-filter:none; backdrop-filter:none; }

/* ---------- 10 · Píldoras, chips, etiquetas ---------- */
.pill{ display:inline-flex; align-items:center; gap:5px; border-radius:var(--r-boton); padding:3px 10px; font-size:11.5px; font-weight:500; letter-spacing:.01em; background:var(--solido-2); color:var(--texto-2); border:1px solid var(--linea); }
html[data-theme="dark"] .pill{ background:rgba(255,255,255,.06); }
.pill.cat, .pill.facial, .pill.corporal, .pill.clinica{ background:var(--acento-suave); color:var(--acento); border-color:transparent; }
.pill.green{ background:rgba(31,138,91,.10); color:#1F8A5B; border-color:transparent; }
.pill.red{ background:rgba(192,57,43,.10); color:#C0392B; border-color:transparent; }
.pill.warn{ background:rgba(199,154,58,.14); color:#8A6D1F; border-color:transparent; }
.pill.gold{ background:var(--acento-suave); color:var(--acento); border-color:transparent; }
html[data-theme="dark"] .pill.green{ color:#7ED9A8; } html[data-theme="dark"] .pill.red{ color:#F19C91; } html[data-theme="dark"] .pill.warn{ color:#E8C77A; }
/* v609 · Canal Messenger en las tablas de Mensajes (WhatsApp es .green, Instagram .cat). */
.pill.fbm{ background:rgba(0,106,255,.10); color:#0A5BD8; border-color:transparent; }
html[data-theme="dark"] .pill.fbm{ color:#8CB8FF; }
.zx-aviso{ background:var(--v-fondo-alto); -webkit-backdrop-filter:var(--v-filtro); backdrop-filter:var(--v-filtro); border:1px solid var(--v-borde); border-radius:var(--r-chica); box-shadow:var(--pz-sombra); color:var(--texto); }

/* ---------- 11 · Modales, menús y paleta de comandos ---------- */
.modal-bg, .slot-pop-overlay, .notif-ov, .acct-ov, .drawer-ov, .cmd-ov{ background:rgba(5,7,15,.28); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:none; }
html[data-theme="dark"] .modal-bg, html[data-theme="dark"] .slot-pop-overlay, html[data-theme="dark"] .notif-ov, html[data-theme="dark"] .acct-ov, html[data-theme="dark"] .cmd-ov{ background:rgba(0,2,9,.62); }
.modal, .slot-pop, .zn-panel, .tour .box, .welcome .c,
html[data-theme="dark"] .modal, html[data-theme="dark"] .slot-pop, html[data-theme="dark"] .zn-panel{
  background:var(--v-fondo-alto); background-image:var(--v-fondo-alto);
  -webkit-backdrop-filter:var(--v-filtro); backdrop-filter:var(--v-filtro);
  border:1px solid var(--v-borde); border-radius:var(--r-tarjeta); box-shadow:var(--v-sombra), var(--pz-sombra); color:var(--texto);
  animation:modal-llega .22s var(--sal) both;
}
@keyframes modal-llega{ from{ opacity:0; transform:scale(.98) translateY(6px); } to{ opacity:1; transform:none; } }
.modal h2, .modal h3{ letter-spacing:-.024em; }
.modal-actions{ gap:8px; }
/* menús flotantes: cuenta, notificaciones, chat, paleta ⌘K */
html .notif-menu, html .acct-menu, html [data-theme="dark"] .notif-menu, html [data-theme="dark"] .acct-menu,
html[data-theme="dark"] .notif-menu, html[data-theme="dark"] .acct-menu, .chat-menu, .chat-link-pop, .cmd,
html[data-theme="dark"] .chat-menu, html[data-theme="dark"] .cmd{
  background:var(--v-fondo-alto) !important; background-image:var(--v-fondo-alto) !important;
  -webkit-backdrop-filter:var(--v-filtro) !important; backdrop-filter:var(--v-filtro) !important;
  border:1px solid var(--v-borde) !important; border-radius:var(--r-chica); box-shadow:var(--pz-sombra) !important; color:var(--texto);
  animation:menu-llega .18s var(--sal) both; transform-origin:top right;
}
.cmd{ border-radius:var(--r-tarjeta); transform-origin:top center; }
.chat-menu{ transform-origin:top right; }
@keyframes menu-llega{ from{ opacity:0; transform:scale(.97) translateY(-4px); } to{ opacity:1; transform:none; } }
html .notif-head, [data-theme="dark"] .notif-head, html[data-theme="dark"] .notif-head{ background:transparent !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; color:var(--texto); border-bottom:1px solid var(--linea); }
.notif-item, button.notif-item, [data-theme="dark"] .notif-item, [data-theme="dark"] button.notif-item{ background:transparent !important; border-radius:var(--r-chica); color:var(--texto); }
.notif-item.unread, button.notif-item.unread, [data-theme="dark"] .notif-item.unread, [data-theme="dark"] button.notif-item.unread{ background:rgba(var(--acento-rgb),.08) !important; }
@media(hover:hover) and (pointer:fine){
  .notif-item:hover, button.notif-item:hover, [data-theme="dark"] .notif-item:hover, [data-theme="dark"] button.notif-item:hover{ background:rgba(5,7,15,.05) !important; }
  html[data-theme="dark"] .notif-item:hover, html[data-theme="dark"] button.notif-item:hover{ background:rgba(255,255,255,.07) !important; }
}
.notif-dot{ background:var(--acento); width:8px; height:8px; }
.notif-dot.web{ background:#0EA5A5; } .notif-dot.zairi{ background:#C79A3A; }
.notif-head button{ color:var(--acento); }
.acct-item{ border-radius:var(--r-chica); color:var(--texto); }
.acct-item.danger{ color:var(--danger); }
.cmd-search input{ background:transparent; border:0; box-shadow:none; }
.cmd-kbd, .cmd-sec{ color:var(--texto-3); }
.cmd-item.on, .cmd-item:hover{ background:rgba(var(--acento-rgb),.08); }

/* ---------- 12 · Chats y mensajes ---------- */
.chat-msg.out .chat-bubble, .wa-msg.out .wa-bub{ background:var(--tinta); color:#fff; background-image:none; }
html[data-theme="dark"] .chat-msg.out .chat-bubble, html[data-theme="dark"] .wa-msg.out .wa-bub{ background:#fff; color:var(--tinta); }
.chat-msg.in .chat-bubble, .wa-msg.in .wa-bub{ background:var(--solido-2); color:var(--texto); }
html[data-theme="dark"] .chat-msg.in .chat-bubble, html[data-theme="dark"] .wa-msg.in .wa-bub{ background:rgba(255,255,255,.07); }
.wa-chat, html[data-theme="dark"] .wa-chat, .chat-thread{ background:transparent; background-image:none; }
.wa-list, .wa-side{ border-color:var(--linea); }
.chat-win{ background:var(--v-fondo-alto); -webkit-backdrop-filter:var(--v-filtro); backdrop-filter:var(--v-filtro); border:1px solid var(--v-borde); border-radius:var(--r-tarjeta) var(--r-tarjeta) 0 0; box-shadow:var(--pz-sombra); }
.chat-win-head{ background:transparent; color:var(--texto); border-bottom:1px solid var(--linea); }
.chat-toast{ background:var(--tinta); color:#fff; border-radius:var(--r-chica); }
.chat-gente-link{ color:var(--acento) !important; }

/* ---------- 13 · Agenda ---------- */
.cal-head, .cal-time, .cal-col-head{ color:var(--texto-3); font-size:11.5px; font-weight:500; letter-spacing:.06em; }
.cal-grid, .cal-col, .cal-row, .cal-cell{ border-color:var(--linea); }
.cal-appt{ border-radius:10px; box-shadow:none; }
.bar-fill{ background:var(--acento); background-image:none; }
.cd-slot-sel{ background:rgba(var(--acento-rgb),.16) !important; }
.agenda-filtros .btn.sm{ min-height:30px; }
.slot-pop-box{ border-radius:var(--r-chica); }
.ahora-linea, .cal-now{ background:var(--acento); }

/* ---------- 14 · Entrada: login, bienvenida, visita guiada, primer arranque ---------- */
.login-wrap, .applogin{ background:var(--fondo); background-image:none; }
.applogin::before, .applogin::after{ display:none; content:none; animation:none; }
.applogin .inner{
  background:var(--v-fondo-alto); -webkit-backdrop-filter:var(--v-filtro); backdrop-filter:var(--v-filtro);
  border:1px solid var(--v-borde); border-radius:var(--r-tarjeta); box-shadow:var(--v-sombra), var(--pz-sombra);
  color:var(--texto); animation:none; padding:40px 36px 32px;
}
.applogin img{ height:30px; animation:none; opacity:1; }
.logo-clinica{ background:#fff; border-radius:8px; padding:4px 8px; object-fit:contain; }
.applogin img.logo-clinica{ max-height:56px; }
@media(min-width:821px){ .app.collapsed .deskbar-logo.logo-clinica{ display:block; } }
.applogin h1{ color:var(--texto); font-size:24px; font-weight:600; letter-spacing:-.03em; }
.applogin .sub, .applogin label{ color:var(--texto-2); }
.applogin .go{ width:100%; margin-top:6px; font-size:15px; }
.applogin a{ color:var(--acento); }
.login-card{ background:var(--v-fondo-alto); border:1px solid var(--v-borde); border-radius:var(--r-tarjeta); box-shadow:var(--pz-sombra); }
.login-card .tag, .login-card label{ color:var(--texto-2); }
.welcome{ background:var(--fondo); -webkit-backdrop-filter:none; backdrop-filter:none; color:var(--texto); }
.welcome .hi, .welcome .ph{ color:var(--texto-2); }
.welcome .name{ color:var(--texto); font-weight:600; letter-spacing:-.04em; }
.tour{ background:rgba(5,7,15,.32); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
html[data-theme="dark"] .tour{ background:rgba(0,2,9,.62); }
.tour .box{ color:var(--texto); }
.tour h3{ color:var(--texto); font-weight:600; letter-spacing:-.02em; }
.tour .dot{ background:var(--linea); } .tour .dot.on{ background:var(--acento); }

/* ---------- 15 · Luces de Zairi (quedan quietas: un solo acento, ninguna aurora) ---------- */
.zairi-opportunity-card::before, .zairi-opportunity-card::after, .zairi-reveal-card::before, .zairi-reveal-card::after,
.sim-hero::before, .sim-hero::after, .zn-panel::before, .zn-panel::after, .orb3d-wrap::after{ content:none; display:none; animation:none; }
.zairi-opportunity-card, .zairi-reveal-card, .sim-hero, .zairi-pulse{ animation:none; }
.orb3d-glow{ background:radial-gradient(circle, rgba(var(--acento-rgb),.16) 0%, rgba(var(--acento-rgb),0) 70%) !important; animation:none; }
.orbe-mini{ box-shadow:none; }
.zn-vivo i{ background:var(--acento); }
.help-orb{ filter:none; }
.empty{ color:var(--texto-3); animation:none; opacity:1; transform:none; border:1px dashed var(--linea); border-radius:var(--r-tarjeta); background:transparent; }
.main > *, .stats .stat, .deskbar, .sim-panel, .sim-panel > div > *{ animation:none; opacity:1; transform:none; filter:none; }
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation:none; }

/* ---------- 16 · Foco y barras de desplazamiento ---------- */
button:focus-visible, a:focus-visible, [role="button"]:focus-visible, .nav-item:focus-visible, .btn:focus-visible,
.zn-quien:focus-visible, .zn-tarjeta:focus-visible, .stat.clickable:focus-visible, .inicio-cita-row:focus-visible, .vc-luz:focus-visible{
  outline:2px solid var(--acento); outline-offset:2px; box-shadow:none;
}
*{ scrollbar-width:thin; scrollbar-color:rgba(127,131,150,.35) transparent; }
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:rgba(127,131,150,.35); border:2px solid transparent; background-clip:content-box; border-radius:99px; }
.main-col::-webkit-scrollbar{ width:10px; }
.main-col::-webkit-scrollbar-thumb{ background:rgba(127,131,150,.35); border:3px solid transparent; background-clip:content-box; border-radius:99px; }

/* ---------- 17 · Móvil ---------- */
@media(max-width:820px){
  .topbar{ background:var(--vidrio); border-bottom:0; box-shadow:none; color:var(--texto); }
  .topbar::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:linear-gradient(90deg,transparent,var(--linea) 20% 80%,transparent); }
  .burger span{ background:var(--texto); }
  .sidebar, html[data-theme="dark"] .sidebar, html:not([data-theme="dark"]) .sidebar{ background:var(--v-fondo-alto); -webkit-backdrop-filter:var(--v-filtro); backdrop-filter:var(--v-filtro); border-right:1px solid var(--v-borde); }
  .card, .stat{ border-radius:18px; }
}

/* ---------- 18 · Accesibilidad: cada pieza declara su reposo ---------- */
@media (prefers-reduced-transparency: reduce){
  .card, .stat, .sim-hero, .zairi-reveal-card, .zairi-opportunity-card, .modal, .slot-pop, .zn-panel, .applogin .inner, .chat-win, .zx-aviso, .tour .box,
  html[data-theme="dark"] .card, html[data-theme="dark"] .stat, html[data-theme="dark"] .modal{ background:var(--solido); background-image:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
  html .notif-menu, html .acct-menu, html[data-theme="dark"] .notif-menu, html[data-theme="dark"] .acct-menu, .chat-menu, .cmd{ background:var(--solido) !important; background-image:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  .sidebar, html[data-theme="dark"] .sidebar, html:not([data-theme="dark"]) .sidebar, .deskbar::before, .topbar{ background:var(--solido); -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media (prefers-contrast: more){
  .card, .stat, .modal, .slot-pop, .zn-panel, .applogin .inner, .sidebar{ border-color:rgba(6,18,64,.38); }
  html[data-theme="dark"] .card, html[data-theme="dark"] .stat, html[data-theme="dark"] .modal, html[data-theme="dark"] .sidebar{ border-color:rgba(255,255,255,.5); }
  .btn, input, select, textarea{ border-color:var(--texto-2); }
}
@media (prefers-reduced-motion: reduce){
  .modal, .slot-pop, .zn-panel, html .notif-menu, html .acct-menu, .chat-menu, .cmd{ animation:none; }
  .btn:active, .go:active{ transform:none; }
  html body{ transition:none; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card, .stat, .sim-hero, .zairi-reveal-card, .modal, .slot-pop, .zn-panel, .applogin .inner, .chat-win, .sidebar, .deskbar::before, .topbar{ background:var(--solido); background-image:none; }
  html .notif-menu, html .acct-menu, .chat-menu, .cmd{ background:var(--solido) !important; background-image:none !important; }
}

/* ---------- 19 · El orbe pequeño del menú, en la paleta nueva y quieto ---------- */
.orbe-mini, [data-theme="dark"] .orbe-mini, .nav-item.on .orbe-mini{
  background:
    radial-gradient(circle at 34% 26%, #fff 0%, rgba(255,255,255,.92) 12%, rgba(255,255,255,0) 44%),
    radial-gradient(circle at 70% 78%, rgba(173,188,252,.7) 0%, rgba(173,188,252,0) 52%),
    radial-gradient(circle at 46% 52%, #E9EFFF 0%, #9DB2FB 44%, #3358F8 80%, #0A36F7 100%);
  box-shadow:none; animation:none; transform:none;
}

/* ---------- 20 · Avisos del equipo: tarjeta chica, no píldora ---------- */
.zx-avisos .zx-aviso, .zx-aviso{ border-radius:var(--r-chica); }
@media(max-width:820px){
  .app{ grid-template-columns:1fr; }
  .app.collapsed .sidebar{ width:min(84vw,320px); }
}

/* ---------- 21 · Completitud: restos del catálogo que la cascada no alcanzaba ---------- */
.pill.gray{ background:var(--solido-2); color:var(--texto-2); border-color:var(--linea); }
.badge.ok{ background:rgba(31,138,91,.12); color:#1F8A5B; border-radius:var(--r-boton); }
.badge.wait{ background:rgba(199,154,58,.16); color:#8A6D1F; border-radius:var(--r-boton); }
.badge.no{ background:rgba(192,57,43,.12); color:#C0392B; border-radius:var(--r-boton); }
html[data-theme="dark"] .badge.ok{ color:#7ED9A8; } html[data-theme="dark"] .badge.wait{ color:#E8C77A; } html[data-theme="dark"] .badge.no{ color:#F19C91; }
.cal-more{ background:rgba(var(--acento-rgb),.10); color:var(--acento); border-radius:var(--r-boton); }
.cal-more:hover{ background:rgba(var(--acento-rgb),.18); color:var(--acento); transform:none; }
.cd-slot:hover{ background:rgba(var(--acento-rgb),.06); }
.leg-chip{ border-radius:var(--r-boton); }
.leg-chip:hover{ border-color:rgba(var(--acento-rgb),.5); }
.leg-chip.on{ background:rgba(var(--acento-rgb),.10); border-color:rgba(var(--acento-rgb),.5); color:var(--acento); box-shadow:none; }
.wa-chip, .sim-chip{ border-radius:var(--r-boton); }
.wa-chip.on{ background:rgba(var(--acento-rgb),.10); color:var(--acento); border-color:rgba(var(--acento-rgb),.5); }
.wa-chip.humano.on{ background:var(--acento); color:var(--acento-tinta); border-color:var(--acento); }
.chat-ava{ background:var(--acento-suave); color:var(--acento); font-weight:600; }
.chat-burb{ background:var(--solido-2); color:var(--texto); }
.chat-burb.mia{ background:var(--tinta); color:#fff; }
html[data-theme="dark"] .chat-burb{ background:rgba(255,255,255,.07); }
html[data-theme="dark"] .chat-burb.mia{ background:#fff; color:var(--tinta); }
.chat-burb-quien{ color:var(--acento); }
.stat.gold a, .stat.gold .mini a, .stat.gold .lnk{ color:var(--acento); }
.applogin .err, .err{ color:var(--danger); }
html[data-theme="dark"] .applogin .err, html[data-theme="dark"] .err{ color:#F19C91; }
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder{ color:var(--texto-3); }
html[data-theme="dark"] .zx-aviso{ background:var(--v-fondo-alto); background-image:var(--v-fondo-alto); }
.aviso-duplicado{ border-radius:var(--r-chica); }
.chat-toast{ border-left:0; }

/* ---------- 22 · La tarjeta destacada: su enlace también va en acento ---------- */
.stat.gold.clickable .mini, .stat.gold .mini{ color:var(--acento); opacity:1; }

/* ---------- 23 · La marca en el menú: anillo de zairi y palabra en Qurova ---------- */
.orbe-mini, [data-theme="dark"] .orbe-mini, html[data-theme="dark"] .orbe-mini, .nav-item.on .orbe-mini{
  width:18px; height:18px; display:block; object-fit:contain; border-radius:0;
  background:none; box-shadow:none; animation:none; transform:none; opacity:.92;
}
html[data-theme="dark"] .orbe-mini{ filter:brightness(0) invert(1); opacity:.82; }
.nav-item.active .orbe-mini, html[data-theme="dark"] .nav-item.active .orbe-mini{ opacity:1; }
.nav-label .qz, .cmd-lbl .qz{ font-size:1.08em; letter-spacing:-.005em; }
/* El logo del menú plegado: en noche va en blanco, como el logotipo */
html[data-theme="dark"] .side-brand .side-logo-mini,
html[data-theme="dark"] .app.collapsed .side-brand .side-logo-mini{ filter:brightness(0) invert(1); }

/* ---------- 24 · Agenda: la cabecera de filtros como una sola herramienta ---------- */
.agenda-filtros{
  background:var(--v-fondo); background-image:var(--v-fondo);
  -webkit-backdrop-filter:var(--v-filtro); backdrop-filter:var(--v-filtro);
  border:1px solid var(--v-borde); border-radius:var(--r-chica); box-shadow:var(--v-sombra);
  padding:12px 14px; gap:10px; margin-bottom:14px;
}
.agenda-filtros .af-row{ gap:10px 16px; }
.agenda-filtros .af-row > span > label{ font-size:12.5px; font-weight:500; color:var(--texto-2); }
.agenda-filtros select{ min-height:36px; padding:6px 34px 6px 14px; border-radius:var(--r-boton); font-size:13px; }
.agenda-filtros .seg{ padding:3px; }
.agenda-filtros .seg button{ min-height:30px; }
.af-help{ width:28px; height:28px; border:1px solid var(--linea); background:transparent; color:var(--texto-3); font-weight:500; font-size:12px; }
.af-help:hover{ border-color:var(--linea); color:var(--texto); background:var(--solido-2); }
.af-chips{ gap:8px 20px; padding-top:2px; border-top:1px solid var(--linea); margin-top:2px; padding-top:10px; }
.af-grupo{ gap:6px; }
.af-lab{ font-size:10.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--texto-3); margin:0 4px 0 0; }
.af-div{ display:none; }
.af-chip{
  display:inline-flex; align-items:center; gap:7px; min-height:30px; padding:4px 12px;
  border-radius:var(--r-boton); border:1px solid var(--linea); background:transparent; color:var(--texto);
  font:inherit; font-size:12.5px; font-weight:500; letter-spacing:-.01em; line-height:1.2; cursor:pointer; white-space:nowrap;
  -webkit-tap-highlight-color:transparent; transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.af-chip > span{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.af-chip.on{ background:var(--acento); border-color:var(--acento); color:var(--acento-tinta); }
.af-chip.on > span{ box-shadow:0 0 0 2px rgba(255,255,255,.55); }
html[data-theme="dark"] .af-chip.on > span{ box-shadow:0 0 0 2px rgba(5,7,15,.35); }
@media(hover:hover) and (pointer:fine){
  .af-chip:hover{ background:rgba(5,7,15,.05); }
  html[data-theme="dark"] .af-chip:hover{ background:rgba(255,255,255,.07); }
  .af-chip.on:hover, html[data-theme="dark"] .af-chip.on:hover{ background:var(--acento-alto); }
}
.leg-chip{ min-height:30px; padding:4px 12px; font-size:12.5px; font-weight:500; color:var(--texto); background:transparent; border:1px solid var(--linea); }
.leg-chip .leg-dot{ width:8px; height:8px; }
.leg-clear{ min-height:30px; padding:4px 12px; border-radius:var(--r-boton); border:1px dashed var(--linea); background:transparent; color:var(--texto-2); font-size:12.5px; }
/* la fila del día: la fecha manda, los controles la acompañan a la derecha */
.cd-nav, .cal-nav{ gap:8px; margin:0 0 12px; align-items:center; }
.cd-nav > .muted{ order:-1; margin-right:auto; font-size:15px; font-weight:600; letter-spacing:-.02em; color:var(--texto); }
.cd-nav .btn.sm, .cal-nav .btn.sm{ min-height:34px; }
.cd-nav input[type="date"], .cal-nav input[type="date"]{ min-height:34px; padding:5px 12px; border-radius:var(--r-boton); font-size:13px; width:auto; }
.cd-colhead{ font-weight:600; letter-spacing:-.012em; }

/* ---------- 25 · Noche azul: el aura de la landing detrás del vidrio ---------- */
html[data-theme="dark"]{ --solido:#071331; --solido-2:#0D1C45; --surface:var(--solido); --surface-2:var(--solido-2); --card:var(--solido); }
html[data-theme="dark"] #root::before{
  background:
    radial-gradient(64vmax 64vmax at 22vw 12vh, rgba(24,92,210,.28) 0%, rgba(24,92,210,.11) 38%, rgba(24,92,210,0) 68%),
    radial-gradient(56vmax 56vmax at 92vw 52vh, rgba(18,67,174,.24) 0%, rgba(18,67,174,.09) 38%, rgba(18,67,174,0) 66%),
    radial-gradient(80vmax 80vmax at 50vw 118vh, rgba(67,184,225,.16) 0%, rgba(67,184,225,.05) 40%, rgba(67,184,225,0) 64%),
    radial-gradient(46vmax 46vmax at 52vw 66vh, rgba(12,56,151,.20) 0%, rgba(12,56,151,0) 62%);
}

/* ---------- 26 · Noche más azul: lienzo-2 de base y el aura con más cuerpo ---------- */
html[data-theme="dark"]{ --fondo:var(--lienzo-2); --lienzo-2:#020A1D; --bg:var(--fondo); --lq-canvas:var(--fondo); }
html[data-tema-panel="dark"][data-theme="dark"]{ --lienzo-2:#000; }
html[data-theme="dark"] #root::before{
  background:
    radial-gradient(64vmax 64vmax at 22vw 12vh, rgba(24,92,210,.36) 0%, rgba(24,92,210,.14) 38%, rgba(24,92,210,0) 68%),
    radial-gradient(56vmax 56vmax at 92vw 52vh, rgba(18,67,174,.32) 0%, rgba(18,67,174,.12) 38%, rgba(18,67,174,0) 66%),
    radial-gradient(80vmax 80vmax at 50vw 118vh, rgba(67,184,225,.20) 0%, rgba(67,184,225,.07) 40%, rgba(67,184,225,0) 64%),
    radial-gradient(46vmax 46vmax at 52vw 66vh, rgba(12,56,151,.26) 0%, rgba(12,56,151,0) 62%);
}

/* ---------- 27 · Agenda en pantallas medias: las vistas en su propia línea ---------- */
@media(max-width:1180px){
  .agenda-filtros .af-row > .seg{ flex-basis:100%; justify-content:flex-start; width:max-content; max-width:100%; }
}
.agenda-filtros .af-row > span:has(> select){ display:inline-flex; align-items:center; gap:8px; }
.agenda-filtros .af-row > span:has(> select) select{ min-width:0 !important; width:auto; }

/* ---------- 28 · …y en esa línea las vistas se muestran como chips, no como una barra estirada ---------- */
@media(max-width:1180px){
  .agenda-filtros .af-row > .seg{ background:transparent; border:0; padding:0; gap:6px; box-shadow:none; }
  .agenda-filtros .af-row > .seg button{ border:1px solid var(--linea); }
  .agenda-filtros .af-row > .seg button.on{ border-color:transparent; }
}

/* ---------- 29 · Tipografía con más carácter (como los titulares de la landing) ---------- */
/* DM Sans variable: se declara con las tres sintaxis para que Safari, Firefox y Chrome
   la reconozcan; si el navegador no entiende una, toma la siguiente. */
@font-face{ font-family:'DM Sans'; src:url('/fonts/DMSans-var.woff2') format('woff2') tech('variations'), url('/fonts/DMSans-var.woff2') format('woff2-variations'), url('/fonts/DMSans-var.woff2') format('woff2'); font-weight:100 1000; font-style:normal; font-display:swap; }
.page-head h1, .page-head h2, .applogin h1, .modal h2{ font-weight:500; letter-spacing:-.042em; }
.page-head h1{ font-size:30px; line-height:1.05; }
.page-head.compact h1{ font-size:26px; }
.modal h2{ font-size:22px; }
h2{ font-weight:500; letter-spacing:-.03em; }
h3{ font-weight:600; letter-spacing:-.02em; }
.stat .value{ font-weight:500; letter-spacing:-.04em; font-size:28px; }
.welcome .name{ font-weight:500; letter-spacing:-.05em; }
.cd-nav > .muted{ font-weight:500; letter-spacing:-.03em; font-size:17px; }
.section-title, .af-lab, .stat .label, .nav-group, th{ font-weight:500; }
body{ font-weight:400; }
b, strong{ font-weight:600; }

/* ---------- 30 · Chips de la agenda: el punto del profesional seleccionado se vuelve del color del texto ---------- */
.af-chip.on > span, .af-chip.on > span[style]{ background:var(--acento-tinta) !important; box-shadow:none; }
html[data-theme="dark"] .af-chip.on > span{ box-shadow:none; }

/* ---------- 31 · La tarjeta al posar el cursor sobre una cita: vidrio, no tinta ---------- */
.ficha-hover, html[data-theme="dark"] .ficha-hover{
  background:var(--v-fondo-alto); background-image:var(--v-fondo-alto);
  -webkit-backdrop-filter:var(--v-filtro); backdrop-filter:var(--v-filtro);
  border:1px solid var(--v-borde); border-radius:var(--r-chica); box-shadow:var(--pz-sombra); color:var(--texto);
}
.ficha-hover .fh-hora, .ficha-hover .fh-nombre{ color:var(--texto); font-weight:600; }
.ficha-hover .fh-trat, .ficha-hover .fh-linea{ color:var(--texto-2); }
.ficha-hover .btn{ min-height:32px; }

/* ---------- 32 · Agenda con muchos profesionales: chips acotados y buscador ---------- */
.af-busca{ display:inline-flex; align-items:center; position:relative; }
.af-busca input{ min-height:30px; height:30px; padding:4px 28px 4px 12px; border-radius:var(--r-boton); font-size:12.5px; width:220px; margin:0; }
.af-busca-x{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:20px; height:20px; border:0; border-radius:var(--r-boton); background:transparent; color:var(--texto-3); font-size:11px; cursor:pointer; display:inline-grid; place-items:center; }
.af-mas{ font-size:12px; color:var(--texto-3); padding:0 4px; white-space:nowrap; }
.af-mia{ font-size:13px; color:var(--texto-2); }
.nav-item .ic .ic-marca{ width:18px; height:18px; display:block; }

/* ---------- 33 · La gota que seguía al cursor: geometría anulada en TODOS sus estados ----------
   Las capas v466/v524/v540 convertían #root::before en un círculo de 760/1040 px
   pegado al puntero (html.lq-pointer, que se enciende al mover el mouse). La capa
   nueva lo usa como aura de pantalla completa, pero las reglas viejas de mayor
   especificidad seguían fijando ancho, alto y margen: al mover el cursor aparecía
   un cuadrado de 520 px de otro color en la esquina. Aquí se iguala la
   especificidad más alta ((1,2,1)) y se anula la geometría en todos los estados. */
#root::before,
html.lq-pointer #root::before,
[data-theme="dark"] #root::before,
html[data-theme="dark"] #root::before,
[data-theme="dark"] html.lq-pointer #root::before,
html[data-theme="dark"].lq-pointer #root::before{
  position:fixed; inset:0; left:0; top:0; right:0; bottom:0; width:auto; height:auto; margin:0;
  border-radius:0; transform:none; filter:none; animation:none; opacity:1; transition:none;
  mask:none; -webkit-mask:none; mix-blend-mode:normal; pointer-events:none; z-index:-1;
}

.nav-item .ic img.ic-marca, .cmd-ic img.ic-marca{ width:16px; height:18px; object-fit:contain; display:block; }

/* ---------- 34 · Estados heredados que la auditoría encontró vivos: hover, pulsación,
   deshabilitado, seleccionado y noche en 48 reglas de capas anteriores ----------
   Primero los reposos SIN consulta de puntero (en táctil el :hover se queda pegado
   y las reglas viejas pintaban el botón negro o el cierre rojo); después, dentro de
   la consulta (hover:hover), las tintas suaves del sistema nuevo. */
:root, html[data-theme="dark"]{ --signature-mint-rgb:var(--acento-rgb); }
.x-btn, .close-x, .chat-mini-btn[title^="Cerrar"]{ --dot-glyph:currentColor; }
.btn:hover, html[data-theme="dark"] .btn:hover{ background:var(--solido); box-shadow:none; filter:none; transform:none; }
html[data-theme="dark"] .btn:hover{ background:rgba(255,255,255,.04); }
.btn.gold:hover, html[data-theme="dark"] .btn.gold:hover{ background:var(--acento); color:var(--acento-tinta); filter:none; box-shadow:none; }
.btn.ghost:hover, html[data-theme="dark"] .btn.ghost:hover{ background:transparent; box-shadow:none; }
.btn:active, .go:active{ filter:none; box-shadow:none; transform:scale(.97); }
html[data-theme="dark"] .btn:active{ background:rgba(255,255,255,.09); }
html[data-theme="dark"] .btn:disabled, html[data-theme="dark"] .btn[disabled]{ background:rgba(255,255,255,.04); color:var(--texto); opacity:.45; box-shadow:none; }
html[data-theme="dark"] .btn.gold:disabled, html[data-theme="dark"] .btn.gold[disabled]{ background:var(--acento); color:var(--acento-tinta); opacity:.45; }
html[data-theme="dark"] .btn.danger{ background:transparent; color:#F19C91; border-color:rgba(241,156,145,.4); }
html[data-theme="dark"] .btn.danger:hover{ background:rgba(192,57,43,.14); filter:none; }
.x-btn:hover, .close-x:hover, .chat-mini-btn[title^="Cerrar"]:hover{ background:transparent; box-shadow:none; transform:none; }
.x-btn:active, .close-x:active, .chat-mini-btn[title^="Cerrar"]:active{ transform:scale(.97); filter:none; background:var(--solido-2); }
.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:currentColor; transform:none; opacity:1; }
.notif-item:hover, button.notif-item:hover, [data-theme="dark"] .notif-item:hover, [data-theme="dark"] button.notif-item:hover{ background:transparent !important; border-color:transparent; transform:none; }
.nav-item.active .ic{ transform:none; }
.nav-item:active{ transform:none; }
.tab.active, .seg button.on{ animation:none; }
html[data-theme="dark"] .tab.active{ box-shadow:inset 0 -2px 0 var(--acento); background:transparent; }
.accounting-tabs .tab.active{ background:transparent; color:var(--texto); box-shadow:inset 0 -2px 0 var(--acento); }
html[data-theme="dark"] .stat.clickable.sel, html[data-theme="dark"] .stat.active-stat{ box-shadow:var(--v-sombra), 0 0 0 3px rgba(var(--acento-rgb),.14); }
html:not([data-theme="dark"]) .sidebar .nav-badge{ box-shadow:0 0 0 2px var(--fondo); }
.sim-paso.on{ background:var(--acento); color:var(--acento-tinta); border-color:transparent; box-shadow:none; }
.sim-paso.on .sim-paso-n{ background:rgba(0,0,0,.12); color:var(--acento-tinta); }
.mp-metodo.on{ background:var(--acento); color:var(--acento-tinta); border-color:var(--acento); }
.consent-treatment-check.on{ border-color:rgba(var(--acento-rgb),.5); background:rgba(var(--acento-rgb),.07); }
html[data-theme="dark"] .zx-aviso{ border-color:var(--v-borde); box-shadow:var(--pz-sombra); }
.chat-send, .chat-crear-grupo, html[data-theme="dark"] .chat-send, html[data-theme="dark"] .chat-crear-grupo{ background:var(--acento); color:var(--acento-tinta); border-radius:var(--r-boton); box-shadow:none; }
html[data-theme="dark"] .deskbar-search, html[data-theme="dark"] .acct-btn{ box-shadow:none; }
html[data-theme="dark"] .drawer-ov{ background:rgba(0,2,9,.62); }
.ia-sin-revisar:focus{ box-shadow:inset 3px 0 0 var(--acento), 0 0 0 3px rgba(var(--acento-rgb),.14); }
.collapse-btn:hover, html:not([data-theme="dark"]) .sidebar .collapse-btn:hover{ border-color:transparent; transform:none; }
.deskbar-search:hover .ds-kbd, .deskbar-search:hover .ds-orb{ transform:none; }
@media(max-width:820px){
  .topbar-search-m{ color:var(--texto-2); border:1px solid var(--linea); background:transparent; }
  .topbar-search-m:active{ background:var(--solido-2); }
}
@media(hover:hover) and (pointer:fine){
  .btn:hover, html[data-theme="dark"] .btn:hover{ background:var(--solido-2); }
  html[data-theme="dark"] .btn:hover{ background:rgba(255,255,255,.09); }
  .btn.gold:hover, html[data-theme="dark"] .btn.gold:hover{ background:var(--acento-alto); }
  .btn.ghost:hover, html[data-theme="dark"] .btn.ghost:hover{ background:var(--solido-2); }
  html[data-theme="dark"] .btn.ghost:hover{ background:rgba(255,255,255,.07); }
  .x-btn:hover, .close-x:hover, .chat-mini-btn[title^="Cerrar"]:hover{ background:var(--solido-2); color:var(--texto); }
  html[data-theme="dark"] .x-btn:hover, html[data-theme="dark"] .close-x:hover{ background:rgba(255,255,255,.08); }
  .notif-item:hover, button.notif-item:hover, [data-theme="dark"] .notif-item:hover, [data-theme="dark"] button.notif-item:hover{ background:rgba(5,7,15,.05) !important; }
  html[data-theme="dark"] .notif-item:hover, html[data-theme="dark"] button.notif-item:hover{ background:rgba(255,255,255,.07) !important; }
  .nav-item:hover, .nav-item.active:hover, html[data-theme="dark"] .sidebar .nav-item:hover, html:not([data-theme="dark"]) .sidebar .nav-item:hover{ transform:none; box-shadow:none; }
  .nav-item:hover .ic{ transform:none; }
  .card:hover, .stat:hover{ border-color:var(--v-borde); box-shadow:var(--v-sombra); }
  .stat.clickable:hover, .row-click:hover{ transform:none; }
  .stat.clickable:hover{ border-color:rgba(var(--acento-rgb),.35); box-shadow:var(--v-sombra); }
  .zairi-opportunity-card:hover, .zairi-reveal-card:hover, .sim-hero:hover{ transform:none; border-color:var(--v-borde); box-shadow:var(--v-sombra); }
  .zairi-opportunity-card:hover .orb3d-wrap, .zairi-reveal-card:hover .orb3d-wrap, .sim-hero:hover .orb3d-wrap{ transform:none; filter:none; }
  .deskbar-search:hover{ transform:none; box-shadow:none; }
  .deskbar-bell:hover, .theme-toggle:hover, .acct-btn:hover{ transform:none; box-shadow:none; }
  .acct-btn:hover{ background:var(--solido-2); border-color:var(--linea); }
  .cal-appt:hover, .cd-appt:hover{ transform:none; filter:none; box-shadow:var(--pz-sombra); }
  .tab:hover{ background:rgba(5,7,15,.04); color:var(--texto); transform:none; }
  html[data-theme="dark"] .tab:hover{ background:rgba(255,255,255,.06); }
  .seg button:hover{ transform:none; }
  .inicio-cita-row:hover{ background:rgba(5,7,15,.03); box-shadow:inset 3px 0 0 var(--acento); }
  html[data-theme="dark"] .inicio-cita-row:hover{ background:rgba(255,255,255,.04); }
  .zn-tarjeta:hover{ border-color:rgba(var(--acento-rgb),.45); transform:none; }
  .consent-treatment-check:hover{ border-color:rgba(var(--acento-rgb),.5); background:rgba(var(--acento-rgb),.07); }
  .logout:hover, html:not([data-theme="dark"]) .sidebar .logout:hover{ transform:none; border-color:var(--linea); color:var(--texto); background:rgba(5,7,15,.05); }
  html[data-theme="dark"] .logout:hover{ background:rgba(255,255,255,.07); border-color:var(--linea); color:var(--texto); }
  .cmd-item:hover, .acct-item:hover, .notif-item:hover, .chat-conv:hover{ transform:none; }
  .slot-pop-box:hover{ transform:none; box-shadow:none; background:var(--solido-2); }
  .cd-colhead-click:hover .cd-dot{ box-shadow:0 0 0 3px rgba(var(--acento-rgb),.18); }
  .zn-quien:hover{ background:rgba(var(--acento-rgb),.10); }
  .lead-chat:hover{ background:rgba(var(--acento-rgb),.06); }
  .applogin .go:hover{ transform:none; }
  .pill:hover, .check-row:hover, .help-orb:hover, .sim-tchip:hover{ transform:none; box-shadow:none; filter:none; }
  .collapse-btn:hover, html:not([data-theme="dark"]) .sidebar .collapse-btn:hover{ background:rgba(5,7,15,.05); color:var(--texto); }
  html[data-theme="dark"] .collapse-btn:hover{ background:rgba(255,255,255,.07); }
}
@media(min-width:821px) and (hover:hover) and (pointer:fine){
  .app.collapsed .side-brand:hover .side-logo-mini{ transform:translateX(-50%) scale(1) rotate(0); filter:none; }
  html[data-theme="dark"] .app.collapsed .side-brand:hover .side-logo-mini{ filter:brightness(0) invert(1); }
}
@media (prefers-reduced-transparency: reduce){
  .modal-bg, .slot-pop-overlay, .notif-ov, .acct-ov, .drawer-ov, .cmd-ov{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(5,7,15,.55); }
  html[data-theme="dark"] .modal-bg, html[data-theme="dark"] .slot-pop-overlay, html[data-theme="dark"] .notif-ov, html[data-theme="dark"] .acct-ov, html[data-theme="dark"] .drawer-ov, html[data-theme="dark"] .cmd-ov{ background:rgba(0,2,9,.78); }
}
@media (prefers-contrast: more){
  html[data-theme="dark"] .vc-luz{ border-color:rgba(255,255,255,.55); }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .zx-aviso, .zx-avisos .zx-aviso, html[data-theme="dark"] .zx-aviso{ background:var(--solido); background-image:none; }
  .modal-bg, .slot-pop-overlay, .notif-ov, .acct-ov, .drawer-ov, .cmd-ov{ background:rgba(5,7,15,.55); }
  html[data-theme="dark"] .modal-bg, html[data-theme="dark"] .notif-ov, html[data-theme="dark"] .acct-ov, html[data-theme="dark"] .drawer-ov, html[data-theme="dark"] .cmd-ov{ background:rgba(0,2,9,.78); }
}

/* ---------- 35 · Precisiones de los verificadores: en noche, el botón principal y el
   fantasma conservan su color al pulsarlos, y el fantasma deshabilitado también se atenúa ---------- */
html[data-theme="dark"] .btn.gold:active{ background:var(--acento-alto); color:var(--acento-tinta); }
html[data-theme="dark"] .btn.ghost:active{ background:rgba(255,255,255,.07); }
html[data-theme="dark"] .btn.ghost:disabled, html[data-theme="dark"] .btn.ghost[disabled]{ background:transparent; color:var(--texto); opacity:.45; }

/* ---------- 36 · Lo que se ABRE encima del contenido va con relleno sólido ----------
   El dueño lo dijo mirando el «Detalle de la cita»: la agenda se transparentaba a
   través de la tarjeta. La causa está en la sección 11 de esta misma capa, que le
   da a las ventanas y a los menús el mismo --v-fondo-alto que se usa para el
   cromo: de día un degradado de blanco al 90-78 %, de noche azules al 62-78 %.
   Como lámina de barra está bien; como ventana que tapa el trabajo, no: lo de
   atrás compite con lo que se acaba de abrir y el ojo no sabe qué leer.

   La regla es de función, no de nombre. Lo que se ABRE encima del contenido va
   con relleno sólido: las ventanas, el popover de la agenda, el panel de zairi
   notes, la tarjeta que aparece al posar el cursor sobre una cita, la ventana de
   chat, los avisos del equipo, los menús y la paleta ⌘K. Lo que es cromo de la
   app —barra lateral, barra superior— y las tarjetas de contenido siguen en
   vidrio: ahí la transparencia sí cuenta algo, que la app está apoyada sobre el
   lienzo. Sólido tampoco quiere decir blanco: --solido es #FFFFFF de día y
   #071331 de noche (lo fija la sección 25, línea 5240).

   EL TELÓN NO SE TOCA. .modal-bg y sus hermanos conservan el blur(6px) de la
   sección 11: el problema nunca fue el telón sino la tarjeta, y sin ese
   desenfoque la ventana sólida quedaría pegada sobre una agenda nítida.

   Especificidad, que aquí es la mitad del trabajo: la sección 11 pinta las
   ventanas con html[data-theme="dark"] .modal (0,2,1) —un .modal a secas
   perdería de noche— y los menús con !important heredado de las capas v482, v486
   y v508. Por eso abajo se repiten esos mismos selectores: al ir después, con
   igual peso, ganan.

   Dos detalles que no son adorno:
   · A las ventanas se les quita el backdrop-filter. Con el fondo opaco ya no
     difumina nada, y de paso deja de ser bloque contenedor de sus hijos fijos:
     es exactamente el error que documenta el comentario del componente Modal en
     app.js, cuando una ventana hija se dibujaba anclada a la madre. A los menús
     se les deja: no tienen hijos fijos y no vale la pena mover una regla vieja.
   · El canto pasa a --linea. La ficha al posar el cursor, el aviso del equipo, la
     ventana de chat y los menús no llevan telón detrás: de día quedarían blanco
     puro sobre página blanca, y el --v-borde al 7 % estaba calculado para vidrio.
   La tarjeta del cursor se queda BLANCA y no vuelve a la tinta de la receta C:
   el dueño pidió expresamente que dejara de verse negra. ---------------------- */
.modal, .slot-pop, .zn-panel, .tour .box, .welcome .c, .chat-win, .ficha-hover, .zx-aviso,
html[data-theme="dark"] .modal, html[data-theme="dark"] .slot-pop,
html[data-theme="dark"] .zn-panel, html[data-theme="dark"] .tour .box,
html[data-theme="dark"] .welcome .c, html[data-theme="dark"] .chat-win,
html[data-theme="dark"] .ficha-hover, html[data-theme="dark"] .zx-aviso{
  background:var(--solido); background-image:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  color:var(--texto);
}
.chat-win, .ficha-hover, .zx-aviso,
html[data-theme="dark"] .chat-win, html[data-theme="dark"] .ficha-hover, html[data-theme="dark"] .zx-aviso{
  border-color:var(--linea);
}
html .notif-menu, html .acct-menu,
html [data-theme="dark"] .notif-menu, html [data-theme="dark"] .acct-menu,
html[data-theme="dark"] .notif-menu, html[data-theme="dark"] .acct-menu,
.chat-menu, .chat-link-pop, .cmd,
html[data-theme="dark"] .chat-menu, html[data-theme="dark"] .chat-link-pop,
html[data-theme="dark"] .cmd{
  background:var(--solido) !important; background-image:none !important;
  border-color:var(--linea) !important; color:var(--texto);
}

/* ============================================================================
   v570 · zairi · LA FICHA EMPIEZA POR QUIÉN ES
   ----------------------------------------------------------------------------
   El nombre del paciente era el título de una ventana (22 px) y sus datos
   quedaban hundidos en el puesto catorce, debajo de las finanzas, en gris claro
   y con etiqueta de formulario. Ahora la identidad ABRE la ficha: nombre grande,
   edad y RUT como identificadores, el contacto en tinta de lectura (--texto, no
   la clase .muted) y las alergias en rojo, que es lo único de esta cabecera que
   puede hacer daño si no se lee.

   El <h2> del modal ya no se pinta cuando no hay título (lo decide el propio
   componente Modal en app.js, no una regla de CSS): así ninguna otra de las 57
   ventanas del panel cambia de aspecto por esto.

   El tamaño del nombre es elástico —clamp— y no una lista de excepciones: en
   telemedicina la ficha vive en media pantalla, que en un portátil son 470 px y
   en un monitor de 1920 son 920 px. Una sola regla cubre las dos.
   ============================================================================ */
.pf-cab{ margin:0 0 18px; }
/* La X de cerrar flota arriba a la derecha (32 px, 40 en táctil, sobre un padding
   de 34 px): la fila superior le deja sitio para que los botones de acción nunca
   queden debajo de ella. */
.pf-cab-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px 18px; flex-wrap:wrap; padding-right:46px; }
.pf-quien{ display:flex; align-items:center; gap:14px; min-width:0; flex:1 1 300px; }
.pf-mono{
  width:60px; height:60px; flex:none; border-radius:20px; display:grid; place-items:center;
  background:rgba(var(--acento-rgb),.10); border:1px solid rgba(var(--acento-rgb),.18);
  color:var(--acento); font-size:21px; font-weight:500; letter-spacing:-.02em; text-transform:uppercase;
}
.pf-quien-txt{ min-width:0; }
.modal h2.pf-nombre{
  margin:0 0 5px; font-size:clamp(24px, 3.4vw, 34px); font-weight:500; letter-spacing:-.042em;
  line-height:1.04; color:var(--texto); overflow-wrap:anywhere;
}
.pf-sub{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 10px; font-size:13.5px; letter-spacing:-.012em; color:var(--texto-2); }
.pf-sub b{ font-weight:500; color:var(--texto); }
.pf-sub span + span::before{ content:'·'; margin-right:10px; color:var(--texto-3); }
.pf-acciones{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* Alergias: lo único de la cabecera que puede hacer daño si no se lee. */
.pf-alerta{
  display:flex; align-items:flex-start; gap:9px; margin:15px 0 0; padding:10px 13px;
  border-radius:var(--r-chica); background:rgba(192,57,43,.09); border:1px solid rgba(192,57,43,.30);
  color:#C0392B; font-size:14px; line-height:1.42;
}
.pf-alerta b{ font-weight:600; }
html[data-theme="dark"] .pf-alerta{ background:rgba(241,156,145,.10); border-color:rgba(241,156,145,.34); color:#F19C91; }

/* Los datos: etiqueta chica arriba, valor en tinta de lectura (no gris claro). */
.pf-datos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:14px 20px; margin:16px 0 0; }
.pf-dato{ min-width:0; }
.pf-dato.ancho{ grid-column:1/-1; }
/* El correo es lo más largo de la rejilla: con una sola columna se parte en
   «gmail. com», que se lee peor que no partirlo. */
.pf-dato.doble{ grid-column:span 2; }
.pf-et{ display:block; margin-bottom:3px; font-size:10.5px; font-weight:500; letter-spacing:.11em; text-transform:uppercase; color:var(--texto-3); }
.pf-val{ display:block; font-size:15px; font-weight:500; letter-spacing:-.014em; line-height:1.35; color:var(--texto); overflow-wrap:anywhere; }
a.pf-val{ color:var(--texto); text-decoration:none; }
a.pf-val:hover{ color:var(--acento); text-decoration:underline; text-underline-offset:2px; }
.pf-val.vacio{ color:var(--texto-3); font-weight:400; }
/* Ficha sin ningún dato de contacto: se dice una vez y se ofrece el arreglo. */
.pf-datos-vacio{ margin:16px 0 0; font-size:14px; color:var(--texto-2); }
.pf-enlace{ background:none; border:0; padding:0; font:inherit; color:var(--acento); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
/* La cabecera cierra con una línea: lo que sigue ya son otros asuntos. */
.pf-cab::after{ content:''; display:block; height:1px; margin-top:18px; background:linear-gradient(90deg,var(--linea),transparent); }

@media(max-width:820px){
  .pf-cab-top{ padding-right:44px; }
  .pf-mono{ width:48px; height:48px; border-radius:16px; font-size:17px; }
  .pf-acciones{ width:100%; }
  .pf-acciones .btn{ flex:1 1 auto; }
  .pf-datos{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px 16px; }
}
/* Telemedicina: la ficha se comprime a media pantalla y el viewport sigue siendo
   ancho, así que la consulta de 820 px no salta. La rejilla sí se aprieta. */
body.video-lado .pf-datos{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px 16px; }
body.video-lado .pf-cab-top{ padding-right:44px; }

/* ---------- 37 · Franja y pantalla de corte por falta de pago (v570) ----------
   El único plano de color lleno de todo el sistema, y es a propósito: tiene que
   verse desde la otra punta de la sala. Va fija arriba del todo.

   El z-index es 46 y no un número grande: tiene que tapar la barra de escritorio
   (45) y quedar POR DEBAJO de todo lo que se abre encima —el telón de las
   ventanas (50), el cajón lateral del móvil (70), la tarjeta al posar el cursor
   (70) y los avisos del equipo (1200)—. Una franja que se dibuja sobre un modal
   abierto no informa: estorba. Con las barras no compite por capa, porque además
   se las empuja 38 px hacia abajo.

   Los desplazamientos NO se inventan: la franja mide 38 px y hay que devolvérselos
   a lo que tapa. El relleno superior de .main lo fija la capa vieja en 94 px
   (escritorio) y 82 px (móvil), así que aquí van 132 y 120. La barra lateral es
   una tarjeta flotante con `margin:10px` y `height:calc(100vh - 20px)`: se baja
   con margen y se le descuenta el alto, porque un padding-top solo le empujaría
   el contenido fuera de la caja y dejaría el botón de salir fuera de la pantalla.
   ---------------------------------------------------------------------------- */
.franja-cobro{
  position:fixed; top:0; left:0; right:0; z-index:46;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  min-height:38px; padding:8px 20px;
  background:var(--danger); color:#fff;
  font-size:13px; line-height:1.35; letter-spacing:-.005em;
  box-shadow:0 1px 0 rgba(0,0,0,.10), 0 10px 26px -20px rgba(192,57,43,.9);
}
.franja-cobro b{ font-weight:600; }
.franja-cobro-punto{
  width:8px; height:8px; border-radius:50%; flex:0 0 auto;
  background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.25);
  animation:franja-cobro-latido 2.4s ease-in-out infinite;
}
.franja-cobro-txt{ flex:1 1 auto; min-width:0; }
.franja-cobro-contacto{ flex:0 0 auto; opacity:.9; font-weight:600; }
@keyframes franja-cobro-latido{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@media (prefers-reduced-motion:reduce){ .franja-cobro-punto{ animation:none; } }

/* Todo lo que la franja empuja sale de su ALTO REAL, que el componente mide y
   publica en --franja-alto. Con una constante de 38 px, un texto que se envuelve
   —pantalla de 1200 px, contacto largo, aviso de bloqueo— tapaba la barra
   superior entera y en el teléfono cortaba el mensaje a media frase. El valor de
   reserva es el alto mínimo, para que la hoja se sostenga sola si el script no
   llegó a medir todavía. */
.app.con-franja .deskbar{ top:var(--franja-alto, 38px); }
.app.con-franja .topbar{ top:var(--franja-alto, 38px); }
.app.con-franja .main{ padding-top:calc(94px + var(--franja-alto, 38px)); }
.app.con-franja .sidebar{ margin-top:calc(10px + var(--franja-alto, 38px)); height:calc(100vh - 20px - var(--franja-alto, 38px)); }
/* Los avisos del equipo son fijos a 14 px del borde y pesan z-index 1200: sin
   esto se dibujarían encima de la franja. */
.app.con-franja .zx-avisos{ top:calc(14px + var(--franja-alto, 38px)); }
/* Los menús de la campana, la cuenta y el chat están clavados con position:fixed
   al sitio donde la barra estaba SIN franja: sin esto se abren dentro de ella. */
.app.con-franja .notif-menu, .app.con-franja .acct-menu{ top:calc(64px + var(--franja-alto, 38px)) !important; }
.app.con-franja .chat-menu{ top:calc(66px + var(--franja-alto, 38px)) !important; }
@media(max-width:820px){
  .franja-cobro{ font-size:12.5px; padding:7px 14px; }
  .app.con-franja .main{ padding-top:calc(82px + var(--franja-alto, 38px)); }
  .app.con-franja .sidebar{ margin-top:0; height:100%; }
}

/* La pantalla de corte reemplaza el panel entero: aquí no hay navegación que
   ofrecer, y ofrecerla sería mentir. Papel de día, noche de noche, un solo
   acento rojo y nada más. Va sólida, como todo lo que tapa contenido. */
.corte-pantalla{
  position:fixed; inset:0; z-index:2000;
  display:grid; place-items:center; padding:24px;
  background:var(--fondo); color:var(--texto); overflow:auto;
}
.corte-caja{
  width:min(560px,100%); text-align:center;
  background:var(--solido); background-image:none;
  border:1px solid var(--linea); border-radius:var(--r-tarjeta);
  box-shadow:var(--pz-sombra); padding:38px 32px 30px;
}
.corte-logo{ height:26px; width:auto; margin-bottom:22px; }
.corte-sello{
  width:44px; height:44px; margin:0 auto 16px; border-radius:var(--r-chica);
  background:rgba(192,57,43,.10); border:1px solid rgba(192,57,43,.34);
  position:relative;
}
.corte-sello::before, .corte-sello::after{
  content:''; position:absolute; left:50%; top:50%; width:18px; height:2px;
  background:var(--danger); border-radius:2px;
}
.corte-sello::before{ transform:translate(-50%,-50%) rotate(45deg); }
.corte-sello::after{ transform:translate(-50%,-50%) rotate(-45deg); }
.corte-caja h1{ font-size:23px; font-weight:500; letter-spacing:-.035em; margin:0 0 14px; }
.corte-linea{ font-size:14px; line-height:1.55; margin:0 0 12px; color:var(--texto-2); }
.corte-linea b{ color:var(--texto); font-weight:600; }
.corte-contacto{
  font-size:13.5px; margin:20px 0 20px; padding:12px 14px;
  border-radius:var(--r-chica); border:1px solid var(--linea);
  background:var(--solido-2); color:var(--texto);
}

/* ---------- 38 · El destacado de una cita: el anillo de la landing (v572) ----
   Al llegar desde una notificación, la cita se marcaba con un halo morado y un
   destello blanco encima: `box-shadow:0 16px 40px rgba(49,29,99,.34)` más un
   barrido. En la noche azul eso se veía como una mancha de luz alrededor del
   bloque —el resplandor que el dueño pidió sacar—, y además el cónico usaba los
   morados del sistema anterior (#6840ff, #d9cfff, #63e3d1), que ya no existen
   en la paleta.

   Se reemplaza por el MISMO anillo que lleva «Acceso clientes» en la landing:
   un cónico de 1 px que gira, en blanco y los dos azules de la marca, recortado
   con dos máscaras que se restan. Es la misma pieza, no una imitación: los
   grados y los colores están copiados de ahí.

   El salto del bloque se conserva —sin él, encontrar una cita de 40 px en una
   grilla de doce horas es una búsqueda a ojo—, pero pierde el halo: lo que
   señala ahora es el borde, no una nube de luz.
   ---------------------------------------------------------------------------- */
@property --foco-giro{ syntax:'<angle>'; initial-value:0deg; inherits:false }
@keyframes foco-giro-borde{ to{ --foco-giro:360deg } }

.cal-appt.agenda-focus-buzz, .cd-appt.agenda-focus-buzz, .slot-pop-box.agenda-focus-buzz,
html[data-theme="dark"] .cal-appt.agenda-focus-buzz,
html[data-theme="dark"] .cd-appt.agenda-focus-buzz,
html[data-theme="dark"] .slot-pop-box.agenda-focus-buzz{
  /* Nada de halo: la sombra vuelve a ser la del sistema, la misma que llevan
     las demás superficies que se levantan. */
  box-shadow:var(--pz-sombra);
}
.cal-appt.agenda-focus-buzz::before, .cd-appt.agenda-focus-buzz::before, .slot-pop-box.agenda-focus-buzz::before{
  background:conic-gradient(from var(--foco-giro),
    rgba(255,255,255,0) 0deg, rgba(92,121,250,.7) 48deg, #FFFFFF 76deg,
    rgba(173,188,252,.8) 104deg, rgba(255,255,255,0) 190deg, rgba(255,255,255,0) 360deg);
  padding:1px;
  animation:foco-giro-borde 4.5s linear infinite;
}
/* El barrido blanco por encima del bloque era la otra mitad del resplandor. */
.cal-appt.agenda-focus-buzz::after, .cd-appt.agenda-focus-buzz::after, .slot-pop-box.agenda-focus-buzz::after{
  content:none;
}
@media (prefers-reduced-motion:reduce){
  .cal-appt.agenda-focus-buzz::before, .cd-appt.agenda-focus-buzz::before, .slot-pop-box.agenda-focus-buzz::before{
    animation:none;
  }
}

/* ---------- 39 · La noche, de un color y sin resplandor (v572) ---------------
   El lienzo nocturno llevaba un aura: cuatro manchas radiales de azul y cian
   que venían de la landing, donde la pantalla es una sola y el degradado tiene
   sentido narrativo. En el panel no: es una herramienta que se mira ocho horas,
   con tablas y grillas encima, y ese resplandor competía con el contenido y se
   notaba como una nube detrás de la agenda.

   Queda el color plano de la noche azul (--lienzo-2, #020A1D). El vidrio de las
   barras sigue funcionando —difumina lo que pasa por debajo, que ahora es el
   contenido, no un degradado—, y las ventanas ya iban sólidas desde la
   sección 36.

   Se repiten los selectores de las secciones 25 y 26 para ganar por orden con
   el mismo peso; el de día NO se toca: ahí las dos manchas al 5 % son lo que
   distingue una lámina de vidrio de una tarjeta opaca sobre papel blanco.
   ---------------------------------------------------------------------------- */
html[data-theme="dark"] #root::before,
[data-theme="dark"] #root::before,
html[data-theme="dark"].lq-pointer #root::before{
  background:none;
  background-image:none;
}
html[data-theme="dark"], html[data-theme="dark"] body{
  background:var(--lienzo-2);
  background-image:none;
}

/* ---------- 40 · Mensajes: que se parezca a una conversación (v572) ----------
   El hilo funcionaba pero se leía como un registro de sistema. Tres motivos, y
   los tres se arreglan aquí:

   · LA BURBUJA DE SALIDA ERA NEGRA. La sección 12 la dejó en tinta plana
     (`background:var(--tinta)`), y de noche en blanco. En WhatsApp y en
     Instagram esa burbuja lleva el color de la marca, y es lo que hace que la
     conversación se vea de alguien y no de un servidor. Pasa al acento.
   · NO HABÍA CON QUÉ ESCRIBIR más que texto. Ahora la caja tiene emojis,
     adjuntar y nota de voz, y esos tres botones necesitan sitio propio.
   · LO QUE MANDABA LA PACIENTE ESTABA DISPERSO en meses de scroll. La galería
     junta las fotos y los PDF de esa conversación en una pantalla.
   ---------------------------------------------------------------------------- */
.wa-msg.out .wa-bub, html[data-theme="dark"] .wa-msg.out .wa-bub,
.chat-msg.out .chat-bubble, html[data-theme="dark"] .chat-msg.out .chat-bubble{
  background:var(--acento); color:var(--acento-tinta); background-image:none;
}
.wa-msg.out .wa-meta, html[data-theme="dark"] .wa-msg.out .wa-meta{ color:color-mix(in srgb, var(--acento-tinta) 78%, transparent); }
/* El estado de fallo tiene que leerse sobre el acento, no solo sobre el gris. */
.wa-fallo{ font-weight:600; color:#C0392B; }
.wa-msg.out .wa-fallo{ color:#FFD9D4; }
html[data-theme="dark"] .wa-fallo{ color:#F19C91; }

/* La imagen dentro de la burbuja: un botón, no un enlace que se lleva la pestaña. */
.wa-img-btn{ display:block; padding:0; border:0; background:none; cursor:zoom-in; border-radius:var(--r-chica); overflow:hidden; }
.wa-img-btn img{ display:block; }

/* Las tres herramientas de la caja de escribir. */
.wa-compose{ align-items:flex-end; gap:6px; }
.wa-tool{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; font-size:17px; line-height:1;
  background:transparent; border:1px solid var(--linea); color:var(--texto-2); cursor:pointer;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.wa-tool:hover{ background:rgba(var(--acento-rgb),.08); color:var(--acento); border-color:rgba(var(--acento-rgb),.3); }
.wa-tool:disabled{ opacity:.45; cursor:default; }
.wa-tool.grabando{ background:rgba(192,57,43,.12); border-color:rgba(192,57,43,.5); color:#C0392B; animation:wa-grabando 1.3s ease-in-out infinite; }
@keyframes wa-grabando{ 0%,100%{ opacity:1 } 50%{ opacity:.55 } }
@media (prefers-reduced-motion:reduce){ .wa-tool.grabando{ animation:none; } }

/* La galería de emojis: sobre la caja, no tapándola. */
.wa-emojis{
  background:var(--solido); border:1px solid var(--linea); border-radius:var(--r-tarjeta);
  box-shadow:var(--pz-sombra); padding:10px; margin-bottom:8px; max-height:260px; overflow:auto;
}
.wa-emojis-cats{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; position:sticky; top:-10px; background:var(--solido); padding:2px 0; }
.wa-emojis-rejilla{ display:grid; grid-template-columns:repeat(auto-fill,minmax(38px,1fr)); gap:2px; }
.wa-emojis-rejilla button{
  font-size:22px; line-height:1; padding:6px 0; border:0; background:none; cursor:pointer; border-radius:10px;
}
.wa-emojis-rejilla button:hover{ background:rgba(var(--acento-rgb),.10); }

/* La galería de archivos de la conversación. */
.wa-galeria{ display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:10px; }
.wa-gal-item{
  display:block; padding:0; border:1px solid var(--linea); border-radius:var(--r-chica);
  overflow:hidden; background:var(--solido-2); cursor:pointer; text-align:left;
}
.wa-gal-item img{ display:block; width:100%; height:104px; object-fit:cover; }
.wa-gal-doc{ display:grid; place-items:center; height:104px; color:var(--texto-3); }
.wa-gal-pie{ display:block; padding:6px 8px; font-size:11.5px; color:var(--texto-3); }
.wa-gal-item:hover{ border-color:rgba(var(--acento-rgb),.45); }

/* El visor: la imagen en grande sin salir del panel. */
.visor-media{ position:fixed; inset:0; z-index:1400; background:rgba(3,6,16,.86); display:grid; place-items:center; padding:24px; }
.visor-caja{ max-width:min(920px,92vw); max-height:88vh; display:flex; flex-direction:column; gap:10px; }
.visor-caja img{ max-width:100%; max-height:76vh; object-fit:contain; border-radius:var(--r-chica); background:#000; }
.visor-caja video{ max-width:100%; max-height:76vh; border-radius:var(--r-chica); background:#000; }
.visor-doc{ display:grid; place-items:center; gap:10px; padding:60px; color:#fff; background:rgba(255,255,255,.06); border-radius:var(--r-chica); }
.visor-pie{ display:flex; align-items:center; gap:10px; color:#fff; font-size:12.5px; flex-wrap:wrap; }
.visor-pie .muted{ color:rgba(255,255,255,.7); }
@media(max-width:820px){
  .wa-emojis{ max-height:200px; }
  .wa-galeria{ grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); }
}

/* Las palomitas del mensaje que sale. Dos estados y nada más: entregado, en el
   mismo tono del texto de la burbuja, y leído, en el azul de la marca. No hay
   «está escribiendo» y no lo va a haber: Meta deja MANDAR ese indicador, nunca
   recibirlo, así que pintarlo sería inventar. */
.wa-tics{ margin-left:4px; font-size:11px; letter-spacing:-1px; opacity:.85; }
.wa-msg.out .wa-tics.leido{ color:#0A36F7; opacity:1; font-weight:700; }
html[data-theme="dark"] .wa-msg.out .wa-tics.leido{ color:#05204F; }

/* Identificación y atención clínica: grupos legibles, sin estados clínicos inferidos. */
.fc-form fieldset, .fc-antecedentes { border:1px solid var(--border, #dce1e7); border-radius:12px; padding:18px; margin:18px 0; min-width:0; }
.fc-form legend, .fc-antecedentes legend { font-weight:700; font-size:15px; padding:0 8px; }
.fc-field { display:flex; flex-direction:column; gap:5px; margin:8px 0; min-width:0; }
.fc-field>span { font-size:13px; font-weight:600; }
.fc-field input,.fc-field select,.fc-field textarea { margin:0; width:100%; }
.fc-field small { font-weight:400; color:var(--muted); }
.fc-vitales { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px 16px; }
.fc-complemento { border:1px solid var(--border,#dce1e7); border-radius:12px; padding:16px; margin:16px 0; }
.fc-complemento summary { cursor:pointer; font-weight:700; }
.fc-gestion { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:14px 0; }
.fc-gestion details,.fc-gestion p { flex-basis:100%; }
.fc-pendiente { padding:12px 16px; border-left:3px solid var(--acento); background:var(--purple-soft); border-radius:6px; font-size:13px; }
.fc-demografia { margin:12px 0; }
.fc-resumen .pill { display:inline-block; margin:3px; }
@media(max-width:600px) { .fc-vitales { grid-template-columns:repeat(2,minmax(0,1fr)); } .fc-form fieldset { padding:12px; } }
.fc-confirmacion { display:flex; align-items:center; gap:10px; padding:12px 0; }
.fc-confirmacion input { width:auto; margin:0; }
/* Ficha de tratamiento: etapas documentales y registros cronológicos. */
.proc-shell{display:flex;flex-direction:column;gap:18px;min-width:0}.proc-shell fieldset{border:1px solid var(--line);border-radius:12px;padding:16px;min-width:0}.proc-shell legend{font-weight:650;padding:0 7px}.proc-shell textarea{min-height:75px}.proc-heading{display:flex;justify-content:space-between;gap:16px;align-items:start}.proc-heading h3{margin:8px 0 4px}.proc-heading p{margin:0}.proc-tabs{display:flex;gap:4px;overflow-x:auto;padding:4px 0 10px;border-bottom:1px solid var(--line)}.proc-tabs button{white-space:nowrap;border:0;background:transparent;font:inherit;font-size:13px;padding:10px 12px;color:var(--muted);cursor:pointer;border-radius:8px}.proc-tabs button[aria-current]{background:var(--purple-soft);color:var(--purple);font-weight:700}.proc-tabs button:focus-visible{outline:2px solid var(--purple);outline-offset:2px}.proc-team{display:grid;grid-template-columns:minmax(0,1fr) minmax(140px,.6fr) auto;gap:10px;align-items:end;margin:12px 0}.proc-check{padding:9px 0;border-bottom:1px solid var(--line)}.proc-check label{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:12px;align-items:center}.proc-check input{margin-top:7px}.proc-context{padding:16px;border-left:3px solid var(--purple);background:var(--purple-soft);border-radius:0 10px 10px 0}.proc-context p{margin:6px 0}.proc-exam{border-top:1px solid var(--line);padding:12px 0}.proc-footer{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line);padding-top:14px}.proc-footer>span{margin-right:auto}.proc-message{padding:12px;background:var(--purple-soft);border-radius:8px}.proc-timeline article{padding:14px 0 14px 14px;border-left:2px solid var(--line);border-bottom:1px solid var(--line);overflow-wrap:anywhere}.proc-timeline small{display:block;color:var(--muted);margin-top:4px}.proc-timeline p{margin:6px 0;font-size:13px;white-space:pre-wrap}.proc-code{font-size:24px;letter-spacing:.12em;font-variant-numeric:tabular-nums;display:block}.proc-board>summary{cursor:pointer;font-weight:650}.proc-board-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}.proc-board-row p{margin:4px 0}.proc-board-row small{color:var(--muted)}
@media(max-width:600px){.proc-team{grid-template-columns:1fr}.proc-check label{grid-template-columns:1fr}.proc-heading,.proc-board-row{flex-direction:column;align-items:stretch}.proc-footer .btn{width:100%}.proc-shell fieldset{padding:12px}.proc-shell .fc-vitales{grid-template-columns:1fr}.proc-shell input,.proc-shell select,.proc-shell textarea{max-width:100%;min-width:0}}

/* Patient chart and encounter workspace: clear destinations, stable forms. */
.fc-nav { display:flex; align-items:center; flex-wrap:wrap; gap:4px; padding:0 0 12px; margin:0 0 8px; font-size:12px; }
.fc-nav>span { margin-right:4px; }
.fc-nav .btn { min-height:32px; padding:5px 10px; font-size:12px; }
.fc-nav button:hover { background:var(--surface-2); }

.fc-nav button:focus-visible,.fc-work-section button:focus-visible,.fc-work-section input:focus-visible,.fc-work-section textarea:focus-visible,.fc-work-section select:focus-visible { outline:2px solid var(--acento); outline-offset:3px; }
.fc-work-section[hidden] { display:none !important; }
.fc-work-section { min-width:0; padding:12px 0; scroll-margin-top:16px; }
.fc-work-section h3,.fc-encounter-context h3 { font-size:16px; line-height:1.4; margin:0 0 8px; }
.fc-work-section h4 { font-size:16px; margin:16px 0 8px; }
.fc-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:0 0 16px; }
.fc-section-heading p { max-width:65ch; margin:6px 0; font-size:13px; line-height:1.6; }
.fc-eyebrow { display:block; color:var(--texto-3); font-size:12px; font-weight:600; margin-bottom:8px; }
.fc-encounter-context { padding:0 0 12px; }
.fc-encounter-context p { margin:4px 0 10px; font-variant-numeric:tabular-nums; }
.fc-reference { border-left:3px solid var(--line); background:var(--surface-2); padding:12px 16px; margin:12px 0 20px; border-radius:0 8px 8px 0; font-size:13px; line-height:1.6; }
.fc-reference p { margin:6px 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.fc-rich-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:16px 0; }
.fc-rich-fields .fc-field { margin:0; }
.fc-work-section textarea { min-height:64px; line-height:1.55; }
.fc-reconcile fieldset { margin:18px 0; border:1px solid var(--line); border-radius:12px; padding:16px; min-width:0; }
.fc-reconcile legend { padding:0 8px; font-weight:600; }
.fc-candidate { padding:16px; margin:12px 0; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; }
.fc-candidate blockquote { margin:10px 0; padding:8px 12px; border-left:3px solid var(--acento); white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; }
.fc-origin { border-bottom:1px solid var(--line); padding:14px 0; font-size:13px; overflow-wrap:anywhere; }
.fc-origin small { display:block; margin-top:5px; }
.fc-contact-conversation { display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:18px 0; border-top:1px solid var(--line); margin-top:20px; }
.fc-feedback { padding:12px; border:1px solid var(--line); border-radius:8px; }
.fc-save-note { font-size:12px; line-height:1.5; border-top:1px solid var(--line); padding-top:16px; }
.fc-work-section .pf-val { white-space:pre-wrap; overflow-wrap:anywhere; }
@media(max-width:600px) { .fc-rich-fields { grid-template-columns:1fr; } .fc-nav .btn { min-height:40px; padding:7px 10px; } .fc-section-heading .btn { min-height:44px; } .fc-work-section .grid-2,.fc-work-section .grid-3 { grid-template-columns:1fr; } .fc-reconcile fieldset,.fc-candidate { padding:12px; } }
@media(prefers-reduced-motion:reduce) { .fc-nav button { transition:none; } }

.fc-fold { border-top:1px solid var(--line); }
.fc-fold>summary { cursor:pointer; font-size:14px; font-weight:650; padding:6px 0; }
.fc-fold>summary:focus-visible { outline:2px solid var(--acento); outline-offset:4px; }
.fc-fold-body { padding-top:12px; }
.fc-classic .fc-eyebrow { display:none; }
.fc-classic .fc-encounter-context { padding-bottom:6px; font-size:13px; }
.fc-classic .fc-encounter-context h3 { display:inline; font-size:14px; }
.fc-classic .fc-encounter-context>p { display:inline; margin-left:10px; font-size:12px; }
.fc-classic .fc-reference { padding:10px 12px; margin:10px 0; }
.fc-classic .fc-contact-brief { border:0; padding-bottom:0; grid-template-columns:repeat(3,minmax(0,1fr)); }
.fc-patient-classic [data-ficha-section="antecedentes"] .pf-datos { grid-template-columns:repeat(2,minmax(0,1fr)); }
.fc-patient-classic [data-ficha-section="antecedentes"] .pf-dato.ancho { grid-column:auto; }
.fc-classic .fc-complemento { margin:10px 0; }
@media(max-width:600px) { .fc-classic .fc-contact-brief,.fc-patient-classic [data-ficha-section="antecedentes"] .pf-datos { grid-template-columns:1fr; } }

/* Glass chart: contact first, continuous clinical reading, quiet motion. */
.modal.fc-glass-modal {
  --fc-panel:rgba(255,255,255,.88);
  --fc-glass:rgba(255,255,255,.72);
  --fc-edge:rgba(255,255,255,.92);
  --fc-border:rgba(63,91,126,.14);
  background:radial-gradient(ellipse at 0 0,rgba(var(--acento-rgb),.10),transparent 48%),var(--surface) !important;
  border:1px solid var(--fc-edge); border-radius:24px; padding:26px;
  box-shadow:0 24px 80px #10294726,inset 0 1px 0 var(--fc-edge);
  animation:none; transition:opacity 250ms var(--lq-ease),transform 250ms var(--lq-ease);
}
@starting-style { .modal.fc-glass-modal { opacity:0; transform:scale(.97); } }
.fc-glass-modal .close-x { z-index:2; }
.fc-glass-modal .fc-classic { min-width:0; }
.fc-glass-modal .pf-cab { margin:0 0 16px; padding:22px; border-radius:20px; background:var(--fc-glass); border:1px solid var(--fc-edge); box-shadow:0 8px 28px #10294709,inset 0 1px 0 var(--fc-edge); -webkit-backdrop-filter:blur(20px) saturate(150%); backdrop-filter:blur(20px) saturate(150%); }
.fc-glass-modal .pf-cab::after { display:none; }
.fc-glass-modal .pf-cab-top { padding-right:24px; }
.fc-glass-modal .pf-quien { align-items:center; min-width:0; }
.fc-glass-modal .pf-mono { width:54px; height:54px; border-radius:18px; background:linear-gradient(145deg,var(--surface),rgba(var(--acento-rgb),.16)); box-shadow:inset 0 1px 0 var(--fc-edge); border:1px solid var(--fc-border); color:var(--ink); }
.fc-glass-modal h2.pf-nombre { font-size:24px; line-height:1.25; letter-spacing:-.025em; }
.fc-glass-modal .pf-sub { margin-top:7px; row-gap:6px; }
.fc-contact-hub { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:20px; margin:20px 0 16px; padding:18px 0; border-block:1px solid var(--fc-border); }
.fc-glass-modal .fc-contact-brief { display:grid; grid-template-columns:1fr; align-content:center; gap:12px; margin:0; padding:0; }
.fc-glass-modal .fc-contact-brief .pf-dato { display:grid; grid-template-columns:120px minmax(0,1fr); align-items:baseline; gap:8px; }
.fc-glass-modal .pf-et { color:var(--texto-2); font-size:12px; font-weight:500; text-transform:none; letter-spacing:0; }
.fc-glass-modal .pf-val { color:var(--ink); }
.fc-glass-modal .fc-contact-brief .pf-val { font-size:14px; overflow-wrap:anywhere; }
.fc-glass-modal .fc-contact-conversation { display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:10px; margin:0; padding:0 0 0 20px; border:0; border-left:1px solid var(--fc-border); min-width:0; }
.fc-conversation-info { min-width:0; }
.fc-conversation-info .muted { margin-top:3px; line-height:1.5; }
.fc-glass-modal .fc-write { width:100%; justify-content:center; min-height:42px; }
.fc-glass-modal .pf-acciones { gap:8px; width:100%; }
.fc-glass-modal .pf-acciones .btn { min-height:40px; }
.fc-glass-modal .pf-acciones .btn:last-child { margin-left:auto; }
.fc-glass-modal .pf-alerta { margin:16px 0 0; border-radius:10px; box-shadow:none; }
.fc-glass-modal .fc-nav { gap:4px; padding:6px; margin:0 0 14px; border:1px solid var(--fc-border); border-radius:14px; background:var(--fc-glass); }
.fc-glass-modal .fc-nav>span { padding-left:8px; }
.fc-glass-modal .fc-nav .btn { box-shadow:none; background:transparent; border:0; color:var(--ink); border-radius:9px; min-height:36px; }
.fc-glass-modal .fc-work-section { padding:20px; margin:0 0 14px; border:1px solid var(--fc-border); border-radius:16px; background:var(--fc-panel); }
.fc-glass-modal .fc-section-heading { align-items:center; margin-bottom:4px; }
.fc-glass-modal .fc-section-heading .section-title { font-size:16px; color:var(--ink); text-transform:none; letter-spacing:-.01em; }
.fc-glass-modal .fc-fold { padding:0; }
.fc-glass-modal .fc-fold>summary { display:flex; align-items:center; gap:12px; padding:18px 20px; list-style:none; min-height:56px; }
.fc-glass-modal .fc-fold>summary::-webkit-details-marker { display:none; }
.fc-glass-modal .fc-fold>summary::after { content:''; width:7px; height:7px; flex:none; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; margin-left:auto; transform:rotate(-45deg); transition:transform 160ms var(--lq-ease); }
.fc-glass-modal .fc-fold[open]>summary::after { transform:rotate(45deg); }
.fc-glass-modal .fc-fold[open]>summary { border-bottom:1px solid var(--fc-border); }
.fc-glass-modal .fc-fold-body { padding:0 20px 20px; }
.fc-glass-modal .fc-data-group { padding-top:16px; margin-top:16px; border-top:1px solid var(--fc-border); }
.fc-glass-modal .fc-data-group h4 { font-size:14px; margin:0; }
.fc-glass-modal .fc-encounter-context { padding:16px 20px; margin-bottom:14px; border:1px solid var(--fc-border); border-radius:16px; background:var(--fc-glass); }
.fc-glass-modal .fc-encounter-context h3 { font-size:16px; }
.fc-glass-modal .fc-encounter-context .pf-alerta { margin-top:12px; }
.fc-glass-modal .fc-complemento { border:1px solid var(--fc-border); border-radius:10px; background:var(--surface-2); }
.fc-glass-modal .fc-complemento>summary { cursor:pointer; padding:12px; font-size:13px; font-weight:600; }
.fc-glass-modal .fc-complemento>div { padding:0 12px 12px; }
.fc-glass-modal .btn { transition:transform 160ms var(--lq-ease); }
.fc-glass-modal .btn:active:not(:disabled):not(:focus-visible) { transform:scale(.97); }
.fc-glass-modal :is(button,a,input,textarea,select,summary):focus-visible { outline:2px solid var(--acento); outline-offset:3px; }
@media(hover:hover) and (pointer:fine) {
  .fc-glass-modal .fc-nav .btn:hover,.fc-glass-modal .fc-fold>summary:hover { background:rgba(var(--acento-rgb),.07); }
  .fc-glass-modal .btn:hover { transform:none; }
}
html[data-theme="dark"] .modal.fc-glass-modal { --fc-panel:rgba(27,33,43,.96); --fc-glass:rgba(34,42,55,.88); --fc-edge:rgba(255,255,255,.10); --fc-border:rgba(170,191,219,.18); }
html[data-theme="dark"] .fc-glass-modal .pf-cab,html[data-theme="dark"] .fc-glass-modal .fc-nav,html[data-theme="dark"] .fc-glass-modal .fc-encounter-context { background:var(--fc-glass) !important; }
html[data-theme="dark"] .fc-glass-modal .fc-work-section { background:var(--fc-panel) !important; }
@media(max-width:600px) {
  .modal.fc-glass-modal { padding:12px; border-radius:20px; }
  .fc-glass-modal .pf-cab { padding:16px; border-radius:15px; }
  .fc-glass-modal h2.pf-nombre { font-size:20px; }
  .fc-glass-modal .pf-mono { width:40px; height:40px; border-radius:13px; font-size:15px; }
  .fc-glass-modal .pf-cab-top { padding-right:26px; }
  .fc-contact-hub { grid-template-columns:1fr; gap:14px; margin:16px 0 12px; padding:14px 0; }
  .fc-glass-modal .fc-contact-brief .pf-dato { grid-template-columns:1fr; gap:2px; }
  .fc-glass-modal .fc-contact-conversation { border:0; padding:0; gap:8px; }
  .fc-glass-modal .pf-acciones .btn { flex:1 1 auto; min-height:44px; }
  .fc-glass-modal .pf-acciones .btn:last-child { margin:0; }
  .fc-glass-modal .fc-write { min-height:44px; }
  .fc-glass-modal .fc-nav { flex-wrap:nowrap; overflow-x:auto; }
  .fc-glass-modal .fc-nav .btn { flex:none; min-height:44px; }
  .fc-glass-modal .fc-nav>span { display:none; }
  .fc-glass-modal .fc-work-section { padding:16px; }
  .fc-glass-modal .fc-fold { padding:0; }
  .fc-glass-modal .fc-fold>summary { padding:16px; }
  .fc-glass-modal .fc-fold-body { padding:0 16px 16px; }
  .fc-glass-modal .fc-encounter-context { padding:14px; }
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  .modal.fc-glass-modal { --fc-glass:var(--surface); --fc-panel:var(--surface); --fc-border:var(--ink-soft); }
  .fc-glass-modal .pf-cab { backdrop-filter:none; -webkit-backdrop-filter:none; }
}
@media(prefers-reduced-motion:reduce) {
  .modal.fc-glass-modal,.fc-glass-modal * { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .fc-glass-modal .btn:active { transform:none !important; }
}

/* Visible workspace: every main section starts open; tools follow the scroll. */
.fc-glass-modal .fc-tools { position:sticky; top:0; z-index:5; padding:10px; margin:0 0 14px; border:1px solid var(--fc-border); border-radius:14px; background:var(--surface); box-shadow:0 6px 18px #10294712; }
.fc-glass-modal .fc-tools .fc-nav { margin:6px 0 0; padding:0; border:0; background:transparent !important; }
.fc-glass-modal .fc-tools>.fc-nav:first-child { margin:0; }
.fc-glass-modal .fc-tools .pf-acciones .btn:last-child { margin-left:auto; }
.fc-glass-modal .fc-patient-overview { display:grid; grid-template-columns:1.1fr 1fr; gap:14px; align-items:start; }
.fc-glass-modal .fc-patient-overview .pf-datos { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.fc-glass-modal .fc-patient-overview .pf-dato.doble,.fc-glass-modal .fc-patient-overview .pf-dato.ancho { grid-column:1/-1; }
.fc-glass-modal .fc-patient-overview .pf-val { overflow-wrap:anywhere; }
.fc-glass-modal .fc-patient-overview .fc-data-group { padding-top:12px; margin-top:12px; }
.fc-glass-modal .fc-work-section { scroll-margin-top:130px; }
.fc-glass-modal .fc-encounter-classic>.modal-actions { position:sticky; bottom:0; z-index:5; background:var(--surface); padding:12px; border:1px solid var(--fc-border); border-radius:12px; box-shadow:0 -6px 18px #1029470c; }
@media(max-width:760px) {
 .fc-glass-modal .fc-patient-overview { grid-template-columns:1fr; gap:0; }
 .fc-glass-modal .fc-tools { padding:8px; }
 .fc-glass-modal .fc-tools .pf-acciones { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
 .fc-glass-modal .fc-tools .pf-acciones .btn:last-child { margin:0; }
 .fc-glass-modal .fc-tools .pf-acciones .btn { padding:8px; justify-content:center; }
 .fc-glass-modal .fc-work-section { scroll-margin-top:180px; }
}
@media(max-width:420px) { .fc-glass-modal .fc-patient-overview .pf-datos { grid-template-columns:1fr; } }

/* Primary clinical actions and explicit photo metadata. */
.fc-glass-modal .fc-write { min-height:48px; font-size:15px; font-weight:650; box-shadow:0 5px 16px rgba(var(--acento-rgb),.22); }
.fc-glass-modal .fc-tools .pf-acciones .btn:first-child { color:var(--acento); font-weight:700; border-color:var(--acento); background:rgba(var(--acento-rgb),.09); }
.fc-glass-modal .fx-emitir { padding:20px; border:1px solid rgba(var(--acento-rgb),.28); background:rgba(var(--acento-rgb),.05); border-radius:16px; scroll-margin-top:170px; }
.fc-glass-modal .fx-emitir-cab b { font-size:18px; }
.fc-glass-modal .fx-emitir-cab span { font-size:13px; }
.fc-glass-modal .fx-emitir-btns { gap:10px; margin:16px 0; }
.fc-glass-modal .fx-emitir-btns .btn { min-height:44px; padding:10px 16px; font-size:14px; }
.fc-glass-modal .fc-plan-primary { font-weight:700; }
.fc-glass-modal .fc-plan-shortcut { margin-top:8px; min-height:40px; }
.fc-glass-modal .fc-photo-fields { margin:20px 0 12px; padding:14px; min-width:0; border:1px solid var(--fc-border); border-radius:12px; background:var(--surface); }
.fc-glass-modal .fc-photo-fields legend { font-size:14px; font-weight:650; padding:0 6px; }
.fc-glass-modal .fc-photo-fields p { font-size:12px; line-height:1.5; color:var(--texto-2); margin:0 0 12px; }
.fc-glass-modal .fx-emitir-foto { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto; align-items:end; gap:12px; }
.fc-glass-modal .fx-emitir-foto label { margin:0; font-size:12px; min-width:0; }
.fc-glass-modal .fx-emitir-foto :is(select,input) { width:100%; margin-top:6px; font-size:13px; min-height:42px; }
.fc-glass-modal .fx-emitir-foto .btn { min-height:42px; }
.fc-glass-modal .fc-encounter-classic .fc-work-section { scroll-margin-top:155px; }
@media(max-width:700px) {
 .fc-glass-modal .fx-emitir { padding:14px; }
 .fc-glass-modal .fx-emitir-foto { grid-template-columns:1fr; }
 .fc-glass-modal .fc-tools .pf-acciones .btn { font-size:12px; }
 .fc-glass-modal .fc-plan-shortcut { width:100%; }
}
@media(max-width:700px) {
 .fc-glass-modal .fx-emitir,.fc-glass-modal .fc-encounter-classic .fc-work-section { scroll-margin-top:220px; }
}

/* Agenda: servicios y ajustes monetarios legibles en escritorio y teléfono. */
.agenda-servicios { margin: 12px 0; min-width: 0; }
.agenda-servicios-head, .agenda-servicios-total { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; }
.agenda-servicio { border-top: 1px solid var(--line); padding: 12px 0; }
.agenda-servicio-resumen { display: flex; align-items: center; gap: 12px; }
.agenda-servicio-resumen > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.agenda-servicio-resumen small { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.agenda-servicio-resumen strong, .agenda-servicios-total strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.agenda-servicios .btn, .agenda-servicio-editor .btn { min-height: 44px; }
.agenda-servicios-total { border-top: 1px solid var(--line); }
.agenda-servicio-editor, .agenda-ajuste { padding: 12px; margin-top: 10px; border-radius: 10px; background: var(--purple-soft); }
.agenda-servicio-editor label, .agenda-ajuste label { display: block; }
.agenda-ajuste-toggle { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.agenda-ajuste-toggle input { width: auto; margin: 0; }
@media (max-width: 480px) {
  .agenda-servicio-resumen { flex-wrap: wrap; }
  .agenda-servicio-resumen > span { flex-basis: 100%; }
  .agenda-servicio-resumen .btn { margin-left: auto; }
}

/* Agenda y listas: lectura estable para recepción. */
.lista-paginacion{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.lista-paginacion>.muted{margin-right:auto}
.lista-paginacion button{min-width:40px;min-height:40px}
.coleccion-paginada{display:flex;flex-direction:column}
.af-destacar{position:relative;margin-left:auto}
.af-destacar summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;border:1px solid var(--line);border-radius:24px;padding:10px 14px;min-height:44px}
.af-destacar summary::-webkit-details-marker{display:none}
.af-destacar-opciones{position:absolute;right:0;top:calc(100% + 8px);z-index:30;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 30px #0002;padding:12px;display:flex;flex-direction:column;gap:8px;min-width:220px}
.af-destacar-opciones button{text-align:left;min-height:44px}
.af-destacar summary:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
.cd-gutter{box-shadow:3px 0 6px #00000008}
.deskbar{overflow:visible;min-height:72px;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:12px}
.deskbar::before{mask-image:none;-webkit-mask-image:none;background:var(--surface)}
body>.notif-ov{position:fixed;inset:0;z-index:60}
body>.notif-menu{z-index:61;top:max(80px,calc(env(safe-area-inset-top) + 72px)) !important;max-height:calc(100dvh - 96px);overflow-y:auto}

.plan-pago-resumen{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin:12px 0;overflow:hidden}
.plan-pago-cabecera{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px;border-bottom:1px solid var(--line)}
.plan-pago-tabla{width:100%;font-size:13px;font-variant-numeric:tabular-nums}
.plan-pago-tabla th,.plan-pago-tabla td{padding:12px;text-align:right;vertical-align:top;white-space:nowrap}
.plan-pago-tabla th:first-child,.plan-pago-tabla td:first-child{text-align:left;min-width:200px;max-width:330px;white-space:normal}
.plan-pago-tabla small{display:block;margin-top:4px}
.plan-pago-totales{display:flex;gap:24px;flex-wrap:wrap;background:var(--surface-2);padding:16px}
.plan-pago-totales>div{flex:1;min-width:120px;display:flex;flex-direction:column;gap:4px}
.plan-pago-totales span{font-size:12px;color:var(--ink-soft)}
.plan-pago-totales b{font-size:18px;font-variant-numeric:tabular-nums}
.plan-pago-resumen>p,.plan-pago-resumen>.agenda-ajuste{margin:12px 16px}
.pago-saldado{color:#167044;font-weight:600}
html[data-theme="dark"] .pago-saldado{color:#8cddb1}

@media(max-width:720px){
 .plan-pago-tabla,.plan-pago-tabla tbody,.plan-pago-tabla tr,.plan-pago-tabla td{display:block;width:100%}
 .plan-pago-tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .plan-pago-tabla tr{padding:12px;border-bottom:1px solid var(--line)}
 .plan-pago-tabla td{padding:4px 0;border:0;white-space:normal;display:flex;justify-content:space-between;gap:12px}
 .plan-pago-tabla td:first-child{display:block;min-width:0;max-width:none;padding-bottom:8px}
 .plan-pago-tabla td[data-label]::before{content:attr(data-label);color:var(--ink-soft);text-align:left}
 .plan-pago-tabla td:last-child{padding-top:8px}
 .plan-pago-totales{gap:12px}
 .plan-pago-totales>div{min-width:100px}
}

/* Agenda permanece bajo la ficha: el resaltado no atraviesa el modal. */
body.modal-abierto .cal-appt.agenda-focus-buzz,body.modal-abierto .cd-appt.agenda-focus-buzz,body.modal-abierto .slot-pop-box.agenda-focus-buzz{animation:none!important;transform:none!important;z-index:2!important}
body.modal-abierto .ficha-hover{display:none}
.servicio-edicion,.pagos-historial{padding:14px;margin:12px 0;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.servicio-edicion label,.pago-respaldo-campos label{display:block;margin-top:10px}
.pago-respaldo-campos{margin:12px 0}.pago-respaldo-campos small,.pago-historial-fila small{display:block;color:var(--muted);margin-top:4px;overflow-wrap:anywhere}
.pago-historial-fila{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.pago-historial-acciones{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.cita-edicion{scroll-margin-top:20px}
@media(max-width:600px){.pago-historial-fila{flex-direction:column}.pago-historial-acciones .btn{flex:1}.pago-respaldo-campos input{max-width:100%}}

/* Abonos recibidos y compromisos de pago: dos niveles visuales distintos. */
.cuotas-panel{margin:16px 0;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--card,transparent)}
.cuotas-panel h3,.cuotas-panel h4{margin:0 0 10px}.cuotas-panel h4{margin-top:20px}
.cuotas-cabecera,.cuotas-acciones,.cuotas-paginacion{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cuotas-cabecera{align-items:flex-start;justify-content:space-between}.cuotas-cabecera p{margin:4px 0 12px;max-width:58ch}
.cuotas-totales{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0}
.cuotas-totales>div{padding:14px;background:rgba(var(--acento-rgb),.055);border-radius:10px;min-width:0}.cuotas-totales dt{font-size:13px;color:var(--muted)}.cuotas-totales dd{margin:5px 0 0;font-size:clamp(17px,2vw,23px);font-weight:700;overflow-wrap:anywhere}
.cuota-fila{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}.cuota-fila>div{min-width:0}.cuota-fila small{display:block;margin-top:4px;color:var(--muted);font-size:13px;overflow-wrap:anywhere}.cuota-fila b{overflow-wrap:anywhere}
.cuotas-editor{padding:16px;margin:16px 0;border:1px solid var(--line);border-radius:12px}.cuotas-editor label{display:grid;gap:6px;margin:12px 0;min-width:0}.cuotas-editor input,.cuotas-editor select{max-width:100%;width:100%;box-sizing:border-box}.cuotas-editor .cuota-fila label{flex:1}.cuotas-paginacion{justify-content:flex-end;margin-top:12px;font-size:13px}
.cuotas-error{padding:12px;border-left:3px solid #c96b21;background:rgba(201,107,33,.08);border-radius:6px;line-height:1.5}.cuota-disponible{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:10px;padding:10px;border:1px solid var(--line);border-radius:8px}
@media(max-width:600px){.cuotas-panel{padding:14px}.cuotas-totales{gap:6px}.cuotas-totales>div{padding:10px 7px}.cuotas-totales dt{font-size:11px}.cuota-fila,.cuota-disponible{flex-wrap:wrap}.cuotas-editor{padding:10px}.cuotas-editor .grid-2{grid-template-columns:1fr}.cuotas-acciones{width:100%}.cuotas-acciones .btn{white-space:normal;max-width:100%}.cuotas-cabecera h3{font-size:18px}}

/* ============================================================================
   v618 · zairi · MÓDULOS SERENOS  (25-sep-2026)
   Capa común para Planes, Tratamientos, Insumos, Conciliación e Informes, y el
   cristal de la barra superior. Reglas: sólo tokens vivos de v568 (ni un color
   literal salvo el velo de la barra, calcado de la landing), prefijo propio
   .zm- (negocio.html carga esta hoja y tiene sus propias .cita/.paginador/.ficha),
   el acento sólo como botón, punto o cifra clave, y cada movimiento con su
   reposo en prefers-reduced-motion. No se edita ninguna capa anterior.
   ============================================================================ */

/* ---------- 41 · Barra superior: el cristal de la landing ----------
   El 24-sep (8a8e328, «fondo uniforme incluyendo el encabezado») la barra pasó a
   var(--surface) opaco y dejó de difuminar. Se vuelve a la receta de
   public/landing/index.html:582-873: lámina ::before en z 0 (en WebKit un pseudo
   en z negativo no difumina), hijos en z 1, cola ::after enmascarada de 22 px
   (= 94 de .main − 72 de la barra: no vela el título en reposo). No se declara
   ningún .deskbar{z-index} nuevo (lo fijan test-panel-v599 y v602), ni
   transform/opacity/filter en la barra (crearía una raíz de fondo). */
@property --tono-noche{ syntax:'<number>'; inherits:true; initial-value:0; }
.deskbar, .topbar{ --tono-noche:0; }
html[data-theme="dark"] .deskbar, html[data-theme="dark"] .topbar{ --tono-noche:1; }
.deskbar{
  background:transparent; border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; mask:none; -webkit-mask:none;
  transition:left .62s cubic-bezier(.2,.86,.24,1), --tono-noche var(--mudanza) ease;
}
@media(min-width:821px){ .deskbar{ left:240px; } }
.deskbar > *{ position:relative; z-index:1; }
.deskbar::before{
  content:''; display:block; position:absolute; inset:0; z-index:0; pointer-events:none;
  border:0; box-shadow:none; -webkit-mask-image:none; mask-image:none;
  -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%);
  background:
    linear-gradient(180deg,rgba(2,6,20,calc(.34 * var(--tono-noche,0))),rgba(2,6,20,calc(.22 * var(--tono-noche,0)))),
    linear-gradient(180deg,rgba(255,255,255,calc(.50 * (1 - var(--tono-noche,0)))),rgba(255,255,255,calc(.30 * (1 - var(--tono-noche,0)))));
}
.deskbar::after{
  content:''; display:block; position:absolute; z-index:0; left:0; right:0; top:100%; height:22px; pointer-events:none;
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  background:
    linear-gradient(180deg,rgba(2,6,20,calc(.22 * var(--tono-noche,0))),rgba(2,6,20,0)),
    linear-gradient(180deg,rgba(255,255,255,calc(.30 * (1 - var(--tono-noche,0)))),rgba(255,255,255,0));
  -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.55) 45%,rgba(0,0,0,.18) 78%,transparent);
          mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.55) 45%,rgba(0,0,0,.18) 78%,transparent);
}
.deskbar.posada::after{ height:40px; }
html .deskbar .deskbar-search{
  background:rgba(255,255,255,calc(.62 - .53 * var(--tono-noche,0)));
  box-shadow:inset 0 1px rgba(255,255,255,calc(.72 - .64 * var(--tono-noche,0))), 0 12px 32px -26px rgba(6,18,64,.65);
}
@media(max-width:820px){
  .topbar{ background:transparent; border-bottom:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; transition:--tono-noche var(--mudanza) ease; }
  .topbar > *{ position:relative; z-index:1; }
  .topbar::before{ content:''; display:block; position:absolute; inset:0; z-index:0; pointer-events:none;
    -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%);
    background:linear-gradient(180deg,rgba(2,6,20,calc(.34 * var(--tono-noche,0))),rgba(2,6,20,calc(.22 * var(--tono-noche,0)))),
               linear-gradient(180deg,rgba(255,255,255,calc(.50 * (1 - var(--tono-noche,0)))),rgba(255,255,255,calc(.30 * (1 - var(--tono-noche,0))))); }
  .topbar::after{ content:''; position:absolute; z-index:0; left:0; right:0; top:100%; bottom:auto; height:18px; pointer-events:none;
    -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
    background:linear-gradient(180deg,rgba(2,6,20,calc(.22 * var(--tono-noche,0))),rgba(2,6,20,0)),
               linear-gradient(180deg,rgba(255,255,255,calc(.30 * (1 - var(--tono-noche,0)))),rgba(255,255,255,0));
    -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.55) 45%,rgba(0,0,0,.18) 78%,transparent);
            mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.55) 45%,rgba(0,0,0,.18) 78%,transparent); }
}
@media (prefers-reduced-transparency: reduce){
  .deskbar::before, .topbar::before{ background:var(--solido); background-image:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .deskbar::after, .topbar::after{ -webkit-backdrop-filter:none; backdrop-filter:none; -webkit-mask-image:none; mask-image:none;
    background:linear-gradient(180deg,color-mix(in srgb,var(--solido) 94%,transparent),transparent); }
  html .deskbar .deskbar-search{ background:var(--solido-2); box-shadow:none; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .deskbar::before, .topbar::before{ background:var(--solido); background-image:none; }
  .deskbar::after, .topbar::after{ background:linear-gradient(180deg,color-mix(in srgb,var(--solido) 94%,transparent),transparent); -webkit-mask-image:none; mask-image:none; }
}
@media (prefers-reduced-motion: reduce){ .deskbar, .topbar{ transition:none; } }

/* ---------- 42 · Cabecera de módulo ---------- */
.zm-cabeza{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; margin:0 0 22px; }
.zm-cabeza__texto{ min-width:0; flex:1 1 320px; }
.zm-ceja{ display:block; margin:0 0 6px; font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--texto-3); }
.zm-cabeza h1{ margin:0; font-size:30px; font-weight:500; letter-spacing:-.042em; line-height:1.08; color:var(--texto); }
.zm-cabeza p{ margin:8px 0 0; max-width:68ch; font-size:14px; line-height:1.5; color:var(--texto-2); }
.zm-cabeza__acciones{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.zm-cabeza__acciones .btn{ white-space:nowrap; }
.zm-mas{ position:relative; }
.zm-mas > summary{ list-style:none; cursor:pointer; }
.zm-mas > summary::-webkit-details-marker{ display:none; }
.zm-mas__menu{ position:absolute; right:0; top:calc(100% + 8px); z-index:30; min-width:230px; padding:6px; display:flex; flex-direction:column;
  background:var(--solido); border:1px solid var(--linea); border-radius:var(--r-chica); box-shadow:var(--pz-sombra); animation:zm-llega .18s var(--sal) both; }
.zm-mas__menu button{ all:unset; box-sizing:border-box; padding:10px 12px; border-radius:10px; font-size:14px; color:var(--texto); cursor:pointer; }
.zm-mas__menu button:hover, .zm-mas__menu button:focus-visible{ background:var(--solido-2); }
.zm-mas__menu button:focus-visible{ outline:2px solid var(--acento); outline-offset:-2px; }
@media(max-width:640px){ .zm-cabeza h1{ font-size:26px; } .zm-cabeza__acciones{ width:100%; } .zm-cabeza__acciones .btn.gold{ margin-left:auto; } }

/* ---------- 43 · Cifras (KPI) serenas ---------- */
.zm-cifras{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:0 0 18px; }
.zm-cifra{ all:unset; box-sizing:border-box; display:flex; flex-direction:column; gap:4px; min-width:0; padding:14px 16px 13px;
  background:var(--solido); border:1px solid var(--linea); border-radius:var(--r-chica); color:var(--texto);
  transition:border-color .18s ease, background-color .18s ease, transform .14s var(--sal); }
button.zm-cifra{ cursor:pointer; }
button.zm-cifra:active{ transform:scale(.98); }
button.zm-cifra:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
.zm-cifra__etiqueta{ font-size:12.5px; color:var(--texto-2); line-height:1.3; }
.zm-cifra__valor{ font-size:24px; font-weight:500; letter-spacing:-.03em; line-height:1.1; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.zm-cifra__sub{ font-size:12px; color:var(--texto-3); font-variant-numeric:tabular-nums; }
.zm-cifra[aria-pressed="true"]{ border-color:rgba(var(--acento-rgb),.55); box-shadow:0 0 0 1px rgba(var(--acento-rgb),.55); }
.zm-cifra[aria-pressed="true"] .zm-cifra__valor{ color:var(--acento); }
.zm-cifra--clave .zm-cifra__valor{ color:var(--acento); }
@media (hover:hover) and (pointer:fine){ button.zm-cifra:hover{ background:var(--solido-2); } }

/* ---------- 44 · Segmentado (filtro por etapa, vista) ---------- */
.zm-seg{ display:inline-flex; align-items:center; gap:2px; max-width:100%; padding:3px; overflow-x:auto; scrollbar-width:none;
  background:var(--solido-2); border-radius:999px; }
.zm-seg::-webkit-scrollbar{ display:none; }
.zm-seg__op{ all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:7px; flex:0 0 auto; min-height:34px; padding:6px 14px;
  border-radius:999px; font-size:13.5px; color:var(--texto-2); cursor:pointer; white-space:nowrap;
  transition:background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .14s var(--sal); }
.zm-seg__op:active{ transform:scale(.97); }
.zm-seg__op:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
.zm-seg__op[aria-pressed="true"], .zm-seg__op[aria-checked="true"]{ background:var(--solido); color:var(--texto); box-shadow:0 1px 2px rgba(16,20,40,.10), 0 4px 12px -6px rgba(16,20,40,.18); }
.zm-seg__cuenta{ font-size:12px; color:var(--texto-3); font-variant-numeric:tabular-nums; }
@media (hover:hover) and (pointer:fine){ .zm-seg__op:hover{ color:var(--texto); } }
.zm-barra-filtros{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px; }
.zm-barra-filtros .zm-buscar{ flex:1 1 220px; max-width:360px; }
.zm-buscar{ position:relative; }
.zm-buscar input{ width:100%; box-sizing:border-box; min-height:40px; padding:8px 14px 8px 36px; border-radius:999px; border:1px solid var(--linea); background:var(--solido); color:var(--texto); font:inherit; font-size:14px; }
.zm-buscar::before{ content:''; position:absolute; left:14px; top:50%; width:13px; height:13px; margin-top:-7px; border:1.6px solid var(--texto-3); border-radius:50%; pointer-events:none; }
.zm-buscar::after{ content:''; position:absolute; left:25px; top:calc(50% + 4px); width:5px; height:1.6px; background:var(--texto-3); transform:rotate(45deg); pointer-events:none; }
.zm-buscar input:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
/* Las reglas globales de campos (margen inferior y, de noche, relleno de 12 px) le
   quitaban el espacio a la lupa: aquí pesan más (0,2,2) para todos los módulos. */
html .zm-buscar, html[data-theme="dark"] .zm-buscar{ display:block; margin:0; }
html .zm-buscar input, html[data-theme="dark"] .zm-buscar input{ margin:0; padding:8px 14px 8px 36px; border-radius:999px; }

/* ---------- 45 · Listas de filas que se abren ---------- */
.zm-lista{ background:var(--solido); border:1px solid var(--linea); border-radius:var(--r-tarjeta); padding:6px; }
.zm-lista__titulo{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px 8px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-3); }
.zm-fila{ all:unset; box-sizing:border-box; position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto 18px; align-items:center; gap:6px 16px;
  width:100%; min-height:60px; padding:12px 14px; border-radius:var(--r-chica); cursor:pointer; color:var(--texto);
  transition:background-color .18s ease, transform .14s var(--sal); }
.zm-fila + .zm-fila::before{ content:''; position:absolute; left:14px; right:14px; top:0; height:1px; background:var(--linea); opacity:.7; transition:opacity .18s ease; }
.zm-fila--icono{ grid-template-columns:36px minmax(0,1fr) auto 18px; }
.zm-fila__ico{ display:grid; place-items:center; width:36px; height:36px; border-radius:12px; background:var(--solido-2); color:var(--texto-2); font-size:13px; font-weight:600; letter-spacing:-.01em; }
.zm-fila__principal{ min-width:0; }
.zm-fila__titulo{ display:block; font-size:15px; font-weight:500; letter-spacing:-.01em; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-fila__sub{ display:block; margin-top:3px; font-size:13px; color:var(--texto-2); line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-fila__meta{ display:flex; align-items:center; justify-content:flex-end; gap:14px; font-size:13px; color:var(--texto-2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.zm-fila__monto{ font-size:15px; font-weight:500; color:var(--texto); letter-spacing:-.01em; }
.zm-fila__chevron{ width:8px; height:8px; justify-self:end; margin-right:4px; border-right:1.6px solid var(--texto-3); border-top:1.6px solid var(--texto-3); transform:rotate(45deg); transition:transform .18s var(--sal), border-color .18s ease; }
.zm-fila:focus-visible{ outline:2px solid var(--acento); outline-offset:-2px; }
.zm-fila:active{ transform:scale(.995); }
@media (hover:hover) and (pointer:fine){
  .zm-fila:hover{ background:var(--solido-2); }
  .zm-fila:hover + .zm-fila::before, .zm-fila:hover::before{ opacity:0; }
  .zm-fila:hover .zm-fila__chevron{ transform:translateX(3px) rotate(45deg); border-color:var(--texto); }
}
@media(max-width:640px){
  .zm-fila, .zm-fila--icono{ grid-template-columns:minmax(0,1fr) 18px; }
  .zm-fila__ico{ display:none; }
  .zm-fila__meta{ grid-column:1; grid-row:2; justify-content:flex-start; flex-wrap:wrap; gap:10px; }
  .zm-fila__chevron{ grid-column:2; grid-row:1 / span 2; }
}

/* Estado: punto semántico + texto neutro (el color vive sólo en el punto). */
.zm-estado{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--texto-2); white-space:nowrap; }
.zm-estado::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--texto-3); flex:0 0 auto; }
.zm-estado[data-tono="acento"]::before{ background:var(--acento); }
.zm-estado[data-tono="ok"]::before{ background:var(--ok); }
.zm-estado[data-tono="aviso"]::before{ background:#B8860B; }
.zm-estado[data-tono="mal"]::before{ background:var(--danger); }
.zm-estado[data-tono="hueco"]::before{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--texto-3); }

/* Avance fino (sesiones hechas, cobrado, stock). */
.zm-avance{ display:block; width:100%; height:4px; border-radius:999px; background:var(--solido-2); overflow:hidden; }
.zm-avance > i{ display:block; height:100%; width:100%; border-radius:inherit; background:var(--texto); opacity:.78; transform-origin:left center; transition:transform .5s var(--sal); }
.zm-avance--acento > i{ background:var(--acento); opacity:1; }

/* Paginador: re-viste PaginaControles (.lista-paginacion) sin cambiar su API. */
.zm-lista .lista-paginacion, .zm-paginado .lista-paginacion{ border-top:0; padding:10px 8px 6px; gap:4px; }
.zm-lista .lista-paginacion > .muted, .zm-paginado .lista-paginacion > .muted{ font-size:12.5px; color:var(--texto-3); }
.zm-lista .lista-paginacion .btn, .zm-paginado .lista-paginacion .btn{ min-width:34px; min-height:34px; padding:0 10px; border-color:transparent; background:transparent; color:var(--texto-2); }
.zm-lista .lista-paginacion .btn[aria-current="page"], .zm-paginado .lista-paginacion .btn[aria-current="page"]{ background:var(--acento-suave); color:var(--acento); }
.zm-lista .lista-paginacion .btn:disabled, .zm-paginado .lista-paginacion .btn:disabled{ opacity:.35; }

/* Vacío. */
.zm-vacio{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:36px 20px; text-align:center; color:var(--texto-2); }
.zm-vacio strong{ font-size:15px; font-weight:500; color:var(--texto); }
.zm-vacio p{ margin:0; max-width:46ch; font-size:13.5px; line-height:1.5; }
.zm-vacio .btn{ margin-top:10px; }

/* ---------- 46 · Solapas del módulo ---------- */
.zm-solapas{ display:flex; gap:22px; margin:0 0 18px; border-bottom:1px solid var(--linea); overflow-x:auto; scrollbar-width:none; }
.zm-solapas::-webkit-scrollbar{ display:none; }
.zm-solapa{ all:unset; box-sizing:border-box; position:relative; flex:0 0 auto; padding:10px 0 12px; font-size:14px; color:var(--texto-2); cursor:pointer; white-space:nowrap; transition:color .18s ease; }
.zm-solapa::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:2px; background:var(--texto); transform:scaleX(0); transition:transform .22s var(--sal); }
.zm-solapa[aria-selected="true"]{ color:var(--texto); }
.zm-solapa[aria-selected="true"]::after{ transform:scaleX(1); }
.zm-solapa:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; border-radius:6px; }
@media (hover:hover) and (pointer:fine){ .zm-solapa:hover{ color:var(--texto); } }

/* ---------- 47 · Secciones y editor con índice ---------- */
.zm-tarjeta{ background:var(--solido); border:1px solid var(--linea); border-radius:var(--r-tarjeta); padding:20px 22px; }
.zm-tarjeta + .zm-tarjeta{ margin-top:14px; }
.zm-tarjeta__cabeza{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 14px; }
.zm-tarjeta__cabeza h2, .zm-tarjeta__cabeza h3{ margin:0; font-size:16px; font-weight:500; letter-spacing:-.015em; color:var(--texto); }
.zm-tarjeta__cabeza p{ margin:4px 0 0; font-size:13px; color:var(--texto-2); }
.zm-editor{ display:grid; grid-template-columns:190px minmax(0,1fr); gap:28px; align-items:start; }
.zm-indice{ position:sticky; top:0; display:flex; flex-direction:column; gap:2px; padding-top:2px; }
.zm-indice button{ all:unset; box-sizing:border-box; display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; font-size:13.5px; color:var(--texto-2); cursor:pointer; transition:background-color .18s ease, color .18s ease; }
.zm-indice button[aria-current="true"]{ background:var(--solido-2); color:var(--texto); }
.zm-indice button:focus-visible{ outline:2px solid var(--acento); outline-offset:-2px; }
.zm-indice__n{ display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; border:1px solid var(--linea); font-size:11px; color:var(--texto-3); font-variant-numeric:tabular-nums; }
.zm-indice button[aria-current="true"] .zm-indice__n{ border-color:var(--texto); color:var(--texto); }
@media (hover:hover) and (pointer:fine){ .zm-indice button:hover{ color:var(--texto); } }
.zm-seccion{ scroll-margin-top:12px; padding:0 0 22px; }
.zm-seccion + .zm-seccion{ padding-top:22px; border-top:1px solid var(--linea); }
.zm-seccion > h3{ margin:0 0 4px; font-size:16px; font-weight:500; letter-spacing:-.015em; color:var(--texto); }
.zm-seccion > .zm-seccion__ayuda{ margin:0 0 14px; font-size:13px; line-height:1.5; color:var(--texto-2); }
.zm-campos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px 16px; }
.zm-campos--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.zm-campo{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.zm-campo > span, .zm-campo > label{ font-size:12.5px; color:var(--texto-2); }
.zm-campo small{ font-size:12px; color:var(--texto-3); line-height:1.4; }
.zm-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.zm-chip{ all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:6px 13px; border-radius:999px; border:1px solid var(--linea); font-size:13.5px; color:var(--texto-2); cursor:pointer; transition:background-color .18s ease, color .18s ease, border-color .18s ease, transform .14s var(--sal); }
.zm-chip:active{ transform:scale(.97); }
.zm-chip:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
.zm-chip[aria-pressed="true"]{ background:var(--texto); border-color:var(--texto); color:var(--fondo); }
@media (hover:hover) and (pointer:fine){ .zm-chip:hover{ border-color:var(--texto-3); color:var(--texto); } }
.zm-pie-acciones{ position:sticky; bottom:-1px; display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; margin:6px -4px 0; padding:14px 4px 4px; background:var(--solido); border-top:1px solid var(--linea); }
.zm-pie-acciones .zm-pie-nota{ margin-right:auto; font-size:13px; color:var(--texto-2); }
@media(max-width:820px){
  .zm-editor{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .zm-indice{ position:sticky; top:0; z-index:2; flex-direction:row; overflow-x:auto; scrollbar-width:none; padding:4px 0 8px; background:var(--solido); }
  .zm-indice::-webkit-scrollbar{ display:none; }
  .zm-indice button{ flex:0 0 auto; padding:7px 11px; }
  .zm-campos--2{ grid-template-columns:minmax(0,1fr); }
}

/* Pares clave/valor de sólo lectura (insumos del tratamiento, costeo). */
.zm-pares{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0; margin:0; }
.zm-pares > dt, .zm-pares > dd{ margin:0; padding:10px 0; border-top:1px solid var(--linea); font-size:14px; }
.zm-pares > dt{ color:var(--texto-2); min-width:0; }
.zm-pares > dd{ text-align:right; font-variant-numeric:tabular-nums; color:var(--texto); }
.zm-pares > dt:first-of-type, .zm-pares > dd:first-of-type{ border-top:0; }
.zm-pares .zm-total{ font-weight:500; }

/* ---------- 48 · Gráficos sin librería ---------- */
.zm-barras{ display:flex; flex-direction:column; gap:10px; }
.zm-barras__fila{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,2fr) auto; align-items:center; gap:12px; font-size:13px; }
.zm-barras__nombre{ color:var(--texto-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-barras__valor{ color:var(--texto); font-variant-numeric:tabular-nums; text-align:right; min-width:64px; }
.zm-barras .zm-avance{ height:8px; }
.zm-columnas{ display:flex; align-items:flex-end; gap:8px; height:160px; padding-top:18px; }
.zm-columnas__col{ position:relative; flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; min-width:0; height:100%; }
.zm-columnas__barra{ width:min(38px,100%); border-radius:8px 8px 3px 3px; background:var(--texto); opacity:.82; transform-origin:bottom center; animation:zm-crece .6s var(--sal) both; }
.zm-columnas__col--actual .zm-columnas__barra{ background:var(--acento); opacity:1; }
.zm-columnas__num{ font-size:11.5px; color:var(--texto-2); font-variant-numeric:tabular-nums; }
.zm-columnas__eti{ font-size:11.5px; color:var(--texto-3); white-space:nowrap; }
.zm-frase{ margin:0 0 16px; font-size:15px; line-height:1.55; color:var(--texto-2); max-width:78ch; }
.zm-frase b{ color:var(--texto); font-weight:500; }
@keyframes zm-crece{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }

/* ---------- 49 · Movimiento ---------- */
@keyframes zm-asoma{ from{ opacity:0; transform:translate3d(0,6px,0); } to{ opacity:1; transform:none; } }
@keyframes zm-llega{ from{ opacity:0; transform:translate3d(0,-4px,0) scale(.98); } to{ opacity:1; transform:none; } }
.zm-escalona > *{ animation:zm-asoma .22s var(--sal) both; }
.zm-escalona > *:nth-child(2){ animation-delay:24ms; } .zm-escalona > *:nth-child(3){ animation-delay:48ms; }
.zm-escalona > *:nth-child(4){ animation-delay:72ms; } .zm-escalona > *:nth-child(5){ animation-delay:96ms; }
.zm-escalona > *:nth-child(6){ animation-delay:120ms; } .zm-escalona > *:nth-child(7){ animation-delay:144ms; }
.zm-escalona > *:nth-child(n+8){ animation-delay:168ms; }
@media (prefers-reduced-motion: reduce){
  .zm-escalona > *, .zm-mas__menu{ animation:zm-funde .18s ease both !important; animation-delay:0ms !important; }
  .zm-columnas__barra{ animation:none; }
  .zm-avance > i, .zm-solapa::after, .zm-fila__chevron, .zm-fila, .zm-cifra, .zm-seg__op, .zm-chip{ transition:none; }
}
@keyframes zm-funde{ from{ opacity:0; } to{ opacity:1; } }

/* ---------- 49b · Lo que flota no tapa una ventana ----------
   El orbe de ayuda (.help-orb, z 55) queda sobre .modal-bg (50) y en editores
   largos se posaba junto a «Guardar». Mientras hay una ventana abierta se retira
   (Modal ya marca body.modal-abierto); vuelve al cerrarla. */
.help-orb{ transition:opacity .18s ease, transform .22s var(--sal); }
body.modal-abierto .help-orb{ opacity:0; transform:scale(.9); pointer-events:none; }
@media (prefers-reduced-motion: reduce){ body.modal-abierto .help-orb{ transform:none; } }

/* ---------- 49c · Hallazgos de zairi (cartel compartido por los cerebros de módulo) ---------- */
.zm-hallazgo{ position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:12px 14px 12px 30px; border-radius:var(--r-chica); background:var(--solido-2); color:var(--texto); }
.zm-hallazgo + .zm-hallazgo{ margin-top:6px; }
.zm-hallazgo::before{ content:''; position:absolute; left:13px; top:18px; width:7px; height:7px; border-radius:50%; background:var(--texto-3); }
.zm-hallazgo[data-g="alta"]::before{ background:var(--danger); }
.zm-hallazgo[data-g="media"]::before{ background:#B8860B; }
.zm-hallazgo[data-g="baja"]::before{ background:var(--acento); }
.zm-hallazgo--compacto{ padding:9px 12px 9px 28px; }
.zm-hallazgo--compacto::before{ top:15px; left:12px; }
.zm-hallazgo__texto{ flex:1 1 300px; min-width:0; }
.zm-hallazgo__titulo{ font-size:13.5px; font-weight:500; line-height:1.4; }
.zm-hallazgo__detalle{ margin-top:2px; font-size:12.5px; line-height:1.45; color:var(--texto-2); }
.zm-hallazgo__monto{ font-size:13px; font-weight:500; color:var(--texto); font-variant-numeric:tabular-nums; white-space:nowrap; }
.zm-hallazgo__acciones{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.zm-hallazgo__opciones{ flex-basis:100%; display:flex; flex-wrap:wrap; gap:6px; padding-top:4px; animation:zm-asoma .18s var(--sal) both; }
@media (prefers-reduced-motion: reduce){ .zm-hallazgo__opciones{ animation:zm-funde .18s ease both; } }
@media(max-width:640px){ .zm-hallazgo{ text-align:left; } .zm-hallazgo__acciones{ width:100%; } }

/* Paginador sereno también de noche: html[data-theme=dark] .btn.ghost (0,3,1) le
   devolvía el borde; con html body delante estas pesan (0,3,2) y van después. */
html body .zm-lista .lista-paginacion .btn, html body .zm-paginado .lista-paginacion .btn{ min-width:34px; min-height:34px; padding:0 10px; border-color:transparent; background:transparent; color:var(--texto-2); box-shadow:none; }
html body .zm-lista .lista-paginacion .btn[aria-current="page"], html body .zm-paginado .lista-paginacion .btn[aria-current="page"]{ background:var(--acento-suave); color:var(--acento); }

/* La tarjeta del cerebro de un módulo: en el teléfono una capa vieja de .sim-hero
   apila y centra (orbe arriba, texto al medio). Aquí queda como el resto de la
   página: orbe chico a la izquierda, texto alineado, botones debajo. */
@media(max-width:640px){
  html .sim-hero.zm-cerebro{ flex-direction:row; align-items:flex-start; text-align:left; gap:12px; padding:14px 14px; }
  html .sim-hero.zm-cerebro .zm-cerebro__orbe{ width:32px; height:32px; overflow:hidden; display:grid; place-items:center; margin:0; }
  html .sim-hero.zm-cerebro .zm-cerebro__orbe > *{ transform:scale(.76); transform-origin:center; margin:0; }
  html .sim-hero.zm-cerebro .zm-cerebro__cabeza{ justify-content:flex-start; }
  html .sim-hero.zm-cerebro .zm-cerebro__titulo{ flex:1 1 100%; font-size:14px; line-height:1.4; text-align:left; }
}

/* ---------- 50 · Tramos por módulo (cada uno escribe sólo dentro del suyo) ---------- */
/* ── zm · planes ── */
/* Planes de tratamiento: lista paginada que se abre, cifras serenas, detalle con
   «‹ Planes». Sólo tokens; el color vive en los puntos de estado. */
.zm-planes{ min-width:0; }
.zm-planes .zm-barra-filtros{ margin-bottom:16px; }
/* El buscador es un <label> con un <input>: sin los márgenes globales de ambos, la
   lupa queda centrada y la píldora mide lo mismo que el selector de al lado. */
.zm-planes .zm-buscar, .zm-planes-modal .zm-buscar{ margin:0; }
.zm-planes .zm-buscar input, .zm-planes-modal .zm-buscar input{ margin:0; padding:8px 14px 8px 36px; border-radius:999px; }
/* De noche la regla global de campos (html[data-theme="dark"] input) pesa más que
   .zm-buscar y devolvía el relleno de 12 px: la lupa quedaba encima del texto. */
html[data-theme="dark"] .zm-planes .zm-buscar input, html[data-theme="dark"] .zm-planes-modal .zm-buscar input{ padding-left:36px; }
.zm-planes__prof{ position:relative; display:inline-flex; align-items:center; gap:8px; margin:0; min-height:40px; padding:0 6px 0 14px;
  border:1px solid var(--linea); border-radius:999px; background:var(--solido); color:var(--texto-2); font-size:13px; font-weight:400; }
.zm-planes__prof-eti{ color:var(--texto-3); white-space:nowrap; }
.zm-planes .zm-planes__prof select{ all:unset; box-sizing:border-box; max-width:210px; height:38px; line-height:38px; padding:0 26px 0 2px; font-size:14px; color:var(--texto); cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-planes__prof::after{ content:''; position:absolute; right:14px; top:50%; width:6px; height:6px; margin-top:-5px; border-right:1.5px solid var(--texto-3); border-bottom:1.5px solid var(--texto-3); transform:rotate(45deg); pointer-events:none; }
.zm-planes .zm-planes__prof select:focus, html[data-theme="dark"] .zm-planes .zm-planes__prof select:focus{ border:0; box-shadow:none; background:transparent; }
.zm-planes .zm-planes__prof select option{ color:initial; }
.zm-planes__prof:focus-within{ outline:2px solid var(--acento); outline-offset:1px; }
.zm-planes__cifras{ margin-bottom:22px; }
.zm-planes__etapas{ margin:0 0 12px; max-width:100%; }
.zm-planes--cargando{ opacity:.7; transition:opacity .18s ease; }
.zm-planes__cargando{ margin:0; padding:28px 16px; text-align:center; font-size:13.5px; color:var(--texto-2); }
.zm-planes__nota{ margin:10px 4px 0; font-size:12.5px; color:var(--texto-3); }
.zm-planes-error{ margin:10px 0; font-size:13.5px; color:var(--danger); }

/* Filas: la columna de la derecha se lee como tabla (estado · visitas · total). */
.zm-planes__lista .zm-fila__meta .zm-estado{ min-width:120px; }
.zm-planes__avance{ display:inline-flex; align-items:center; gap:8px; width:92px; font-size:12.5px; color:var(--texto-2); }
.zm-planes__avance .zm-avance{ flex:1 1 auto; width:auto; }
.zm-planes__avance--texto{ color:var(--texto-3); }
.zm-planes__lista .zm-fila__monto{ min-width:92px; text-align:right; }
.zm-planes__lista .coleccion-paginada > .zm-fila{ animation:zm-asoma .22s var(--sal) both; }
.zm-planes__lista .coleccion-paginada > .zm-fila:nth-child(2){ animation-delay:24ms; }
.zm-planes__lista .coleccion-paginada > .zm-fila:nth-child(3){ animation-delay:48ms; }
.zm-planes__lista .coleccion-paginada > .zm-fila:nth-child(4){ animation-delay:72ms; }
.zm-planes__lista .coleccion-paginada > .zm-fila:nth-child(5){ animation-delay:96ms; }
.zm-planes__lista .coleccion-paginada > .zm-fila:nth-child(6){ animation-delay:120ms; }
.zm-planes__lista .coleccion-paginada > .zm-fila:nth-child(7){ animation-delay:144ms; }
.zm-planes__lista .coleccion-paginada > .zm-fila:nth-child(n+8){ animation-delay:168ms; }
/* Escribir en el buscador no anima filas: el teclado es una acción frecuente. */
.zm-planes__lista--quieta .coleccion-paginada > .zm-fila{ animation:none; }
@media(max-width:640px){
  .zm-planes__cifras .zm-cifra--clave{ grid-column:1 / -1; }
  .zm-planes__lista .zm-fila__meta .zm-estado{ min-width:0; }
  .zm-planes__lista .zm-fila__monto{ min-width:0; margin-left:auto; }
  .zm-planes__lista .zm-fila__meta{ width:100%; }
  .zm-planes .zm-barra-filtros .zm-buscar{ flex:1 1 100%; max-width:none; }
  .zm-planes__prof{ flex:1 1 100%; }
  .zm-planes .zm-planes__prof select{ max-width:none; flex:1 1 auto; }
}

/* Detalle: volver, cabecera del paciente y el plan en su tarjeta. */
.zm-planes-detalle{ animation:zm-asoma .22s var(--sal) both; }
.zm-volver{ all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:6px; margin:0 0 14px -6px; padding:6px 10px 6px 6px; border-radius:10px;
  font-size:14px; color:var(--texto-2); cursor:pointer; transition:color .18s ease, background-color .18s ease, transform .14s var(--sal); }
.zm-volver > span{ display:inline-block; font-size:18px; line-height:1; transition:transform .18s var(--sal); }
.zm-volver:active{ transform:scale(.97); }
.zm-volver:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
@media (hover:hover) and (pointer:fine){ .zm-volver:hover{ color:var(--texto); background:var(--solido-2); } .zm-volver:hover > span{ transform:translateX(-2px); } }
.zm-planes-detalle .zm-cabeza p .zm-estado{ vertical-align:-1px; }
.zm-plan-cuerpo{ margin:0 0 16px; }
.zm-plan-cuerpo > .coleccion-paginada{ display:flex; flex-direction:column; gap:14px; }
.zm-plan-caja{ min-width:0; }
.zm-plan-cabeza{ display:flex; justify-content:space-between; align-items:center; gap:8px 12px; flex-wrap:wrap; }
.zm-plan-cabeza__titulo{ font-weight:600; min-width:0; }
.zm-tarjeta.zm-plan-caja .zm-plan-cabeza{ padding-bottom:12px; margin-bottom:10px; border-bottom:1px solid var(--linea); }
.zm-tarjeta.zm-plan-caja .zm-plan-cabeza__titulo{ font-size:17px; font-weight:500; letter-spacing:-.015em; }
.zm-plan-acciones{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.zm-plan-acciones .zm-mas > summary.btn{ min-height:32px; padding:5px 12px; font-size:13px; }
.zm-plan-estado{ display:inline-flex; margin-left:8px; vertical-align:middle; font-weight:400; }
.zm-plan-etiqueta{ display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; background:var(--solido-2); color:var(--texto-2);
  font-size:11.5px; font-weight:500; line-height:1.5; white-space:nowrap; vertical-align:middle; }
.zm-plan-etiqueta[data-propio]{ box-shadow:inset 0 0 0 1px var(--linea); color:var(--texto); }
.zm-plan-etiqueta[role="button"]:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
.zm-plan-fuerte{ color:var(--texto); font-weight:600; }
.zm-plan-saldo{ color:var(--texto); font-weight:600; }
.zm-plan-pago{ all:unset; box-sizing:border-box; display:inline-flex; align-items:center; min-height:28px; padding:2px 10px; border-radius:999px;
  background:var(--solido-2); cursor:pointer; transition:background-color .18s ease, transform .14s var(--sal); }
.zm-plan-pago .zm-estado{ font-size:12px; }
.zm-plan-pago:active{ transform:scale(.97); }
.zm-plan-pago:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
@media (hover:hover) and (pointer:fine){ .zm-plan-pago:hover{ background:var(--linea); } }
/* Cada línea del plan: sus acciones bajan de renglón en vez de salirse de la tarjeta. */
.zm-plan-linea > div:nth-child(2){ flex-wrap:wrap; justify-content:flex-end; }
.zm-plan-linea .btn{ white-space:nowrap; }
@media(max-width:640px){
  .zm-plan-linea > div:nth-child(2){ justify-content:flex-start; width:100%; }
  .zm-tarjeta.zm-plan-caja{ padding:16px 14px; }
}
.zm-plan-visita{ display:inline-flex; align-items:center; padding:2px 10px; border-radius:999px; background:var(--solido-2); }
.zm-plan-visita .zm-estado{ font-size:11.5px; }
.zm-plan-cobro .zm-estado{ font-size:12px; }
.zm-plan-historia{ padding:16px 18px 4px; border-radius:var(--r-chica); background:var(--solido-2); }
.zm-plan-historia .zm-plan-visita, .zm-plan-historia .zm-plan-etiqueta{ background:var(--solido); }

/* Ventanas del módulo (elegir paciente, recordatorio): sólidas, como todo lo que se abre. */
.zm-planes-modal__ayuda{ margin:-6px 0 14px; font-size:13.5px; line-height:1.5; color:var(--texto-2); }
.zm-planes-modal__estado{ margin:12px 2px 4px; font-size:13.5px; color:var(--texto-2); }
.zm-planes-modal__resultados{ margin-top:10px; max-height:min(52vh,420px); overflow-y:auto; }
.zm-planes-modal__resultados .zm-lista{ padding:0; border:0; background:transparent; }
.zm-planes-modal .zm-campo input, .zm-planes-modal .zm-campo select{ margin:0; }
.zm-planes-modal .zm-campo > span, .zm-planes-modal .zm-campo > label{ margin:0; }
.zm-planes-modal .zm-buscar input{ min-height:44px; }
.zm-planes-paso{ display:inline-flex; align-items:center; gap:8px; }
.zm-planes-paso input{ width:84px; margin:0; text-align:center; font-variant-numeric:tabular-nums; }
.zm-planes-paso .btn{ min-width:40px; min-height:40px; padding:0; font-size:18px; }

@media (prefers-reduced-motion: reduce){
  .zm-planes__lista .coleccion-paginada > .zm-fila, .zm-planes-detalle{ animation:zm-funde .18s ease both !important; animation-delay:0ms !important; }
  .zm-volver, .zm-volver > span, .zm-plan-pago, .zm-planes--cargando{ transition:none; }
}
/* ── fin zm · planes ── */

/* ── zm · tratamientos ── */
/* Pantalla: la lista manda. Un dato discreto bajo la cabecera, un solo bloque de
   zairi, filtros y el catálogo. Sin colores decorativos: el acento sólo en el
   botón principal y en el paginador; los estados llevan un punto. */
.zm-trat-dato{ margin:-12px 0 18px; font-size:12.5px; color:var(--texto-3); font-variant-numeric:tabular-nums; }
.zm-trat-aviso{ margin:0 0 14px; padding:10px 14px; border-radius:var(--r-chica); background:var(--solido-2); font-size:13.5px; color:var(--texto); animation:zm-asoma .22s var(--sal) both; }
.zm-trat-nota{ display:flex; align-items:baseline; gap:8px; margin:8px 0 0; font-size:13px; line-height:1.5; color:var(--texto-2); max-width:72ch; }
.zm-trat-nota[data-tono]::before{ content:''; flex:0 0 7px; width:7px; height:7px; border-radius:50%; transform:translateY(-1px); background:var(--texto-3); }
.zm-trat-nota[data-tono="acento"]::before{ background:var(--acento); }
.zm-trat-nota[data-tono="ok"]::before{ background:var(--ok); }
.zm-trat-nota[data-tono="aviso"]::before{ background:var(--gold); }
.zm-trat-nota[data-tono="mal"]::before{ background:var(--danger); }
.zm-trat > .zm-trat-nota{ margin:-4px 0 12px; }
.zm-trat-link{ all:unset; box-sizing:border-box; cursor:pointer; font-size:13px; color:var(--texto-2); padding:4px 2px; border-radius:6px; transition:color .18s ease; white-space:nowrap; }
.zm-trat-link:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
@media (hover:hover) and (pointer:fine){ .zm-trat-link:hover{ color:var(--texto); } }

/* Bloque de zairi (sim-hero): una línea; la lista y los packs se abren debajo. */
.sim-hero.zm-trat-zairi{ display:block; padding:14px 16px; margin:0 0 20px; text-align:left; }
.zm-trat-zairi__cabeza{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.zm-trat-zairi__orbe{ flex:0 0 36px; width:36px; height:36px; }
.zm-trat-zairi__texto{ flex:1 1 280px; min-width:0; display:flex; flex-direction:column; gap:2px; }
.zm-trat-zairi__texto strong{ font-size:14.5px; font-weight:500; letter-spacing:-.01em; color:var(--texto); }
.zm-trat-zairi__texto span{ font-size:13px; line-height:1.45; color:var(--texto-2); }
.zm-trat-zairi__acciones{ display:flex; gap:6px; flex-wrap:wrap; margin-left:auto; }
.zm-trat-zairi__lista{ margin:12px 0 0; padding-top:4px; border-top:1px solid var(--linea); }
.zm-trat-hallazgo{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px 16px; padding:12px 2px; }
.zm-trat-hallazgo + .zm-trat-hallazgo{ border-top:1px solid var(--linea); }
.zm-trat-hallazgo__texto{ min-width:0; display:flex; flex-direction:column; gap:4px; }
.zm-trat-hallazgo__texto p{ margin:0; font-size:13.5px; line-height:1.5; color:var(--texto); }
.zm-trat-hallazgo__acciones{ display:flex; align-items:center; gap:10px; justify-content:flex-end; }
.zm-trat-zairi__pie{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px 2px 0; font-size:12px; color:var(--texto-3); border-top:1px solid var(--linea); }
/* Los packs viven DENTRO del bloque: la tarjeta interior se aplana (sin vidrio ni borde). */
html .zm-trat-zairi .card.zairi-reveal-card, html[data-theme="dark"] .zm-trat-zairi .card.zairi-reveal-card{
  margin:12px 0 0; padding:12px 0 0; border:0; border-top:1px solid var(--linea); border-radius:0; background:transparent; background-image:none;
  -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; animation:zm-asoma .22s var(--sal) both; }
.zm-trat-packs__cabeza{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 10px; }
.zm-trat-packs__cabeza strong{ font-size:14px; font-weight:500; color:var(--texto); }
.zm-trat-packs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; }
.zm-trat-pack{ padding:12px 14px; border:1px solid var(--linea); border-radius:var(--r-chica); background:var(--solido); display:flex; flex-direction:column; gap:4px; }
.zm-trat-pack__cabeza{ display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.zm-trat-pack__cabeza strong{ font-size:14px; font-weight:500; color:var(--texto); }
.zm-trat-pack__cabeza span{ font-size:13px; color:var(--texto-2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.zm-trat-pack p{ margin:0; font-size:13px; color:var(--texto-2); line-height:1.45; }
.zm-trat-pack small{ font-size:12px; color:var(--texto-3); }

/* Filtros: el buscador y el segmentado comparten una línea mientras caben. */
.zm-trat .zm-barra-filtros .zm-seg{ flex:0 1 auto; }
/* En la noche la regla de campos de v568 (html[data-theme="dark"] input) le quitaba al buscador el espacio de la lupa. */
html .zm-trat .zm-buscar input, html[data-theme="dark"] .zm-trat .zm-buscar input{ padding:8px 14px 8px 36px; border-radius:999px; margin:0; }
.zm-trat .zm-buscar{ display:block; margin:0; }
@media(min-width:641px){ .zm-trat-menu .zm-mas__menu button.zm-trat-solo-movil{ display:none; } }

/* La lista: casilla · nombre y datos · precio · acciones · chevron. La fila entera
   abre el editor (el botón del nombre se estira por debajo con ::after); casilla y
   acciones quedan encima y siguen siendo tocables. */
.zm-trat-lista{ padding:4px 6px 6px; }
.zm-trat-lista__cabeza{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; min-height:44px; padding:6px 12px; }
.zm-trat-todos{ display:inline-flex; align-items:center; gap:12px; margin:0; font-size:12.5px; color:var(--texto-3); cursor:pointer; font-variant-numeric:tabular-nums; }
.zm-trat-todos input{ margin:0; }
.zm-trat-masivas{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; animation:zm-llega .18s var(--sal) both; }
.zm-trat-lista__nota{ padding:8px 14px 16px; }
.zm-trat-fila{ position:relative; display:grid; grid-template-columns:18px minmax(0,1fr) minmax(112px,auto) auto 12px; align-items:center; gap:4px 16px;
  min-height:62px; padding:10px 12px; border-radius:var(--r-chica); transition:background-color .18s ease; }
.zm-trat-fila + .zm-trat-fila::before{ content:''; position:absolute; left:46px; right:12px; top:0; height:1px; background:var(--linea); opacity:.7; transition:opacity .18s ease; }
.zm-trat-fila[data-marcada]{ background:var(--solido-2); }
.zm-trat-check{ position:relative; z-index:2; margin:0; }
.zm-trat-fila__principal{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.zm-trat-abre{ all:unset; box-sizing:border-box; cursor:pointer; font-size:15px; font-weight:500; letter-spacing:-.01em; line-height:1.3; color:var(--texto);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-trat-abre::after{ content:''; position:absolute; inset:0; z-index:1; border-radius:inherit; }
.zm-trat-abre:focus-visible{ outline:none; }
.zm-trat-abre:focus-visible::after{ outline:2px solid var(--acento); outline-offset:-2px; }
.zm-trat-fila__sub{ font-size:13px; color:var(--texto-2); line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-trat-fila:active{ background:var(--solido-2); }
.zm-trat-precio{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.zm-trat-precio__valor{ font-size:15px; font-weight:500; letter-spacing:-.01em; color:var(--texto); }
.zm-trat-precio__valor small{ font-size:12px; font-weight:400; color:var(--texto-3); }
.zm-trat-precio__oferta{ display:inline-flex; align-items:baseline; gap:6px; font-size:12.5px; }
.zm-trat-precio__oferta s{ color:var(--texto-3); }
.zm-trat-descuento{ padding:1px 7px; border-radius:999px; background:var(--solido-2); color:var(--texto-2); font-size:11.5px; font-weight:500; }
.zm-trat-fila[data-marcada] .zm-trat-descuento{ background:var(--solido); }
.zm-trat-precio__pie{ font-size:12px; color:var(--texto-3); }
.zm-trat-acciones{ position:relative; z-index:2; display:flex; align-items:center; gap:2px; }
.zm-trat-accion{ all:unset; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:0 10px; border-radius:999px;
  font-size:13px; color:var(--texto-2); cursor:pointer; transition:background-color .18s ease, color .18s ease, transform .14s var(--sal); list-style:none; }
.zm-trat-accion::-webkit-details-marker{ display:none; }
.zm-trat-accion:active{ transform:scale(.97); }
.zm-trat-accion:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
.zm-trat-accion--icono{ width:32px; padding:0; }
.zm-trat-accion--icono > span, .zm-trat-accion--icono > span::before, .zm-trat-accion--icono > span::after{ display:block; width:3.5px; height:3.5px; border-radius:50%; background:currentColor; }
.zm-trat-accion--icono > span{ position:relative; }
.zm-trat-accion--icono > span::before, .zm-trat-accion--icono > span::after{ content:''; position:absolute; top:0; }
.zm-trat-accion--icono > span::before{ left:-6px; } .zm-trat-accion--icono > span::after{ left:6px; }
.zm-trat-menu[open] > .zm-trat-accion{ background:var(--solido-2); color:var(--texto); }
/* El menú abierto va por encima de las acciones de las filas siguientes. */
.zm-trat-acciones:has(> .zm-trat-menu[open]){ z-index:6; }
.zm-trat-menu .zm-mas__menu{ min-width:210px; }
.zm-trat-menu .zm-mas__menu button:last-child{ margin-top:4px; padding-top:12px; border-top:1px solid var(--linea); border-radius:0 0 10px 10px; }
.zm-trat-fila > .zm-fila__chevron{ position:relative; z-index:0; }
@media (hover:hover) and (pointer:fine){
  .zm-trat-fila:hover{ background:var(--solido-2); }
  .zm-trat-fila:hover + .zm-trat-fila::before, .zm-trat-fila:hover::before, .zm-trat-fila[data-marcada] + .zm-trat-fila::before, .zm-trat-fila[data-marcada]::before{ opacity:0; }
  .zm-trat-fila:hover .zm-fila__chevron{ transform:translateX(3px) rotate(45deg); border-color:var(--texto); }
  .zm-trat-fila:hover .zm-trat-descuento{ background:var(--solido); }
  .zm-trat-accion:hover{ background:var(--solido); color:var(--texto); }
}
.zm-trat-lista .coleccion-paginada > .lista-paginacion{ margin-top:4px; }
/* Si en la vista hay ofertas, la columna de acciones tiene ancho fijo: así los precios quedan alineados. */
@media(min-width:641px){ .zm-trat-lista--ofertas .zm-trat-acciones{ min-width:178px; justify-content:flex-end; } }

/* Importar de Shopify */
.zm-trat-shopify{ margin:0 0 18px; }
.zm-trat-shopify__acciones{ display:flex; align-items:center; gap:10px; }
.zm-trat-shopify__fila{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:14px; padding:10px 0; border-top:1px solid var(--linea); }
.zm-trat-shopify__fila strong{ font-size:14px; font-weight:500; color:var(--texto); }

/* Insumos y costo (solo lectura), en la ventana chica y en el editor. */
.zm-trat-bajada{ margin:-8px 0 14px; font-size:13.5px; line-height:1.5; color:var(--texto-2); }
.zm-trat-costeo{ display:flex; flex-direction:column; gap:14px; }
.zm-trat-costeo__vacio{ display:flex; flex-direction:column; gap:6px; padding:14px 16px; border:1px dashed var(--linea); border-radius:var(--r-chica); }
.zm-trat-costeo__vacio p{ margin:0; font-size:13.5px; line-height:1.5; color:var(--texto-2); }
.zm-trat-costeo__grupo{ display:flex; flex-direction:column; gap:6px; }
.zm-trat-costeo__pct{ color:var(--texto-3); font-weight:400; }
.zm-trat-insumos{ list-style:none; margin:0; padding:0; }
.zm-trat-insumos li{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(72px,auto); gap:14px; align-items:baseline; padding:9px 0; border-top:1px solid var(--linea); font-size:14px; }
.zm-trat-insumos li:first-child{ border-top:0; }
.zm-trat-insumos__nombre{ min-width:0; color:var(--texto); display:flex; flex-direction:column; gap:2px; }
.zm-trat-insumos__nombre small{ font-size:12px; color:var(--texto-3); }
.zm-trat-insumos__cant{ color:var(--texto-2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.zm-trat-insumos__costo{ text-align:right; color:var(--texto); font-variant-numeric:tabular-nums; }
/* Sin montos: solo el insumo y su cantidad (la API no le entrega costos a ese perfil). */
.zm-trat-insumos--cantidades li{ grid-template-columns:minmax(0,1fr) auto; }
.zm-trat-insumos--cantidades .zm-trat-insumos__cant{ grid-column:auto; grid-row:auto; }
.zm-trat-costeo .zm-pares{ padding-top:4px; border-top:1px solid var(--linea); }
.modal.zm-trat-ventana{ max-width:560px; }

/* Editor: ventana tipo hoja. Título fijo, cuerpo que se desplaza (con el índice
   pegajoso) y pie con Guardar siempre a la vista. Sólido (§36). */
.modal.zm-trat-modal{ display:flex; flex-direction:column; max-height:calc(100vh - 80px); max-height:calc(100dvh - 80px); padding:26px 0 0; overflow:hidden; }
.modal.zm-trat-modal > h2{ margin:0 0 12px; padding:0 64px 0 32px; }
.zm-trat-cuerpo{ flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; padding:6px 32px 28px; scroll-padding-top:8px; }
.modal.zm-trat-modal > .zm-pie-acciones{ position:static; flex:0 0 auto; margin:0; padding:14px 32px 16px; }
.zm-trat-modal .zm-pie-acciones .zm-pie-nota{ color:var(--danger); flex:1 1 260px; }
.zm-trat-modal .zm-editor{ grid-template-columns:212px minmax(0,1fr); }
.zm-trat-modal .zm-indice{ top:0; }
.zm-trat-indice__txt{ flex:1 1 auto; }
.zm-trat-indice__aviso{ flex:0 0 7px; width:7px; height:7px; border-radius:50%; background:var(--gold); }
.zm-trat-secciones{ min-width:0; }
.zm-trat-secciones .zm-seccion:last-child{ padding-bottom:6px; }
.zm-trat-modal input, .zm-trat-modal select, .zm-trat-modal textarea{ margin:0; }
.zm-trat-modal .zm-campo > label{ margin:0; }
.zm-trat-campos-nombre{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:12px 16px; }
.zm-trat-espacio-arriba{ margin-top:14px; }
.zm-trat-minutos{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.zm-trat-minutos input{ max-width:120px; }
.zm-trat-minutos span{ font-size:13px; color:var(--texto-2); }
.zm-trat-bloque + .zm-trat-bloque{ margin-top:20px; }
.zm-trat-grupo{ display:block; margin:0 0 8px; font-size:13.5px; font-weight:500; color:var(--texto); }
.zm-trat-subgrupo + .zm-trat-subgrupo{ margin-top:12px; }
.zm-trat-subgrupo > small{ display:block; margin:0 0 6px; font-size:12px; color:var(--texto-3); }
.zm-trat-ayuda{ margin:8px 0 0; font-size:12.5px; line-height:1.5; color:var(--texto-3); max-width:72ch; }
.zm-trat-casilla{ display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px; align-items:start; margin:0; padding:8px 0; cursor:pointer; color:var(--texto); font-size:14px; font-weight:400; }
.zm-trat-casilla input{ margin:3px 0 0; }
.zm-trat-casilla > span{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.zm-trat-casilla b{ font-weight:500; color:var(--texto); }
.zm-trat-casilla small{ font-size:12.5px; line-height:1.5; color:var(--texto-2); }
.zm-trat-variantes{ display:flex; flex-direction:column; gap:10px; margin:0 0 12px; }
.zm-trat-variante{ padding:12px 14px; border:1px solid var(--linea); border-radius:var(--r-chica); background:var(--solido); animation:zm-asoma .22s var(--sal) both; }
.zm-trat-variante__fila{ display:grid; grid-template-columns:minmax(0,1fr) minmax(110px,160px) auto; grid-auto-flow:column; gap:10px; align-items:end; }
.zm-trat-variante__fila:has(> :nth-child(4)){ grid-template-columns:minmax(0,1fr) minmax(110px,150px) minmax(90px,130px) auto; }
.zm-trat-variante__propios{ margin-top:12px; padding-top:12px; border-top:1px dashed var(--linea); }
.zm-trat-variante > .zm-trat-link{ margin-top:8px; display:inline-block; }
.zm-trat-quitar{ all:unset; box-sizing:border-box; display:grid; place-items:center; width:40px; height:40px; border-radius:var(--r-campo); color:var(--texto-3); cursor:pointer; transition:background-color .18s ease, color .18s ease, transform .14s var(--sal); }
.zm-trat-quitar:active{ transform:scale(.94); }
.zm-trat-quitar:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
@media (hover:hover) and (pointer:fine){ .zm-trat-quitar:hover{ background:var(--solido-2); color:var(--texto); } }
.zm-trat-tienda .hint{ margin:8px 0 0; font-size:12.5px; line-height:1.5; color:var(--texto-3); }
.zm-trat-tienda .muted{ color:var(--texto-2); }
.zm-trat-tienda .check-row{ align-items:flex-start; margin:10px 0 0; padding:0; background:none; transform:none; }
.zm-trat-tienda .check-row span{ font-weight:400; font-size:13.5px; line-height:1.5; color:var(--texto); }
.zm-trat-tienda .zm-campos label{ display:block; margin:0 0 6px; }
.zm-trat-plegable__boton{ all:unset; box-sizing:border-box; display:flex; align-items:center; gap:10px; width:100%; padding:6px 0; cursor:pointer; }
.zm-trat-plegable__boton .zm-trat-grupo{ margin:0; flex:0 1 auto; }
.zm-trat-plegable__boton:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; border-radius:8px; }
.zm-trat-plegable__op{ font-size:12.5px; color:var(--texto-3); }
.zm-trat-plegable__chevron{ margin-left:auto; width:8px; height:8px; border-right:1.6px solid var(--texto-3); border-bottom:1.6px solid var(--texto-3); transform:rotate(45deg) translate(-2px,-2px); transition:transform .22s var(--sal); }
.zm-trat-plegable__boton[aria-expanded="true"] .zm-trat-plegable__chevron{ transform:rotate(225deg) translate(-2px,-2px); }
.zm-trat-plegable__cuerpo{ padding:6px 0 0; animation:zm-asoma .22s var(--sal) both; }

@media(max-width:820px){
  .zm-trat-modal .zm-editor{ grid-template-columns:minmax(0,1fr); }
  .modal.zm-trat-modal{ max-height:calc(100vh - 92px); max-height:calc(100dvh - 92px); padding-top:20px; }
  .modal.zm-trat-modal > h2{ padding:0 56px 0 18px; }
  .zm-trat-cuerpo{ padding:0 18px 24px; }
  /* El orbe flotante de zairi vive abajo a la derecha: el pie deja ese rincón libre. */
  .modal.zm-trat-modal > .zm-pie-acciones{ padding:12px 76px 14px 18px; justify-content:flex-start; }
  .modal.zm-trat-modal > .zm-pie-acciones .btn{ flex:1 1 0; }
  .modal.zm-trat-modal > .zm-pie-acciones .zm-pie-nota{ flex-basis:100%; }
  .zm-trat-modal .zm-indice{ margin:0 -18px; padding:4px 18px 10px; border-bottom:1px solid var(--linea); }
  .zm-trat-modal .zm-indice button{ border:1px solid var(--linea); border-radius:999px; }
  .zm-trat-modal .zm-indice button[aria-current="true"]{ border-color:var(--texto); }
  .zm-trat-modal .zm-indice__n{ display:none; }
  .zm-trat-modal .zm-seccion{ scroll-margin-top:62px; }
  .zm-trat-campos-nombre{ grid-template-columns:minmax(0,1fr); }
}
@media(max-width:640px){
  .sim-hero.zm-trat-zairi{ padding:14px; }
  .zm-trat-zairi__acciones{ margin-left:0; width:100%; }
  .zm-trat-hallazgo{ grid-template-columns:minmax(0,1fr); }
  .zm-trat-hallazgo__acciones{ justify-content:flex-start; }
  .zm-trat .zm-barra-filtros .zm-buscar{ max-width:none; flex-basis:100%; }
  .zm-trat-dato{ margin-top:-10px; }
  .zm-trat-fila{ grid-template-columns:18px minmax(0,1fr) auto 12px; grid-template-areas:"check principal principal chevron" ". precio acciones acciones"; gap:6px 12px; }
  .zm-trat-acciones > .zm-trat-accion{ display:none; }
  .zm-trat-check{ grid-area:check; align-self:start; margin-top:3px; }
  .zm-trat-fila__principal{ grid-area:principal; }
  .zm-trat-fila > .zm-fila__chevron{ grid-area:chevron; }
  .zm-trat-precio{ grid-area:precio; flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
  .zm-trat-acciones{ grid-area:acciones; justify-self:end; align-self:center; margin-right:-6px; }
  .zm-trat-fila + .zm-trat-fila::before{ left:12px; }
  .zm-trat-fila__sub{ white-space:normal; }
  .zm-trat-abre{ white-space:normal; }
  .zm-trat-shopify__fila{ grid-template-columns:minmax(0,1fr) auto; }
  .zm-trat-shopify__fila > .zm-trat-precio__valor{ grid-column:1; }
  .zm-trat-variante__fila, .zm-trat-variante__fila:has(> :nth-child(4)){ grid-template-columns:minmax(0,1fr) auto; grid-auto-flow:row; }
  .zm-trat-variante__nombre{ grid-column:1 / -1; }
  .zm-trat-insumos li{ grid-template-columns:minmax(0,1fr) auto; }
  .zm-trat-insumos__costo{ grid-column:2; }
  .zm-trat-insumos__cant{ grid-column:1; grid-row:2; font-size:12.5px; }
}
@media (prefers-reduced-motion: reduce){
  .zm-trat-aviso, .zm-trat-masivas, .zm-trat-variante, .zm-trat-plegable__cuerpo, html .zm-trat-zairi .card.zairi-reveal-card{ animation:zm-funde .18s ease both; }
  .zm-trat-fila, .zm-trat-accion, .zm-trat-quitar, .zm-trat-plegable__chevron, .zm-trat-fila .zm-fila__chevron{ transition:none; }
}
/* ── fin zm · tratamientos ── */

/* ── zm · insumos ── */
/* Módulo Insumos (v618): resumen, lista con ficha, recetas con costeo y simulador,
   costos (gasto fijo, equipos, salas), compras, proveedores y por pagar. Sólo tokens;
   el color vive en los puntos de estado y, con moderación, en una deuda o un margen
   negativo. Las ventanas (portal al body) se visten con .zm-ins-modal. */
.zm-ins{ min-width:0; }
.zm-ins__cuerpo{ min-width:0; animation:zm-asoma .22s var(--sal) both; }
:is(.zm-ins, .zm-ins-modal, .zm-ins-panel) label.zm-campo{ margin:0; font-size:inherit; font-weight:400; letter-spacing:normal; color:inherit; }
:is(.zm-ins, .zm-ins-modal, .zm-ins-panel) .zm-campo :is(input, select, textarea){ margin:0; }
:is(.zm-ins, .zm-ins-modal) .zm-seccion > h3{ margin-bottom:10px; }
.zm-ins-ancho{ grid-column:1 / -1; }
.zm-ins-sep{ margin-top:12px; }
.zm-ins-filtro{ margin:0 0 14px; max-width:100%; }
.zm-ins-cargando{ margin:0; padding:26px 16px; text-align:center; font-size:13.5px; color:var(--texto-3); }
.zm-ins-error{ margin:10px 0; font-size:13.5px; line-height:1.45; color:var(--danger); }
.zm-ins-ok{ margin:10px 0; font-size:13.5px; line-height:1.45; color:var(--texto-2); }
.zm-ins-ok::before{ content:''; display:inline-block; width:7px; height:7px; margin:0 8px 1px 0; border-radius:50%; background:var(--ok); }
.zm-ins-ayuda{ margin:6px 0 0; font-size:13px; line-height:1.5; color:var(--texto-2); }
.zm-ins-ayuda b{ color:var(--texto); font-weight:500; }
.zm-ins-meta-suave{ font-size:12.5px; color:var(--texto-3); white-space:nowrap; }
.zm-ins-neg{ color:var(--danger) !important; }
.zm-ins-deuda{ color:var(--danger); }
.zm-ins-eti{ display:block; margin:0 0 8px; font-size:12.5px; color:var(--texto-2); }
:is(.zm-ins, .zm-ins-modal) .btn:disabled{ opacity:.45; cursor:default; box-shadow:none; }
.zm-ins .zm-barra-filtros{ justify-content:space-between; }
.zm-ins .zm-barra-filtros .zm-buscar{ margin:0; }
.zm-ins .zm-cifras{ margin-bottom:16px; }
.zm-ins .zm-frase{ margin-bottom:14px; }
/* Estados de varias palabras: el punto arriba y el texto que se acomoda. */
:is(.zm-ins-faltan, .zm-ins-editor__avisos, .zm-ins-hecho, .zm-ins-ayuda, .zm-ins-aviso, .zm-ins-cat__nota) .zm-estado{ white-space:normal; align-items:flex-start; }
:is(.zm-ins-faltan, .zm-ins-editor__avisos, .zm-ins-hecho, .zm-ins-ayuda, .zm-ins-aviso, .zm-ins-cat__nota) .zm-estado::before{ margin-top:.42em; }

/* Filas que entran escalonadas (y quietas mientras se escribe en el buscador). */
.zm-ins-filas .coleccion-paginada > .zm-fila{ animation:zm-asoma .22s var(--sal) both; }
.zm-ins-filas .coleccion-paginada > .zm-fila:nth-child(2){ animation-delay:24ms; }
.zm-ins-filas .coleccion-paginada > .zm-fila:nth-child(3){ animation-delay:48ms; }
.zm-ins-filas .coleccion-paginada > .zm-fila:nth-child(4){ animation-delay:72ms; }
.zm-ins-filas .coleccion-paginada > .zm-fila:nth-child(5){ animation-delay:96ms; }
.zm-ins-filas .coleccion-paginada > .zm-fila:nth-child(6){ animation-delay:120ms; }
.zm-ins-filas .coleccion-paginada > .zm-fila:nth-child(n+7){ animation-delay:144ms; }
.zm-ins-filas--quieta .coleccion-paginada > .zm-fila{ animation:none; }
.zm-ins .zm-fila__meta .zm-fila__monto{ min-width:78px; text-align:right; }

/* Volver y cabecera de una ficha abierta dentro de una solapa. */
.zm-ins-volver{ all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:6px; margin:0 0 12px -6px; padding:6px 10px 6px 6px; border-radius:10px;
  font-size:14px; color:var(--texto-2); cursor:pointer; transition:color .18s ease, background-color .18s ease, transform .14s var(--sal); }
.zm-ins-volver > span{ display:inline-block; font-size:18px; line-height:1; transition:transform .18s var(--sal); }
.zm-ins-volver:active{ transform:scale(.97); }
.zm-ins-volver:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
@media (hover:hover) and (pointer:fine){ .zm-ins-volver:hover{ color:var(--texto); background:var(--solido-2); } .zm-ins-volver:hover > span{ transform:translateX(-2px); } }
.zm-ins-ficha, .zm-ins-receta, .zm-ins-prov-ficha{ min-width:0; animation:zm-asoma .22s var(--sal) both; }
.zm-ins-subcabeza{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; margin:0 0 18px; }
.zm-ins-subcabeza > div:first-child{ min-width:0; flex:1 1 320px; }
.zm-ins-subcabeza h2{ margin:0; font-size:24px; font-weight:500; letter-spacing:-.03em; line-height:1.15; color:var(--texto); overflow-wrap:anywhere; }
.zm-ins-subcabeza p{ margin:6px 0 0; font-size:13.5px; line-height:1.45; color:var(--texto-2); }
.zm-ins-subtitulo{ margin:18px 0 10px; font-size:14px; font-weight:500; color:var(--texto); }
.zm-ins-seccion-cabeza{ margin:24px 0 12px; }
.zm-ins-seccion-cabeza h2{ margin:0; font-size:17px; font-weight:500; letter-spacing:-.015em; color:var(--texto); }
.zm-ins-seccion-cabeza p{ margin:4px 0 0; font-size:13px; line-height:1.45; color:var(--texto-2); }
.zm-ins-seccion-cabeza--accion{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; }
.zm-ins-pagar > .zm-cifras + .zm-ins-facturas .zm-ins-seccion-cabeza{ margin-top:6px; }

/* Botones chicos: quitar una línea y un nombre que abre algo. */
.zm-ins-quitar{ all:unset; box-sizing:border-box; display:inline-grid; place-items:center; flex:0 0 auto; width:32px; height:32px; border-radius:10px; color:var(--texto-3); cursor:pointer;
  transition:background-color .18s ease, color .18s ease, transform .14s var(--sal); }
.zm-ins-quitar:active{ transform:scale(.94); }
.zm-ins-quitar:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
.zm-ins-quitar:disabled{ opacity:.4; cursor:default; }
@media (hover:hover) and (pointer:fine){ .zm-ins-quitar:hover:not(:disabled){ background:var(--solido-2); color:var(--texto); } }
.zm-ins-enlace{ all:unset; cursor:pointer; font-size:14.5px; font-weight:500; line-height:1.35; color:var(--texto); border-radius:4px; overflow-wrap:anywhere;
  text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px; transition:text-decoration-color .18s ease; }
.zm-ins-enlace:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
@media (hover:hover) and (pointer:fine){ .zm-ins-enlace:hover{ text-decoration-color:var(--texto-3); } }

/* Renglones de datos (historial, compras de un insumo, facturas, kardex). */
.zm-ins-renglon{ position:relative; display:flex; align-items:center; gap:6px 16px; flex-wrap:wrap; min-height:50px; padding:10px 12px; font-size:13.5px; color:var(--texto); }
.zm-ins-renglon + .zm-ins-renglon::before, .zm-ins-marcar-todas + .coleccion-paginada > .zm-ins-renglon:first-child::before{ content:''; position:absolute; left:12px; right:12px; top:0; height:1px; background:var(--linea); opacity:.7; }
.zm-ins-renglon__fecha{ flex:0 0 58px; font-size:12.5px; color:var(--texto-3); font-variant-numeric:tabular-nums; }
.zm-ins-renglon__texto{ flex:1 1 220px; min-width:0; display:flex; flex-direction:column; gap:2px; line-height:1.35; }
.zm-ins-renglon__texto b{ font-weight:500; overflow-wrap:anywhere; }
.zm-ins-renglon__texto small{ font-size:12.5px; color:var(--texto-2); }
.zm-ins-renglon__medio{ flex:0 1 auto; display:flex; flex-direction:column; align-items:flex-end; gap:3px; font-size:12.5px; color:var(--texto-2); text-align:right; font-variant-numeric:tabular-nums; }
.zm-ins-renglon__medio small{ font-size:12px; color:var(--texto-3); }
.zm-ins-renglon__monto{ flex:0 0 auto; min-width:84px; text-align:right; font-size:14.5px; font-weight:500; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.zm-ins-tabla:not(.zm-lista){ margin:0 -12px; }

/* Resumen · qué pedir. */
.zm-ins-resumen > .zm-tarjeta{ margin-top:16px; }
.zm-ins-pedir .zm-tarjeta__cabeza{ align-items:center; }
.zm-ins-grupos{ display:flex; flex-direction:column; gap:12px; }
.zm-ins-grupo{ border:1px solid var(--linea); border-radius:var(--r-chica); background:var(--solido); }
.zm-ins-grupo__cabeza{ display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; padding:12px 16px; border-bottom:1px solid var(--linea); }
.zm-ins-grupo__texto{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.zm-ins-grupo__texto strong{ font-size:15px; font-weight:500; letter-spacing:-.01em; color:var(--texto); }
.zm-ins-grupo__texto span{ font-size:13px; color:var(--texto-2); font-variant-numeric:tabular-nums; }
.zm-ins-grupo__hecho{ display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; }
.zm-ins-grupo__acciones{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.zm-ins-grupo__acciones a.btn{ text-decoration:none; }
.zm-ins-grupo__items{ padding:4px 0; }
.zm-ins-item{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 18px; padding:12px 16px; border-radius:10px; transition:background-color .3s ease; }
.zm-ins-item + .zm-ins-item::before{ content:''; position:absolute; left:16px; right:16px; top:0; height:1px; background:var(--linea); opacity:.7; }
.zm-ins-item--foco{ background:var(--solido-2); }
.zm-ins-item__principal{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:0; }
.zm-ins-item__sub{ font-size:12.5px; line-height:1.4; color:var(--texto-2); }
.zm-ins-item__meta{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; text-align:right; font-variant-numeric:tabular-nums; }
.zm-ins-item__cant{ font-size:14.5px; font-weight:500; color:var(--texto); white-space:nowrap; }

/* Resumen · compras en unidades distintas. */
.zm-ins-mezcla__item{ border-top:1px solid var(--linea); }
.zm-ins-mezcla__item > summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; padding:12px 2px; cursor:pointer; border-radius:8px; }
.zm-ins-mezcla__item > summary::-webkit-details-marker{ display:none; }
.zm-ins-mezcla__item > summary::after{ content:''; width:7px; height:7px; margin:0 6px 0 auto; border-right:1.6px solid var(--texto-3); border-bottom:1.6px solid var(--texto-3); transform:rotate(45deg); transition:transform .18s var(--sal); }
.zm-ins-mezcla__item[open] > summary::after{ transform:rotate(225deg); }
.zm-ins-mezcla__item > summary:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
.zm-ins-mezcla__titulo{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.zm-ins-mezcla__titulo b{ font-weight:500; color:var(--texto); }
.zm-ins-mezcla__titulo small{ font-size:12.5px; color:var(--texto-2); }
.zm-ins-mezcla__cifra{ font-size:13.5px; color:var(--texto-2); font-variant-numeric:tabular-nums; }
.zm-ins-mezcla__cifra b{ color:var(--texto); font-weight:500; }
.zm-ins-mezcla__detalle{ padding:0 2px 14px; animation:zm-asoma .22s var(--sal) both; }
.zm-ins-mezcla__detalle .zm-pares{ margin:8px 0; }
.zm-ins-mezcla__detalle .btn{ margin-top:10px; }

/* Ficha del insumo. */
.zm-ins-ficha__cifras{ margin-bottom:16px; }
.zm-ins-ficha__cuerpo{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:16px; align-items:start; }
.zm-ins-ficha__cuerpo--una{ grid-template-columns:minmax(0,760px); }
.zm-ins-ficha__cuerpo > .zm-tarjeta + .zm-tarjeta, .zm-ins-receta__principal > .zm-tarjeta + .zm-tarjeta, .zm-ins-receta__lado > .zm-tarjeta + .zm-tarjeta, .zm-ins-prov-datos > .zm-tarjeta + .zm-tarjeta{ margin-top:0; }
.zm-ins-opcion{ display:flex; align-items:flex-start; gap:12px; margin:16px 0; }
.zm-ins-opcion .zm-chip{ flex:0 0 auto; }
.zm-ins-opcion p{ margin:6px 0 0; font-size:13px; line-height:1.5; color:var(--texto-2); }
.zm-ins-panel{ display:flex; flex-direction:column; min-width:0; }
.zm-ins-panel__parte{ min-width:0; }
.zm-ins-panel__parte + .zm-ins-panel__parte{ margin-top:16px; padding-top:16px; border-top:1px solid var(--linea); }
.zm-ins-panel__parte > h3{ margin:0 0 8px; font-size:14px; font-weight:500; letter-spacing:-.01em; color:var(--texto); }
.zm-ins-chip-dato{ cursor:default; }
.zm-ins-variantes{ flex:1 1 100%; display:flex; flex-direction:column; gap:6px; }
.zm-ins-lote{ display:flex; flex-direction:column; gap:7px; padding:10px 0; }
.zm-ins-lote + .zm-ins-lote{ border-top:1px solid var(--linea); }
.zm-ins-lote--agotado{ opacity:.6; }
.zm-ins-lote__cabeza{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; color:var(--texto-2); }
.zm-ins-lote__pie{ display:flex; justify-content:space-between; gap:4px 12px; flex-wrap:wrap; font-size:12.5px; color:var(--texto-2); font-variant-numeric:tabular-nums; }
.zm-ins-kardex{ margin-top:10px; }
.zm-ins-kardex > summary{ display:inline-flex; align-items:center; gap:8px; padding:6px 0; font-size:13.5px; color:var(--texto); cursor:pointer; list-style:none; border-radius:6px; }
.zm-ins-kardex > summary::-webkit-details-marker{ display:none; }
.zm-ins-kardex > summary::after{ content:''; width:6px; height:6px; border-right:1.5px solid var(--texto-3); border-bottom:1.5px solid var(--texto-3); transform:rotate(45deg); transition:transform .18s var(--sal); }
.zm-ins-kardex[open] > summary::after{ transform:rotate(225deg); }
.zm-ins-kardex > summary:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }

/* Controles en línea: agregar algo o una cantidad con su unidad al lado. */
.zm-ins-agregar{ display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin-top:12px; }
.zm-ins-agregar .zm-campo{ flex:1 1 220px; }
.zm-ins-agregar .zm-ins-corto{ flex:0 0 130px; }
.zm-ins-agregar .zm-ins-medio{ flex:0 1 260px; }
.zm-ins-agregar > .zm-ins-ayuda{ flex:1 1 100%; margin:0; }
.zm-ins-agregar > input{ flex:1 1 180px; margin:0; }
.zm-campo.zm-ins-inline{ flex-direction:row; align-items:center; flex-wrap:wrap; gap:8px; }
.zm-ins-inline input{ width:96px; }
.zm-ins-inline select{ width:auto; max-width:100%; }

/* Recetas: editor, equipos, espacio, costeo y simulador. */
.zm-ins-recetas .zm-frase{ max-width:86ch; }
.zm-ins-receta__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,380px); gap:16px; align-items:start; }
.zm-ins-receta__grid--una{ grid-template-columns:minmax(0,880px); }
.zm-ins-receta__principal{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.zm-ins-receta__lado{ position:sticky; top:12px; display:flex; flex-direction:column; gap:14px; min-width:0; }
.zm-ins-editor__variantes{ margin:0 0 12px; max-width:100%; }
.zm-ins-aviso{ display:flex; flex-direction:column; gap:10px; margin:0 0 12px; padding:12px 14px; border-radius:var(--r-chica); background:var(--solido-2); }
.zm-ins-lineas{ display:flex; flex-direction:column; }
.zm-ins-lineas > div:last-child{ padding-top:12px; }
.zm-ins-linea{ padding:10px 0; border-bottom:1px solid var(--linea); }
.zm-ins-linea__campos{ display:grid; grid-template-columns:minmax(0,1fr) 92px 124px 32px; gap:8px; align-items:center; }
.zm-ins-linea__campos :is(input, select){ margin:0; }
.zm-ins-linea__dato{ margin:6px 0 0; font-size:12.5px; line-height:1.4; color:var(--texto-2); }
.zm-ins-faltan{ list-style:none; display:flex; flex-direction:column; gap:6px; margin:12px 0 0; padding:0; }
.zm-ins-editor__total{ margin-top:14px; }
.zm-ins-editor__avisos{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.zm-ins-desvio{ display:flex; align-items:center; justify-content:space-between; gap:8px 12px; flex-wrap:wrap; }
.zm-ins-equipo-fila{ display:flex; align-items:center; gap:8px 14px; flex-wrap:wrap; padding:10px 0; border-bottom:1px solid var(--linea); }
.zm-ins-equipo-fila__texto{ flex:1 1 200px; min-width:0; display:flex; flex-direction:column; gap:2px; }
.zm-ins-equipo-fila__texto strong{ font-size:14.5px; font-weight:500; color:var(--texto); }
.zm-ins-equipo-fila__texto span{ font-size:12.5px; color:var(--texto-2); font-variant-numeric:tabular-nums; }
.zm-ins-equipo-fila .zm-ins-inline > span{ font-size:12.5px; color:var(--texto-2); }
.zm-ins-costeo .zm-pares small, .zm-ins-sim .zm-pares small{ margin-left:6px; font-size:12px; color:var(--texto-3); }
.zm-ins-costeo__hora{ display:flex; flex-direction:column; gap:8px; margin-top:14px; padding:12px 14px; border-radius:var(--r-chica); background:var(--solido-2); }
.zm-ins-costeo__hora > div{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:13.5px; color:var(--texto-2); }
.zm-ins-costeo__hora b{ font-size:18px; font-weight:500; letter-spacing:-.02em; color:var(--texto); font-variant-numeric:tabular-nums; }
.zm-ins-sim .zm-campos{ grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); margin-bottom:12px; }
.zm-ins-sim > .btn{ margin-top:12px; }
.zm-ins-sugerido{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:12px 0 0; padding:12px 14px; border:1px solid var(--linea); border-radius:var(--r-chica); }
.zm-ins-sugerido p{ margin:0; font-size:13.5px; line-height:1.45; color:var(--texto-2); }
.zm-ins-sugerido b{ color:var(--texto); font-weight:500; }

/* Costos · gasto fijo. */
.zm-ins-costos > .zm-tarjeta + .zm-tarjeta{ margin-top:16px; }
.zm-ins-interruptor{ display:flex; align-items:center; gap:12px; margin:4px 0 0; font-size:14px; font-weight:400; color:var(--texto); cursor:pointer; }
.zm-ins-interruptor input{ appearance:none; -webkit-appearance:none; position:relative; flex:0 0 auto; width:42px; height:26px; margin:0; padding:0; border:0; border-radius:999px;
  background:var(--solido-2); box-shadow:inset 0 0 0 1px var(--linea); cursor:pointer; transition:background-color .18s ease; }
.zm-ins-interruptor input::after{ content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--solido); box-shadow:0 0 0 1px var(--linea); transition:transform .22s var(--sal); }
.zm-ins-interruptor input:checked{ background:var(--texto); box-shadow:none; }
.zm-ins-interruptor input:checked::after{ transform:translateX(16px); box-shadow:none; }
.zm-ins-interruptor input:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
.zm-ins-bloque{ margin-top:18px; }
.zm-ins-bloque > h3{ margin:0 0 8px; font-size:14px; font-weight:500; color:var(--texto); }
.zm-ins-cats{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); align-items:start; gap:8px; margin-top:12px; }
.zm-ins-cat{ all:unset; box-sizing:border-box; display:flex; flex-direction:column; gap:3px; min-width:0; padding:12px 14px; border:1px solid var(--linea); border-radius:var(--r-chica); background:var(--solido); cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease, transform .14s var(--sal); }
.zm-ins-cat[aria-pressed="false"] :is(.zm-ins-cat__nombre, .zm-ins-cat__monto){ color:var(--texto-3); }
.zm-ins-cat[aria-pressed="true"]{ border-color:var(--texto); }
.zm-ins-cat:active{ transform:scale(.98); }
.zm-ins-cat:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
.zm-ins-cat--fuera{ cursor:default; background:var(--solido-2); border-style:dashed; }
.zm-ins-cat--fuera:active{ transform:none; }
.zm-ins-cat__nombre{ display:block; font-size:14px; font-weight:500; color:var(--texto); }
.zm-ins-cat__nombre::first-letter{ text-transform:uppercase; }
.zm-ins-cat__monto{ font-size:18px; font-weight:500; letter-spacing:-.02em; color:var(--texto); font-variant-numeric:tabular-nums; }
.zm-ins-cat__nota{ display:flex; align-items:flex-start; gap:6px; flex-wrap:wrap; font-size:12px; line-height:1.4; color:var(--texto-2); }
@media (hover:hover) and (pointer:fine){ .zm-ins-cat:not(.zm-ins-cat--fuera):hover{ border-color:var(--texto-3); } }

/* Costos · equipos y salas. */
.zm-ins-equipo{ display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:24px; align-items:start; }
.zm-ins-equipo--nuevo{ grid-template-columns:minmax(0,1fr); }
.zm-ins-equipo__form{ min-width:0; }
.zm-ins-equipo__costo{ position:sticky; top:0; display:flex; flex-direction:column; gap:8px; padding:16px; border-radius:var(--r-chica); background:var(--solido-2); }
.zm-ins-equipo__eti{ font-size:12.5px; color:var(--texto-2); }
.zm-ins-equipo__cifra{ font-size:28px; font-weight:500; letter-spacing:-.03em; line-height:1.1; color:var(--texto); font-variant-numeric:tabular-nums; }
.zm-ins-acciones{ flex-wrap:wrap; }
.zm-ins-acciones .zm-ins-a-la-izquierda{ margin-right:auto; }
.zm-ins-espacio{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) 170px minmax(150px,220px); gap:10px 16px; align-items:center; padding:12px 14px; }
.zm-ins-espacio + .zm-ins-espacio::before{ content:''; position:absolute; left:14px; right:14px; top:0; height:1px; background:var(--linea); opacity:.7; }
.zm-ins-espacio__texto{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.zm-ins-espacio__texto strong{ font-size:15px; font-weight:500; color:var(--texto); }
.zm-ins-espacio__texto span{ font-size:13px; color:var(--texto-2); }
.zm-ins-espacio__dato{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; }

/* Compras. */
.zm-ins-ia{ margin:0 0 16px; }
.zm-ins-hecho{ display:flex; flex-direction:column; gap:10px; }
.zm-ins-sug{ padding:14px; border-radius:var(--r-chica); background:var(--solido-2); }
.zm-ins-sug p{ margin:0; font-size:13.5px; line-height:1.5; color:var(--texto-2); }
.zm-ins-sug b{ color:var(--texto); font-weight:500; }
.zm-ins-resumen-compra{ margin:14px 0 0; padding:12px 14px; border-radius:var(--r-chica); background:var(--solido-2); font-size:13px; line-height:1.5; color:var(--texto-2); }
.zm-ins-resumen-compra b{ color:var(--texto); font-weight:500; }

/* Proveedores. */
.zm-ins-prov > .zm-tarjeta{ margin-bottom:16px; }
.zm-ins-prov-datos{ display:flex; flex-direction:column; gap:14px; }
.zm-ins-prov-datos > .zm-cifras{ margin-bottom:0; }
.zm-ins-dup{ display:flex; align-items:center; gap:8px 14px; flex-wrap:wrap; padding:10px 0; border-top:1px solid var(--linea); }
.zm-ins-dup__texto{ flex:1 1 220px; font-size:13.5px; color:var(--texto-2); }
.zm-ins-dup__texto b{ font-weight:500; color:var(--texto); }

/* Por pagar: selección múltiple y la barra que aparece al marcar. */
.zm-ins-marcar-todas{ display:flex; align-items:center; gap:10px; margin:0; padding:10px 12px; font-size:13px; font-weight:400; color:var(--texto-2); cursor:pointer; }
.zm-ins-marcar-todas input, .zm-ins-factura > input[type="checkbox"]{ flex:0 0 auto; width:18px; height:18px; margin:0; padding:0; accent-color:var(--texto); cursor:pointer; }
.zm-ins-factura{ border-radius:10px; transition:background-color .18s ease; }
.zm-ins-factura--sel{ background:var(--solido-2); }
.zm-ins-factura > .btn{ flex:0 0 auto; }
.zm-ins-seleccion{ position:sticky; bottom:12px; z-index:5; display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:12px 0 0; padding:12px 14px;
  border:1px solid var(--linea); border-radius:var(--r-tarjeta); background:var(--solido); box-shadow:var(--pz-sombra); animation:zm-llega .18s var(--sal) both; }
.zm-ins-seleccion > span{ margin-right:auto; font-size:14px; color:var(--texto-2); font-variant-numeric:tabular-nums; }
.zm-ins-seleccion b{ color:var(--texto); font-weight:500; }
.zm-ins-servicios .zm-ins-renglon .zm-mas > summary{ min-height:32px; padding:4px 12px; }

/* zairi balance: el aviso de lo que se mudó a Insumos. */
.zm-ins-mudanza{ max-width:760px; }
.zm-ins-mudanza__acciones{ display:flex; gap:8px; flex-wrap:wrap; }

/* Ventanas propias. */
.zm-ins-modal .zm-pares{ margin:0 0 12px; }
.zm-ins-modal .zm-pares small{ display:block; margin-top:2px; font-size:12px; color:var(--texto-3); }
.zm-ins-dialogo{ max-width:520px; }
.zm-ins-dialogo .zm-ins-ayuda{ margin-bottom:12px; }

@media(max-width:1100px){
  .zm-ins-ficha__cuerpo, .zm-ins-receta__grid{ grid-template-columns:minmax(0,1fr); }
  .zm-ins-receta__lado{ position:static; }
}
@media(max-width:820px){
  .zm-ins-equipo{ grid-template-columns:minmax(0,1fr); }
  .zm-ins-equipo__costo{ position:static; order:-1; }
}
@media(max-width:640px){
  .zm-ins .zm-barra-filtros .zm-buscar{ flex:1 1 100%; max-width:none; }
  .zm-ins .zm-barra-filtros > .btn{ flex:1 1 auto; }
  .zm-ins-subcabeza h2{ font-size:21px; }
  .zm-ins-item{ grid-template-columns:minmax(0,1fr); padding:12px; }
  .zm-ins-item__meta{ align-items:flex-start; text-align:left; }
  .zm-ins-grupo__cabeza{ padding:12px; }
  .zm-ins-renglon{ padding:10px 8px; }
  .zm-ins-renglon__fecha{ flex-basis:100%; }
  .zm-ins-renglon__medio{ flex:1 1 60%; align-items:flex-start; text-align:left; }
  .zm-ins-tabla:not(.zm-lista){ margin:0 -8px; }
  .zm-ins-linea__campos{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) 32px; }
  .zm-ins-linea__campos > :first-child{ grid-column:1 / -1; }
  .zm-ins-espacio{ grid-template-columns:minmax(0,1fr); }
  .zm-ins-espacio__dato{ align-items:flex-start; }
  .zm-ins-cats{ grid-template-columns:minmax(0,1fr); }
  .zm-ins-seleccion{ bottom:8px; }
  .zm-ins-seleccion > span{ flex:1 1 100%; }
  .zm-ins-opcion{ flex-direction:column; gap:6px; }
}
@media (prefers-reduced-motion: reduce){
  .zm-ins__cuerpo, .zm-ins-ficha, .zm-ins-receta, .zm-ins-prov-ficha, .zm-ins-mezcla__detalle, .zm-ins-seleccion, .zm-ins-filas .coleccion-paginada > .zm-fila{ animation:none !important; }
  .zm-ins-volver, .zm-ins-volver > span, .zm-ins-quitar, .zm-ins-enlace, .zm-ins-item, .zm-ins-cat, .zm-ins-factura, .zm-ins-interruptor input, .zm-ins-interruptor input::after,
  .zm-ins-mezcla__item > summary::after, .zm-ins-kardex > summary::after{ transition:none; }
}
/* ── fin zm · insumos ── */

/* ── zm · conciliacion ── */
/* Conciliación serena: frase + cifras, un grupo de hallazgos por tarjeta con sus
   filas paginadas, detalle sólido con la evidencia y una acción real. Sólo tokens. */
.zm-conc-frase, .zm-conc-cifras, .zm-conc-grupos{ transition:opacity .18s ease; }
.zm-conc--revisando .zm-conc-frase, .zm-conc--revisando .zm-conc-cifras, .zm-conc--revisando .zm-conc-grupos{ opacity:.55; }
.zm-conc-revisar svg{ transform-origin:50% 50%; }
.zm-conc--revisando .zm-conc-revisar svg{ animation:zm-conc-gira .9s linear infinite; }
@keyframes zm-conc-gira{ to{ transform:rotate(360deg); } }
.zm-conc-frase{ min-height:1.55em; margin:-6px 0 18px; }
.zm-conc-filtros .zm-seg{ flex:0 1 auto; }
/* El buscador común hereda reglas globales de <label>/<input> (margen inferior del
   campo, peso 500 del rótulo y, en noche, el relleno y radio de la capa 8): la lupa
   quedaba 7 px abajo o encima del texto. Se asienta aquí, sólo en este módulo. */
html .zm-conc-filtros .zm-buscar{ margin:0; }
html .zm-conc-filtros .zm-buscar input{ display:block; margin:0; padding-left:36px; border-radius:999px; font-weight:400; }
.zm-conc-grupos{ display:flex; flex-direction:column; gap:14px; }
.zm-conc-grupos > .zm-tarjeta + .zm-tarjeta{ margin-top:0; }
.zm-conc-grupo{ padding:20px 22px 12px; }
.zm-conc-grupo .zm-tarjeta__cabeza{ margin-bottom:8px; }
.zm-conc-grupo .zm-tarjeta__cabeza h2{ display:flex; align-items:baseline; gap:10px; }
.zm-conc-grupo .zm-tarjeta__cabeza p{ max-width:74ch; line-height:1.5; }
.zm-conc-cuenta{ font-size:13px; font-weight:400; letter-spacing:0; color:var(--texto-3); font-variant-numeric:tabular-nums; }
.zm-conc-filas{ margin:0 -12px; }
.zm-conc-filas .zm-fila__titulo{ font-size:14.5px; }
.zm-conc-filas .zm-fila__meta{ gap:16px; }
.zm-conc-filas .zm-fila__monto{ min-width:88px; text-align:right; }
/* Al cambiar de página las filas nuevas asoman en escalera corta (las que ya
   estaban conservan su nodo y no se mueven). */
.zm-conc-filas .coleccion-paginada > .zm-fila{ animation:zm-asoma .22s var(--sal) both; }
.zm-conc-filas .coleccion-paginada > .zm-fila:nth-child(2){ animation-delay:24ms; }
.zm-conc-filas .coleccion-paginada > .zm-fila:nth-child(3){ animation-delay:48ms; }
.zm-conc-filas .coleccion-paginada > .zm-fila:nth-child(4){ animation-delay:72ms; }
.zm-conc-filas .coleccion-paginada > .zm-fila:nth-child(5){ animation-delay:96ms; }
.zm-conc-filas .coleccion-paginada > .zm-fila:nth-child(6){ animation-delay:120ms; }
.zm-conc-filas .coleccion-paginada > .zm-fila:nth-child(7){ animation-delay:144ms; }
.zm-conc-filas .coleccion-paginada > .zm-fila:nth-child(n+8){ animation-delay:168ms; }
.zm-conc-pie{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin:18px 4px 0; font-size:13px; color:var(--texto-3); }
.zm-conc-enlace{ all:unset; cursor:pointer; color:var(--texto); text-decoration:underline; text-decoration-color:var(--linea); text-underline-offset:3px; transition:text-decoration-color .18s ease; }
.zm-conc-enlace:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; border-radius:4px; }
@media (hover:hover) and (pointer:fine){ .zm-conc-enlace:hover{ text-decoration-color:var(--texto); } }
.zm-conc-enlace--ficha{ margin-left:12px; font-size:13px; color:var(--texto-2); }

/* Aviso tras una acción (sólido: se abre encima del contenido). */
.zm-conc-aviso{ position:fixed; z-index:48; left:0; right:0; bottom:24px; margin:0 auto; width:max-content; max-width:min(560px, calc(100vw - 32px)); box-sizing:border-box;
  display:flex; align-items:center; gap:14px; padding:10px 8px 10px 16px; background:var(--solido); color:var(--texto); border:1px solid var(--linea);
  border-radius:var(--r-chica); box-shadow:var(--pz-sombra); font-size:14px; line-height:1.4; animation:zm-conc-sube .22s var(--sal) both; }
.zm-conc-aviso > span{ min-width:0; }
.zm-conc-aviso__accion{ all:unset; flex:0 0 auto; padding:6px 8px; border-radius:8px; font-weight:600; cursor:pointer; color:var(--texto); }
.zm-conc-aviso__cerrar{ all:unset; flex:0 0 auto; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:var(--texto-3); cursor:pointer; }
.zm-conc-aviso__accion:focus-visible, .zm-conc-aviso__cerrar:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
@media (hover:hover) and (pointer:fine){ .zm-conc-aviso__accion:hover, .zm-conc-aviso__cerrar:hover{ background:var(--solido-2); color:var(--texto); } }
@keyframes zm-conc-sube{ from{ opacity:0; transform:translate3d(0,10px,0) scale(.98); } to{ opacity:1; transform:none; } }

/* Detalle del hallazgo y revisados (ventana sólida del sistema). */
.modal.zm-conc-modal{ max-width:600px; }
.zm-conc-modal__frase{ margin:-4px 0 18px; font-size:15px; line-height:1.55; color:var(--texto-2); }
.zm-conc-modal__frase b{ color:var(--texto); font-weight:500; }
.zm-conc-pares{ margin:0 0 20px; }
.zm-conc-pares > dd{ padding-left:16px; overflow-wrap:anywhere; }
.zm-conc-cobros{ margin:0 0 18px; }
.zm-conc-cobros > h3{ margin:0 0 8px; font-size:11.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-3); }
.zm-conc-cobros > ul{ list-style:none; margin:0 0 10px; padding:0; border:1px solid var(--linea); border-radius:var(--r-chica); overflow:hidden; }
.zm-conc-cobro + .zm-conc-cobro{ border-top:1px solid var(--linea); }
.zm-conc-cobro{ transition:background-color .18s ease; }
.zm-conc-cobro--confirma{ background:var(--solido-2); }
.zm-conc-cobro__linea{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:6px 14px; padding:12px 12px 12px 14px; }
.zm-conc-cobro__que{ min-width:0; }
.zm-conc-cobro__titulo{ display:block; font-size:14px; color:var(--texto); }
.zm-conc-cobro__sub{ display:block; margin-top:2px; font-size:12.5px; color:var(--texto-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-conc-cobro__monto{ font-size:14.5px; font-weight:500; color:var(--texto); font-variant-numeric:tabular-nums; white-space:nowrap; }
.zm-conc-anular{ padding:0 14px 14px; animation:zm-asoma .22s var(--sal) both; }
.zm-conc-anular textarea{ width:100%; box-sizing:border-box; min-height:64px; padding:10px 12px; border-radius:var(--r-campo); border:1px solid var(--linea);
  background:var(--solido); color:var(--texto); font:inherit; font-size:14px; line-height:1.45; resize:vertical; }
.zm-conc-anular textarea:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
.zm-conc-anular__acciones{ display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }
.zm-conc-nota{ margin:0 0 14px; font-size:13px; line-height:1.5; color:var(--texto-2); }
.zm-conc-error{ margin:0 0 12px; font-size:13.5px; line-height:1.45; color:var(--danger); }
.zm-conc-pie-acciones{ margin-top:4px; }
.zm-conc-rev{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 2px; }
.zm-conc-rev + .zm-conc-rev{ border-top:1px solid var(--linea); }
.zm-conc-rev__titulo{ display:block; font-size:14px; line-height:1.4; color:var(--texto); overflow-wrap:anywhere; }
.zm-conc-rev__sub{ display:block; margin-top:2px; font-size:12.5px; color:var(--texto-3); }

@media(max-width:640px){
  .zm-conc .zm-cabeza__acciones{ flex-wrap:nowrap; }
  .zm-conc .zm-cabeza__acciones .zm-seg__op{ padding:6px 11px; }
  .zm-conc-revisar{ flex:0 0 auto; width:40px; height:40px; min-height:40px; padding:0; justify-content:center; margin-left:auto; }
  .zm-conc-revisar__txt{ display:none; }
  .zm-conc-cifras{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .zm-conc-cifras > :last-child:nth-child(odd){ grid-column:1 / -1; }
  .zm-conc-grupo{ padding:16px 14px 8px; }
  .zm-conc-filas{ margin:0 -8px; }
  .zm-conc-filas .zm-fila__monto{ min-width:0; text-align:left; }
  .zm-conc-filas .zm-fila__sub{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .zm-conc-filtros .zm-buscar{ flex-basis:100%; max-width:none; }
  .zm-conc-cobro__linea{ grid-template-columns:minmax(0,1fr) auto; }
  .zm-conc-cobro__linea > .btn{ grid-column:1 / -1; justify-self:start; }
  .zm-conc-pie-acciones .zm-pie-nota{ flex-basis:100%; }
  .zm-conc-aviso{ bottom:16px; }
}
@media (prefers-reduced-motion: reduce){
  .zm-conc-aviso, .zm-conc-anular, .zm-conc-filas .coleccion-paginada > .zm-fila{ animation:zm-funde .18s ease both !important; animation-delay:0ms !important; }
  .zm-conc--revisando .zm-conc-revisar svg{ animation:none; }
  .zm-conc-frase, .zm-conc-cifras, .zm-conc-grupos, .zm-conc-cobro, .zm-conc-enlace{ transition:none; }
}
/* ── fin zm · conciliacion ── */

/* ── zm · informes ── */
/* Panel de Informes v618 (public/app.js · Informes). Sólo tokens: el acento vive
   en la cifra clave de cada pestaña, en el botón principal y en el mes en curso;
   los gráficos van en tinta con opacidad y la intensidad dice la cantidad. Las
   barras y columnas crecen con transform desde su valor visible y cada movimiento
   tiene su reposo en prefers-reduced-motion. */
.zm-inf{ --inf-alto:118px; }
.zm-inf-panel{ min-height:320px; }
.zm-inf-filtros{ justify-content:space-between; row-gap:12px; }
.zm-inf-quien{ display:inline-flex; align-items:center; gap:10px; margin:0; font-size:13px; color:var(--texto-2); }
.zm-inf-quien > span{ white-space:nowrap; }
.zm-inf .zm-inf-select{ min-height:38px; max-width:260px; margin:0; padding:6px 34px 6px 14px; border-radius:999px; border:1px solid var(--linea); color:var(--texto); font:inherit; font-size:13.5px; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  background-color:var(--solido);
  background-image:linear-gradient(45deg,transparent 50%,var(--texto-3) 50%),linear-gradient(135deg,var(--texto-3) 50%,transparent 50%);
  background-position:calc(100% - 19px) 55%,calc(100% - 14px) 55%; background-size:5px 5px,5px 5px; background-repeat:no-repeat;
  transition:border-color .18s ease; }
.zm-inf .zm-inf-select:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
@media (hover:hover) and (pointer:fine){ .zm-inf-select:hover{ border-color:var(--texto-3); } }
.zm-inf-fechas{ display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin:-2px 0 16px; animation:zm-asoma .22s var(--sal) both; }
.zm-inf-fechas label{ display:flex; flex-direction:column; gap:5px; margin:0; font-size:12.5px; color:var(--texto-2); }
.zm-inf .zm-inf-fechas input{ min-height:38px; margin:0; padding:6px 12px; border-radius:var(--r-campo); border:1px solid var(--linea); background:var(--solido); color:var(--texto); font:inherit; font-size:14px; }
.zm-inf-fechas input:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
.zm-inf-nota{ margin:12px 0 0; font-size:12.5px; line-height:1.5; color:var(--texto-3); max-width:90ch; }
.zm-inf-nota b{ color:var(--texto-2); font-weight:500; }
.zm-inf-nota--filtro{ margin:0 0 16px; font-size:13px; color:var(--texto-2); }
.zm-inf-nota--filtro b{ color:var(--texto); }
.zm-inf-enlace{ all:unset; cursor:pointer; color:var(--texto); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--linea); transition:text-decoration-color .18s ease; }
.zm-inf-enlace:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; border-radius:4px; }
@media (hover:hover) and (pointer:fine){ .zm-inf-enlace:hover{ text-decoration-color:currentColor; } }
.zm-inf-aviso{ margin:0 0 14px; }
.zm-inf-nada{ margin:6px 0; font-size:13.5px; color:var(--texto-2); }
.zm-inf-deuda, .zm-inf .zm-pares > dd.zm-inf-deuda{ color:var(--danger); }
.zm-inf-subnav{ margin:0 0 18px; }
.zm-inf-subtitulo{ margin:0 0 12px; font-size:14px; font-weight:500; letter-spacing:-.01em; color:var(--texto); }

/* Frase, cifras y comparación con el período anterior (flecha y palabra). */
.zm-inf-frase{ margin:2px 0 18px; font-size:17px; line-height:1.55; letter-spacing:-.01em; }
.zm-inf-cifras{ grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); }
.zm-inf-cifras--chicas{ margin-bottom:16px; }
.zm-inf-cifras--chicas .zm-cifra__valor{ font-size:20px; }
.zm-inf-cmp{ display:inline-flex; align-items:baseline; gap:4px; font-size:12px; color:var(--texto-2); white-space:nowrap; }
.zm-inf-cmp > i{ font-style:normal; font-weight:600; color:var(--texto); }
.zm-inf-cmp[data-sentido="igual"], .zm-inf-cmp[data-sentido="igual"] > i{ color:var(--texto-3); }
.zm-inf-avisos{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:8px; }
.zm-inf-avisos .zm-estado{ white-space:normal; align-items:flex-start; line-height:1.45; font-size:13px; }
.zm-inf-avisos .zm-estado::before{ margin-top:5px; }
.zm-inf-avisos--dentro{ margin:16px 0 0; }

/* Secciones: la rejilla de dos columnas se vuelve una en pantallas medianas. */
.zm-inf-sec{ margin-top:14px; min-width:0; }
.zm-inf-sec .zm-tarjeta__cabeza{ align-items:flex-start; }
.zm-inf-sec .zm-tarjeta__cabeza > div:first-child{ min-width:0; flex:1 1 260px; }
.zm-inf-sec .zm-tarjeta__cabeza p{ line-height:1.45; max-width:70ch; }
.zm-inf-sec__acciones{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; max-width:100%; }
.zm-inf-sec__acciones .zm-seg{ max-width:100%; }
.zm-inf-rejilla{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:14px; }
.zm-inf-rejilla > .zm-inf-sec, .zm-inf-rejilla > .zm-tarjeta + .zm-tarjeta{ margin-top:0; }
.zm-inf-rejilla--interior{ margin-top:6px; gap:24px 28px; }
@media(max-width:980px){ .zm-inf-rejilla{ grid-template-columns:minmax(0,1fr); } }
.zm-inf-pares{ margin-top:14px; }
.zm-inf-mas{ margin-top:14px; }

/* Columnas: barra de alto fijo escalada con transform; el número la acompaña. */
.zm-inf-cols{ height:auto; padding-top:24px; gap:10px; }
.zm-inf-cols .zm-columnas__col{ height:auto; gap:8px; }
.zm-inf-cols__area{ position:relative; display:flex; align-items:flex-end; justify-content:center; width:100%; height:var(--inf-alto); }
.zm-inf-cols .zm-columnas__barra{ height:100%; transform:scaleY(var(--k,0)); transition:transform .5s var(--sal);
  animation:zm-inf-crece .6s var(--sal) backwards; animation-delay:calc(var(--i,0) * 40ms); }
.zm-inf-cols .zm-columnas__num{ position:absolute; left:-6px; right:-6px; top:-20px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transform:translateY(calc((1 - var(--k,0)) * var(--inf-alto))); transition:transform .5s var(--sal);
  animation:zm-inf-sube .6s var(--sal) backwards; animation-delay:calc(var(--i,0) * 40ms); }
/* El mes en curso está incompleto: se dibuja más claro y lo dice, en vez de destacarlo. */
.zm-inf-cols .zm-columnas__col--actual .zm-columnas__barra{ background:var(--texto); opacity:.32; }
.zm-inf-cols{ padding-bottom:14px; }
.zm-inf-cols .zm-columnas__eti{ position:relative; }
.zm-inf-cols .zm-columnas__eti small{ position:absolute; top:100%; left:50%; transform:translateX(-50%); font-size:10.5px; line-height:1.4; color:var(--texto-3); white-space:nowrap; }
.zm-inf-cols .zm-columnas__col--actual .zm-columnas__eti{ color:var(--texto-2); }
.zm-inf-cols__par{ gap:4px; }
.zm-inf-cols__par .zm-columnas__barra{ width:min(18px,44%); }
.zm-inf-cols__par .zm-columnas__barra[data-serie="1"], .zm-inf-dobles__leyenda span[data-serie="1"]::before{ background:var(--texto-3); opacity:.5; }
.zm-inf-dobles__leyenda{ display:flex; gap:18px; font-size:12px; color:var(--texto-2); }
.zm-inf-dobles__leyenda span::before{ content:''; display:inline-block; width:9px; height:9px; margin-right:7px; border-radius:3px; background:var(--texto); opacity:.82; vertical-align:-1px; }
@keyframes zm-inf-crece{ from{ transform:scaleY(0); } }
@keyframes zm-inf-sube{ from{ transform:translateY(var(--inf-alto)); opacity:0; } }

/* Barras horizontales: entran escalonadas desde cero y cambian desde lo visible. */
.zm-inf-barras{ gap:12px; }
.zm-inf-barras .zm-barras__fila{ grid-template-columns:minmax(0,1.25fr) minmax(0,2fr) minmax(72px,auto); }
.zm-inf-barras .zm-avance > i{ animation:zm-inf-barra .6s var(--sal) backwards; animation-delay:calc(var(--i,0) * 36ms); }
.zm-inf-barras .zm-barras__valor{ white-space:nowrap; }
.zm-inf-barras .zm-barras__valor small{ margin-left:8px; font-size:12px; color:var(--texto-3); }
@keyframes zm-inf-barra{ from{ transform:scaleX(0); } }
@media(max-width:640px){
  .zm-inf-barras .zm-barras__fila{ grid-template-columns:minmax(0,1fr) auto; row-gap:6px; }
  .zm-inf-barras .zm-avance{ grid-column:1 / -1; grid-row:2; }
}

/* Mapa de calor en grises. */
.zm-inf-calor-envoltura{ overflow-x:auto; margin:0 -4px; padding:0 4px; }
.zm-inf-calor{ display:grid; grid-template-columns:44px repeat(var(--cols),minmax(30px,64px)); gap:4px; min-width:280px; font-size:11.5px; }
.zm-inf-calor__dia{ padding-bottom:2px; text-align:center; color:var(--texto-3); }
.zm-inf-calor__hora{ padding-right:6px; line-height:26px; text-align:right; color:var(--texto-3); font-variant-numeric:tabular-nums; }
.zm-inf-calor__celda{ display:grid; place-items:center; height:26px; border-radius:7px; font-size:11px; color:var(--texto-2); font-variant-numeric:tabular-nums;
  background:color-mix(in srgb, var(--texto) calc(var(--k,0) * 88%), var(--solido-2)); }
.zm-inf-calor__celda[data-fuerte]{ color:var(--fondo); font-weight:500; }

/* Tablas: ordenables y paginadas; en el teléfono cada fila es una tarjeta. */
.zm-inf-tabla{ margin:0 -8px; overflow-x:auto; }
.zm-inf-tabla + .zm-inf-tabla{ margin-top:18px; }
.zm-inf-tabla table{ width:100%; }
.zm-inf-tabla th{ padding:8px 10px; white-space:nowrap; }
.zm-inf-tabla th button{ all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:4px; border-radius:6px; transition:color .18s ease; }
.zm-inf-tabla th button:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
.zm-inf-tabla th[aria-sort] button{ color:var(--texto); }
@media (hover:hover) and (pointer:fine){ .zm-inf-tabla th button:hover{ color:var(--texto); } }
.zm-inf-orden{ display:inline-block; min-width:.7em; }
.zm-inf-tabla td{ padding:11px 10px; }
.zm-inf-tabla th.num, .zm-inf-tabla td.num{ text-align:right; font-variant-numeric:tabular-nums; }
.zm-inf-tabla th.num button{ flex-direction:row-reverse; }
.zm-inf-tabla tr.fila-paginacion:hover td{ background:transparent; }
.zm-inf-celda{ display:inline-flex; flex-direction:column; gap:2px; min-width:0; }
.zm-inf-celda b{ font-weight:500; }
.zm-inf-celda small{ font-size:12px; color:var(--texto-3); }
.zm-inf-celda--num{ align-items:flex-end; }
.zm-inf-fuente{ display:inline-flex; align-items:baseline; gap:7px; white-space:nowrap; }
.zm-inf-fuente small{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--texto-3); }
.zm-inf-fuente small::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--texto-3); }
.zm-inf-fuente[data-fuente="real"] small::before{ background:var(--ok); }
.zm-inf-fuente[data-fuente="receta"] small::before{ background:var(--acento); }
.zm-inf-fuente[data-fuente="manual"] small::before{ background:transparent; box-shadow:inset 0 0 0 1.3px var(--texto-3); }
@media(max-width:640px){
  .zm-inf-tabla{ margin:0; overflow:visible; }
  .zm-inf-tabla table, .zm-inf-tabla tbody, .zm-inf-tabla tr, .zm-inf-tabla td{ display:block; width:100%; }
  .zm-inf-tabla thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .zm-inf-tabla tbody tr{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:20px; margin:0 0 8px; padding:10px 14px; border:1px solid var(--linea); border-radius:var(--r-chica); background:var(--solido); }
  .zm-inf-tabla tbody td{ min-width:0; }
  .zm-inf-tabla tbody td:first-child{ grid-column:1 / -1; }
  .zm-inf-tabla td{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:4px 0; border:0; text-align:right; }
  .zm-inf-tabla td::before{ content:attr(data-titulo); flex:0 0 auto; font-size:12.5px; color:var(--texto-2); text-align:left; }
  .zm-inf-tabla td:first-child{ display:block; padding:2px 0 6px; font-size:15px; font-weight:500; text-align:left; }
  .zm-inf-tabla td:first-child::before{ display:none; }
  .zm-inf-tabla tr:hover td{ background:transparent; }
  .zm-inf-tabla tr.fila-paginacion{ display:block; padding:0; border:0; background:transparent; }
  .zm-inf-tabla tr.fila-paginacion td{ display:block; padding:0; }
  .zm-inf-tabla tr.fila-paginacion td::before{ display:none; }
  .zm-inf-celda--num{ align-items:flex-end; }
}

/* De noche, html[data-theme="dark"] .btn.ghost (0,3,1) le devolvía borde y fondo al paginador
   sereno de la capa común; aquí se reafirma, sólo dentro de Informes. */
.zm-inf .zm-lista .lista-paginacion .btn, .zm-inf .zm-paginado .lista-paginacion .btn{ border-color:transparent; background:transparent; }
.zm-inf .zm-lista .lista-paginacion .btn[aria-current="page"], .zm-inf .zm-paginado .lista-paginacion .btn[aria-current="page"]{ background:var(--acento-suave); color:var(--acento); }

/* Listas de personas y profesionales: dentro de una sección no llevan un segundo marco. */
.zm-inf-sec .zm-lista{ margin:0 -14px; padding:0; border:0; border-radius:0; background:transparent; }
.zm-inf-sec .zm-lista .lista-paginacion{ padding:12px 14px 0; }
.zm-inf-lista .zm-fila__titulo{ display:flex; align-items:center; gap:8px; }
.zm-inf-etiqueta{ flex:0 0 auto; padding:1px 8px; border:1px solid var(--linea); border-radius:999px; font-size:11px; font-weight:400; color:var(--texto-2); }
.zm-inf-meta-sub{ color:var(--texto-3); }
@media(max-width:640px){ .zm-inf-ocultar-movil{ display:none; } }

/* Planes: adherencia. */
.zm-inf-adherencia{ display:flex; flex-direction:column; gap:10px; }
.zm-inf-adherencia strong{ font-size:34px; font-weight:500; letter-spacing:-.035em; line-height:1; color:var(--texto); font-variant-numeric:tabular-nums; }
.zm-inf-adherencia .zm-avance{ height:8px; }
.zm-inf-adherencia p{ margin:0; font-size:13px; color:var(--texto-2); }

/* Variables: lo que no se pudo calcular. */
.zm-inf-faltan p{ margin:6px 0 0 14px; font-size:12.5px; color:var(--texto-2); }

/* zairi analista (conserva .sim-hero) y «Lo que zairi trabajó por ti»: sólidos y sobrios. */
.zm-inf .sim-hero.zm-analista{ display:block; margin:14px 0 0; padding:18px 22px; text-align:left; overflow:visible;
  background:var(--solido); background-image:none; -webkit-backdrop-filter:none; backdrop-filter:none; border:1px solid var(--linea); box-shadow:none; }
.zm-analista__cabeza{ display:flex; align-items:center; gap:14px 16px; flex-wrap:wrap; }
.zm-analista__orbe{ display:grid; place-items:center; flex:0 0 56px; width:56px; height:56px; }
.zm-analista__texto{ flex:1 1 280px; min-width:0; }
.zm-analista__texto h2{ margin:0; font-size:16px; font-weight:500; letter-spacing:-.015em; color:var(--texto); }
.zm-analista__texto p{ margin:4px 0 0; font-size:13.5px; line-height:1.5; color:var(--texto-2); }
.zm-analista__texto .zm-analista__veredicto{ font-size:15px; color:var(--texto); }
.zm-analista__cabeza > .btn{ margin-left:auto; }
.zm-analista__columnas{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 24px; margin:18px 0 0; padding:16px 0 0; border-top:1px solid var(--linea); }
.zm-analista__columnas ul, .zm-analista__columnas ol{ margin:8px 0 0; padding-left:18px; font-size:13.5px; line-height:1.5; color:var(--texto); }
.zm-analista__columnas li + li{ margin-top:6px; }
.zm-analista__columnas .zm-estado{ color:var(--texto); font-weight:500; }
.zm-analista__pie{ display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; margin-top:16px; font-size:12px; color:var(--texto-3); }
.zm-inf-semanal{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.zm-inf-interruptor{ display:inline-flex; align-items:center; gap:8px; margin:0; font-size:12.5px; color:var(--texto-2); cursor:pointer; }
.zm-inf-interruptor input{ width:auto; margin:0; accent-color:var(--texto); }
.zm-inf-semanal__msg{ font-size:12.5px; color:var(--texto-2); }
@media(max-width:820px){ .zm-analista__columnas{ grid-template-columns:minmax(0,1fr); } .zm-analista__cabeza > .btn{ margin-left:0; } }
.zm-inf-trabajo{ margin-top:14px; }
.zm-inf .zm-inf-trabajo > .card.zairi-reveal-card{ margin:0; padding:20px 22px; overflow:visible;
  background:var(--solido); background-image:none; -webkit-backdrop-filter:none; backdrop-filter:none; border:1px solid var(--linea); border-radius:var(--r-tarjeta); box-shadow:none; }
.zm-inf-trabajo__cabeza{ display:flex; align-items:center; gap:14px; }
.zm-inf-trabajo__cabeza .orbe-mini{ width:36px; height:36px; flex:0 0 36px; }
.zm-inf-trabajo__cabeza h2{ margin:0; font-size:16px; font-weight:500; letter-spacing:-.015em; color:var(--texto); }
.zm-inf-trabajo__cabeza p{ margin:3px 0 0; font-size:13px; color:var(--texto-2); }
.zm-inf-trabajo__cifras{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 24px; margin-top:18px; }
.zm-inf-trabajo__cifras > div{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.zm-inf-trabajo__cifras span{ font-size:12.5px; color:var(--texto-2); }
.zm-inf-trabajo__cifras strong{ font-size:26px; font-weight:500; letter-spacing:-.03em; line-height:1.1; color:var(--texto); font-variant-numeric:tabular-nums; }
.zm-inf-trabajo__cifras small{ font-size:12px; line-height:1.4; color:var(--texto-3); }
@media(max-width:640px){ .zm-inf-trabajo__cifras{ grid-template-columns:minmax(0,1fr); } }

/* Detalle de un profesional (la ventana ya es sólida por §36). */
.zm-inf-modal__bajada{ margin:-6px 0 16px; font-size:13px; color:var(--texto-2); }
.zm-inf-modal .zm-inf-pares{ margin:4px 0 18px; }

/* «Cómo se calculan estas cifras»: plegado, se abre en su sitio. */
.zm-inf-defs{ margin:20px 0 0; font-size:13px; color:var(--texto-2); }
.zm-inf-defs > summary{ display:inline-flex; align-items:center; gap:9px; padding:6px 2px; list-style:none; cursor:pointer; border-radius:8px; color:var(--texto-2); transition:color .18s ease; }
.zm-inf-defs > summary::-webkit-details-marker{ display:none; }
.zm-inf-defs > summary::before{ content:''; width:6px; height:6px; border-right:1.5px solid currentColor; border-top:1.5px solid currentColor; transform:rotate(45deg); transition:transform .18s var(--sal); }
.zm-inf-defs[open] > summary::before{ transform:rotate(135deg); }
.zm-inf-defs > summary:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
@media (hover:hover) and (pointer:fine){ .zm-inf-defs > summary:hover{ color:var(--texto); } }
.zm-inf-defs dl{ display:grid; grid-template-columns:minmax(120px,200px) minmax(0,1fr); gap:10px 20px; margin:10px 0 0; padding:16px 18px; background:var(--solido); border:1px solid var(--linea); border-radius:var(--r-chica); animation:zm-asoma .22s var(--sal) both; }
.zm-inf-defs dt{ font-weight:500; color:var(--texto); }
.zm-inf-defs dd{ margin:0; line-height:1.5; }
@media(max-width:640px){ .zm-inf-defs dl{ grid-template-columns:minmax(0,1fr); gap:2px; } .zm-inf-defs dd{ margin-bottom:10px; } }

/* Cargando: huesos quietos que laten; lo que ya se veía queda atenuado mientras llega lo nuevo. */
.zm-inf-cargando .zm-cifras{ margin-top:6px; }
.zm-inf-hueso{ display:block; border-radius:var(--r-chica); background:var(--solido-2); animation:zm-inf-latido 1.4s ease-in-out infinite; }
.zm-inf-hueso--cifra{ height:88px; }
.zm-inf-hueso--grafico{ height:240px; border-radius:var(--r-tarjeta); }
@keyframes zm-inf-latido{ 50%{ opacity:.5; } }
.zm-inf-cuerpo{ transition:opacity .18s ease; }
.zm-inf-cuerpo.is-cargando{ opacity:.62; }

@media(max-width:640px){
  .zm-inf-filtros{ flex-direction:column; align-items:stretch; }
  /* Los seis períodos a la vista (sin deslizar): una rejilla de 3 × 2. */
  .zm-inf-filtros .zm-seg{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; border-radius:18px; }
  .zm-inf-filtros .zm-seg__op, .zm-inf-subnav .zm-seg__op{ justify-content:center; padding:6px 8px; }
  .zm-inf-subnav .zm-seg{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; }
  .zm-inf-quien{ justify-content:space-between; }
  .zm-inf-quien .zm-inf-select{ flex:1 1 auto; max-width:none; }
  .zm-inf-frase{ font-size:16px; }
  .zm-inf-sec{ padding:18px 16px; }
  .zm-inf-sec .zm-tarjeta__cabeza{ flex-direction:column; align-items:stretch; }
  .zm-inf-sec .zm-tarjeta__cabeza > div:first-child{ flex:0 0 auto; }
  .zm-inf-sec__acciones .zm-seg{ width:100%; }
}
@media (prefers-reduced-motion: reduce){
  .zm-inf-cols .zm-columnas__barra, .zm-inf-cols .zm-columnas__num, .zm-inf-barras .zm-avance > i, .zm-inf-fechas, .zm-inf-defs dl{ animation:none; }
  .zm-inf-cols .zm-columnas__barra, .zm-inf-cols .zm-columnas__num, .zm-inf-cuerpo, .zm-inf-defs > summary::before, .zm-inf-select{ transition:none; }
  .zm-inf-hueso{ animation:none; }
}
/* Compras (v342): en el teléfono la tarjeta de cada compra pone a lo ancho lo largo (qué compró,
   pago, agenda) y junta monto y fecha arriba; la de cada persona va en una columna (sus montos no
   caben de a dos); los orígenes se ven todos, sin deslizar. */
@media(max-width:640px){
  .zm-inf-compras .zm-barra-filtros .zm-seg{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; border-radius:18px; }
  .zm-inf-compras .zm-barra-filtros .zm-seg__op{ justify-content:center; padding:6px 8px; }
  .zm-inf-compras .zm-barra-filtros .zm-buscar{ flex:1 1 100%; max-width:none; }
  .zm-inf-compras .zm-inf-tabla td:not(:first-child) .zm-inf-celda{ align-items:flex-end; text-align:right; }
  .zm-inf-compras .zm-inf-tabla td .zm-estado{ white-space:normal; }
  .zm-inf-compras--detalle .zm-inf-tabla tbody tr:not(.fila-paginacion){ grid-template-areas:"pac pac" "que que" "mon fec" "tip pro" "pag pag" "age age"; }
  .zm-inf-compras--detalle .zm-inf-tabla td:nth-child(1){ grid-area:pac; }
  .zm-inf-compras--detalle .zm-inf-tabla td:nth-child(2){ grid-area:que; }
  .zm-inf-compras--detalle .zm-inf-tabla td:nth-child(3){ grid-area:tip; }
  .zm-inf-compras--detalle .zm-inf-tabla td:nth-child(4){ grid-area:pro; }
  .zm-inf-compras--detalle .zm-inf-tabla td:nth-child(5){ grid-area:pag; }
  .zm-inf-compras--detalle .zm-inf-tabla td:nth-child(6){ grid-area:age; }
  .zm-inf-compras--detalle .zm-inf-tabla td:nth-child(7){ grid-area:mon; }
  .zm-inf-compras--detalle .zm-inf-tabla td:nth-child(8){ grid-area:fec; }
  .zm-inf-compras--paciente .zm-inf-tabla tbody tr:not(.fila-paginacion){ grid-template-columns:minmax(0,1fr); }
}
/* ── fin zm · informes ── */
/* ── zm · informe-zairi ── */
/* «Lo que zairi hizo por tu clínica» (public/app.js · InformeZairi), la primera
   solapa de Informes. Hereda las piezas de «zm · informes» (secciones, barras,
   columnas, tablas, comparación) y agrega sólo lo suyo. Sólo tokens: el acento
   vive en la cifra clave y en el botón del PDF; «mejor/peor que el mercado» es un
   punto, nunca un fondo. Cada movimiento tiene su reposo en reduced-motion. */
.zm-zi .zm-inf-sec{ scroll-margin-top:96px; }
.zm-zi-hero{ display:grid; grid-template-columns:76px minmax(0,1fr); align-items:center; gap:14px 22px; margin:0 0 20px; }
.zm-zi-hero__orbe{ width:76px; height:76px; }
.zm-zi-hero__orbe .orb3d-wrap{ margin:0 !important; }
.zm-zi-frase{ margin:0; max-width:80ch; font-size:18px; line-height:1.55; letter-spacing:-.012em; }
.zm-zi-frase--espera{ color:var(--texto-3); }
.zm-zi-cifras{ grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:14px; }
.zm-zi .zm-cifra__sub{ display:flex; flex-direction:column; gap:3px; }
.zm-zi-contexto{ color:var(--texto-3); line-height:1.35; }
.zm-zi-indice{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 0 4px; padding:2px 0 4px; }
.zm-zi-indice::-webkit-scrollbar{ display:none; }
.zm-zi-indice .zm-chip{ flex:0 0 auto; }
.zm-zi-bloque, .zm-zi .zm-inf-rejilla--interior, .zm-zi-sep{ margin-top:22px; padding-top:18px; border-top:1px solid var(--linea); }
.zm-zi-bloque__cabeza{ display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; margin:0 0 14px; }
.zm-zi-bloque__cabeza .zm-inf-subtitulo{ margin:0; }
.zm-zi .zm-inf-rejilla--interior > div{ min-width:0; }
/* La tercera columna de las barras con ancho fijo: así todas las barras de un
   bloque parten y terminan en la misma línea aunque el detalle cambie de largo. */
.zm-zi .zm-inf-barras .zm-barras__fila{ grid-template-columns:minmax(0,1.25fr) minmax(0,2fr) 148px; }
.zm-zi .zm-inf-aviso .zm-estado{ align-items:flex-start; white-space:normal; line-height:1.45; }
.zm-zi .zm-inf-aviso .zm-estado::before{ margin-top:5px; }
.zm-zi-columna{ display:flex; flex-direction:column; min-width:0; }
.zm-zi-columna > .zm-inf-subtitulo:not(:first-child){ margin-top:26px; }
.zm-zi-bajada{ margin:-4px 0 14px; font-size:13px; line-height:1.5; color:var(--texto-2); max-width:78ch; }
.zm-zi-texto{ margin:0 0 14px; font-size:13.5px; line-height:1.55; color:var(--texto-2); }
.zm-zi-texto b, .zm-zi-texto-grande b{ color:var(--texto); font-weight:500; }
.zm-zi-texto-grande{ margin:0 0 4px; font-size:15.5px; }

/* Cuándo escriben: 24 columnas; lo oscuro es lo que llegó fuera de horario. */
.zm-zi-horas__barras{ display:grid; grid-template-columns:repeat(24,minmax(0,1fr)); gap:3px; height:120px; align-items:end; }
.zm-zi-horas__col{ display:flex; align-items:flex-end; height:100%; min-width:0; }
.zm-zi-horas__barra{ display:flex; flex-direction:column; width:100%; height:100%; border-radius:4px 4px 2px 2px; overflow:hidden;
  transform-origin:bottom center; transform:scaleY(var(--k,0)); transition:transform .5s var(--sal);
  animation:zm-inf-crece .6s var(--sal) backwards; animation-delay:calc(var(--i,0) * 16ms); }
.zm-zi-horas__barra > i{ display:block; flex-basis:0; min-height:0; }
.zm-zi-horas__fuera{ background:var(--texto); opacity:.82; }
.zm-zi-horas__dentro{ background:var(--texto-3); opacity:.4; }
.zm-zi-horas__eje{ position:relative; height:16px; margin-top:6px; font-size:11px; color:var(--texto-3); font-variant-numeric:tabular-nums; }
.zm-zi-horas__eje span{ position:absolute; left:calc(var(--h) * 100% / 24); }
.zm-zi-leyenda{ margin-top:8px; flex-wrap:wrap; }
.zm-zi-leyenda span[data-serie="1"]::before{ background:var(--texto-3); opacity:.4; }

/* Dos tasas lado a lado (con y sin recordatorio, con y sin cotización…). */
.zm-zi-par{ display:flex; flex-direction:column; gap:14px; }
.zm-zi-par__cabeza{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 6px; font-size:13px; color:var(--texto-2); }
.zm-zi-par__cabeza strong{ font-size:20px; font-weight:500; letter-spacing:-.02em; color:var(--texto); font-variant-numeric:tabular-nums; }
.zm-zi-par .zm-avance{ height:8px; }
.zm-zi-par .zm-avance > i{ animation:zm-inf-barra .6s var(--sal) backwards; }
.zm-zi-par small{ display:block; margin-top:6px; font-size:12px; color:var(--texto-3); }
.zm-zi .zm-inf-rejilla--interior .zm-inf-subtitulo + .zm-zi-par, .zm-zi .zm-cifras + .zm-inf-subtitulo{ margin-top:0; }
.zm-zi-cifras-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }

/* Derivación a una persona. */
.zm-zi-derivacion{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px 22px; }
.zm-zi-derivacion > strong{ font-size:34px; font-weight:500; letter-spacing:-.035em; line-height:1; color:var(--texto); font-variant-numeric:tabular-nums; }
.zm-zi-derivacion .zm-avance{ height:8px; }
.zm-zi-derivacion p{ margin:8px 0 0; font-size:13px; line-height:1.5; color:var(--texto-2); }

/* Ventas: el titular grande y los cuatro niveles. */
.zm-zi-titular{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 32px; margin:0 0 20px; }
.zm-zi-titular > div{ display:flex; flex-direction:column; gap:4px; }
.zm-zi-titular__eti{ font-size:12.5px; color:var(--texto-2); }
.zm-zi-titular strong{ font-size:40px; font-weight:500; letter-spacing:-.04em; line-height:1.05; color:var(--texto); font-variant-numeric:tabular-nums; }
.zm-zi-titular__pares{ display:grid; grid-template-rows:auto auto; grid-auto-flow:column; gap:2px 28px; margin:0; }
.zm-zi-titular__pares dt{ font-size:12px; color:var(--texto-3); }
.zm-zi-titular__pares dd{ margin:0; font-size:15px; color:var(--texto); font-variant-numeric:tabular-nums; white-space:nowrap; }
.zm-zi-niveles{ display:grid; gap:4px; margin:16px 0 0; padding-left:18px; font-size:12.5px; line-height:1.5; color:var(--texto-2); }
.zm-zi-niveles b{ font-weight:500; color:var(--texto); }

/* Persuasión: diálogos anonimizados. */
.zm-zi-dialogos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.zm-zi-dialogo{ display:flex; flex-direction:column; gap:10px; margin:0; padding:14px; border:1px solid var(--linea); border-radius:var(--r-chica); background:var(--solido); }
.zm-zi-dialogo blockquote{ margin:0; padding:10px 12px; border:0; font-size:13.5px; line-height:1.5; color:var(--texto); }
.zm-zi-dialogo blockquote > span{ display:block; margin:0 0 3px; font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-3); }
.zm-zi-dialogo__persona{ border-radius:14px 14px 14px 4px; background:var(--solido-2); }
.zm-zi-dialogo__zairi{ border-radius:14px 14px 4px 14px; box-shadow:inset 0 0 0 1px var(--linea); color:var(--texto-2); }
.zm-zi-dialogo__zairi > span.qz{ font-size:13px; letter-spacing:-.005em; text-transform:lowercase; color:var(--texto-2); }
.zm-zi-dialogo figcaption .zm-estado{ white-space:normal; }
.zm-zi-lectura{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-top:22px; padding:16px 18px; border-radius:var(--r-chica); background:var(--solido-2); }
.zm-zi-lectura .zm-inf-subtitulo{ margin:0; }
.zm-zi-lectura p{ margin:0; font-size:13.5px; line-height:1.55; color:var(--texto); white-space:pre-line; max-width:80ch; }
.zm-zi-lectura small{ font-size:12px; color:var(--texto-3); }

/* Campañas: el valor lleva un punto que dice si está mejor o peor que el mercado. */
.zm-zi-valor{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.zm-zi-valor::before{ content:''; flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:var(--texto-3); }
.zm-zi-valor[data-tono="ok"]::before{ background:var(--ok); }
.zm-zi-valor[data-tono="mal"]::before{ background:var(--danger); }
.zm-zi-leyenda-puntos{ display:inline-flex; align-items:center; gap:6px 16px; flex-wrap:wrap; }
.zm-zi-campana{ display:inline; font-weight:500; text-align:left; white-space:normal; }
.zm-zi-bench{ list-style:none; margin:0; padding:0; }
.zm-zi-bench li{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(96px,.7fr) minmax(96px,.7fr) minmax(0,1.1fr); align-items:center; gap:6px 18px; padding:12px 0; border-top:1px solid var(--linea); }
.zm-zi-bench li:first-child{ border-top:0; padding-top:0; }
.zm-zi-bench__nombre b{ display:block; font-size:14px; font-weight:500; color:var(--texto); }
.zm-zi-bench__nombre small{ display:block; margin-top:2px; font-size:12px; line-height:1.4; color:var(--texto-3); }
.zm-zi-bench__num span{ display:block; font-size:11.5px; color:var(--texto-3); }
.zm-zi-bench__num strong{ font-size:16px; font-weight:500; color:var(--texto); font-variant-numeric:tabular-nums; }
.zm-zi-bench__num small{ display:block; font-size:11px; color:var(--texto-3); }
.zm-zi-bench__veredicto{ display:flex; flex-direction:column; gap:3px; }
.zm-zi-bench__veredicto small{ padding-left:14px; font-size:12px; color:var(--texto-3); }
.zm-zi-fuente{ grid-column:1 / -1; font-size:11.5px; color:var(--texto-3); }
.zm-zi-fuente a, .zm-zi-fuentes a, .zm-zi-sup__fuente a{ color:var(--texto-2); text-decoration:underline; text-decoration-color:var(--linea); text-underline-offset:2px; transition:text-decoration-color .18s ease; }
@media (hover:hover) and (pointer:fine){ .zm-zi-fuente a:hover, .zm-zi-fuentes a:hover, .zm-zi-sup__fuente a:hover{ text-decoration-color:currentColor; } }

/* Lo que aún no se mide. */
.zm-zi-nomide{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px 28px; margin:0; padding:0; list-style:none; }
.zm-zi-nomide .zm-estado{ align-items:flex-start; white-space:normal; font-size:13.5px; line-height:1.4; color:var(--texto); }
.zm-zi-nomide .zm-estado::before{ margin-top:5px; }
.zm-zi-nomide p{ margin:4px 0 0 14px; font-size:12.5px; line-height:1.5; color:var(--texto-2); }

/* Supuestos: ventana tipo hoja (título fijo, cuerpo que se desplaza, pie con
   Guardar siempre a la vista); cada fila con su fuente y el valor a la derecha. */
.modal.zm-zi-sup{ display:flex; flex-direction:column; max-height:calc(100vh - 80px); max-height:calc(100dvh - 80px); padding:26px 0 0; overflow:hidden; }
.modal.zm-zi-sup > h2{ margin:0 0 8px; padding:0 64px 0 32px; }
.zm-zi-sup__scroll{ flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; padding:0 32px 20px; }
.zm-zi-sup__scroll > .zm-inf-modal__bajada{ margin:2px 0 16px; }
.modal.zm-zi-sup > .zm-pie-acciones{ position:static; flex:0 0 auto; margin:0; padding:14px 32px 16px; }
.zm-zi-sup__cuerpo .zm-seccion > h3{ margin-bottom:4px; }
.zm-zi-sup__fila{ display:grid; grid-template-columns:minmax(0,1fr) 250px; align-items:center; gap:8px 20px; padding:11px 0; border-top:1px solid var(--linea); }
.zm-zi-sup__fila:first-of-type{ border-top:0; }
.zm-zi-sup__texto{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:0; }
.zm-zi-sup__nombre{ font-size:14px; color:var(--texto); }
.zm-zi-sup__cubre, .zm-zi-sup__fuente{ font-size:12px; line-height:1.45; color:var(--texto-3); }
.zm-zi-sup__valor{ display:flex; align-items:center; gap:10px; margin:0; font-weight:400; }
.zm-zi-sup .zm-zi-sup__valor input{ flex:1 1 auto; width:100%; min-width:0; margin:0; text-align:right; font-variant-numeric:tabular-nums; }
.zm-zi-sup .zm-zi-sup__valor input:disabled{ color:var(--texto-2); cursor:default; }
.zm-zi-sup__valor > span{ flex:0 0 86px; font-size:12px; line-height:1.25; color:var(--texto-3); }
.zm-zi-sup__addons{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-top:12px; }
.zm-zi-sup .zm-inf-interruptor{ margin-top:4px; }

@media(max-width:980px){ .zm-zi-cifras{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:720px){
  .zm-zi-bench li{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .zm-zi-bench__nombre, .zm-zi-bench__veredicto{ grid-column:1 / -1; }
}
@media(max-width:640px){
  .zm-zi .zm-inf-barras .zm-barras__fila{ grid-template-columns:minmax(0,1fr) auto; }
  .zm-zi-hero{ grid-template-columns:52px minmax(0,1fr); gap:12px 14px; align-items:start; }
  .zm-zi-hero__orbe{ width:52px; height:52px; }
  .zm-zi-frase{ font-size:16px; }
  .zm-zi .zm-zi-cifras .zm-cifra__valor{ font-size:21px; }
  .zm-zi-cifras-2{ grid-template-columns:minmax(0,1fr); }
  .zm-zi-derivacion{ grid-template-columns:auto minmax(0,1fr); }
  .zm-zi-derivacion > .zm-inf-cmp{ grid-column:1 / -1; }
  .zm-zi-titular strong{ font-size:32px; }
  .zm-zi-titular__pares{ grid-template-columns:minmax(0,1fr) auto; grid-template-rows:none; grid-auto-flow:row; width:100%; gap:6px 16px; }
  .zm-zi-titular__pares dd{ text-align:right; }
  .zm-zi-horas__barras{ gap:2px; height:100px; }
  .zm-zi-sup__fila{ grid-template-columns:minmax(0,1fr); }
  .modal.zm-zi-sup{ max-height:calc(100vh - 92px); max-height:calc(100dvh - 92px); padding-top:20px; }
  .modal.zm-zi-sup > h2{ padding:0 64px 0 18px; }
  .zm-zi-sup__scroll{ padding:0 18px 16px; }
  .modal.zm-zi-sup > .zm-pie-acciones{ padding:12px 18px 14px; }
}
@media (prefers-reduced-motion: reduce){
  .zm-zi-horas__barra, .zm-zi-par .zm-avance > i{ animation:none; }
  .zm-zi-horas__barra, .zm-zi-fuente a, .zm-zi-fuentes a, .zm-zi-sup__fuente a{ transition:none; }
}
/* ── fin zm · informe-zairi ── */

/* ============================================================================
   v619 · base compartida (logos de canales)
   ============================================================================ */
.logo-canal{ display:inline-grid; place-items:center; flex:0 0 auto; border-radius:50%; box-shadow:0 0 0 1.5px var(--solido); overflow:hidden; }
.logo-canal--web{ background:var(--solido-2); color:var(--texto-2); }

/* ---------- Tramos por frente v619 (cada uno escribe sólo dentro del suyo) ---------- */
/* ── zm · agenda-cita ── */
/* Tarjetas de la agenda. Cada tarjeta es un contenedor: sus marcas (plan, reagendó,
   operativo) miden el ancho de SU tarjeta, no el de la pantalla. Así una columna
   angosta con seis profesionales muestra solo íconos, y una tarjeta ancha el texto
   completo. El nombre de la persona siempre manda. */
.cd-appt, .cal-appt{ container-type:inline-size; container-name:cita; }
.zm-cd-fila{ display:flex; align-items:center; gap:4px; line-height:1.15; min-width:0; }
.zm-cd-nombre{ flex:1 1 auto; min-width:2.4em; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.zm-cd-trat{ font-size:10.5px; opacity:.8; line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.zm-cita-marcas{ display:flex; align-items:center; gap:5px; min-width:0; flex:0 1 auto; overflow:hidden; color:var(--texto-2); }
.zm-cita-marcas--linea{ flex:0 0 auto; }
div.zm-cita-marcas{ margin-top:4px; }
/* Sin espacio, la marca es solo su glifo (sin cápsula): se lee como un ícono más
   de la tarjeta. Con espacio, se vuelve una cápsula serena con texto. */
.zm-cita-marca, .pill-reag.zm-cita-marca{
  display:inline-flex; align-items:center; gap:4px; flex:0 1 auto; min-width:0; max-width:100%;
  height:16px; padding:0; border-radius:999px; box-sizing:border-box;
  font-size:10px; font-weight:600; line-height:16px; letter-spacing:.005em; font-variant-numeric:tabular-nums;
  color:inherit; background:transparent; box-shadow:none;
  white-space:nowrap; overflow:hidden; text-decoration:none;
}
.zm-cita-marca__glifo{ position:relative; display:inline-flex; align-items:center; flex:none; padding-right:1px; }
.zm-cita-marca__icono{ display:inline-flex; }
/* El punto de estado del plan va como insignia sobre el ícono (tipo iOS). */
.zm-cita-marca__glifo .zm-estado{ position:absolute; top:0; right:-3px; gap:0; font-size:0; }
.zm-cita-marca__glifo .zm-estado::before{ width:6px; height:6px; box-shadow:0 0 0 1.5px var(--surface); }
.zm-cita-marca__corto, .zm-cita-marca__largo{ display:none; min-width:0; overflow:hidden; text-overflow:ellipsis; }

/* Tarjetas con fila propia de marcas (60 min o más) y la fila de la vista semanal. */
@container cita (min-width: 150px){
  .zm-cita-marcas:not(.zm-cita-marcas--linea) .zm-cita-marca{ padding:0 6px; background:var(--solido-2); box-shadow:inset 0 0 0 1px var(--linea); }
  .zm-cita-marcas:not(.zm-cita-marcas--linea) .zm-cita-marca__corto{ display:inline; }
  .zm-cita-marcas:not(.zm-cita-marcas--linea) .zm-cita-marca--plan .zm-cita-marca__icono{ display:none; }
  .zm-cita-marcas:not(.zm-cita-marcas--linea) .zm-cita-marca--plan .zm-cita-marca__glifo .zm-estado{ position:static; }
}
@container cita (min-width: 290px){
  .zm-cita-marcas:not(.zm-cita-marcas--linea) .zm-cita-marca__corto{ display:none; }
  .zm-cita-marcas:not(.zm-cita-marcas--linea) .zm-cita-marca__largo{ display:inline; }
}
/* Tarjetas cortas (30-45 min): las marcas comparten la fila del nombre, que manda.
   En la más angosta se esconden (siguen en la ficha flotante y en el detalle). */
@container cita (max-width: 129px){
  .zm-cita-marcas--linea{ display:none; }
}
@container cita (min-width: 340px){
  .zm-cita-marcas--linea .zm-cita-marca{ padding:0 6px; background:var(--solido-2); box-shadow:inset 0 0 0 1px var(--linea); }
  .zm-cita-marcas--linea .zm-cita-marca__corto{ display:inline; }
  .zm-cita-marcas--linea .zm-cita-marca--plan .zm-cita-marca__icono{ display:none; }
  .zm-cita-marcas--linea .zm-cita-marca--plan .zm-cita-marca__glifo .zm-estado{ position:static; }
}
@container cita (min-width: 480px){
  .zm-cita-marcas--linea .zm-cita-marca__corto{ display:none; }
  .zm-cita-marcas--linea .zm-cita-marca__largo{ display:inline; }
}
/* Ficha flotante y detalle: el plan dice todo, en línea que puede partirse. */
.zm-plan-agenda{ white-space:normal; align-items:baseline; line-height:1.4; font-size:inherit; color:inherit; }
.zm-plan-agenda::before{ align-self:center; }
.ficha-hover .fh-linea--marca{ display:flex; align-items:flex-start; gap:6px; font-weight:600; }
.ficha-hover .fh-linea--plan{ display:grid; gap:2px; }
.ficha-hover .fh-linea--plan .zm-plan-agenda{ color:var(--texto); }
/* Operativo en regiones: el fondo ámbar claro se leía blanco sobre blanco de noche. */
[data-theme="dark"] :is(.cd-appt, .cal-appt){ --zm-op-fondo:var(--solido-2); }
.ficha-hover .fh-linea--marca svg{ margin-top:1px; }
/* Detalle de la cita · el total en sus partes y la corrección de montos (v619).
   Jerarquía por tamaño y peso; el color solo en el punto de estado. */
.zm-montos-linea > span{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.zm-montos-linea small, .zm-montos__nombre small, .zm-montos__interruptor small, .zm-montos__historial li small{
  display:block; font-size:12px; font-weight:400; color:var(--texto-3); line-height:1.35; overflow-wrap:anywhere; }
.zm-montos-linea b{ font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap; }
.zm-montos-linea__aviso, .zm-montos__aviso{ margin:2px 0 6px; }
.zm-montos-linea__aviso .zm-estado, .zm-montos__aviso .zm-estado, .zm-montos__bajada .zm-estado{ white-space:normal; align-items:baseline; line-height:1.4; }
.zm-montos-linea__aviso .zm-estado::before, .zm-montos__aviso .zm-estado::before, .zm-montos__bajada .zm-estado::before{ transform:translateY(-1px); }
.zm-montos-pie{ display:flex; justify-content:flex-end; padding:2px 0 4px; }
.zm-montos-pie .btn svg{ margin-right:4px; }
.zm-montos-ok{ margin:4px 0 8px; font-size:13px; color:var(--texto-2); }
.zm-enlace{ appearance:none; border:0; background:none; padding:0; margin:0; font:inherit; color:var(--acento); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.zm-enlace:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; border-radius:4px; }
.zm-detalle-reag b{ display:inline-flex; align-items:flex-start; gap:6px; font-weight:500; text-align:right; }
.zm-detalle-reag b svg{ margin-top:2px; color:var(--texto-2); }

.zm-montos{ margin:8px 0 4px; padding:16px; border-radius:14px; background:var(--solido); box-shadow:inset 0 0 0 1px var(--linea), 0 8px 24px -18px var(--texto-3);
  animation:zm-montos-entra .22s var(--sal) both; }
@keyframes zm-montos-entra{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.zm-montos__titulo{ margin:0; font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--texto); }
.zm-montos__titulo:focus{ outline:none; }
.zm-montos__titulo:focus-visible{ outline:2px solid var(--acento); outline-offset:3px; border-radius:4px; }
.zm-montos__bajada{ margin:4px 0 12px; font-size:13px; color:var(--texto-2); line-height:1.4; }
.zm-montos__lineas{ display:flex; flex-direction:column; }
.zm-montos__fila{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--linea); min-width:0; }
.zm-montos__fila:first-child{ border-top:0; padding-top:0; }
.zm-montos__nombre{ flex:1 1 auto; min-width:0; font-size:14px; color:var(--texto); overflow-wrap:anywhere; }
.zm-montos__valor{ font-size:14px; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--texto); transition:opacity .18s ease; }
.zm-montos__valor--fuera{ opacity:.4; text-decoration:line-through; }
.zm-montos__peso{ display:inline-flex; align-items:center; gap:2px; flex:0 0 auto; height:40px; padding:0 10px; border-radius:10px;
  background:var(--solido-2); box-shadow:inset 0 0 0 1px transparent; color:var(--texto-2); font-variant-numeric:tabular-nums;
  transition:box-shadow .18s ease; }
.zm-montos__peso:focus-within{ box-shadow:inset 0 0 0 1.5px var(--acento); }
html .zm-montos__peso input, html[data-theme="dark"] .zm-montos__peso input,
html .zm-montos__peso input:focus, html[data-theme="dark"] .zm-montos__peso input:focus{
  width:9ch; min-width:0; min-height:0; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; outline:none;
  font:inherit; font-size:15px; color:var(--texto); text-align:right; }
.zm-montos__peso:has(input[aria-invalid="true"]){ box-shadow:inset 0 0 0 1.5px var(--danger); }
.zm-montos__fila--ajuste{ flex-wrap:wrap; }
.zm-montos__fila--ajuste .zm-montos__nombre{ flex:1 0 100%; }
.zm-montos__fila--ajuste .zm-seg{ flex:0 1 auto; }
.zm-montos__fila--ajuste .zm-montos__peso{ margin-left:auto; }
.zm-montos__interruptor{ display:flex; align-items:flex-start; gap:10px; min-height:44px; padding:6px 0 10px; font-size:14px; color:var(--texto); cursor:pointer; }
.zm-montos__interruptor input{ width:18px; height:18px; margin:2px 0 0; flex:none; accent-color:var(--acento); }
.zm-montos__nota{ margin:0 0 10px; font-size:12.5px; color:var(--texto-3); }
.zm-montos__resumen{ margin:6px 0 12px; padding-top:4px; border-top:1px solid var(--linea); }
.zm-montos__resumen > dt:first-of-type, .zm-montos__resumen > dd:first-of-type{ border-top:0; }
.zm-montos__resumen .zm-total{ font-size:15px; font-weight:600; color:var(--texto); }
.zm-montos__antes{ margin-right:8px; font-weight:400; font-size:13px; color:var(--texto-3); }
.zm-montos__error{ margin:0 0 10px; font-size:13px; color:var(--danger); }
.zm-montos__alerta{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 12px; padding:12px; border-radius:12px;
  background:var(--solido-2); }
.zm-montos__alerta p{ flex:1 1 260px; margin:0; font-size:13px; line-height:1.45; color:var(--texto); }
.zm-montos__motivo textarea{ min-height:64px; margin:0; resize:vertical; }
.zm-montos__historial{ margin:12px 0 0; font-size:13px; color:var(--texto-2); }
.zm-montos__historial summary{ display:inline-flex; align-items:center; gap:6px; min-height:32px; cursor:pointer; list-style:none; color:var(--texto-2); }
.zm-montos__historial summary::-webkit-details-marker{ display:none; }
.zm-montos__historial summary::after{ content:''; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform .18s ease; }
.zm-montos__historial[open] summary::after{ transform:rotate(225deg) translateY(-1px); }
.zm-montos__historial summary span{ font-variant-numeric:tabular-nums; color:var(--texto-3); }
.zm-montos__historial summary:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; border-radius:6px; }
.zm-montos__historial ol{ margin:4px 0 0; padding:0; list-style:none; }
.zm-montos__historial li{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:8px 0; border-top:1px solid var(--linea); }
.zm-montos__historial li > span{ min-width:0; color:var(--texto); overflow-wrap:anywhere; }
.zm-montos__historial li b{ font-weight:500; white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--texto-2); }
.zm-montos__acciones{ display:flex; justify-content:flex-end; gap:8px; margin-top:12px; flex-wrap:wrap; }
.zm-montos__acciones .btn{ transition:transform .14s ease; }
.zm-montos__acciones .btn:active:not(:disabled){ transform:scale(.97); }
.zm-montos-pista{ display:block; }
@media (max-width: 520px){
  .zm-montos{ padding:14px 12px; }
  .zm-montos__fila--precio{ flex-wrap:wrap; }
  .zm-montos__fila--precio .zm-montos__nombre{ flex-basis:100%; }
  .zm-montos__fila--precio .zm-montos__peso{ margin-left:auto; }
  .zm-montos__acciones .btn{ flex:1 1 auto; }
}
@media (prefers-reduced-motion: reduce){
  .zm-montos{ animation:none; }
  .zm-montos__valor, .zm-montos__peso, .zm-montos__historial summary::after, .zm-montos__acciones .btn{ transition:none; }
}
/* ── fin zm · agenda-cita ── */

/* ── zm · ficha ── */
/* v619 · FICHA DEL PACIENTE. Contenedores plegables para las listas largas
   (fichas, fotos, exámenes, órdenes, recetas, consentimientos, cotizaciones,
   movimientos, historial de citas, compras), el historial con QUIÉN y el
   origen bajo el nombre. Jerarquía por tamaño, peso y espacio; el color vive
   sólo en los puntos de estado y en los logos de los canales. */

/* ---------- Contenedor: título, cuenta, nota y cuerpo plegable ---------- */
.zm-cont{ --zm-cont-sangria:20px; min-width:0; padding:12px 0; }
.zm-cont + .zm-cont{ border-top:1px solid var(--linea); }
.zm-cont:first-child{ padding-top:2px; }
.zm-cont:last-child{ padding-bottom:0; }
.zm-cont__cabeza{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:2px 12px; }
.zm-cont__alternar{ all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:10px; justify-self:start; max-width:100%; min-height:40px;
  margin-left:-8px; padding:6px 10px 6px 8px; border-radius:12px; color:var(--texto); cursor:pointer;
  transition:background-color .18s ease, transform .14s var(--sal); }
.zm-cont__alternar:active{ transform:scale(.98); }
.zm-cont__alternar:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
.zm-cont__alternar--quieta{ margin-top:0; margin-bottom:0; cursor:default; font:inherit; }
.zm-cont__alternar--quieta .zm-cont__chevron{ visibility:hidden; }
.zm-cont__alternar--quieta:active{ transform:none; }
.zm-cont__chevron{ flex:0 0 auto; width:7px; height:7px; margin:0 1px 0 0; border-right:1.6px solid var(--texto-3); border-top:1.6px solid var(--texto-3);
  transform:rotate(45deg); transition:transform .18s var(--sal), border-color .18s ease; }
.zm-cont[data-desplegado="si"] .zm-cont__chevron{ transform:rotate(135deg); }
.zm-cont__titulo{ min-width:0; font-size:15px; font-weight:500; letter-spacing:-.012em; line-height:1.3; overflow-wrap:anywhere; }
.zm-cont__cuenta{ flex:0 0 auto; min-width:22px; padding:1px 7px; border-radius:999px; background:var(--solido-2); font-size:12px; line-height:18px; text-align:center;
  color:var(--texto-2); font-variant-numeric:tabular-nums; }
.zm-cont__acciones{ display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap; }
.zm-cont__acciones .btn{ white-space:nowrap; }
.zm-cont__nota{ grid-column:1 / -1; margin:0 0 0 var(--zm-cont-sangria); font-size:13px; line-height:1.45; color:var(--texto-2); }
.zm-cont__cuerpo{ padding:8px 0 0 var(--zm-cont-sangria); animation:zm-asoma .22s var(--sal) both; }
.zm-cont__ayuda{ margin:0 0 10px; max-width:78ch; font-size:13px; line-height:1.5; color:var(--texto-2); }
.zm-cont__ayuda b{ font-weight:500; color:var(--texto); }
.zm-cont__vacio{ margin:6px 0; font-size:13px; line-height:1.5; color:var(--texto-2); }
@media (hover:hover) and (pointer:fine){
  .zm-cont__alternar:not(.zm-cont__alternar--quieta):hover{ background:var(--solido-2); }
  .zm-cont__alternar:hover .zm-cont__chevron{ border-color:var(--texto); }
}
/* Herramientas del contenedor (subir foto, subir examen): una sola fila que se dobla. */
.zm-cont__herramientas{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:2px 0 12px; }
html .zm-cont__herramientas input, html .zm-cont__herramientas select,
html[data-theme="dark"] .zm-cont__herramientas input, html[data-theme="dark"] .zm-cont__herramientas select{ margin:0; min-width:0; }
.zm-cont__herramientas input:not([type="file"]){ flex:1 1 180px; }
.zm-cont__herramientas select{ flex:0 0 auto; width:auto; max-width:140px; }

/* Listas dentro de un contenedor: planas, alineadas con el título, con hairline. */
.zm-cont .zm-lista{ background:transparent; border:0; border-radius:0; padding:0; }
.zm-cont .zm-lista .zm-fila{ width:calc(100% + 20px); margin:0 -10px; padding:12px 10px; }
.zm-cont .zm-lista .zm-fila + .zm-fila::before{ left:10px; right:10px; }
.zm-cont .lista-paginacion{ justify-content:flex-end; }

/* ---------- Fila que no abre nada: principal, meta y acciones ---------- */
.zm-ffila{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:6px 16px; padding:11px 0; }
.coleccion-paginada > .zm-ffila + .zm-ffila, .zm-mov + .zm-mov{ border-top:1px solid var(--linea); }
.zm-ffila__principal{ min-width:0; }
.zm-ffila__titulo{ display:flex; align-items:center; gap:10px; min-width:0; font-size:14.5px; font-weight:500; letter-spacing:-.01em; line-height:1.35; color:var(--texto); overflow-wrap:anywhere; }
.zm-ffila__sub{ margin-top:2px; font-size:12.5px; line-height:1.4; color:var(--texto-2); overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.zm-ffila__meta{ display:flex; align-items:center; justify-content:flex-end; gap:14px; white-space:nowrap; }
.zm-ffila__acciones{ display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap; }
.zm-ffila--tachada .zm-ffila__principal{ opacity:.62; }
.zm-ffila--tachada .zm-ffila__titulo{ text-decoration:line-through; text-decoration-color:var(--texto-3); }
.zm-ffila__miniatura{ display:inline-grid; place-items:center; flex:0 0 auto; width:36px; height:36px; border-radius:10px; overflow:hidden;
  background:var(--solido-2); font-size:10.5px; font-weight:600; letter-spacing:.04em; color:var(--texto-2); }
.zm-ffila__miniatura img{ display:block; width:100%; height:100%; object-fit:cover; }

/* ---------- Movimientos de dinero ---------- */
.zm-mov__monto{ min-width:84px; font-size:14.5px; font-weight:500; text-align:right; color:var(--texto); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.zm-ffila--tachada .zm-mov__monto{ text-decoration:line-through; color:var(--texto-3); }
.zm-mov__nota{ margin:-4px 0 10px; font-size:12px; line-height:1.45; color:var(--texto-3); }
.zm-mov__editar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 12px; padding:10px 12px; border-radius:var(--r-chica); background:var(--solido-2);
  font-size:13px; color:var(--texto-2); animation:zm-asoma .18s var(--sal) both; }
html .zm-mov__editar input, html .zm-mov__editar select, html[data-theme="dark"] .zm-mov__editar input, html[data-theme="dark"] .zm-mov__editar select{ margin:0; width:auto; max-width:100%; }
.zm-mov__editar input[inputmode="numeric"]{ width:120px; }

/* ---------- Fotos: cuadrícula de miniaturas ---------- */
.zm-fotos > .coleccion-paginada{ display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:10px; }
.zm-fotos > .coleccion-paginada > .lista-paginacion{ grid-column:1 / -1; }
.zm-foto{ position:relative; margin:0; min-width:0; border-radius:var(--r-chica); overflow:hidden; background:var(--solido-2); }
.zm-foto__ver{ all:unset; box-sizing:border-box; display:block; width:100%; aspect-ratio:1 / 1; overflow:hidden; cursor:zoom-in; }
.zm-foto__ver img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .22s var(--sal); }
.zm-foto__ver:focus-visible{ outline:2px solid var(--acento); outline-offset:-2px; border-radius:var(--r-chica); }
.zm-foto figcaption{ display:flex; flex-direction:column; gap:1px; padding:7px 9px 9px; min-width:0; }
.zm-foto__tipo{ font-size:12.5px; font-weight:500; color:var(--texto); }
.zm-foto__nota{ font-size:11.5px; color:var(--texto-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-foto__quitar{ all:unset; box-sizing:border-box; position:absolute; top:6px; right:6px; display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
  background:color-mix(in srgb,var(--solido) 82%,transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:var(--texto); cursor:pointer;
  opacity:0; transform:scale(.92); transition:opacity .18s ease, transform .18s var(--sal); }
.zm-foto__quitar:focus-visible{ opacity:1; transform:none; outline:2px solid var(--acento); outline-offset:1px; }
.zm-foto:focus-within .zm-foto__quitar{ opacity:1; transform:none; }
@media (hover:hover) and (pointer:fine){
  .zm-foto:hover .zm-foto__quitar{ opacity:1; transform:none; }
  .zm-foto:hover .zm-foto__ver img{ transform:scale(1.03); }
}
@media (hover:none){ .zm-foto__quitar{ opacity:1; transform:none; } }

/* ---------- Una atención de la ficha clínica ---------- */
.zm-at{ position:relative; }
.zm-at + .zm-at::before{ content:''; position:absolute; left:0; right:0; top:0; height:1px; background:var(--linea); opacity:.7; }
.zm-at__fila .zm-fila__meta{ gap:10px; }
.zm-at__plan{ max-width:220px; padding:2px 9px; border-radius:999px; background:var(--solido-2); font-size:12px; color:var(--texto-2); overflow:hidden; text-overflow:ellipsis; }
.zm-at__fila[aria-expanded="true"] .zm-fila__chevron, .zm-hcita__fila[aria-expanded="true"] .zm-fila__chevron{ transform:rotate(135deg); }
@media (hover:hover) and (pointer:fine){
  .zm-at__fila[aria-expanded="true"]:hover .zm-fila__chevron, .zm-hcita__fila[aria-expanded="true"]:hover .zm-fila__chevron{ transform:translateY(2px) rotate(135deg); }
}
.zm-at--anulada .zm-fila__principal{ opacity:.7; }
.zm-at__cuerpo{ padding:4px 0 18px; animation:zm-asoma .22s var(--sal) both; }
.zm-at__acciones{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:0 0 14px; }
.zm-at__cuerpo > .fc-resumen{ margin:0 0 14px; font-size:13.5px; line-height:1.5; }
.zm-at__cuerpo > .fc-resumen > p{ margin:0 0 6px; }
.zm-at__cuerpo > .fc-resumen > p.muted:last-child{ margin:0; font-size:12.5px; color:var(--texto-3); }
.zm-at__anulada{ font-size:12.5px; color:var(--texto-2); }
.zm-at__campos{ display:grid; grid-template-columns:minmax(120px,170px) minmax(0,1fr); gap:8px 18px; margin:0; }
.zm-at__campo{ display:contents; }
.zm-at__campo dt{ font-size:12.5px; line-height:1.5; color:var(--texto-2); }
.zm-at__campo dd{ margin:0; font-size:14px; line-height:1.5; color:var(--texto); overflow-wrap:anywhere; }
.zm-at__bloque{ margin-top:16px; }
.zm-at__bloque h5, .zm-hcitas__sueltos h5{ margin:0 0 6px; font-size:11.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-3); }
.zm-at__marcas{ list-style:none; margin:0; padding:0; }
.zm-at__marcas li{ display:flex; align-items:flex-start; gap:8px; padding:3px 0; font-size:13.5px; line-height:1.45; color:var(--texto); }
.zm-at__marcas li > svg{ margin-top:3px; color:var(--texto-3); }
.zm-at__marcas li[data-hecho="si"] > svg{ color:var(--ok); }
.zm-at__marcas li[data-hecho="si"] > span{ color:var(--texto-2); }
.zm-at__detalle{ display:block; margin-top:2px; color:var(--texto-2); white-space:pre-wrap; }
.zm-at__adendas{ padding-left:12px; border-left:2px solid var(--linea); }
.zm-at__adendas p{ margin:6px 0 0; font-size:13.5px; line-height:1.45; }
.zm-at__adendas b{ font-weight:500; }

/* ---------- Historial de citas: quién, en una línea de tiempo ---------- */
.zm-hcitas__ayuda{ margin:0 0 12px; max-width:70ch; font-size:13px; line-height:1.5; color:var(--texto-2); }
.zm-hcitas__filtros{ margin:0 0 6px; }
.zm-hcita{ position:relative; }
.zm-hcita + .zm-hcita::before{ content:''; position:absolute; left:0; right:0; top:0; height:1px; background:var(--linea); opacity:.7; }
.zm-hcita__fila .zm-fila__sub.zm-hcita__quien{ display:flex; flex-wrap:wrap; gap:3px 16px; margin-top:5px; white-space:normal; overflow:visible; color:var(--texto-3); }
.zm-hcita__quien > span{ display:inline; min-width:0; }
/* Quién: texto que fluye (se dobla como una frase); el logo del canal va en línea. */
.zm-quien{ display:inline; color:var(--texto-2); }
.zm-quien .logo-canal{ box-shadow:none; margin:0 5px 0 1px; vertical-align:-3px; }
.zm-quien--sin{ color:var(--texto-3); }
.zm-hcita__detalle{ padding:2px 0 16px; animation:zm-asoma .22s var(--sal) both; }
.zm-linea{ position:relative; list-style:none; margin:0; padding:0 0 0 22px; }
.zm-linea::before{ content:''; position:absolute; left:4px; top:12px; bottom:12px; width:1px; background:var(--linea); }
.zm-linea__paso{ position:relative; padding:6px 0; }
.zm-linea__paso::before{ content:''; position:absolute; left:-22px; top:11px; width:9px; height:9px; border-radius:50%; background:var(--texto-2); box-shadow:0 0 0 3px var(--solido); }
.zm-linea__paso[data-registro="cita"]::before, .zm-linea__paso[data-registro="bitacora"]::before{ background:var(--solido); box-shadow:inset 0 0 0 1.5px var(--texto-3), 0 0 0 3px var(--solido); }
.zm-linea__paso[data-registro="sin_registro"]::before{ background:var(--solido); box-shadow:inset 0 0 0 1.5px var(--linea), 0 0 0 3px var(--solido); }
.zm-linea__texto{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 6px; font-size:13.5px; line-height:1.45; color:var(--texto); }
.zm-linea__texto b{ font-weight:500; }
.zm-linea__texto .zm-quien{ color:var(--texto); }
.zm-linea__paso[data-registro="sin_registro"] .zm-linea__texto .zm-quien{ color:var(--texto-3); }
.zm-linea__cuando{ display:block; margin-top:1px; font-size:12.5px; line-height:1.45; color:var(--texto-2); font-variant-numeric:tabular-nums; }
.zm-hcita__pie{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:8px; padding-left:22px; }
.zm-hcita__prof{ font-size:12.5px; color:var(--texto-2); }
.zm-hcitas__sueltos{ margin-top:18px; }

/* ---------- De dónde viene la persona (cabecera) ---------- */
.zm-origen{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-top:9px; font-size:13px; line-height:1.5; color:var(--texto-2);
  animation:zm-funde .22s ease both; }
.zm-origen__etiqueta{ flex:0 0 auto; font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-3); }
.zm-origen__linea{ display:inline-flex; align-items:flex-start; gap:8px; min-width:0; flex:1 1 260px; }
.zm-origen__ico{ display:inline-grid; place-items:center; flex:0 0 auto; width:18px; height:18px; margin-top:1px; color:var(--texto-2); }
.zm-origen__ico .logo-canal{ box-shadow:none; }
.zm-origen__texto{ min-width:0; overflow-wrap:anywhere; }
.zm-origen__parte + .zm-origen__parte::before{ content:'·'; margin:0 6px; color:var(--texto-3); }
.zm-origen__parte:first-child{ color:var(--texto); font-weight:500; }
.zm-origen__parte--campana{ color:var(--texto); }
.zm-origen__motivo{ flex:1 1 100%; font-size:12px; color:var(--texto-3); }

/* ---------- Próximas citas, packs y avisos de la gestión ---------- */
.zm-proximas{ margin:0 0 14px; }
.zm-proximas .zm-lista__titulo .btn{ text-transform:none; letter-spacing:0; }
.zm-packs{ margin:0 0 16px; }
.zm-packs > .zm-lista__titulo{ padding:0 0 6px; }
.zm-pack{ padding:10px 0; }
.zm-pack + .zm-pack{ border-top:1px solid var(--linea); }
.zm-pack__linea{ display:flex; align-items:center; justify-content:space-between; gap:6px 14px; flex-wrap:wrap; margin:0 0 8px; font-size:14px; color:var(--texto); }
.zm-pack__linea b{ font-weight:500; }
.zm-pack__linea .zm-estado{ white-space:normal; }
.zm-aviso-ficha{ display:flex; align-items:flex-start; gap:10px; margin:0 0 12px; padding:12px 14px; border-radius:var(--r-chica); background:var(--solido-2);
  font-size:13px; line-height:1.5; color:var(--texto-2); }
.zm-aviso-ficha > svg{ margin-top:2px; color:var(--texto); }
.zm-aviso-ficha b{ margin-right:4px; font-weight:500; color:var(--texto); }

/* ---------- Teléfono (≤ 640 px) ---------- */
@media(max-width:640px){
  .zm-cont{ --zm-cont-sangria:0px; }
  .zm-cont__cabeza{ grid-template-columns:minmax(0,1fr); }
  .zm-cont__acciones{ justify-content:flex-start; }
  .zm-cont .zm-lista .zm-fila{ width:calc(100% + 16px); margin:0 -8px; padding:12px 8px; }
  .zm-cont .zm-lista .zm-fila__titulo{ white-space:normal; }
  .zm-ffila{ grid-template-columns:minmax(0,1fr); gap:8px; }
  .zm-ffila__meta, .zm-ffila__acciones{ justify-content:flex-start; }
  .zm-ffila__meta{ flex-wrap:wrap; }
  .zm-mov__monto{ min-width:0; text-align:left; }
  .zm-at__campos{ grid-template-columns:minmax(0,1fr); gap:2px; }
  .zm-at__campo dd{ margin-bottom:8px; }
  .zm-at__plan{ max-width:100%; }
  .zm-fotos > .coleccion-paginada{ grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:8px; }
  .zm-hcita__pie{ padding-left:0; }
  .zm-origen__linea{ flex-basis:100%; }
}

/* ---------- Reposo ---------- */
@media (prefers-reduced-motion: reduce){
  .zm-cont__cuerpo, .zm-at__cuerpo, .zm-hcita__detalle, .zm-mov__editar, .zm-origen{ animation:zm-funde .18s ease both; }
  .zm-cont__alternar, .zm-cont__chevron, .zm-foto__ver img, .zm-foto__quitar{ transition:none; }
  .zm-cont__alternar:active{ transform:none; }
  .zm-foto:hover .zm-foto__ver img{ transform:none; }
}
/* ── fin zm · ficha ── */

/* ── zm · mensajes ── */
/* v619 · Mensajes sereno: la conversación grande (lista y chat amplios en el
   escritorio; en el teléfono la lista y, al abrir, el chat a pantalla completa),
   Contacto humano y Reagendamiento fijos, un solo filtro, «En qué etapa van»
   como barra de pasos y el logo oficial de cada red en el círculo. Solo tokens;
   cada movimiento con su reposo en prefers-reduced-motion. */
.zm-msj .zm-cabeza{ margin-bottom:14px; }
.zm-msj .zm-solapas{ margin-bottom:16px; }
.zm-msj .logo-canal{ box-shadow:none; }

/* Barra: buscador, bandejas fijas y filtros. */
.zm-msj-barra{ gap:10px; margin-bottom:12px; }
.zm-msj-barra .zm-seg{ flex:0 1 auto; min-width:0; }
.zm-msj-barra .zm-seg__op{ gap:6px; }
.zm-msj-barra .zm-seg__op svg{ color:var(--texto-3); }
.zm-msj-barra .zm-seg__op[aria-pressed="true"] svg{ color:var(--texto); }
.zm-msj-busca{ position:relative; flex:1 1 200px; max-width:420px; min-width:0; }
.zm-msj-busca .zm-buscar{ max-width:none; }
.zm-msj-busca input{ text-overflow:ellipsis; }
.zm-msj-resultados{ position:absolute; z-index:30; left:0; right:0; top:calc(100% + 6px); max-height:420px; overflow:auto; padding:6px;
  background:var(--solido); border:1px solid var(--linea); border-radius:var(--r-chica); box-shadow:var(--pz-sombra); animation:zm-llega .18s var(--sal) both; }
.zm-msj-resultado{ all:unset; box-sizing:border-box; display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border-radius:10px; cursor:pointer; transition:background-color .18s ease; }
.zm-msj-resultado:hover, .zm-msj-resultado:focus-visible{ background:var(--solido-2); }
.zm-msj-resultado:focus-visible{ outline:2px solid var(--acento); outline-offset:-2px; }
.zm-msj-resultado__texto{ display:flex; flex-direction:column; min-width:0; }
.zm-msj-resultado__texto b{ font-size:14px; font-weight:500; color:var(--texto); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-msj-resultado__texto span{ font-size:12.5px; color:var(--texto-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.zm-msj-filtros{ position:relative; flex:0 0 auto; }
.zm-msj-filtros__boton{ all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:0 15px;
  border-radius:999px; border:1px solid var(--linea); background:var(--solido); color:var(--texto); font-size:13.5px; cursor:pointer;
  transition:background-color .18s ease, transform .14s var(--sal); }
.zm-msj-filtros__boton:active{ transform:scale(.97); }
.zm-msj-filtros__boton:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
.zm-msj-filtros__boton[aria-expanded="true"]{ background:var(--solido-2); }
.zm-msj-filtros__n{ display:inline-grid; place-items:center; min-width:19px; height:19px; padding:0 5px; box-sizing:border-box; border-radius:999px;
  background:var(--texto); color:var(--fondo); font-size:11.5px; font-variant-numeric:tabular-nums; }
.zm-msj-filtros__hoja{ position:absolute; right:0; top:calc(100% + 8px); z-index:31; width:min(380px, calc(100vw - 32px)); box-sizing:border-box;
  display:flex; flex-direction:column; gap:16px; padding:16px; background:var(--solido); border:1px solid var(--linea);
  border-radius:var(--r-tarjeta); box-shadow:var(--pz-sombra); transform-origin:top right; animation:zm-llega .2s var(--sal) both; }
.zm-msj-filtros__titulo{ display:block; margin:0 0 8px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--texto-3); }
.zm-msj-filtros__pie{ display:flex; justify-content:space-between; gap:8px; padding-top:12px; border-top:1px solid var(--linea); }
.zm-msj-filtros__hoja .zm-chip .zm-seg__cuenta{ margin-left:2px; }
.zm-msj-filtros__hoja .zm-chip[aria-pressed="true"] .zm-seg__cuenta{ color:inherit; opacity:.7; }

.zm-msj-activos{ display:flex; flex-wrap:wrap; gap:6px; margin:-2px 0 12px; }
.zm-msj-activo{ all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:4px 10px 4px 12px;
  border-radius:999px; background:var(--solido-2); color:var(--texto); font-size:12.5px; cursor:pointer;
  transition:transform .14s var(--sal); animation:zm-asoma .18s var(--sal) both; }
.zm-msj-activo svg{ color:var(--texto-3); }
.zm-msj-activo:active{ transform:scale(.96); }
.zm-msj-activo:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }

/* «En qué etapa van»: pasos serenos, el color vive solo en el punto. */
.zm-msj-etapas{ margin:0 0 16px; }
.zm-msj-etapas__cabeza{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 8px; padding:0 4px; }
.zm-msj-etapas__titulo{ flex:0 0 auto; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--texto-3); white-space:nowrap; }
.zm-msj-etapas__total{ font-size:12.5px; color:var(--texto-3); font-variant-numeric:tabular-nums; }
.zm-msj-etapas__lado{ display:inline-flex; align-items:baseline; flex-wrap:wrap; justify-content:flex-end; gap:4px 16px; }
.zm-msj-enlace{ all:unset; cursor:pointer; font-size:12.5px; color:var(--acento); border-radius:6px; }
.zm-msj-enlace:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
@media (hover:hover) and (pointer:fine){ .zm-msj-enlace:hover{ text-decoration:underline; text-underline-offset:3px; } }
.zm-msj-etapas__pasos{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(max-content,1fr); gap:2px; padding:3px;
  background:var(--solido-2); border-radius:18px; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity; }
.zm-msj-etapas__pasos::-webkit-scrollbar{ display:none; }
.zm-msj-paso{ all:unset; box-sizing:border-box; position:relative; display:flex; flex-direction:column; gap:7px; min-width:132px; padding:10px 14px 12px;
  border-radius:15px; cursor:pointer; scroll-snap-align:start; transition:background-color .18s ease, box-shadow .18s ease, transform .14s var(--sal); }
.zm-msj-paso .zm-estado{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.zm-msj-paso__cifra{ display:flex; align-items:baseline; gap:6px; font-size:22px; font-weight:500; letter-spacing:-.03em; line-height:1.05;
  color:var(--texto); font-variant-numeric:tabular-nums; }
.zm-msj-paso__cifra small{ font-size:12px; font-weight:400; letter-spacing:0; color:var(--texto-3); }
.zm-msj-paso .zm-avance{ height:3px; background:var(--linea); }
.zm-msj-paso[aria-pressed="true"]{ background:var(--solido); box-shadow:var(--pz-sombra); }
.zm-msj-paso[aria-pressed="true"] .zm-estado{ color:var(--texto); }
.zm-msj-paso[aria-pressed="true"] .zm-avance > i{ background:var(--acento); opacity:1; }
.zm-msj-paso:active{ transform:scale(.98); }
.zm-msj-paso:focus-visible{ outline:2px solid var(--acento); outline-offset:-2px; }
.zm-msj-paso--aparte{ margin-left:9px; }
.zm-msj-paso--aparte::before{ content:''; position:absolute; left:-6px; top:14px; bottom:14px; width:1px; background:var(--linea); }
.zm-msj-paso--aparte + .zm-msj-paso--aparte{ margin-left:0; }
.zm-msj-paso--aparte + .zm-msj-paso--aparte::before{ display:none; }
@media (hover:hover) and (pointer:fine){ .zm-msj-paso:not([aria-pressed="true"]):hover{ background:color-mix(in srgb, var(--solido) 55%, transparent); } }

/* El panel: lista y conversación, grandes. */
.zm-msj-panel{ display:grid; grid-template-columns:minmax(320px,400px) minmax(0,1fr); height:calc(100vh - 100px); height:calc(100dvh - 100px);
  min-height:560px; max-height:1100px; scroll-margin-top:84px; background:var(--solido); border:1px solid var(--linea); border-radius:var(--r-tarjeta); overflow:hidden; }
.zm-msj-lista{ display:flex; flex-direction:column; min-width:0; min-height:0; border-right:1px solid var(--linea); }
.zm-msj-lista__cabeza{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px 10px; border-bottom:1px solid var(--linea);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--texto-3); font-variant-numeric:tabular-nums; }
.zm-msj-filas{ list-style:none; margin:0; padding:6px; flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.zm-msj-fila{ position:relative; display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; align-items:start; padding:12px;
  border-radius:var(--r-chica); transition:background-color .18s ease; }
.zm-msj-fila + .zm-msj-fila::before{ content:''; position:absolute; left:68px; right:12px; top:0; height:1px; background:var(--linea); opacity:.7; transition:opacity .18s ease; }
.zm-msj-fila__abrir{ all:unset; position:absolute; inset:0; z-index:1; border-radius:inherit; cursor:pointer; }
.zm-msj-fila__abrir:focus-visible{ outline:2px solid var(--acento); outline-offset:-2px; }
.zm-msj-fila.is-sel{ background:var(--solido-2); }
.zm-msj-fila.is-sel::before, .zm-msj-fila.is-sel + .zm-msj-fila::before{ opacity:0; }
@media (hover:hover) and (pointer:fine){
  .zm-msj-fila:hover{ background:var(--solido-2); }
  .zm-msj-fila:hover::before, .zm-msj-fila:hover + .zm-msj-fila::before{ opacity:0; }
}
.zm-msj-fila .logo-canal{ margin-top:1px; }
.zm-msj-fila__cuerpo{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.zm-msj-fila__l1{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.zm-msj-fila__nombre{ min-width:0; font-size:15px; font-weight:500; letter-spacing:-.01em; line-height:1.3; color:var(--texto); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-msj-ig{ position:relative; z-index:2; color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.zm-msj-ig:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; border-radius:4px; }
.zm-msj-fila__hora{ flex:0 0 auto; font-size:12px; color:var(--texto-3); font-variant-numeric:tabular-nums; }
.zm-msj-fila.is-espera .zm-msj-fila__hora{ color:var(--acento); }
.zm-msj-fila__l2{ display:flex; align-items:center; gap:10px; }
.zm-msj-fila__previa{ flex:1; display:flex; align-items:center; gap:4px; min-width:0; font-size:13.5px; line-height:1.35; color:var(--texto-2); }
.zm-msj-fila__previa > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-msj-fila__previa svg{ color:var(--texto-3); }
.zm-msj-fila.is-espera .zm-msj-fila__previa{ color:var(--texto); }
.zm-msj-punto{ flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:var(--acento); }
.zm-msj-fila__l3{ display:flex; align-items:center; flex-wrap:wrap; gap:3px 12px; min-width:0; margin-top:2px; }
.zm-msj-fila__l3 .zm-estado{ font-size:12px; }
.zm-msj-marca{ display:inline-flex; align-items:center; gap:5px; max-width:100%; font-size:12px; color:var(--texto-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.zm-msj-marca svg{ color:var(--texto-3); }
.zm-msj-marca--humano{ color:var(--texto); }
.zm-msj-marca--humano svg{ color:var(--texto-2); }
.zm-msj-reag{ display:inline-flex; align-items:center; gap:5px; min-width:0; max-width:100%; font-size:12px; color:var(--texto-2); }
.zm-msj-reag > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-msj-reag svg{ color:var(--texto-3); }
.zm-msj-reag[data-estado="solicitado"], .zm-msj-reag[data-estado="sin_cupo"]{ color:var(--texto); }
.zm-msj-mas{ display:flex; justify-content:center; padding:10px 0 14px; }
.zm-msj-nota{ margin:0; padding:18px 16px; font-size:13.5px; line-height:1.5; color:var(--texto-2); list-style:none; }

/* La conversación. */
.zm-msj-chat{ display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--solido); }
.zm-msj-chat__vacio{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:8px; padding:min(22vh,180px) 32px 32px; text-align:center; color:var(--texto-3); }
.zm-msj-chat__vacio strong{ margin-top:4px; font-size:16px; font-weight:500; color:var(--texto); }
.zm-msj-chat__vacio p{ margin:0; max-width:40ch; font-size:13.5px; line-height:1.5; color:var(--texto-2); }
.zm-msj-cab{ display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--linea); }
.zm-msj-icono.zm-msj-cab__volver{ display:none; }
/* Con un chat abierto, el orbe de ayuda no se posa sobre la caja de escribir. */
body:has(.zm-msj-panel.chat-open) .help-orb{ opacity:0; transform:scale(.9); pointer-events:none; }
.zm-msj-cab__info{ flex:1; min-width:0; }
.zm-msj-cab__nombre{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; font-size:17px; font-weight:500; letter-spacing:-.02em; line-height:1.25; color:var(--texto); }
.zm-msj-cab__persona{ min-width:0; }
.zm-msj-cab__nombre .btn.gold.sm{ min-height:28px; padding:3px 11px; font-size:12px; letter-spacing:0; }
.zm-msj-cab__sub{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 12px; margin-top:4px; font-size:12.5px; color:var(--texto-2); }
.zm-msj-cab__acciones{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.zm-msj-icono{ all:unset; box-sizing:border-box; display:inline-grid; place-items:center; flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  color:var(--texto-2); cursor:pointer; transition:background-color .18s ease, color .18s ease, transform .14s var(--sal); }
.zm-msj-icono:active{ transform:scale(.94); }
.zm-msj-icono:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
.zm-msj-icono:disabled{ opacity:.4; cursor:default; }
@media (hover:hover) and (pointer:fine){ .zm-msj-icono:not(:disabled):hover{ background:var(--solido-2); color:var(--texto); } }
.zm-msj-icono.grabando{ color:var(--danger); background:color-mix(in srgb, var(--danger) 12%, transparent); animation:zm-msj-late 1.3s ease-in-out infinite; }
@keyframes zm-msj-late{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }

/* La etapa se lee como un punto y se cambia con el selector nativo encima. */
.zm-msj-etapa{ position:relative; display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:2px 10px; border-radius:999px;
  background:var(--solido-2); cursor:pointer; transition:background-color .18s ease; }
.zm-msj-etapa .zm-estado{ color:var(--texto); }
.zm-msj-etapa__flecha{ width:6px; height:6px; margin:-3px 0 0 1px; border-right:1.5px solid var(--texto-3); border-bottom:1.5px solid var(--texto-3); transform:rotate(45deg); }
html .zm-msj-etapa select, html[data-theme="dark"] .zm-msj-etapa select{ position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; opacity:0; cursor:pointer; font-size:16px; }
.zm-msj-etapa:focus-within{ outline:2px solid var(--acento); outline-offset:1px; }

.zm-msj-avisos{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px; min-height:40px; box-sizing:border-box; padding:6px 18px; border-bottom:1px solid var(--linea); font-size:12.5px; color:var(--texto-2); }
.zm-msj-avisos__vivo{ margin-left:auto; font-size:11.5px; color:var(--texto-3); }
.zm-msj-etiq{ all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:5px; padding:3px 9px; margin-left:-9px; border-radius:999px; color:var(--texto-2); cursor:pointer; transition:background-color .18s ease, color .18s ease; }
.zm-msj-reag + .zm-msj-etiq{ margin-left:0; }
.zm-msj-etiq:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
@media (hover:hover) and (pointer:fine){ .zm-msj-etiq:hover{ background:var(--solido-2); color:var(--texto); } }
.zm-msj-etiq-edita{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:6px; }
html .zm-msj-etiq-edita input, html[data-theme="dark"] .zm-msj-etiq-edita input{ width:240px; max-width:100%; min-height:32px; margin:0; padding:4px 12px; border-radius:999px; font-size:13px; }

.zm-msj-hilo{ flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; padding:18px clamp(16px,3vw,40px) 22px;
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.zm-msj-antes{ display:flex; justify-content:center; margin-bottom:4px; }
.zm-msj-dia{ align-self:center; margin:14px 0 4px; font-size:11.5px; font-weight:500; color:var(--texto-3); }
.zm-msj-dia span{ display:inline-block; }
.zm-msj-dia span::first-letter{ text-transform:uppercase; }
.zm-msj-msg{ display:flex; max-width:min(680px, 74%); }
.zm-msj-msg.in{ align-self:flex-start; }
.zm-msj-msg.out{ align-self:flex-end; }
.zm-msj-msg.seguido{ margin-top:-7px; }
.zm-msj-bur{ position:relative; min-width:0; padding:9px 14px 8px; border-radius:20px; font-size:15px; line-height:1.47; white-space:pre-wrap;
  word-break:break-word; overflow-wrap:anywhere; animation:zm-msj-llega .22s var(--sal) both; }
.zm-msj-msg.in .zm-msj-bur{ background:var(--solido-2); color:var(--texto); border-bottom-left-radius:6px; }
.zm-msj-msg.out .zm-msj-bur{ background:var(--acento); color:var(--acento-tinta); border-bottom-right-radius:6px; }
.zm-msj-meta{ display:inline-block; float:right; margin:7px 0 -2px 12px; font-size:11px; line-height:1.2; color:var(--texto-3); white-space:nowrap; font-variant-numeric:tabular-nums; }
.zm-msj-msg.out .zm-msj-meta{ color:color-mix(in srgb, var(--acento-tinta) 74%, transparent); }
.zm-msj .wa-tics{ margin-left:4px; font-size:11px; letter-spacing:-1px; opacity:.85; }
.zm-msj-msg.out .wa-tics.leido{ color:var(--acento-tinta); opacity:1; font-weight:700; }
.zm-msj-msg.out .wa-fallo{ color:var(--acento-tinta); text-decoration:underline; text-underline-offset:2px; }
.zm-msj-bur .wa-img{ border-radius:14px; }
@keyframes zm-msj-llega{ from{ opacity:0; transform:translate3d(0,6px,0) scale(.985); } to{ opacity:1; transform:none; } }

.zm-msj-pie{ padding:12px 16px 14px; border-top:1px solid var(--linea); background:var(--solido); }
.zm-msj-pie .wa-emojis{ margin-bottom:10px; }
.zm-msj-escribe{ display:flex; align-items:flex-end; gap:4px; }
html .zm-msj-escribe textarea, html[data-theme="dark"] .zm-msj-escribe textarea{ flex:1; min-width:0; min-height:42px; max-height:140px; margin:0 4px; padding:10px 16px;
  border-radius:21px; border:1px solid var(--linea); background:var(--solido); color:var(--texto); font:inherit; font-size:15px; line-height:1.4; resize:none; box-sizing:border-box; }
html .zm-msj-escribe textarea:focus-visible{ outline:2px solid var(--acento); outline-offset:0; }
.zm-msj-escribe .btn.gold{ min-height:42px; border-radius:21px; }
.zm-msj-control{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:13px; color:var(--texto-2); }
.zm-msj-escribe + .zm-msj-control{ margin-top:10px; }
.zm-msj-control .zm-estado{ white-space:normal; font-size:13px; color:var(--texto); }
.zm-msj-control > .btn{ margin-left:auto; }

/* Tablero y Lista. */
.zm-msj-sugerencias{ margin:0 0 16px; padding:16px 20px; }
.zm-msj-sugerencias__fila{ display:flex; align-items:center; flex-wrap:wrap; gap:14px 18px; }
.zm-msj-sugerencias__orbe{ flex:0 0 auto; display:grid; place-items:center; width:56px; height:56px; }
.zm-msj-sugerencias__texto{ flex:1 1 260px; min-width:0; }
.zm-msj-sugerencias__texto strong{ display:block; font-size:16px; font-weight:500; letter-spacing:-.015em; color:var(--texto); }
.zm-msj-sugerencias__texto p{ margin:3px 0 0; font-size:13px; line-height:1.45; color:var(--texto-2); }
.zm-msj-sugerencias__resultado{ margin-top:12px; font-size:13.5px; line-height:1.5; color:var(--texto-2); }
.zm-msj-tablero{ display:flex; gap:12px; padding-bottom:10px; overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
.zm-msj-col{ flex:0 0 300px; max-width:300px; display:flex; flex-direction:column; min-width:0; max-height:72vh; box-sizing:border-box; padding:12px;
  background:var(--solido-2); border-radius:var(--r-tarjeta); scroll-snap-align:start; }
.zm-msj-col__cabeza{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:2px 4px 10px; }
.zm-msj-col__cabeza .zm-estado{ font-size:13.5px; font-weight:500; color:var(--texto); }
.zm-msj-col__n{ font-size:13px; color:var(--texto-3); font-variant-numeric:tabular-nums; }
.zm-msj-col__nota{ margin:0 4px 10px; font-size:11.5px; line-height:1.4; color:var(--texto-3); }
.zm-msj-col__tarjetas{ flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; overflow-y:auto; overscroll-behavior:contain; }
.zm-msj-col__vacio{ margin:8px 4px; font-size:12.5px; color:var(--texto-3); }
.zm-msj-tarjeta{ min-width:0; padding:12px; background:var(--solido); border:1px solid var(--linea); border-radius:var(--r-chica); overflow-wrap:anywhere; }
.zm-msj-tarjeta__cabeza{ display:flex; align-items:center; gap:8px; min-width:0; }
.zm-msj-tarjeta__cabeza b{ flex:1; min-width:0; font-size:14px; font-weight:500; color:var(--texto); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-msj-tarjeta__sub{ margin:4px 0 0 36px; font-size:12px; color:var(--texto-3); }
.zm-msj-tarjeta__marcas{ display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:8px; }
.zm-msj-tarjeta__previa{ margin:8px 0 0; font-size:12.5px; line-height:1.45; color:var(--texto-2); }
.zm-msj-tarjeta__pie{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; margin-top:10px; padding-top:10px; border-top:1px solid var(--linea); }
.zm-msj-tarjeta__pie .zm-msj-enlace{ font-size:12.5px; }
.zm-msj-tarjeta__pie .zm-msj-etapa{ margin-right:auto; }
.zm-msj-tabla{ padding:0; overflow:hidden; }
html .zm-msj-tabla table{ width:100%; border-collapse:collapse; }
html .zm-msj-tabla th, html[data-theme="dark"] .zm-msj-tabla th{ padding:12px 14px; background:transparent; border-bottom:1px solid var(--linea); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-3); text-align:left; }
html .zm-msj-tabla td{ padding:12px 14px; border-bottom:1px solid var(--linea); vertical-align:middle; font-size:13.5px; color:var(--texto); }
html .zm-msj-tabla tr:last-child td{ border-bottom:0; }
.zm-msj-tabla__contacto{ display:flex; align-items:center; gap:10px; min-width:200px; }
.zm-msj-tabla__contacto > span{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.zm-msj-tabla__contacto b{ font-weight:500; }
.zm-msj-tabla__contacto small{ font-size:12px; color:var(--texto-3); }
html .zm-msj-tabla .zm-msj-tabla__previa{ max-width:340px; font-size:13px; color:var(--texto-2); }
html .zm-msj-tabla .zm-msj-tabla__fecha{ white-space:nowrap; font-size:12.5px; color:var(--texto-3); }
.zm-msj-tabla__acciones{ display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.zm-msj-tabla__acciones .zm-mas > summary{ min-height:32px; padding:0 12px; font-size:13px; }
.zm-msj-tabla .zm-paginado{ border-top:1px solid var(--linea); }

/* Tableta y teléfono: una cosa a la vez. La lista crece con la página; al abrir
   una conversación, se esconde lo de arriba y el chat ocupa la pantalla. */
@media(max-width:1079px){
  .zm-msj-panel{ grid-template-columns:minmax(0,1fr); }
  .zm-msj-panel:not(.chat-open){ height:auto; min-height:0; max-height:none; }
  .zm-msj-panel:not(.chat-open) .zm-msj-filas{ overflow:visible; }
  .zm-msj-panel.chat-open .zm-msj-lista{ display:none; }
  .zm-msj-panel:not(.chat-open) .zm-msj-chat{ display:none; }
  .zm-msj-lista{ border-right:0; }
  .zm-msj-icono.zm-msj-cab__volver{ display:inline-grid; margin-left:-8px; }
  .zm-msj--chat .zm-msj__arriba{ display:none; }
  .zm-msj--chat .zm-msj-panel{ height:calc(100vh - 110px); height:calc(100dvh - 110px); min-height:420px; max-height:none; animation:zm-msj-entra .24s var(--sal) both; }
  .zm-msj-msg{ max-width:84%; }
}
@keyframes zm-msj-entra{ from{ opacity:0; transform:translate3d(18px,0,0); } to{ opacity:1; transform:none; } }
@media(max-width:820px){
  /* Buscador y Filtros arriba; las tres bandejas debajo, las tres a la vista:
     el número va bajo cada nombre para que quepan sin desplazarse. */
  .zm-msj-barra .zm-msj-busca{ flex:1 1 0; max-width:none; }
  .zm-msj-barra .zm-seg{ order:3; flex:1 1 100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-radius:16px; overflow:visible; }
  .zm-msj-barra .zm-seg__op{ flex-direction:column; justify-content:center; gap:1px; min-height:48px; padding:6px 4px; border-radius:13px; text-align:center; white-space:normal; font-size:13px; line-height:1.2; }
  .zm-msj-barra .zm-seg__op svg{ display:none !important; }
  .zm-msj-barra .zm-seg__cuenta{ font-size:12px; }
  .zm-msj-filtros__boton{ padding:0 13px; }
  /* La cabecera del chat en dos renglones: nombre y acciones; y debajo, el
     teléfono con la etapa. */
  .zm-msj-cab{ display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; grid-template-areas:"volver logo nombre acciones" "sub sub sub sub"; align-items:center; column-gap:10px; row-gap:8px; }
  .zm-msj-cab > .zm-msj-cab__volver{ grid-area:volver; }
  .zm-msj-cab > .logo-canal{ grid-area:logo; }
  .zm-msj-cab__info{ display:contents; }
  .zm-msj-cab__nombre{ grid-area:nombre; flex-wrap:nowrap; min-width:0; }
  .zm-msj-cab__persona{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .zm-msj-cab__nombre .btn.gold.sm{ flex:0 0 auto; width:30px; height:30px; min-height:0; padding:0; justify-content:center; border-radius:50%; }
  .zm-msj-cab__sub{ grid-area:sub; margin-top:0; }
  .zm-msj-cab__acciones{ grid-area:acciones; gap:2px; }
  .zm-msj--chat .zm-msj-panel{ height:calc(100vh - 82px); height:calc(100dvh - 82px); margin:0 -14px; border-radius:0; border-left:0; border-right:0; border-bottom:0; }
  .zm-msj-cab{ gap:10px; padding:10px 12px; }
  .zm-msj-cab__nombre{ font-size:16px; }
  .zm-msj-cab__acciones .zm-msj-texto-ancho{ display:none; }
  .zm-msj-cab__acciones .btn.ghost.sm{ width:38px; height:38px; min-height:0; padding:0; justify-content:center; border:0; border-radius:50%; }
  .zm-msj-cab .zm-msj-texto-ancho{ display:none; }
  .zm-msj-avisos{ padding:6px 12px; }
  .zm-msj-avisos__vivo{ display:none; }
  .zm-msj-hilo{ padding:14px 12px 18px; }
  .zm-msj-bur{ font-size:15.5px; }
  .zm-msj-pie{ padding:10px 10px calc(10px + env(safe-area-inset-bottom)); }
  .zm-msj-escribe .btn.gold{ padding-left:14px; padding-right:14px; }
  .zm-msj-panel{ border-radius:var(--r-chica); }
  .zm-msj-filas{ padding:4px; }
  .zm-msj-fila{ padding:12px 10px; }
  .zm-msj-filtros__hoja{ position:fixed; left:12px; right:12px; top:auto; bottom:calc(12px + env(safe-area-inset-bottom)); width:auto; max-height:72vh; overflow:auto;
    z-index:59; transform-origin:bottom center; animation:zm-msj-hoja .24s var(--sal) both; }
  .zm-msj-col{ flex:0 0 84vw; max-width:84vw; }
  .zm-msj-paso{ min-width:150px; }
  .zm-msj-etapas__total{ display:none; }
}
@media(max-width:480px){ .zm-msj--chat .zm-msj-panel{ margin:0 -11px; } }
@keyframes zm-msj-hoja{ from{ opacity:0; transform:translate3d(0,16px,0); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .zm-msj-bur, .zm-msj--chat .zm-msj-panel, .zm-msj-filtros__hoja, .zm-msj-activo, .zm-msj-resultados{ animation:zm-funde .18s ease both !important; }
  .zm-msj-icono.grabando{ animation:none; }
  .zm-msj-fila, .zm-msj-fila::before, .zm-msj-paso, .zm-msj-icono, .zm-msj-filtros__boton, .zm-msj-activo, .zm-msj-etiq, .zm-msj-etapa, .zm-msj-resultado{ transition:none; }
}
/* ── fin zm · mensajes ── */

/* ── zm · cotizaciones ── */
/* Cotizaciones (v619): cabecera, cifras, segmentado y la lista paginada de filas que se
   abren, con la acción «Pasar a plan» visible en cada fila; detalle con «‹ Cotizaciones».
   Sólo tokens: el color vive en los puntos de estado y el acento en la acción principal. */
.zm-coti{ min-width:0; }
.zm-coti .zm-barra-filtros{ margin-bottom:16px; }
.zm-coti .zm-buscar, .zm-coti-modal .zm-buscar{ margin:0; }
.zm-coti .zm-buscar input, .zm-coti-modal .zm-buscar input{ margin:0; padding:8px 14px 8px 36px; border-radius:999px; }
html[data-theme="dark"] .zm-coti .zm-buscar input, html[data-theme="dark"] .zm-coti-modal .zm-buscar input{ padding-left:36px; }
.zm-coti__cifras{ margin-bottom:22px; }
.zm-coti__estados{ margin:0 0 12px; max-width:100%; }
.zm-coti__cargando{ margin:0; padding:28px 16px; text-align:center; font-size:13.5px; color:var(--texto-2); }
.zm-coti__nota{ margin:10px 4px 0; font-size:12.5px; color:var(--texto-3); }
.zm-coti-error{ margin:10px 0; font-size:13.5px; color:var(--danger); }

/* Aviso breve tras una acción: una píldora de tinta abajo, como en iOS. */
.zm-coti-aviso{ position:fixed; left:50%; bottom:24px; z-index:60; max-width:min(560px,calc(100vw - 32px)); margin:0; padding:11px 18px;
  border-radius:999px; background:var(--texto); color:var(--fondo); font-size:13.5px; line-height:1.4; text-align:center;
  box-shadow:var(--pz-sombra); transform:translateX(-50%); animation:zm-coti-aviso .22s var(--sal) both; pointer-events:none; }
@keyframes zm-coti-aviso{ from{ opacity:0; transform:translate(-50%,8px); } to{ opacity:1; transform:translate(-50%,0); } }

/* Fila: el botón que abre cubre toda la fila; la acción de la derecha queda encima. */
.zm-coti-fila{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto 18px; align-items:center; gap:6px 12px;
  min-height:60px; padding:0 14px 0 0; border-radius:var(--r-chica); color:var(--texto); transition:background-color .18s ease; }
.zm-coti-fila + .zm-coti-fila::before{ content:''; position:absolute; left:14px; right:14px; top:0; height:1px; background:var(--linea); opacity:.7; transition:opacity .18s ease; }
.zm-coti-fila__abre{ all:unset; box-sizing:border-box; display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:6px 16px;
  min-width:0; padding:12px 0 12px 14px; cursor:pointer; color:inherit; transition:transform .14s var(--sal); }
.zm-coti-fila__abre::after{ content:''; position:absolute; inset:0; border-radius:inherit; }
.zm-coti-fila__abre:active{ transform:scale(.995); }
.zm-coti-fila__abre:focus-visible{ outline:none; }
.zm-coti-fila:has(.zm-coti-fila__abre:focus-visible){ outline:2px solid var(--acento); outline-offset:-2px; }
/* Ancho fijo: una fila sin acción (rechazada) no corre el estado ni el monto. */
.zm-coti-fila__accion{ position:relative; z-index:1; display:flex; justify-content:flex-end; min-width:128px; }
.zm-coti-fila .zm-fila__meta .zm-estado{ min-width:118px; }
.zm-coti-fila .zm-fila__monto{ min-width:96px; text-align:right; }
.zm-coti-fila > .zm-fila__chevron{ pointer-events:none; }
@media (hover:hover) and (pointer:fine){
  .zm-coti-fila:hover{ background:var(--solido-2); }
  .zm-coti-fila:hover + .zm-coti-fila::before, .zm-coti-fila:hover::before{ opacity:0; }
  .zm-coti-fila:hover > .zm-fila__chevron{ transform:translateX(3px) rotate(45deg); border-color:var(--texto); }
}
.zm-coti-accion{ all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:6px 13px; border-radius:999px;
  background:var(--solido-2); color:var(--texto); font-size:13px; font-weight:500; white-space:nowrap; cursor:pointer;
  transition:background-color .18s ease, color .18s ease, transform .14s var(--sal), box-shadow .18s ease; }
.zm-coti-accion svg{ color:var(--texto-2); }
.zm-coti-accion:active{ transform:scale(.97); }
.zm-coti-accion:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
.zm-coti-accion--ver{ background:transparent; color:var(--texto-2); box-shadow:inset 0 0 0 1px var(--linea); }
@media (hover:hover) and (pointer:fine){
  .zm-coti-accion:hover{ background:var(--solido); box-shadow:inset 0 0 0 1px var(--texto-3); }
  .zm-coti-accion--ver:hover{ color:var(--texto); }
}
.zm-coti-lista .coleccion-paginada > .zm-coti-fila{ animation:zm-asoma .22s var(--sal) both; }
.zm-coti-lista .coleccion-paginada > .zm-coti-fila:nth-child(2){ animation-delay:24ms; }
.zm-coti-lista .coleccion-paginada > .zm-coti-fila:nth-child(3){ animation-delay:48ms; }
.zm-coti-lista .coleccion-paginada > .zm-coti-fila:nth-child(4){ animation-delay:72ms; }
.zm-coti-lista .coleccion-paginada > .zm-coti-fila:nth-child(5){ animation-delay:96ms; }
.zm-coti-lista .coleccion-paginada > .zm-coti-fila:nth-child(6){ animation-delay:120ms; }
.zm-coti-lista .coleccion-paginada > .zm-coti-fila:nth-child(7){ animation-delay:144ms; }
.zm-coti-lista .coleccion-paginada > .zm-coti-fila:nth-child(n+8){ animation-delay:168ms; }
/* Escribir en el buscador no anima filas: el teclado es una acción frecuente. */
.zm-coti-lista--quieta .coleccion-paginada > .zm-coti-fila{ animation:none; }
@media(max-width:640px){
  .zm-coti-fila{ grid-template-columns:minmax(0,1fr) 18px; padding:0 14px 12px 0; }
  .zm-coti-fila__abre{ grid-column:1; grid-template-columns:minmax(0,1fr); padding-bottom:4px; }
  .zm-coti-fila__abre .zm-fila__ico{ display:none; }
  .zm-coti-fila .zm-fila__meta{ justify-content:flex-start; flex-wrap:wrap; gap:10px; width:100%; }
  .zm-coti-fila .zm-fila__meta .zm-estado{ min-width:0; }
  .zm-coti-fila .zm-fila__monto{ min-width:0; margin-left:auto; }
  .zm-coti-fila__accion{ grid-column:1; grid-row:2; justify-content:flex-start; min-width:0; padding-left:14px; }
  .zm-coti-fila__accion:empty{ display:none; }
  .zm-coti-fila > .zm-fila__chevron{ grid-column:2; grid-row:1; }
  .zm-coti__cifras .zm-cifra--clave{ grid-column:1 / -1; order:-1; }
  .zm-coti .zm-barra-filtros .zm-buscar{ flex:1 1 100%; max-width:none; }
}

/* Detalle: volver, cabecera del paciente, tratamientos a la izquierda y el plan y el
   seguimiento a la derecha (una columna en el teléfono). */
.zm-coti-detalle{ animation:zm-asoma .22s var(--sal) both; }
.zm-coti-detalle .zm-cabeza p .zm-estado{ vertical-align:-1px; }
.zm-coti-cuerpo{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:14px; align-items:start; }
.zm-coti-lado{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.zm-coti-cuerpo .zm-tarjeta + .zm-tarjeta{ margin-top:0; }
.zm-coti-lineas{ list-style:none; margin:0 0 6px; padding:0; }
.zm-coti-linea{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 16px; padding:12px 0; border-top:1px solid var(--linea); }
.zm-coti-linea:first-child{ border-top:0; padding-top:2px; }
.zm-coti-linea__nombre{ font-size:15px; font-weight:500; letter-spacing:-.01em; color:var(--texto); min-width:0; overflow-wrap:anywhere; }
.zm-coti-linea__detalle{ grid-column:1; font-size:13px; color:var(--texto-2); font-variant-numeric:tabular-nums; }
.zm-coti-linea__total{ grid-column:2; grid-row:1 / span 2; align-self:center; font-size:15px; color:var(--texto); font-variant-numeric:tabular-nums; }
.zm-coti-linea--vacia{ display:block; color:var(--texto-2); font-size:13.5px; }
.zm-coti-totales{ margin-top:4px; border-top:1px solid var(--linea); }
.zm-coti-totales > dt:first-of-type, .zm-coti-totales > dd:first-of-type{ border-top:0; }
.zm-coti-total, .zm-coti-totales > dd.zm-coti-total{ font-size:17px; letter-spacing:-.015em; }
.zm-coti-plan__estado{ margin:0 0 8px; }
.zm-coti-plan__texto{ margin:0; font-size:13.5px; line-height:1.55; color:var(--texto-2); }
.zm-coti-plan__texto + .zm-coti-plan__texto{ margin-top:8px; }
.zm-coti-notas p{ margin:0; font-size:14px; line-height:1.55; color:var(--texto-2); white-space:pre-wrap; overflow-wrap:anywhere; }
.zm-coti-contacto{ overflow-wrap:anywhere; }
.zm-coti-seguimiento .zm-pares > dd{ padding-left:12px; }
@media(max-width:900px){ .zm-coti-cuerpo{ grid-template-columns:minmax(0,1fr); } }
@media(max-width:640px){ .zm-coti-cuerpo .zm-tarjeta{ padding:16px 14px; } }

/* Ventanas del módulo (nueva cotización, pasar a plan, respuesta): sólidas. */
.zm-coti-modal{ max-width:760px; }
.zm-coti-modal__seccion + .zm-coti-modal__seccion{ margin-top:20px; padding-top:18px; border-top:1px solid var(--linea); }
.zm-coti-modal__seccion > h3{ margin:0 0 10px; font-size:15px; font-weight:500; letter-spacing:-.01em; color:var(--texto); }
.zm-coti-modal__ayuda{ margin:-4px 0 14px; font-size:13.5px; line-height:1.55; color:var(--texto-2); }
.zm-coti-modal__ayuda b{ color:var(--texto); font-weight:500; }
.zm-coti-modal__estado{ margin:12px 2px 4px; font-size:13.5px; color:var(--texto-2); }
.zm-coti-modal .zm-campo input, .zm-coti-modal .zm-campo select, .zm-coti-modal .zm-campo textarea{ margin:0; }
.zm-coti-modal .zm-campo > span{ margin:0; }
.zm-coti-modal .zm-buscar input{ min-height:44px; }
.zm-coti-pac__resultados{ margin-top:10px; max-height:min(44vh,360px); overflow-y:auto; }
.zm-coti-pac__resultados .zm-lista{ padding:0; border:0; background:transparent; }
.zm-coti-elegido{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--r-chica); background:var(--solido-2); }
.zm-coti-elegido strong{ flex:1 1 auto; min-width:0; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-coti-elegido .zm-fila__ico{ background:var(--solido); }
.zm-coti-modal__cond{ grid-template-columns:minmax(0,200px) minmax(0,1fr); align-items:start; }
.zm-coti-modal__cond textarea{ min-height:64px; }
.zm-coti-modal__pie{ margin-top:20px; }
.zm-coti-modal__pie .zm-pie-nota{ display:inline-flex; align-items:baseline; gap:8px; }
.zm-coti-modal__pie .zm-coti-total{ color:var(--texto); font-weight:500; font-variant-numeric:tabular-nums; }

/* Líneas del editor: tratamiento ancho, cantidad y valor angostos, subtotal y quitar. */
.zm-coti-ed{ display:flex; flex-direction:column; gap:10px; }
.zm-coti-ed__linea{ display:grid; grid-template-columns:minmax(0,1fr) 84px 132px 104px 34px; align-items:end; gap:10px; padding:12px; border-radius:var(--r-chica); background:var(--solido-2);
  animation:zm-asoma .2s var(--sal) both; }
.zm-coti-ed__linea:has(.zm-coti-ed__var){ grid-template-columns:minmax(0,1fr) minmax(0,.8fr) 84px 132px 104px 34px; }
.zm-coti-ed__linea input, .zm-coti-ed__linea select{ background:var(--solido); }
html[data-theme="dark"] .zm-coti-ed__linea input, html[data-theme="dark"] .zm-coti-ed__linea select{ background:var(--solido); }
.zm-coti-ed__sub{ align-self:center; padding-top:18px; font-size:14px; text-align:right; color:var(--texto); font-variant-numeric:tabular-nums; white-space:nowrap; }
.zm-coti-quitar{ all:unset; box-sizing:border-box; display:grid; place-items:center; width:34px; height:34px; margin-bottom:3px; border-radius:50%; color:var(--texto-3); cursor:pointer;
  transition:background-color .18s ease, color .18s ease, transform .14s var(--sal); }
.zm-coti-quitar:active{ transform:scale(.94); }
.zm-coti-quitar:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
@media (hover:hover) and (pointer:fine){ .zm-coti-quitar:hover{ background:var(--solido); color:var(--danger); } }
.zm-coti-ed__mas{ align-self:flex-start; }
@media(max-width:640px){
  .zm-coti-ed__linea, .zm-coti-ed__linea:has(.zm-coti-ed__var){ grid-template-columns:minmax(0,1fr) minmax(0,1fr) 34px; }
  .zm-coti-ed__trat, .zm-coti-ed__var{ grid-column:1 / 3; }
  .zm-coti-ed__trat{ grid-row:1; }
  .zm-coti-quitar{ grid-column:3; grid-row:1; }
  .zm-coti-ed__sub{ grid-column:1 / -1; padding-top:0; text-align:left; font-size:13px; color:var(--texto-2); }
  .zm-coti-modal__cond{ grid-template-columns:minmax(0,1fr); }
  /* En el teléfono el pie no se pega abajo (se comía media pantalla): va al final,
     con «Guardar y enviar» a lo ancho y las otras dos debajo, lado a lado. */
  .zm-coti-modal__pie{ position:static; }
  .zm-coti-modal__pie .zm-pie-nota{ flex:1 1 100%; }
  .zm-coti-modal__pie .btn{ flex:1 1 40%; }
  .zm-coti-modal__pie .btn.gold{ order:1; flex-basis:100%; }
  .zm-coti-modal__pie .zm-pie-nota{ order:0; }
}

/* Pasar a plan: el resumen de lo cotizado y la etapa en que queda. */
.zm-coti-resumen{ margin:0 0 14px; }
.zm-coti-resumen > dt{ overflow-wrap:anywhere; padding-right:12px; }
.zm-coti-resumen__cant{ color:var(--texto-3); }
.zm-coti-etapa{ display:flex; flex-direction:column; gap:6px; margin:0 0 14px; padding:12px 14px; border-radius:var(--r-chica); background:var(--solido-2); font-size:13.5px; line-height:1.5; color:var(--texto-2); }
.zm-coti-etapa .zm-estado{ color:var(--texto); font-size:13px; }
.zm-coti-motivo{ margin-top:14px; }

@media (prefers-reduced-motion: reduce){
  .zm-coti-lista .coleccion-paginada > .zm-coti-fila, .zm-coti-detalle, .zm-coti-ed__linea{ animation:zm-funde .18s ease both !important; animation-delay:0ms !important; }
  .zm-coti-aviso{ animation:zm-funde .18s ease both; }
  .zm-coti-fila, .zm-coti-fila__abre, .zm-coti-accion, .zm-coti-quitar, .zm-coti-fila > .zm-fila__chevron{ transition:none; }
}
/* ── fin zm · cotizaciones ── */

/* ── zm · cascara ── */
/* v619 · AVISOS FLOTANTES (estilo iOS). Lo que llega a la campana se asoma arriba
   a la derecha, bajo la barra, como una tarjeta de vidrio. El dueño lo pidió así
   («contenedor estilo glass que difumine lo de debajo, similar al menú»), y es la
   excepción consciente a la regla de la sección 36 (lo que se abre encima va
   sólido): esto no se ABRE ni aloja trabajo, se asoma unos segundos y se va. Para
   que se lea sobre cualquier cosa, el velo es el alto del sistema (--v-fondo-alto:
   90-78 % de blanco de día, azul noche al 62-78 %) con blur 20 y saturación 180.
   Capas: barra 45 < aviso 48 < ventana 50 (sobre la barra, bajo las ventanas; el
   velo de la campana, 60, y el ⌘K, 95, quedan encima). Vive dentro de .app para
   que la franja de cobro lo empuje igual que a la barra. */
.zm-avisos-voz{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.zm-avisos{
  position:fixed; z-index:48; top:calc(84px + env(safe-area-inset-top, 0px)); right:20px;
  width:min(372px, calc(100vw - 32px));
  display:flex; flex-direction:column; align-items:stretch; gap:8px;
  pointer-events:none;
}
.app.con-franja .zm-avisos{ top:calc(84px + var(--franja-alto, 38px)); }
.zm-aviso{
  position:relative; pointer-events:auto; touch-action:none; -webkit-user-select:none; user-select:none;
  border-radius:20px; color:var(--texto);
  background:var(--v-fondo-alto);
  -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--v-borde);
  /* borde de luz arriba + sombra de dos capas (nunca un halo). De día la luz es
     el blanco del sólido; de noche el sólido es oscuro, así que la da el texto. */
  --zm-aviso-luz:color-mix(in srgb, var(--solido) 78%, transparent);
  box-shadow:inset 0 1px 0 var(--zm-aviso-luz), var(--pz-sombra);
  /* backwards y no both: un relleno hacia adelante le ganaría al arrastre (estilo en línea) y a la pulsación */
  animation:zm-aviso-entra .26s var(--sal) backwards;
  transition:transform .14s var(--sal);
}
html[data-theme="dark"] .zm-aviso{ --zm-aviso-luz:color-mix(in srgb, var(--texto) 14%, transparent); }
.zm-aviso:not(.is-arrastre):not(.is-sale):active{ transform:scale(.985); }
.zm-aviso.is-arrastre{ cursor:grabbing; }
.zm-aviso.is-sale{ animation:zm-aviso-sale .2s cubic-bezier(.4,0,1,1) forwards; pointer-events:none; }
.zm-aviso__abrir{
  display:grid; grid-template-columns:36px minmax(0,1fr); column-gap:12px; row-gap:1px; align-items:start;
  width:100%; margin:0; padding:12px 14px 13px; border:0; border-radius:inherit;
  background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer;
}
.zm-aviso__abrir:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
.zm-aviso__ic{
  grid-row:1 / span 3; width:36px; height:36px; margin-top:1px; border-radius:10px;
  display:grid; place-items:center; background:var(--solido-2); color:var(--texto);
}
.zm-aviso__ic--marca{ background:transparent; border-radius:50%; }
.zm-aviso__ic--marca .logo-canal{ box-shadow:none; }
.zm-aviso__ic--zairi .orbe-mini{ width:22px; height:22px; }
.zm-aviso__cabeza{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; min-width:0; font-size:11.5px; line-height:1.35; color:var(--texto-3); }
.zm-aviso__etiqueta{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.zm-aviso__hora{ flex:0 0 auto; font-variant-numeric:tabular-nums; }
.zm-aviso__titulo{
  font-size:14px; font-weight:600; line-height:1.3; letter-spacing:-.01em; color:var(--texto);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.zm-aviso__texto{
  margin-top:1px; font-size:13px; line-height:1.35; color:var(--texto-2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* La cruz asoma en la esquina (como en macOS) al pasar el cursor o con el foco. */
.zm-aviso__cerrar{
  position:absolute; top:-7px; left:-7px; width:22px; height:22px; padding:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--solido); color:var(--texto-2); border:1px solid var(--linea); box-shadow:var(--pz-sombra);
  opacity:0; transform:scale(.8); transition:opacity .16s ease, transform .18s var(--sal);
}
.zm-aviso:hover .zm-aviso__cerrar, .zm-aviso:focus-within .zm-aviso__cerrar{ opacity:1; transform:none; }
.zm-aviso__cerrar:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
@media (hover:hover) and (pointer:fine){ .zm-aviso__cerrar:hover{ color:var(--texto); } }
.zm-avisos__resto{
  pointer-events:auto; align-self:flex-end; margin:0; padding:7px 14px; border-radius:var(--r-boton);
  font:inherit; font-size:12.5px; color:var(--texto-2); cursor:pointer;
  background:var(--v-fondo-alto);
  -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--v-borde); box-shadow:var(--pz-sombra);
  animation:zm-aviso-funde .2s ease backwards; transition:transform .14s var(--sal);
}
.zm-avisos__resto:active{ transform:scale(.97); }
.zm-avisos__resto:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
.zm-avisos__ver{ color:var(--texto); font-weight:500; }
/* Entra por la derecha sin rebote y sale por donde entró. */
@keyframes zm-aviso-entra{ from{ opacity:0; transform:translate3d(28px,0,0) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes zm-aviso-sale{ to{ opacity:0; transform:translate3d(calc(100% + 28px),0,0); } }
@keyframes zm-aviso-funde{ from{ opacity:0; } to{ opacity:1; } }
@keyframes zm-aviso-funde-sale{ to{ opacity:0; } }
/* En el teléfono cuelga de la barra de arriba, a todo lo ancho, y entra (y sale) desde arriba. */
@media (max-width:820px){
  .zm-avisos{ top:calc(70px + env(safe-area-inset-top, 0px)); left:12px; right:12px; width:auto; }
  .app.con-franja .zm-avisos{ top:calc(70px + var(--franja-alto, 38px)); }
  .zm-aviso{ animation-name:zm-aviso-baja; }
  .zm-aviso.is-sale{ animation-name:zm-aviso-sube; }
  .zm-aviso__cerrar{ top:-6px; left:-6px; }
}
@keyframes zm-aviso-baja{ from{ opacity:0; transform:translate3d(0,-18px,0) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes zm-aviso-sube{ to{ opacity:0; transform:translate3d(0,-120%,0); } }
@media (prefers-reduced-motion: reduce){
  .zm-aviso, .zm-avisos__resto{ animation:zm-aviso-funde .16s ease backwards; transition:none; }
  .zm-aviso.is-sale{ animation:zm-aviso-funde-sale .16s ease forwards; }
  .zm-aviso:not(.is-arrastre):not(.is-sale):active, .zm-avisos__resto:active{ transform:none; }
  .zm-aviso__cerrar{ transition:opacity .16s ease; transform:none; }
}
@media (prefers-reduced-transparency: reduce){
  .zm-aviso, .zm-avisos__resto{ background:var(--solido); background-image:none; -webkit-backdrop-filter:none; backdrop-filter:none; border-color:var(--linea); }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .zm-aviso, .zm-avisos__resto{ background:var(--solido); background-image:none; border-color:var(--linea); }
}
/* ── fin zm · cascara ── */

/* ── zm · erp ── */
/* v619 · ERP: kardex, valorización, cuadratura, por pagar, por cobrar, facturación y el
   criterio del costo de ventas (zairi balance e Insumos). Sólo tokens: el color vive en
   los puntos de estado y, con moderación, en una pérdida o una deuda. Las filas que se
   abren son botones con aria-expanded; lo que aparece entra con opacidad y 6 px de
   desplazamiento (220 ms) y en reposo sólo funde. */
.zm-erp{ min-width:0; }
.zm-erp .zm-cifras{ margin-bottom:16px; }
.zm-erp .zm-barra-filtros{ justify-content:space-between; }
.zm-erp :is(label.zm-campo, .zm-erp-fecha){ margin:0; font-size:inherit; font-weight:400; letter-spacing:normal; color:inherit; }
.zm-erp-enlace{ all:unset; box-sizing:border-box; cursor:pointer; font-size:13px; color:var(--acento); border-radius:6px; padding:2px 0;
  text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px; transition:text-decoration-color .18s ease, opacity .14s ease; }
.zm-erp-enlace:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
.zm-erp-enlace:active{ opacity:.6; }
@media (hover:hover) and (pointer:fine){ .zm-erp-enlace:hover{ text-decoration-color:currentColor; } }
.zm-erp-botones{ display:inline-flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }

/* Kardex: fecha · movimiento · cantidad · saldo (con montos, el valor en la segunda línea). */
.zm-erp-kardex{ min-width:0; }
.zm-erp-kardex > .zm-seg{ margin:0 0 12px; }
.zm-erp-kardex__saldo{ margin:0 0 12px; font-size:13.5px; line-height:1.5; color:var(--texto-2); }
.zm-erp-kardex__saldo b{ font-weight:500; color:var(--texto); font-variant-numeric:tabular-nums; }
.zm-erp-kardex__saldo span{ color:var(--texto-3); }
.zm-erp-mov{ display:grid; grid-template-columns:74px minmax(0,1fr) 128px 128px; align-items:start; gap:4px 16px; padding:11px 2px;
  border-top:1px solid var(--linea); font-size:13.5px; color:var(--texto); animation:zm-asoma .22s var(--sal) both; }
.zm-erp-mov:first-child{ border-top:0; }
.zm-erp-mov--cabeza{ padding:0 2px 8px; border-top:0; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-3); animation:none; }
.zm-erp-mov--cabeza > span:nth-child(n+3){ text-align:right; }
.zm-erp-mov__fecha{ color:var(--texto-2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.zm-erp-mov__que{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.zm-erp-mov__tipo .zm-estado{ font-size:13.5px; color:var(--texto); }
.zm-erp-mov__que small{ font-size:12.5px; line-height:1.4; color:var(--texto-2); overflow-wrap:anywhere; }
.zm-erp-mov__cant, .zm-erp-mov__saldo{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.zm-erp-mov__saldo{ color:var(--texto-2); }
.zm-erp-mov__cant small, .zm-erp-mov__saldo small{ font-size:12px; color:var(--texto-3); }
.zm-erp-kardex--compacto .zm-erp-mov{ grid-template-columns:58px minmax(0,1fr) auto; }
/* Compacto (la ficha del insumo): el saldo baja a una línea propia, «queda 45 g · $18.000». */
.zm-erp-kardex--compacto .zm-erp-mov__saldo{ grid-column:2 / -1; grid-row:2; flex-direction:row; align-items:baseline; justify-content:flex-end; gap:6px; font-size:12.5px; color:var(--texto-3); }
.zm-erp-kardex--compacto .zm-erp-mov__saldo::before{ content:'queda'; }
.zm-erp-kardex .coleccion-paginada{ display:block; }
@media(max-width:640px){
  .zm-erp-mov{ grid-template-columns:minmax(0,1fr) auto; }
  .zm-erp-mov--cabeza{ display:none; }
  .zm-erp-mov__fecha{ grid-column:1 / -1; font-size:12px; color:var(--texto-3); }
  .zm-erp-mov__saldo{ grid-column:1 / -1; grid-row:auto; flex-direction:row; align-items:baseline; justify-content:flex-end; gap:6px; font-size:12.5px; color:var(--texto-3); }
  .zm-erp-mov__saldo::before{ content:'queda'; }
  .zm-erp-kardex--compacto .zm-erp-mov{ grid-template-columns:minmax(0,1fr) auto; }
  .zm-erp-kardex--compacto .zm-erp-mov__saldo{ grid-column:1 / -1; grid-row:auto; }
}

/* Insumos → Kardex */
.zm-erp-existencias{ min-width:0; }
.zm-erp-fecha{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--texto-2); }
.zm-erp-fecha input{ margin:0; min-height:38px; width:auto; }
.zm-erp-aviso{ display:flex; align-items:center; gap:8px 14px; flex-wrap:wrap; margin:0 0 14px; padding:12px 14px; border-radius:var(--r-chica); background:var(--solido-2); font-size:13px; color:var(--texto-2); }
.zm-erp-aviso .zm-estado{ color:var(--texto); font-size:13px; }
.zm-erp-aviso .btn{ margin-left:auto; }

/* Cuadratura */
.zm-erp-cuad__cabeza{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; margin:0 0 18px; padding:22px 24px;
  background:var(--solido); border:1px solid var(--linea); border-radius:var(--r-tarjeta); }
.zm-erp-cuad__texto{ min-width:0; flex:1 1 360px; }
.zm-erp-cuad__texto h2{ margin:0; font-size:26px; font-weight:500; letter-spacing:-.035em; line-height:1.12; color:var(--texto); }
.zm-erp-cuad__texto p{ margin:8px 0 0; max-width:64ch; font-size:14px; line-height:1.5; color:var(--texto-2); }
.zm-erp-cuad__puntos{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.zm-erp-cuad__puntos .zm-estado{ gap:0; }
.zm-erp-cuad__puntos .zm-estado::before{ width:10px; height:10px; animation:zm-asoma .22s var(--sal) both; }
.zm-erp-cuad__lado{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.zm-erp-cuad__hora{ font-size:12.5px; color:var(--texto-3); text-align:right; }
.zm-erp-esqueleto{ display:flex; flex-direction:column; gap:10px; }
.zm-erp-esqueleto span{ display:block; height:58px; border-radius:var(--r-chica); background:var(--solido-2); animation:zm-erp-late 1.2s ease-in-out infinite alternate; }
.zm-erp-esqueleto span:nth-child(2){ animation-delay:.15s; } .zm-erp-esqueleto span:nth-child(3){ animation-delay:.3s; } .zm-erp-esqueleto span:nth-child(4){ animation-delay:.45s; }
@keyframes zm-erp-late{ from{ opacity:.45; } to{ opacity:1; } }
.zm-erp-grupo + .zm-erp-grupo{ margin-top:18px; }
.zm-erp-grupo > .zm-lista__titulo{ margin:0; padding:0 4px 8px; }
.zm-erp-punto{ position:relative; border-radius:var(--r-chica); }
.zm-erp-punto + .zm-erp-punto::before{ content:''; position:absolute; left:14px; right:14px; top:0; height:1px; background:var(--linea); opacity:.7; }
.zm-erp-punto__fila, .zm-erp-prov__fila{ all:unset; box-sizing:border-box; display:grid; grid-template-columns:minmax(0,1fr) auto 18px; align-items:center; gap:6px 16px;
  width:100%; min-height:58px; padding:12px 14px; border-radius:var(--r-chica); cursor:pointer; color:var(--texto); transition:background-color .18s ease, transform .14s var(--sal); }
.zm-erp-punto__fila:focus-visible, .zm-erp-prov__fila:focus-visible{ outline:2px solid var(--acento); outline-offset:-2px; }
.zm-erp-punto__fila:active, .zm-erp-prov__fila:active{ transform:scale(.995); }
.zm-erp-punto__titulo{ min-width:0; }
.zm-erp-punto__titulo .zm-estado{ white-space:normal; align-items:flex-start; font-size:14.5px; line-height:1.4; color:var(--texto); }
.zm-erp-punto__titulo .zm-estado::before{ margin-top:.5em; }
.zm-erp-punto__meta{ display:flex; align-items:center; justify-content:flex-end; gap:14px; font-size:13px; color:var(--texto-2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.zm-erp-punto__chevron{ width:8px; height:8px; justify-self:end; margin-right:4px; border-right:1.6px solid var(--texto-3); border-bottom:1.6px solid var(--texto-3);
  transform:translateY(-2px) rotate(45deg); transition:transform .22s var(--sal), border-color .18s ease; }
[aria-expanded="true"] > .zm-erp-punto__chevron{ transform:translateY(2px) rotate(225deg); border-color:var(--texto); }
@media (hover:hover) and (pointer:fine){ .zm-erp-punto__fila:hover, .zm-erp-prov__fila:hover{ background:var(--solido-2); } }
.zm-erp-punto__detalle, .zm-erp-prov__detalle{ padding:2px 14px 16px 30px; animation:zm-asoma .22s var(--sal) both; }
.zm-erp-punto__explica{ margin:0 0 12px; max-width:78ch; font-size:13.5px; line-height:1.55; color:var(--texto-2); }
.zm-erp-detalle{ border-top:1px solid var(--linea); }
.zm-erp-detalle__fila{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:8px 18px; padding:10px 0; border-bottom:1px solid var(--linea); animation:zm-asoma .22s var(--sal) both; }
.zm-erp-detalle__texto{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 280px; }
.zm-erp-detalle__texto b{ font-size:13.5px; font-weight:500; color:var(--texto); overflow-wrap:anywhere; }
.zm-erp-detalle__texto small{ font-size:12.5px; line-height:1.45; color:var(--texto-2); }
.zm-erp-detalle__texto ul{ margin:4px 0 0; padding:0 0 0 16px; font-size:12.5px; line-height:1.5; color:var(--texto-2); }
.zm-erp-detalle__lado{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:0 1 auto; text-align:right; }
.zm-erp-detalle__meta{ font-size:13.5px; font-weight:500; color:var(--texto); font-variant-numeric:tabular-nums; }
.zm-erp-punto__accion{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; }
.zm-erp-punto__accion .zm-estado{ white-space:normal; }
.zm-erp-dialogo label.zm-campo.zm-ins-sep{ margin-top:14px; }
.zm-erp-dialogo__que{ margin:0 0 8px; font-size:15px; font-weight:500; line-height:1.45; color:var(--texto); }

/* Por pagar: antigüedad y proveedores */
.zm-erp-antig{ margin:0 0 16px; }
.zm-erp-tramo{ all:unset; box-sizing:border-box; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,2fr) auto; align-items:center; gap:12px;
  padding:6px 8px; margin:0 -8px; border-radius:10px; cursor:pointer; transition:background-color .18s ease, transform .14s var(--sal); }
.zm-erp-tramo:disabled{ cursor:default; opacity:.55; }
.zm-erp-tramo:not(:disabled):active{ transform:scale(.99); }
.zm-erp-tramo:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
.zm-erp-tramo[aria-pressed="true"]{ background:var(--solido-2); }
.zm-erp-tramo[aria-pressed="true"] .zm-barras__nombre{ color:var(--texto); }
@media (hover:hover) and (pointer:fine){ .zm-erp-tramo:not(:disabled):hover{ background:var(--solido-2); } }
.zm-erp-provs .coleccion-paginada{ display:block; }
.zm-erp-prov{ position:relative; }
.zm-erp-prov + .zm-erp-prov::before{ content:''; position:absolute; left:14px; right:14px; top:0; height:1px; background:var(--linea); opacity:.7; }
.zm-erp-prov__fila{ grid-template-columns:36px minmax(0,1fr) auto 18px; }
.zm-erp-prov__detalle{ padding-left:64px; }
.zm-erp-prov__cifras{ display:flex; flex-wrap:wrap; gap:8px 28px; margin:0 0 10px; }
.zm-erp-prov__cifras > div{ display:flex; flex-direction:column; gap:2px; }
.zm-erp-prov__cifras dt{ font-size:12px; color:var(--texto-3); }
.zm-erp-prov__cifras dd{ margin:0; font-size:15px; font-weight:500; color:var(--texto); font-variant-numeric:tabular-nums; }
.zm-erp-prov__pie{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:12px; }
.zm-erp-docs{ border-top:1px solid var(--linea); }
.zm-erp-doc{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px 20px; flex-wrap:wrap; padding:12px 0; border-bottom:1px solid var(--linea); animation:zm-asoma .22s var(--sal) both; }
.zm-erp-doc__texto{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; flex:1 1 260px; }
.zm-erp-doc__texto b{ font-size:14px; font-weight:500; color:var(--texto); }
.zm-erp-doc__texto small{ font-size:12.5px; color:var(--texto-2); }
.zm-erp-doc__apl{ margin:2px 0 0; padding:0 0 0 16px; font-size:12.5px; line-height:1.55; color:var(--texto-2); font-variant-numeric:tabular-nums; }
.zm-erp-doc__montos{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; text-align:right; }
.zm-erp-doc__saldo{ font-size:16px; font-weight:500; letter-spacing:-.01em; color:var(--texto); font-variant-numeric:tabular-nums; }
.zm-erp-doc__montos small{ font-size:12px; color:var(--texto-3); font-variant-numeric:tabular-nums; }
.zm-erp-doc__acciones{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; margin-top:4px; }
@media(max-width:640px){
  .zm-erp-punto__fila{ grid-template-columns:minmax(0,1fr) 18px; }
  .zm-erp-punto__meta{ grid-column:1; grid-row:2; justify-content:flex-start; padding-left:14px; }
  .zm-erp-punto__chevron{ grid-column:2; grid-row:1 / span 2; }
  .zm-erp-punto__detalle{ padding:2px 12px 14px; }
  .zm-erp-prov__fila{ grid-template-columns:minmax(0,1fr) 18px; }
  .zm-erp-prov__fila .zm-fila__ico{ display:none; }
  .zm-erp-prov__fila .zm-fila__meta{ grid-column:1; grid-row:2; justify-content:flex-start; flex-wrap:wrap; gap:10px; }
  .zm-erp-prov__fila .zm-erp-punto__chevron{ grid-column:2; grid-row:1 / span 2; }
  .zm-erp-prov__detalle{ padding:2px 12px 14px; }
  .zm-erp-doc__montos{ align-items:flex-start; text-align:left; width:100%; }
  .zm-erp-doc__acciones{ justify-content:flex-start; }
  .zm-erp-detalle__lado{ align-items:flex-start; text-align:left; }
  .zm-erp-tramo{ grid-template-columns:minmax(0,1fr) auto; }
  .zm-erp-tramo .zm-avance{ grid-column:1 / -1; grid-row:2; }
  .zm-erp-cuad__cabeza{ padding:18px; }
  .zm-erp-cuad__texto h2{ font-size:22px; }
  .zm-erp-cuad__lado{ align-items:flex-start; }
  .zm-erp-cuad__hora{ text-align:left; }
  .zm-erp-aviso .btn{ margin-left:0; }
}

/* Por cobrar */
.zm-erp-de{ font-size:12px; color:var(--texto-3); }
@media(min-width:641px){ .zm-erp-cxc .zm-fila__meta{ min-width:220px; } }

/* Estado de resultados y criterio del costo de ventas */
.zm-erp-resultado{ display:flex; flex-direction:column; gap:14px; }
.zm-erp-resultado .zm-tarjeta + .zm-tarjeta{ margin-top:0; }
.zm-erp-er > .zm-erp-er__sub{ padding:6px 0 6px 16px; border-top:0; font-size:13px; color:var(--texto-3); }
.zm-erp-er > dd.zm-erp-er__sub{ padding-left:0; }
.zm-erp-er > .zm-total{ padding-top:14px; font-size:16px; }
.zm-erp-criterio > .zm-erp-enlace{ margin-top:2px; }
.zm-erp-criterio__editar{ display:flex; flex-direction:column; gap:10px; max-width:460px; margin:0 0 14px; padding:14px; border-radius:var(--r-chica); background:var(--solido-2); animation:zm-asoma .22s var(--sal) both; }
.zm-erp-criterio__editar .zm-ins-ayuda{ margin:0; }
.zm-erp-criterio__editar input{ margin:0; }
.zm-erp-criterio__botones{ display:flex; justify-content:flex-end; gap:8px; }
.zm-erp-check{ display:flex; align-items:flex-start; gap:8px; margin:0; font-size:13px; font-weight:400; color:var(--texto-2); }
.zm-erp-check input{ width:auto; margin:2px 0 0; }
.zm-erp-transicion{ margin-top:12px; animation:zm-asoma .22s var(--sal) both; }
.zm-erp-transicion__fila{ display:grid; grid-template-columns:minmax(90px,1fr) repeat(4,minmax(0,1fr)); gap:4px 14px; align-items:baseline; padding:10px 0; border-top:1px solid var(--linea);
  font-size:13.5px; color:var(--texto); font-variant-numeric:tabular-nums; }
.zm-erp-transicion__fila > span:nth-child(n+2){ text-align:right; }
.zm-erp-transicion__fila > span:first-child{ display:flex; flex-direction:column; gap:2px; }
.zm-erp-transicion__fila small{ font-size:12px; color:var(--texto-3); }
.zm-erp-transicion__fila--cabeza{ border-top:0; padding-top:0; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--texto-3); }
.zm-erp-transicion__fila[data-criterio="perpetuo"] > span:first-child b{ font-weight:500; }
.zm-erp-transicion > .zm-ins-ayuda{ margin-top:10px; }
@media(max-width:640px){
  .zm-erp-transicion__fila{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .zm-erp-transicion__fila--cabeza{ display:none; }
  .zm-erp-transicion__fila > span:first-child{ grid-column:1 / -1; }
  .zm-erp-transicion__fila > span:nth-child(n+2){ text-align:left; }
  .zm-erp-transicion__fila > span:nth-child(2)::before{ content:'Compras '; color:var(--texto-3); }
  .zm-erp-transicion__fila > span:nth-child(3)::before{ content:'Consumido '; color:var(--texto-3); }
  .zm-erp-transicion__fila > span:nth-child(4)::before{ content:'En el libro '; color:var(--texto-3); }
  .zm-erp-transicion__fila > span:nth-child(5)::before{ content:'Efecto '; color:var(--texto-3); }
}

@media (prefers-reduced-motion: reduce){
  .zm-erp-mov, .zm-erp-detalle__fila, .zm-erp-doc, .zm-erp-punto__detalle, .zm-erp-prov__detalle, .zm-erp-criterio__editar, .zm-erp-transicion,
  .zm-erp-cuad__puntos .zm-estado::before{ animation:zm-funde .18s ease both; }
  .zm-erp-esqueleto span{ animation:none; opacity:.7; }
  .zm-erp-punto__fila, .zm-erp-prov__fila, .zm-erp-punto__chevron, .zm-erp-tramo, .zm-erp-enlace{ transition:none; }
}
/* ── fin zm · erp ── */

/* ── zm · balance v620 ── */
/* zairi balance como ERP contable: cabecera, barra de trabajo (empresa, RUT, período,
   buscador), riel de secciones por grupo y grillas densas con cabecera y totales fijos.
   Sólo tokens. Lo que se toca cien veces al día (el riel, los atajos, cambiar de vista)
   no se anima: responde en el acto. Lo demás reposa en prefers-reduced-motion. */
.zm-conta{ min-width:0; }
.zm-conta .zm-cabeza{ margin-bottom:16px; }
.zm-conta kbd{ display:inline-block; min-width:18px; padding:1px 5px; border:1px solid var(--linea); border-radius:5px; background:var(--solido);
  font:inherit; font-size:11px; line-height:1.5; text-align:center; color:var(--texto-3); font-variant-numeric:tabular-nums; }

/* Barra de trabajo */
.zm-conta__barra{ position:relative; display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap; margin:0 0 14px; padding:10px 12px 10px 16px;
  background:var(--solido); border:1px solid var(--linea); border-radius:var(--r-chica); }
.zm-conta__empresa{ display:flex; flex-direction:column; gap:1px; min-width:0; max-width:300px; padding-right:16px; border-right:1px solid var(--linea); }
.zm-conta__empresa b{ font-size:13.5px; font-weight:500; color:var(--texto); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-conta__empresa > span{ font-size:12px; color:var(--texto-3); font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-conta__empresa .zm-erp-enlace{ font-size:12px; }
.zm-conta__periodo{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.zm-conta__rotulo{ font-size:12px; color:var(--texto-3); }
.zm-conta__corte{ font-size:13.5px; color:var(--texto); }
.zm-conta__periodo .zm-estado{ margin-left:6px; text-transform:none; }
html body .zm-conta__barra :is(input, select), html body .zm-conta-herr :is(input[type="date"], select){ width:auto; margin:0; min-height:36px; padding:5px 10px; font-size:13.5px; border-radius:10px; }
html body .zm-conta__barra .zm-buscar input{ min-height:38px; padding:7px 14px 7px 36px; border-radius:999px; width:100%; }
.zm-conta__paso{ all:unset; box-sizing:border-box; display:inline-grid; place-items:center; width:30px; height:30px; border-radius:8px; font-size:18px; line-height:1; color:var(--texto-2); cursor:pointer; }
.zm-conta__paso:hover{ background:var(--solido-2); color:var(--texto); }
.zm-conta__paso:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
.zm-conta__buscar{ flex:1 1 260px; max-width:440px; margin-left:auto !important; }
.zm-conta__acciones{ display:flex; align-items:center; gap:6px; }
.zm-conta__acciones .zm-mas > summary{ min-height:34px; padding:6px 14px; font-size:13px; }
.zm-conta__aviso{ margin:-4px 0 14px; font-size:13px; color:var(--texto-2); }

/* Ayuda de atajos */
.zm-conta__atajos{ position:absolute; right:10px; top:calc(100% + 8px); z-index:30; width:min(360px, calc(100vw - 32px)); padding:14px 16px;
  background:var(--solido); border:1px solid var(--linea); border-radius:var(--r-chica); box-shadow:var(--pz-sombra); }
.zm-conta__atajos-cabeza{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 10px; font-size:13.5px; }
.zm-conta__atajos-cabeza b{ font-weight:500; color:var(--texto); }
.zm-conta__atajos dl{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 14px; margin:0; font-size:13px; }
.zm-conta__atajos dt{ margin:0; white-space:nowrap; color:var(--texto-3); }
.zm-conta__atajos dd{ margin:0; color:var(--texto-2); line-height:1.45; }

/* Cuerpo: riel + vista */
.zm-conta__cuerpo{ display:grid; grid-template-columns:208px minmax(0,1fr); gap:28px; align-items:start; }
.zm-conta__riel{ position:sticky; top:92px; display:flex; flex-direction:column; gap:14px; max-height:calc(100vh - 112px); overflow:auto; padding:2px 4px 12px 0; scrollbar-width:thin; }
.zm-conta__grupo{ display:flex; flex-direction:column; gap:1px; }
.zm-conta__grupo-titulo{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 10px 5px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-3); }
.zm-conta__grupo-titulo kbd{ letter-spacing:0; text-transform:none; opacity:0; }
.zm-conta__riel:hover .zm-conta__grupo-titulo kbd, .zm-conta__riel:focus-within .zm-conta__grupo-titulo kbd{ opacity:1; }
.zm-conta__item{ all:unset; box-sizing:border-box; position:relative; display:block; width:100%; padding:6px 10px; border-radius:8px; font-size:13.5px; line-height:1.35; color:var(--texto-2); cursor:pointer; }
.zm-conta__item:hover{ background:var(--solido-2); color:var(--texto); }
.zm-conta__item[aria-current="page"]{ background:var(--solido-2); color:var(--texto); font-weight:500; }
.zm-conta__item[aria-current="page"]::before{ content:''; position:absolute; left:0; top:7px; bottom:7px; width:2px; border-radius:2px; background:var(--texto); }
.zm-conta__item:focus-visible{ outline:2px solid var(--acento); outline-offset:-2px; }
.zm-conta__vista{ min-width:0; scroll-margin-top:96px; }
.zm-conta__selector{ display:none; }
.zm-conta__vista-cabeza{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 14px; }
.zm-conta__miga{ display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-3); }
.zm-conta__vista-cabeza h2{ margin:3px 0 0; font-size:21px; font-weight:500; letter-spacing:-.025em; line-height:1.2; color:var(--texto); }
.zm-conta__vista-cabeza p{ margin:5px 0 0; max-width:76ch; font-size:13px; line-height:1.5; color:var(--texto-2); }
/* Cambiar de vista es instantáneo: la entrada escalonada de las cifras no corre aquí. */
.zm-conta__vista .zm-escalona > *{ animation:none; }

/* Herramientas de una vista (filtros, conteos) */
.zm-conta-herr{ display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap; margin:0 0 12px; }
.zm-conta-herr .zm-buscar{ flex:1 1 220px; max-width:360px; }
.zm-conta-herr__dato{ font-size:12.5px; color:var(--texto-3); font-variant-numeric:tabular-nums; }
.zm-conta-herr .btn[aria-pressed="true"]{ background:var(--solido-2); color:var(--texto); }
.zm-conta__fecha{ display:inline-flex; align-items:center; gap:8px; margin:0; font-size:12.5px; font-weight:400; color:var(--texto-3); }
.zm-conta-nota{ margin:0 0 12px; }
.zm-conta-docs, .zm-conta-libro, .zm-conta-mayor, .zm-conta-f29, .zm-conta-resumen{ min-width:0; }
.zm-conta-cifras{ grid-template-columns:repeat(auto-fill,minmax(172px,1fr)); gap:8px; margin:0 0 14px; }
.zm-conta-cifras .zm-cifra{ padding:12px 14px 11px; }
.zm-conta-cifras .zm-cifra__valor{ font-size:21px; }

/* Grilla densa */
.zm-conta-grilla{ position:relative; max-width:100%; max-height:min(70vh, 780px); overflow:auto; background:var(--solido); border:1px solid var(--linea); border-radius:var(--r-chica); overscroll-behavior:contain; scrollbar-width:thin; }
.zm-conta-grilla:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
.zm-conta-tabla{ width:100%; border-collapse:separate; border-spacing:0; font-size:13px; font-variant-numeric:tabular-nums; }
.zm-conta .zm-conta-tabla thead th{ position:sticky; top:0; z-index:2; padding:8px 10px; background:var(--solido-2); border-bottom:1px solid var(--linea);
  font-size:11px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--texto-3); text-align:left; white-space:nowrap; }
.zm-conta .zm-conta-tabla td, .zm-conta .zm-conta-tabla tbody th{ padding:6px 10px; border-bottom:1px solid var(--linea); font-size:13px; line-height:1.4; color:var(--texto); text-align:left; white-space:nowrap; vertical-align:middle; background:transparent; }
.zm-conta .zm-conta-tabla :is(tbody, tfoot) th{ font-weight:400; text-transform:none; letter-spacing:normal; font-size:13px; color:var(--texto); text-align:left; }
.zm-conta .zm-conta-tabla :is(td, th):first-child{ padding-left:14px; }
.zm-conta .zm-conta-tabla :is(td, th):last-child{ padding-right:14px; }
.zm-conta .zm-conta-tabla :is(th, td).num{ text-align:right; font-variant-numeric:tabular-nums; }
.zm-conta .zm-conta-tabla tfoot td, .zm-conta .zm-conta-tabla tfoot th{ position:sticky; bottom:0; z-index:1; padding:8px 10px; background:var(--solido-2); border-top:1px solid var(--linea); border-bottom:0;
  font-size:13px; font-weight:500; color:var(--texto); white-space:nowrap; }
.zm-conta .zm-conta-tabla tbody tr:last-child > *{ border-bottom:0; }
.zm-conta .zm-conta-tabla tbody tr:hover > td{ background:var(--solido-2); }
.zm-conta .zm-conta-tabla tr.zm-conta-fila-abre{ cursor:pointer; }
.zm-conta .zm-conta-tabla .fila-paginacion > td{ background:var(--solido); }
.zm-conta .zm-conta-tabla .fila-paginacion:hover > td{ background:var(--solido); }
.zm-conta-grilla .lista-paginacion{ justify-content:flex-end; border-top:0; padding:6px 0; gap:4px; }
.zm-conta-grilla .lista-paginacion > .muted{ font-size:12.5px; color:var(--texto-3); }
html body .zm-conta-grilla .lista-paginacion .btn{ min-width:32px; min-height:32px; padding:0 9px; border-color:transparent; background:transparent; color:var(--texto-2); box-shadow:none; }
html body .zm-conta-grilla .lista-paginacion .btn[aria-current="page"]{ background:var(--acento-suave); color:var(--acento); }
.zm-conta-fecha{ color:var(--texto-2); font-variant-numeric:tabular-nums; }
/* En una grilla, los enlaces de cada fila son neutros (el azul queda para lo principal). */
.zm-conta-tabla .zm-erp-enlace{ color:var(--texto-2); }
.zm-conta-tabla .zm-erp-enlace:hover{ color:var(--texto); }
.zm-conta-folio{ font-variant-numeric:tabular-nums; }
.zm-conta .zm-conta-tabla td.zm-conta-glosa{ max-width:260px; overflow:hidden; text-overflow:ellipsis; }
.zm-conta .zm-conta-tabla td.zm-conta-tenue, .zm-conta-tenue{ color:var(--texto-3); }
.zm-conta-fuerte{ font-weight:500; }
.zm-conta .zm-conta-tabla td.zm-conta-ancla{ width:28px; padding-right:0; }
.zm-conta-abre{ all:unset; box-sizing:border-box; cursor:pointer; color:var(--texto); border-radius:4px; text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px; }
.zm-conta-abre:hover{ text-decoration-color:var(--texto-3); }
.zm-conta-abre:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
/* Chevron de una fila que se despliega (gira al abrir; sin movimiento en reposo). */
.zm-conta-plegar{ all:unset; box-sizing:border-box; display:inline-grid; place-items:center; width:22px; height:22px; border-radius:6px; cursor:pointer; }
.zm-conta-plegar::before{ content:''; width:6px; height:6px; border-right:1.6px solid var(--texto-3); border-bottom:1.6px solid var(--texto-3); transform:translateX(-1px) rotate(-45deg); transition:transform .18s var(--sal); }
.zm-conta-plegar[aria-expanded="true"]::before{ transform:translateY(-1px) rotate(45deg); border-color:var(--texto); }
.zm-conta-plegar:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
.zm-conta .zm-conta-tabla tr.zm-conta-detalle > td{ background:var(--solido-2); white-space:normal; padding-top:12px; padding-bottom:14px; }
.zm-conta .zm-conta-tabla tr.zm-conta-detalle:hover > td{ background:var(--solido-2); }
.zm-conta-detalle__pares{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:8px 20px; margin:0; }
.zm-conta-detalle__pares dt{ font-size:12px; color:var(--texto-3); }
.zm-conta-detalle__pares dd{ margin:2px 0 0; font-size:13px; color:var(--texto); font-variant-numeric:tabular-nums; }
.zm-conta-detalle__ancho{ grid-column:1 / -1; }
.zm-conta-detalle__acciones{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.zm-conta .zm-conta-tabla tr.zm-conta-detalle .zm-ins-panel{ white-space:normal; }

/* Códigos de cuenta y libros */
.zm-conta-cta{ display:inline-flex; align-items:baseline; gap:10px; min-width:0; }
button.zm-conta-cta{ all:unset; box-sizing:border-box; display:inline-flex; align-items:baseline; gap:10px; cursor:pointer; border-radius:4px; color:var(--texto); }
button.zm-conta-cta:hover .zm-conta-cta__nombre{ text-decoration:underline; text-decoration-color:var(--texto-3); text-underline-offset:3px; }
button.zm-conta-cta:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
.zm-conta-cod{ display:inline-block; min-width:38px; font-size:12px; letter-spacing:.02em; color:var(--texto-3); font-variant-numeric:tabular-nums; }
.zm-conta-cod--grande{ min-width:0; padding:6px 10px; border:1px solid var(--linea); border-radius:10px; font-size:15px; color:var(--texto-2); }
.zm-conta .zm-conta-tabla td.zm-conta-sangria{ padding-left:34px; }
.zm-conta-libro .zm-conta-tabla tbody td{ border-bottom:0; }
.zm-conta .zm-conta-tabla tr.zm-conta-asiento > td{ border-top:1px solid var(--linea); }
.zm-conta .zm-conta-tabla tbody tr.zm-conta-asiento:first-child > td{ border-top:0; }
.zm-conta .zm-conta-tabla tr.zm-conta-clase > *{ background:var(--solido); font-size:11.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--texto-2); padding-top:12px; }
.zm-conta .zm-conta-tabla tr.zm-conta-clase:hover > *{ background:var(--solido); }
.zm-conta .zm-conta-tabla tr.zm-conta-clase .zm-conta-cod{ min-width:22px; }
.zm-conta .zm-conta-tabla tr.zm-conta-clase td.num{ letter-spacing:0; text-transform:none; color:var(--texto-2); }
.zm-conta-saldo{ color:var(--texto-2); }
.zm-conta .zm-conta-tabla tr.zm-conta-fila-marcada > td{ background:var(--solido-2); }
.zm-conta .zm-conta-tabla tr.zm-conta-fila-nota > td{ white-space:normal; font-size:12.5px; color:var(--texto-2); }
.zm-conta .zm-conta-tabla tr.zm-conta-inactiva > td{ color:var(--texto-3); }
.zm-conta-mes{ font-weight:500; }
.zm-conta-volver{ all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:6px; margin:0 0 12px -6px; padding:5px 10px 5px 6px; border-radius:10px; font-size:13.5px; color:var(--texto-2); cursor:pointer; }
.zm-conta-volver > span{ font-size:18px; line-height:1; }
.zm-conta-volver:hover{ background:var(--solido-2); color:var(--texto); }
.zm-conta-volver:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
.zm-conta-mayor__cabeza{ display:flex; align-items:center; gap:14px; margin:0 0 14px; }
.zm-conta-mayor__cabeza h3{ margin:0; font-size:18px; font-weight:500; letter-spacing:-.02em; color:var(--texto); }
.zm-conta-mayor__cabeza p{ margin:3px 0 0; font-size:13px; color:var(--texto-2); }

/* Resumen: cifras que abren su detalle */
.zm-conta-bloque + .zm-conta-bloque{ margin-top:6px; }
.zm-conta-bloque__titulo{ margin:0 0 8px; font-size:11.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-3); }
button.zm-conta-cifra{ position:relative; padding-right:30px; }
.zm-conta-cifra__ir{ position:absolute; right:14px; top:16px; width:7px; height:7px; border-right:1.6px solid var(--texto-3); border-top:1.6px solid var(--texto-3); transform:rotate(45deg); transition:transform .18s var(--sal), border-color .18s ease; }
@media (hover:hover) and (pointer:fine){ button.zm-conta-cifra:hover .zm-conta-cifra__ir{ transform:translateX(2px) rotate(45deg); border-color:var(--texto); } }
.zm-conta-cifra .zm-estado{ font-size:15px; color:var(--texto); }
.zm-conta-cifras--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.zm-conta-paneles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.zm-conta-paneles .zm-tarjeta + .zm-tarjeta{ margin-top:0; }
.zm-conta-panel{ padding:16px 8px 8px; }
.zm-conta-panel .zm-tarjeta__cabeza{ padding:0 10px; margin-bottom:6px; }
.zm-conta-renglones{ display:flex; flex-direction:column; }
.zm-conta-renglon{ all:unset; box-sizing:border-box; position:relative; display:grid; grid-template-columns:minmax(0,1fr) 64px minmax(104px,auto) 14px; align-items:center; gap:12px;
  min-height:44px; padding:8px 10px; border-radius:10px; cursor:pointer; font-size:13.5px; color:var(--texto); }
.zm-conta-renglon + .zm-conta-renglon::before{ content:''; position:absolute; left:10px; right:10px; top:0; height:1px; background:var(--linea); }
.zm-conta-renglon:hover{ background:var(--solido-2); }
.zm-conta-renglon:focus-visible{ outline:2px solid var(--acento); outline-offset:-2px; }
.zm-conta-renglon__eti{ color:var(--texto-2); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-conta-renglon__linea{ text-align:right; font-size:11.5px; color:var(--texto-3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.zm-conta-renglon__monto{ font-weight:500; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.zm-conta-renglon__ir{ width:7px; height:7px; border-right:1.6px solid var(--texto-3); border-top:1.6px solid var(--texto-3); transform:rotate(45deg); }

/* Cierre de mes con zairi */
.zm-conta-cierre{ margin:0 0 16px; padding:16px 18px; }
.zm-conta-cierre__cabeza{ display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; }
.zm-conta-cierre__orbe{ flex:0 0 36px; width:36px; height:36px; overflow:hidden; display:grid; place-items:center; }
.zm-conta-cierre__orbe > *{ margin:0 !important; }
.zm-conta-cierre__texto{ flex:1 1 320px; min-width:0; }
.zm-conta-cierre__texto h3{ margin:0; font-size:15px; font-weight:500; letter-spacing:-.01em; color:var(--texto); }
.zm-conta-cierre__texto p{ margin:4px 0 0; max-width:78ch; font-size:13px; line-height:1.5; color:var(--texto-2); }
.zm-conta-cierre__lado{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.zm-conta-cierre__sano{ margin:12px 0 0; font-size:13px; line-height:1.5; color:var(--texto-2); }
.zm-conta-cierre__sano .zm-estado{ white-space:normal; color:var(--texto); }
.zm-conta-cierre__lista{ margin-top:12px; }

/* El cierre de mes y la conciliación conservan .sim-hero (la familia de tarjetas de zairi,
   test-zairi-messages-ui), pero con la forma del ERP: bloque sereno, sin levantarse al pasar. */
html body .sim-hero:is(.zm-conta-cierre, .zm-conta-banco__inicio){ background:var(--solido); background-image:none; -webkit-backdrop-filter:none; backdrop-filter:none;
  border:1px solid var(--linea); border-radius:var(--r-tarjeta); box-shadow:none; text-align:left; animation:none; }
html body .sim-hero:is(.zm-conta-cierre, .zm-conta-banco__inicio):hover{ transform:none; border-color:var(--linea); box-shadow:none; }
html body .sim-hero.zm-conta-cierre{ display:block; padding:16px 18px; margin:0 0 16px; }
html body .sim-hero.zm-conta-banco__inicio{ display:flex; flex-direction:row; align-items:flex-start; gap:14px; padding:16px 18px; margin:0 0 14px; }

/* Configuración tributaria */
.zm-conta-regimen{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; margin:0 0 14px; padding:16px 18px; }
.zm-conta-regimen__texto{ flex:1 1 320px; min-width:0; }
.zm-conta-regimen__texto .zm-ceja{ margin-bottom:4px; }
.zm-conta-regimen__texto h3{ margin:0; font-size:16px; font-weight:500; letter-spacing:-.015em; color:var(--texto); }
.zm-conta-regimen__texto p{ margin:4px 0 0; font-size:13px; line-height:1.5; color:var(--texto-2); }
.zm-conta-regimen__texto small{ display:block; margin-top:4px; font-size:12.5px; color:var(--texto-3); }
.zm-conta-regimen__editar{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
html body .zm-conta-regimen__editar :is(select, input){ width:auto; min-width:130px; margin:0; min-height:34px; padding:5px 10px; font-size:13.5px; }

/* F29 como formulario */
.zm-conta-f29__lados{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; margin:0 0 14px; }
.zm-conta-f29__lados .zm-tarjeta + .zm-tarjeta{ margin-top:0; }
.zm-conta-f29 .zm-tarjeta{ padding:16px 18px; }
.zm-conta-f29 .zm-tarjeta__cabeza{ margin-bottom:8px; }
.zm-conta .zm-conta-tabla--form thead th{ position:static; background:transparent; padding:0 0 8px; }
.zm-conta .zm-conta-tabla--form :is(td, tbody th, tfoot th, tfoot td){ padding:8px 0; background:transparent; white-space:normal; }
.zm-conta .zm-conta-tabla--form :is(td, th).num{ width:1%; white-space:nowrap; }
.zm-conta .zm-conta-tabla--form tbody th{ color:var(--texto-2); font-size:13.5px; }
.zm-conta .zm-conta-tabla--form :is(td, th):first-child{ padding-left:0; }
.zm-conta .zm-conta-tabla--form :is(td, th):last-child{ padding-right:0; }
.zm-conta .zm-conta-tabla--form tbody tr:hover > *{ background:transparent; }
.zm-conta .zm-conta-tabla--form tfoot :is(td, th){ position:static; border-top:1px solid var(--linea); padding-top:12px; font-size:15px; }
.zm-conta .zm-conta-tabla--form tbody th small{ display:block; font-size:12px; color:var(--texto-3); }
.zm-conta .zm-conta-tabla--form :is(td, th).zm-conta-linea{ width:64px; padding-left:10px; padding-right:18px; text-align:right; font-size:12px; color:var(--texto-3); font-variant-numeric:tabular-nums; }
.zm-conta .zm-conta-tabla--form tr.zm-conta-total > *{ font-weight:500; color:var(--texto); }
.zm-conta .zm-conta-tabla--form tr.zm-conta-total > .zm-conta-linea{ color:var(--texto-2); }
.zm-conta-campo{ display:inline-flex; align-items:center; gap:6px; justify-content:flex-end; }
html body .zm-conta-campo input{ width:88px; margin:0; min-height:32px; padding:4px 8px; font-size:13.5px; text-align:right; }
.zm-conta-campo > span{ font-size:12.5px; color:var(--texto-3); }
.zm-conta-f29__acciones{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:14px 0 6px; }
.zm-conta-f29__marcar{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.zm-conta-f29__marcar .zm-estado{ margin-right:6px; }

/* Conciliación bancaria */
.zm-conta-banco{ min-width:0; }
.zm-conta-banco__inicio{ display:flex; align-items:flex-start; gap:14px; margin:0 0 14px; padding:16px 18px; }
.zm-conta-banco__texto{ flex:1 1 320px; min-width:0; }
.zm-conta-banco__texto h3{ margin:0; font-size:15px; font-weight:500; color:var(--texto); }
.zm-conta-banco__texto p{ margin:4px 0 12px; max-width:78ch; font-size:13px; line-height:1.55; color:var(--texto-2); }
.zm-conta-banco__texto b{ font-weight:500; color:var(--texto); }
.zm-conta-banco__titulo{ font-size:15px; font-weight:500; color:var(--texto); }
.zm-conta-banco__aviso{ margin:0 0 6px; }
.zm-conta-banco__aviso .zm-estado{ white-space:normal; }
.zm-conta-banco__acciones{ display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; margin:12px 0 0; }
.zm-conta-banco__grupo{ padding:16px 18px; }
.zm-conta-banco__grupo + .zm-conta-banco__grupo{ margin-top:12px; }
.zm-conta-banco__lista{ border-top:1px solid var(--linea); }
.zm-conta-banco__mov{ display:flex; align-items:center; gap:6px 14px; flex-wrap:wrap; padding:9px 0; border-bottom:1px solid var(--linea); font-size:13px; color:var(--texto); }
.zm-conta-banco__mov input[type="checkbox"]{ margin:0; }
.zm-conta-banco__que{ flex:1 1 260px; min-width:0; color:var(--texto-2); }
.zm-conta-banco__que b{ font-weight:500; color:var(--texto); font-variant-numeric:tabular-nums; }
.zm-conta-banco__monto{ font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap; }
.zm-conta-banco__con{ flex:1 1 100%; font-size:12.5px; color:var(--texto-3); }
.zm-conta-banco__elegir{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
html body .zm-conta-banco__elegir select{ width:auto; max-width:320px; margin:0; min-height:34px; padding:5px 10px; font-size:13px; }
.zm-conta-banco__nota{ flex:1 1 100%; }
.zm-conta-banco__nota .zm-estado{ white-space:normal; font-size:12.5px; }

/* Tableta y teléfono: el riel pasa a ser un selector de sección */
@media (min-width:1081px) and (max-width:1180px), (max-width:760px){ .zm-conta-paneles{ grid-template-columns:minmax(0,1fr); } }
@media(max-width:1080px){
  .zm-conta__cuerpo{ grid-template-columns:minmax(0,1fr); gap:0; }
  .zm-conta__riel{ display:none; }
  .zm-conta__selector{ display:flex; align-items:center; gap:10px; margin:0 0 14px; font-size:12.5px; font-weight:400; color:var(--texto-3); }
  html body .zm-conta__selector select{ flex:1 1 auto; width:auto; max-width:360px; margin:0; min-height:40px; padding:7px 12px; font-size:14.5px; }
}
@media(max-width:640px){
  .zm-conta__barra{ padding:12px; gap:10px; }
  .zm-conta__empresa{ max-width:none; flex:1 1 100%; padding:0 0 10px; border-right:0; border-bottom:1px solid var(--linea); }
  .zm-conta__periodo{ flex:1 1 100%; }
  .zm-conta__buscar{ flex:1 1 100%; max-width:none; margin-left:0 !important; }
  .zm-conta__acciones{ flex:1 1 100%; justify-content:flex-end; }
  .zm-conta__acciones .zm-conta__atajos-boton{ display:none; }
  html body .zm-conta__selector select{ max-width:none; }
  .zm-conta__vista-cabeza h2{ font-size:19px; }
  .zm-conta-grilla{ max-height:none; }
  .zm-conta .zm-conta-tabla thead th{ position:static; }
  .zm-conta .zm-conta-tabla tfoot :is(td, th){ position:static; }
  .zm-conta .zm-conta-tabla td.zm-conta-glosa{ max-width:200px; }
  .zm-conta-cifras, .zm-conta-cifras--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .zm-conta-renglon{ grid-template-columns:minmax(0,1fr) auto 14px; }
  .zm-conta-renglon__linea{ display:none; }
  .zm-conta-cifras .zm-cifra__valor{ font-size:18px; }
  .zm-conta-f29__lados{ grid-template-columns:minmax(0,1fr); }
  .zm-conta-f29 .zm-tarjeta{ padding:14px; }
  .zm-conta-f29__acciones{ align-items:flex-start; }
  .zm-conta-cierre__lado{ width:100%; }
}
/* Sin puntero fino (tacto) no se muestran las teclas del riel. */
@media (hover:none){ .zm-conta__grupo-titulo kbd, .zm-conta__acciones .zm-conta__atajos-boton{ display:none; } }
@media (prefers-reduced-motion: reduce){
  .zm-conta-plegar::before, .zm-conta-cifra__ir{ transition:none; }
}
/* ── fin zm · balance v620 ── */
/* ── zm · menu v620 ── */
/* v620 · Frente «menu»: el menú lateral (secciones nuevas, sin «Nuevo») y el
   «Destacar» de la agenda. Sólo tokens; nada de color literal. */

/* ---------- 1 · Menú: títulos de sección que caben ----------
   «Inventario y facturación» es el título más largo que ha tenido el menú y la
   capa v462 (ZAIRI SIGNATURE) le pone a los títulos un tope de 130 px (sin él, plegar el menú no
   tendría desde dónde animar el ancho). A 130 px el título quedaba cortado en
   «INVENTARIO Y FAC». Se sube el tope para el menú abierto; el plegado sigue
   con su max-width:0, que pesa más (.app.collapsed .nav-group span). */
.nav-group span{ max-width:210px; text-overflow:ellipsis; }

/* ---------- 2 · «Destacar» de la agenda: un menú de vidrio SOBRE la agenda ----------
   Por qué se veía transparente: .agenda-filtros lleva backdrop-filter (capa 24),
   y eso la vuelve un contexto de apilado. El desplegable, con su z-index:30,
   quedaba encerrado ahí dentro, y lo que viene después en la página —los botones
   del día, la cabecera pegajosa de columnas (z-index 9) y la línea de la hora—
   se pintaba ENCIMA de él: se leía «Siguiente» atravesando «Consulta».
   Dos arreglos:
   · Mientras el menú está abierto la barra sube a z-index 20: sobre la agenda y
     bajo la barra superior (45), las ventanas (50) y el ⌘K (95).
   · El vidrio de la barra pasa a un ::before. Un elemento con backdrop-filter es
     «raíz de fondo»: el desenfoque de sus hijos sólo ve lo que está dentro de él,
     así que el menú (que cuelga por debajo de la barra) no habría podido
     difuminar la agenda. Con el vidrio en el ::before la barra se ve idéntica
     (mismo --v-fondo, mismo --v-filtro, incluido el comportamiento nocturno de
     la doble declaración) y el menú difumina de verdad lo que tapa.
   El menú es el vidrio alto del sistema, el mismo de los avisos flotantes v619:
   --v-fondo-alto (blanco al 90-78 % de día, azul noche al 62-78 %) con blur 20 y
   saturación 180. Con transparencia reducida, o sin backdrop-filter, es sólido. */
.agenda-filtros{ position:relative; isolation:isolate; background:none; background-image:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
.agenda-filtros::before{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:var(--v-fondo); background-image:var(--v-fondo);
  -webkit-backdrop-filter:var(--v-filtro); backdrop-filter:var(--v-filtro);
}
.agenda-filtros:has(.af-destacar[open]){ z-index:20; }

.af-destacar > summary{ color:var(--texto); background:transparent; transition:background-color .18s ease, border-color .18s ease; }
@media (hover:hover) and (pointer:fine){ .af-destacar > summary:hover{ background:var(--solido-2); } }
.af-destacar[open] > summary{ background:var(--solido-2); }
.af-destacar > summary:focus-visible{ outline:2px solid var(--acento); outline-offset:3px; }
.af-destacar-cuenta{
  display:inline-grid; place-items:center; min-width:19px; height:19px; padding:0 5px; margin-left:2px;
  border-radius:var(--r-boton); background:var(--texto); color:var(--fondo);
  font-size:11px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums;
}

.af-destacar-opciones{
  z-index:30; top:calc(100% + 8px); right:0; min-width:240px; padding:6px; gap:2px;
  border-radius:16px; color:var(--texto);
  background:var(--v-fondo-alto);
  -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--v-borde);
  --zm-destacar-luz:color-mix(in srgb, var(--solido) 78%, transparent);
  box-shadow:inset 0 1px 0 var(--zm-destacar-luz), var(--pz-sombra);
  transform-origin:top right;
  animation:zm-destacar-abre .18s var(--sal) both;
}
html[data-theme="dark"] .af-destacar-opciones{ --zm-destacar-luz:color-mix(in srgb, var(--texto) 14%, transparent); }
.af-destacar-titulo{ margin:6px 10px 4px; font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-3); }
.af-destacar-opciones .leg-chip{
  display:flex; align-items:center; gap:10px; width:100%; min-height:40px; margin:0; padding:8px 10px;
  border:0; border-radius:10px; background:transparent; box-shadow:none; opacity:1;
  color:var(--texto); font-size:13.5px; font-weight:500; text-align:left;
  transition:background-color .18s ease, transform .14s var(--sal);
}
@media (hover:hover) and (pointer:fine){ .af-destacar-opciones .leg-chip:hover{ background:color-mix(in srgb, var(--texto) 6%, transparent); border-color:transparent; } }
.af-destacar-opciones .leg-chip:active{ transform:scale(.98); }
.af-destacar-opciones .leg-chip.on{ background:color-mix(in srgb, var(--texto) 8%, transparent); color:var(--texto); }
.af-destacar-opciones .leg-chip.dim{ opacity:1; color:var(--texto-2); }
.af-destacar-opciones .leg-chip:focus-visible, .af-destacar-opciones .leg-clear:focus-visible{ outline:2px solid var(--acento); outline-offset:-2px; }
.af-destacar-opciones .leg-dot{ width:9px; height:9px; flex:none; margin:0 1px 0 4px; } /* 14 px de ancho, centrado como la estrella de «Primera vez» (11 px + 3 de margen) */
.af-destacar-et{ flex:1 1 auto; min-width:0; }
.af-destacar-check{ display:inline-grid; place-items:center; flex:none; color:var(--texto); opacity:0; transform:scale(.8); transition:opacity .16s ease, transform .18s var(--sal); }
.af-destacar-opciones .leg-chip.on .af-destacar-check{ opacity:1; transform:none; }
.af-destacar-opciones .leg-clear{
  width:100%; min-height:40px; margin:4px 0 0; padding:8px 10px; text-align:left;
  border:0; border-top:1px solid var(--linea); border-radius:0 0 10px 10px;
  background:transparent; color:var(--texto-2); font-size:13px; font-weight:500;
}
@media (hover:hover) and (pointer:fine){ .af-destacar-opciones .leg-clear:hover{ color:var(--texto); text-decoration:none; } }
@keyframes zm-destacar-abre{ from{ opacity:0; transform:translate3d(0,-4px,0) scale(.98); } to{ opacity:1; transform:none; } }
@media (max-width:640px){
  .af-destacar-opciones{ min-width:min(260px, calc(100vw - 48px)); }
}
@media (prefers-reduced-motion: reduce){
  .af-destacar-opciones{ animation:zm-destacar-funde .14s ease both; }
  .af-destacar-opciones .leg-chip, .af-destacar-check, .af-destacar > summary{ transition:none; }
  .af-destacar-opciones .leg-chip:active{ transform:none; }
  .af-destacar-check{ transform:none; }
}
@keyframes zm-destacar-funde{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-transparency: reduce){
  .af-destacar-opciones{ background:var(--solido); background-image:none; -webkit-backdrop-filter:none; backdrop-filter:none; border-color:var(--linea); }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .af-destacar-opciones{ background:var(--solido); background-image:none; border-color:var(--linea); }
}
/* ── fin zm · menu v620 ── */
/* ── zm · finanzas v620 ── */
/* Finanzas (v620): cabecera con una acción principal, período y cinco cifras (sólo
   con montos), cerebro de zairi plegado, solapas y un libro de movimientos denso
   —fecha, tipo con su punto, qué fue, de quién, documento, método y el monto a la
   derecha en cifras tabulares—. Cada fila se abre en su desglose con las acciones.
   En el teléfono cada movimiento pasa a dos líneas (sin scroll lateral). Sólo
   tokens: el color vive en los puntos de estado y el acento en la acción principal. */
.zm-fin{ min-width:0; }
.zm-fin-oculto{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.zm-fin-nota{ margin:0; font-size:12.5px; line-height:1.5; color:var(--texto-2); }
.zm-fin-error{ margin:0; font-size:13px; line-height:1.45; color:var(--danger); }
.zm-fin .zm-campo input, .zm-fin .zm-campo select, .zm-fin .zm-campo textarea,
.zm-fin-modal .zm-campo input, .zm-fin-modal .zm-campo select, .zm-fin-modal .zm-campo textarea{ margin:0; }
.zm-fin .zm-campo > span, .zm-fin-modal .zm-campo > span{ margin:0; }

/* Período y cifras */
.zm-fin-resumen{ margin:0 0 20px; }
.zm-fin-periodo{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; margin:0 0 12px; }
.zm-fin-periodo__control{ display:flex; align-items:flex-end; flex-wrap:wrap; gap:10px; min-width:0; max-width:100%; }
.zm-fin-periodo__texto{ margin:0; font-size:13px; color:var(--texto-3); }
.zm-fin-periodo__rango{ display:flex; align-items:flex-end; flex-wrap:wrap; gap:8px; animation:zm-asoma .22s var(--sal) both; }
.zm-fin-periodo__rango .zm-campo{ flex:0 1 164px; }
.zm-fin-periodo__rango input{ min-height:36px; padding:6px 10px; }
.zm-fin-periodo__rango .btn{ min-height:36px; }
.zm-fin-cifras{ grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); margin:0; }
.zm-fin-cifras .zm-cifra__sub .zm-estado{ font-size:12px; color:var(--texto-3); }

/* Cerebro de zairi (mismo cartel que los demás módulos) */
.zm-fin-cerebro__lista{ margin-top:10px; }
.zm-fin-cerebro__tipo{ display:block; margin:0 0 2px; font-size:10.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-3); }
.zm-fin-cerebro__donde{ margin:10px 2px 0; font-size:12.5px; color:var(--texto-2); }

/* Solapas, filtros y aviso de «sólo estos» */
.zm-fin-cuenta{ margin-left:7px; font-size:12px; color:var(--texto-3); font-variant-numeric:tabular-nums; }
.zm-fin-filtros{ margin-bottom:12px; }
.zm-fin .zm-buscar input{ margin:0; padding:8px 14px 8px 36px; border-radius:999px; }
.zm-fin-solo{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin:0 0 12px; padding:10px 14px; border-radius:var(--r-chica); background:var(--solido-2); font-size:13.5px; line-height:1.45; color:var(--texto-2); animation:zm-asoma .22s var(--sal) both; }
.zm-fin-solo b{ color:var(--texto); font-weight:500; }
.zm-fin-solo .btn{ margin-left:auto; }

/* El libro */
.zm-fin-libro{ min-width:0; background:var(--solido); border:1px solid var(--linea); border-radius:var(--r-tarjeta); overflow:hidden; scroll-margin-top:96px; }
.zm-fin-libro__cabeza{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:6px 16px; padding:14px 20px 12px; }
.zm-fin-libro__cabeza h2{ margin:0; font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-3); }
.zm-fin-libro__resumen{ font-size:13px; color:var(--texto-2); font-variant-numeric:tabular-nums; }
.zm-fin-libro__resumen b{ font-weight:500; color:var(--texto); }
.zm-fin-libro > .zm-vacio{ border-top:1px solid var(--linea); }
.zm-fin-cargando{ margin:0; padding:40px 16px; text-align:center; font-size:13.5px; color:var(--texto-2); }
.zm-fin-tabla{ overflow-x:auto; }
html .zm-fin-tabla table{ width:100%; min-width:900px; border-collapse:collapse; table-layout:fixed; }
html .zm-fin-tabla th, html[data-theme="dark"] .zm-fin-tabla th{ padding:10px 12px; background:transparent; border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-3); text-align:left; white-space:nowrap; }
html .zm-fin-tabla td{ height:48px; padding:0 12px; border-bottom:1px solid var(--linea); font-size:13.5px; color:var(--texto); vertical-align:middle; white-space:nowrap; }
html .zm-fin-tabla th:first-child, html .zm-fin-tabla td:first-child{ padding-left:20px; }
html .zm-fin-tabla th:last-child, html .zm-fin-tabla td:last-child{ padding-right:18px; }
html .zm-fin-tabla tbody > tr:last-child > td{ border-bottom:0; }
html .zm-fin-tabla .zm-fin-num, html[data-theme="dark"] .zm-fin-tabla th.zm-fin-num{ text-align:right; font-variant-numeric:tabular-nums; }
html .zm-fin-tabla th.zm-fin-c--fecha{ width:108px; }
html .zm-fin-tabla th.zm-fin-c--tipo{ width:120px; }
html .zm-fin-tabla th.zm-fin-c--quien{ width:22%; }
html .zm-fin-tabla th.zm-fin-c--doc{ width:112px; }
html .zm-fin-tabla th.zm-fin-c--metodo{ width:124px; }
html .zm-fin-tabla th.zm-fin-c--monto{ width:132px; }
html .zm-fin-tabla th.zm-fin-c--chev{ width:44px; }
html .zm-fin-tabla td.zm-fin-c--fecha{ color:var(--texto-2); font-variant-numeric:tabular-nums; }
html .zm-fin-tabla td.zm-fin-c--metodo{ color:var(--texto-2); }
html .zm-fin-tabla td.zm-fin-c--monto{ font-weight:500; letter-spacing:-.01em; }
.zm-fin-corta{ display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html .zm-fin-tabla td.zm-fin-c--doc{ color:var(--texto-2); font-variant-numeric:tabular-nums; }
.zm-fin-fila{ cursor:pointer; transition:background-color .18s ease; }
.zm-fin-fila--abierta{ background:var(--solido-2); }
html .zm-fin-tabla .zm-fin-fila--abierta > td{ border-bottom-color:transparent; }
.zm-fin-fila--anulada .zm-fin-abre{ color:var(--texto-2); font-weight:400; }
html .zm-fin-tabla .zm-fin-fila--anulada td.zm-fin-c--monto{ color:var(--texto-3); font-weight:400; text-decoration:line-through; }
.zm-fin-abre{ all:unset; box-sizing:border-box; display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; color:var(--texto); font-weight:500; letter-spacing:-.005em; border-radius:6px; }
.zm-fin-abre:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
.zm-fin-enlace{ all:unset; box-sizing:border-box; display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; cursor:pointer; color:var(--texto);
  text-decoration:underline; text-decoration-color:var(--linea); text-underline-offset:3px; border-radius:4px; transition:text-decoration-color .18s ease, color .18s ease; }
.zm-fin-enlace:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
html .zm-fin-tabla td.zm-fin-c--chev{ text-align:right; }
.zm-fin-c--chev i{ display:inline-block; width:7px; height:7px; margin-right:4px; border-right:1.6px solid var(--texto-3); border-top:1.6px solid var(--texto-3); transform:rotate(45deg); transition:transform .18s var(--sal), border-color .18s ease; }
.zm-fin-fila--abierta .zm-fin-c--chev i{ transform:rotate(135deg); border-color:var(--texto); }
@media (hover:hover) and (pointer:fine){
  .zm-fin-fila:hover{ background:var(--solido-2); }
  .zm-fin-fila:hover .zm-fin-c--chev i{ border-color:var(--texto); }
  .zm-fin-fila:not(.zm-fin-fila--abierta):hover .zm-fin-c--chev i{ transform:translateX(2px) rotate(45deg); }
  .zm-fin-enlace:hover{ text-decoration-color:var(--texto-2); }
}
html .zm-fin-tabla td.zm-fin-c--movil{ display:none; }
.zm-fin-paginas{ border-top:1px solid var(--linea); padding:0 12px; }

/* Desglose de una fila */
html .zm-fin-tabla tr.zm-fin-det-fila > td{ height:auto; padding:2px 20px 18px; background:var(--solido-2); white-space:normal; cursor:default; }
.zm-fin-det{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:12px 32px; align-items:start; animation:zm-asoma .22s var(--sal) both; }
.zm-fin-det__pares > dt, .zm-fin-det__pares > dd{ padding:7px 0; font-size:13px; }
.zm-fin-det__pares > dd{ overflow-wrap:anywhere; }
.zm-fin-det__conexiones{ display:flex; flex-direction:column; gap:10px; min-width:0; padding-top:4px; }
.zm-fin-conexiones{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.zm-fin-conexiones__bloque h4{ margin:0 0 6px; font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-3); }
.zm-fin-compras{ list-style:none; margin:0; padding:0; }
.zm-fin-compras li{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:4px 12px; padding:8px 0; border-top:1px solid var(--linea); }
.zm-fin-compras li:first-child{ border-top:0; }
.zm-fin-compras__que{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.zm-fin-compras__que b{ font-size:13.5px; font-weight:500; color:var(--texto); }
.zm-fin-compras__que small{ font-size:12px; color:var(--texto-2); font-variant-numeric:tabular-nums; }
.zm-fin-compras__total{ font-size:13.5px; font-weight:500; font-variant-numeric:tabular-nums; }
.zm-fin-conexiones__enlaces{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.zm-fin-conexiones__cita{ flex-basis:100%; font-size:13px; line-height:1.45; color:var(--texto-2); }
.zm-fin-det__acciones{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-top:12px; border-top:1px solid var(--linea); }
.zm-fin-det__acciones .zm-fin-eliminar{ margin-left:auto; color:var(--texto-2); }
.zm-fin-det__recibo, .zm-fin-det > .zm-fin-error{ grid-column:1 / -1; }
.zm-fin-editar{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:flex-start; gap:10px 12px; padding:14px 16px; border:1px solid var(--linea); border-radius:var(--r-chica); background:var(--solido); animation:zm-asoma .18s var(--sal) both; }
.zm-fin-editar .zm-campo{ flex:1 1 150px; }
.zm-fin-editar__motivo{ flex-basis:100% !important; }
.zm-fin-editar__motivo textarea{ min-height:64px; }
.zm-fin-editar__nota{ flex:1 1 260px; align-self:center; }
.zm-fin-editar__acciones{ display:flex; gap:8px; margin-left:auto; align-self:flex-end; }
.zm-fin-eco{ font-size:12px; color:var(--texto-3); font-variant-numeric:tabular-nums; }

/* Abonos y saldos */
.zm-fin-saldos .zm-frase{ margin-bottom:14px; }
.zm-fin-saldos .zm-fin-cifras{ margin:0 0 16px; }
html .zm-fin-tabla--saldos table{ min-width:760px; }
html .zm-fin-tabla--saldos th.zm-fin-c--pac{ width:26%; }
html .zm-fin-tabla--saldos th.zm-fin-c--total, html .zm-fin-tabla--saldos th.zm-fin-c--abonado, html .zm-fin-tabla--saldos th.zm-fin-c--saldo{ width:124px; }
html .zm-fin-tabla--saldos th.zm-fin-c--ultimo{ width:120px; }
html .zm-fin-tabla--saldos td.zm-fin-c--plan, html .zm-fin-tabla--saldos td.zm-fin-c--ultimo, html .zm-fin-tabla--saldos td.zm-fin-c--abonado, html .zm-fin-tabla--saldos td.zm-fin-c--total{ color:var(--texto-2); }
html .zm-fin-tabla--saldos td.zm-fin-c--saldo{ font-weight:500; }

/* Recepción: entradas directas al formulario */
.zm-fin-registrar{ max-width:720px; }
.zm-fin-registrar__lista{ margin:0 -8px 12px; }
.zm-fin-registrar .zm-tarjeta__cabeza{ margin-bottom:8px; }

/* Aviso breve tras una acción: una píldora de tinta abajo, como en iOS. */
.zm-fin-aviso{ position:fixed; left:50%; bottom:24px; z-index:60; max-width:min(560px,calc(100vw - 32px)); margin:0; padding:11px 18px;
  border-radius:999px; background:var(--texto); color:var(--fondo); font-size:13.5px; line-height:1.4; text-align:center;
  box-shadow:var(--pz-sombra); transform:translateX(-50%); animation:zm-fin-aviso .22s var(--sal) both; pointer-events:none; }
@keyframes zm-fin-aviso{ from{ opacity:0; transform:translate(-50%,8px); } to{ opacity:1; transform:translate(-50%,0); } }

/* El formulario del movimiento */
.zm-fin-modal{ max-width:640px; }
.zm-fin-form{ display:flex; flex-direction:column; gap:0; }
.zm-fin-form__bloque{ display:flex; flex-direction:column; gap:12px; padding:0 0 16px; min-width:0; }
.zm-fin-form__bloque + .zm-fin-form__bloque{ padding-top:16px; border-top:1px solid var(--linea); }
.zm-fin-form__bloque:empty{ display:none; }
.zm-fin-form__bloque > .zm-seg{ align-self:flex-start; }
.zm-fin-form__saldo{ max-width:320px; }
.zm-fin-form__saldo > dt, .zm-fin-form__saldo > dd{ padding:6px 0; font-size:13.5px; }
.zm-fin-respaldo .pago-respaldo-campos{ display:flex; flex-direction:column; gap:8px; }
.zm-fin-respaldo .pago-respaldo-campos label{ display:flex; flex-direction:column; gap:6px; margin:0; font-size:12.5px; color:var(--texto-2); }
.zm-fin-respaldo .pago-respaldo-campos input{ margin:0; }
.zm-fin-subform{ display:flex; flex-direction:column; gap:10px; padding:12px 14px; border-radius:var(--r-chica); background:var(--solido-2); animation:zm-asoma .18s var(--sal) both; }
.zm-fin-subform input, .zm-fin-subform select{ margin:0; }
.zm-fin-subform__acciones{ display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.zm-fin-check{ display:flex; align-items:flex-start; gap:10px; margin:0; font-size:13.5px; font-weight:400; line-height:1.45; color:var(--texto); cursor:pointer; }
.zm-fin-check input[type="checkbox"]{ flex:0 0 auto; margin:2px 0 0; }
.zm-fin-check b{ font-weight:500; }
.zm-fin-leyendo{ display:flex; align-items:center; gap:6px; }
.zm-fin-zairi{ display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:var(--r-chica); background:var(--solido-2); font-size:13.5px; line-height:1.5; color:var(--texto); animation:zm-asoma .22s var(--sal) both; }
.zm-fin-zairi__orbe{ flex:0 0 22px; width:22px; height:22px; margin-top:1px; }
.zm-fin-zairi__texto{ flex:1 1 auto; min-width:0; }
.zm-fin-zairi__texto b{ font-weight:500; }
.zm-fin-zairi ul{ list-style:none; margin:6px 0 8px; padding:0; display:flex; flex-direction:column; gap:6px; }
.zm-fin-zairi li{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2px 12px; font-size:13px; color:var(--texto-2); }
.zm-fin-zairi__resumen{ margin:0 0 6px; }
.zm-fin-zairi__resumen .zm-estado{ white-space:normal; }
.zm-fin-zairi__acciones{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; }
.zm-fin-zairi__asociar span{ font-size:13px; color:var(--texto-2); }
.zm-fin-zairi__asociar input{ width:84px; margin:0; text-align:center; font-variant-numeric:tabular-nums; }
.zm-fin-modal .zm-pie-acciones{ margin-top:4px; flex-wrap:wrap; }
.zm-fin-modal .zm-pie-acciones .zm-pie-nota{ flex:1 1 220px; line-height:1.4; }
.zm-fin-pp{ position:relative; }
.zm-fin-pp__elegido{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 10px 9px 14px; border:1px solid var(--linea); border-radius:var(--r-campo); background:var(--solido); }
.zm-fin-pp__nombre{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.zm-fin-pp__nombre b{ font-size:14px; font-weight:500; color:var(--texto); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-fin-pp__nombre small{ font-size:12px; color:var(--texto-3); }
.zm-fin-pp__lista{ position:absolute; z-index:30; left:0; right:0; top:100%; margin-top:4px; padding:6px; max-height:260px; overflow:auto; display:flex; flex-direction:column;
  background:var(--solido); border:1px solid var(--linea); border-radius:var(--r-chica); box-shadow:var(--pz-sombra); animation:zm-llega .18s var(--sal) both; }
.zm-fin-pp__op{ all:unset; box-sizing:border-box; display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 8px; width:100%; padding:9px 10px; border-radius:10px; cursor:pointer; font-size:14px; color:var(--texto); }
.zm-fin-pp__op b{ font-weight:500; }
.zm-fin-pp__op small{ font-size:12px; color:var(--texto-3); }
.zm-fin-pp__op:hover, .zm-fin-pp__op:focus-visible{ background:var(--solido-2); }
.zm-fin-pp__op:focus-visible{ outline:2px solid var(--acento); outline-offset:-2px; }
.zm-fin-pp__op--crear{ font-weight:500; }

/* Tableta: el libro esconde documento y método (siguen en el desglose). */
@media(max-width:1100px) and (min-width:641px){
  html .zm-fin-tabla table{ min-width:0; }
  html .zm-fin-tabla .zm-fin-c--doc, html .zm-fin-tabla .zm-fin-c--metodo{ display:none; }
  html .zm-fin-tabla--saldos .zm-fin-c--total, html .zm-fin-tabla--saldos .zm-fin-c--ultimo{ display:none; }
}

/* Teléfono: cada movimiento en dos líneas, sin tabla ancha ni scroll lateral. */
@media(max-width:640px){
  .zm-fin .zm-cabeza__acciones{ flex-wrap:nowrap; }
  .zm-fin-ancho{ display:none; }
  .zm-fin-resumen{ margin-bottom:16px; }
  .zm-fin-periodo{ gap:8px; }
  .zm-fin-cifras .zm-cifra--clave{ grid-column:1 / -1; }
  .zm-fin-cifras{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .zm-fin-filtros .zm-buscar{ flex:1 1 100%; max-width:none; }
  .zm-fin-libro{ border-radius:var(--r-chica); }
  .zm-fin-libro__cabeza{ padding:12px 14px 10px; }
  .zm-fin-tabla{ overflow:visible; }
  html .zm-fin-tabla table, html .zm-fin-tabla tbody{ display:block; width:100%; min-width:0; }
  html .zm-fin-tabla thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  html .zm-fin-tabla tr.zm-fin-fila{ display:grid; grid-template-columns:auto minmax(0,1fr) auto 12px; grid-template-areas:"mov mov monto chev" "tipo quien fecha chev";
    align-items:center; gap:5px 10px; padding:12px 14px; border-top:1px solid var(--linea); }
  html .zm-fin-tabla tr.zm-fin-fila > td{ display:block; height:auto; padding:0; border:0; min-width:0; }
  html .zm-fin-tabla td.zm-fin-c--mov{ grid-area:mov; }
  html .zm-fin-tabla td.zm-fin-c--monto{ grid-area:monto; }
  html .zm-fin-tabla td.zm-fin-c--chev{ grid-area:chev; padding:0; }
  html .zm-fin-tabla td.zm-fin-c--tipo{ grid-area:tipo; }
  html .zm-fin-tabla td.zm-fin-c--quien{ grid-area:quien; font-size:12.5px; color:var(--texto-2); overflow:hidden; }
  html .zm-fin-tabla td.zm-fin-c--fecha{ grid-area:fecha; font-size:12.5px; text-align:right; }
  html .zm-fin-tabla tr.zm-fin-fila > td.zm-fin-c--doc, html .zm-fin-tabla tr.zm-fin-fila > td.zm-fin-c--metodo{ display:none; }
  html .zm-fin-tabla .zm-fin-c--tipo .zm-estado{ font-size:12px; }
  html .zm-fin-tabla tr.zm-fin-det-fila, html .zm-fin-tabla tr.zm-fin-det-fila > td{ display:block; }
  html .zm-fin-tabla tr.zm-fin-det-fila > td{ padding:0 14px 16px; }
  .zm-fin-det{ grid-template-columns:minmax(0,1fr); gap:10px; }
  .zm-fin-det__acciones .zm-fin-eliminar{ margin-left:0; }
  .zm-fin-editar__acciones{ margin-left:0; width:100%; justify-content:flex-end; }
  .zm-fin-paginas{ padding:0 4px; }
  /* Abonos y saldos: paciente y saldo arriba; lo demás en una frase debajo. */
  html .zm-fin-tabla--saldos tr.zm-fin-fila{ grid-template-columns:minmax(0,1fr) auto 12px; grid-template-areas:"pac saldo chev" "movil movil chev"; }
  html .zm-fin-tabla--saldos td.zm-fin-c--pac{ grid-area:pac; }
  html .zm-fin-tabla--saldos td.zm-fin-c--saldo{ grid-area:saldo; }
  html .zm-fin-tabla--saldos tr.zm-fin-fila > td.zm-fin-c--movil{ grid-area:movil; display:block; font-size:12.5px; color:var(--texto-2); white-space:normal; }
  html .zm-fin-tabla--saldos tr.zm-fin-fila > td.zm-fin-c--plan, html .zm-fin-tabla--saldos tr.zm-fin-fila > td.zm-fin-c--total, html .zm-fin-tabla--saldos tr.zm-fin-fila > td.zm-fin-c--abonado, html .zm-fin-tabla--saldos tr.zm-fin-fila > td.zm-fin-c--ultimo{ display:none; }
  .zm-fin-registrar__lista{ margin:0 -6px 10px; }
  .zm-fin-compras li{ grid-template-columns:minmax(0,1fr) auto; }
  .zm-fin-compras li .btn{ grid-column:1 / -1; justify-self:start; }
  .zm-fin-modal .zm-pie-acciones{ justify-content:flex-end; }
  .zm-fin-modal .zm-pie-acciones .zm-pie-nota{ flex-basis:100%; }
}

@media (prefers-reduced-motion: reduce){
  .zm-fin-det, .zm-fin-editar, .zm-fin-solo, .zm-fin-periodo__rango, .zm-fin-subform, .zm-fin-zairi, .zm-fin-pp__lista{ animation:zm-funde .18s ease both !important; }
  .zm-fin-aviso{ animation:zm-funde .18s ease both; transform:translateX(-50%); }
  .zm-fin-fila, .zm-fin-c--chev i, .zm-fin-enlace{ transition:none; }
}
/* ── fin zm · finanzas v620 ── */
/* ── zm · pacientes v620 ── */
/* Pacientes (v620): cabecera, cifras que son filtros, buscador con orden y archivados,
   y la lista paginada en el servidor con columnas alineadas (paciente, RUT, contacto,
   visitas) y la acción «Agendar» en cada fila. Las fichas duplicadas van en una tarjeta
   plegada que re-viste las piezas v541 (.dup-*) sin tocar su capa. Sólo tokens: el color
   vive en los puntos de estado y el acento en la acción principal y la cifra activa. */
.zm-pac{ min-width:0; }
.zm-pac__cifras{ margin-bottom:18px; }
.zm-pac__cifras .zm-cifra__valor, .zm-pac-lista .zm-pac-filas{ transition:opacity .18s ease; }
.zm-pac__cifras.zm-pac--cargando .zm-cifra__valor, .zm-pac-lista.zm-pac--cargando .zm-pac-filas{ opacity:.55; }

/* Filtros: buscador ancho, orden y «Incluir archivados». */
.zm-pac__filtros{ margin-bottom:14px; }
.zm-pac__filtros .zm-buscar{ flex:1 1 300px; max-width:440px; }
.zm-pac-orden{ display:inline-flex; align-items:center; gap:8px; margin:0; font-size:13px; color:var(--texto-2); white-space:nowrap; }
html .zm-pac-orden select, html[data-theme="dark"] .zm-pac-orden select{ margin:0; width:auto; min-height:40px; padding:6px 32px 6px 14px; border-radius:999px;
  border:1px solid var(--linea); background-color:var(--solido); color:var(--texto); font:inherit; font-size:13.5px; cursor:pointer; }
html .zm-pac-orden select:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
.zm-pac-arch{ min-height:40px; }
.zm-pac__cuenta{ margin-left:2px; font-size:12px; color:var(--texto-3); font-variant-numeric:tabular-nums; }
.zm-pac-arch[aria-pressed="true"] .zm-pac__cuenta{ color:inherit; opacity:.72; }
.zm-pac-error{ margin:0 0 12px; font-size:13.5px; color:var(--danger); }

/* La lista: el título con la cuenta, la cabecera de columnas y las filas. */
.zm-pac-lista{ --pac-cols:36px minmax(0,1.7fr) minmax(0,.85fr) minmax(0,1.35fr) minmax(0,1.3fr); --pac-accion:112px; }
.zm-pac-lista__titulo{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px 8px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-3); }
.zm-pac-lista__estado{ font-size:12.5px; letter-spacing:0; text-transform:none; color:var(--texto-3); }
.zm-pac-lista__cargando{ margin:0; padding:28px 16px; text-align:center; font-size:13.5px; color:var(--texto-2); }
.zm-pac-cabecera{ display:grid; grid-template-columns:minmax(0,1fr) var(--pac-accion) 18px; gap:0 12px; margin:0 0 2px; padding:0 14px 8px 0; border-bottom:1px solid var(--linea); }
.zm-pac-cabecera__cols{ display:grid; grid-template-columns:var(--pac-cols); gap:0 16px; padding-left:14px; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-3); }

/* Fila: el botón que abre la ficha cubre toda la fila; «Agendar» queda encima. */
.zm-pac-fila{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) var(--pac-accion) 18px; align-items:center; gap:6px 12px;
  min-height:62px; padding:0 14px 0 0; border-radius:var(--r-chica); color:var(--texto); transition:background-color .18s ease, opacity .18s ease; }
.zm-pac-fila + .zm-pac-fila::before{ content:''; position:absolute; left:14px; right:14px; top:0; height:1px; background:var(--linea); opacity:.7; transition:opacity .18s ease; }
.zm-pac-fila__abre{ all:unset; box-sizing:border-box; display:grid; grid-template-columns:var(--pac-cols); align-items:center; gap:4px 16px;
  min-width:0; padding:11px 0 11px 14px; cursor:pointer; color:inherit; transition:transform .14s var(--sal); }
.zm-pac-fila__abre::after{ content:''; position:absolute; inset:0; border-radius:inherit; }
.zm-pac-fila__abre:active{ transform:scale(.995); }
.zm-pac-fila__abre:focus-visible{ outline:none; }
.zm-pac-fila:has(.zm-pac-fila__abre:focus-visible){ outline:2px solid var(--acento); outline-offset:-2px; }
.zm-pac-fila__accion{ position:relative; z-index:1; display:flex; justify-content:flex-end; }
.zm-pac-fila > .zm-fila__chevron{ pointer-events:none; }
.zm-pac-fila--abriendo{ opacity:.6; }
.zm-pac-fila__nombre{ min-width:0; }
.zm-pac-fila__doc, .zm-pac-fila__contacto > span{ font-size:13.5px; color:var(--texto); font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-pac-fila__doc{ min-width:0; }
.zm-pac-fila__contacto{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.zm-pac-fila__contacto small{ font-size:12.5px; color:var(--texto-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-pac-fila__visita{ min-width:0; }
.zm-pac-fila__visita .zm-estado{ white-space:normal; align-items:flex-start; line-height:1.35; }
.zm-pac-fila__visita .zm-estado::before{ margin-top:5px; }
.zm-pac-nada{ color:var(--texto-3); }
.zm-pac-fila__archivada{ display:inline-flex; align-items:center; gap:5px; margin-right:8px; color:var(--texto-2); }
.zm-pac-fila__archivada::before{ content:''; width:7px; height:7px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--texto-3); }
.zm-pac-solo-movil{ display:none; }
@media (hover:hover) and (pointer:fine){
  .zm-pac-fila:hover{ background:var(--solido-2); }
  .zm-pac-fila:hover + .zm-pac-fila::before, .zm-pac-fila:hover::before{ opacity:0; }
  .zm-pac-fila:hover > .zm-fila__chevron{ transform:translateX(3px) rotate(45deg); border-color:var(--texto); }
}
.zm-pac-agendar{ all:unset; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:34px; padding:6px 13px; border-radius:999px;
  color:var(--texto-2); box-shadow:inset 0 0 0 1px var(--linea); font-size:13px; font-weight:500; white-space:nowrap; cursor:pointer;
  transition:background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .14s var(--sal); }
.zm-pac-agendar:active{ transform:scale(.97); }
.zm-pac-agendar:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
@media (hover:hover) and (pointer:fine){ .zm-pac-agendar:hover{ background:var(--solido); color:var(--texto); box-shadow:inset 0 0 0 1px var(--texto-3); } }
/* Las filas entran escalonadas al cambiar de página, orden o filtro; escribir no anima. */
.zm-pac-filas > .zm-pac-fila{ animation:zm-asoma .22s var(--sal) both; }
.zm-pac-filas > .zm-pac-fila:nth-child(2){ animation-delay:24ms; } .zm-pac-filas > .zm-pac-fila:nth-child(3){ animation-delay:48ms; }
.zm-pac-filas > .zm-pac-fila:nth-child(4){ animation-delay:72ms; } .zm-pac-filas > .zm-pac-fila:nth-child(5){ animation-delay:96ms; }
.zm-pac-filas > .zm-pac-fila:nth-child(6){ animation-delay:120ms; } .zm-pac-filas > .zm-pac-fila:nth-child(7){ animation-delay:144ms; }
.zm-pac-filas > .zm-pac-fila:nth-child(n+8){ animation-delay:168ms; }
.zm-pac-lista--quieta .zm-pac-filas > .zm-pac-fila{ animation:none; }
.zm-pac-lista .lista-paginacion{ margin-top:4px; }
.zm-pac-vacio__acciones{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:10px; }
.zm-pac-vacio__acciones .btn{ margin-top:0; }

/* La ficha recién creada y el aviso de la exportación. */
.zm-pac-recien{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 14px; margin:0 0 14px; padding:10px 12px 10px 16px;
  border-radius:var(--r-chica); background:var(--solido-2); color:var(--texto); font-size:13.5px; animation:zm-asoma .22s var(--sal) both; }
.zm-pac-recien__texto svg{ color:var(--ok); vertical-align:-3px; margin-right:4px; }
.zm-pac-recien__texto b{ font-weight:500; }
.zm-pac-recien__acciones{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.zm-pac-aviso{ position:fixed; left:50%; bottom:24px; z-index:60; max-width:min(560px,calc(100vw - 32px)); margin:0; padding:11px 18px; border-radius:999px;
  background:var(--texto); color:var(--fondo); font-size:13.5px; line-height:1.4; text-align:center; box-shadow:var(--pz-sombra);
  transform:translateX(-50%); animation:zm-pac-aviso .22s var(--sal) both; pointer-events:none; }
@keyframes zm-pac-aviso{ from{ opacity:0; transform:translate(-50%,8px); } to{ opacity:1; transform:translate(-50%,0); } }

/* Fichas duplicadas: una tarjeta serena y plegada; al abrirla, filas con casilla. */
.zm-pac-dups{ margin:0 0 14px; padding:14px 16px; background:var(--solido); border:1px solid var(--linea); border-radius:var(--r-tarjeta); }
.zm-pac-dups__cabeza{ display:flex; align-items:flex-start; flex-wrap:wrap; gap:10px 14px; }
.zm-pac-dups__marca{ flex:0 0 28px; display:grid; place-items:center; width:28px; height:28px; margin-top:1px; }
.zm-pac-dups__marca .orbe-mini{ width:24px; height:24px; }
.zm-pac-dups__texto{ flex:1 1 320px; min-width:0; }
.zm-pac-dups__texto strong{ display:block; font-size:14.5px; font-weight:500; letter-spacing:-.01em; color:var(--texto); }
.zm-pac-dups__texto p{ margin:3px 0 0; max-width:82ch; font-size:13px; line-height:1.5; color:var(--texto-2); }
.zm-pac-dups__acciones{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.zm-pac-dups__cuerpo{ margin-top:12px; padding-top:10px; border-top:1px solid var(--linea); animation:zm-asoma .22s var(--sal) both; }
.zm-pac .zm-pac-dups__barra{ margin:0 0 8px; padding:8px 12px; border:0; border-radius:var(--r-chica); background:var(--solido-2); font-size:13px; font-weight:500; }
.zm-pac .dup-fila{ position:relative; display:grid; grid-template-columns:22px minmax(0,1fr) minmax(0,1.25fr) auto; align-items:center; gap:8px 14px;
  margin:0; padding:10px; border:0; border-radius:var(--r-chica); background:transparent; font-size:13.5px; }
.zm-pac .dup-fila + .dup-fila::before{ content:''; position:absolute; left:10px; right:10px; top:0; height:1px; background:var(--linea); opacity:.7; }
.zm-pac .dup-fila.marcada{ background:var(--solido-2); border-color:transparent; }
.zm-pac .dup-fila.marcada::before, .zm-pac .dup-fila.marcada + .dup-fila::before{ opacity:0; }
.zm-pac-dup__quien{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.zm-pac-dup__quien b{ font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-pac-dup__quien small{ font-size:12.5px; color:var(--texto-2); font-variant-numeric:tabular-nums; }
.zm-pac-dup__motivo{ min-width:0; }
.zm-pac-dup__motivo .zm-estado{ white-space:normal; align-items:flex-start; line-height:1.4; }
.zm-pac-dup__motivo .zm-estado::before{ margin-top:5px; }
.zm-pac-dup__acciones{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:6px; }
html .zm-pac-dup__acciones select, html[data-theme="dark"] .zm-pac-dup__acciones select{ margin:0; width:auto; max-width:250px; min-height:34px; padding:4px 30px 4px 12px;
  border-radius:999px; border:1px solid var(--linea); background-color:var(--solido); color:var(--texto); font:inherit; font-size:13px; }
.zm-pac-dups__nota{ margin:8px 10px 0; font-size:12.5px; color:var(--texto-3); }

/* Importar desde Excel: el resultado y las filas que no entraron. */
.zm-pac-import .zm-pac-import__titulo{ display:flex; align-items:center; gap:6px; margin:0 0 8px; font-size:16px; color:var(--texto); }
.zm-pac-import .zm-pac-import__titulo--mal{ color:var(--danger); }
.zm-pac-import__errores{ margin:10px 0 0; font-size:13px; color:var(--texto-2); }
.zm-pac-import__errores summary{ cursor:pointer; color:var(--texto); }
.zm-pac-import__errores ul{ max-height:220px; overflow:auto; margin:8px 0 0; padding-left:18px; }
.zm-pac-import__errores li{ padding:3px 0; line-height:1.45; }

/* Anchos intermedios: RUT y teléfono pasan bajo el nombre; se quedan nombre y visitas. */
@media(max-width:1100px){
  .zm-pac-lista{ --pac-cols:36px minmax(0,1.5fr) minmax(0,1.1fr); }
  .zm-pac-fila__doc, .zm-pac-fila__contacto, .zm-pac-cabecera__cols > :nth-child(3), .zm-pac-cabecera__cols > :nth-child(4){ display:none; }
  .zm-pac-solo-movil{ display:inline; }
  .zm-pac-solo-ancho{ display:none; }
}
@media(max-width:820px){
  .zm-pac .dup-fila{ grid-template-columns:22px minmax(0,1fr); }
  .zm-pac-dup__motivo, .zm-pac-dup__acciones{ grid-column:2; }
  .zm-pac-dup__acciones{ justify-content:flex-start; }
}
/* Teléfono: una columna; «Agendar» queda como un botón redondo junto al chevron. */
@media(max-width:640px){
  .zm-pac-lista{ --pac-accion:40px; padding:4px; }
  .zm-pac-cabecera{ display:none; }
  .zm-pac-fila{ gap:6px 8px; padding-right:12px; }
  .zm-pac-fila__abre{ grid-template-columns:minmax(0,1fr); gap:6px; padding:12px 0 12px 12px; }
  .zm-pac-fila__abre .zm-fila__ico{ display:none; }
  /* La capa base manda el chevron de .zm-fila a la columna 2 en el teléfono: aquí la
     fila tiene tres (abrir · agendar · chevron) y cada una queda en la suya. */
  .zm-pac-fila__accion{ grid-column:2; grid-row:1; }
  .zm-pac-fila > .zm-fila__chevron{ grid-column:3; grid-row:1; }
  .zm-pac-agendar{ width:38px; height:38px; min-height:38px; padding:0; }
  .zm-pac-agendar span{ display:none; }
  .zm-pac__filtros .zm-buscar{ flex:1 1 100%; max-width:none; }
  .zm-pac-orden{ flex:1 1 140px; min-width:0; }
  .zm-pac-orden > span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  html .zm-pac-orden select{ flex:1 1 auto; min-width:0; width:100%; }
  .zm-pac-arch{ flex:0 0 auto; }
  .zm-pac-dups{ padding:12px 12px; }
  .zm-pac-dups__texto{ flex:1 1 0; }
  .zm-pac-dups__acciones{ width:100%; }
  .zm-pac-dups__acciones .x-btn{ margin-left:auto; }
  .zm-pac-recien{ padding:10px 12px; }
}
@media (prefers-reduced-motion: reduce){
  .zm-pac-filas > .zm-pac-fila, .zm-pac-recien, .zm-pac-dups__cuerpo{ animation:zm-funde .18s ease both !important; animation-delay:0ms !important; }
  .zm-pac-aviso{ animation:none; }
  .zm-pac-fila, .zm-pac-fila__abre, .zm-pac-agendar, .zm-pac__cifras .zm-cifra__valor, .zm-pac-lista .zm-pac-filas{ transition:none; }
}
/* ── fin zm · pacientes v620 ── */
/* ── zm · equipo v620 ── */
/* Profesionales: filas que abren la ficha y, si el profesional hace operativos
   en regiones, su botón al lado. El color de la agenda de cada uno es un dato
   (el mismo que pinta sus citas), no decoración: vive en un punto de 8 px. */
.zm-eq-lista{ padding:6px; }
.zm-eq-fila{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:4px 8px; }
.zm-eq-fila + .zm-eq-fila::before{ content:''; position:absolute; left:14px; right:14px; top:0; height:1px; background:var(--linea); opacity:.7; }
.zm-eq-fila > .zm-fila::before{ display:none; }
.zm-eq-avatar{ position:relative; display:grid; place-items:center; width:100%; height:100%; }
.zm-eq-avatar > i{ position:absolute; right:-2px; bottom:-2px; width:10px; height:10px; border-radius:50%; box-shadow:0 0 0 2px var(--solido); }
.zm-eq-tipo{ min-width:92px; text-align:right; color:var(--texto-2); }
.zm-eq-operativos{ display:inline-flex; align-items:center; gap:6px; margin-right:6px; white-space:nowrap; }
@media(max-width:640px){
  .zm-eq-fila{ grid-template-columns:minmax(0,1fr); }
  .zm-eq-operativos{ justify-self:start; margin:0 0 10px 14px; }
  .zm-eq-tipo{ min-width:0; text-align:left; }
}

/* Ficha del profesional: hoja con índice (como el editor de tratamientos). */
.modal.zm-eq-modal{ display:flex; flex-direction:column; max-height:calc(100vh - 80px); max-height:calc(100dvh - 80px); padding:26px 0 0; overflow:hidden; }
.modal.zm-eq-modal > h2{ margin:0 0 12px; padding:0 64px 0 32px; }
.zm-eq-cuerpo{ flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; padding:6px 32px 28px; }
.modal.zm-eq-modal > .zm-pie-acciones{ position:static; flex:0 0 auto; margin:0; padding:14px 32px 16px; }
.zm-eq-modal .zm-pie-acciones .zm-pie-nota{ color:var(--danger); flex:1 1 240px; }
.zm-eq-modal .zm-editor{ grid-template-columns:180px minmax(0,1fr); }
.zm-eq-secciones{ min-width:0; }
.zm-eq-secciones .zm-seccion:last-child{ padding-bottom:6px; }
.zm-eq-modal input, .zm-eq-modal select, .zm-eq-modal textarea, .zm-eq-op-modal input{ margin:0; }
.zm-eq-campos-nombre{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:12px 16px; }
.zm-eq-espacio{ margin-top:14px; }
.zm-eq-color input[type="color"]{ width:64px; height:40px; padding:3px; border-radius:var(--r-campo); cursor:pointer; }
.zm-eq-casilla{ display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px; align-items:start; margin:0; padding:10px 0; cursor:pointer; font-weight:400; }
.zm-eq-casilla + .zm-eq-casilla, .zm-eq-dias + .zm-eq-casilla, .zm-eq-almuerzo + .zm-eq-casilla{ border-top:1px solid var(--linea); }
.zm-eq-casilla input{ width:auto; margin:3px 0 0; }
.zm-eq-casilla > span{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.zm-eq-casilla b{ font-size:14px; font-weight:500; color:var(--texto); }
.zm-eq-casilla small{ font-size:12.5px; line-height:1.5; color:var(--texto-2); }
.zm-eq-dias{ display:flex; flex-direction:column; gap:4px; margin:0 0 10px 28px; padding:8px 12px; border-radius:var(--r-chica); background:var(--solido-2); animation:zm-asoma .22s var(--sal) both; }
.zm-eq-dia{ display:grid; grid-template-columns:120px minmax(0,130px) auto minmax(0,130px); justify-content:start; align-items:center; gap:8px; }
.zm-eq-dia[data-activo="false"]{ color:var(--texto-3); }
.zm-eq-dia__nombre{ display:flex; align-items:center; gap:8px; margin:0; font-size:13.5px; font-weight:400; cursor:pointer; }
.zm-eq-dia__nombre input{ width:auto; margin:0; }
.zm-eq-dia > span{ font-size:12.5px; color:var(--texto-3); }
.zm-eq-almuerzo{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 10px 28px; animation:zm-asoma .22s var(--sal) both; }
.zm-eq-almuerzo > span{ font-size:13px; color:var(--texto-2); }
.zm-eq-almuerzo input{ max-width:130px; }
.zm-eq-aviso{ margin:4px 0 6px 28px; padding:10px 12px; border-radius:var(--r-chica); background:var(--solido-2); font-size:12.5px; line-height:1.5; color:var(--texto-2); }
.zm-eq-grupo + .zm-eq-grupo{ margin-top:14px; }
.zm-eq-grupo > small{ display:block; margin:0 0 6px; font-size:12px; color:var(--texto-3); }
.zm-eq-nota{ margin:8px 0 0; font-size:13px; line-height:1.5; color:var(--texto-2); }
.zm-eq-quitar{ margin-right:auto; }
.zm-eq-error{ margin:10px 0 0; font-size:12.5px; color:var(--danger); }

/* Operativos en regiones: formulario sereno y la lista de fechas. */
.modal.zm-eq-op-modal{ max-width:640px; }
.zm-eq-bajada{ margin:-4px 0 16px; font-size:13.5px; line-height:1.5; color:var(--texto-2); }
.zm-eq-op-form{ padding:14px 16px; border:1px solid var(--linea); border-radius:var(--r-chica); background:var(--solido); animation:zm-asoma .22s var(--sal) both; }
.zm-eq-op-form .zm-campos{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.zm-eq-op-form__acciones{ display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.zm-eq-op-titulo{ margin:18px 0 6px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-3); }
.zm-eq-op-lista{ list-style:none; margin:0; padding:0; }
.zm-eq-op{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 36px; align-items:center; gap:6px 14px; padding:11px 2px; border-top:1px solid var(--linea); }
.zm-eq-op:first-child{ border-top:0; }
.zm-eq-op[data-pasado]{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); color:var(--texto-3); }
.zm-eq-op__principal{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.zm-eq-op__principal b{ font-size:14px; font-weight:500; color:var(--texto); }
.zm-eq-op[data-pasado] .zm-eq-op__principal b{ color:var(--texto-2); }
.zm-eq-op__principal span{ font-size:12.5px; color:var(--texto-2); font-variant-numeric:tabular-nums; }
.zm-eq-op__sede{ font-size:13px; color:var(--texto-2); min-width:0; overflow-wrap:anywhere; }
.zm-eq-op__quitar{ all:unset; box-sizing:border-box; display:grid; place-items:center; width:36px; height:36px; border-radius:var(--r-campo); color:var(--texto-3); cursor:pointer; transition:background-color .18s ease, color .18s ease, transform .14s var(--sal); }
.zm-eq-op__quitar:active{ transform:scale(.94); }
.zm-eq-op__quitar:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
@media (hover:hover) and (pointer:fine){ .zm-eq-op__quitar:hover{ background:var(--solido-2); color:var(--texto); } }
.zm-eq-pasados{ margin-top:12px; }
.zm-eq-pasados > summary{ cursor:pointer; font-size:13px; color:var(--texto-2); padding:6px 0; }
.zm-eq-pasados > summary:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; border-radius:6px; }

@media(max-width:820px){
  .zm-eq-modal .zm-editor{ grid-template-columns:minmax(0,1fr); }
  .modal.zm-eq-modal{ max-height:calc(100vh - 92px); max-height:calc(100dvh - 92px); padding-top:20px; }
  .modal.zm-eq-modal > h2{ padding:0 56px 0 18px; }
  .zm-eq-cuerpo{ padding:0 18px 24px; }
  .modal.zm-eq-modal > .zm-pie-acciones{ padding:12px 76px 14px 18px; justify-content:flex-start; flex-wrap:wrap; }
  .modal.zm-eq-modal > .zm-pie-acciones .btn{ flex:1 1 0; }
  .modal.zm-eq-modal > .zm-pie-acciones .zm-eq-quitar{ flex-basis:100%; }
  .modal.zm-eq-modal > .zm-pie-acciones .zm-pie-nota{ flex-basis:100%; }
  .zm-eq-modal .zm-indice{ margin:0 -18px; padding:4px 18px 10px; border-bottom:1px solid var(--linea); }
  .zm-eq-modal .zm-indice button{ border:1px solid var(--linea); border-radius:999px; }
  .zm-eq-modal .zm-indice button[aria-current="true"]{ border-color:var(--texto); }
  .zm-eq-modal .zm-indice__n{ display:none; }
  .zm-eq-modal .zm-seccion{ scroll-margin-top:62px; }
  .zm-eq-campos-nombre{ grid-template-columns:minmax(0,1fr); }
}
@media(max-width:640px){
  .zm-eq-dias{ margin-left:0; }
  .zm-eq-dia{ grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); justify-content:stretch; }
  .zm-eq-dia__nombre{ grid-column:1 / -1; }
  .zm-eq-almuerzo, .zm-eq-aviso{ margin-left:0; }
  .zm-eq-op{ grid-template-columns:minmax(0,1fr) 36px; }
  .zm-eq-op__sede{ grid-column:1; grid-row:2; }
  .zm-eq-op__quitar{ grid-column:2; grid-row:1 / span 2; }
  .zm-eq-op[data-pasado]{ grid-template-columns:minmax(0,1fr); }
}

/* Actividad: filtros de verdad (buscador, persona, módulo, acción, período) y
   la bitácora por día. Cada línea: hora · quién · qué, sobre qué, desde dónde. */
.zm-act-oculto{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.zm-act-filtros{ margin-bottom:10px; }
.zm-act-filtros .zm-buscar{ flex:2 1 260px; max-width:420px; }
.zm-act-select{ position:relative; flex:1 1 170px; max-width:240px; margin:0; }
html .zm-act-select select{ width:100%; min-height:40px; margin:0; padding:8px 34px 8px 14px; border-radius:999px; border:1px solid var(--linea); background-color:var(--solido); color:var(--texto); font:inherit; font-size:14px; }
.zm-act-select select:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
.zm-act-rango{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; margin:0 0 16px; }
.zm-act-fechas{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; animation:zm-asoma .22s var(--sal) both; }
.zm-act-fechas label{ display:flex; align-items:center; gap:6px; margin:0; font-size:12.5px; font-weight:400; color:var(--texto-2); }
html .zm-act-fechas input{ width:auto; min-height:36px; margin:0; padding:6px 10px; border-radius:var(--r-campo); }
.zm-act-resumen{ margin:0 0 0 auto; font-size:13px; color:var(--texto-2); font-variant-numeric:tabular-nums; }
.zm-act-lista{ transition:opacity .18s ease; }
.zm-act-lista[aria-busy="true"]{ opacity:.55; }
.zm-act-dia{ margin:0 0 14px; padding:4px 6px 6px; background:var(--solido); border:1px solid var(--linea); border-radius:var(--r-tarjeta); }
.zm-act-dia__titulo{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0; padding:12px 14px 6px; font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-3); }
.zm-act-dia__n{ letter-spacing:0; text-transform:none; font-weight:400; font-variant-numeric:tabular-nums; }
.zm-act-lineas{ list-style:none; margin:0; padding:0; }
.zm-act-linea{ position:relative; display:grid; grid-template-columns:46px 32px minmax(0,1fr) auto; grid-template-areas:"hora quien cuerpo lado" ". . registro registro"; align-items:start; gap:4px 12px; padding:12px 12px; border-radius:var(--r-chica); }
.zm-act-linea + .zm-act-linea::before{ content:''; position:absolute; left:14px; right:14px; top:0; height:1px; background:var(--linea); opacity:.7; }
.zm-act-linea[data-abierta]{ background:var(--solido-2); }
.zm-act-linea[data-abierta]::before, .zm-act-linea[data-abierta] + .zm-act-linea::before{ opacity:0; }
.zm-act-hora{ grid-area:hora; padding-top:6px; font-size:13px; color:var(--texto-2); font-variant-numeric:tabular-nums; }
.zm-act-hora-movil{ display:none; color:var(--texto-2); font-weight:400; font-variant-numeric:tabular-nums; }
.zm-act-quien{ grid-area:quien; display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:var(--solido-2); color:var(--texto-2); font-size:11.5px; font-weight:600; letter-spacing:-.01em; }
.zm-act-linea[data-abierta] .zm-act-quien{ background:var(--solido); }
.zm-act-cuerpo{ grid-area:cuerpo; min-width:0; }
.zm-act-frase{ margin:0; font-size:14.5px; line-height:1.4; color:var(--texto); }
.zm-act-frase b{ font-weight:500; }
.zm-act-frase > span:last-child{ color:var(--texto-2); }
.zm-act-detalle{ margin:3px 0 0; font-size:13.5px; line-height:1.5; color:var(--texto); overflow-wrap:anywhere; }
.zm-act-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 14px; margin-top:6px; }
.zm-act-dato{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--texto-3); }
.zm-act-enlace{ all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--texto); cursor:pointer; border-bottom:1px solid var(--linea); transition:border-color .18s ease, color .18s ease; }
.zm-act-enlace:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; border-radius:4px; }
@media (hover:hover) and (pointer:fine){ .zm-act-enlace:hover{ border-color:var(--texto); } }
.zm-act-lado{ grid-area:lado; display:flex; align-items:center; gap:10px; padding-top:1px; }
.zm-act-monto{ font-size:14px; font-weight:500; color:var(--texto); font-variant-numeric:tabular-nums; white-space:nowrap; }
.zm-act-mas{ all:unset; box-sizing:border-box; display:grid; place-items:center; width:32px; height:32px; border-radius:10px; cursor:pointer; color:var(--texto-3); transition:background-color .18s ease, transform .14s var(--sal); }
.zm-act-mas > span{ width:7px; height:7px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .22s var(--sal); }
.zm-act-mas[aria-expanded="true"] > span{ transform:translateY(2px) rotate(225deg); }
.zm-act-mas:active{ transform:scale(.94); }
.zm-act-mas:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
@media (hover:hover) and (pointer:fine){ .zm-act-mas:hover{ background:var(--solido-2); color:var(--texto); } .zm-act-linea[data-abierta] .zm-act-mas:hover{ background:var(--solido); } }
.zm-act-registro{ grid-area:registro; display:grid; grid-template-columns:max-content minmax(0,1fr); gap:6px 16px; margin:8px 0 2px; padding:12px 14px; border-radius:var(--r-chica); background:var(--solido); font-size:13px; animation:zm-asoma .18s var(--sal) both; }
.zm-act-registro dt{ margin:0; color:var(--texto-3); }
.zm-act-registro dd{ margin:0; color:var(--texto); min-width:0; overflow-wrap:anywhere; }
.zm-act-tenue{ color:var(--texto-3); }
.zm-act-num{ font-variant-numeric:tabular-nums; }
.zm-act .zm-paginado{ margin-top:4px; padding-right:64px; }   /* el orbe de ayuda flota abajo a la derecha */
@media(max-width:640px){
  .zm-act-filtros .zm-buscar{ flex:1 1 100%; max-width:none; }
  .zm-act-select{ flex:1 1 calc(50% - 5px); max-width:none; min-width:0; }
  .zm-act-select:last-child{ flex-basis:100%; }
  .zm-act-resumen{ margin-left:0; flex-basis:100%; }
  .zm-act-dia{ padding:2px 2px 4px; }
  .zm-act-linea{ grid-template-columns:32px minmax(0,1fr) auto; grid-template-areas:"quien cuerpo lado" "registro registro registro"; gap:4px 10px; padding:12px 10px; }
  .zm-act-hora{ display:none; }
  .zm-act-hora-movil{ display:inline; }
  .zm-act-lado{ flex-direction:column; align-items:flex-end; gap:4px; }
  .zm-act-registro{ grid-template-columns:minmax(0,1fr); gap:2px; }
  .zm-act-registro dd{ margin-bottom:6px; }
}
@media (prefers-reduced-motion: reduce){
  .zm-eq-dias, .zm-eq-almuerzo, .zm-eq-op-form, .zm-act-fechas, .zm-act-registro{ animation:zm-funde .18s ease both; }
  .zm-eq-op__quitar, .zm-act-enlace, .zm-act-mas, .zm-act-mas > span, .zm-act-lista{ transition:none; }
}
/* ── fin zm · equipo v620 ── */
/* ── zm · recetas v620 ── */
/* Recetas: la receta de zairi y la receta oficial del Minsal, enlazadas.
   Solo tokens; el acento vive en el botón «Enlazar», el contador completo y el
   foco. Movimiento: el panel oficial asoma (220 ms), copiar confirma sin animar,
   la fila del catálogo marca su elección con fondo (180 ms). Todo reposa en
   prefers-reduced-motion. */
.zm-rx-msg{ margin:0 0 12px; padding:10px 14px; border-radius:var(--r-chica); background:var(--solido-2); font-size:13.5px; color:var(--texto); }
.zm-rx-error{ margin:0 0 12px; font-size:13.5px; color:var(--danger); }
.zm-rx-nota{ margin:0; font-size:13px; line-height:1.5; color:var(--texto-3); }
.zm-rx-cargando{ padding:22px 16px; }
.zm-rx-vivo{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.zm-rx-acciones{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; }
.zm-rx-acciones .btn{ display:inline-flex; align-items:center; gap:6px; }
.zm-rx-acciones--pie{ margin-top:14px; padding-top:12px; border-top:1px solid var(--linea); }
.zm-rx-modal .modal-actions .btn{ white-space:nowrap; }
.zm-rx-oficial .zm-rx-msg{ margin:12px 0 0; }
/* 3-nov-2026 · Quién firma la receta, dicho al abrirla; si la cuenta no puede firmar, por qué
   y el botón a donde se resuelve (Equipo, Profesionales o Mi firma). */
.zm-rx-firma{ display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap; margin:0 0 12px; padding:9px 14px; border-radius:var(--r-chica); background:var(--solido-2); font-size:13.5px; line-height:1.45; color:var(--texto-2); }
.zm-rx-firma > svg{ flex:0 0 auto; color:var(--ok); }
.zm-rx-firma b{ color:var(--texto); font-weight:600; }
.zm-rx-firma p{ margin:0; flex:1 1 280px; }
.zm-rx-firma[data-tono="aviso"]{ padding:12px 14px; border-left:4px solid var(--gold); background:color-mix(in srgb,var(--gold) 12%,var(--solido)); color:var(--texto); }
.zm-rx-firma .btn{ flex:0 0 auto; white-space:nowrap; }
.zm-rx-firma__elegir{ display:flex; align-items:center; gap:10px; flex:1 1 320px; min-width:0; margin:0; }
.zm-rx-firma__elegir > span{ font-weight:600; color:var(--texto); }
.zm-rx-firma__elegir select{ flex:1 1 auto; min-width:0; min-height:38px; margin:0; padding:6px 10px; border-radius:var(--r-campo); border:1px solid var(--linea); background:var(--solido); color:var(--texto); font:inherit; }
.zm-rx-firma__elegir select:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
.zm-rx-firma--elegir small{ flex:1 1 100%; font-size:12.5px; color:var(--texto-3); }
.zm-rx-firma--elegir small b{ color:var(--texto); font-weight:600; }

/* Lista y guía del módulo */
.zm-rx .zm-fila__sub{ white-space:nowrap; }
.zm-rx-cats{ margin:-4px 0 14px; }
.zm-rx-cat-meta{ font-size:12.5px; color:var(--texto-3); }
.zm-rx-guia .zm-frase{ margin-bottom:18px; }
.zm-rx-guia .zm-frase b{ font-weight:500; color:var(--texto); }
.zm-rx-requisitos{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; }
.zm-rx-requisitos li{ padding:12px 0; border-top:1px solid var(--linea); font-size:14px; line-height:1.55; color:var(--texto-2); }
.zm-rx-requisitos li:first-child{ border-top:0; padding-top:0; }
.zm-rx-requisitos strong{ font-weight:500; color:var(--texto); }
.zm-rx-enlace{ display:inline-flex; align-items:center; gap:4px; margin-right:12px; color:var(--acento); font-size:13.5px; text-decoration:none; white-space:nowrap; }
.zm-rx-enlace:hover{ text-decoration:underline; }
.zm-rx-enlace:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; border-radius:6px; }
.zm-rx-correo{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; color:var(--texto); overflow-wrap:anywhere; }
.zm-rx-parrafo{ margin:0 0 10px; max-width:74ch; font-size:14px; line-height:1.6; color:var(--texto-2); }
.zm-rx-enlaces{ display:flex; flex-wrap:wrap; gap:8px 0; margin-top:6px; }

/* Los pasos (receta oficial y guía) */
.zm-rx-pasos{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:0; }
.zm-rx-paso{ display:grid; grid-template-columns:28px minmax(0,1fr); gap:14px; padding:14px 0; border-top:1px solid var(--linea); }
.zm-rx-paso:first-child{ border-top:0; padding-top:4px; }
.zm-rx-paso__n{ display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--solido-2); color:var(--texto-2); font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; }
.zm-rx-paso__cuerpo{ min-width:0; }
.zm-rx-paso__cuerpo > strong{ display:block; font-size:14.5px; font-weight:500; color:var(--texto); letter-spacing:-.01em; }
.zm-rx-paso__cuerpo > p{ margin:4px 0 10px; font-size:13.5px; line-height:1.5; color:var(--texto-2); }
.zm-rx-pasos--guia .zm-rx-paso__cuerpo > p{ margin-bottom:0; }
.zm-rx-portal{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
.zm-rx-falta{ margin:0 0 10px; padding:9px 12px; border-radius:var(--r-campo); background:var(--solido-2); font-size:13px; line-height:1.45; color:var(--texto-2); }

/* Panel de la receta oficial */
.zm-rx-oficial{ margin-top:16px; padding:18px 20px; border:1px solid var(--linea); border-radius:var(--r-tarjeta); background:var(--solido); animation:zm-asoma .22s var(--sal) both; }
.zm-rx-oficial__cabeza{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:12px; margin:0 0 14px; }
.zm-rx-oficial__sello{ display:grid; place-items:center; width:36px; height:36px; border-radius:12px; background:var(--solido-2); color:var(--texto-2); }
.zm-rx-oficial__texto h3{ margin:0; font-size:16px; font-weight:500; letter-spacing:-.015em; color:var(--texto); }
.zm-rx-oficial__texto p{ margin:4px 0 0; font-size:13px; line-height:1.45; color:var(--texto-2); }
.zm-rx-oficial__cabeza > .zm-estado{ margin-top:4px; }
.zm-rx-enlazada{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.zm-rx-enlazada__etiqueta{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-3); }
.zm-rx-folio{ display:inline-block; padding:8px 12px; border-radius:var(--r-campo); background:var(--solido-2); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:16px; letter-spacing:.06em; color:var(--texto); overflow-wrap:anywhere; user-select:all; }
.zm-rx-enlazada .zm-rx-nota a{ color:var(--acento); }

/* Datos para copiar */
.zm-rx-datos{ border:1px solid var(--linea); border-radius:var(--r-chica); padding:4px 12px 8px; background:var(--solido); }
.zm-rx-datos__cabeza{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0 4px; }
.zm-rx-datos__cabeza h4{ margin:0; font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-3); }
.zm-rx-datos__cabeza .btn{ display:inline-flex; align-items:center; gap:6px; }
.zm-rx-datos__cabeza + .zm-rx-dato{ border-top:0; }
.zm-rx-datos__med + .zm-rx-datos__med{ border-top:1px solid var(--linea); }
.zm-rx-dato{ display:grid; grid-template-columns:minmax(110px,34%) minmax(0,1fr) 32px; align-items:center; gap:10px; min-height:38px; border-top:1px solid var(--linea); }
.zm-rx-datos__med .zm-rx-dato:first-child{ border-top:0; }
.zm-rx-dato__etiqueta{ font-size:12.5px; color:var(--texto-3); }
.zm-rx-dato__valor{ font-size:14px; color:var(--texto); overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.zm-rx-dato__valor--falta{ color:var(--texto-3); font-style:italic; }
.zm-rx-copiar{ all:unset; box-sizing:border-box; display:grid; place-items:center; width:32px; height:32px; border-radius:10px; color:var(--texto-2); cursor:pointer; transition:background-color .18s ease, color .18s ease, transform .14s var(--sal); }
.zm-rx-copiar:hover{ background:var(--solido-2); color:var(--texto); }
.zm-rx-copiar:active{ transform:scale(.94); }
.zm-rx-copiar:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }

/* El código oficial */
.zm-rx-folio-form{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.zm-rx-folio-campo{ position:relative; flex:1 1 260px; max-width:420px; margin:0; }
.zm-rx-folio-campo input{ width:100%; box-sizing:border-box; min-height:42px; margin:0; padding:9px 64px 9px 14px; border-radius:var(--r-campo); border:1px solid var(--linea); background:var(--solido); color:var(--texto);
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:15px; letter-spacing:.04em; }
.zm-rx-folio-campo input:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
.zm-rx-folio-campo input[aria-invalid="true"]{ border-color:var(--danger); }
.zm-rx-contador{ position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:12px; color:var(--texto-3); font-variant-numeric:tabular-nums; pointer-events:none; }
.zm-rx-contador[data-ok="si"]{ color:var(--acento); }

/* Detalle de una receta emitida */
.zm-rx-detalle__cabeza{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 14px; }
.zm-rx-detalle__quien strong{ display:block; font-size:18px; font-weight:500; letter-spacing:-.02em; color:var(--texto); }
.zm-rx-detalle__quien span{ display:block; margin-top:3px; font-size:13px; color:var(--texto-2); }
.zm-rx-sistema{ padding:18px 20px; border:1px solid var(--linea); border-radius:var(--r-tarjeta); background:var(--solido); }
.zm-rx-sistema h3, .zm-rx-oficial h3{ margin:0 0 10px; }
.zm-rx-sistema h3{ font-size:16px; font-weight:500; letter-spacing:-.015em; color:var(--texto); }
.zm-rx-meds{ margin:0 0 10px; padding:0 0 0 20px; display:flex; flex-direction:column; gap:8px; color:var(--texto-3); font-size:13px; }
.zm-rx-meds li{ padding-left:2px; }
.zm-rx-meds__nombre{ display:block; font-size:14.5px; color:var(--texto); }
.zm-rx-meds__nombre small{ font-size:13px; color:var(--texto-2); }
.zm-rx-meds__dosis{ display:block; margin-top:2px; font-size:13px; color:var(--texto-2); }
.zm-rx-indicaciones{ margin:0 0 10px; font-size:13.5px; line-height:1.5; color:var(--texto); }
.zm-rx-indicaciones span{ display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-3); margin-bottom:2px; }

/* Emitir: catálogo a la izquierda, la receta a la derecha */
.zm-rx-armar{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:18px; align-items:start; }
.zm-rx-armar__titulo{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 0 10px; }
.zm-rx-armar__titulo h4{ margin:0; font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-3); }
.zm-rx-armar__titulo span{ font-size:12.5px; color:var(--texto-3); font-variant-numeric:tabular-nums; }
.zm-rx-armar__catalogo .zm-buscar{ margin:0 0 10px; }
.zm-rx-catalogo{ max-height:340px; overflow-y:auto; overscroll-behavior:contain; border:1px solid var(--linea); border-radius:var(--r-chica); padding:4px; background:var(--solido); }
.zm-rx-catalogo > .zm-rx-nota{ padding:14px 10px; }
.zm-rx-catalogo__cat{ position:sticky; top:-4px; z-index:1; padding:8px 10px 4px; background:var(--solido); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-3); }
.zm-rx-opcion{ display:flex; align-items:center; gap:10px; margin:0; padding:8px 10px; border-radius:10px; cursor:pointer; font-weight:400; transition:background-color .18s ease; }
.zm-rx-opcion:hover{ background:var(--solido-2); }
.zm-rx-opcion[data-elegido="si"]{ background:var(--acento-suave); }
.zm-rx-opcion input{ width:auto; margin:0; flex:none; accent-color:var(--acento); }
.zm-rx-opcion__texto{ display:flex; flex-direction:column; min-width:0; }
.zm-rx-opcion__texto b{ font-weight:500; font-size:14px; color:var(--texto); }
.zm-rx-opcion__texto small{ font-size:12.5px; color:var(--texto-2); }
.zm-rx-agregar{ margin-top:10px; }
.zm-rx-nuevo{ margin-top:10px; padding:14px; border:1px solid var(--linea); border-radius:var(--r-chica); background:var(--solido-2); animation:zm-asoma .22s var(--sal) both; }
.zm-rx-nuevo .zm-rx-acciones{ margin-top:10px; }
.zm-rx-nuevo .zm-rx-nota{ margin-top:8px; font-size:12px; }
.zm-rx-form__ancho{ grid-column:1 / -1; }
.zm-rx-form input, .zm-rx-nuevo input{ margin:0; }
.zm-rx-armar__vacia{ padding:18px 14px; border:1px dashed var(--linea); border-radius:var(--r-chica); }
.zm-rx-lineas{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.zm-rx-linea{ padding:10px 12px; border:1px solid var(--linea); border-radius:var(--r-chica); background:var(--solido); animation:zm-asoma .22s var(--sal) both; }
.zm-rx-linea__cabeza{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 8px; font-size:14px; color:var(--texto); }
.zm-rx-linea__cabeza b{ font-weight:500; }
.zm-rx-linea__cabeza small{ font-size:12.5px; color:var(--texto-2); }
.zm-rx-linea__quitar{ all:unset; box-sizing:border-box; display:grid; place-items:center; width:28px; height:28px; border-radius:8px; color:var(--texto-3); cursor:pointer; transition:background-color .18s ease, color .18s ease; }
.zm-rx-linea__quitar:hover{ background:var(--solido-2); color:var(--texto); }
.zm-rx-linea__quitar:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
.zm-rx-linea__campos{ display:grid; grid-template-columns:minmax(0,1fr) 110px; gap:8px; }
.zm-rx-linea__campos input{ margin:0; }
.zm-rx-indicaciones-campo{ margin-top:14px; }
.zm-rx-indicaciones-campo textarea{ margin:0; min-height:70px; }
.zm-rx-check{ display:flex; align-items:flex-start; gap:10px; margin:14px 0 0; padding:12px 14px; border:1px solid var(--linea); border-radius:var(--r-chica); cursor:pointer; font-weight:400; }
.zm-rx-check input{ width:auto; margin:2px 0 0; flex:none; accent-color:var(--acento); }
.zm-rx-check span{ display:flex; flex-direction:column; gap:2px; }
.zm-rx-check b{ font-weight:500; font-size:14px; color:var(--texto); }
.zm-rx-check small{ font-size:12.5px; line-height:1.45; color:var(--texto-2); }

/* Emitida */
.zm-rx-hecha{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:var(--r-chica); background:var(--solido-2); }
.zm-rx-hecha__ico{ display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--solido); color:var(--ok); flex:none; }
.zm-rx-hecha strong{ display:block; font-size:15px; font-weight:500; color:var(--texto); }
.zm-rx-hecha span{ display:block; font-size:13px; color:var(--texto-2); }
.zm-rx-hecha + .zm-rx-msg{ margin-top:12px; }
.zm-rx-sumar-oficial{ all:unset; box-sizing:border-box; display:flex; align-items:flex-start; gap:12px; width:100%; margin-top:16px; padding:14px 16px; border:1px dashed var(--linea); border-radius:var(--r-chica); color:var(--texto-2); cursor:pointer; transition:background-color .18s ease, border-color .18s ease; }
.zm-rx-sumar-oficial:hover{ background:var(--solido-2); border-color:var(--texto-3); }
.zm-rx-sumar-oficial:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
.zm-rx-sumar-oficial span{ display:flex; flex-direction:column; gap:2px; }
.zm-rx-sumar-oficial b{ font-weight:500; font-size:14px; color:var(--texto); }
.zm-rx-sumar-oficial small{ font-size:12.5px; color:var(--texto-2); }

@media (max-width:720px){
  .zm-rx-armar{ grid-template-columns:minmax(0,1fr); }
  .zm-rx-catalogo{ max-height:260px; }
  .zm-rx-oficial, .zm-rx-sistema{ padding:16px 14px; }
  .zm-rx-oficial__cabeza{ grid-template-columns:auto minmax(0,1fr); }
  .zm-rx-oficial__cabeza > .zm-estado{ grid-column:2; margin-top:0; }
  .zm-rx-dato{ grid-template-columns:minmax(0,1fr) 32px; gap:0 8px; padding:6px 0; }
  .zm-rx-dato__etiqueta{ grid-column:1 / -1; }
  .zm-rx-paso{ grid-template-columns:24px minmax(0,1fr); gap:10px; }
  .zm-rx-paso__n{ width:24px; height:24px; font-size:12px; }
  .zm-rx-folio-campo{ max-width:none; flex-basis:100%; }
  .zm-rx-folio-form .btn{ flex:1 1 auto; }
  .zm-rx-linea__campos{ grid-template-columns:minmax(0,1fr); }
  .zm-rx .zm-fila__sub{ white-space:normal; }
  .zm-rx .zm-barra-filtros .zm-buscar{ flex-basis:100%; max-width:none; }
}
@media (prefers-reduced-motion: reduce){
  .zm-rx-oficial, .zm-rx-nuevo, .zm-rx-linea{ animation:zm-funde .18s ease both; }
  .zm-rx-copiar, .zm-rx-opcion, .zm-rx-linea__quitar, .zm-rx-sumar-oficial{ transition:none; }
  .zm-rx-copiar:active{ transform:none; }
}
.zm-rx-confirmo{ display:flex; align-items:flex-start; gap:8px; flex-basis:100%; font-size:13px; line-height:1.4; color:var(--texto-2); cursor:pointer; }
.zm-rx-confirmo input{ margin-top:2px; flex:none; }
.zm-rx-dato--auto .zm-rx-dato__valor{ color:var(--texto-2); }
.zm-rx-dato__etiqueta small{ color:var(--texto-3); font-weight:400; }
/* ── fin zm · recetas v620 ── */
/* ── zm · agenda v621 ── */
/* v621 · AGENDA: la grilla es la protagonista. La cabecera se vuelve una línea
   (el día que se mira es el título), la barra de trabajo junta en una sola fila el
   día, la vista, de quién es la agenda y Destacar, y la grilla ocupa el resto de la
   pantalla con bloques más altos (45 px cada 30 min), columnas más anchas y
   tarjetas que dicen primero hora, paciente, tratamiento y estado. Sin colores
   nuevos: todo con los tokens del sistema. */
.zm-ag{ --zm-ag-arriba:232px; }

/* Cabecera: fecha grande a la izquierda, lo diario a la derecha */
.zm-ag-cabeza{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px 20px; flex-wrap:wrap; margin:0 0 12px; }
.zm-ag-cabeza__texto{ min-width:0; flex:1 1 300px; }
.zm-ag-cabeza .zm-ceja{ margin:0 0 4px; }
.zm-ag-cabeza h1{ margin:0; display:flex; align-items:center; flex-wrap:wrap; gap:4px 12px; font-size:28px; font-weight:500; letter-spacing:-.035em; line-height:1.12; color:var(--texto); }
.zm-ag-hoy{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; letter-spacing:-.005em; color:var(--texto-2); }
.zm-ag-hoy::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--acento); flex:none; }
.zm-ag-cabeza__acciones{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.zm-ag-cabeza__acciones .btn, .zm-ag-cabeza__acciones .zm-mas > summary{ min-height:38px; padding-top:0; padding-bottom:0; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.zm-ag-msg{ margin:-4px 0 8px; font-size:13px; }

/* Barra de trabajo (sigue siendo .agenda-filtros: Destacar conserva sus capas v620) */
.zm-ag .agenda-filtros.zm-ag-barra{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:8px 10px; margin:0 0 10px; }
.zm-ag-nav{ display:inline-flex; align-items:center; gap:2px; padding:2px; border-radius:var(--r-boton); background:var(--solido-2); flex:none; }
.zm-ag-paso, .zm-ag-hoy-btn{ all:unset; box-sizing:border-box; position:relative; display:inline-grid; place-items:center; height:34px; min-width:34px; padding:0 8px;
  border-radius:var(--r-boton); color:var(--texto); font-size:13.5px; font-weight:500; letter-spacing:-.01em; cursor:pointer;
  transition:background-color .18s ease, transform .14s ease; -webkit-tap-highlight-color:transparent; }
.zm-ag-hoy-btn{ padding:0 14px; }
.zm-ag-hoy-btn[aria-pressed="true"]{ background:var(--solido); box-shadow:0 0 0 1px var(--linea); }
@media (hover:hover) and (pointer:fine){ .zm-ag-paso:hover, .zm-ag-hoy-btn:hover{ background:var(--solido); } }
.zm-ag-paso:active, .zm-ag-hoy-btn:active{ transform:scale(.97); }
.zm-ag-paso:focus-visible, .zm-ag-hoy-btn:focus-visible, .zm-ag-fecha:focus-within{ outline:2px solid var(--acento); outline-offset:1px; }
.zm-ag-fecha{ overflow:hidden; }
html .zm-ag-fecha input, html[data-theme="dark"] .zm-ag-fecha input{ position:absolute; inset:0; width:100%; height:100%; min-height:0; margin:0; padding:0; border:0; opacity:0; cursor:pointer; }
.zm-ag .zm-ag-barra .zm-seg{ flex:none; }
.zm-ag .af-chips.zm-ag-quien{ border-top:0; margin:0; padding:0; flex:0 1 auto; min-width:0; }
.zm-ag-barra__fin{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.zm-ag-pista{ font-size:12.5px; color:var(--texto-3); }
.zm-ag .af-destacar{ margin-left:0; }
.zm-ag .af-destacar > summary{ min-height:36px; padding:6px 14px; }
.zm-ag-canceladas{ gap:6px; }
@media (pointer:coarse){ .zm-ag .af-destacar > summary{ min-height:44px; } .zm-ag-paso, .zm-ag-hoy-btn{ height:40px; min-width:40px; } }

/* Grilla del día: ocupa el alto de la pantalla y se lee desde lejos */
.zm-ag .cd-wrap{ max-height:calc(100dvh - var(--zm-ag-arriba)); min-height:440px; border-color:var(--linea); border-radius:16px; background:var(--solido); }
/* El cuerpo ocupa el ancho de la grilla; con muchas columnas (184 px mínimo
   cada una) la grilla se desplaza de lado, nunca la página. */
.zm-ag .cd-body{ width:auto; }
.zm-ag .cd-gutter{ flex-basis:62px; background:var(--solido); }
.zm-ag .cd-col{ min-width:184px; border-right-color:var(--linea); }
.zm-ag .cd-colhead{ gap:8px; padding:0 10px 0 12px; background:var(--solido); border-bottom-color:var(--linea); white-space:normal; }
.zm-ag .cd-colhead.cd-gh{ border-top-color:transparent; }
.zm-ag-col__txt{ display:flex; flex-direction:column; justify-content:center; gap:1px; flex:1 1 auto; min-width:0; line-height:1.2; }
.zm-ag-col__nombre{ font-size:14px; font-weight:600; letter-spacing:-.015em; color:var(--texto); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-ag-col__sub{ font-size:11.5px; font-weight:400; letter-spacing:0; color:var(--texto-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Cuántas citas tiene la columna: primera palabra de la segunda línea, para que
   el nombre tenga todo el ancho y el número no se corte con la especialidad. */
.zm-ag .zm-ag-col__sub .cd-count{ display:inline; margin:0; padding:0; border:0; background:none; border-radius:0; font-size:inherit; font-weight:500; color:var(--texto-2); font-variant-numeric:tabular-nums; }
.zm-ag .cd-colhead-click:focus-visible{ outline:2px solid var(--acento); outline-offset:-2px; }
.zm-ag .cd-th{ padding:3px 10px 0 0; font-size:12px; font-variant-numeric:tabular-nums; color:var(--texto-3); border-bottom-color:var(--linea); }
.zm-ag .cd-th.zm-ag-th--hora{ font-weight:500; color:var(--texto-2); }
.zm-ag .cd-th.zm-ag-th--media{ font-size:11px; }
.zm-ag .cd-slot{ border-bottom-color:var(--linea); }
.zm-ag .cd-slot.zm-ag-slot--media, .zm-ag .cd-th.zm-ag-slot--media, .zm-ag .cal-cell.zm-ag-slot--media{ border-bottom-style:dashed; border-bottom-color:color-mix(in srgb, var(--linea) 60%, transparent); }

/* Tarjeta de cita: hora · paciente · estado, y debajo el tratamiento */
.zm-ag .cd-appt.zm-ag-cita{ padding:5px 8px 5px 9px; border-radius:10px; font-size:12.5px; line-height:1.25; }
.zm-ag .zm-ag-cita .zm-cd-fila{ gap:6px; line-height:1.25; }
.zm-ag .zm-ag-hora{ flex:none; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; opacity:.7; }
.zm-ag .zm-ag-cita .zm-cd-nombre{ font-size:13.5px; font-weight:600; letter-spacing:-.012em; }
.zm-ag .zm-ag-cita .zm-cd-trat{ margin-top:2px; font-size:12px; line-height:1.25; opacity:.72; }
.zm-ag-lugar{ margin-top:4px; font-size:11.5px; line-height:1.25; opacity:.62; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-ag-estado-caja{ margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:5px; }
.zm-ag-estado{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:500; line-height:1; white-space:nowrap; opacity:.85; }
.zm-ag-estado__txt{ display:none; }
.zm-ag-estado__ico{ display:inline-flex; color:var(--ok); }
@container cita (min-width: 236px){ .zm-ag-estado__txt{ display:inline; } }
/* Una sola columna (la agenda de un profesional, «Tu agenda» del médico, un
   espacio): la tarjeta es ancha y el texto crece con ella. */
@container cita (min-width: 420px){
  .zm-ag .zm-ag-cita .zm-cd-nombre{ font-size:15px; }
  .zm-ag .zm-ag-cita .zm-ag-hora{ font-size:13.5px; }
  .zm-ag .zm-ag-cita .zm-cd-trat{ font-size:13.5px; }
  .zm-ag .zm-ag-cita .zm-ag-lugar{ font-size:12.5px; }
  .zm-ag .zm-ag-cita .zm-ag-estado{ font-size:12px; }
}
.zm-ag .zm-ag-cita:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; z-index:9; }

/* Semana: bloques de 46 px, el número del día manda */
.zm-ag .cal-scroll{ max-height:calc(100dvh - var(--zm-ag-arriba)); min-height:440px; border:1px solid var(--linea); border-radius:16px; background:var(--solido); }
.zm-ag .cal-grid{ grid-template-columns:62px repeat(7, minmax(128px, 1fr)); min-width:960px; border:0; border-radius:0; }
.zm-ag .cal-head, .zm-ag .cal-corner{ background:var(--solido); border-bottom-color:var(--linea); }
.zm-ag .cal-head{ padding:6px 4px; letter-spacing:0; }
.zm-ag .cal-head.today{ background:var(--solido); color:inherit; }
.zm-ag-dsem__btn{ all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--r-boton); cursor:pointer; transition:background-color .18s ease; }
@media (hover:hover) and (pointer:fine){ .zm-ag-dsem__btn:hover{ background:var(--solido-2); } }
.zm-ag-dsem__btn:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
.zm-ag-dsem__nombre{ font-size:12.5px; font-weight:500; color:var(--texto-3); }
.zm-ag-dsem__num{ display:inline-grid; place-items:center; min-width:30px; height:30px; font-size:19px; font-weight:500; letter-spacing:-.03em; color:var(--texto); font-variant-numeric:tabular-nums; }
.zm-ag-dsem__num--hoy{ border-radius:50%; background:var(--acento); color:var(--acento-tinta); font-size:16px; }
.zm-ag .cal-time{ padding:4px 8px 0 4px; font-size:12px; font-variant-numeric:tabular-nums; color:var(--texto-3); letter-spacing:0; }
.zm-ag .cal-time.zm-ag-th--hora{ color:var(--texto-2); font-weight:500; }
.zm-ag .cal-time.zm-ag-th--media{ font-size:11px; }
.zm-ag .cal-cell{ border-color:var(--linea); }
.zm-ag .cal-appt.zm-ag-sem{ padding:4px 7px 4px 8px; border-radius:9px; font-size:12px; line-height:1.2; }
.zm-ag-sem-fila{ display:flex; align-items:center; gap:5px; min-width:0; line-height:1.2; }
.zm-ag .zm-ag-sem .zm-cd-nombre{ font-size:12.5px; font-weight:600; letter-spacing:-.01em; }
.zm-ag .zm-ag-sem .zm-ag-hora{ font-size:11px; }
.zm-ag .zm-ag-sem .zm-cd-trat{ margin-top:2px; font-size:11px; opacity:.72; }
.zm-ag-sem-cancel{ text-decoration:none; }
.zm-ag-sem-marcas{ display:flex; margin-top:4px; min-width:0; }
.zm-ag-sc{ flex:none; padding:0 4px; border-radius:4px; font-size:9px; font-weight:700; line-height:14px; background:color-mix(in srgb, currentColor 14%, transparent); }
/* Un día por pantalla en el teléfono: tarjetas cómodas para el pulgar */
.zm-ag .zm-ag-sem--movil{ padding:9px 12px; }
.zm-ag .zm-ag-sem--movil .zm-cd-nombre{ font-size:15px; }
.zm-ag .zm-ag-sem--movil .zm-ag-hora{ font-size:13px; }
.zm-ag .zm-ag-sem--movil .zm-cd-trat{ font-size:13px; }
.zm-ag .zm-ag-semana--movil .day-grid{ border-color:var(--linea); border-radius:16px; background:var(--solido); }

.zm-ag-pabellon{ margin-top:14px; }

/* Detalle de la cita: cuándo, quién, qué y en qué estado, antes que las filas */
.zm-ag-det{ margin:0 0 12px; padding:0 0 14px; border-bottom:1px solid var(--linea); }
.zm-ag-det__cuando{ margin:0 0 4px; font-size:13px; font-weight:500; color:var(--texto-2); font-variant-numeric:tabular-nums; }
.zm-ag-det__paciente{ margin:0; font-size:22px; font-weight:600; letter-spacing:-.022em; line-height:1.2; color:var(--texto); }
.zm-ag-det__ficha{ all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:6px; border-radius:8px; cursor:pointer; color:inherit; }
.zm-ag-det__ficha svg{ color:var(--texto-3); transition:transform .18s ease, color .18s ease; }
@media (hover:hover) and (pointer:fine){ .zm-ag-det__ficha:hover svg{ transform:translateX(3px); color:var(--texto-2); } }
.zm-ag-det__ficha:active{ transform:scale(.99); }
.zm-ag-det__ficha:focus-visible{ outline:2px solid var(--acento); outline-offset:3px; }
.zm-ag-det__trat{ margin:4px 0 0; font-size:15px; line-height:1.35; color:var(--texto-2); }
.zm-ag-det__estado{ margin:10px 0 0; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.zm-ag-det__primera{ font-size:12.5px; color:var(--texto-3); }

@media (max-width:820px){
  .zm-ag .cd-wrap, .zm-ag .cal-scroll{ max-height:none; min-height:0; }
  .zm-ag .cd-col{ min-width:164px; }
}
@media (max-width:640px){
  .zm-ag-cabeza{ align-items:stretch; margin-bottom:10px; }
  .zm-ag-cabeza h1{ font-size:24px; }
  /* Dos filas y no tres: «+ Nueva cita» a lo ancho y debajo Bloquear, Lista de
     espera y Más en una sola línea (Lista de espera se estira, las otras no). */
  .zm-ag-cabeza__acciones{ width:100%; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:8px; }
  .zm-ag-cabeza__acciones > .btn.gold{ order:-1; grid-column:1 / -1; justify-content:center; }
  .zm-ag-cabeza__acciones > .btn, .zm-ag-cabeza__acciones .zm-mas > summary{ min-width:0; padding-left:12px; padding-right:12px; font-size:14px; justify-content:center; overflow:hidden; }
  .zm-ag .agenda-filtros.zm-ag-barra{ gap:8px; }
  .zm-ag .zm-ag-barra .zm-seg{ order:3; flex:1 1 100%; }
  .zm-ag .zm-ag-barra .zm-seg .zm-seg__op{ flex:1 1 0; justify-content:center; }
  .zm-ag .af-chips.zm-ag-quien{ order:4; flex:1 1 100%; }
  .zm-ag .af-busca input{ width:100%; }
  .zm-ag .af-chips.zm-ag-quien .af-grupo{ flex-wrap:nowrap; width:100%; }
  .zm-ag .af-chips.zm-ag-quien .af-busca{ flex:1 1 auto; min-width:0; }
  .zm-ag-pista{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .zm-ag-paso, .zm-ag-hoy-btn, .zm-ag-dsem__btn, .zm-ag-det__ficha svg{ transition:none; }
  .zm-ag-paso:active, .zm-ag-hoy-btn:active, .zm-ag-det__ficha:active{ transform:none; }
  .zm-ag-det__ficha:hover svg{ transform:none; }
}
/* ── fin zm · agenda v621 ── */
/* ── zm · ficha v621 ── */
/* v621 · FICHA DEL PACIENTE como el editor de un tratamiento: una cabecera con quién
   es y cómo está (se recoge al bajar y deja nombre, alergias y acciones), un índice
   que sigue a la lectura (chips en el teléfono o con la ventana angosta, como en la
   videoconsulta) y siete secciones con el mismo encabezado. Solo tokens: el rojo vive
   en las alergias y en lo que se debe; el acento, en el botón principal y la cifra clave. */

/* ---------- Ventana: cabecera fija y cuerpo que se desplaza ---------- */
.modal.zm-pf-modal{ width:100%; max-width:1140px; padding:0; display:flex; flex-direction:column;
  max-height:calc(100vh - 80px); max-height:calc(100dvh - 80px); overflow:hidden; background:var(--solido); }
.modal.zm-pf-modal > .close-x{ top:16px; right:16px; z-index:6; }
.zm-pf{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; min-width:0; container-type:inline-size; container-name:zm-pf; }
.zm-pf [hidden]{ display:none !important; }

/* ---------- Cabecera ---------- */
.zm-pf-cabeza{ position:relative; z-index:4; flex:0 0 auto; padding:20px 28px 14px; background:var(--solido); border-bottom:1px solid var(--linea); }
.zm-pf-archivado{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 56px 12px 0; font-size:13px; color:var(--texto-2); }
.zm-pf-fila{ display:flex; align-items:center; justify-content:space-between; gap:14px 20px; flex-wrap:wrap; padding-right:44px; }
.zm-pf-id{ display:flex; align-items:center; gap:14px; min-width:0; flex:1 1 360px; }
.zm-pf-mono{ flex:0 0 auto; display:grid; place-items:center; width:48px; height:48px; border-radius:16px; background:var(--solido-2); color:var(--texto);
  font-size:16px; font-weight:500; letter-spacing:-.01em; }
.zm-pf-id__txt{ min-width:0; }
.modal h2.zm-pf-nombre{ margin:0; font-size:24px; font-weight:500; letter-spacing:-.03em; line-height:1.15; color:var(--texto); overflow-wrap:anywhere; }
.zm-pf-sub{ display:flex; flex-wrap:wrap; align-items:center; row-gap:4px; margin-top:6px; font-size:13.5px; line-height:1.4; color:var(--texto-2); }
.zm-pf-sub > span{ display:inline-flex; align-items:center; gap:4px; }
.zm-pf-sub > span:not(:last-child)::after{ content:'·'; margin:0 9px 0 5px; color:var(--texto-3); }
.zm-pf-sub b{ font-weight:500; color:var(--texto); }
.zm-pf-sub .zm-estado{ font-size:13px; }
.zm-pf-sub__tenue{ color:var(--texto-3); }
.zm-pf-enlace{ all:unset; cursor:pointer; color:var(--texto); text-decoration:underline; text-decoration-color:var(--texto-3); text-underline-offset:3px; text-decoration-thickness:1px; }
.zm-pf-enlace:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; border-radius:4px; }
@media (hover:hover) and (pointer:fine){ .zm-pf-enlace:hover{ text-decoration-color:var(--texto); } }
.zm-pf-acciones{ display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
html .zm-pf-acciones > .btn, html[data-theme="dark"] .zm-pf-acciones > .btn,
html .zm-pf-acciones .zm-mas > summary, html[data-theme="dark"] .zm-pf-acciones .zm-mas > summary{ display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 13px; font-size:13.5px; white-space:nowrap; }
.zm-pf-acciones > .btn{ transition:transform .14s var(--sal), background-color .18s ease, border-color .18s ease; }
.zm-pf-acciones > .btn:active:not(:disabled){ transform:scale(.97); }

/* Lo que se recoge al bajar: el origen y las tres teselas de estado. */
.zm-pf-plegable{ display:grid; grid-template-rows:1fr; opacity:1; transition:grid-template-rows .22s var(--sal), opacity .18s ease; }
.zm-pf-plegable__dentro{ min-height:0; overflow:hidden; }
.zm-pf-cabeza[data-compacta="si"] .zm-pf-plegable{ grid-template-rows:0fr; opacity:0; }
.zm-pf-cabeza .zm-origen{ margin-top:12px; }
.zm-pf-estado{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; padding:14px 0 2px; }
.zm-pf-tesela{ all:unset; box-sizing:border-box; display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:0; padding:12px 14px;
  border:1px solid var(--linea); border-radius:var(--r-chica); background:var(--solido); color:var(--texto); cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease, transform .14s var(--sal); }
.zm-pf-tesela:active{ transform:scale(.98); }
.zm-pf-tesela:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
@media (hover:hover) and (pointer:fine){ .zm-pf-tesela:hover{ background:var(--solido-2); } }
.zm-pf-tesela__eti{ font-size:12px; color:var(--texto-3); }
.zm-pf-tesela__valor{ max-width:100%; font-size:17px; font-weight:500; letter-spacing:-.02em; line-height:1.25; font-variant-numeric:tabular-nums;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-pf-tesela__sub{ max-width:100%; font-size:12.5px; line-height:1.35; color:var(--texto-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-pf-tesela > .zm-estado{ margin-top:4px; font-size:12px; }
.zm-pf-tesela > .zm-avance{ margin-top:8px; }

/* Alergias: lo único de la cabecera que puede hacer daño si no se lee. Nunca se recoge. */
.zm-pf-alerta{ display:flex; align-items:flex-start; gap:10px; margin:12px 0 0; padding:9px 14px; border-radius:var(--r-chica);
  border:1px solid color-mix(in srgb,var(--danger) 36%,transparent); background:color-mix(in srgb,var(--danger) 7%,var(--solido));
  font-size:14px; line-height:1.45; color:var(--texto); }
.zm-pf-alerta > svg{ flex:0 0 auto; margin-top:2px; color:var(--danger); }
.zm-pf-alerta b{ margin-right:6px; font-weight:600; color:var(--danger); }

/* ---------- Cuerpo: índice + secciones ---------- */
.zm-pf-cuerpo{ flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; padding:22px 28px 40px; }
.zm-pf-editor{ grid-template-columns:188px minmax(0,1fr); gap:32px; }
.zm-pf-indice{ top:0; z-index:3; }
.zm-pf-indice button{ justify-content:space-between; gap:8px; }
.zm-pf-indice__txt{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-pf-indice__n{ flex:0 0 auto; font-size:12px; color:var(--texto-3); font-variant-numeric:tabular-nums; }
.zm-pf-indice .zm-estado{ flex:0 0 auto; gap:0; }
.zm-pf-secciones{ min-width:0; }
.zm-pf-sec{ scroll-margin-top:6px; padding:0 0 30px; }
.zm-pf-sec + .zm-pf-sec{ padding-top:26px; }
.zm-pf-sec:last-child{ padding-bottom:8px; }
.zm-pf-sec__cabeza{ display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; margin:0 0 6px; }
.zm-pf-sec__cabeza > h3{ margin:0; font-size:20px; font-weight:500; letter-spacing:-.025em; line-height:1.25; color:var(--texto); }
.zm-pf-sec__acciones{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.zm-pf-sec > .zm-seccion__ayuda{ margin:0 0 14px; max-width:72ch; }
.zm-pf-sec .zm-cont, .zm-pf-sec .zm-cont:first-child, .zm-pf-sec .zm-cont:last-child{ padding:12px 0; border-top:1px solid var(--linea); }
.zm-pf-sec__cabeza + .zm-pf-bloque, .zm-pf-sec__cabeza + .zm-pf-zairi, .zm-pf-sec__cabeza + .zm-pf-cargando{ margin-top:12px; }

/* Bloques con subtítulo dentro de una sección. */
.zm-pf-bloque{ min-width:0; margin:0 0 18px; }
.zm-pf-bloque__cabeza{ display:flex; align-items:center; justify-content:space-between; gap:8px 12px; flex-wrap:wrap; margin:0 0 4px; }
.zm-pf-sub-titulo{ display:flex; align-items:center; gap:8px; margin:0 0 6px; font-size:15px; font-weight:500; letter-spacing:-.012em; line-height:1.3; color:var(--texto); }
.zm-pf-bloque__cabeza > .zm-pf-sub-titulo{ margin:0; }
.zm-pf-mini-titulo{ margin:12px 0 2px; font-size:12.5px; font-weight:500; color:var(--texto-2); }
.zm-pf-total, .zm-pf .zm-mov__monto.zm-pf-debe{ font-size:14px; font-weight:500; color:var(--danger); font-variant-numeric:tabular-nums; }
.zm-pf-tenue{ color:var(--texto-3); font-weight:400; }
.zm-pf-falta{ margin:8px 0 0; font-size:13px; line-height:1.5; color:var(--texto-3); }
.zm-pf-pendiente{ display:flex; align-items:center; gap:6px 10px; flex-wrap:wrap; margin:0 0 16px; font-size:13.5px; color:var(--texto-2); }
.zm-pf-filtro{ margin:0 0 6px; font-size:13px; color:var(--texto-2); }
.zm-pf .zm-lista--plana{ background:transparent; border:0; border-radius:0; padding:0; }
.zm-pf .zm-lista--plana > .zm-ffila + .zm-ffila, .zm-pf-pago + .zm-pf-pago{ border-top:1px solid var(--linea); }
.zm-pf .zm-lista--plana > .zm-fila{ width:calc(100% + 20px); margin:0 -10px; padding:12px 10px; }
.zm-pf .zm-lista--plana > .zm-fila + .zm-fila::before{ left:10px; right:10px; }
.zm-pf .zm-proximas{ margin:0; }
html .zm-pf .zm-ffila__acciones select, html[data-theme="dark"] .zm-pf .zm-ffila__acciones select{ margin:0; width:auto; max-width:150px; min-height:34px; padding-top:4px; padding-bottom:4px; }

/* Cifras del resumen y «Se atiende con». */
.zm-pf-cifras{ grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); margin:14px 0 20px; }
.zm-pf-conquien{ display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap; margin:4px 0 14px; }
.zm-pf-conquien__eti{ font-size:13px; color:var(--texto-2); }
.zm-pf-conquien .zm-chip{ min-height:32px; padding:5px 12px; font-size:13px; }

/* ---------- zairi en la ficha: tarjetas serenas ---------- */
.zm-pf-cargando{ margin:0 0 10px; font-size:12.5px; color:var(--texto-3); }
.zm-pf-zairi{ margin:0 0 12px; padding:14px 16px; border-radius:var(--r-tarjeta); background:var(--solido-2); color:var(--texto); }
.zm-pf-zairi--quieta{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:10px 14px; font-size:13px; }
.zm-pf-zairi--quieta > svg{ color:var(--ok); }
.zm-pf-zairi--quieta > b{ font-weight:500; }
.zm-pf-zairi--quieta > span{ color:var(--texto-2); }
.zm-pf-zairi__cabeza{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.zm-pf-zairi__cuenta{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:76px; padding:8px 10px;
  border-radius:12px; background:var(--solido); text-align:center; }
.zm-pf-zairi__cuenta b{ font-size:22px; font-weight:500; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--texto); }
.zm-pf-zairi__cuenta span{ margin-top:4px; font-size:10.5px; line-height:1.2; color:var(--texto-3); }
.zm-pf-zairi[data-tono="mal"] .zm-pf-zairi__cuenta b{ color:var(--danger); }
.zm-pf-zairi__texto{ flex:1 1 240px; min-width:0; }
.zm-pf-zairi__texto > b{ display:block; font-size:14px; font-weight:500; line-height:1.4; }
.zm-pf-zairi__texto > p{ margin:3px 0 0; font-size:12.5px; line-height:1.45; color:var(--texto-2); }
.zm-pf-zairi__texto > p.zm-pf-zairi__fuente{ color:var(--texto-3); }
.zm-pf-zairi__mensaje{ margin:12px 0 0; padding:10px 12px; border-radius:12px; background:var(--solido); font-size:13px; line-height:1.55; color:var(--texto); }
.zm-pf-zairi__acciones{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:10px; }
.zm-pf-zairi__acciones a.btn{ text-decoration:none; }
.zm-pf-zairi__orbe{ flex:0 0 34px; width:34px; height:34px; display:grid; place-items:center; overflow:hidden; }
.zm-pf-zairi__hallazgos{ margin-top:10px; }
.zm-pf-zairi .zm-hallazgo{ background:var(--solido); }
.zm-pf-zairi .zm-hallazgo__detalle.zm-pf-zairi__paso{ color:var(--texto); }

/* ---------- Planes (PlanDePaciente sin su marco: ya está dentro de su sección) ---------- */
html .zm-pf-planes > .card, html[data-theme="dark"] .zm-pf-planes > .card{ margin:0 0 18px; padding:0; background:transparent; background-image:none;
  border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
.zm-pf-planes > .card > div:first-child > .section-title{ font-size:15px; font-weight:500; letter-spacing:-.012em; text-transform:none; color:var(--texto); }
.zm-pf .zm-packs{ margin:0 0 16px; }

/* ---------- Pagos por cita: formularios en línea ---------- */
.zm-pf-forma{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 12px; padding:10px 12px; border-radius:12px; background:var(--solido-2);
  font-size:13px; color:var(--texto-2); }
html .zm-pf-forma input, html .zm-pf-forma select, html[data-theme="dark"] .zm-pf-forma input, html[data-theme="dark"] .zm-pf-forma select{ margin:0; width:auto; max-width:100%; }
.zm-pf-forma input[inputmode="numeric"]{ width:130px; }
.zm-pf-totales{ margin:14px 0 0; }
.zm-pf-totales > dd.zm-pf-dd--alerta{ color:var(--danger); }

/* ---------- Comunicación ---------- */
.zm-pf-conv{ display:flex; align-items:center; justify-content:space-between; gap:12px 16px; flex-wrap:wrap; margin:12px 0 16px; padding:14px 16px;
  border:1px solid var(--linea); border-radius:var(--r-tarjeta); }
.zm-pf-conv__info{ display:flex; align-items:center; gap:12px; min-width:0; flex:1 1 280px; }
.zm-pf-conv__ico{ flex:0 0 auto; display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--solido-2); color:var(--texto-2); }
.zm-pf-conv__txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.zm-pf-conv__txt > b{ font-size:14.5px; font-weight:500; color:var(--texto); }
.zm-pf-conv__txt > span{ font-size:13px; line-height:1.45; color:var(--texto-2); }
.zm-pf-conv__varias{ display:flex; flex-wrap:wrap; gap:6px; flex-basis:100%; }

/* ---------- Pares de lectura (contacto, antecedentes, datos personales) ---------- */
.zm-pf-pares{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px 24px; margin:0; }
.zm-pf-pares > div{ min-width:0; }
.zm-pf-pares dt{ margin:0 0 2px; font-size:12px; color:var(--texto-3); }
.zm-pf-pares dd{ margin:0; font-size:14.5px; line-height:1.45; color:var(--texto); overflow-wrap:anywhere; white-space:pre-wrap; }
.zm-pf-pares dd a{ color:var(--texto); text-decoration:underline; text-decoration-color:var(--linea); text-underline-offset:3px; }
.zm-pf-pares--ancho{ grid-template-columns:minmax(0,1fr); gap:12px; }
.zm-pf-pares dd.zm-pf-dd--alerta{ font-weight:500; color:var(--danger); }
.zm-pf-pares dd.zm-pf-dd--tenue{ color:var(--texto-2); }
.zm-pf .fc-complemento{ margin:12px 0 0; padding:12px 14px; border:1px solid var(--linea); border-radius:var(--r-chica); background:transparent; }
.zm-pf .fc-complemento > summary{ font-size:13px; font-weight:500; color:var(--texto-2); }
.zm-pf-gestion .fc-gestion{ padding:12px 0 0; border-top:1px solid var(--linea); font-size:13px; color:var(--texto-2); }

/* Datos personales en grupos; archivar, al final y sin ruido. */
.zm-pf-grupos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:24px 36px; margin-top:12px; }
.zm-pf-grupo{ min-width:0; }
.zm-pf-grupo .zm-pf-pares{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.zm-pf-grupo .zm-pf-falta{ margin-top:6px; }
.zm-pf-archivar{ display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; margin-top:28px; padding-top:16px; border-top:1px solid var(--linea); }
.zm-pf-archivar > p{ margin:0; max-width:62ch; font-size:13px; line-height:1.5; color:var(--texto-3); }
html .zm-pf .btn.zm-pf-peligro, html[data-theme="dark"] .zm-pf .btn.zm-pf-peligro{ color:var(--danger); }
.zm-pf-fin{ display:flex; justify-content:flex-end; padding:8px 0 0; }

/* ---------- Índice como chips: ventana angosta (videoconsulta) o teléfono ---------- */
@container zm-pf (max-width: 760px){
  .zm-pf-acciones{ flex-basis:100%; justify-content:flex-start; }
  .zm-pf-estado{ grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:8px; }
  .zm-pf-tesela{ padding:10px 12px; }
  .zm-pf-tesela__valor{ font-size:15.5px; }
  .zm-pf-editor{ grid-template-columns:minmax(0,1fr); gap:10px; }
  .zm-pf-indice{ position:sticky; top:0; z-index:3; flex-direction:row; gap:6px; margin:-22px -28px 6px; padding:12px 28px 10px; overflow-x:auto; scrollbar-width:none;
    background:var(--solido); border-bottom:1px solid var(--linea); }
  .zm-pf-indice::-webkit-scrollbar{ display:none; }
  .zm-pf-indice button{ flex:0 0 auto; padding:7px 12px; border:1px solid var(--linea); border-radius:999px; }
  .zm-pf-indice button[aria-current="true"]{ border-color:var(--texto); }
  .zm-pf-sec{ scroll-margin-top:64px; }
}
@media(max-width:820px){
  .zm-pf-editor{ grid-template-columns:minmax(0,1fr); gap:10px; }
  .zm-pf-indice button{ border:1px solid var(--linea); border-radius:999px; }
  .zm-pf-indice button[aria-current="true"]{ border-color:var(--texto); }
  .zm-pf-sec{ scroll-margin-top:64px; }
}
/* En el teléfono la ventana entera se desplaza (la cabecera se va con ella) y los
   chips quedan pegados arriba; las acciones del día, en una grilla de tres. */
@media(max-width:700px){
  .modal.zm-pf-modal{ display:block; max-height:none; overflow:visible; }
  .zm-pf{ display:block; }
  .zm-pf-cabeza{ padding:18px 16px 14px; border-radius:inherit; }
  .zm-pf-fila{ padding-right:40px; }
  .modal h2.zm-pf-nombre{ font-size:21px; }
  .zm-pf-mono{ width:42px; height:42px; border-radius:14px; font-size:15px; }
  .zm-pf-acciones{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; padding-right:0; }
  .zm-pf-fila{ padding-right:0; }
  .zm-pf-id{ padding-right:40px; }
  html .zm-pf-acciones > .btn, html[data-theme="dark"] .zm-pf-acciones > .btn,
  html .zm-pf-acciones .zm-mas > summary, html[data-theme="dark"] .zm-pf-acciones .zm-mas > summary{ justify-content:center; gap:5px; min-height:42px; padding:4px 6px; font-size:13px; line-height:1.15; white-space:normal; text-align:center; }
  .zm-pf-acciones .zm-mas{ display:flex; }
  .zm-pf-acciones .zm-mas > summary{ flex:1 1 auto; }
  .zm-pf-estado{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(220px,1fr); gap:8px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; padding-bottom:6px; }
  .zm-pf-estado > .zm-pf-tesela{ scroll-snap-align:start; }
  .zm-pf-cabeza[data-compacta="si"] .zm-pf-plegable{ grid-template-rows:1fr; opacity:1; }
  .zm-pf-cuerpo{ overflow:visible; padding:0 16px 28px; }
  .zm-pf-indice{ position:sticky; top:0; margin:0 -16px 8px; padding:10px 16px; flex-direction:row; overflow-x:auto; background:var(--solido); border-bottom:1px solid var(--linea);
    box-shadow:0 -14px 0 var(--solido); }
  .zm-pf-sec__cabeza > h3{ font-size:18px; }
  /* La ventana se desplaza bajo la barra de la app (fija) y los chips pegados. */
  .zm-pf-sec{ scroll-margin-top:140px; }
  .zm-pf-grupos{ grid-template-columns:minmax(0,1fr); }
  .zm-pf-conv > .btn{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion: reduce){
  .zm-pf-plegable, .zm-pf-tesela, .zm-pf-acciones > .btn{ transition:none; }
  .zm-pf-tesela:active, .zm-pf-acciones > .btn:active:not(:disabled){ transform:none; }
}
/* ── fin zm · ficha v621 ── */
/* ── zm · inicio v621 ── */
/* Inicio (v621): la primera pantalla de cada persona. Arriba y grande, el día: lo que
   viene ahora, lo pendiente (confirmar, cobrar, marcar asistencia, el próximo día), lo
   que zairi pide revisar y las citas de hoy; debajo, el período (resumen del negocio o
   métricas de agenda) y el registro de agendamientos. Sólo tokens: el color vive en los
   puntos de estado y el acento en la acción principal y la cifra clave. En escritorio
   dos columnas; hasta 1180 px una sola, con lo breve (pendientes, zairi) antes de la
   lista larga. */
.zm-inicio{ min-width:0; }
.zm-inicio .zm-cabeza{ margin-bottom:20px; }
.zm-inicio-dia{ display:grid; grid-template-columns:minmax(0,1.62fr) minmax(300px,1fr); gap:18px; align-items:start; margin:0 0 30px; }
.zm-inicio-dia__col{ display:flex; flex-direction:column; gap:18px; min-width:0; }
@media(max-width:1180px){
  .zm-inicio-dia{ grid-template-columns:minmax(0,1fr); gap:16px; }
  .zm-inicio-dia__col{ display:contents; }
  .zm-inicio-ahora{ order:1; } .zm-inicio-aviso{ order:2; } .zm-inicio-pend{ order:3; } .zm-inicio-zairi{ order:4; } .zm-inicio-citas{ order:5; }
}
.zm-inicio-rotulo{ margin:0 0 10px; padding:0 2px; font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-3); }
.zm-inicio-aviso{ margin:0; padding:10px 14px; border-radius:var(--r-chica); background:var(--solido-2); font-size:13.5px; color:var(--texto); animation:zm-asoma .22s var(--sal) both; }
.zm-inicio-nota{ margin:8px 0 0; font-size:12.5px; line-height:1.5; color:var(--texto-2); }
.zm-inicio-error{ margin:0 0 12px; font-size:13.5px; color:var(--danger); }
.zm-inicio-negativo{ color:var(--danger); }
.zm-inicio-tenue{ color:var(--texto-3); }
.zm-inicio-marca{ flex:0 0 auto; padding:2px 8px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--linea); font-size:11px; font-weight:500; letter-spacing:.01em; color:var(--texto-2); white-space:nowrap; }

/* Esqueletos mientras llega el día (sin saltos: ocupan lo mismo que lo que viene). */
.zm-inicio-hueso{ display:block; border-radius:10px; background:var(--solido-2); animation:zm-inicio-late 1.4s ease-in-out infinite; }
.zm-inicio-hueso--hora{ width:170px; height:52px; margin-top:4px; }
.zm-inicio-hueso--linea{ width:min(420px,80%); height:14px; }
.zm-inicio-hueso--fila{ height:52px; margin:6px; }
.zm-cifra.zm-inicio-hueso--cifra{ min-height:84px; border-color:transparent; }
@keyframes zm-inicio-late{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

/* ---- Lo que viene ahora: la hora grande, la persona, dónde y con quién ---- */
.zm-inicio-ahora{ position:relative; display:flex; flex-direction:column; gap:14px; min-width:0; padding:22px 24px 20px; background:var(--solido); border:1px solid var(--linea); border-radius:var(--r-tarjeta); }
.zm-inicio-ahora__cabeza{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.zm-inicio-ahora__cabeza .zm-ceja{ margin:0; }
.zm-inicio-ahora__reloj{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--texto-2); font-variant-numeric:tabular-nums; }
.zm-inicio-ahora__reloj::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--ok); animation:zm-inicio-vivo 2.4s ease-in-out infinite; }
@keyframes zm-inicio-vivo{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.zm-inicio-ahora__cita{ display:flex; flex-direction:column; gap:6px; min-width:0; animation:zm-asoma .22s var(--sal) both; }
.zm-inicio-ahora__hora{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.zm-inicio-ahora__hh{ font-size:56px; font-weight:500; letter-spacing:-.05em; line-height:1; font-variant-numeric:tabular-nums; color:var(--texto); }
.zm-inicio-ahora__falta{ font-size:15px; color:var(--texto-2); }
.zm-inicio-ahora__paciente{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; margin-top:8px; }
.zm-inicio-ahora__nombre{ all:unset; box-sizing:border-box; max-width:100%; font-size:26px; font-weight:500; letter-spacing:-.03em; line-height:1.15; color:var(--texto); overflow-wrap:anywhere; }
button.zm-inicio-ahora__nombre{ cursor:pointer; border-radius:6px; }
button.zm-inicio-ahora__nombre:focus-visible{ outline:2px solid var(--acento); outline-offset:3px; }
@media (hover:hover) and (pointer:fine){ button.zm-inicio-ahora__nombre:hover{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; } }
.zm-inicio-ahora__detalle{ margin:0; font-size:14.5px; line-height:1.45; color:var(--texto-2); }
.zm-inicio-ahora__acciones{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
.zm-inicio-ahora__acciones .zm-estado{ margin-right:6px; font-size:13.5px; }
.zm-inicio-ahora__fin strong{ display:block; font-size:24px; font-weight:500; letter-spacing:-.03em; line-height:1.2; color:var(--texto); }
.zm-inicio-ahora__fin p{ margin:6px 0 0; font-size:14px; color:var(--texto-2); }
.zm-inicio-ahora__luego{ display:flex; flex-direction:column; gap:8px; padding-top:14px; border-top:1px solid var(--linea); }
.zm-inicio-ahora__grupo{ display:flex; align-items:center; gap:6px 8px; flex-wrap:wrap; min-width:0; }
.zm-inicio-ahora__rotulo{ flex:0 0 92px; font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-3); }
.zm-inicio-ahora__otra{ all:unset; box-sizing:border-box; display:inline-flex; align-items:baseline; gap:7px; max-width:100%; min-height:30px; padding:6px 12px; border-radius:999px; background:var(--solido-2);
  font-size:13px; color:var(--texto); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background-color .18s ease, transform .14s var(--sal); }
.zm-inicio-ahora__otra b{ font-weight:500; color:var(--texto-2); font-variant-numeric:tabular-nums; }
.zm-inicio-ahora__otra:active{ transform:scale(.97); }
.zm-inicio-ahora__otra:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
@media (hover:hover) and (pointer:fine){ .zm-inicio-ahora__otra:hover{ background:var(--linea); } }
.zm-inicio-ahora__mas{ font-size:12.5px; color:var(--texto-3); }
.zm-inicio-ahora__pie{ display:flex; flex-direction:column; gap:8px; padding-top:14px; border-top:1px solid var(--linea); font-size:12.5px; color:var(--texto-2); font-variant-numeric:tabular-nums; }

/* ---- Pendientes ---- */
.zm-inicio-pend{ min-width:0; }
.zm-inicio-pend__lista .zm-fila{ min-height:58px; }
.zm-inicio-pend__n{ display:inline-grid; place-items:center; min-width:26px; height:26px; padding:0 8px; box-sizing:border-box; border-radius:999px; background:var(--solido-2); color:var(--texto); font-size:13px; font-weight:500; }
@media(max-width:640px){
  .zm-inicio-pend__lista .zm-fila{ grid-template-columns:minmax(0,1fr) auto 18px; }
  .zm-inicio-pend__lista .zm-fila__meta{ grid-column:2; grid-row:1; }
  .zm-inicio-pend__lista .zm-fila__chevron{ grid-column:3; grid-row:1; }
}
.zm-inicio-pend__nada{ padding:16px 18px; background:var(--solido); border:1px solid var(--linea); border-radius:var(--r-tarjeta); }

/* ---- Lo que zairi pide revisar ---- */
/* Conserva .sim-hero (la familia de tarjetas de zairi) con la superficie serena de los demás módulos. */
html body .sim-hero.zm-inicio-zairi{ display:flex; flex-direction:column; align-items:stretch; gap:12px; min-width:0; margin:0; padding:18px 18px 16px; text-align:left; overflow:visible;
  background:var(--solido); background-image:none; border:1px solid var(--linea); border-radius:var(--r-tarjeta); box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
html body .sim-hero.zm-inicio-zairi:hover{ transform:none; border-color:var(--linea); box-shadow:none; }
.zm-inicio-zairi__cabeza{ display:flex; align-items:center; gap:12px; min-width:0; }
.zm-inicio-zairi__orbe{ flex:0 0 34px; width:34px; height:34px; display:grid; place-items:center; overflow:hidden; border-radius:50%; }
.zm-inicio-zairi__orbe > *{ margin:0 !important; }
.zm-inicio-zairi__titulo{ min-width:0; }
.zm-inicio-zairi__titulo h2{ margin:0; font-size:15px; font-weight:500; letter-spacing:-.015em; line-height:1.3; color:var(--texto); }
.zm-inicio-zairi__titulo p{ margin:2px 0 0; font-size:12.5px; line-height:1.4; color:var(--texto-2); }
.zm-inicio-zairi__vista{ display:flex; flex-direction:column; gap:2px; margin:0 -8px; }
.zm-inicio-zairi__item{ all:unset; box-sizing:border-box; display:flex; flex-direction:column; gap:3px; padding:9px 10px; border-radius:var(--r-chica); cursor:pointer; transition:background-color .18s ease, transform .14s var(--sal); }
.zm-inicio-zairi__item .zm-estado{ font-size:11.5px; color:var(--texto-3); }
.zm-inicio-zairi__txt{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; padding-left:14px; font-size:13.5px; line-height:1.4; color:var(--texto); }
.zm-inicio-zairi__item:active{ transform:scale(.99); }
.zm-inicio-zairi__item:focus-visible{ outline:2px solid var(--acento); outline-offset:-2px; }
@media (hover:hover) and (pointer:fine){ .zm-inicio-zairi__item:hover{ background:var(--solido-2); } }
.zm-inicio-zairi__mas{ align-self:flex-start; }
.zm-inicio-zairi__todo{ display:flex; flex-direction:column; gap:10px; min-width:0; animation:zm-asoma .22s var(--sal) both; }
.zm-inicio-zairi__todo .zm-seg{ align-self:flex-start; }
.zm-inicio-zairi__mod{ display:block; margin:0 0 3px 2px; font-size:11.5px; color:var(--texto-3); }
.zm-inicio-zairi__hallazgo + .zm-inicio-zairi__hallazgo{ margin-top:8px; }
.zm-inicio-zairi .zm-hallazgo__texto{ flex-basis:220px; }

/* ---- Las citas de hoy: hora, persona y tratamiento, profesional y espacio, estado ---- */
.zm-inicio-citas{ min-width:0; }
.zm-inicio-citas__cabeza{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:6px 0 12px; }
.zm-inicio-citas__cabeza h2{ margin:0; font-size:18px; font-weight:500; letter-spacing:-.02em; color:var(--texto); }
.zm-inicio-citas__acciones{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.zm-inicio-citas > .zm-seg{ margin:0 0 12px; }
.zm-inicio-cita{ --cita-cols:56px minmax(0,1.6fr) minmax(0,1fr) minmax(max-content,.9fr) 18px; position:relative; display:grid; grid-template-columns:var(--cita-cols); align-items:center; gap:4px 16px;
  min-height:64px; padding:10px 14px; border-radius:var(--r-chica); color:var(--texto); transition:background-color .18s ease; }
.zm-inicio-cita + .zm-inicio-cita::before, .zm-inicio-linea + .zm-inicio-cita::before{ content:''; position:absolute; left:14px; right:14px; top:0; height:1px; background:var(--linea); opacity:.7; }
.zm-inicio-linea + .zm-inicio-cita::before{ display:none; }
.zm-inicio-cita--cabeza{ min-height:0; padding-top:8px; padding-bottom:9px; border-radius:0; border-bottom:1px solid var(--linea); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-3); }
.zm-inicio-cita__abrir{ all:unset; position:absolute; inset:0; z-index:0; border-radius:inherit; cursor:pointer; }
.zm-inicio-cita__abrir:focus-visible{ outline:2px solid var(--acento); outline-offset:-2px; }
.zm-inicio-cita > span{ position:relative; min-width:0; pointer-events:none; }
.zm-inicio-cita button:not(.zm-inicio-cita__abrir){ position:relative; z-index:1; pointer-events:auto; }
.zm-inicio-cita__hora{ display:flex; flex-direction:column; gap:1px; font-variant-numeric:tabular-nums; }
.zm-inicio-cita__hora b{ font-size:17px; font-weight:500; letter-spacing:-.02em; }
.zm-inicio-cita__hora small{ font-size:12px; color:var(--texto-3); }
.zm-inicio-cita__quien{ display:flex; flex-direction:column; gap:3px; }
.zm-inicio-cita__paciente{ display:flex; align-items:center; gap:8px; min-width:0; font-size:15px; font-weight:500; letter-spacing:-.01em; }
.zm-inicio-cita__paciente > span:not(.zm-inicio-marca){ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html .zm-inicio .inicio-paciente-link{ all:unset; box-sizing:border-box; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; font-weight:500; letter-spacing:-.01em; color:var(--texto); cursor:pointer; border-radius:4px; }
html .zm-inicio .inicio-paciente-link:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
@media (hover:hover) and (pointer:fine){ html .zm-inicio .inicio-paciente-link:hover{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; } }
.zm-inicio-cita__trat{ font-size:13px; color:var(--texto-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-inicio-cita__donde{ display:flex; flex-direction:column; gap:2px; font-size:13px; }
.zm-inicio-cita__donde > *{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-inicio-cita__donde small{ font-size:12.5px; color:var(--texto-2); }
.zm-inicio-cita__estado{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.zm-inicio-cita__estado .zm-estado{ white-space:normal; text-align:right; }
.zm-inicio-cita__saldo{ font-size:13.5px; font-weight:500; font-variant-numeric:tabular-nums; }
.zm-inicio-cita__nota{ font-size:12.5px; color:var(--texto-3); }
.zm-inicio-cita__estado .btn{ white-space:nowrap; }
.zm-inicio-cita > .zm-fila__chevron{ pointer-events:none; }
.zm-inicio-cita.is-pasada .zm-inicio-cita__hora, .zm-inicio-cita.is-pasada .zm-inicio-cita__quien, .zm-inicio-cita.is-pasada .zm-inicio-cita__donde{ opacity:.62; }
.zm-inicio-cita.is-ahora{ background:var(--solido-2); }
@media (hover:hover) and (pointer:fine){
  .zm-inicio-cita:not(.zm-inicio-cita--cabeza):hover{ background:var(--solido-2); }
  .zm-inicio-cita:not(.zm-inicio-cita--cabeza):hover::before, .zm-inicio-cita:not(.zm-inicio-cita--cabeza):hover + .zm-inicio-cita::before{ opacity:0; }
  .zm-inicio-cita:hover > .zm-fila__chevron{ transform:translateX(3px) rotate(45deg); border-color:var(--texto); }
}
.zm-inicio-linea{ display:flex; align-items:center; gap:10px; padding:8px 14px; font-size:11.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--texto); font-variant-numeric:tabular-nums; }
.zm-inicio-linea::after{ content:''; flex:1; height:1px; background:var(--texto); opacity:.35; }
.zm-inicio-lista .coleccion-paginada > .zm-inicio-cita:first-child::before{ display:none; }
@media(max-width:640px){
  .zm-inicio-cita{ grid-template-columns:48px minmax(0,1fr) 14px; gap:5px 12px; align-items:start; padding:12px 10px; }
  .zm-inicio-cita--cabeza{ display:none; }
  .zm-inicio-cita__hora{ grid-column:1; grid-row:1 / span 3; padding-top:1px; }
  .zm-inicio-cita__hora b{ font-size:16px; }
  .zm-inicio-cita__quien, .zm-inicio-cita__donde, .zm-inicio-cita__estado{ grid-column:2; }
  .zm-inicio-cita__donde{ flex-direction:row; flex-wrap:wrap; gap:0 6px; color:var(--texto-2); }
  .zm-inicio-cita__donde small::before{ content:'· '; }
  .zm-inicio-cita__estado{ flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:6px 12px; }
  .zm-inicio-cita__estado .zm-estado{ text-align:left; }
  .zm-inicio-cita > .zm-fila__chevron{ grid-column:3; grid-row:1 / span 3; align-self:center; }
  .zm-inicio-cita + .zm-inicio-cita::before{ left:10px; right:10px; }
}

/* ---- El período: resumen del negocio o métricas de agenda ---- */
.zm-inicio-seccion{ min-width:0; margin:0 0 30px; }
.zm-inicio-seccion__cabeza{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; margin:0 0 14px; padding-top:22px; border-top:1px solid var(--linea); }
.zm-inicio-seccion__cabeza h2{ margin:0; font-size:20px; font-weight:500; letter-spacing:-.025em; color:var(--texto); }
.zm-inicio-seccion__cabeza p{ margin:4px 0 0; font-size:13px; color:var(--texto-2); }
.zm-inicio-seccion > .zm-seg{ margin:0 0 4px; }
.zm-inicio-periodo{ display:flex; align-items:flex-end; justify-content:flex-end; gap:10px; flex-wrap:wrap; min-width:0; max-width:100%; }
.zm-inicio-periodo__rango{ display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; animation:zm-asoma .22s var(--sal) both; }
.zm-inicio-periodo__rango label, .zm-inicio-fecha{ display:flex; flex-direction:column; gap:4px; margin:0; font-size:12px; color:var(--texto-2); }
html .zm-inicio-periodo__rango input, html .zm-inicio-fecha input, html[data-theme="dark"] .zm-inicio-periodo__rango input, html[data-theme="dark"] .zm-inicio-fecha input{
  margin:0; width:auto; min-height:38px; padding:6px 12px; border-radius:12px; border:1px solid var(--linea); background:var(--solido); color:var(--texto); font:inherit; font-size:13.5px; }
html .zm-inicio-periodo__rango input:focus-visible, html .zm-inicio-fecha input:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
.zm-inicio-detalle{ margin:0 0 18px; animation:zm-asoma .22s var(--sal) both; }
.zm-inicio-detalle .zm-tarjeta__cabeza{ align-items:flex-start; }
.zm-inicio-kpis{ margin-top:10px; }
.zm-inicio-kpis__cabeza{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:6px 0 12px; }
.zm-inicio-kpis__cabeza h3{ margin:0; font-size:16px; font-weight:500; letter-spacing:-.015em; color:var(--texto); }
.zm-inicio-kpis .zm-cifras{ grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); }
.zm-inicio-kpis .zm-cifra__valor{ font-size:21px; }
.zm-inicio-rentabilidad{ margin:0 0 4px; }

/* Tablas de Inicio (detalle, rentabilidad, métricas y registro): densas y alineadas. */
.zm-inicio-tabla-marco{ overflow-x:auto; margin:0 -6px; -webkit-overflow-scrolling:touch; }
html .zm-inicio-tabla{ width:100%; border-collapse:collapse; font-size:13.5px; color:var(--texto); }
html .zm-inicio-tabla th{ padding:8px 10px; text-align:left; font-size:11.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-3); border-bottom:1px solid var(--linea); white-space:nowrap; background:transparent; }
html .zm-inicio-tabla td{ padding:11px 10px; font-size:13.5px; border-bottom:1px solid var(--linea); vertical-align:top; color:var(--texto); }
html .zm-inicio-tabla tbody tr:last-child td{ border-bottom:0; }
html .zm-inicio-tabla .is-num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
html .zm-inicio-tabla .is-fuerte{ font-weight:500; }
.zm-inicio-tabla td small{ display:block; margin-top:2px; font-size:12px; color:var(--texto-2); white-space:nowrap; }
.zm-inicio-tabla__fecha{ white-space:nowrap; font-variant-numeric:tabular-nums; }
.zm-inicio-tabla__fecha b{ font-weight:500; }
html .zm-inicio-tabla td.zm-inicio-tabla__vacia{ padding:18px 10px; text-align:center; color:var(--texto-2); }
.zm-inicio-enlace{ all:unset; box-sizing:border-box; font-weight:500; color:var(--texto); cursor:pointer; border-radius:4px; }
.zm-inicio-enlace:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
@media (hover:hover) and (pointer:fine){ .zm-inicio-enlace:hover{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; } }
.zm-inicio-origen{ font-size:13px; color:var(--texto-2); white-space:nowrap; }
.zm-inicio-ventas{ display:flex; flex-direction:column; }
.zm-inicio-venta{ padding:12px 2px; border-bottom:1px solid var(--linea); }
.zm-inicio-venta:last-child{ border-bottom:0; }
.zm-inicio-venta__cabeza{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:14px; }
.zm-inicio-venta__cabeza span{ font-weight:400; color:var(--texto-2); }
.zm-inicio-venta__monto{ font-weight:500; font-variant-numeric:tabular-nums; }
.zm-inicio-venta__sub{ margin-top:2px; font-size:12.5px; color:var(--texto-2); }
.zm-inicio-venta__pago{ margin-top:8px; padding:10px 12px; border-radius:var(--r-chica); background:var(--solido-2); font-size:13px; }
.zm-inicio-venta__pago .zm-pares{ margin-top:6px; }
.zm-inicio-venta__id{ word-break:break-all; }

/* Registro de agendamientos. */
.zm-inicio-registro__filtros{ align-items:flex-end; }
.zm-inicio-registro__filtros .zm-buscar{ flex:1 1 280px; max-width:none; }
.zm-inicio-registro{ margin-top:12px; padding:8px 14px 10px; }
.zm-inicio-registro__pie{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:10px 0 2px; border-top:1px solid var(--linea); font-size:12.5px; color:var(--texto-3); font-variant-numeric:tabular-nums; }
.zm-inicio-registro__pie > div{ display:flex; gap:6px; }

@media(max-width:640px){
  .zm-inicio-ahora{ padding:18px 16px 16px; }
  .zm-inicio-ahora__hh{ font-size:46px; }
  .zm-inicio-ahora__nombre{ font-size:22px; }
  .zm-inicio-ahora__rotulo{ flex-basis:100%; }
  /* En el teléfono lo que viene después ya está en la lista de abajo: la tarjeta queda en la próxima cita. */
  .zm-inicio-ahora__grupo--despues{ display:none; }
  .zm-inicio-ahora__luego:not(:has(.zm-inicio-ahora__grupo--encurso)){ display:none; }
  .zm-inicio-ahora__acciones .btn{ flex:1 1 auto; }
  html body .sim-hero.zm-inicio-zairi{ padding:16px 14px 14px; }
  .zm-inicio-seccion__cabeza{ align-items:flex-start; }
  .zm-inicio-periodo{ justify-content:flex-start; }
  .zm-inicio-registro{ padding:6px 10px 10px; }
}
@media (prefers-reduced-motion: reduce){
  .zm-inicio-hueso, .zm-inicio-ahora__reloj::before{ animation:none; }
  .zm-inicio-ahora__cita, .zm-inicio-zairi__todo, .zm-inicio-detalle, .zm-inicio-periodo__rango, .zm-inicio-aviso{ animation:zm-funde .18s ease both; }
  .zm-inicio-cita, .zm-inicio-ahora__otra, .zm-inicio-zairi__item, .zm-inicio-cita > .zm-fila__chevron{ transition:none; }
}
/* ── fin zm · inicio v621 ── */
/* ── zm · conciliacion v621 ── */
/* La conciliación bancaria de zairi balance con sus dos modos: la cartola (manual) y
   Mercado Pago (automático). Reutiliza las filas y grupos de .zm-conta-banco; aquí solo
   el selector de modo, la barra del modo automático y su entrada. */
.zm-conc-modo{ display:flex; align-items:center; gap:8px 14px; flex-wrap:wrap; margin:0 0 14px; }
.zm-conc-modo__nota{ min-width:0; font-size:12.5px; line-height:1.45; color:var(--texto-3); }
.zm-conc-mp{ min-width:0; animation:zm-conc-entra 220ms var(--sal) both; }
@keyframes zm-conc-entra{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.zm-conc-mp__barra{ justify-content:space-between; }
.zm-conc-mp__estado{ display:flex; align-items:center; gap:4px 12px; flex-wrap:wrap; flex:1 1 320px; min-width:0; }
.zm-conc-mp__dias{ display:inline-flex; align-items:center; gap:6px; margin:0; font-size:12.5px; font-weight:400; color:var(--texto-3); }
html body .zm-conc-mp__dias select{ width:auto; margin:0; min-height:36px; padding:5px 10px; font-size:13.5px; border-radius:10px; }
.zm-conc-mp__nota{ margin:10px 0 0; max-width:78ch; font-size:12.5px; line-height:1.5; color:var(--texto-3); }
.zm-conc-mp .zm-solapas{ margin:2px 0 14px; }
.zm-conc-mp__vista > * + *{ margin-top:12px; }
.zm-conc-mp__fila > .zm-estado{ flex:0 0 auto; }
.zm-conc-mp__fila .zm-conta-banco__elegir .btn{ margin:0; }
.zm-conc-mp__sin .zm-conc-mp__nota{ margin:8px 0 0; }
@media (max-width:640px){
  .zm-conc-modo .zm-seg{ display:flex; width:100%; }
  .zm-conc-modo .zm-seg__op{ flex:1 1 0; justify-content:center; }
  .zm-conc-mp__barra > .btn{ flex:1 1 auto; }
  .zm-conc-mp__fila .zm-conta-banco__que{ flex-basis:150px; }
  .zm-conc-mp__fila .zm-conta-banco__con,
  .zm-conc-mp__fila .zm-conta-banco__nota{ order:1; }
  .zm-conc-mp__fila .zm-conta-banco__elegir{ flex:1 1 100%; order:2; }
  html body .zm-conc-mp__fila .zm-conta-banco__elegir select{ flex:1 1 100%; max-width:100%; }
}
@media (prefers-reduced-motion: reduce){
  .zm-conc-mp{ animation:none; }
}
/* ── fin zm · conciliacion v621 ── */
/* ── zm · telemedicina v621 ── */
/* Telemedicina: la lista de videoconsultas con el estado de su registro, el registro
   de cada una (antes, durante y después de la llamada) y la solapa Cumplimiento.
   Solo tokens. El panel de video es oscuro también de día: su franja de registro
   redefine los tokens de texto con la paleta de noche (--blanco, --plata, --humo).
   Movimiento: la fila responde al pulsar (140 ms) y al pasar (180 ms); la hoja del
   registro asoma (220 ms). Todo reposa en prefers-reduced-motion. */
.zm-tele-aviso{ display:flex; align-items:flex-start; gap:10px; margin:0 0 16px; padding:12px 16px; border-radius:var(--r-chica); background:var(--solido-2); font-size:13.5px; line-height:1.5; color:var(--texto-2); }
.zm-tele-aviso b{ font-weight:500; color:var(--texto); }
.zm-tele-aviso svg{ margin-top:2px; color:var(--texto-2); }
.zm-tele-error{ margin:0 0 12px; font-size:13.5px; color:var(--danger); }
.zm-tele-cargando{ padding:18px 0; }
.zm-tele-nota{ font-size:12.5px; line-height:1.45; color:var(--texto-3); }
.zm-tele-nota--bloque{ display:block; margin:10px 0 0; }

/* La lista */
.zm-tele-dia{ margin:0 0 16px; }
.zm-tele-dia__titulo{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 8px; padding:0 4px; font-size:14px; font-weight:500; letter-spacing:-.01em; color:var(--texto); }
.zm-tele-dia__titulo span{ font-size:12.5px; font-weight:400; color:var(--texto-3); }
.zm-tele-fila{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; }
.zm-tele-fila + .zm-tele-fila::before{ content:''; position:absolute; left:14px; right:14px; top:0; height:1px; background:var(--linea); opacity:.7; }
.zm-tele-fila > .btn{ margin-right:8px; white-space:nowrap; }
.zm-tele-fila__abre{ all:unset; box-sizing:border-box; display:grid; grid-template-columns:52px minmax(0,1fr) auto 18px; align-items:center; gap:6px 16px; min-width:0; min-height:62px; padding:12px 14px; border-radius:var(--r-chica); color:var(--texto); cursor:pointer; transition:background-color .18s ease, transform .14s var(--sal); }
.zm-tele-fila__abre:focus-visible{ outline:2px solid var(--acento); outline-offset:-2px; }
.zm-tele-fila__abre:active{ transform:scale(.995); }
@media (hover:hover) and (pointer:fine){
  .zm-tele-fila__abre:hover{ background:var(--solido-2); }
  .zm-tele-fila__abre:hover .zm-fila__chevron{ transform:translateX(3px) rotate(45deg); border-color:var(--texto); }
}
.zm-tele-fila__hora{ display:flex; flex-direction:column; font-size:15px; font-weight:500; letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:var(--texto); }
.zm-tele-fila__hora small{ font-size:11.5px; font-weight:400; color:var(--texto-3); }
.zm-tele-fila[data-fase="pasada"] .zm-tele-fila__hora{ color:var(--texto-2); }
.zm-tele-fila__principal{ min-width:0; }
.zm-tele-fila__titulo{ display:block; font-size:15px; font-weight:500; letter-spacing:-.01em; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-tele-fila__sub{ display:block; margin-top:3px; font-size:13px; line-height:1.35; color:var(--texto-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-tele-fila__estado{ display:flex; justify-content:flex-end; min-width:0; }
@media(max-width:640px){
  .zm-tele-fila{ grid-template-columns:minmax(0,1fr); gap:0; }
  .zm-tele-fila__abre{ grid-template-columns:44px minmax(0,1fr) 18px; }
  .zm-tele-fila__estado{ grid-column:2; grid-row:2; justify-content:flex-start; }
  .zm-tele-fila__abre .zm-fila__chevron{ grid-column:3; grid-row:1 / span 2; }
  .zm-tele-fila > .btn{ justify-self:start; margin:0 0 12px 74px; }
}

/* El registro de una videoconsulta */
.zm-tele-modal .zm-tele-cabeza{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:-6px 0 16px; }
.zm-tele-cabeza__texto{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.zm-tele-cabeza__cuando{ font-size:15px; font-weight:500; color:var(--texto); }
.zm-tele-cabeza__cuando::first-letter{ text-transform:uppercase; }
.zm-tele-cabeza__quien{ font-size:13.5px; color:var(--texto-2); }
.zm-tele-msg{ margin:0 0 14px; padding:10px 14px; border-radius:var(--r-chica); background:var(--solido-2); font-size:13.5px; color:var(--texto); }
.zm-tele-bloque{ padding:16px 0 4px; border-top:1px solid var(--linea); }
.zm-tele-modal .zm-tele-bloque > h3{ margin:0 0 10px; font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-3); }
.zm-tele-pasos{ margin:0; padding:0; list-style:none; }
.zm-tele-paso{ display:grid; grid-template-columns:14px minmax(0,1fr); gap:12px; padding:10px 0; }
.zm-tele-paso + .zm-tele-paso{ border-top:1px solid var(--linea); }
.zm-tele-paso__punto{ align-self:start; margin-top:7px; line-height:0; }
.zm-tele-paso__cuerpo{ min-width:0; }
.zm-tele-paso__cuerpo > strong{ display:block; font-size:14.5px; font-weight:500; letter-spacing:-.01em; color:var(--texto); }
.zm-tele-paso__cuerpo > p{ margin:3px 0 0; max-width:72ch; font-size:13.5px; line-height:1.5; color:var(--texto-2); }
.zm-tele-paso__acciones{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:8px; }
.zm-tele-paso__acciones .btn{ display:inline-flex; align-items:center; gap:6px; }
.zm-tele-confirma{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:13px; color:var(--texto-2); }
.zm-tele-acomp{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.zm-tele-acomp input{ min-width:0; flex:1 1 150px; max-width:240px; padding:7px 11px; border:1px solid var(--linea); border-radius:var(--r-campo); background:var(--solido); color:var(--texto); font:inherit; font-size:13.5px; }
.zm-tele-acomp input:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
.zm-tele-pares > dd{ white-space:normal; text-align:right; }
.zm-tele-pares .btn{ margin:-4px 0; }
.zm-tele-part{ display:block; }
.zm-tele-part + .zm-tele-part{ margin-top:4px; }
.zm-tele-bitacora__cabeza{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.zm-tele-bitacora__cabeza .zm-tele-nota{ margin:0; max-width:68ch; }
.zm-tele-eventos{ margin:12px 0 0; padding:0; list-style:none; max-height:320px; overflow:auto; }
.zm-tele-eventos li{ display:grid; grid-template-columns:128px minmax(0,1fr) minmax(0,auto); gap:4px 14px; padding:8px 0; border-top:1px solid var(--linea); font-size:13px; color:var(--texto); }
.zm-tele-eventos__hora{ font-variant-numeric:tabular-nums; color:var(--texto-3); }
.zm-tele-eventos__quien{ color:var(--texto-2); text-align:right; }
.zm-tele-pie{ margin-top:18px; padding-top:14px; border-top:1px solid var(--linea); }
@media(max-width:640px){
  .zm-tele-eventos li{ grid-template-columns:minmax(0,1fr); }
  .zm-tele-eventos__quien{ text-align:left; }
  .zm-tele-pares > dd{ text-align:left; }
}

/* Cumplimiento */
.zm-tele-cumple .zm-frase{ margin-top:4px; }
.zm-tele-lista{ margin:0; padding:0; list-style:none; }
.zm-tele-lista li{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:11px 0; border-top:1px solid var(--linea); }
.zm-tele-lista li:first-child{ border-top:0; padding-top:0; }
.zm-tele-lista .zm-estado{ font-size:14px; color:var(--texto); white-space:normal; }
.zm-tele-lista .zm-tele-nota{ padding-left:14px; font-size:13px; color:var(--texto-2); }
.zm-tele-norma{ padding-left:14px; font-size:12px; color:var(--texto-3); }
.zm-tele-ir{ all:unset; color:var(--acento); cursor:pointer; white-space:nowrap; }
.zm-tele-ir:hover{ text-decoration:underline; }
.zm-tele-ir:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; border-radius:6px; }

/* El panel de la videoconsulta es oscuro también de día. La capa de píldoras (§7)
   pinta todo .btn con --solido, y sus botones .vbtn quedaban blancos sobre el video:
   un destello en la cara de quien está en cámara. Aquí vuelven a ser oscuros con la
   paleta de noche, y la franja del registro lee sus textos en --blanco/--plata/--humo. */
.vc-panel .btn.vbtn, html[data-theme="dark"] .vc-panel .btn.vbtn{ background:color-mix(in srgb, var(--blanco) 8%, transparent); color:var(--blanco); border:1px solid color-mix(in srgb, var(--blanco) 18%, transparent); }
@media(hover:hover) and (pointer:fine){
  .vc-panel .btn.vbtn:hover, html[data-theme="dark"] .vc-panel .btn.vbtn:hover{ background:color-mix(in srgb, var(--blanco) 14%, transparent); color:var(--blanco); border-color:color-mix(in srgb, var(--blanco) 28%, transparent); }
}
.vc-panel .btn.vbtn:focus-visible{ outline:2px solid var(--azul-pal); outline-offset:2px; }
.vc-cabeza-pac{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; color:var(--plata); }
.vc-reg{ flex:0 0 auto; padding:8px 12px; border-top:1px solid color-mix(in srgb, var(--blanco) 12%, transparent); color:var(--blanco); }
.vc-reg .zm-estado{ --texto-2:var(--plata); --texto-3:var(--humo); color:var(--plata); }
.vc-reg__barra{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px; }
.vc-reg__titulo{ font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--humo); }
.vc-reg__abrir{ margin-left:auto; }
.vc-reg__hoja{ display:flex; flex-direction:column; gap:8px; padding-top:10px; animation:zm-asoma .22s var(--sal) both; }
.vc-reg__grupo{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.vc-reg__que{ min-width:104px; font-size:12.5px; color:var(--plata); }
.vc-reg__grupo input{ min-width:0; flex:1 1 150px; max-width:240px; padding:7px 11px; border:1px solid color-mix(in srgb, var(--blanco) 16%, transparent); border-radius:var(--r-campo); background:color-mix(in srgb, var(--blanco) 7%, transparent); color:var(--blanco); font:inherit; font-size:13.5px; }
.vc-reg__grupo input::placeholder{ color:var(--humo); }
.vc-reg__grupo input:focus-visible{ outline:2px solid var(--azul-pal); outline-offset:1px; }
.vc-reg__nota{ margin:0; font-size:12.5px; line-height:1.45; color:var(--plata); }
@media (prefers-reduced-motion: reduce){
  .zm-tele-fila__abre, .zm-tele-fila__abre .zm-fila__chevron{ transition:none; }
  .zm-tele-fila__abre:active{ transform:none; }
  .vc-reg__hoja{ animation:none; }
}
/* ── fin zm · telemedicina v621 ── */
/* ── zm · equipo v621 ── */
/* Equipo (accesos) e Integraciones. Solo tokens: el color de un estado vive en el
   punto de EstadoPunto; las marcas de WhatsApp, Instagram, Messenger, Mercado Pago
   y Shopify traen sus propios colores (LogoCanal, IconMercadoPago, shopify-bag). */

/* Equipo · lista */
.zm-eqa-mensaje{ margin:-8px 0 16px; font-size:13.5px; color:var(--texto-2); animation:zm-asoma .22s var(--sal) both; }
.zm-eqa-lista .zm-fila__meta{ gap:16px; }
.zm-eqa-rolfila{ min-width:132px; text-align:right; color:var(--texto-2); }
.zm-eqa-lista .zm-fila__meta .zm-estado{ min-width:112px; }
.zm-eqa-tu{ display:inline-block; margin-left:8px; padding:1px 8px; border-radius:999px; border:1px solid var(--linea); font-size:11.5px; font-weight:500; letter-spacing:0; color:var(--texto-2); vertical-align:1px; }
.zm-eqa-guia{ margin-top:16px; padding:0 18px; background:var(--solido); border:1px solid var(--linea); border-radius:var(--r-tarjeta); }
.zm-eqa-guia > summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; cursor:pointer; font-size:14px; font-weight:500; color:var(--texto); }
.zm-eqa-guia > summary::-webkit-details-marker{ display:none; }
.zm-eqa-guia > summary::after{ content:''; width:7px; height:7px; margin-right:4px; border-right:1.6px solid var(--texto-3); border-bottom:1.6px solid var(--texto-3); transform:translateY(-2px) rotate(45deg); transition:transform .22s var(--sal); }
.zm-eqa-guia[open] > summary::after{ transform:translateY(2px) rotate(225deg); }
.zm-eqa-guia > summary:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; border-radius:10px; }
.zm-eqa-guia__roles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:4px 28px; padding:4px 0 18px; animation:zm-asoma .22s var(--sal) both; }
.zm-eqa-guia__rol{ padding:12px 0; border-top:1px solid var(--linea); }
.zm-eqa-guia__rol b{ font-size:14px; font-weight:500; color:var(--texto); }
.zm-eqa-guia__rol p{ margin:3px 0 8px; font-size:13px; line-height:1.45; color:var(--texto-2); }
.zm-eqa-modulos{ display:flex; flex-wrap:wrap; gap:5px; margin:0; padding:0; list-style:none; }
.zm-eqa-modulos li{ padding:3px 10px; border-radius:999px; background:var(--solido-2); font-size:12px; color:var(--texto-2); }

/* Equipo · ventana del acceso (usa el armazón .zm-eq-modal de Profesionales) */
.modal.zm-eqa-modal{ max-width:720px; }
.zm-eqa-modal .zm-eq-cuerpo{ padding-top:2px; }
.zm-eqa-aviso{ margin:0 0 16px; padding:10px 12px; border-radius:var(--r-chica); background:var(--solido-2); font-size:13px; line-height:1.5; color:var(--texto-2); }
.zm-eqa-fijo{ margin:0; min-height:40px; display:flex; align-items:center; padding:0 2px; font-size:14px; color:var(--texto); overflow-wrap:anywhere; }
.zm-eqa-roles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.zm-eqa-rol{ position:relative; display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px; align-items:start; margin:0; padding:11px 12px; border:1px solid var(--linea); border-radius:var(--r-chica); font-weight:400; cursor:pointer; transition:border-color .18s ease, background-color .18s ease, transform .14s var(--sal); }
.zm-eqa-rol input{ width:auto; margin:2px 0 0; accent-color:var(--texto); }
.zm-eqa-rol > span{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.zm-eqa-rol b{ font-size:14px; font-weight:500; color:var(--texto); }
.zm-eqa-rol small{ font-size:12.5px; line-height:1.45; color:var(--texto-2); }
.zm-eqa-rol[data-activo]{ border-color:var(--texto); background:var(--solido-2); }
.zm-eqa-rol[data-bloqueado]{ cursor:not-allowed; opacity:.55; }
.zm-eqa-rol:active:not([data-bloqueado]){ transform:scale(.99); }
.zm-eqa-rol:focus-within{ outline:2px solid var(--acento); outline-offset:1px; }
@media (hover:hover) and (pointer:fine){ .zm-eqa-rol:not([data-bloqueado]):not([data-activo]):hover{ border-color:var(--texto-3); } }
.zm-eqa-ve{ margin-top:14px; }
.zm-eqa-ve__titulo{ display:block; margin:0 0 8px; font-size:12.5px; color:var(--texto-2); }
.zm-eqa-clave{ display:flex; align-items:center; gap:8px; }
.zm-eqa-clave input{ flex:1 1 auto; min-width:0; }
.zm-eqa-ver{ all:unset; box-sizing:border-box; flex:0 0 auto; min-height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--linea); font-size:13px; color:var(--texto-2); cursor:pointer; transition:border-color .18s ease, color .18s ease, transform .14s var(--sal); }
.zm-eqa-ver[aria-pressed="true"]{ color:var(--texto); border-color:var(--texto-3); }
.zm-eqa-ver:active{ transform:scale(.97); }
.zm-eqa-ver:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
.zm-eqa-ver:disabled{ opacity:.5; cursor:not-allowed; }
.zm-eqa-regla{ display:flex; flex-wrap:wrap; gap:4px 14px; margin:8px 0 0; padding:0; list-style:none; }
.zm-eqa-regla .zm-estado{ font-size:12px; }
.zm-eqa-regla li[data-ok] .zm-estado{ color:var(--texto); }
.zm-eqa-oculto{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.zm-eqa-nota{ margin:10px 0 0; font-size:13px; line-height:1.5; color:var(--texto-2); }
.zm-eqa-nota .zm-estado{ white-space:normal; align-items:flex-start; line-height:1.45; }
.zm-eqa-nota .zm-estado::before{ margin-top:5px; }
.zm-eqa-estado{ display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; }
.zm-eqa-estado__acciones{ display:flex; gap:8px; flex-wrap:wrap; }
.zm-eqa-eliminar{ color:var(--danger); }

/* Integraciones · lista por grupos */
.zm-int-grupo{ margin:0 0 18px; }
.zm-int-grupo__titulo{ margin:0 0 8px; padding:0 4px; font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-3); }
.zm-int-lista .zm-fila__ico{ background:var(--solido-2); }
.zm-int-lista .zm-fila__ico .logo-canal{ box-shadow:none; }
.zm-int-lista .zm-fila__meta .zm-estado{ min-width:112px; }
.zm-int-marca{ display:inline-grid; place-items:center; flex:0 0 auto; }
.zm-int-marca svg{ width:100%; height:100%; display:block; }
img.zm-int-marca{ object-fit:contain; }
.zm-int-pie{ margin:14px 4px 0; max-width:78ch; font-size:13px; line-height:1.5; color:var(--texto-3); }
.zm-int-respaldo{ margin-top:18px; }
.zm-int-respaldo .zm-tarjeta__cabeza{ align-items:center; margin-bottom:0; }
.zm-int-respaldo .zm-tarjeta__cabeza + *{ margin-top:14px; }

/* Integraciones · la ventana de cada conexión */
.modal.zm-int-modal{ max-width:680px; }
.modal.zm-int-modal--ancha{ max-width:860px; }
.zm-int-cabeza{ display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:14px; margin:0 0 16px; }
.zm-int-logo{ display:grid; place-items:center; width:48px; height:48px; border-radius:14px; background:var(--solido-2); color:var(--texto-2); }
.zm-int-logo .logo-canal{ box-shadow:none; }
.zm-int-cabeza__texto p{ margin:4px 0 0; font-size:13.5px; line-height:1.45; color:var(--texto-2); }
.zm-int-evidencia{ margin:0 0 16px; padding:12px 14px; border-radius:var(--r-chica); background:var(--solido-2); font-size:13.5px; line-height:1.5; color:var(--texto); }
.zm-int-info{ display:grid; grid-template-columns:minmax(150px,max-content) minmax(0,1fr); gap:0 18px; margin:0 0 6px; }
.zm-int-info dt, .zm-int-info dd{ margin:0; padding:10px 0; border-top:1px solid var(--linea); font-size:13.5px; line-height:1.5; }
.zm-int-info dt{ color:var(--texto-2); }
.zm-int-info dd{ color:var(--texto); }
.zm-int-info dt:first-of-type, .zm-int-info dd:first-of-type{ border-top:0; }
.zm-int-bloque{ margin-top:18px; padding-top:18px; border-top:1px solid var(--linea); }
.zm-int-bloque > h3, .zm-int-bloque__cabeza h3, .zm-int-flow__pagos > h3{ margin:0 0 4px; font-size:15px; font-weight:500; letter-spacing:-.01em; color:var(--texto); }
.zm-int-bloque__cabeza{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; }
.zm-int-bloque__cabeza p{ margin:0; font-size:13px; color:var(--texto-2); }
.zm-int-ayuda{ margin:0 0 12px; font-size:13px; line-height:1.55; color:var(--texto-2); max-width:78ch; }
.zm-int-nota{ margin:8px 0 0; font-size:13px; line-height:1.5; color:var(--texto-2); }
.zm-int-tenue{ color:var(--texto-3); }
.zm-int-error{ margin:10px 0 0; font-size:13px; line-height:1.5; color:var(--danger); }
.zm-int-linea{ margin:0; font-size:13.5px; line-height:1.55; color:var(--texto); }
.zm-int-linea .zm-estado, .zm-int-resultado .zm-estado{ white-space:normal; align-items:flex-start; line-height:1.5; font-size:13.5px; }
.zm-int-linea .zm-estado::before, .zm-int-resultado .zm-estado::before{ margin-top:6px; }
.zm-int-resultado{ display:flex; flex-direction:column; gap:10px; margin-top:12px; animation:zm-asoma .22s var(--sal) both; }
.zm-int-codigos{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12px; color:var(--texto-3); }
.zm-int-codigos code{ padding:3px 9px; border-radius:999px; background:var(--solido-2); font-family:inherit; font-size:11.5px; color:var(--texto-2); font-variant-numeric:tabular-nums; }
.zm-int-faltan{ padding:10px 14px; border-radius:var(--r-chica); background:var(--solido-2); font-size:13px; line-height:1.5; color:var(--texto); }
.zm-int-faltan ul, .zm-int-faltan ol{ margin:0; padding-left:18px; }
.zm-int-faltan ol{ margin-top:8px; color:var(--texto-2); }
.zm-int-acciones{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.zm-int-espacio{ margin-top:14px; }
.zm-int-casilla{ display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px; align-items:start; margin:6px 0 0; padding:6px 0; font-weight:400; cursor:pointer; }
.zm-int-casilla input{ width:auto; margin:3px 0 0; }
.zm-int-casilla > span{ display:flex; flex-direction:column; gap:2px; }
.zm-int-casilla b{ font-size:14px; font-weight:500; color:var(--texto); }
.zm-int-casilla small{ font-size:12.5px; color:var(--texto-2); }
.zm-int-campos{ margin:0; padding:0; border:0; min-width:0; }
.zm-int-campos:disabled .zm-int-casilla{ cursor:default; }
/* Lo que no se puede cambiar se ve de solo lectura (médico administrador frente al SII o a un acceso protegido). */
.zm-int-campos:disabled input, .zm-int-campos:disabled select, .zm-eqa-modal input:disabled, .zm-eqa-modal select:disabled{ background:var(--solido-2); color:var(--texto-2); cursor:not-allowed; }
.zm-int-modal input, .zm-int-modal select{ margin:0; }
.zm-int-flow{ display:flex; flex-direction:column; gap:12px; }
.zm-int-flow__form{ display:flex; flex-direction:column; gap:10px; }
.zm-int-pagos{ margin:8px 0 0; padding:0; list-style:none; }
.zm-int-pago{ display:grid; grid-template-columns:130px 96px minmax(0,1fr) auto; align-items:center; gap:6px 14px; padding:10px 2px; border-top:1px solid var(--linea); font-size:13.5px; }
.zm-int-pago:first-child{ border-top:0; }
.zm-int-pago__monto{ font-weight:500; color:var(--texto); font-variant-numeric:tabular-nums; text-align:right; }
.zm-int-pago__quien{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.zm-int-pago__quien b{ font-weight:500; color:var(--texto); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-int-pago__quien small{ font-size:12px; color:var(--texto-3); }
.zm-int-pago__error{ display:inline-flex; align-items:center; gap:5px; color:var(--danger) !important; }
.zm-int-pago__acciones{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.zm-int-sii > .zm-int-bloque:first-of-type{ margin-top:10px; }

@media(max-width:640px){
  .zm-eqa-rolfila, .zm-eqa-lista .zm-fila__meta .zm-estado, .zm-int-lista .zm-fila__meta .zm-estado{ min-width:0; text-align:left; }
  .zm-eqa-roles{ grid-template-columns:minmax(0,1fr); }
  /* En el teléfono la última acción no se corta: es lo que dice si alguien dejó de entrar. */
  .zm-eqa-lista .zm-fila__sub{ white-space:normal; overflow:visible; text-overflow:clip; }
  .zm-eqa-guia{ padding:0 14px; }
  .zm-int-cabeza{ grid-template-columns:40px minmax(0,1fr); }
  .zm-int-cabeza > .btn{ grid-column:1 / -1; justify-self:start; }
  .zm-int-logo{ width:40px; height:40px; border-radius:12px; }
  .zm-int-info{ grid-template-columns:minmax(0,1fr); }
  .zm-int-info dd{ padding-top:0; border-top:0; }
  .zm-int-pago{ grid-template-columns:minmax(0,1fr) auto; }
  .zm-int-pago__quien{ grid-column:1 / -1; }
  .zm-int-pago__acciones{ grid-column:1 / -1; justify-content:flex-start; }
  .zm-int-respaldo .zm-tarjeta__cabeza{ align-items:flex-start; }
  /* El logo dice qué conexión es: en el teléfono se queda (la fila base lo esconde). */
  .zm-int-lista .zm-fila--icono{ grid-template-columns:32px minmax(0,1fr) 18px; }
  .zm-int-lista .zm-fila__ico{ display:grid; width:32px; height:32px; border-radius:10px; grid-column:1; grid-row:1 / span 2; }
  .zm-int-lista .zm-fila__meta{ grid-column:2; }
  .zm-int-lista .zm-fila__chevron{ grid-column:3; }
}
@media (prefers-reduced-motion: reduce){
  .zm-eqa-mensaje, .zm-eqa-guia__roles, .zm-int-resultado{ animation:zm-funde .18s ease both; }
  .zm-eqa-rol, .zm-eqa-ver, .zm-eqa-guia > summary::after{ transition:none; }
}
/* ── fin zm · equipo v621 ── */
/* ── zm · comisiones v621 ── */
/* Comisiones: resumen del período (cifras, una fila por profesional que se abre),
   las atenciones de cada uno como una liquidación que se lee de un vistazo, y el
   editor de porcentajes. Sólo tokens: la plata en texto sereno, el acento sólo en
   la cifra clave y en el botón que guarda. */
.zm-com{ min-width:0; }
.zm-com-periodo{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; margin:0 0 16px; }
.zm-com-periodo__rango{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; flex:0 1 auto; animation:zm-asoma .22s var(--sal) both; }
.zm-com-periodo__rango .zm-campo{ flex-direction:row; align-items:center; gap:8px; flex:0 0 auto; margin:0; }
html .zm-com-periodo__rango input{ width:auto; margin:0; min-height:36px; padding:6px 10px; font-variant-numeric:tabular-nums; }
.zm-com-periodo__texto{ margin:0; font-size:13px; color:var(--texto-3); font-variant-numeric:tabular-nums; }
.zm-com-cifras{ grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }

/* Aviso: hay ventas pero nadie comisiona (el estado de hoy de las clínicas). */
.zm-com-aviso{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; margin:0 0 16px; padding:14px 16px; border-radius:var(--r-chica); background:var(--solido-2); animation:zm-asoma .22s var(--sal) both; }
.zm-com-aviso p{ flex:1 1 320px; margin:0; font-size:13.5px; line-height:1.5; color:var(--texto-2); }
.zm-com-aviso b{ color:var(--texto); font-weight:500; }
.zm-com-aviso .zm-com-aviso__quien{ flex:0 1 auto; font-size:12.5px; color:var(--texto-3); }

/* Filas por profesional: ventas en gris, la comisión como monto. */
.zm-com-lista .zm-fila__meta{ gap:18px; }
.zm-com-lista .zm-fila__monto{ min-width:96px; text-align:right; }
.zm-com-lista .zm-fila__meta .zm-estado{ min-width:96px; justify-content:flex-end; }
.zm-com-ventas{ color:var(--texto-2); }
.zm-com-ventas small{ font-size:12px; color:var(--texto-3); }
.zm-com-nota{ margin:12px 2px 0; font-size:12.5px; line-height:1.5; color:var(--texto-3); }

/* Las atenciones de un profesional (la liquidación). */
.zm-com-detalle{ min-width:0; animation:zm-asoma .22s var(--sal) both; }
.zm-com-subcabeza{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; margin:0 0 16px; }
.zm-com-subcabeza > div:first-child{ min-width:0; flex:1 1 300px; }
.zm-com-subcabeza h2{ margin:0; font-size:24px; font-weight:500; letter-spacing:-.03em; line-height:1.15; color:var(--texto); overflow-wrap:anywhere; }
.zm-com-subcabeza p{ margin:6px 0 0; font-size:13.5px; line-height:1.45; color:var(--texto-2); }
.zm-com-subcabeza__acciones{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.zm-com-subcabeza__acciones .btn, .zm-com-detalle .zm-barra-filtros .btn{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.zm-com-visitas{ padding:6px; }
.zm-com-visita{ position:relative; display:grid; grid-template-columns:92px minmax(0,1fr) minmax(150px,auto) minmax(96px,auto); align-items:center; gap:4px 16px; min-height:60px; padding:12px 14px; border-radius:var(--r-chica); }
.zm-com-visita + .zm-com-visita::before{ content:''; position:absolute; left:14px; right:14px; top:0; height:1px; background:var(--linea); opacity:.7; }
.zm-com-visita__fecha{ font-size:13px; color:var(--texto-3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.zm-com-visita__principal{ min-width:0; }
.zm-com-visita__trat{ display:block; font-size:15px; font-weight:500; letter-spacing:-.01em; line-height:1.3; color:var(--texto); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-com-visita__sub{ display:block; margin-top:3px; font-size:13px; line-height:1.35; color:var(--texto-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-com-visita__venta{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; font-size:13.5px; color:var(--texto-2); font-variant-numeric:tabular-nums; text-align:right; }
.zm-com-visita__venta small{ font-size:12px; color:var(--texto-3); }
.zm-com-visita__monto{ font-size:15px; font-weight:500; letter-spacing:-.01em; color:var(--texto); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
@media (hover:hover) and (pointer:fine){ .zm-com-visita{ transition:background-color .18s ease; } .zm-com-visita:hover{ background:var(--solido-2); } }
@media(max-width:640px){
  .zm-com-visita{ grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; }
  .zm-com-visita__fecha{ grid-column:1 / -1; font-size:12px; }
  .zm-com-visita__principal{ grid-column:1; }
  .zm-com-visita__monto{ grid-column:2; grid-row:2; }
  .zm-com-visita__venta{ grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-items:baseline; gap:2px 8px; text-align:left; }
  .zm-com-lista .zm-fila__monto{ min-width:0; text-align:left; }
  .zm-com-lista .zm-fila__meta .zm-estado{ min-width:0; justify-content:flex-start; }
  /* Los seis períodos a la vista, en dos filas de tres: en el teléfono «Rango» no queda escondido. */
  .zm-com-periodo .zm-seg{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; border-radius:18px; }
  .zm-com-periodo .zm-seg__op{ justify-content:center; padding:6px 8px; }
  .zm-com-periodo__rango .zm-campo > span{ min-width:46px; }
  .zm-com-subcabeza__acciones{ width:100%; }
}

/* Solapa Porcentajes y su editor. */
.zm-com-pcts .zm-frase{ margin-bottom:14px; }
.modal.zm-com-modal{ max-width:720px; }
.zm-com-modal .zm-seccion{ padding-bottom:18px; }
.zm-com-modal .zm-seccion + .zm-seccion{ padding-top:18px; }
.zm-com-fila-pct{ display:flex; align-items:flex-end; flex-wrap:wrap; gap:10px 14px; }
.zm-com-pct{ display:inline-flex; align-items:center; gap:6px; }
.zm-com-pct input{ width:84px; margin:0; min-height:38px; padding:6px 10px; text-align:right; font-variant-numeric:tabular-nums; }
.zm-com-pct > span{ font-size:14px; color:var(--texto-2); }
.zm-com-ejemplo{ flex:1 1 220px; font-size:12.5px; line-height:1.45; color:var(--texto-3); font-variant-numeric:tabular-nums; }
.zm-com-reglas{ display:flex; flex-direction:column; margin:0 0 14px; border:1px solid var(--linea); border-radius:var(--r-chica); }
.zm-com-regla{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:8px 14px; padding:10px 12px; }
.zm-com-regla + .zm-com-regla{ border-top:1px solid var(--linea); }
.zm-com-regla__nombre{ min-width:0; font-size:14px; color:var(--texto); overflow-wrap:anywhere; }
.zm-com-regla__nombre small{ display:block; margin-top:2px; font-size:12px; color:var(--texto-3); font-variant-numeric:tabular-nums; }
.zm-com-regla__acciones{ display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.zm-com-quitar{ color:var(--danger); }
.zm-com-agregar{ display:flex; align-items:flex-end; flex-wrap:wrap; gap:10px 12px; }
.zm-com-agregar__trat{ flex:1 1 260px; }
.zm-com-agregar select{ margin:0; }
.zm-com-error{ margin:4px 0 0; font-size:13px; line-height:1.45; color:var(--danger); }
.zm-com-ok{ margin:4px 0 0; font-size:13px; line-height:1.45; color:var(--texto-2); animation:zm-asoma .18s var(--sal) both; }
@media(max-width:640px){
  .zm-com-regla{ grid-template-columns:minmax(0,1fr) auto; }
  .zm-com-regla__acciones{ grid-column:1 / -1; justify-content:flex-start; }
}
@media (prefers-reduced-motion: reduce){
  .zm-com-detalle, .zm-com-aviso, .zm-com-periodo__rango, .zm-com-ok{ animation:zm-funde .18s ease both; }
  .zm-com-visita{ transition:none; }
}
/* ── fin zm · comisiones v621 ── */

/* ── zm · pantallas v623 ── */
/* Semana en el teléfono: el «+N» de las citas que no caben en su bloque es una
   tarjeta más de la grilla (mismo radio que las citas), no una píldora. */
.zm-ag .zm-ag-semana--movil .zm-ag-sem-mas{ border-radius:9px; border:1px dashed var(--linea); font-size:15px; font-weight:600; }
/* ── fin zm · pantallas v623 ── */
/* ── zm · legal ── */
/* Zairi Legal: expedientes, contratos, políticas de la tienda y normativa.
   Solo tokens; el color vive en los puntos de estado, los sellos y los avisos.
   Los hechos distintos no dependen solo del color: «Aprobado» es un contorno de
   acento; «Enviado» y «Publicado en la tienda», un fondo suave con punto de
   éxito; «Entrega incierta», un borde discontinuo; «no ejecutada», un borde
   discontinuo tenue. Las ventanas se pintan fuera del módulo (portal): ninguna
   regla depende de .zm-legal como ancestro. Movimiento: el detalle y los
   formularios asoman (220 ms); todo reposa en prefers-reduced-motion. */
.zm-legal{ min-width:0; }
.zm-legal__cuerpo, .zm-legal-resumen, .zm-legal-expedientes, .zm-legal-caso, .zm-legal-parte, .zm-legal-consentimientos, .zm-legal-contratos,
.zm-legal-contrato, .zm-legal-politicas, .zm-legal-normativa, .zm-legal-fuente, .zm-legal-documento-norma, .zm-legal-configuracion, .zm-legal-config{
  display:flex; flex-direction:column; gap:14px; min-width:0; }
.zm-legal__cuerpo > *{ min-width:0; }
.zm-legal__cuerpo .zm-tarjeta + .zm-tarjeta, .zm-legal-modal .zm-tarjeta + .zm-tarjeta{ margin-top:0; }
.zm-legal__cuerpo .zm-volver{ margin-bottom:0; align-self:flex-start; }
.zm-legal__cuerpo .zm-cabeza{ margin-bottom:0; }
.zm-legal__cuerpo .zm-cabeza h1{ font-size:24px; letter-spacing:-.03em; }
.zm-legal__cuerpo .zm-cabeza p .zm-estado{ vertical-align:-1px; }
.zm-legal__cuerpo .zm-cifras, .zm-legal__cuerpo .zm-frase, .zm-legal__cuerpo .zm-barra-filtros{ margin-bottom:0; }

/* Franja de normativa y modo */
.zm-legal-franja{ position:relative; display:flex; flex-direction:column; gap:3px; margin:0 0 10px; padding:12px 16px 12px 30px; border:1px solid var(--linea); border-radius:var(--r-chica); background:var(--solido-2); }
.zm-legal-franja::before{ content:''; position:absolute; left:13px; top:18px; width:7px; height:7px; border-radius:50%; background:var(--danger); }
.zm-legal-franja strong{ font-size:13.5px; font-weight:500; line-height:1.4; color:var(--texto); }
.zm-legal-franja span{ font-size:12.5px; line-height:1.45; color:var(--texto-2); }
.zm-legal-modo{ display:flex; align-items:baseline; gap:4px 12px; flex-wrap:wrap; margin:0 0 14px; font-size:12.5px; line-height:1.45; color:var(--texto-3); }
.zm-legal-modo .zm-estado{ color:var(--texto); }

/* Textos comunes */
.zm-legal-nota{ margin:0; font-size:12.5px; line-height:1.5; color:var(--texto-3); }
.zm-legal-error{ margin:0; font-size:13.5px; line-height:1.45; color:var(--danger); }
.zm-legal-aviso{ margin:0; padding:10px 14px; border-radius:var(--r-chica); background:var(--solido-2); font-size:13.5px; line-height:1.45; color:var(--texto); }
.zm-legal-mensaje{ margin:8px 0 0; font-size:13px; line-height:1.45; color:var(--texto-2); }
.zm-legal-cargando{ padding:22px 16px; }
.zm-legal-oculto{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.zm-legal-etiqueta{ font-size:11.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-3); }
.zm-legal-subtitulo{ margin:16px 0 6px; font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-3); }
.zm-legal-parrafo{ margin:0 0 8px; max-width:78ch; font-size:14px; line-height:1.55; color:var(--texto-2); }
.zm-legal-anulado{ color:var(--texto-3); }
.zm-legal-enlace{ all:unset; box-sizing:border-box; display:inline; font-size:13.5px; color:var(--acento); cursor:pointer; border-radius:4px; transition:color .18s ease; }
.zm-legal-enlace:hover{ text-decoration:underline; }
.zm-legal-enlace:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
.zm-legal-huella{ padding:1px 6px; border-radius:6px; background:var(--solido-2); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; color:var(--texto-2); overflow-wrap:anywhere; }
.zm-legal-acciones{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; }
.zm-legal-acciones--fila{ margin-top:0; justify-content:flex-end; }
.zm-legal-acciones .btn{ white-space:nowrap; }
.zm-legal-puntos{ margin:0; padding:0 0 0 18px; display:flex; flex-direction:column; gap:6px; font-size:14px; line-height:1.5; color:var(--texto); }
.zm-legal-puntos--nota{ margin-top:10px; font-size:12.5px; color:var(--texto-3); }
.zm-legal-faltan{ margin:6px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px; font-size:13px; line-height:1.5; color:var(--texto-2); }
.zm-legal-checklist{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.zm-legal-checklist .zm-estado, .zm-legal-scopes .zm-estado, .zm-legal-tabla .zm-estado{ white-space:normal; }
.zm-legal-checklist .zm-estado{ font-size:13.5px; color:var(--texto); }

/* Sellos: hechos distintos con formas distintas */
.zm-legal-sello{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border:1px solid var(--linea); border-radius:999px; font-size:12px; font-weight:500; line-height:1.4; color:var(--texto); white-space:nowrap; }
.zm-legal-sello--aprobado{ border-color:var(--acento); color:var(--acento); }
.zm-legal-sello--enviado, .zm-legal-sello--publicado{ border-color:var(--acento-suave); background:var(--acento-suave); color:var(--texto); }
.zm-legal-sello--enviado::before, .zm-legal-sello--publicado::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--ok); flex:none; }
.zm-legal-sello--incierto{ border-style:dashed; border-color:var(--danger); color:var(--danger); }
.zm-legal-sello--no-ejecutada{ border-style:dashed; border-color:var(--texto-3); color:var(--texto-2); }

/* Resumen: alertas y señales */
.zm-legal-alertas{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; }
.zm-legal-alerta{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 18px; padding:14px 0; border-top:1px solid var(--linea); }
.zm-legal-alerta:first-child{ border-top:0; padding-top:4px; }
.zm-legal-alerta__texto{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; }
.zm-legal-alerta__texto strong{ font-size:14.5px; font-weight:500; color:var(--texto); }
.zm-legal-alerta__lado{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.zm-legal-alerta__lado .zm-legal-acciones{ margin-top:0; justify-content:flex-end; }
.zm-legal-senales{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 0; padding:0; list-style:none; }
.zm-legal-senal{ position:relative; display:inline-flex; align-items:center; gap:4px; padding:4px 10px 4px 22px; border:1px solid var(--linea); border-radius:999px; font-size:12.5px; color:var(--texto); }
.zm-legal-senal::before{ content:''; position:absolute; left:10px; top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:var(--texto-3); }
.zm-legal-senal[data-g="critical"]::before, .zm-legal-senal[data-g="high"]::before{ background:var(--danger); }
.zm-legal-senal[data-g="medium"]::before{ background:var(--acento); }
.zm-legal-senal span{ color:var(--texto-3); }
.zm-legal-alerta.is-no-incidencia .zm-legal-alerta__texto strong{ color:var(--texto-2); }
/* «Zairi lee la alerta»: la lectura de la conversación completa */
.zm-legal-lectura{ display:flex; flex-direction:column; gap:4px; width:100%; max-width:78ch; margin:6px 0 2px; padding:10px 12px; border:1px solid var(--linea); border-radius:var(--r-campo); background:var(--solido-2); }
.zm-legal-lectura.is-no{ background:none; border-style:dashed; }
.zm-legal-lectura .zm-legal-parrafo{ margin:0; font-size:13.5px; }
.zm-legal-lectura__cabeza{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:0 0 2px; font-size:13px; }
.zm-legal-lectura__titulo{ font-size:14px; font-weight:500; color:var(--texto); }
.zm-legal-lectura--leyendo{ margin:6px 0 0; padding:0; border:0; background:none; font-size:13px; color:var(--texto-2); }
.zm-legal-no-incidencias{ margin-top:12px; padding-top:10px; border-top:1px solid var(--linea); }
.zm-legal-no-incidencias > summary{ cursor:pointer; font-size:13.5px; color:var(--texto-2); padding:4px 0; }
.zm-legal-no-incidencias > summary:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; border-radius:6px; }
.zm-legal-no-incidencias > .zm-legal-nota{ margin:6px 0 4px; }
@media (max-width: 640px){ .zm-legal-lectura{ padding:9px 10px; } }
.zm-legal-urgente{ margin:6px 0 0; padding:9px 12px; border-left:3px solid var(--danger); border-radius:var(--r-campo); background:var(--solido-2); font-size:13px; line-height:1.45; color:var(--texto); }
.zm-lista.zm-legal-lista-plana{ padding:0; border:0; background:none; }

/* Expedientes: filtros y lista */
.zm-legal-filtros{ align-items:flex-end; }
.zm-legal-filtro{ display:flex; flex-direction:column; gap:4px; margin:0; font-size:12px; font-weight:400; color:var(--texto-3); }
.zm-legal-filtro select{ margin:0; min-height:38px; padding:6px 12px; border-radius:var(--r-campo); }
.zm-legal-filtros > .btn.gold{ margin-left:auto; }
.zm-legal-mas{ display:flex; justify-content:center; padding:10px 0 6px; }

/* Expediente: cabecera, limitaciones y pausa */
.zm-legal-ficha{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px 20px; margin:0; padding:16px 18px; border:1px solid var(--linea); border-radius:var(--r-tarjeta); background:var(--solido); }
.zm-legal-ficha > div{ min-width:0; }
.zm-legal-ficha dt{ margin:0 0 4px; font-size:12px; color:var(--texto-3); }
.zm-legal-ficha dd{ margin:0; font-size:14px; line-height:1.45; color:var(--texto); overflow-wrap:anywhere; }
.zm-legal-ficha select{ width:100%; margin:0; min-height:36px; padding:5px 10px; border-radius:var(--r-campo); }
.zm-legal-limites{ padding:12px 16px; border:1px dashed var(--linea); border-radius:var(--r-chica); }
.zm-legal-limites h3{ margin:0 0 6px; font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-3); }
.zm-legal-limites ul{ margin:0; padding:0 0 0 18px; display:flex; flex-direction:column; gap:4px; font-size:13px; line-height:1.5; color:var(--texto-2); }
.zm-legal-pausa{ display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; padding:12px 16px; border:1px solid var(--danger); border-radius:var(--r-chica); background:var(--solido); }
.zm-legal-pausa > div{ display:flex; flex-direction:column; gap:3px; flex:1 1 280px; min-width:0; }
.zm-legal-pausa strong{ font-size:14px; font-weight:500; color:var(--danger); }
.zm-legal-pausa span{ font-size:13px; line-height:1.45; color:var(--texto-2); }
.zm-legal-editar{ padding:14px 16px; border:1px solid var(--linea); border-radius:var(--r-chica); background:var(--solido); animation:zm-asoma .22s var(--sal) both; }
.zm-legal-editar input{ margin:0; }

/* Cronología */
.zm-legal-cronologia{ margin:0; padding:6px 18px; list-style:none; display:flex; flex-direction:column; border:1px solid var(--linea); border-radius:var(--r-tarjeta); background:var(--solido); }
.zm-legal-hecho{ display:grid; grid-template-columns:160px minmax(0,1fr); gap:14px; padding:14px 0; border-top:1px solid var(--linea); }
.zm-legal-hecho:first-child{ border-top:0; }
.zm-legal-hecho__fecha{ display:flex; flex-direction:column; gap:2px; font-size:13px; color:var(--texto); font-variant-numeric:tabular-nums; }
.zm-legal-hecho__fecha small{ font-size:11.5px; color:var(--texto-3); }
.zm-legal-hecho__cuerpo{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; }
.zm-legal-hecho__cabeza{ display:flex; align-items:baseline; gap:6px 10px; flex-wrap:wrap; }
.zm-legal-hecho__cabeza strong{ font-size:14.5px; font-weight:500; color:var(--texto); }
.zm-legal-hecho__texto{ margin:2px 0 0; max-width:78ch; font-size:14px; line-height:1.55; color:var(--texto-2); white-space:pre-wrap; overflow-wrap:anywhere; }
.zm-legal-hecho--anulado .zm-legal-hecho__cabeza strong{ color:var(--texto-3); text-decoration:line-through; text-decoration-color:var(--texto-3); }

/* Tablas */
.zm-legal-tabla-envoltura{ overflow-x:auto; margin:0 -4px; }
.zm-legal-tabla{ width:100%; border-collapse:collapse; font-size:13.5px; }
.zm-legal-tabla th{ padding:8px 10px; text-align:left; font-size:11.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-3); border-bottom:1px solid var(--linea); white-space:nowrap; }
.zm-legal-tabla td{ padding:10px; vertical-align:top; border-top:1px solid var(--linea); color:var(--texto); overflow-wrap:anywhere; }
.zm-legal-tabla tbody tr:first-child td, .zm-legal-tabla .fila-paginacion td{ border-top:0; }
.zm-legal-tabla td .zm-legal-nota{ display:block; margin-top:2px; }
.zm-legal-celda-titulo{ display:block; font-weight:500; }

/* Textos del expediente y documentos */
.zm-legal-texto{ padding:14px 16px; border-radius:var(--r-campo); background:var(--solido-2); font-size:14.5px; line-height:1.6; color:var(--texto); white-space:pre-wrap; overflow-wrap:anywhere; }
.zm-legal-pre{ margin:8px 0 0; max-height:420px; overflow:auto; padding:14px 16px; border:1px solid var(--linea); border-radius:var(--r-campo); background:var(--solido-2); font:inherit; font-size:13.5px; line-height:1.6; color:var(--texto); white-space:pre-wrap; overflow-wrap:anywhere; }
.zm-legal-documento{ max-height:560px; font-size:14px; }
.zm-legal-cita{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:12px 0; border-top:1px solid var(--linea); }
.zm-legal-cita:first-of-type{ border-top:0; padding-top:0; }
.zm-legal-cita__cabeza{ display:flex; align-items:baseline; gap:4px 10px; flex-wrap:wrap; }
.zm-legal-cita__cabeza strong{ font-size:14.5px; font-weight:500; color:var(--texto); }
.zm-legal-cita__cabeza span{ font-size:13px; color:var(--texto-2); }
.zm-legal-cita__extracto{ margin:6px 0; padding:4px 0 4px 12px; border-left:2px solid var(--linea); font-size:13.5px; line-height:1.5; color:var(--texto-2); }
.zm-legal-detalle{ width:100%; }
.zm-legal-detalle > summary{ cursor:pointer; font-size:13px; color:var(--acento); border-radius:4px; }
.zm-legal-detalle > summary:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
.zm-legal-fuentes{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; }
.zm-legal-fuentes li{ display:flex; align-items:center; gap:6px 14px; flex-wrap:wrap; padding:8px 0; border-top:1px solid var(--linea); font-size:13.5px; color:var(--texto); }
.zm-legal-fuentes li:first-child{ border-top:0; }
.zm-legal-fuentes li > span:first-child{ flex:1 1 220px; min-width:0; }
.zm-legal-hechos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 20px; }

/* Borradores, aprobaciones y entregas */
.zm-legal-borradores{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start; }
.zm-legal-borradores .zm-tarjeta + .zm-tarjeta{ margin-top:0; }
.zm-legal-borrador{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.zm-legal-borrador .zm-tarjeta__cabeza{ margin:0; }
.zm-legal-borrador textarea{ margin:0; min-height:180px; }
.zm-legal-advertencias{ position:relative; padding:10px 14px 10px 28px; border-radius:var(--r-chica); background:var(--solido-2); font-size:13px; color:var(--texto); }
.zm-legal-advertencias::before{ content:''; position:absolute; left:12px; top:16px; width:7px; height:7px; border-radius:50%; background:var(--danger); }
.zm-legal-advertencias + .zm-legal-advertencias{ margin-top:8px; }
.zm-legal-advertencias strong{ display:block; margin:0 0 4px; font-weight:500; }
.zm-legal-advertencias ul{ margin:0; padding:0 0 0 16px; display:flex; flex-direction:column; gap:3px; line-height:1.45; color:var(--texto-2); }
.zm-legal-aprobar, .zm-legal-form, .zm-legal-resolver, .zm-legal-verificar{ display:flex; flex-direction:column; gap:10px; margin-top:12px; padding:14px; border:1px solid var(--linea); border-radius:var(--r-chica); background:var(--solido); animation:zm-asoma .22s var(--sal) both; }
.zm-legal-aprobar textarea, .zm-legal-form textarea, .zm-legal-form input, .zm-legal-form select, .zm-legal-resolver textarea, .zm-legal-verificar input, .zm-legal-verificar textarea{ margin:0; }
.zm-legal-aprobar .zm-legal-acciones, .zm-legal-form .zm-legal-acciones, .zm-legal-resolver .zm-legal-acciones, .zm-legal-verificar .zm-legal-acciones{ margin-top:0; }
.zm-legal-check{ display:flex; align-items:flex-start; gap:10px; margin:0; font-size:13.5px; font-weight:400; line-height:1.45; color:var(--texto); cursor:pointer; }
.zm-legal-check input{ width:auto; margin:3px 0 0; flex:none; accent-color:var(--acento); }
.zm-legal-check span{ display:flex; flex-direction:column; gap:2px; }
.zm-legal-check small{ font-size:12.5px; color:var(--texto-2); }
.zm-legal-aprobaciones, .zm-legal-entregas, .zm-legal-propuestas, .zm-legal-tareas, .zm-legal-versiones, .zm-legal-auditoria, .zm-legal-politicas__lista,
.zm-legal-preparacion, .zm-legal-funciones, .zm-legal-modos, .zm-legal-scopes{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; }
.zm-legal-aprobacion, .zm-legal-entrega, .zm-legal-propuesta{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:12px 0; border-top:1px solid var(--linea); }
.zm-legal-entrega:first-child, .zm-legal-propuesta:first-child{ border-top:0; padding-top:0; }
.zm-legal-aprobacion__cabeza, .zm-legal-entrega__cabeza{ display:flex; align-items:center; gap:6px 10px; flex-wrap:wrap; }
.zm-legal-aprobacion__motivo{ margin:2px 0 0; font-size:13.5px; line-height:1.45; color:var(--texto); }
.zm-legal-no-envio{ padding:8px 12px; border-radius:var(--r-campo); background:var(--solido-2); color:var(--texto-2); }
.zm-legal-propuesta .zm-pares{ align-self:stretch; }

/* Tareas */
.zm-legal-tarea{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:8px 14px; padding:12px 0; border-top:1px solid var(--linea); }
.zm-legal-tarea:first-child{ border-top:0; padding-top:0; }
.zm-legal-tarea__texto{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.zm-legal-tarea__texto strong{ font-size:14.5px; font-weight:500; color:var(--texto); }
.zm-legal-resolver{ grid-column:1 / -1; margin-top:4px; }
.zm-legal-hecho-verificado{ margin:0; padding:12px; border:1px solid var(--linea); border-radius:var(--r-chica); min-width:0; }
.zm-legal-hecho-verificado legend{ padding:0 4px; font-size:12.5px; color:var(--texto-2); }
.zm-legal-hecho-verificado .zm-campo input, .zm-legal-hecho-verificado .zm-campo select{ margin:0; }

/* Historial y versiones */
.zm-legal-versiones li, .zm-legal-auditoria li{ display:flex; align-items:center; justify-content:space-between; gap:10px 14px; padding:10px 0; border-top:1px solid var(--linea); }
.zm-legal-versiones li:first-child, .zm-legal-auditoria li:first-child{ border-top:0; padding-top:0; }
.zm-legal-versiones li > div, .zm-legal-auditoria li > div{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.zm-legal-versiones strong, .zm-legal-auditoria strong{ font-size:14px; font-weight:500; color:var(--texto); }
.zm-legal-version{ display:flex; flex-direction:column; gap:10px; }

/* Ventanas (se pintan en el body) */
.zm-legal-modal__texto{ margin:0 0 12px; font-size:14px; line-height:1.5; color:var(--texto-2); }
.zm-legal-modal .zm-campo{ margin:0 0 12px; }
.zm-legal-modal .zm-campo input, .zm-legal-modal .zm-campo textarea, .zm-legal-modal .zm-campo select{ margin:0; }
.zm-legal-modal .zm-seg{ margin:0 0 12px; }
.zm-legal-nuevo{ display:flex; flex-direction:column; gap:14px; }
.zm-legal-nuevo__fila{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border:1px solid var(--linea); border-radius:var(--r-chica); }
.zm-legal-nuevo__fila > div{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.zm-legal-nuevo__fila strong{ font-size:15px; font-weight:500; color:var(--texto); }
.zm-legal-existentes{ display:flex; flex-direction:column; gap:6px; }
.zm-legal-existentes ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px; }
.zm-legal-existentes li{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:13.5px; color:var(--texto); }
.zm-legal-opciones{ margin:0 0 12px; padding:0; border:0; display:flex; flex-direction:column; gap:6px; min-width:0; }
.zm-legal-opciones legend{ margin:0 0 6px; padding:0; font-size:12.5px; color:var(--texto-2); }
.zm-legal-opcion{ display:flex; align-items:flex-start; gap:10px; margin:0; padding:10px 12px; border:1px solid var(--linea); border-radius:var(--r-chica); font-weight:400; cursor:pointer; transition:border-color .18s ease, background-color .18s ease; }
.zm-legal-opcion:has(input:checked){ border-color:var(--acento); background:var(--acento-suave); }
.zm-legal-opcion input{ width:auto; margin:3px 0 0; flex:none; accent-color:var(--acento); }
.zm-legal-opcion span{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.zm-legal-opcion b{ font-size:14px; font-weight:500; color:var(--texto); }
.zm-legal-opcion small{ font-size:12.5px; line-height:1.4; color:var(--texto-2); }
.zm-legal-identidad{ display:flex; flex-direction:column; gap:8px; padding:14px; border:1px solid var(--danger); border-radius:var(--r-chica); }
.zm-legal-identidad strong{ font-size:14px; font-weight:500; color:var(--texto); }
.zm-legal-identidad p{ margin:0; font-size:13px; line-height:1.5; color:var(--texto-2); }
.zm-legal-identidad .zm-legal-acciones{ margin-top:0; }

/* Contratos */
.zm-legal-perfil{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; padding:12px 16px 12px 30px; border-radius:var(--r-chica); background:var(--solido-2); }
.zm-legal-perfil::before{ content:''; position:absolute; left:13px; top:18px; width:7px; height:7px; border-radius:50%; background:var(--danger); }
.zm-legal-perfil > div{ display:flex; flex-direction:column; gap:3px; flex:1 1 280px; min-width:0; }
.zm-legal-perfil strong{ font-size:13.5px; font-weight:500; color:var(--texto); }
.zm-legal-perfil span{ font-size:12.5px; line-height:1.45; color:var(--texto-2); }
.zm-legal-contrato__cuerpo{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:14px; align-items:start; }
.zm-legal-contrato__cuerpo .zm-tarjeta + .zm-tarjeta{ margin-top:0; }
.zm-legal-contrato-nuevo .zm-seg{ margin:0 0 10px; }
.zm-legal-contraparte{ margin-top:12px; }
.zm-legal-contrato-nuevo .zm-campo input, .zm-legal-contrato-nuevo .zm-campo textarea, .zm-legal-contrato-nuevo .zm-campo select,
.zm-legal-modal .zm-campos .zm-campo input, .zm-legal-modal .zm-campos .zm-campo textarea{ margin:0; }
.zm-legal-dato{ font-size:14px; font-weight:500; color:var(--texto); overflow-wrap:anywhere; }
.zm-legal-no-verificado{ font-style:italic; color:var(--texto-3); }
.zm-legal-ancho{ grid-column:1 / -1; }

/* Políticas de la tienda */
.zm-legal-politica{ display:flex; flex-direction:column; gap:8px; padding:14px 0; border-top:1px solid var(--linea); }
.zm-legal-politica:first-child{ border-top:0; padding-top:4px; }
.zm-legal-politica__cabeza{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px 14px; flex-wrap:wrap; }
.zm-legal-politica__cabeza > div{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.zm-legal-politica__cabeza strong{ font-size:14.5px; font-weight:500; color:var(--texto); }
.zm-legal-politica .zm-legal-acciones{ margin-top:0; }
.zm-legal-hallazgos{ display:flex; flex-direction:column; gap:6px; }
.zm-legal-hallazgo{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:10px 12px; border-radius:var(--r-chica); background:var(--solido-2); }
.zm-legal-hallazgo__cabeza{ display:flex; align-items:center; gap:6px 10px; flex-wrap:wrap; }
.zm-legal-hallazgo__cabeza strong{ font-size:13.5px; font-weight:500; color:var(--texto); }
.zm-legal-hallazgo .zm-legal-parrafo{ margin:0; font-size:13px; }
.zm-legal-scopes{ flex-direction:row; flex-wrap:wrap; gap:6px 16px; margin-top:10px; }
.zm-legal-cambio{ display:flex; flex-direction:column; gap:12px; }
.zm-legal-comparar{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.zm-legal-comparar .zm-legal-subtitulo{ margin-top:0; }

/* Normativa */
.zm-legal-articulos{ display:flex; flex-direction:column; }
.zm-legal-articulos__item + .zm-legal-articulos__item{ border-top:1px solid var(--linea); }
.zm-legal-articulo{ all:unset; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:10px 6px; border-radius:10px; font-size:14px; color:var(--texto); cursor:pointer; transition:background-color .18s ease; }
.zm-legal-articulo:hover{ background:var(--solido-2); }
.zm-legal-articulo:focus-visible{ outline:2px solid var(--acento); outline-offset:-2px; }
.zm-legal-articulo[aria-expanded="true"]{ font-weight:500; }

/* Configuración */
.zm-legal-prep{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:10px 0; border-top:1px solid var(--linea); }
.zm-legal-prep:first-child{ border-top:0; padding-top:0; }
.zm-legal-prep .zm-estado{ font-size:13.5px; color:var(--texto); white-space:normal; }
.zm-legal-prep .btn{ margin-top:4px; }
.zm-legal-preparacion{ margin-top:10px; }
.zm-legal-config{ margin:0; padding:0; border:0; }
.zm-legal-modos{ gap:4px; margin-top:12px; }
.zm-legal-modos li{ padding:8px 12px; border-radius:var(--r-campo); font-size:13px; line-height:1.5; color:var(--texto-2); }
.zm-legal-modos li[aria-current="true"]{ background:var(--solido-2); color:var(--texto); }
.zm-legal-modos b{ font-weight:500; color:var(--texto); }
.zm-legal-funciones{ gap:10px; }
.zm-legal-permiso{ display:flex; flex-direction:column; gap:6px; padding:12px 0; border-top:1px solid var(--linea); }
.zm-legal-permiso:first-of-type{ border-top:0; padding-top:0; }
.zm-legal-notas{ margin-top:12px; }
.zm-legal-notas textarea, .zm-legal-config .zm-campo input, .zm-legal-config .zm-campo select{ margin:0; }

/* Movimiento: el detalle asoma; en reposo, solo funde */
.zm-legal-caso, .zm-legal-contrato, .zm-legal-contrato-nuevo, .zm-legal-fuente, .zm-legal-documento-norma{ animation:zm-asoma .22s var(--sal) both; }

@media (max-width:900px){
  .zm-legal-borradores, .zm-legal-contrato__cuerpo{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:720px){
  .zm-legal-alerta, .zm-legal-hechos, .zm-legal-comparar{ grid-template-columns:minmax(0,1fr); }
  .zm-legal-alerta__lado{ align-items:flex-start; }
  .zm-legal-alerta__lado .zm-legal-acciones{ justify-content:flex-start; }
  .zm-legal-hecho{ grid-template-columns:minmax(0,1fr); gap:6px; }
  .zm-legal-tarea{ grid-template-columns:minmax(0,1fr) auto; }
  .zm-legal-tarea > .btn{ grid-column:1 / -1; justify-self:start; }
  .zm-legal-filtros > .btn.gold{ margin-left:0; }
  .zm-legal-ficha{ padding:14px; }
  .zm-legal-cronologia{ padding:4px 14px; }
  .zm-legal-versiones li, .zm-legal-auditoria li{ flex-wrap:wrap; }
  .zm-legal-acciones--fila{ justify-content:flex-start; }
}
@media (prefers-reduced-motion: reduce){
  .zm-legal-caso, .zm-legal-contrato, .zm-legal-contrato-nuevo, .zm-legal-fuente, .zm-legal-documento-norma,
  .zm-legal-editar, .zm-legal-aprobar, .zm-legal-form, .zm-legal-resolver, .zm-legal-verificar{ animation:zm-funde .18s ease both; }
  .zm-legal-opcion, .zm-legal-articulo, .zm-legal-enlace{ transition:none; }
}
/* Clave de cifrado y su rotación (parte R): huellas en fila, sin animación */
.zm-legal-clave .zm-legal-advertencias{ margin-top:10px; }
.zm-legal-claves{ margin:2px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; }
.zm-legal-claves li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; font-size:12.5px; line-height:1.5; color:var(--texto-2); }
.zm-legal-clave__pasos{ margin-top:10px; }
.zm-legal-clave__pasos code{ padding:0 4px; border-radius:4px; background:var(--solido-2); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; color:var(--texto-2); overflow-wrap:anywhere; }
/* Retención de evidencia y adjuntos (parte P): la retención activa se marca con un
   filete de acento, sin color de fondo; el adjunto de un hecho va como nota. */
.zm-legal-retencion{ border-left:3px solid var(--acento); }
.zm-legal-retencion .zm-legal-aviso{ margin-bottom:8px; }
.zm-legal-retencion .zm-legal-form{ margin-top:10px; }
.zm-legal-adjunto{ font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
/* Abogado externo (parte X): la entrega única del enlace y el código lleva el
   contorno de acento; el código va en monoespaciada grande para dictarlo sin
   errores. Accesos y notas en filas como las tareas. */
.zm-legal-externo-entrega{ border-color:var(--acento); animation:zm-asoma .22s var(--sal) both; }
.zm-legal-externo-dato{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px 10px; margin:0 0 12px; }
.zm-legal-externo-dato .zm-legal-etiqueta{ grid-column:1 / -1; }
.zm-legal-externo-dato input{ margin:0; min-width:0; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; }
.zm-legal-externo-codigo{ justify-self:start; padding:8px 14px; border-radius:var(--r-campo); background:var(--solido-2); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:20px; font-weight:600; letter-spacing:.12em; color:var(--texto); }
.zm-legal-externo-alcance .zm-legal-nota{ margin:0 0 8px; }
.zm-legal-externo-alcance .zm-legal-check b{ font-size:14px; font-weight:500; color:var(--texto); }
.zm-legal-externos, .zm-legal-externo-notas{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; }
.zm-legal-externo{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:8px 14px; padding:12px 0; border-top:1px solid var(--linea); }
.zm-legal-externo:first-child{ border-top:0; padding-top:0; }
.zm-legal-externo__texto{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.zm-legal-externo__texto strong{ font-size:14.5px; font-weight:500; color:var(--texto); overflow-wrap:anywhere; }
.zm-legal-externo-notas li{ display:flex; flex-direction:column; gap:4px; padding:12px 0; border-top:1px solid var(--linea); }
.zm-legal-externo-notas li:first-child{ border-top:0; padding-top:0; }
.zm-legal-externo-nota__cabeza{ display:flex; align-items:baseline; gap:4px 10px; flex-wrap:wrap; }
.zm-legal-externo-nota__cabeza strong{ font-size:14px; font-weight:500; color:var(--texto); overflow-wrap:anywhere; }
@media (max-width:720px){
  .zm-legal-externo{ grid-template-columns:minmax(0,1fr) auto; }
  .zm-legal-externo > .btn{ grid-column:1 / -1; justify-self:start; }
  .zm-legal-externo-dato{ grid-template-columns:minmax(0,1fr); }
  .zm-legal-externo-dato .btn{ justify-self:start; }
}
@media (prefers-reduced-motion: reduce){
  .zm-legal-externo-entrega{ animation:zm-funde .18s ease both; }
}
/* Normativa desde la BCN (parte Q): copias por fuente, versiones de la BCN y
   advertencias para quien revisa. Listas compactas en la celda; la tarjeta de
   advertencias lleva filete de acento y su título lo dice (no solo el color).
   Sin animación propia. */
.zm-legal-bcn{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.zm-legal-bcn-lista{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; }
.zm-legal-bcn-lista li{ display:flex; flex-direction:column; gap:1px; font-size:13px; line-height:1.4; color:var(--texto); }
.zm-legal-tabla td .zm-legal-bcn-lista .zm-legal-nota{ margin-top:0; }
.zm-legal-bcn-copias{ margin:0 0 12px; }
.zm-legal-bcn-copias .zm-legal-check input[disabled] + span{ color:var(--texto-3); }
.zm-legal-bcn-advertencias{ border-left:3px solid var(--acento); }
.zm-legal-bcn-advertencias__lista{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; }
.zm-legal-bcn-advertencias__lista li{ display:flex; flex-direction:column; gap:4px; padding:10px 0; border-top:1px solid var(--linea); font-size:13.5px; line-height:1.5; color:var(--texto); }
.zm-legal-bcn-advertencias__lista li:first-child{ border-top:0; padding-top:0; }
.zm-legal-bcn-advertencias__lista .zm-legal-nota{ overflow-wrap:anywhere; }
/* Análisis automático y plazos con regla (parte T): la franja del reanálisis
   automático va con filete lateral (lo hizo el principal técnico, no una persona);
   el resultado de un cálculo con regla, con contorno de acento; los feriados en
   filas por año. Sin animación propia. */
.zm-legal-auto{ display:flex; flex-direction:column; gap:6px; padding:10px 14px; border:1px solid var(--linea); border-left:3px solid var(--acento); border-radius:var(--r-chica); background:var(--solido); }
.zm-legal-auto__linea{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.zm-legal-auto__linea > span:last-child{ font-size:13px; line-height:1.45; color:var(--texto-2); }
.zm-legal-auto .zm-legal-enlace{ align-self:flex-start; }
.zm-legal-ejecuciones{ margin:10px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; }
.zm-legal-ejecuciones li{ display:flex; flex-direction:column; gap:3px; padding:10px 0; border-top:1px solid var(--linea); }
.zm-legal-ejecuciones li:first-child{ border-top:0; padding-top:0; }
.zm-legal-regla{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.zm-legal-regla .zm-seg{ align-self:flex-start; }
.zm-legal-regla__resultado{ display:flex; flex-direction:column; gap:3px; padding:10px 14px; border:1px solid var(--acento); border-radius:var(--r-chica); background:var(--solido); }
.zm-legal-regla__resultado strong{ font-size:14px; font-weight:500; color:var(--texto); font-variant-numeric:tabular-nums; }
.zm-legal-regla__resultado span{ font-size:12.5px; line-height:1.5; color:var(--texto-2); }
.zm-legal-feriados__anio{ display:flex; flex-direction:column; gap:6px; margin:0 0 12px; }
.zm-legal-feriados__lista{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; }
.zm-legal-feriados__lista li{ display:grid; grid-template-columns:120px minmax(0,1fr) auto; align-items:center; gap:6px 14px; padding:8px 0; border-top:1px solid var(--linea); }
.zm-legal-feriados__lista li:first-child{ border-top:0; }
.zm-legal-feriados__fecha{ font-size:13px; color:var(--texto); font-variant-numeric:tabular-nums; }
.zm-legal-feriados__texto{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.zm-legal-feriados__texto b{ font-size:13.5px; font-weight:500; color:var(--texto); overflow-wrap:anywhere; }
.zm-legal-feriados__texto small{ font-size:12px; line-height:1.45; color:var(--texto-3); overflow-wrap:anywhere; }
.zm-legal-principal{ margin-top:8px; }
@media (max-width:720px){
  .zm-legal-feriados__lista li{ grid-template-columns:minmax(0,1fr) auto; }
  .zm-legal-feriados__texto{ grid-column:1 / -1; grid-row:2; }
}
/* Zairi toma el caso (parte Z): la propuesta de Zairi lleva filete de acento (la hizo
   Zairi, no una persona) y dice que no concluye en derecho; las contradicciones, filete
   de peligro sobre fondo suave; el respaldo de cada hecho, fichas pequeñas con la cuenta
   de registros; cada riesgo, su punto de estado; el plan, numerado. El correo ocupa el
   ancho de los borradores, con el asunto aparte. «Lo abrió Zairi» y «Zairi tomó el caso»
   son un sello con fondo de acento y punto de acento (el texto lo dice, no solo el color).
   Solo tokens, sin animación propia. */
.zm-legal-zairi{ border-left:3px solid var(--acento); }
.zm-legal-zairi > .zm-legal-aviso{ margin-bottom:4px; }
.zm-legal-zairi > .zm-legal-urgente{ margin:0 0 12px; }
.zm-legal-zairi > .zm-legal-advertencias, .zm-legal-zairi__borradores{ margin-top:12px; }
.zm-legal-zairi__pie{ margin-top:12px; padding-top:10px; border-top:1px solid var(--linea); overflow-wrap:anywhere; }
.zm-legal-contradicciones{ margin-top:14px; padding:2px 14px 12px; border-left:3px solid var(--danger); border-radius:var(--r-campo); background:var(--solido-2); }
.zm-legal-contradicciones .zm-legal-subtitulo{ margin-top:10px; }
.zm-legal-contradicciones .zm-legal-nota{ margin:0 0 8px; }
.zm-legal-respaldo{ display:inline-flex; flex-wrap:wrap; gap:4px; vertical-align:1px; }
.zm-legal-respaldo__ficha{ padding:0 8px; border:1px solid var(--linea); border-radius:999px; font-size:11.5px; line-height:1.6; color:var(--texto-3); white-space:nowrap; cursor:help; }
.zm-legal-riesgos{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.zm-legal-riesgos li{ display:grid; grid-template-columns:118px minmax(0,1fr); align-items:baseline; gap:4px 12px; font-size:14px; line-height:1.5; color:var(--texto); }
.zm-legal-plan{ margin:0; padding:0 0 0 22px; display:flex; flex-direction:column; gap:6px; font-size:14px; line-height:1.5; color:var(--texto); }
.zm-legal-plan li{ padding-left:2px; }
.zm-legal-plan li::marker{ color:var(--acento); font-weight:600; }
.zm-legal-sello--zairi{ border-color:var(--acento-suave); background:var(--acento-suave); color:var(--texto); white-space:normal; }
.zm-legal-sello--zairi::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--acento); flex:none; }
.zm-legal-tomo{ margin:6px 0 0; font-size:13px; line-height:1.6; color:var(--texto-2); }
.zm-legal-canal{ font-size:12.5px; font-weight:500; color:var(--texto); }
.zm-legal-borrador--correo{ grid-column:1 / -1; }
.zm-legal-borrador input{ margin:0; }
.zm-legal-correo{ display:flex; flex-direction:column; gap:8px; }
.zm-legal-correo__asunto{ display:flex; flex-direction:column; gap:2px; padding:10px 16px; border:1px solid var(--linea); border-radius:var(--r-campo); }
.zm-legal-correo__asunto strong{ font-size:14.5px; font-weight:500; color:var(--texto); overflow-wrap:anywhere; }
@media (max-width:720px){
  .zm-legal-riesgos li{ grid-template-columns:minmax(0,1fr); gap:2px; }
}
/* Consultar a Zairi: el formulario con su frase fija; la respuesta con el filete de acento
   de lo que hizo Zairi, lo que leyó (sin datos personales) en un bloque tenue y sus partes
   en tarjetas (qué hacer ahora y el borrador a todo el ancho); el historial desplegable.
   La revisión de los mensajes anteriores va bajo «Detección en mensajes», en
   Configuración, con borde discontinuo. Solo tokens, sin animación propia. */
.zm-legal-consultas{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.zm-legal-consultas .zm-tarjeta + .zm-tarjeta{ margin-top:0; }
.zm-legal-consulta-form{ display:flex; flex-direction:column; gap:12px; }
.zm-legal-consulta__campo textarea{ min-height:148px; resize:vertical; line-height:1.5; }
.zm-legal-consulta__acciones{ margin-top:0; justify-content:flex-end; }
.zm-legal-consulta__acciones .zm-legal-nota{ margin-right:auto; }
.zm-legal-consulta__frase{ padding-top:10px; border-top:1px solid var(--linea); }
.zm-legal-consulta__leida{ display:flex; flex-direction:column; gap:4px; margin:0 0 12px; padding:10px 14px; border-left:3px solid var(--linea); border-radius:var(--r-campo); background:var(--solido-2); font-size:13.5px; line-height:1.5; color:var(--texto-2); white-space:pre-wrap; overflow-wrap:anywhere; }
.zm-legal-consulta__contexto{ margin:0 0 10px; }
.zm-legal-consulta__tarjetas{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:12px 0 0; }
.zm-legal-consulta__tarjeta{ min-width:0; padding:14px 16px; border:1px solid var(--linea); border-radius:var(--r-chica); background:var(--solido); }
.zm-legal-consulta__tarjeta--ancha{ grid-column:1 / -1; }
.zm-legal-consulta__tarjeta > .zm-legal-subtitulo{ margin-top:0; }
.zm-legal-consulta__roles{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.zm-legal-consulta__roles li{ display:flex; flex-direction:column; gap:2px; font-size:14px; line-height:1.5; color:var(--texto); }
.zm-legal-consulta__roles b{ font-weight:500; }
.zm-legal-consulta__roles span{ font-size:13px; color:var(--texto-2); }
.zm-legal-consulta__borrador .zm-legal-correo__asunto{ margin-bottom:8px; }
.zm-legal-consulta > .zm-legal-advertencias{ margin-top:12px; }
.zm-legal-consulta__historial{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; }
.zm-legal-consulta__item{ border-top:1px solid var(--linea); }
.zm-legal-consulta__item:first-child{ border-top:0; }
.zm-legal-consulta__item > details > summary{ display:flex; align-items:flex-start; gap:8px 14px; padding:12px 2px; cursor:pointer; list-style:none; border-radius:var(--r-campo); }
.zm-legal-consulta__item > details > summary::-webkit-details-marker{ display:none; }
.zm-legal-consulta__item > details > summary::after{ content:''; flex:none; width:7px; height:7px; margin:6px 4px 0 0; border-right:1.5px solid var(--texto-3); border-bottom:1.5px solid var(--texto-3); transform:rotate(45deg); }
.zm-legal-consulta__item > details[open] > summary::after{ margin-top:9px; transform:rotate(-135deg); }
.zm-legal-consulta__item > details > summary:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
.zm-legal-consulta__item-texto{ display:flex; flex-direction:column; gap:3px; flex:1 1 auto; min-width:0; }
.zm-legal-consulta__item-texto b{ font-size:14px; font-weight:500; line-height:1.45; color:var(--texto); overflow-wrap:anywhere; }
.zm-legal-consulta__item-texto small{ font-size:12.5px; color:var(--texto-3); }
.zm-legal-consulta__item-cuerpo{ padding:0 0 14px; }
.zm-legal-consulta__item-cuerpo .zm-tarjeta{ padding:16px 18px; }
.zm-legal-historia{ display:flex; flex-direction:column; gap:8px; margin:8px 0 2px 28px; padding:10px 14px; border:1px dashed var(--linea); border-radius:var(--r-chica); }
.zm-legal-historia__fila{ display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.zm-legal-historia .zm-legal-mensaje, .zm-legal-historia .zm-legal-error{ margin:0; }
@media (max-width:720px){
  .zm-legal-consulta__tarjetas{ grid-template-columns:minmax(0,1fr); }
  .zm-legal-consulta__item > details > summary{ flex-wrap:wrap; }
  .zm-legal-historia{ margin-left:0; }
}
/* ── fin zm · legal ── */

/* ── zm · zairi ads v625 ── */
/* Resumen, Crear anuncio (chat + ficha), Administrador, Atribución,
   Posicionamiento y Alertas. Sólo tokens vivos; el acento marca la acción
   principal, la cifra clave o lo nuestro frente a la competencia. */
.zm-ads-panel{ display:block; }
.zm-ads-pila{ display:flex; flex-direction:column; gap:14px; }
.zm-ads-pila > .zm-tarjeta + .zm-tarjeta{ margin-top:0; }
.zm-ads .zm-inf-fechas input{ min-height:38px; margin:0; padding:6px 12px; border-radius:var(--r-campo); border:1px solid var(--linea); background:var(--solido); color:var(--texto); font:inherit; font-size:14px; }
.zm-ads-nota{ margin:8px 0 0; font-size:13px; line-height:1.5; color:var(--texto-2); }
.zm-ads-tenue{ color:var(--texto-3); font-size:12.5px; }
.zm-ads-fuerte{ font-weight:500; color:var(--texto); }
.zm-ads-nowrap{ white-space:nowrap; }
.zm-ads-num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.zm-ads-etiqueta{ display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:999px; background:var(--solido-2); color:var(--texto-2); font-size:11.5px; font-weight:500; white-space:nowrap; }
.zm-ads-cargando{ display:flex; align-items:center; gap:10px; padding:28px 18px; color:var(--texto-2); font-size:13.5px; }
.zm-ads-cargando__punto{ width:8px; height:8px; border-radius:50%; background:var(--acento); animation:zm-ads-late 1.1s ease-in-out infinite; }
@keyframes zm-ads-late{ 0%,100%{ opacity:.25; transform:scale(.8); } 50%{ opacity:1; transform:scale(1); } }
.zm-ads-error{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.zm-ads-avisos{ display:flex; flex-direction:column; gap:6px; padding:12px 14px; border-radius:var(--r-chica); background:var(--solido-2); }
.zm-ads-avisos .zm-estado{ white-space:normal; }
.zm-ads-pasos{ margin:0; padding-left:20px; font-size:14px; line-height:1.7; color:var(--texto); }
.zm-ads-pasos code, .zm-ads-conexion code{ padding:1px 6px; border-radius:6px; background:var(--solido-2); font-size:12.5px; overflow-wrap:anywhere; }
.zm-ads-lista{ margin:6px 0 0; padding-left:18px; font-size:13.5px; line-height:1.6; color:var(--texto); }
.zm-ads-lista li + li{ margin-top:3px; }
.zm-ads-lista .zm-estado{ white-space:normal; }
.zm-ads-fila-botones{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; }
.zm-ads-check{ display:flex; align-items:center; gap:8px; margin:10px 0 0; font-size:13.5px; color:var(--texto); cursor:pointer; }
.zm-ads-check input{ width:auto; margin:0; accent-color:var(--acento); }
.zm-ads-tabla{ overflow-x:auto; margin-top:10px; -webkit-overflow-scrolling:touch; }
.zm-ads-tabla table{ width:100%; border-collapse:collapse; font-size:13px; }
.zm-ads-tabla th{ padding:8px 10px; text-align:left; font-size:11.5px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--texto-3); border-bottom:1px solid var(--linea); white-space:nowrap; }
.zm-ads-tabla th.zm-ads-num{ text-align:right; }
.zm-ads-tabla td{ padding:9px 10px; border-bottom:1px solid var(--linea); vertical-align:top; color:var(--texto); }
.zm-ads-tabla tr:last-child td{ border-bottom:0; }
.zm-ads-nuestro td{ background:var(--acento-suave); }
.zm-ads-nuestro td:first-child b{ color:var(--acento); }
.zm-ads-tres{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.zm-ads-tres > .zm-tarjeta{ margin:0; }
.zm-ads-dos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:14px; }
.zm-ads h4, .zm-ads-biblia h4, .zm-ads-prompt h4{ margin:14px 0 6px; font-size:13.5px; font-weight:500; color:var(--texto); letter-spacing:-.01em; }
.zm-ads-regla{ margin-top:10px; font-size:13px; color:var(--texto-2); }
.zm-ads-regla > summary{ cursor:pointer; color:var(--texto); font-weight:500; }
.zm-ads-regla p{ margin:8px 0 0; line-height:1.55; }

/* Resumen: la tarjeta de zairi y las campañas plegables */
.zm-ads-zairi{ margin:0; }
.zm-ads-zairi__texto{ margin:6px 0 0; font-size:14px; line-height:1.55; color:var(--texto); }
.zm-ads-recos{ margin-top:12px; }
.zm-ads-campana + .zm-ads-campana{ border-top:1px solid var(--linea); }
.zm-ads-campana .zm-fila + .zm-fila::before{ display:none; }
.zm-ads-campana.is-abierta > .zm-fila .zm-fila__chevron{ transform:rotate(135deg); }
.zm-ads-campana__detalle{ padding:4px 14px 16px; animation:zm-asoma .22s var(--sal) both; }
.zm-ads-bloque{ margin-top:12px; padding-top:12px; border-top:1px dashed var(--linea); }
.zm-ads-bloque h4{ margin-top:0; }
.zm-ads-metricas{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:10px; }
.zm-ads-metrica{ display:flex; flex-direction:column; gap:2px; min-width:64px; }
.zm-ads-metrica span{ font-size:11px; color:var(--texto-3); }
.zm-ads-metrica b{ font-size:13.5px; font-weight:500; color:var(--texto); font-variant-numeric:tabular-nums; }
.zm-ads-metricas--fila{ margin-top:0; gap:6px 14px; }
.zm-ads-conjunto{ margin-top:14px; }
.zm-ads-conjunto__cabeza{ font-size:12.5px; color:var(--texto-2); margin-bottom:4px; }
.zm-ads-anuncio{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:10px 0; border-top:1px dashed var(--linea); }
.zm-ads-anuncio__creativo{ all:unset; box-sizing:border-box; display:flex; align-items:center; gap:10px; flex:1 1 220px; min-width:0; cursor:pointer; border-radius:10px; }
.zm-ads-anuncio__creativo:disabled{ cursor:default; }
.zm-ads-anuncio__creativo:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
.zm-ads-anuncio__texto{ display:flex; flex-direction:column; min-width:0; }
.zm-ads-anuncio__texto b{ font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-ads-anuncio__texto span{ font-size:12px; color:var(--texto-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-ads-mini{ position:relative; display:grid; place-items:center; flex:0 0 auto; width:46px; height:46px; border-radius:10px; overflow:hidden; background:var(--solido-2); color:var(--texto-3); font-size:9.5px; text-align:center; }
.zm-ads-mini img{ width:100%; height:100%; object-fit:cover; }
.zm-ads-mini i{ position:absolute; right:3px; bottom:3px; padding:0 4px; border-radius:4px; background:rgba(0,0,0,.6); color:#fff; font-size:8.5px; font-style:normal; }
.zm-ads-mini--grande{ width:96px; height:120px; border-radius:14px; font-size:11px; }
.zm-ads-personas__caja{ margin-top:10px; }
.zm-ads-personas{ margin-top:8px; }
.zm-ads-creativo__imagen{ display:grid; place-items:center; min-height:180px; margin-bottom:12px; border-radius:14px; overflow:hidden; background:var(--solido-2); color:var(--texto-3); }
.zm-ads-creativo__imagen img{ width:100%; max-height:340px; object-fit:contain; }
.zm-ads-creativo__cuerpo{ margin:12px 0 0; font-size:13.5px; line-height:1.55; white-space:pre-wrap; color:var(--texto); }
.zm-ads-carrusel{ display:flex; gap:6px; overflow-x:auto; margin-bottom:10px; }
.zm-ads-carrusel img{ width:72px; height:72px; object-fit:cover; border-radius:8px; flex:0 0 auto; }

/* Crear anuncio */
.zm-ads-crear__barra{ display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; margin:0 0 14px; padding:12px 14px; border-radius:var(--r-tarjeta); background:var(--solido); border:1px solid var(--linea); }
.zm-ads-crear__espacio{ flex:1 1 auto; }
.zm-ads-interruptor{ display:flex; align-items:center; gap:10px; cursor:pointer; margin:0; }
.zm-ads-interruptor input{ position:absolute; opacity:0; width:1px; height:1px; }
.zm-ads-interruptor__pista{ position:relative; flex:0 0 auto; width:40px; height:24px; border-radius:999px; background:var(--solido-2); box-shadow:inset 0 0 0 1px var(--linea); transition:background-color .2s ease; }
.zm-ads-interruptor__pista::after{ content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--solido); box-shadow:0 1px 3px rgba(16,20,40,.25); transition:transform .22s var(--sal); }
.zm-ads-interruptor input:checked + .zm-ads-interruptor__pista{ background:var(--acento); box-shadow:none; }
.zm-ads-interruptor input:checked + .zm-ads-interruptor__pista::after{ transform:translateX(16px); }
.zm-ads-interruptor input:focus-visible + .zm-ads-interruptor__pista{ outline:2px solid var(--acento); outline-offset:2px; }
.zm-ads-interruptor > span:last-child{ display:flex; flex-direction:column; }
.zm-ads-interruptor b{ font-size:14px; font-weight:500; color:var(--texto); }
.zm-ads-interruptor small{ font-size:12px; color:var(--texto-2); }
.zm-ads-crear__grid{ display:grid; grid-template-columns:minmax(300px,380px) minmax(0,1fr); gap:16px; align-items:start; }
.zm-ads-ficha{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.zm-ads-ficha > .zm-tarjeta + .zm-tarjeta{ margin-top:0; }
.zm-ads-paso .zm-seccion{ padding:0; }
.zm-ads-paso .zm-seccion > h3{ display:flex; align-items:center; gap:10px; }
.zm-ads-paso .zm-campo, .zm-ads-paso .zm-campos{ margin-top:12px; }
.zm-ads-paso .zm-campos .zm-campo{ margin-top:0; }
.zm-ads-paso .zm-campo input, .zm-ads-paso .zm-campo select, .zm-ads-paso .zm-campo textarea{ margin:0; }
.zm-ads-sobre{ color:var(--danger) !important; }
.zm-ads-opciones{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:8px; margin-top:12px; }
.zm-ads-opcion{ all:unset; box-sizing:border-box; display:flex; flex-direction:column; gap:5px; padding:13px 14px; border-radius:var(--r-chica); border:1px solid var(--linea); background:var(--solido); cursor:pointer; transition:border-color .18s ease, background-color .18s ease, transform .14s var(--sal); }
.zm-ads-opcion b{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px; font-weight:500; color:var(--texto); }
.zm-ads-opcion span{ font-size:12.5px; line-height:1.45; color:var(--texto-2); }
.zm-ads-opcion small{ font-size:11.5px; color:var(--texto-3); }
.zm-ads-opcion:active{ transform:scale(.99); }
.zm-ads-opcion:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
.zm-ads-opcion[aria-checked="true"]{ border-color:rgba(var(--acento-rgb),.6); box-shadow:0 0 0 1px rgba(var(--acento-rgb),.6); background:var(--acento-suave); }
@media (hover:hover) and (pointer:fine){ .zm-ads-opcion:hover{ background:var(--solido-2); } .zm-ads-opcion[aria-checked="true"]:hover{ background:var(--acento-suave); } }
.zm-ads-avanzado{ margin-top:14px; font-size:13px; }
.zm-ads-avanzado > summary{ cursor:pointer; color:var(--texto-2); font-weight:500; }
.zm-ads-chip-fijo{ display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:4px 6px 4px 12px; border-radius:999px; background:var(--solido-2); font-size:13px; color:var(--texto); }
.zm-ads-chip-fijo select{ width:auto; min-height:26px; margin:0; padding:2px 6px; border-radius:999px; font-size:12px; }
.zm-ads-buscador{ position:relative; margin-top:8px; }
.zm-ads-buscador__lista{ position:absolute; z-index:20; left:0; right:0; top:calc(100% + 6px); max-height:280px; overflow:auto; padding:6px; border-radius:var(--r-chica); background:var(--solido); border:1px solid var(--linea); box-shadow:var(--pz-sombra); animation:zm-llega .16s var(--sal) both; }
.zm-ads-buscador__lista button{ all:unset; box-sizing:border-box; display:flex; flex-direction:column; width:100%; padding:9px 11px; border-radius:10px; cursor:pointer; }
.zm-ads-buscador__lista button b{ font-size:13.5px; font-weight:500; color:var(--texto); }
.zm-ads-buscador__lista button span{ font-size:12px; color:var(--texto-3); }
.zm-ads-buscador__lista button:hover, .zm-ads-buscador__lista button:focus-visible{ background:var(--solido-2); }
.zm-ads-anuncio-editor{ display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,300px); gap:18px; align-items:start; margin-top:12px; }
.zm-ads-anuncio-editor__ficha{ min-width:0; }
.zm-ads-creativo-caja{ display:flex; gap:14px; align-items:flex-start; margin-top:12px; padding:12px; border-radius:var(--r-chica); background:var(--solido-2); }
.zm-ads-creativo-caja__acciones{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:0; }
.zm-ads-creativo-caja__acciones .zm-estado{ white-space:normal; }
.zm-ads-escribir{ margin:14px 0 4px; }
.zm-ads-variantes{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.zm-ads-variante{ padding:13px 14px; border-radius:var(--r-chica); border:1px solid var(--linea); background:var(--solido); animation:zm-asoma .2s var(--sal) both; }
.zm-ads-variante__cabeza{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.zm-ads-variante__hook{ margin:8px 0 0; font-size:13px; font-weight:500; color:var(--texto); }
.zm-ads-variante__texto{ margin:6px 0 0; font-size:13.5px; line-height:1.55; white-space:pre-wrap; color:var(--texto); }
.zm-ads-variante__titulo{ margin:6px 0 0; font-size:13px; color:var(--texto-2); }
.zm-ads-guion{ margin:8px 0 0; white-space:pre-wrap; line-height:1.6; color:var(--texto); }
.zm-ads-politicas{ margin-top:12px; padding:12px 14px; border-radius:var(--r-chica); background:var(--solido-2); }
.zm-ads-politicas__cabeza{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.zm-ads-politicas ul{ margin:8px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.zm-ads-politicas li{ position:relative; padding-left:16px; font-size:13px; line-height:1.45; color:var(--texto); }
.zm-ads-politicas li::before{ content:''; position:absolute; left:2px; top:7px; width:6px; height:6px; border-radius:50%; background:var(--texto-3); }
.zm-ads-politicas li[data-g="alta"]::before, .zm-ads-politicas li[data-g="bloqueante"]::before{ background:var(--danger); }
.zm-ads-politicas li[data-g="media"]::before{ background:#B8860B; }
.zm-ads-politicas li span{ display:block; color:var(--texto-2); font-size:12.5px; }
.zm-ads-politicas li .zm-ads-sugerencia{ color:var(--texto); }
/* Maqueta del feed */
.zm-ads-preview{ position:sticky; top:12px; margin:0; border-radius:16px; overflow:hidden; background:var(--solido); border:1px solid var(--linea); box-shadow:0 18px 40px -30px rgba(6,18,64,.5); font-size:13px; color:var(--texto); }
.zm-ads-preview__cabeza{ display:flex; align-items:center; gap:9px; padding:11px 12px 6px; }
.zm-ads-preview__cabeza div{ display:flex; flex-direction:column; }
.zm-ads-preview__cabeza b{ font-size:13px; font-weight:600; }
.zm-ads-preview__cabeza span{ font-size:11px; color:var(--texto-3); }
.zm-ads-preview__avatar{ display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--acento-suave); color:var(--acento); font-size:11.5px; font-weight:600; }
.zm-ads-preview__texto{ margin:0; padding:2px 12px 10px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; }
.zm-ads-preview__media{ display:grid; place-items:center; width:100%; max-height:420px; background:var(--solido-2); color:var(--texto-3); overflow:hidden; }
.zm-ads-preview__media img{ width:100%; height:100%; object-fit:cover; }
.zm-ads-preview__pie{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; background:var(--solido-2); }
.zm-ads-preview__pie div{ display:flex; flex-direction:column; min-width:0; }
.zm-ads-preview__pie span{ font-size:11px; color:var(--texto-3); text-transform:uppercase; letter-spacing:.03em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-ads-preview__pie b{ font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-ads-preview__cta{ flex:0 0 auto; padding:7px 11px; border-radius:8px; background:var(--solido); border:1px solid var(--linea); font-size:12px !important; font-weight:600; color:var(--texto) !important; text-transform:none !important; letter-spacing:0 !important; }
/* Chat con zairi */
.zm-ads-chat{ position:sticky; top:12px; display:flex; flex-direction:column; height:min(78vh,720px); border-radius:var(--r-tarjeta); background:var(--solido); border:1px solid var(--linea); overflow:hidden; }
.zm-ads-chat__cabeza{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--linea); }
.zm-ads-chat__cabeza div{ display:flex; flex-direction:column; }
.zm-ads-chat__cabeza b{ font-size:14px; font-weight:500; }
.zm-ads-chat__cabeza span{ font-size:12px; color:var(--texto-3); }
.zm-ads-chat__orbe{ display:grid; place-items:center; width:30px; height:30px; flex:0 0 30px; overflow:hidden; }
.zm-ads-chat__hilo{ flex:1 1 auto; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; scroll-behavior:smooth; }
.zm-ads-burbuja{ max-width:88%; padding:10px 13px; border-radius:16px; font-size:13.5px; line-height:1.5; animation:zm-asoma .2s var(--sal) both; }
.zm-ads-burbuja p{ margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.zm-ads-burbuja img{ display:block; max-width:180px; max-height:180px; margin-bottom:6px; border-radius:10px; object-fit:cover; }
.zm-ads-burbuja--zairi{ align-self:flex-start; background:var(--solido-2); color:var(--texto); border-bottom-left-radius:6px; }
.zm-ads-burbuja--persona{ align-self:flex-end; background:var(--acento); color:#fff; border-bottom-right-radius:6px; }
.zm-ads-burbuja.is-error{ box-shadow:inset 0 0 0 1px var(--danger); }
.zm-ads-burbuja__nota{ display:block; margin-top:6px; font-size:11.5px; color:var(--texto-3); }
.zm-ads-burbuja.is-pensando p{ display:flex; gap:4px; }
.zm-ads-burbuja.is-pensando span{ width:6px; height:6px; border-radius:50%; background:var(--texto-3); animation:zm-ads-late 1s ease-in-out infinite; }
.zm-ads-burbuja.is-pensando span:nth-child(2){ animation-delay:.15s; } .zm-ads-burbuja.is-pensando span:nth-child(3){ animation-delay:.3s; }
.zm-ads-chat__sugerencias{ padding:0 14px 8px; }
.zm-ads-chat__adjunto{ display:flex; align-items:center; gap:8px; padding:6px 14px; font-size:12.5px; color:var(--texto-2); }
.zm-ads-chat__adjunto img{ width:34px; height:34px; border-radius:8px; object-fit:cover; }
.zm-ads-chat__escribir{ display:flex; align-items:flex-end; gap:6px; padding:10px; border-top:1px solid var(--linea); }
.zm-ads-chat__escribir textarea{ flex:1 1 auto; min-height:38px; max-height:120px; margin:0; padding:9px 12px; border-radius:18px; resize:none; font:inherit; font-size:14px; }
.zm-ads-revision{ margin-top:6px; }
.zm-ads-publicado{ margin-top:12px; }
.zm-ads-paso--final .zm-pie-acciones{ position:static; }
.zm-ads-prompt textarea{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; line-height:1.5; }
.zm-ads-biblia .zm-ads-leyes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; }
.zm-ads-biblia .zm-ads-leyes div{ padding:11px 13px; border-radius:var(--r-chica); background:var(--solido-2); }
.zm-ads-biblia .zm-ads-leyes b{ font-size:13.5px; font-weight:500; }
.zm-ads-biblia .zm-ads-leyes p{ margin:4px 0 0; font-size:12.5px; line-height:1.5; color:var(--texto-2); }

/* Administrador */
.zm-ads-admin__campana + .zm-ads-admin__campana{ border-top:1px solid var(--linea); }
.zm-ads-admin__fila{ display:flex; align-items:center; gap:8px; }
.zm-ads-admin__fila .zm-fila{ flex:1 1 auto; min-width:0; }
.zm-ads-admin__campana.is-abierta .zm-fila__chevron{ transform:rotate(135deg); }
.zm-ads-admin__acciones{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.zm-ads-admin__detalle{ padding:0 14px 14px; animation:zm-asoma .22s var(--sal) both; }
.zm-ads-admin__conjunto{ margin-top:10px; padding:12px; border-radius:var(--r-chica); background:var(--solido-2); }
.zm-ads-admin__cabeza{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.zm-ads-admin__cabeza > div:first-child{ display:flex; flex-direction:column; min-width:0; }
.zm-ads-admin__cabeza b{ font-size:14px; font-weight:500; }
.zm-ads-admin__cabeza span{ font-size:12.5px; color:var(--texto-2); }
.zm-ads-admin__anuncio{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; padding-top:10px; border-top:1px dashed var(--linea); }
.zm-ads-admin__anuncio-texto{ display:flex; flex-direction:column; flex:1 1 200px; min-width:0; }
.zm-ads-admin__anuncio-texto b{ font-size:13px; font-weight:500; }
.zm-ads-admin__anuncio-texto span{ font-size:12px; color:var(--texto-2); overflow:hidden; text-overflow:ellipsis; }
.zm-ads-rechazo{ color:var(--danger) !important; }
.zm-ads-borrador{ display:flex; align-items:center; gap:4px; }
.zm-ads-borrador .zm-fila{ flex:1 1 auto; }
.zm-ads-borrador + .zm-ads-borrador{ border-top:1px solid var(--linea); }
.zm-ads-historial{ padding:14px 18px; }
.zm-ads-historial > summary{ cursor:pointer; font-size:14px; font-weight:500; color:var(--texto); }

/* Posicionamiento */
.zm-ads-conexiones{ display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap; padding:12px 14px; border-radius:var(--r-tarjeta); background:var(--solido); border:1px solid var(--linea); }
.zm-ads-agregar{ display:flex; gap:8px; margin:0 0 12px; }
.zm-ads-agregar input{ flex:1 1 auto; margin:0; min-height:40px; border-radius:999px; padding:8px 16px; }
.zm-ads-sugeridas{ margin:0 0 12px; }
.zm-ads-posicion{ font-size:17px; font-weight:500; letter-spacing:-.02em; color:var(--texto); font-variant-numeric:tabular-nums; }
.zm-ads-spark{ color:var(--acento); flex:0 0 auto; }
.zm-ads-seo-palabra + .zm-ads-seo-palabra{ border-top:1px solid var(--linea); }
.zm-ads-seo-palabra .zm-fila + .zm-fila::before{ display:none; }
.zm-ads-seo-palabra.is-abierta .zm-fila__chevron{ transform:rotate(135deg); }
.zm-ads-seo-palabra__detalle{ padding:0 14px 14px; animation:zm-asoma .22s var(--sal) both; }
.zm-ads-competidor{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:8px; align-items:center; margin-top:6px; }
.zm-ads-competidor input{ margin:0; }
.zm-ads-conexion{ margin-top:6px; padding:14px; border-radius:var(--r-chica); background:var(--solido-2); }
.zm-ads-conexion h4{ margin-top:0; }
.zm-ads-lectura .zm-hallazgo{ margin-top:6px; }

/* Alertas */
.zm-ads-salud{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.zm-ads-salud__numero{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:96px; height:96px; border-radius:50%; background:var(--solido-2); box-shadow:inset 0 0 0 3px var(--texto-3); }
.zm-ads-salud__numero[data-estado="sana"]{ box-shadow:inset 0 0 0 3px var(--ok); }
.zm-ads-salud__numero[data-estado="atencion"]{ box-shadow:inset 0 0 0 3px #B8860B; }
.zm-ads-salud__numero[data-estado="riesgo"]{ box-shadow:inset 0 0 0 3px var(--danger); }
.zm-ads-salud__numero b{ font-size:30px; font-weight:500; letter-spacing:-.04em; line-height:1; color:var(--texto); font-variant-numeric:tabular-nums; }
.zm-ads-salud__numero span{ font-size:11px; color:var(--texto-3); }
.zm-ads-salud__texto{ flex:1 1 260px; min-width:0; display:flex; flex-direction:column; gap:8px; }
.zm-ads-salud__texto h2{ margin:0; font-size:17px; font-weight:500; }
.zm-ads-salud__texto h2 .zm-estado{ font-size:17px; color:var(--texto); }
.zm-ads-salud__texto p{ margin:0; font-size:13.5px; line-height:1.5; color:var(--texto-2); }

@media(max-width:1100px){
  .zm-ads-anuncio-editor{ grid-template-columns:minmax(0,1fr); }
  .zm-ads-preview{ position:static; max-width:360px; }
}
@media(max-width:900px){
  .zm-ads-crear__grid{ grid-template-columns:minmax(0,1fr); }
  .zm-ads-chat{ position:static; height:min(62vh,520px); }
}
@media(max-width:640px){
  .zm-ads-admin__fila{ flex-direction:column; align-items:stretch; }
  .zm-ads-admin__acciones{ justify-content:flex-start; padding:0 14px 10px; }
  .zm-ads-creativo-caja{ flex-direction:column; }
  .zm-ads-competidor{ grid-template-columns:minmax(0,1fr) auto; }
  .zm-ads-competidor input:nth-child(2){ grid-column:1; }
  .zm-ads-salud__numero{ width:80px; height:80px; }
}
@media (prefers-reduced-motion: reduce){
  .zm-ads-cargando__punto, .zm-ads-burbuja.is-pensando span{ animation:none; opacity:.7; }
  .zm-ads-campana__detalle, .zm-ads-admin__detalle, .zm-ads-seo-palabra__detalle, .zm-ads-variante, .zm-ads-burbuja, .zm-ads-buscador__lista{ animation:zm-funde .18s ease both; }
  .zm-ads-interruptor__pista, .zm-ads-interruptor__pista::after, .zm-ads-opcion{ transition:none; }
  .zm-ads-chat__hilo{ scroll-behavior:auto; }
}
/* Montos largos ($2.499.660) en una sola línea: la cifra no se parte. */
.zm-ads .zm-cifras{ grid-template-columns:repeat(auto-fit,minmax(176px,1fr)); }
.zm-ads .zm-cifra__valor{ font-size:22px; white-space:nowrap; overflow-wrap:normal; }
.zm-ads-admin__fila > .zm-ads-admin__acciones{ flex:0 0 auto; flex-wrap:nowrap; padding-right:10px; }
@media(max-width:640px){ .zm-ads-admin__fila > .zm-ads-admin__acciones{ flex-wrap:wrap; padding:0 14px 10px; } }
/* ── fin zm · zairi ads v625 ── */
/* ── zm · inicio en vivo y duración de la cita ── */
/* «En curso ahora»: una tarjeta por atención simultánea (sala, hasta qué hora y cuánto
   le queda). «Alargar la cita» al agregar un servicio: cuánto, no todo o nada. */
.zm-inicio-vivos{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.zm-inicio-vivos__cuenta{ margin:0; font-size:12.5px; color:var(--texto-2); }
.zm-inicio-vivos__grilla{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); }
.zm-inicio-vivo{ display:flex; flex-direction:column; gap:6px; min-width:0; padding:12px 14px; border-radius:var(--r-chica); background:var(--solido-2); animation:zm-asoma .22s var(--sal) both; }
.zm-inicio-vivo__cabeza{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; color:var(--texto-2); }
.zm-inicio-vivo__lugar{ display:inline-flex; align-items:center; gap:6px; min-width:0; font-weight:500; color:var(--texto); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-inicio-vivo__lugar::before{ content:''; flex:none; width:6px; height:6px; border-radius:50%; background:var(--ok); animation:zm-inicio-vivo 2.4s ease-in-out infinite; }
.zm-inicio-vivo__hora{ flex:none; font-variant-numeric:tabular-nums; }
.zm-inicio-vivo__nombre{ padding:0; border:0; background:none; font:inherit; font-size:16px; font-weight:600; line-height:1.25; text-align:left; color:var(--texto); cursor:pointer; overflow-wrap:anywhere; }
.zm-inicio-vivo__nombre:focus-visible{ outline:2px solid var(--linea); outline-offset:2px; border-radius:4px; }
.zm-inicio-vivo__detalle{ margin:0; font-size:13px; color:var(--texto-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-inicio-vivo__avance{ height:3px; border-radius:2px; background:var(--linea); overflow:hidden; }
.zm-inicio-vivo__avance span{ display:block; height:100%; background:var(--ok); transform-origin:left center; transition:transform .6s var(--sal); }
.zm-inicio-vivo__pie{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; color:var(--texto-2); }
.zm-inicio-vivo__queda{ margin-right:auto; font-variant-numeric:tabular-nums; }
.zm-inicio-ahora__rotulo--sig{ display:block; margin:4px 0 -6px; }
.zm-cita-alarga{ display:flex; flex-direction:column; gap:4px; margin-top:8px; font-size:12.5px; }
.zm-cita-alarga select{ margin:0; }
.zm-cita-alarga small{ color:var(--texto-2); }
@media (max-width:560px){ .zm-inicio-vivos__grilla{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){
  .zm-inicio-vivo{ animation:none; }
  .zm-inicio-vivo__lugar::before{ animation:none; }
  .zm-inicio-vivo__avance span{ transition:none; }
}
/* ── fin zm · inicio en vivo y duración de la cita ── */

/* ── zm · legal vivo ── */
/* Zairi como protagonista en Zairi Legal: el orbe vivo y lo que está haciendo ahora.
   Sin colores nuevos: tokens del sistema. Con una alerta, luz difusa sin aro. */
.zm-legal-vivo{ display:flex; align-items:center; gap:18px; margin:4px 0 14px; padding:16px 20px; border:1px solid var(--linea); border-radius:var(--r-tarjeta); background:var(--solido); animation:zm-asoma .24s var(--sal) both; }
.zm-legal-vivo__orbe{ position:relative; flex:0 0 76px; width:76px; height:76px; overflow:visible; }
.zm-legal-vivo__orbe .orb3d-wrap{ width:100% !important; height:100% !important; margin:0 !important; overflow:visible; }
.zm-legal-vivo__orbe .orb3d-wrap > canvas{ display:block; width:100% !important; height:100% !important; }
.zm-legal-vivo__orbe::after, .zm-legal-vivo__orbe .orb3d-wrap::after{ content:none; display:none; }
.zm-legal-vivo.is-alerta .orb3d-glow{ opacity:.85; filter:blur(14px); }
.zm-legal-vivo.is-pausa .zm-legal-vivo__orbe{ opacity:.55; filter:saturate(.6); }
.zm-legal-vivo__texto{ flex:1 1 auto; min-width:0; }
.zm-legal-vivo__texto h2{ margin:0 0 4px; font-size:18px; font-weight:600; letter-spacing:-.01em; color:var(--texto); }
.zm-legal-vivo__texto p{ margin:0; font-size:13.5px; line-height:1.5; color:var(--texto-2); }
.zm-legal-vivo__ahora{ display:flex; align-items:center; gap:8px; margin-top:8px !important; font-size:13px !important; color:var(--texto) !important; font-variant-numeric:tabular-nums; }
.zm-legal-vivo__punto{ flex:none; width:6px; height:6px; border-radius:50%; background:var(--ok); animation:zm-inicio-vivo 2.4s ease-in-out infinite; }
.zm-legal-vivo.is-alerta .zm-legal-vivo__punto{ background:var(--acento); }
.zm-legal-vivo__accion{ flex:none; }
@media (max-width:640px){
  .zm-legal-vivo{ flex-wrap:wrap; padding:14px 16px; gap:12px; }
  .zm-legal-vivo__orbe{ flex-basis:56px; width:56px; height:56px; }
  .zm-legal-vivo__accion{ width:100%; }
}
@media (prefers-reduced-motion: reduce){
  .zm-legal-vivo{ animation:none; }
  .zm-legal-vivo__punto{ animation:none; }
}
/* ── fin zm · legal vivo ── */


/* Compras compartidas y alcance de cotización: acciones visibles en recepción. */
.compra-web { margin: 0 0 14px; padding: 16px; border: 1px solid var(--border); border-left: 3px solid var(--acento, #28755a); border-radius: 12px; background: var(--surface-2); }
.compra-web__cabecera { display: flex; align-items: flex-start; gap: 12px; }
.compra-web__cabecera strong { font-size: 14px; }
.compra-web p, .compra-asignar p { font-size: 12.5px; line-height: 1.55; margin: 6px 0 10px; }
.compra-web__linea { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.compra-web__detalle { flex: 1 1 200px; display: grid; gap: 4px; font-size: 13px; }
.compra-web__detalle span, .compra-web__detalle small, .compra-web__nota, .compra-web__estado { color: var(--muted); font-size: 12px; line-height: 1.5; }
.compra-web__acciones, .coti-agregar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.compra-web--error { border-left-color: #bb7538; }
.compra-web--historial { border-left-width: 1px; }
.compra-web--historial ul { padding-left: 18px; font-size: 12px; line-height: 1.6; }
.compra-asignar { flex-basis: 100%; padding: 14px; border-radius: 8px; background: var(--surface); }
.compra-asignar__titulo, .compra-asignar__persona { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.compra-asignar__persona { margin: 12px 0; padding: 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.compra-asignar__campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.compra-asignar__cantidad { max-width: 220px; margin: 14px 0 0; }
.compra-asignar__balance { font-variant-numeric: tabular-nums; }
.zm-coti-ed__tipo { grid-column: 1 / -1; max-width: 340px; }
.coti-alcance { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.coti-agregar { margin-top: 12px; }
.coti-sugerencias { grid-column: 1 / -1; display: grid; gap: 8px; }
.coti-sugerencias small { font-size: 12px; color: var(--muted); }
.coti-sugerencias__revision { padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); font-size: 13px; }
.coti-sugerencias__revision p { margin: 8px 0; font-size: 12px; line-height: 1.55; }
.coti-sugerencias__opcion { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0; }
.coti-sugerencias__opcion input { width: 16px; height: 16px; flex: none; margin: 2px 0 0; }
.coti-concepto, .coti-glosa { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.5; font-weight: 400; color: var(--muted); }
.compra-web .btn:focus-visible, .coti-agregar .btn:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
@media (max-width: 600px) { .coti-alcance, .compra-asignar__campos { grid-template-columns: 1fr; } .compra-web__acciones { width: 100%; } .compra-web__acciones .btn { flex: 1 1 150px; } }
.zm-coti-ed__linea--incluido { grid-template-columns: minmax(0, 1fr) 104px 34px; }
@media (max-width: 600px) { .zm-coti-ed__trat { grid-row: auto; } .zm-coti-ed__tipo { max-width: none; } }

/* Saldo de recepción y datos básicos editables: usa los tokens de la ficha. */
.saldo-paciente { margin:14px 0; padding:14px 16px; border:1px solid var(--linea); border-radius:12px; background:var(--solido); }
.saldo-paciente-cabeza { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.saldo-paciente-cabeza h3 { margin:0 0 4px; font-size:15px; font-weight:500; }
.saldo-paciente-cabeza strong { font-size:22px; font-variant-numeric:tabular-nums; }
.saldo-paciente-aviso { padding:12px 14px; margin:12px 0; border:1px solid var(--linea); border-radius:10px; background:var(--fondo); font-size:13px; line-height:1.5; }
.saldo-paciente .cuota-fila { flex-wrap:wrap; }
.saldo-paciente .cuota-fila > div { min-width:0; overflow-wrap:anywhere; }
.saldo-paciente details { margin-top:12px; }
.saldo-paciente summary, .datos-detallados-paciente summary { cursor:pointer; font-size:14px; color:var(--texto-2); }
.saldo-cita-acciones { margin:12px 0; }
.dato-paciente { display:inline-flex; align-items:center; gap:7px; max-width:100%; padding:3px 0; border:0; border-radius:3px; background:transparent; color:inherit; text-align:left; font:inherit; overflow-wrap:anywhere; cursor:pointer; }
.dato-paciente > svg { flex-shrink:0; color:var(--texto-3); }
.dato-paciente:hover { color:var(--acento); }
.dato-paciente:focus-visible, .datos-detallados-paciente summary:focus-visible { outline:2px solid var(--texto); outline-offset:4px; }
.dato-paciente-editor { min-width:0; max-width:420px; font-size:14px; }
.dato-paciente-editor input { width:100%; min-width:0; margin:3px 0 8px; }
.dato-paciente-editor label { display:block; font-size:12px; }
.dato-paciente-editor p[role="alert"] { color:var(--danger); }
.datos-basicos-paciente { margin-bottom:10px; }
.zm-pf-vinculo { margin:10px 0; color:var(--texto-2); font-size:13px; line-height:1.5; }
@media (max-width:700px) {
 .zm-pf-acciones > [data-ficha-primary="atencion"] { grid-column:span 2; }
}
.datos-detallados-paciente { margin-top:18px; padding-top:14px; border-top:1px solid var(--linea); }
@media(max-width:600px) {
 .saldo-paciente { padding:12px; }
 .saldo-paciente .cuotas-acciones { width:100%; flex-wrap:wrap; }
 .saldo-paciente .cuota-fila { display:block; }
 .saldo-paciente .cuota-fila > .cuotas-acciones { margin-top:8px; }
 .datos-basicos-paciente { grid-template-columns:minmax(0,1fr); }
 .dato-paciente-editor { max-width:100%; }
}

/* El cierre ocupa el ancho del día sin estrechar las citas ya agendadas. */
.zm-ag-semana-cierre{position:absolute;inset-inline:0;z-index:3;width:100%;border:0;border-left:3px solid var(--muted);border-radius:0;padding:6px 7px;background:repeating-linear-gradient(135deg,rgba(100,116,139,.08),rgba(100,116,139,.08) 7px,rgba(100,116,139,.17) 7px,rgba(100,116,139,.17) 14px);color:var(--ink);text-align:left;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:3px;overflow:hidden;cursor:pointer;box-shadow:none;white-space:normal;line-height:1.3}
.zm-ag-semana-cierre strong,.zm-ag-semana-cierre span{max-width:100%;overflow-wrap:anywhere;font-size:11px}
.zm-ag-semana-cierre:focus-visible{outline:2px solid var(--acento);outline-offset:-2px}

/* ── zm · zairi suite ── */
/* Programar contenido para Instagram y Facebook, dentro de zairi ads: calendario,
   lista, editor con vista previa, ideas, biblioteca y conexión. Solo tokens
   vivos; el acento marca lo programado y la acción principal. Sin sombras. */
.zm-suite{ display:flex; flex-direction:column; gap:14px; }
.zm-suite .zm-tarjeta + .zm-tarjeta{ margin-top:0; }
.zm-suite .zm-campo input, .zm-suite .zm-campo select, .zm-suite .zm-campo textarea{ margin:0; }
.zm-suite .zm-campo textarea{ resize:vertical; line-height:1.5; }
.zm-suite .zm-inf-sec > .zm-campo, .zm-suite .zm-inf-sec > .zm-campos{ margin-top:12px; }
/* Un chip elegido no pierde su texto al pasarle el cursor por encima. */
.zm-suite .zm-chip[aria-pressed="true"]:hover{ color:var(--fondo); border-color:var(--texto); }
.zm-suite-barra{ justify-content:space-between; margin:0; }
.zm-suite-barra__redes{ display:inline-flex; align-items:center; gap:10px; margin-left:auto; }
.zm-suite-aviso{ margin:0; font-size:13.5px; }
.zm-suite-redes{ display:inline-flex; align-items:center; gap:6px; flex:none; }
.zm-suite-red{ display:inline-flex; align-items:center; gap:5px; color:var(--texto-3); font-size:12.5px; white-space:nowrap; }
.zm-suite-red[data-estado="publicada"]{ color:var(--ok); }
.zm-suite-red[data-estado="error"]{ color:var(--danger); }
.zm-suite-red[data-estado="revisar"], .zm-suite-red[data-estado="pendiente"]{ color:#B8860B; }

/* miniaturas */
.zm-suite-mini{ position:relative; display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:10px; overflow:hidden; background:var(--solido-2); color:var(--texto-3); }
.zm-suite-mini img{ width:100%; height:100%; object-fit:cover; display:block; }
.zm-suite-mini i{ position:absolute; right:3px; bottom:3px; padding:0 5px; border-radius:5px; background:rgba(0,0,0,.62); color:#fff; font-size:9.5px; font-style:normal; font-variant-numeric:tabular-nums; line-height:1.6; }
.zm-suite-mini--grande{ width:64px; height:80px; border-radius:12px; }

/* calendario */
.zm-suite-cal{ padding:18px 18px 14px; }
.zm-suite-cal__cabeza{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 12px; }
.zm-suite-cal__cabeza h2{ margin:0; font-size:18px; font-weight:500; letter-spacing:-.02em; color:var(--texto); text-transform:capitalize; }
.zm-suite-cal__cabeza .zm-ads-fila-botones{ margin:0; }
.zm-suite-cal__dias{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; padding:0 0 6px; }
.zm-suite-cal__dias span{ padding:0 8px; font-size:11.5px; color:var(--texto-3); letter-spacing:.02em; }
.zm-suite-cal__grilla{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; background:var(--linea); border:1px solid var(--linea); border-radius:var(--r-chica); overflow:hidden; transition:opacity .2s ease; }
.zm-suite-cal__grilla[data-cargando="1"]{ opacity:.55; }
.zm-suite-cal__dia{ display:flex; flex-direction:column; gap:3px; min-width:0; min-height:112px; padding:6px; background:var(--solido); }
.zm-suite-cal__dia[data-fuera="1"]{ background:var(--solido-2); }
.zm-suite-cal__dia[data-fuera="1"] .zm-suite-cal__num span, .zm-suite-cal__dia[data-pasado="1"] .zm-suite-cal__num span{ color:var(--texto-3); }
.zm-suite-cal__dia[data-sobre="1"]{ box-shadow:inset 0 0 0 2px var(--acento); }
.zm-suite-cal__num{ display:flex; align-items:center; justify-content:space-between; min-height:22px; }
.zm-suite-cal__num span{ display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 4px; border-radius:999px; font-size:12px; font-variant-numeric:tabular-nums; color:var(--texto-2); }
.zm-suite-cal__num em{ display:none; font-style:normal; }
.zm-suite-cal__dia[data-hoy="1"] .zm-suite-cal__num span{ background:var(--acento); color:var(--acento-tinta); font-weight:500; }
.zm-suite-cal__num button{ all:unset; box-sizing:border-box; display:inline-grid; place-items:center; width:22px; height:22px; border-radius:999px; font-size:15px; line-height:1; color:var(--texto-3); cursor:pointer; opacity:0; transition:opacity .15s ease, background-color .15s ease, color .15s ease; }
.zm-suite-cal__dia:focus-within .zm-suite-cal__num button, .zm-suite-cal__num button:focus-visible{ opacity:1; }
.zm-suite-cal__num button:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
.zm-suite-cal__item{ all:unset; box-sizing:border-box; display:flex; align-items:center; gap:5px; min-width:0; padding:3px 6px; border-radius:7px; border:1px solid transparent; background:var(--solido-2); color:var(--texto); font-size:11.5px; line-height:1.5; cursor:pointer; transition:background-color .15s ease, border-color .15s ease; }
.zm-suite-cal__item:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
.zm-suite-cal__item[draggable="true"]{ cursor:grab; }
.zm-suite-cal__item[data-estado="borrador"]{ background:transparent; border:1px dashed var(--linea); color:var(--texto-2); }
.zm-suite-cal__item[data-estado="programada"]{ background:rgba(var(--acento-rgb),.10); color:var(--acento); }
.zm-suite-cal__item[data-estado="publicando"], .zm-suite-cal__item[data-estado="parcial"], .zm-suite-cal__item[data-estado="revisar"]{ background:rgba(184,134,11,.13); }
.zm-suite-cal__item[data-estado="error"]{ background:rgba(192,57,43,.10); color:var(--danger); }
.zm-suite-cal__item[data-estado="publicada"] .zm-suite-cal__hora{ color:var(--ok); }
.zm-suite-cal__hora{ flex:none; font-weight:500; font-variant-numeric:tabular-nums; }
.zm-suite-cal__texto{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-suite-cal__item .zm-suite-redes{ gap:3px; }
.zm-suite-cal__item .zm-suite-red svg{ width:11px; height:11px; }
.zm-suite-cal__item[data-estado="programada"] .zm-suite-red, .zm-suite-cal__item[data-estado="error"] .zm-suite-red:not([data-estado="publicada"]){ color:inherit; opacity:.7; }
.zm-suite-leyenda{ display:flex; align-items:center; gap:6px 16px; flex-wrap:wrap; margin-top:12px; font-size:12px; color:var(--texto-2); }
.zm-suite-leyenda__item{ display:inline-flex; align-items:center; gap:6px; }
.zm-suite-leyenda__item::before{ content:''; width:10px; height:10px; border-radius:3px; background:var(--solido-2); border:1px solid transparent; }
.zm-suite-leyenda__item[data-estado="borrador"]::before{ background:transparent; border:1px dashed var(--texto-3); }
.zm-suite-leyenda__item[data-estado="programada"]::before{ background:rgba(var(--acento-rgb),.28); }
.zm-suite-leyenda__item[data-estado="publicada"]::before{ background:var(--ok); }
.zm-suite-leyenda__item[data-estado="error"]::before{ background:var(--danger); }
.zm-suite-leyenda .zm-ads-tenue{ margin-left:auto; }
@media (hover:hover) and (pointer:fine){
  .zm-suite-cal__dia:hover .zm-suite-cal__num button{ opacity:1; }
  .zm-suite-cal__num button:hover{ background:var(--solido-2); color:var(--texto); }
  .zm-suite-cal__item:hover{ border-color:rgba(var(--acento-rgb),.45); }
  .zm-suite-fila:hover{ background:var(--solido-2); }
  .zm-suite-archivo:is(button):hover{ border-color:rgba(var(--acento-rgb),.45); }
}

/* lista */
.zm-suite-filas{ display:flex; flex-direction:column; }
.zm-suite-fila{ all:unset; box-sizing:border-box; display:grid; grid-template-columns:44px minmax(0,1fr) auto auto 10px; align-items:center; gap:14px; padding:10px 8px; border-radius:12px; cursor:pointer; transition:background-color .15s ease; }
.zm-suite-fila + .zm-suite-fila{ border-top:1px solid var(--linea); border-top-left-radius:0; border-top-right-radius:0; }
.zm-suite-fila:focus-visible{ outline:2px solid var(--acento); outline-offset:-2px; }
.zm-suite-fila__texto{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.zm-suite-fila__texto b{ font-weight:500; font-size:14px; color:var(--texto); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-suite-fila__texto > span{ display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--texto-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-suite-fila__cuando{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; font-size:12.5px; color:var(--texto-2); white-space:nowrap; font-variant-numeric:tabular-nums; }

/* editor */
.zm-suite-editor{ display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,320px); gap:20px; align-items:start; }
.zm-suite-editor__ficha{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.zm-suite-volver{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.zm-suite-volver h2{ margin:0; font-size:18px; font-weight:500; letter-spacing:-.02em; color:var(--texto); }
.zm-suite-volver .zm-mas{ margin-left:auto; }
.zm-suite-medios{ list-style:none; display:flex; flex-direction:column; gap:8px; margin:0 0 4px; padding:0; }
.zm-suite-medios li{ display:flex; align-items:center; gap:12px; padding:8px; border-radius:var(--r-chica); background:var(--solido-2); }
.zm-suite-medios__datos{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; }
.zm-suite-medios__datos b{ font-size:13.5px; font-weight:500; color:var(--texto); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-suite-medios__datos span{ font-size:12px; color:var(--texto-3); font-variant-numeric:tabular-nums; }
.zm-suite-medios__acciones{ display:flex; gap:6px; flex:none; }
.zm-suite-subida, .zm-suite-almacen{ display:flex; align-items:center; gap:12px; margin-top:10px; font-size:12.5px; color:var(--texto-2); }
.zm-suite-subida > span, .zm-suite-almacen > span{ flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums; }
.zm-suite-subida .zm-avance, .zm-suite-almacen .zm-avance{ flex:1 1 120px; max-width:320px; }
.zm-suite-almacen{ margin:0 0 12px; }
.zm-suite-zairi{ display:flex; flex-direction:column; gap:12px; padding:14px 16px; border-radius:var(--r-chica); border:1px solid rgba(var(--acento-rgb),.22); background:rgba(var(--acento-rgb),.04); }
.zm-suite-zairi__cabeza{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.zm-suite-zairi__cabeza > span{ display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--texto); }
.zm-suite-zairi__cabeza b{ font-weight:500; }
.zm-suite-zairi .zm-ads-fila-botones{ margin-top:0; }
.zm-suite-opciones{ display:flex; flex-wrap:wrap; gap:6px 18px; }
.zm-suite-opciones .zm-ads-check{ margin:0; }
.zm-suite-variantes{ display:flex; flex-direction:column; gap:10px; }
.zm-suite-variante{ padding:12px 14px; border-radius:var(--r-chica); border:1px solid var(--linea); background:var(--solido); }
.zm-suite-variante header{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.zm-suite-variante__texto{ margin:0; font-size:13.5px; line-height:1.55; color:var(--texto); white-space:pre-wrap; overflow-wrap:anywhere; }
.zm-suite-variante__tags{ margin:8px 0 0; font-size:12.5px; line-height:1.5; color:var(--acento); overflow-wrap:anywhere; }
.zm-suite-guion{ padding:10px 14px; border-radius:var(--r-chica); background:var(--solido); border:1px solid var(--linea); font-size:13px; color:var(--texto); }
.zm-suite-guion summary{ cursor:pointer; font-weight:500; }
.zm-suite-guion ol{ margin:8px 0 0; padding-left:18px; line-height:1.55; }
.zm-suite-guion li + li{ margin-top:6px; }
.zm-suite-guion li span{ color:var(--texto-3); }
.zm-suite-rapidas{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:10px; }
.zm-suite-rapidas .zm-chip{ min-height:30px; padding:4px 11px; font-size:12.5px; }
.zm-suite-rapidas .zm-chip:disabled{ opacity:.5; cursor:default; }
.zm-suite-pie{ margin:0; padding:14px 0 4px; background:var(--fondo); z-index:2; }
.zm-suite-pie__pregunta{ font-size:13.5px; color:var(--texto); }

/* vista previa */
.zm-suite-previa{ position:sticky; top:12px; display:flex; flex-direction:column; gap:10px; min-width:0; }
.zm-suite-previa__cabeza{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.zm-suite-telefono{ width:100%; max-width:300px; margin:0 auto; border:1px solid var(--linea); border-radius:22px; overflow:hidden; background:var(--solido); }
.zm-suite-telefono__quien{ display:flex; align-items:center; gap:9px; padding:10px 12px; font-size:13px; color:var(--texto); }
.zm-suite-telefono__quien span{ display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--solido-2); border:1px solid var(--linea); font-size:10.5px; color:var(--texto-2); }
.zm-suite-telefono__quien b{ font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-suite-telefono__texto{ margin:0; padding:10px 12px 12px; font-size:13px; line-height:1.5; color:var(--texto); white-space:pre-wrap; overflow-wrap:anywhere; }
.zm-suite-telefono__texto b{ font-weight:500; }
.zm-suite-telefono__texto span{ color:var(--texto-3); }
.zm-suite-telefono[data-red="facebook"] .zm-suite-telefono__texto{ padding:0 12px 10px; max-height:11.5em; overflow:hidden; }
.zm-suite-telefono__enlace{ margin:0; padding:10px 12px; border-top:1px solid var(--linea); background:var(--solido-2); font-size:12px; color:var(--texto-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-suite-previa__medio{ position:relative; display:grid; place-items:center; aspect-ratio:4 / 5; background:var(--solido-2); color:var(--texto-3); font-size:12.5px; text-align:center; overflow:hidden; }
.zm-suite-previa__medio[data-vertical="1"]{ aspect-ratio:9 / 16; }
.zm-suite-previa__medio > span{ padding:0 22px; line-height:1.45; }
.zm-suite-previa__medio img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.zm-suite-previa__medio b{ position:absolute; left:50%; top:50%; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; background:rgba(0,0,0,.5); }
.zm-suite-previa__medio b::after{ content:''; position:absolute; left:18px; top:14px; border-style:solid; border-width:9px 0 9px 14px; border-color:transparent transparent transparent #fff; }
.zm-suite-previa__medio i{ position:absolute; right:10px; top:10px; padding:1px 8px; border-radius:999px; background:rgba(0,0,0,.6); color:#fff; font-size:11px; font-style:normal; font-variant-numeric:tabular-nums; }
.zm-suite-previa__medio em{ position:absolute; left:12px; top:12px; right:48px; font-style:normal; font-size:12.5px; font-weight:500; color:#fff; text-align:left; text-shadow:0 1px 3px rgba(0,0,0,.6); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-suite-previa__medio p{ position:absolute; left:0; right:0; bottom:0; margin:0; padding:34px 12px 12px; background:linear-gradient(to top,rgba(0,0,0,.66),rgba(0,0,0,0)); color:#fff; font-size:12px; line-height:1.4; text-align:left; }

/* detalle */
.zm-suite-detalle{ display:flex; flex-direction:column; gap:14px; }
.zm-suite-detalle__cuerpo{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; margin-bottom:12px; }
.zm-suite-detalle__medios{ display:flex; gap:8px; flex-wrap:wrap; }
.zm-suite-detalle__texto{ flex:1 1 280px; min-width:0; margin:0; font-size:14px; line-height:1.55; color:var(--texto); white-space:pre-wrap; overflow-wrap:anywhere; }
.zm-suite-destino{ display:flex; align-items:center; gap:8px 14px; flex-wrap:wrap; padding:12px 0; border-top:1px solid var(--linea); }
.zm-suite-destino__red{ display:inline-flex; align-items:center; gap:7px; min-width:110px; font-size:14px; color:var(--texto); }
.zm-suite-destino .zm-ads-nota{ flex:1 1 100%; margin:0; }
.zm-suite-destino .zm-ads-fila-botones{ margin:0; }
.zm-suite-destino .zm-estado{ white-space:normal; }

/* ideas y biblioteca */
.zm-suite-ideas{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.zm-suite-idea{ display:flex; flex-direction:column; gap:8px; }
.zm-suite-idea header{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.zm-suite-idea h3{ margin:0; font-size:15px; font-weight:500; letter-spacing:-.01em; color:var(--texto); }
.zm-suite-idea p{ margin:0; font-size:13.5px; line-height:1.5; color:var(--texto-2); }
.zm-suite-idea p.zm-suite-idea__gancho{ color:var(--texto); }
.zm-suite-idea .zm-ads-fila-botones{ margin-top:auto; padding-top:4px; }
.zm-suite-grilla{ display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:14px; }
.zm-suite-archivo{ all:unset; box-sizing:border-box; display:flex; flex-direction:column; gap:6px; min-width:0; padding:8px; border-radius:var(--r-chica); border:1px solid var(--linea); background:var(--solido); font-size:12.5px; color:var(--texto); }
.zm-suite-archivo:is(button){ cursor:pointer; transition:border-color .15s ease; }
.zm-suite-archivo:is(button):disabled{ opacity:.45; cursor:default; }
.zm-suite-archivo:is(button):focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
.zm-suite-archivo[data-estado="purgada"]{ opacity:.6; }
.zm-suite-archivo .zm-suite-mini--grande{ width:100%; height:auto; aspect-ratio:4 / 5; }
.zm-suite-archivo > span:not(.zm-suite-mini){ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zm-suite-archivo small{ font-size:11.5px; color:var(--texto-3); }
.zm-suite-archivo .btn{ align-self:flex-start; }

/* estadísticas: orgánico y pagado */
.zm-suite-red-titulo{ display:inline-flex; align-items:center; gap:8px; }
.zm-suite{ --inf-alto:150px; }
.zm-suite .zm-inf-dobles{ margin-top:4px; }
.zm-suite .zm-inf-cols__par .zm-columnas__barra[data-serie="1"], .zm-suite .zm-inf-dobles__leyenda span[data-serie="1"]::before{ background:var(--acento); opacity:1; }
.zm-suite .zm-inf-sec h4{ margin:20px 0 10px; font-size:13px; font-weight:500; color:var(--texto-2); }
.zm-suite .zm-cifras{ margin-bottom:6px; }
.zm-suite-cifra-sub{ display:block; color:var(--texto-3); }
.zm-suite-rango{ margin:0; }
.zm-suite-dos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px 28px; margin-top:14px; }
.zm-suite-dos > div > h4:first-child{ margin-top:6px; }
.zm-suite-op{ padding:14px 16px; border-radius:var(--r-chica); background:var(--solido-2); min-width:0; }
.zm-suite-op__titulo{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; font-size:13.5px; color:var(--texto); }
.zm-suite-op__titulo b{ font-weight:500; }
.zm-suite-op__titulo span{ font-size:18px; font-weight:500; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.zm-suite-op__barra{ display:flex; gap:2px; height:8px; border-radius:999px; overflow:hidden; background:var(--linea); }
.zm-suite-op__barra i{ display:block; flex:0 0 0; min-width:0; }
.zm-suite-op__barra i[data-t="org"]{ background:var(--texto); opacity:.78; }
.zm-suite-op__barra i[data-t="pag"]{ background:var(--acento); }
.zm-suite-op__partes{ display:flex; gap:8px 22px; flex-wrap:wrap; margin:10px 0 0; }
.zm-suite-op__partes > div{ display:flex; align-items:baseline; gap:7px; font-size:13px; }
.zm-suite-op__partes dt{ display:inline-flex; align-items:center; gap:6px; color:var(--texto-2); }
.zm-suite-op__partes dt::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--texto); opacity:.78; }
.zm-suite-op__partes > div[data-t="pag"] dt::before{ background:var(--acento); opacity:1; }
.zm-suite-op__partes dd{ margin:0; color:var(--texto); font-variant-numeric:tabular-nums; }
.zm-suite-tabla{ margin-top:0; }
.zm-suite-tabla th, .zm-suite-tabla td{ padding:9px 10px; border-top:1px solid var(--linea); text-align:left; vertical-align:top; }
.zm-suite-tabla thead th{ border-top:0; font-size:12px; font-weight:500; color:var(--texto-3); white-space:nowrap; }
.zm-suite-tabla th.zm-ads-num, .zm-suite-tabla td.zm-ads-num{ text-align:right; }
.zm-suite-tabla td small{ display:block; margin-top:2px; font-size:11.5px; line-height:1.4; color:var(--texto-3); white-space:normal; }
.zm-suite-tabla td.zm-ads-num small{ white-space:nowrap; }
.zm-suite-tabla td b{ font-weight:500; }
.zm-suite-tabla th button{ all:unset; cursor:pointer; border-radius:6px; }
.zm-suite-tabla th button[aria-pressed="true"]{ color:var(--texto); }
.zm-suite-tabla th button:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
.zm-suite-tabla__total td{ font-weight:500; }
.zm-suite-tabla--contenido td:first-child{ min-width:240px; }
.zm-suite-pub{ display:flex; align-items:center; gap:10px; min-width:0; }
.zm-suite-pub__texto{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.zm-suite-pub__texto b{ font-size:13.5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.zm-suite-pub__texto > span{ display:inline-flex; align-items:center; gap:5px; flex-wrap:wrap; font-size:12px; color:var(--texto-2); }
.zm-suite-pub__texto a{ color:var(--acento); }

@media (max-width:1000px){
  .zm-suite-editor{ grid-template-columns:minmax(0,1fr); }
  .zm-suite-previa{ position:static; }
}
@media (max-width:760px){
  /* En el teléfono el mes se lee como agenda: un día por fila y solo los que tienen algo. */
  .zm-suite-cal__dias{ display:none; }
  .zm-suite-cal__grilla{ grid-template-columns:minmax(0,1fr); }
  .zm-suite-cal__dia{ min-height:0; padding:10px; }
  .zm-suite-cal__dia[data-vacio="1"]:not([data-hoy="1"]), .zm-suite-cal__dia[data-fuera="1"]{ display:none; }
  .zm-suite-cal__num em{ display:inline; }
  .zm-suite-cal__num span{ display:inline-flex; gap:4px; height:auto; min-width:0; padding:2px 9px; font-size:13px; white-space:nowrap; }
  .zm-suite-cal__num button{ opacity:1; }
  .zm-suite-cal__item{ padding:7px 9px; font-size:13px; }
  .zm-suite-leyenda .zm-ads-tenue{ display:none; }
  .zm-suite-fila{ grid-template-columns:44px minmax(0,1fr) 10px; }
  .zm-suite-fila .zm-suite-redes, .zm-suite-fila__cuando{ grid-column:2; align-items:flex-start; }
  .zm-suite-fila .zm-fila__chevron{ grid-column:3; grid-row:1; }
  .zm-suite-barra__redes{ margin-left:0; width:100%; justify-content:space-between; }
  .zm-suite-medios li{ flex-wrap:wrap; }
  .zm-suite .zm-cifras{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-motion:reduce){
  .zm-suite-cal__grilla, .zm-suite-cal__item, .zm-suite-cal__num button, .zm-suite-fila{ transition:none; }
}

/* ── zm · ficha de cita v333 ── */
/* v333 · LA FICHA DE LA CITA casi a pantalla completa, para que no se haga una columna
   larga: cabecera fija (título, cierre), cuerpo que se desplaza en dos columnas —a la
   izquierda lo que recepción resuelve (pago, notas, cobro, asistencia, qué se hace, datos
   esenciales) y a la derecha lo que consulta (plan, abonos, saldo)— y el pie con las
   acciones de la cita siempre a la vista. Solo tokens vivos; el rojo, el ámbar y el verde
   viven en la tesela del pago, que es lo primero que se lee. */
.modal.zm-cita-modal{ width:100%; max-width:1480px; padding:0; display:flex; flex-direction:column;
  max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px); overflow:hidden; background:var(--solido); }
.modal-bg:has(> .modal.zm-cita-modal){ padding-top:24px; padding-bottom:24px; }
.modal.zm-cita-modal > .close-x{ top:14px; right:16px; z-index:6; }
.modal.zm-cita-modal > h2{ flex:0 0 auto; margin:0; padding:16px 64px 12px 28px; font-size:13px; font-weight:500; letter-spacing:.01em; color:var(--texto-3); border-bottom:1px solid var(--linea); }
.zm-cita__cuerpo{ flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; padding:18px 28px 28px;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,400px); gap:20px 32px; align-items:start; }
.zm-cita__principal, .zm-cita__lateral{ min-width:0; }
.zm-cita__lateral{ display:flex; flex-direction:column; gap:14px; }
.zm-cita__lateral > .agenda-ajuste, .zm-cita__lateral > .pagos-historial, .zm-cita__lateral > .cuotas-panel, .zm-cita__lateral > .zm-cita-plegable{ margin:0; }
.modal.zm-cita-modal > .modal-actions{ flex:0 0 auto; margin:0; padding:12px 28px; border-top:1px solid var(--linea); background:var(--solido); justify-content:flex-start; }
.zm-cita-arriba .zm-ag-det{ margin-bottom:0; border-bottom:0; padding-bottom:10px; }
.zm-cita-arriba > .appt-detail, .zm-cita-detalles{ margin-top:14px; }

/* La tesela del pago: etiqueta pequeña, el estado grande y una línea de detalle. */
.zm-cita-pago{ display:flex; flex-direction:column; gap:10px; margin:0 0 10px; padding:14px 16px; border-radius:var(--r-chica);
  border:1px solid var(--linea); background:var(--solido-2); }
.zm-cita-pago[data-tono="ok"]{ border-color:color-mix(in srgb,var(--ok) 38%,transparent); background:color-mix(in srgb,var(--ok) 7%,var(--solido)); }
.zm-cita-pago[data-tono="mal"]{ border-color:color-mix(in srgb,var(--danger) 38%,transparent); background:color-mix(in srgb,var(--danger) 6%,var(--solido)); }
.zm-cita-pago[data-tono="aviso"]{ border-color:color-mix(in srgb,#B8860B 42%,transparent); background:color-mix(in srgb,#B8860B 8%,var(--solido)); }
.zm-cita-pago__texto{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.zm-cita-pago__eti{ font-size:12px; color:var(--texto-3); }
.zm-cita-pago__valor{ font-size:22px; font-weight:600; letter-spacing:-.022em; line-height:1.2; font-variant-numeric:tabular-nums; color:var(--texto); }
.zm-cita-pago[data-tono="ok"] .zm-cita-pago__valor{ color:var(--ok); }
.zm-cita-pago[data-tono="mal"] .zm-cita-pago__valor{ color:var(--danger); }
.zm-cita-pago[data-tono="aviso"] .zm-cita-pago__valor{ color:#8A6D1F; }
html[data-theme="dark"] .zm-cita-pago[data-tono="aviso"] .zm-cita-pago__valor{ color:#E8C77A; }
.zm-cita-pago__sub{ font-size:13px; line-height:1.4; color:var(--texto-2); }
.zm-cita-pago__acciones{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.zm-cita-pago__acciones:empty{ display:none; }
.zm-cita-pago__acciones .pill{ font-size:12.5px; padding:5px 12px; }
.zm-cita-pago__acciones > small{ flex:1 1 100%; }
/* Pagar el tratamiento del plan desde la cita */
.zm-cita-plan-cobro{ display:flex; flex-direction:column; gap:8px; padding-top:10px; border-top:1px solid var(--linea); }
.zm-cita-plan-linea{ display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; }
.zm-cita-plan-linea__nombre{ display:flex; flex-direction:column; min-width:0; font-weight:500; }
.zm-cita-plan-linea__nombre small{ font-weight:400; font-size:12.5px; color:var(--texto-2); }
.zm-cita-plan-medios{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:8px 10px; border-radius:12px; background:var(--solido); border:1px solid var(--linea); }
.zm-cita-plan-medios__eti{ font-size:12.5px; font-weight:500; margin-right:4px; }

/* Notas: a la vista y a todo lo ancho, porque son lo que la persona pidió. */
.zm-cita-notas{ margin:10px 0 4px; padding:10px 14px; border-left:3px solid var(--acento); background:var(--solido-2); border-radius:0 12px 12px 0;
  white-space:pre-wrap; font-size:14px; line-height:1.45; color:var(--texto); }
.zm-cita-notas small{ display:block; margin-bottom:2px; font-size:11.5px; color:var(--texto-3); }

/* Datos esenciales en una grilla de dos columnas; lo demás, plegado. */
.zm-cita-datos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:0 24px; margin-top:8px; }
.zm-cita-datos .row span:first-child{ color:var(--texto-3); font-size:12.5px; }
.zm-cita-mas, .zm-cita-plegable{ border:1px solid var(--linea); border-radius:var(--r-chica); padding:0 14px; margin:12px 0 0; background:var(--solido); }
.zm-cita-mas > summary, .zm-cita-plegable > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0; font-size:13.5px; font-weight:500; color:var(--texto); }
.zm-cita-mas > summary::-webkit-details-marker, .zm-cita-plegable > summary::-webkit-details-marker{ display:none; }
.zm-cita-mas > summary::after, .zm-cita-plegable > summary::after{ content:'+'; font-size:16px; color:var(--texto-3); }
.zm-cita-mas[open] > summary::after, .zm-cita-plegable[open] > summary::after{ content:'–'; }
.zm-cita-mas[open] > summary, .zm-cita-plegable[open] > summary{ border-bottom:1px solid var(--linea); }
.zm-cita-mas > .row:last-child{ border-bottom:0; }
.zm-cita-plegable > .saldo-paciente{ margin:10px 0 12px; }
.zm-cita-plegable > .saldo-paciente > .saldo-paciente-cabeza h3{ display:none; }
.zm-cita__lateral .pagos-historial > p.muted{ font-size:12.5px; margin:4px 0; }

@media(max-width:1100px){ .zm-cita__cuerpo{ grid-template-columns:minmax(0,1fr); } }
@media(max-width:820px){
  .modal.zm-cita-modal{ max-height:calc(100vh - 90px); max-height:calc(100dvh - 90px); }
  .modal.zm-cita-modal > h2{ padding:14px 56px 10px 16px; }
  .zm-cita__cuerpo{ padding:12px 16px 20px; }
  .modal.zm-cita-modal > .modal-actions{ padding:10px 16px; }
  .zm-cita-pago__valor{ font-size:19px; }
}
@media(max-width:700px){ .modal.zm-cita-modal{ display:block; max-height:none; overflow:visible; } }
@media (prefers-reduced-motion: reduce){ .zm-cita-pago, .zm-cita-plegable, .zm-cita-mas{ transition:none; } }
/* La fila «Abonado / Saldo» repite lo que ya dice la tesela: sigue en el DOM (la leen las pruebas) sin pintarse. */
.zm-cita-arriba .zm-cita-abono-fila{ display:none; }
/* ── fin zm · ficha de cita v333 ── */

/* ── zm · ficha de cita v334 ── */
/* v334 · CABECERA AZUL NOCHE Y PAGO FLOTANTE (Jaime, 27-oct-2026: «más moderno y más notorio a
   primer ojo, sobre todo cuando se agenda un tratamiento del plan»). Elegida entre tres maquetas:
   la cabecera en azul noche dice cuándo, quién, qué y en qué estado; la tarjeta del pago flota
   sobre su borde; el plan se lee como un recorrido (lo hecho, esta cita, lo que viene) con sus
   cifras y una barra por tratamiento. El azul noche es el único color literal permitido aquí
   (es la marca); el resto son tokens vivos. */
.zm-cita-modal{ --zm-noche-1:#071331; --zm-noche-2:#0D1C45; --zm-palido:#ADBCFC;
  --zm-cita-sombra:0 1px 2px rgba(7,19,49,.06), 0 12px 32px -12px rgba(7,19,49,.18);
  --zm-cita-sombra-alta:0 2px 4px rgba(7,19,49,.08), 0 28px 60px -20px rgba(7,19,49,.35);
  --zm-ambar:#B7791F; }
.modal.zm-cita-modal > h2{ background:var(--zm-noche-1); color:rgba(255,255,255,.62); border-bottom:0; }
.modal.zm-cita-modal > .close-x{ background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.16); border-radius:999px; width:36px; height:36px; }
.zm-cita__cuerpo{ display:block; padding:0; }
.zm-cita__grilla{ display:grid; grid-template-columns:minmax(0,1fr) 400px; grid-template-areas:"principal ladoA" "principal ladoB";
  grid-template-rows:auto 1fr; gap:20px 28px; align-items:start; padding:0 28px 28px; }
.zm-cita__principal{ grid-area:principal; min-width:0; display:flex; flex-direction:column; gap:18px; padding-top:22px; }
.zm-cita__lado--arriba{ grid-area:ladoA; position:relative; z-index:2; margin-top:-212px; display:flex; flex-direction:column; gap:14px; min-width:0; }
.zm-cita__lado--abajo{ grid-area:ladoB; display:flex; flex-direction:column; gap:12px; min-width:0; }

/* ---------- Cabecera azul noche ---------- */
.zm-cita-banda{ position:relative; display:grid; grid-template-columns:auto auto minmax(0,1fr);
  grid-template-areas:"estado chips chips" "cuando cuando cuando" "persona persona persona" "trat trat trat" "meta meta meta" "reag reag reag";
  align-items:center; gap:6px 10px; padding:6px 460px 30px 28px; color:#fff;
  background:radial-gradient(640px 260px at 82% 0, rgba(173,188,252,.20), transparent 70%), linear-gradient(160deg,var(--zm-noche-1),var(--zm-noche-2)); }
.zm-cita-banda .zm-ag-det{ display:contents; }
.zm-cita-banda .zm-ag-det__estado{ grid-area:estado; margin:0; display:flex; gap:8px; align-items:center; }
.zm-cita-banda .zm-ag-det__estado .zm-estado{ height:32px; padding:0 13px; border-radius:999px; font-size:13px; font-weight:600; color:#fff;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); }
.zm-cita-banda .zm-ag-det__estado[data-estado="atendida"] .zm-estado, .zm-cita-banda .zm-ag-det__estado[data-estado="confirmada"] .zm-estado{ background:rgba(31,138,91,.22); border-color:rgba(126,217,168,.45); color:#BFF0D4; }
.zm-cita-banda .zm-ag-det__estado[data-estado="cancelada"] .zm-estado, .zm-cita-banda .zm-ag-det__estado[data-estado="no_asistio"] .zm-estado{ background:rgba(192,57,43,.24); border-color:rgba(241,156,145,.45); color:#FFD3CC; }
.zm-cita-banda .zm-ag-det__estado .zm-estado::before{ background:currentColor; }
.zm-cita-banda .zm-ag-det__primera{ height:32px; display:inline-flex; align-items:center; padding:0 13px; border-radius:999px; font-size:13px; font-weight:600;
  color:#3A2600; background:#F4C76A; }
.zm-cita-banda__chips{ grid-area:chips; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.zm-cita-pildora-plan{ display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 15px; border-radius:999px; background:var(--zm-palido); color:var(--zm-noche-1);
  font-size:13.5px; font-weight:650; box-shadow:0 6px 18px -8px rgba(173,188,252,.8); }
.zm-cita-chip-vidrio{ display:inline-flex; align-items:center; height:30px; padding:0 12px; border-radius:999px; font-size:12.5px; color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); font-variant-numeric:tabular-nums; }
.zm-cita-banda .zm-ag-det__cuando{ grid-area:cuando; margin:10px 0 0; font-size:38px; font-weight:650; letter-spacing:-.035em; line-height:1.08; color:#fff; font-variant-numeric:tabular-nums; }
.zm-cita-banda .zm-ag-det__sep{ color:rgba(255,255,255,.35); }
.zm-cita-banda .zm-ag-det__hora{ color:var(--zm-palido); }
.zm-cita-banda .zm-ag-det__paciente{ grid-area:persona; margin:10px 0 0; display:flex; align-items:center; gap:12px; font-size:20px; font-weight:600; color:#fff; }
.zm-ag-det__ini{ display:none; }
.zm-cita-banda .zm-ag-det__ini{ display:grid; place-items:center; width:42px; height:42px; border-radius:999px; flex:0 0 auto; font-size:14px; font-weight:600; letter-spacing:.02em;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); color:#fff; }
.zm-cita-banda .zm-ag-det__ficha{ color:#fff; }
.zm-cita-banda .zm-ag-det__ficha svg{ color:rgba(255,255,255,.55); }
.zm-cita-banda .zm-ag-det__trat{ grid-area:trat; margin:0 0 0 54px; font-size:14.5px; color:rgba(255,255,255,.72); }
.zm-cita-meta{ grid-area:meta; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px 18px; margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.10); }
.zm-cita-meta__celda{ display:flex; align-items:flex-start; gap:10px; min-width:0; }
.zm-cita-meta__ico{ display:grid; place-items:center; width:30px; height:30px; flex:0 0 auto; border-radius:10px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:var(--zm-palido); }
.zm-cita-meta__celda small{ display:block; font-size:11.5px; color:rgba(255,255,255,.55); }
.zm-cita-meta__celda b{ display:block; font-size:13.5px; font-weight:500; color:#fff; overflow-wrap:anywhere; }
.zm-cita-reagendada{ grid-area:reag; margin:12px 0 0; justify-self:start; display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; padding:7px 12px; border-radius:12px;
  font-size:12.5px; color:rgba(255,255,255,.78); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }
.zm-cita-reagendada b{ color:#fff; font-weight:600; }

/* ---------- Pago flotante ---------- */
.zm-cita-pagobox{ margin:0 !important; }
.zm-cita__lado--arriba .zm-cita-pago{ position:relative; overflow:hidden; margin:0; padding:20px 20px 18px; gap:12px; border-radius:24px; border:1px solid var(--linea);
  background:var(--solido); box-shadow:var(--zm-cita-sombra-alta); }
.zm-cita__lado--arriba .zm-cita-pago::before{ content:''; position:absolute; inset:0 0 auto 0; height:4px; background:var(--texto-3); }
.zm-cita__lado--arriba .zm-cita-pago[data-tono="mal"]::before{ background:var(--danger); }
.zm-cita__lado--arriba .zm-cita-pago[data-tono="ok"]::before{ background:var(--ok); }
.zm-cita__lado--arriba .zm-cita-pago[data-tono="aviso"]::before{ background:var(--zm-ambar); }
.zm-cita__lado--arriba .zm-cita-pago[data-tono]{ background:var(--solido); border-color:var(--linea); }
.zm-cita-pago__cabeza{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.zm-cita-pago__estado{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:999px; font-size:12px; font-weight:600;
  color:var(--danger); background:color-mix(in srgb,var(--danger) 10%,var(--solido)); }
.zm-cita-pago__estado::before{ content:''; width:6px; height:6px; border-radius:999px; background:currentColor; }
.zm-cita-pago[data-tono="ok"] .zm-cita-pago__estado{ color:var(--ok); background:color-mix(in srgb,var(--ok) 12%,var(--solido)); }
.zm-cita-pago[data-tono="aviso"] .zm-cita-pago__estado{ color:var(--zm-ambar); background:color-mix(in srgb,var(--zm-ambar) 12%,var(--solido)); }
.zm-cita__lado--arriba .zm-cita-pago__valor{ display:flex; align-items:center; gap:10px; font-size:44px; font-weight:700; letter-spacing:-.035em; line-height:1.05; }
.zm-cita__lado--arriba .zm-cita-pago[data-tono="mal"] .zm-cita-pago__valor{ color:var(--texto); }
.zm-cita__lado--arriba .zm-cita-pago[data-tono="aviso"] .zm-cita-pago__valor{ color:var(--texto); }
.zm-cita__lado--arriba .zm-cita-pago[data-tono="ok"] .zm-cita-pago__valor svg{ width:30px; height:30px; padding:6px; border-radius:999px; color:#fff; background:var(--ok); box-sizing:content-box; }
.zm-cita__lado--arriba .zm-cita-pago__sub{ font-size:13px; }
.zm-cita__lado--arriba .zm-cita-pago__acciones{ padding-top:2px; }
/* Cobro del plan dentro del pago: un solo tratamiento = botón grande a lo ancho */
.zm-cita__lado--arriba .zm-cita-plan-cobro{ border-top:0; padding-top:0; }
.zm-cita__lado--arriba .zm-cita-plan-linea{ flex-direction:column; align-items:stretch; gap:8px; }
.zm-cita__lado--arriba .zm-cita-plan-cobro:has(> .zm-cita-plan-linea:only-of-type) .zm-cita-plan-linea__nombre{ display:none; }
.zm-cita__lado--arriba .zm-cita-plan-linea > .btn.gold{ min-height:50px; font-size:15px; font-weight:600; width:100%; justify-content:center; box-shadow:0 10px 24px -12px rgba(var(--acento-rgb),.75); }
.zm-cita__lado--arriba .zm-cita-plan-medios{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:10px; border-radius:16px; background:var(--solido-2); border:0; }
.zm-cita__lado--arriba .zm-cita-plan-medios__eti{ grid-column:1/-1; }
.zm-cita__lado--arriba .zm-cita-plan-medios .btn{ justify-content:center; min-height:38px; background:var(--solido); }
.zm-cita__lado--arriba .zm-cita-plan-medios input, .zm-cita__lado--arriba .zm-cita-plan-medios select{ grid-column:span 3; width:100% !important; }
/* Registrar pago de la cita normal: el principal, a lo ancho, dentro del lado */
.zm-cita-cobro{ margin:0 !important; }
.zm-cita-cobro > div:first-child{ display:grid !important; grid-template-columns:1fr; gap:8px !important; }
.zm-cita-cobro > div:first-child > .btn.gold{ min-height:50px; font-size:15px; font-weight:600; justify-content:center; box-shadow:0 10px 24px -12px rgba(var(--acento-rgb),.75); }
.zm-cita-cobro > div:first-child > .btn{ justify-content:center; }
.zm-cita__lado--arriba > div[style*="dashed"], .zm-cita__lado--arriba > div[style*="solid var(--line)"]{ margin-top:0 !important; border:1px solid var(--linea) !important; border-radius:20px !important;
  padding:16px !important; background:var(--solido); box-shadow:var(--zm-cita-sombra); }
.zm-cita__lado--arriba .hint[role="alert"]{ margin:0 !important; }

/* ---------- Recorrido del plan ---------- */
.zm-cita-plan{ position:relative; display:flex; flex-direction:column; gap:16px; padding:22px 22px 18px; border-radius:24px; border:1px solid var(--linea);
  background:linear-gradient(180deg, color-mix(in srgb,var(--acento-suave) 70%,var(--solido)) 0, var(--solido) 140px); box-shadow:var(--zm-cita-sombra); }
.zm-cita-plan__cabeza{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; }
.zm-cita-plan__titulo{ min-width:0; flex:1 1 320px; }
.zm-cita-plan__ceja{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:0; font-size:12.5px; font-weight:500; color:var(--acento); }
.zm-cita-plan__etapa{ display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:999px; font-size:11.5px; font-weight:600; color:var(--acento-tinta); background:var(--acento); }
.zm-cita-plan__titulo h4{ margin:6px 0 0; font-size:22px; font-weight:600; letter-spacing:-.025em; line-height:1.25; color:var(--texto); }
.zm-cita-plan__titulo h4 em{ font-style:normal; color:var(--acento); }
.zm-cita-plan__contadores{ display:flex; gap:8px; flex-wrap:wrap; }
.zm-cita-plan__contador{ display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 13px; border-radius:999px; font-size:13px; color:var(--texto-2);
  background:var(--solido); border:1px solid var(--linea); box-shadow:0 1px 2px rgba(7,19,49,.05); }
.zm-cita-plan__contador b{ color:var(--texto); font-weight:600; font-variant-numeric:tabular-nums; }
.zm-cita-plan__puntos{ display:inline-flex; gap:3px; }
.zm-cita-plan__puntos i{ width:7px; height:7px; border-radius:999px; background:var(--linea); }
.zm-cita-plan__puntos[data-tono="acento"] i.si{ background:var(--acento); }
.zm-cita-plan__puntos[data-tono="ok"] i.si{ background:var(--ok); }
.zm-cita-plan__pasos{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; position:relative; }
.zm-cita-plan__paso{ position:relative; display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:14px; padding:14px 16px; border-radius:18px;
  background:var(--solido-2); border:1px solid transparent; transition:transform .15s var(--sal), box-shadow .15s ease; }
.zm-cita-plan__paso:not(:last-child)::after{ content:''; position:absolute; left:34px; top:calc(50% + 20px); height:calc(50% - 10px + 10px); width:2px;
  background:repeating-linear-gradient(to bottom, var(--linea) 0 4px, transparent 4px 8px); }
.zm-cita-plan__paso[data-hecho="si"]:not(:last-child)::after{ background:var(--acento); }
.zm-cita-plan__paso[data-esta="si"]{ background:var(--solido); border:1.5px solid var(--acento); box-shadow:0 12px 28px -14px color-mix(in srgb,var(--acento) 45%,transparent); }
.zm-cita-plan__paso[data-esta="si"] .zm-cita-plan__nodo{ box-shadow:0 0 0 4px var(--solido), 0 0 0 6px var(--acento); }
.zm-cita-plan__nodo{ display:grid; place-items:center; width:36px; height:36px; border-radius:999px; font-size:14px; font-weight:600; color:var(--texto-2);
  background:var(--solido); border:1.5px dashed var(--texto-3); position:relative; z-index:1; }
.zm-cita-plan__paso[data-hecho="si"] .zm-cita-plan__nodo{ background:var(--acento); color:#fff; border:0; }
.zm-cita-plan__nombre{ margin:0; font-size:15px; font-weight:600; color:var(--texto); line-height:1.3; }
.zm-cita-plan__paso:not([data-esta="si"]):not([data-hecho="si"]) .zm-cita-plan__nombre{ color:var(--texto-2); }
.zm-cita-plan__estado{ margin:4px 0 0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; color:var(--texto-2); }
.zm-cita-plan__marca{ display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:999px; font-size:11.5px; font-weight:600; color:#fff; background:var(--acento); }
.zm-cita-plan__marca--viene{ color:var(--acento); background:var(--acento-suave); }
.zm-cita-plan__dinero{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.zm-cita-plan__dinero b{ font-size:15.5px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--texto); }
.zm-cita-plan__pago{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:999px; font-size:12px; font-weight:600; color:var(--texto-2); background:var(--solido); border:1px solid var(--linea); }
.zm-cita-plan__pago::before{ content:''; width:6px; height:6px; border-radius:999px; background:currentColor; }
.zm-cita-plan__pago[data-tono="ok"]{ color:var(--ok); background:color-mix(in srgb,var(--ok) 10%,var(--solido)); border-color:transparent; }
.zm-cita-plan__pago[data-tono="mal"]{ color:var(--danger); background:color-mix(in srgb,var(--danger) 9%,var(--solido)); border-color:transparent; }
.zm-cita-plan__pago[data-tono="aviso"]{ color:var(--zm-ambar); background:color-mix(in srgb,var(--zm-ambar) 12%,var(--solido)); border-color:transparent; }
.zm-cita-plan__dinerobanda{ display:flex; align-items:center; gap:14px 24px; flex-wrap:wrap; padding:14px 16px; border-radius:16px; background:var(--solido); border:1px solid var(--linea); }
.zm-cita-plan__cifras{ display:flex; gap:22px; flex-wrap:wrap; }
.zm-cita-plan__cifras small{ display:block; font-size:11.5px; color:var(--texto-3); }
.zm-cita-plan__cifras b{ font-size:17px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.zm-cita-plan__ok{ color:var(--ok); }
.zm-cita-plan__barra{ flex:1 1 220px; display:flex; gap:4px; min-width:160px; }
.zm-cita-plan__barra span{ height:8px; border-radius:999px; background:var(--solido-2); border:1px solid var(--linea); overflow:hidden; flex-basis:0; }
.zm-cita-plan__barra i{ display:block; height:100%; background:var(--ok); border-radius:999px; }
/* El pie del plan (botón al plan completo) se pega a la tarjeta */
.zm-cita-plan .zm-cita-plan-pie{ display:flex; align-items:center; justify-content:space-between; gap:10px 14px; flex-wrap:wrap; margin:0; padding:12px 0 0; background:none; border:0; border-top:1px solid var(--linea); border-radius:0; }
.zm-cita-plan-pie__txt{ font-size:12.5px; color:var(--texto-2); }
.zm-cita-plan .zm-cita-plan-pie__btn{ background:var(--acento-suave); color:var(--acento); border-color:transparent; }
.zm-cita-plan-desglose{ flex:1 1 100%; }
.zm-cita-plan-desglose > summary{ cursor:pointer; font-size:12.5px; color:var(--texto-3); list-style:none; }
.zm-cita-plan-desglose > summary::-webkit-details-marker{ display:none; }
.zm-cita-plan-desglose > summary::before{ content:'+ '; }
.zm-cita-plan-desglose[open] > summary::before{ content:'– '; }

/* ---------- Notas, consentimiento, servicios, más datos ---------- */
.zm-cita-detalles{ display:flex; flex-direction:column; gap:16px; margin:0 !important; }
.zm-cita-par{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.zm-cita-tarjeta{ padding:16px 18px; border-radius:20px; border:1px solid var(--linea); background:var(--solido); box-shadow:var(--zm-cita-sombra); min-width:0; }
.zm-cita-tarjeta__titulo{ display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:14px; font-weight:600; color:var(--texto); }
.zm-cita-tarjeta__titulo svg{ color:var(--acento); }
.zm-cita-notas-txt{ margin:0; padding:10px 12px; border-left:3px solid var(--acento); border-radius:0 12px 12px 0; background:var(--solido-2); white-space:pre-wrap; font-size:14px; line-height:1.45; color:var(--texto); }
.zm-cita-tarjeta--consent > .row{ flex-direction:column; align-items:flex-start; gap:8px; border:0; padding:0; }
.zm-cita-tarjeta--consent > .row > span:first-child{ font-size:14px; font-weight:600; color:var(--texto); }
.zm-cita-tarjeta--consent > .row > b{ justify-content:flex-start; }
.zm-cita-detalles > .agenda-servicios{ padding:16px 18px; border-radius:20px; border:1px solid var(--linea); background:var(--solido); box-shadow:var(--zm-cita-sombra); margin:0; }
.zm-cita-serv-plan{ align-self:center; padding:4px 10px; border-radius:999px; font-size:12px; color:var(--acento); background:var(--acento-suave); white-space:nowrap; }
.zm-cita-detalles > .zm-cita-mas{ margin:0; }
.zm-cita-detalles > .row{ padding:12px 16px; border:1px solid var(--linea) !important; border-radius:16px; background:var(--solido); }

/* ---------- Abonos y saldo: filas plegables ---------- */
.zm-cita__lado--abajo .pagos-historial, .zm-cita__lado--abajo .zm-cita-plegable, .zm-cita__lado--abajo .cuotas-panel{ border-radius:18px; box-shadow:var(--zm-cita-sombra); background:var(--solido); }

/* ---------- Pie ---------- */
.modal.zm-cita-modal > .modal-actions .zm-cita-pie__espacio{ flex:1 1 auto; }

/* ---------- Anchos ---------- */
@media(max-width:1100px){
  .zm-cita__grilla{ grid-template-columns:minmax(0,1fr) 360px; }
  .zm-cita-banda{ padding-right:400px; }
  .zm-cita-banda .zm-ag-det__cuando{ font-size:32px; }
}
@media(max-width:920px){
  .zm-cita__grilla{ grid-template-columns:minmax(0,1fr); grid-template-areas:"ladoA" "principal" "ladoB"; padding:0 16px 20px; }
  .zm-cita__lado--arriba{ margin-top:-30px; }
  .zm-cita__principal{ padding-top:0; }
  .zm-cita-banda{ padding:6px 20px 48px; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"estado estado" "chips chips" "cuando cuando" "persona persona" "trat trat" "meta meta" "reag reag"; }
}
@media(max-width:520px){
  .zm-cita-banda .zm-ag-det__cuando{ font-size:26px; }
  .zm-cita-banda .zm-ag-det__sep{ display:none; }
  .zm-cita-banda .zm-ag-det__hora{ display:block; }
  .zm-cita-meta{ grid-template-columns:1fr 1fr; }
  .zm-cita-banda .zm-ag-det__trat{ margin-left:0; }
  .zm-cita__lado--arriba .zm-cita-pago__valor{ font-size:36px; }
  .zm-cita-plan{ padding:16px 14px; }
  .zm-cita-plan__paso{ grid-template-columns:34px minmax(0,1fr); }
  .zm-cita-plan__dinero{ grid-column:2; flex-direction:row; align-items:center; justify-content:space-between; }
  .zm-cita-plan__titulo h4{ font-size:19px; }
  .modal.zm-cita-modal > .modal-actions{ display:grid; grid-template-columns:1fr 1fr; }
  .modal.zm-cita-modal > .modal-actions .zm-cita-pie__espacio{ display:none; }
}

/* ---------- Noche ---------- */
html[data-theme="dark"] .modal.zm-cita-modal > h2{ background:var(--zm-noche-2); }
html[data-theme="dark"] .zm-cita-banda{ background:var(--zm-noche-2); border-bottom:1px solid rgba(173,188,252,.25); }
html[data-theme="dark"] .zm-cita__lado--arriba .zm-cita-pago, html[data-theme="dark"] .zm-cita-plan, html[data-theme="dark"] .zm-cita-tarjeta,
html[data-theme="dark"] .zm-cita-detalles > .agenda-servicios{ border-color:rgba(173,188,252,.16); box-shadow:0 2px 4px rgba(0,0,0,.35), 0 24px 50px -24px rgba(0,0,0,.7); }
html[data-theme="dark"] .zm-cita-plan{ background:linear-gradient(180deg, rgba(173,188,252,.10) 0, var(--solido) 140px); }
html[data-theme="dark"] .zm-cita-plan__paso{ background:rgba(173,188,252,.06); }
html[data-theme="dark"] .zm-cita-plan__paso[data-esta="si"]{ background:var(--solido); }
html[data-theme="dark"] .zm-cita-plan__paso[data-hecho="si"] .zm-cita-plan__nodo{ color:var(--zm-noche-1); }
html[data-theme="dark"] .zm-cita-plan__marca{ color:var(--zm-noche-1); }
html[data-theme="dark"] .zm-cita__lado--arriba .zm-cita-plan-linea > .btn.gold, html[data-theme="dark"] .zm-cita-cobro > div:first-child > .btn.gold{ color:var(--zm-noche-1); }
html[data-theme="dark"] .zm-cita-plan__marca--viene{ color:var(--zm-palido); background:rgba(173,188,252,.14); }
@media (prefers-reduced-motion: reduce){ .zm-cita-plan__paso{ transition:none; } }
@media (hover:hover) and (pointer:fine){ .zm-cita-plan__paso:hover{ transform:translateY(-1px); } }
/* v335 · Las sesiones de una línea del plan: «Sesión 1 de 3 · quedan 2» y una marca por
   sesión (realizada, esta cita, pendiente). Sin montos: la ve también quien no cobra. */
.zm-cita-plan__sesion{ display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:999px; font-size:11.5px; font-weight:600;
  color:var(--texto); background:var(--solido); border:1px solid var(--linea); font-variant-numeric:tabular-nums; }
.zm-cita-plan__paso[data-esta="si"] .zm-cita-plan__sesion{ color:var(--acento); border-color:color-mix(in srgb,var(--acento) 35%,transparent); background:var(--acento-suave); }
.zm-cita-plan__sesbarra{ display:flex; flex-wrap:wrap; gap:4px; margin:8px 0 0; }
.zm-cita-plan__sesbarra i{ width:18px; height:6px; border-radius:999px; background:var(--solido); border:1px solid var(--linea); }
.zm-cita-plan__sesbarra i[data-s="hecha"]{ background:var(--ok); border-color:transparent; }
.zm-cita-plan__sesbarra i[data-s="esta"]{ background:var(--acento); border-color:transparent; box-shadow:0 0 0 2px color-mix(in srgb,var(--acento) 22%,transparent); }
.zm-cita-plan__sesbarra i[data-s="esta-hecha"]{ background:var(--ok); border-color:transparent; box-shadow:0 0 0 2px color-mix(in srgb,var(--acento) 40%,transparent); }
@media (max-width:560px){ .zm-cita-plan__sesbarra i{ width:14px; } }
html[data-theme="dark"] .zm-cita-plan__paso[data-esta="si"] .zm-cita-plan__sesion{ color:var(--zm-palido); background:rgba(173,188,252,.14); }
/* v336 · La ventana un 20 % más chica (Jaime, 28-oct-2026) y el paso a la cita siguiente. */
.modal.zm-cita-modal{ max-width:min(1184px, 100%); max-height:calc(80vh + 0px); max-height:min(calc(100dvh - 48px), 80dvh); }
.modal-bg:has(> .modal.zm-cita-modal){ align-items:center; }
.zm-cita__grilla{ grid-template-columns:minmax(0,1fr) 360px; gap:18px 24px; }
.zm-cita-banda{ padding-right:410px; }
.zm-cita-banda .zm-ag-det__cuando{ font-size:32px; }
.zm-cita__lado--arriba .zm-cita-pago__valor{ font-size:38px; }
.zm-cita-navega{ display:inline-flex; align-items:center; gap:8px; margin-left:4px; }
.zm-cita-navega__ant{ width:40px; padding:0 !important; justify-content:center; }
.zm-cita-navega__sig{ gap:10px; }
.zm-cita-navega__txt{ display:inline-flex; flex-direction:column; align-items:flex-start; line-height:1.1; }
.zm-cita-navega__txt small{ font-size:11px; font-weight:400; opacity:.8; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media(max-width:1100px){ .zm-cita__grilla{ grid-template-columns:minmax(0,1fr) 330px; } .zm-cita-banda{ padding-right:370px; } }
@media(max-width:920px){ .zm-cita-banda{ padding-right:20px; } .modal.zm-cita-modal{ max-height:calc(100dvh - 90px); } }
@media(max-width:520px){ .zm-cita-navega{ grid-column:1/-1; margin:0; } .zm-cita-navega__sig{ flex:1; justify-content:space-between; } }
html[data-theme="dark"] .zm-cita-navega__sig{ color:var(--zm-noche-1); }
/* ── fin zm · ficha de cita v334 ── */

/* ── zm · ficha v336 ── */
/* v336 · FICHA DEL PACIENTE «EXPEDIENTE», con el estilo de la cita v334 (Jaime, 27-oct-2026:
   «información básica al ojo, la secundaria se despliega; las citas no están claras: qué se
   hizo y con quién; el resumen no puede ir casi al final; los planes más claros»).
   Banda azul noche con quién es y sus acciones; tres teselas que flotan sobre su borde; a la
   izquierda lo primordial (resumen, plan como recorrido y la línea de vida de las citas) y a
   la derecha un riel con lo secundario plegado. Solo tokens: los únicos literales son los de
   marca (--zm-noche-1/2 y --zm-palido), declarados una vez aquí, como en la cita. */
.zm-pf--v336{ --zm-noche-1:#071331; --zm-noche-2:#0D1C45; --zm-palido:#ADBCFC;
  --zm-ambar:var(--gold); --zm-pf-claro:white;
  --zm-pf-sombra:0 1px 2px color-mix(in srgb,var(--zm-noche-1) 6%,transparent), 0 14px 36px -14px color-mix(in srgb,var(--zm-noche-1) 30%,transparent);
  --zm-pf-sombra-2:0 1px 2px color-mix(in srgb,var(--zm-noche-1) 4%,transparent), 0 6px 18px -10px color-mix(in srgb,var(--zm-noche-1) 22%,transparent);
  --zm-pf-borde:color-mix(in srgb,var(--linea) 62%,transparent);
  --zm-pf-vidrio:color-mix(in srgb,var(--zm-pf-claro) 6%,transparent);
  --zm-pf-vidrio-borde:color-mix(in srgb,var(--zm-pf-claro) 20%,transparent);
  --zm-pf-tenue-claro:color-mix(in srgb,var(--zm-pf-claro) 58%,transparent);
  --zm-pf-barra-alto:64px; }

/* ---------- La ventana: todo se desplaza junto (la banda se va y deja la barra) ---------- */
.modal.zm-pf-modal--v336{ max-width:1240px; padding:0; display:flex; flex-direction:column; overflow:hidden;
  max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px); background:var(--solido); }
.modal.zm-pf-modal--v336 > .close-x{ top:18px; right:18px; z-index:8; width:36px; height:36px; border-radius:999px; color:var(--zm-pf-claro, white);
  background:color-mix(in srgb,white 8%,transparent); border:1px solid color-mix(in srgb,white 18%,transparent); }
.zm-pf--v336{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.zm-pf--v336 .zm-pf-scroll{ position:relative; flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; background:var(--solido); }
.zm-pf--v336 .zm-pf-cabeza{ position:relative; z-index:2; padding:0; background:transparent; border:0; }

/* ---------- Banda azul noche ---------- */
.zm-pf--v336 .zm-pf-banda{ position:relative; padding:20px 32px 92px; color:var(--zm-pf-claro);
  background:radial-gradient(640px 280px at 84% -10%, color-mix(in srgb,var(--zm-palido) 22%,transparent), transparent 70%), linear-gradient(160deg,var(--zm-noche-1),var(--zm-noche-2)); }
.zm-pf--v336 .zm-pf-banda--carga{ padding-bottom:28px; }
.zm-pf-banda__rotulo{ margin:0 56px 0 0; font-size:13px; color:var(--zm-pf-tenue-claro); }
.zm-pf--v336 .zm-pf-archivado{ color:var(--zm-pf-claro); margin:0 56px 10px 0; }
.zm-pf-pildoras{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; }
.zm-pf-pildora{ display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 13px; border-radius:999px; font-size:13px; font-weight:500; white-space:nowrap;
  color:color-mix(in srgb,var(--zm-pf-claro) 84%,transparent); background:var(--zm-pf-vidrio); border:1px solid var(--zm-pf-vidrio-borde); }
.zm-pf-pildora[data-tono="ok"]{ color:color-mix(in srgb,var(--ok) 22%,white); background:color-mix(in srgb,var(--ok) 24%,transparent); border-color:color-mix(in srgb,var(--ok) 55%,transparent); }
.zm-pf-pildora[data-tono="ok"]::before{ content:''; width:7px; height:7px; border-radius:999px; background:color-mix(in srgb,var(--ok) 60%,white); }
.zm-pf--v336 .zm-pf-pildoras .zm-cita-pildora-plan{ border:0; cursor:pointer; height:30px; font-family:inherit; }
.zm-pf--v336 .zm-pf-banda .zm-origen{ margin:0; display:inline-flex; align-items:center; height:30px; padding:0 12px; border-radius:999px; font-size:12.5px;
  color:color-mix(in srgb,var(--zm-pf-claro) 78%,transparent); background:var(--zm-pf-vidrio); border:1px solid color-mix(in srgb,var(--zm-pf-claro) 14%,transparent); }
.zm-pf--v336 .zm-pf-banda .zm-origen__etiqueta, .zm-pf--v336 .zm-pf-banda .zm-origen__motivo{ display:none; }
.zm-pf--v336 .zm-pf-banda .zm-origen__linea{ flex:0 1 auto; align-items:center; gap:6px; }
.zm-pf--v336 .zm-pf-banda .zm-origen__ico{ color:inherit; margin:0; }
.zm-pf--v336 .zm-pf-banda .zm-origen__parte:first-child, .zm-pf--v336 .zm-pf-banda .zm-origen__parte--campana{ color:var(--zm-pf-claro); }
.zm-pf--v336 .zm-pf-banda .zm-origen__parte + .zm-origen__parte::before{ color:var(--zm-pf-tenue-claro); }
.zm-pf-quien{ display:flex; align-items:center; gap:16px; margin-top:18px; min-width:0; }
.zm-pf--v336 .zm-pf-mono{ width:58px; height:58px; border-radius:999px; font-size:19px; font-weight:600; color:color-mix(in srgb,var(--zm-palido) 40%,white);
  background:linear-gradient(145deg,color-mix(in srgb,var(--zm-palido) 34%,var(--zm-noche-2)),var(--zm-noche-2)); border:1px solid var(--zm-pf-vidrio-borde); }
.modal .zm-pf--v336 h2.zm-pf-nombre{ font-size:34px; font-weight:650; letter-spacing:-.032em; line-height:1.08; color:var(--zm-pf-claro); }
.zm-pf--v336 .zm-pf-banda .zm-pf-sub{ margin-top:6px; font-size:15px; color:color-mix(in srgb,var(--zm-pf-claro) 72%,transparent); }
.zm-pf--v336 .zm-pf-banda .zm-pf-sub b{ color:var(--zm-pf-claro); font-weight:600; }
.zm-pf--v336 .zm-pf-banda .zm-pf-sub > span:not(:last-child)::after{ color:var(--zm-pf-tenue-claro); }
.zm-pf--v336 .zm-pf-banda .zm-pf-sub .zm-estado{ color:color-mix(in srgb,var(--zm-pf-claro) 80%,transparent); }
.zm-pf--v336 .zm-pf-banda .zm-pf-enlace{ color:var(--zm-pf-claro); text-decoration-color:var(--zm-pf-tenue-claro); }
.zm-pf--v336 .zm-pf-banda .zm-pf-alerta{ display:inline-flex; align-items:center; gap:8px; margin:14px 0 0; padding:7px 15px; border-radius:999px; font-size:13.5px; font-weight:500;
  color:color-mix(in srgb,var(--danger) 14%,white); background:color-mix(in srgb,var(--danger) 30%,transparent); border:1px solid color-mix(in srgb,var(--danger) 70%,white); }
.zm-pf--v336 .zm-pf-banda .zm-pf-alerta > svg{ color:inherit; margin:0; }
.zm-pf--v336 .zm-pf-banda .zm-pf-alerta b{ color:var(--zm-pf-claro); }
.zm-pf--v336 .zm-pf-banda .zm-pf-acciones{ justify-content:flex-start; margin-top:18px; gap:8px; }
html .zm-pf--v336 .zm-pf-banda .zm-pf-acciones > .btn, html[data-theme="dark"] .zm-pf--v336 .zm-pf-banda .zm-pf-acciones > .btn,
html .zm-pf--v336 .zm-pf-banda .zm-pf-acciones .zm-mas > summary, html[data-theme="dark"] .zm-pf--v336 .zm-pf-banda .zm-pf-acciones .zm-mas > summary,
html .zm-pf--v336 .zm-pf-barra .btn, html[data-theme="dark"] .zm-pf--v336 .zm-pf-barra .btn{
  min-height:40px; padding:0 16px; border-radius:999px; font-size:14px; font-weight:500; color:var(--zm-pf-claro); background:var(--zm-pf-vidrio);
  border:1px solid var(--zm-pf-vidrio-borde); box-shadow:none; }
html .zm-pf--v336 .zm-pf-banda .zm-pf-acciones > .btn.gold, html[data-theme="dark"] .zm-pf--v336 .zm-pf-banda .zm-pf-acciones > .btn.gold,
html .zm-pf--v336 .zm-pf-barra .btn.gold, html[data-theme="dark"] .zm-pf--v336 .zm-pf-barra .btn.gold{
  font-weight:600; color:var(--acento-tinta); background:var(--acento); border-color:var(--acento); box-shadow:0 10px 26px -8px color-mix(in srgb,var(--acento) 75%,transparent); }
html .zm-pf--v336[data-rol="clinico"] .zm-pf-banda .zm-pf-acciones > .btn.gold{ min-height:44px; padding:0 22px; font-size:15px; }
html .zm-pf--v336 .zm-pf-banda .zm-pf-acciones > .btn:disabled{ opacity:.5; }
@media (hover:hover) and (pointer:fine){ html .zm-pf--v336 .zm-pf-banda .zm-pf-acciones > .btn.ghost:hover:not(:disabled), html .zm-pf--v336 .zm-pf-banda .zm-mas > summary:hover{ background:color-mix(in srgb,var(--zm-pf-claro) 12%,transparent); } }
.zm-pf--v336 .zm-pf-banda .zm-mas{ position:relative; z-index:6; }
.zm-pf--v336 .zm-pf-banda .zm-pf-vinculo{ margin:12px 0 0; font-size:13px; color:color-mix(in srgb,var(--zm-pf-claro) 78%,transparent); }

/* ---------- Teselas que flotan sobre el borde de la banda ---------- */
.zm-pf-teselas{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr 1.15fr 1fr; gap:16px; padding:0 32px; margin-top:-64px; align-items:start; }
.zm-pf-teselas[data-n="2"]{ grid-template-columns:1fr 1fr; }
.zm-pf-teselas[data-n="4"]{ grid-template-columns:1fr 1.1fr 1fr 1fr; }
.zm-pf--v336 .zm-pf-tesela{ all:unset; box-sizing:border-box; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:stretch; gap:4px; min-width:0;
  padding:18px 20px 16px; border-radius:22px; background:var(--solido); color:var(--texto); border:1px solid var(--zm-pf-borde); box-shadow:var(--zm-pf-sombra); cursor:default; }
@media (hover:hover) and (pointer:fine){ .zm-pf--v336 .zm-pf-tesela:hover{ background:var(--solido); } }
.zm-pf--v336 .zm-pf-tesela:active{ transform:none; }
.zm-pf--v336 .zm-pf-tesela[data-tipo="cuenta"][data-tono="mal"]::before, .zm-pf--v336 .zm-pf-tesela[data-tipo="atender"]::before{ content:''; position:absolute; inset:0 0 auto 0; height:4px; background:var(--danger); }
.zm-pf--v336 .zm-pf-tesela[data-tipo="atender"]::before{ background:var(--acento); }
.zm-pf--v336 .zm-pf-tesela[data-tipo="cuenta"][data-tono="ok"] .zm-pf-tesela__valor{ color:var(--ok); }
.zm-pf-tesela__cabeza{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:24px; }
.zm-pf--v336 .zm-pf-tesela__eti{ font-size:12.5px; color:var(--texto-3); }
.zm-pf--v336 .zm-pf-tesela__valor{ margin:4px 0 0; font-size:26px; font-weight:600; letter-spacing:-.03em; line-height:1.12; white-space:normal; overflow:visible; }
.zm-pf--v336 .zm-pf-tesela__valor em{ font-style:normal; font-weight:500; color:var(--acento); }
.zm-pf--v336 .zm-pf-tesela__valor small{ font-size:14px; font-weight:500; letter-spacing:0; color:var(--texto-2); }
.zm-pf-tesela__unidad{ font-size:17px; font-weight:500; letter-spacing:-.01em; color:var(--texto); }
.zm-pf-tesela__unidad small{ display:block; margin-top:3px; }
.zm-pf-tesela__unidad .zm-pf-sep{ display:none; }
.zm-pf--v336 .zm-pf-tesela__valor--monto{ font-size:34px; font-weight:650; }
.zm-pf--v336 .zm-pf-tesela__sub{ margin:4px 0 0; font-size:13.5px; line-height:1.4; color:var(--texto-2); white-space:normal; overflow:visible; }
.zm-pf--v336 .zm-pf-tesela__sub b{ color:var(--texto); font-weight:600; }
.zm-pf-tesela__pie{ display:flex; align-items:center; gap:6px 10px; flex-wrap:wrap; margin:auto 0 0; padding-top:12px; font-size:12.5px; color:var(--texto-3); }
.zm-pf-tesela__pie b{ color:var(--texto-2); font-weight:600; }
.zm-pf-tesela__pie .zm-pf-enlace{ margin-left:auto; color:var(--acento); text-decoration:none; font-weight:500; }
.zm-pf-tesela__grande{ all:unset; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:44px; margin-top:12px;
  border-radius:999px; font-size:14.5px; font-weight:600; cursor:pointer; color:var(--acento-tinta); background:var(--acento);
  box-shadow:0 10px 24px -10px color-mix(in srgb,var(--acento) 70%,transparent); transition:transform .14s var(--sal), filter .18s ease; }
.zm-pf-tesela[data-tipo="atender"] .zm-pf-tesela__grande{ min-height:54px; font-size:16px; margin-top:10px; }
.zm-pf-tesela__grande:active:not(:disabled){ transform:scale(.98); }
.zm-pf-tesela__grande:disabled{ opacity:.45; cursor:not-allowed; }
.zm-pf-tesela__grande:focus-visible{ outline:2px solid var(--acento); outline-offset:3px; }
.zm-pf-tesela__atajos{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.zm-pf-atajo{ all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px; border-radius:999px; font-size:12.5px; font-weight:500; cursor:pointer;
  color:var(--texto); background:var(--solido); border:1px solid var(--linea); }
.zm-pf-atajo:disabled{ opacity:.45; cursor:not-allowed; }
.zm-pf-atajo:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
@media (hover:hover) and (pointer:fine){ .zm-pf-atajo:hover:not(:disabled){ background:var(--solido-2); } }
.zm-pf-tesela__ultima{ border-top:1px solid var(--zm-pf-borde); margin-top:12px; }
.zm-pf-seg{ display:flex; gap:4px; margin-top:10px; }
.zm-pf-seg > span{ display:flex; height:7px; border-radius:999px; overflow:hidden; background:color-mix(in srgb,var(--linea) 60%,transparent); }
.zm-pf-seg i{ display:block; height:100%; background:var(--acento); }
.zm-pf-seg i[data-a]{ background:repeating-linear-gradient(90deg,var(--acento) 0 5px,transparent 5px 9px); opacity:.55; }

/* ---------- Chips, avatares y personas ---------- */
.zm-pf-chip{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:999px; font-size:12px; font-weight:500; white-space:nowrap;
  color:var(--texto-2); background:var(--solido-2); border:1px solid transparent; font-family:inherit; }
.zm-pf-chip[data-tono="ok"]{ color:var(--ok); background:color-mix(in srgb,var(--ok) 12%,var(--solido)); }
.zm-pf-chip[data-tono="mal"]{ color:var(--danger); background:color-mix(in srgb,var(--danger) 10%,var(--solido)); }
.zm-pf-chip[data-tono="aviso"]{ color:color-mix(in srgb,var(--zm-ambar) 78%,var(--texto)); background:color-mix(in srgb,var(--zm-ambar) 16%,var(--solido)); }
.zm-pf-chip[data-tono="acento"]{ color:var(--acento); background:var(--acento-suave); }
.zm-pf-chip[data-tono="borde"]{ background:transparent; border-color:var(--linea); }
.zm-pf-chip[data-tono="hueco"]{ color:var(--texto-3); }
.zm-pf-chip[data-tono="ok"]::before, .zm-pf-chip[data-tono="mal"]::before, .zm-pf-chip[data-tono="aviso"]::before{ content:''; width:6px; height:6px; border-radius:999px; background:currentColor; }
.zm-pf-chip--boton{ cursor:pointer; }
.zm-pf-chip--boton::before{ display:none !important; }
.zm-pf-av{ display:inline-grid; place-items:center; flex:0 0 auto; width:30px; height:30px; border-radius:999px; font-size:11px; font-weight:650; letter-spacing:.02em;
  --av:var(--acento); color:var(--av); background:color-mix(in srgb,var(--av) 15%,var(--solido)); border:1px solid color-mix(in srgb,var(--av) 26%,transparent); }
.zm-pf-av[data-tono="1"]{ --av:var(--ok); }
.zm-pf-av[data-tono="2"]{ --av:var(--zm-ambar); }
.zm-pf-av[data-tono="3"]{ --av:var(--danger); }
.zm-pf-av[data-tono="4"]{ --av:var(--texto-2); }
.zm-pf-av--chico{ width:22px; height:22px; font-size:9px; }
.zm-pf-persona{ display:flex; align-items:center; gap:8px; margin:4px 0 0; min-width:0; }
.zm-pf-persona > span{ display:flex; flex-direction:column; min-width:0; font-size:13.5px; font-weight:500; line-height:1.2; color:var(--texto); }
.zm-pf-persona small{ font-size:11.5px; font-weight:400; color:var(--texto-3); }
.zm-pf-persona--linea{ display:inline-flex; margin:0; gap:7px; font-size:13px; color:var(--texto-2); }

/* ---------- Barra compacta (sale cuando la banda deja la vista) ---------- */
.zm-pf-barra{ position:sticky; top:0; z-index:7; height:var(--zm-pf-barra-alto); margin-bottom:calc(-1 * var(--zm-pf-barra-alto)); display:flex; align-items:center; gap:12px;
  padding:0 70px 0 22px; color:var(--zm-pf-claro); background:linear-gradient(180deg,var(--zm-noche-1),var(--zm-noche-2));
  box-shadow:0 10px 24px -16px color-mix(in srgb,var(--zm-noche-1) 70%,transparent);
  transform:translateY(-100%); opacity:0; pointer-events:none; transition:transform .22s var(--sal), opacity .18s ease; }
.zm-pf--v336[data-compacta="si"] .zm-pf-barra{ transform:none; opacity:1; pointer-events:auto; }
.zm-pf-barra__av{ display:grid; place-items:center; flex:0 0 auto; width:38px; height:38px; border-radius:999px; font-size:13px; font-weight:600; color:color-mix(in srgb,var(--zm-palido) 40%,white);
  background:color-mix(in srgb,var(--zm-palido) 22%,var(--zm-noche-2)); border:1px solid var(--zm-pf-vidrio-borde); }
.zm-pf-barra__quien{ display:flex; flex-direction:column; min-width:0; }
.zm-pf-barra__quien b{ font-size:16.5px; font-weight:600; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.zm-pf-barra__quien small{ font-size:12px; color:var(--zm-pf-tenue-claro); white-space:nowrap; }
.zm-pf-pildora--alergia{ height:28px; font-size:12.5px; font-weight:600; color:color-mix(in srgb,var(--danger) 14%,white); background:color-mix(in srgb,var(--danger) 30%,transparent); border-color:color-mix(in srgb,var(--danger) 70%,white); }
.zm-pf-pildora--cobro{ height:28px; font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit; color:var(--zm-noche-1); background:var(--zm-palido); border-color:var(--zm-palido); }
.zm-pf-barra__acc{ display:flex; gap:8px; margin-left:auto; flex:0 0 auto; }
html .zm-pf--v336 .zm-pf-barra .btn{ min-height:36px; font-size:13.5px; padding:0 14px; }

/* ---------- Índice: chips de salto pegados arriba ---------- */
.zm-pf--v336 .zm-pf-indice{ position:sticky; top:0; z-index:5; display:flex; flex-direction:row; align-items:center; gap:6px; margin:0; padding:14px 32px 10px; overflow-x:auto; scrollbar-width:none;
  background:linear-gradient(180deg,var(--solido) 78%,color-mix(in srgb,var(--solido) 0%,transparent)); border:0; transition:top .22s var(--sal); }
.zm-pf--v336 .zm-pf-indice::-webkit-scrollbar{ display:none; }
.zm-pf--v336[data-compacta="si"] .zm-pf-indice{ top:var(--zm-pf-barra-alto); }
.zm-pf--v336 .zm-pf-indice button{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; min-height:32px; padding:0 13px; border-radius:999px; font-size:13px;
  color:var(--texto-2); background:var(--solido); border:1px solid var(--linea); }
.zm-pf--v336 .zm-pf-indice button[aria-current="true"]{ color:var(--acento); background:var(--acento-suave); border-color:color-mix(in srgb,var(--acento) 40%,transparent); font-weight:500; }
.zm-pf--v336 .zm-pf-indice__txt{ overflow:visible; }

/* ---------- Cuerpo: principal | riel ---------- */
.zm-pf--v336 .zm-pf-cuerpo{ overflow:visible; padding:6px 32px 32px; flex:none; }
.zm-pf-cols{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:24px; align-items:start; }
.zm-pf-principal{ display:flex; flex-direction:column; gap:22px; min-width:0; }
.zm-pf-riel{ position:sticky; top:60px; display:flex; flex-direction:column; gap:16px; min-width:0; max-height:calc(100dvh - 48px - 76px); overflow:auto; overscroll-behavior:contain;
  scrollbar-width:thin; padding:2px 2px 12px; margin:-2px; transition:top .22s var(--sal); }
.zm-pf--v336[data-compacta="si"] .zm-pf-riel{ top:calc(60px + var(--zm-pf-barra-alto)); max-height:calc(100dvh - 48px - 76px - var(--zm-pf-barra-alto)); }
.zm-pf--v336 .zm-pf-sec{ padding:0; scroll-margin-top:calc(70px + var(--zm-pf-barra-alto)); }
.zm-pf--v336 .zm-pf-sec + .zm-pf-sec{ padding-top:0; }
.zm-pf-sec--principal{ padding:20px 22px !important; border-radius:22px; background:var(--solido); border:1px solid var(--zm-pf-borde); box-shadow:var(--zm-pf-sombra-2); }
.zm-pf--v336 .zm-pf-sec--principal > .zm-pf-sec__cabeza{ margin:0 0 4px; }
.zm-pf--v336 .zm-pf-sec--principal > .zm-pf-sec__cabeza > h3{ display:flex; align-items:center; gap:10px; font-size:19px; font-weight:600; letter-spacing:-.02em; }
.zm-pf--v336 .zm-pf-sec--principal > .zm-seccion__ayuda{ margin:0 0 12px; font-size:13.5px; color:var(--texto-2); }
.zm-pf-sec--principal[data-seccion="planes"]{ background:linear-gradient(180deg,color-mix(in srgb,var(--acento-suave) 55%,var(--solido)),var(--solido) 220px); border-color:color-mix(in srgb,var(--acento) 18%,var(--linea)); }
.zm-pf-sec--riel > .zm-pf-sec__cabeza{ margin:0 0 6px; }
.zm-pf--v336 .zm-pf-sec--riel > .zm-pf-sec__cabeza > h3{ font-size:12.5px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--texto-3); }
.zm-pf--v336 .zm-pf-sec--riel > .zm-seccion__ayuda{ margin:0 0 8px; font-size:12.5px; color:var(--texto-3); }
.zm-pf-tarj, .zm-pf-plegables, .zm-pf--v336 .zm-pf-sec--riel .zm-pf-conv{ display:block; margin:0 0 10px; padding:14px 16px; border-radius:20px; background:var(--solido); border:1px solid var(--zm-pf-borde); box-shadow:var(--zm-pf-sombra-2); }
.zm-pf-tarj:last-child, .zm-pf-plegables:last-child{ margin-bottom:0; }
.zm-pf-tarj__cabeza{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 8px; }
.zm-pf-tarj__cabeza > .zm-pf-sub-titulo{ margin:0; font-size:15px; font-weight:600; }
.zm-pf--v336 .zm-pf-sec--riel .zm-pf-conv{ flex-direction:column; align-items:stretch; gap:12px; }
.zm-pf--v336 .zm-pf-sec--riel .zm-pf-conv__info{ flex:0 0 auto; }
.zm-pf--v336 .zm-pf-sec--riel .zm-pf-conv > .btn{ justify-content:center; }
.zm-pf-ant__alergia{ display:flex; align-items:flex-start; gap:8px; margin:0 0 6px; padding:10px 12px; border-radius:12px; font-size:13.5px; font-weight:600;
  color:var(--danger); background:color-mix(in srgb,var(--danger) 9%,var(--solido)); }
.zm-pf-ant__alergia--sin{ color:var(--texto-2); background:var(--solido-2); font-weight:500; }
.zm-pf-ant__alergia > svg{ flex:0 0 auto; margin-top:2px; }
.zm-pf--v336 .zm-pf-tarj .zm-pf-pares dd{ font-size:13.5px; }
.zm-pf--v336 .zm-pf-tarj.datos-basicos-paciente{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.zm-pf--v336 .datos-basicos-paciente .dato-paciente{ padding:1px 0; }
.zm-pf--v336 .zm-pf-fotos > .coleccion-paginada{ grid-template-columns:1fr 1fr; gap:8px; }
.zm-pf--v336 .zm-pf-fotos .zm-foto__ver{ aspect-ratio:4 / 3; }
.zm-pf--v336 .zm-pf-tarj .zm-cont, .zm-pf--v336 .zm-pf-plegables .zm-cont{ padding:10px 0; }
.zm-pf--v336 .zm-pf-tarj > .zm-cont:first-child{ border-top:0; padding-top:0; }
.zm-pf--v336 .zm-pf-plegables .zm-cont:first-of-type{ border-top:0; }
.zm-pf-plegables__tit{ margin:0 0 2px; font-size:12.5px; font-weight:500; color:var(--texto-3); }
.zm-pf-pie{ display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; margin:2px 4px 0; font-size:12.5px; color:var(--texto-3); }
.zm-pf--v336 .zm-pf-pie .fc-gestion{ padding:0; border:0; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; font-size:12.5px; color:var(--texto-3); }
.zm-pf--v336 .zm-pf-fin{ justify-content:center; padding:22px 0 0; }

/* Plegables: un resumen que se abre (datos detallados, pagos, gestión del plan…) */
.zm-pf-pleg > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:12px 2px; font-size:14px; font-weight:500; color:var(--texto); min-width:0; }
.zm-pf-pleg > summary::-webkit-details-marker{ display:none; }
.zm-pf-pleg > summary > span:not(.zm-pf-pleg__r){ flex:0 0 auto; white-space:nowrap; }
.zm-pf-pleg > summary > svg{ flex:0 0 auto; color:var(--texto-3); }
.zm-pf-pleg > summary::after{ content:''; flex:0 0 auto; width:7px; height:7px; margin-left:4px; border-right:1.6px solid var(--texto-3); border-bottom:1.6px solid var(--texto-3);
  transform:rotate(-45deg); transition:transform .2s var(--sal); }
.zm-pf-pleg[open] > summary::after{ transform:rotate(45deg); }
.zm-pf-pleg__r{ margin-left:auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; font-weight:400; color:var(--texto-3); }
.zm-pf-pleg > summary:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; border-radius:10px; }
.zm-pf-tarj.zm-pf-pleg{ padding:2px 16px; }
.zm-pf-tarj.zm-pf-pleg[open]{ padding-bottom:14px; }
.zm-pf-pleg__acc{ display:flex; gap:8px; flex-wrap:wrap; margin:2px 0 10px; }
.zm-pf--v336 .zm-pf-grupos{ grid-template-columns:minmax(0,1fr); gap:16px; margin-top:4px; }
.zm-pf--v336 .zm-pf-sec--riel .zm-pf-forma input[inputmode="numeric"]{ width:110px; }


/* ---------- Plan: recorrido y pago del plan ---------- */
.zm-pf-plan__cabeza{ display:flex; flex-direction:column; gap:6px; }
.zm-pf-plan__sigue{ margin:2px 0 0; font-size:21px; font-weight:600; letter-spacing:-.02em; line-height:1.25; color:var(--texto); }
.zm-pf-plan__sigue em{ font-style:normal; color:var(--acento); }
.zm-pf-plan__armado{ margin:0; font-size:13.5px; color:var(--texto-2); }
.zm-pf-plan .zm-cita-plan__contadores{ margin-top:6px; }
.zm-pf-plan__rejilla{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-top:16px; align-items:start; }
.zm-pf-plan[data-con-pago] .zm-pf-plan__rejilla{ grid-template-columns:minmax(0,1fr) 290px; }
.zm-pf-plan__pasos{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; min-width:0; }
.zm-pf-plan__paso{ display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:14px; align-items:flex-start; padding:14px 16px; border-radius:18px; background:var(--solido); border:1px solid var(--zm-pf-borde); }
.zm-pf-plan__paso[data-hecho]{ border-color:var(--acento); box-shadow:0 0 0 3px var(--acento-suave); }
.zm-pf-plan__paso[data-sigue]{ background:var(--solido-2); }
.zm-pf-plan__nodo{ display:grid; place-items:center; width:40px; height:40px; border-radius:999px; font-size:15px; font-weight:600; color:var(--texto-2); background:var(--solido); border:1.5px dashed var(--texto-3); }
.zm-pf-plan__paso[data-hecho] .zm-pf-plan__nodo{ border:0; color:var(--acento-tinta); background:var(--acento); box-shadow:0 0 0 4px var(--solido), 0 0 0 5.5px var(--acento); }
.zm-pf-plan__cuerpo{ min-width:0; }
.zm-pf-plan__nombre{ margin:0; font-size:15.5px; font-weight:600; line-height:1.3; color:var(--texto); }
.zm-pf-plan__nombre span{ font-weight:500; color:var(--texto-2); }
.zm-pf-plan__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:7px 0 0; font-size:13px; color:var(--texto-2); }
.zm-pf-plan__visitas{ grid-column:2 / -1; list-style:none; margin:2px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.zm-pf-plan__visitas li{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:9px 11px; border-radius:14px; font-size:12.5px; line-height:1.35;
  color:var(--texto-2); background:var(--solido); border:1px solid var(--linea); }
.zm-pf-plan__visitas li b{ font-size:13px; }
.zm-pf-plan__visitas li em{ display:block; }
.zm-pf-plan__visitas li .btn{ margin-top:5px; }
.zm-pf-plan__visitas li b{ color:var(--texto); font-weight:600; }
.zm-pf-plan__visitas li em{ font-style:normal; font-weight:600; color:var(--acento); }
.zm-pf-plan__visitas li[data-estado="agendada"]{ background:var(--acento-suave); border-color:color-mix(in srgb,var(--acento) 30%,transparent); }
.zm-pf-plan__visitas li[data-estado="agendada"] b{ color:var(--acento); }
.zm-pf-plan__visitas li[data-estado="realizada"]{ background:var(--solido-2); border-color:transparent; }
.zm-pf-plan__visitas li .btn{ min-height:30px; }
.zm-pf-plan__dinero{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; text-align:right; }
.zm-pf-plan__dinero b{ font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; }
.zm-pf-plan__pago{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:8px; padding:18px 18px 16px; border-radius:20px; background:var(--solido);
  border:1px solid var(--zm-pf-borde); box-shadow:var(--zm-pf-sombra); }
.zm-pf-plan__pago::before{ content:''; position:absolute; inset:0 0 auto 0; height:4px; background:var(--ok); }
.zm-pf-plan__pago[data-tono="mal"]::before{ background:var(--danger); }
.zm-pf-plan__pago[data-tono="aviso"]::before{ background:var(--zm-ambar); }
.zm-pf-plan__pagocab{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12.5px; color:var(--texto-3); }
.zm-pf-plan__monto{ margin:0; font-size:32px; font-weight:700; letter-spacing:-.035em; line-height:1.05; font-variant-numeric:tabular-nums; }
.zm-pf-plan__monto small{ display:block; margin-top:4px; font-size:12.5px; font-weight:500; letter-spacing:0; color:var(--texto-3); }
.zm-pf-plan__recibido{ margin:0; font-size:12.5px; color:var(--texto-3); }
.zm-pf-barra-pago{ display:flex; gap:3px; }
.zm-pf-barra-pago > span{ display:block; height:7px; border-radius:999px; overflow:hidden; background:color-mix(in srgb,var(--linea) 60%,transparent); }
.zm-pf-barra-pago i{ display:block; height:100%; background:var(--ok); }
.zm-pf-plan__pago .zm-cita-plan-cobro{ border-top:0; padding-top:2px; }
.zm-pf-plan__pago .zm-cita-plan-linea{ flex-direction:column; align-items:stretch; gap:8px; }
.zm-pf-plan__pago .zm-cita-plan-linea__nombre{ display:flex; flex-direction:column; font-size:12.5px; color:var(--texto-2); }
.zm-pf-plan__pago .zm-cita-plan-cobro:has(> .zm-cita-plan-linea:only-of-type) .zm-cita-plan-linea__nombre{ display:none; }
.zm-pf-plan__pago .zm-cita-plan-linea > .btn.gold{ min-height:44px; width:100%; justify-content:center; font-size:14.5px; font-weight:600; border-radius:999px; box-shadow:0 10px 24px -12px color-mix(in srgb,var(--acento) 75%,transparent); }
.zm-pf-plan__pago .zm-cita-plan-medios{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:8px; border-radius:14px; background:var(--solido-2); }
.zm-pf-plan__pago .zm-cita-plan-medios__eti{ grid-column:1/-1; font-size:12.5px; color:var(--texto-2); }
.zm-pf-plan__pago .zm-cita-plan-medios .btn{ justify-content:center; background:var(--solido); }
.zm-pf-plan__pago .zm-cita-plan-medios input, .zm-pf-plan__pago .zm-cita-plan-medios select{ grid-column:1/-1; width:100% !important; }
.zm-pf-plan__pagoacc{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.zm-pf-plan__pagoacc .btn{ flex:1 1 auto; justify-content:center; }
.zm-pf-plan__pie{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--zm-pf-borde); }
html .zm-pf--v336 .btn.zm-pf-btn-azul{ color:var(--acento); background:var(--acento-suave); border-color:color-mix(in srgb,var(--acento) 30%,transparent); }
.zm-pf--v336 .zm-pf-plan-gestion, .zm-pf--v336 [data-seccion="planes"] > .zm-pf-pleg{ margin-top:14px; padding:0 14px; border-radius:16px; border:1px solid var(--zm-pf-borde); background:var(--solido); }
.zm-pf--v336 .zm-pf-plan-gestion[open]{ padding-bottom:14px; }
.zm-pf--v336 [data-seccion="planes"] > .zm-pf-pleg > .zm-pack{ margin:0 0 10px; }
.zm-pf--v336 [data-seccion="planes"] > [data-ficha-section="cotizaciones"]{ margin-top:6px; }
.zm-pf-vacio{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:18px; border-radius:16px; border:1.5px dashed var(--linea); }
.zm-pf-vacio b{ font-size:15px; font-weight:600; }
.zm-pf-vacio span{ font-size:13px; color:var(--texto-2); }
.zm-pf-vacio .btn{ margin-top:4px; }

/* ---------- Citas: la línea de vida ---------- */
.zm-pf-franja{ display:flex; flex-direction:column; gap:6px; margin:0 0 14px; padding:10px 14px; border-radius:14px; background:color-mix(in srgb,var(--ok) 8%,var(--solido)); border:1px solid color-mix(in srgb,var(--ok) 28%,transparent); }
.zm-pf-franja__fila{ display:flex; align-items:center; justify-content:space-between; gap:8px 12px; flex-wrap:wrap; font-size:13px; color:var(--texto-2); }
.zm-pf-franja__fila b{ color:var(--texto); font-weight:600; }
.zm-pf-vida__filtros{ display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; margin:0 0 6px; }
.zm-pf--v336 .zm-pf-conquien{ display:flex; align-items:center; gap:6px; flex-wrap:nowrap; margin:0; overflow-x:auto; scrollbar-width:none; max-width:100%; }
.zm-pf--v336 .zm-pf-conquien::-webkit-scrollbar{ display:none; }
.zm-pf-conquien__chip{ all:unset; box-sizing:border-box; flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 11px 0 5px; border-radius:999px; font-size:12.5px; cursor:pointer;
  color:var(--texto); background:var(--solido); border:1px solid var(--linea); }
.zm-pf--v336 .zm-pf-conquien__eti{ flex:0 0 auto; white-space:nowrap; font-size:12.5px; color:var(--texto-3); }
.zm-pf-conquien__chip b{ font-weight:600; color:var(--texto-3); }
.zm-pf-conquien__chip[aria-pressed="true"]{ color:var(--acento); background:var(--acento-suave); border-color:color-mix(in srgb,var(--acento) 40%,transparent); }
.zm-pf-conquien__chip:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
.zm-pf-vida__grupo > ol{ list-style:none; margin:0; padding:0; }
.zm-pf-vida__mes{ margin:18px 0 10px 70px; font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--texto-3); }
.zm-pf-vida__grupo:first-child .zm-pf-vida__mes{ margin-top:10px; }
.zm-pf-vida__grupo[data-prox] .zm-pf-vida__mes{ color:var(--acento); }
.zm-pf-cita{ position:relative; display:grid; grid-template-columns:56px minmax(0,1fr); gap:14px; margin:0 0 12px; }
.zm-pf-cita::before{ content:''; position:absolute; left:27px; top:62px; bottom:-14px; width:2px; background:color-mix(in srgb,var(--linea) 70%,transparent); }
.zm-pf-cita[data-ultima]::before{ display:none; }
.zm-pf-cita__fecha{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:56px; height:56px; border-radius:16px; line-height:1;
  background:var(--solido-2); border:1px solid var(--zm-pf-borde); }
.zm-pf-cita__fecha b{ font-size:21px; font-weight:600; letter-spacing:-.02em; color:var(--texto); }
.zm-pf-cita__fecha span{ margin-top:3px; font-size:11px; color:var(--texto-2); }
.zm-pf-cita[data-prox] .zm-pf-cita__fecha{ background:var(--acento); border-color:var(--acento); }
.zm-pf-cita[data-prox] .zm-pf-cita__fecha b, .zm-pf-cita[data-prox] .zm-pf-cita__fecha span{ color:var(--acento-tinta); }
.zm-pf-cita[data-estado="cancelada"] .zm-pf-cita__fecha{ opacity:.6; }
.zm-pf-cita__tarjeta{ min-width:0; overflow:hidden; border-radius:20px; background:var(--solido); border:1px solid var(--zm-pf-borde); box-shadow:var(--zm-pf-sombra-2); }
.zm-pf-cita[data-prox] .zm-pf-cita__tarjeta{ border-color:var(--acento); box-shadow:0 0 0 3px var(--acento-suave), var(--zm-pf-sombra-2); }
.zm-pf-cita[data-estado="cancelada"] .zm-pf-cita__tarjeta{ background:var(--solido-2); box-shadow:none; }
.zm-pf-cita[data-tipo="ficha"] .zm-pf-cita__tarjeta{ border-style:dashed; box-shadow:none; }
.zm-pf-cita__cabeza{ all:unset; box-sizing:border-box; display:block; width:100%; padding:13px 16px 12px; cursor:pointer; }
.zm-pf-cita__cabeza--quieta{ cursor:default; padding-bottom:4px; }
.zm-pf-cita__cabeza:focus-visible{ outline:2px solid var(--acento); outline-offset:-2px; border-radius:20px; }
@media (hover:hover) and (pointer:fine){ .zm-pf-cita__cabeza:not(.zm-pf-cita__cabeza--quieta):hover{ background:color-mix(in srgb,var(--solido-2) 55%,transparent); } }
.zm-pf-cita__l1{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; font-size:13px; color:var(--texto-2); }
.zm-pf-cita__fechatel{ display:none; font-weight:600; color:var(--texto); }
.zm-pf-cita__hora{ font-weight:600; color:var(--texto); font-variant-numeric:tabular-nums; }
.zm-pf-cita__rel{ margin-left:auto; font-size:12.5px; font-weight:600; color:var(--acento); }
.zm-pf-cita__chev{ flex:0 0 auto; width:7px; height:7px; margin-left:auto; border-right:1.6px solid var(--texto-3); border-bottom:1.6px solid var(--texto-3); transform:rotate(45deg); transition:transform .2s var(--sal); }
.zm-pf-cita__rel + .zm-pf-cita__chev{ margin-left:6px; }
.zm-pf-cita[data-abierta] .zm-pf-cita__chev{ transform:rotate(-135deg); }
.zm-pf-cita__que{ display:block; margin-top:7px; font-size:16px; font-weight:600; letter-spacing:-.012em; line-height:1.3; color:var(--texto); }
.zm-pf-cita__que small{ display:block; margin-top:2px; font-size:13.5px; font-weight:400; letter-spacing:0; color:var(--texto-2); }
.zm-pf-cita[data-estado="cancelada"] .zm-pf-cita__que{ color:var(--texto-2); text-decoration:line-through; text-decoration-color:var(--texto-3); }
.zm-pf-cita__l3{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 14px; margin-top:9px; font-size:13px; color:var(--texto-2); }
.zm-pf-cita__quien{ display:inline-flex; align-items:center; gap:7px; font-weight:500; color:var(--texto); }
.zm-pf-cita__pagocorto{ font-weight:600; color:var(--texto-2); }
.zm-pf-cita__pagocorto[data-tono="ok"]{ color:var(--ok); }
.zm-pf-cita__pagocorto[data-tono="mal"]{ color:var(--danger); }
.zm-pf-cita__pagocorto[data-tono="aviso"]{ color:color-mix(in srgb,var(--zm-ambar) 80%,var(--texto)); }
.zm-pf-cita__tenue{ color:var(--texto-3); }
.zm-pf-cita__cancel{ display:block; margin-top:7px; font-size:12.5px; color:var(--texto-2); }
.zm-pf-cita__detalle{ border-top:1px solid var(--zm-pf-borde); animation:zm-pf-abre .2s var(--sal) both; }
@keyframes zm-pf-abre{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.zm-pf-cita__grilla{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr); gap:12px; padding:12px 16px 14px; }
.zm-pf-cita__k{ margin:0 0 4px; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--texto-3); }
.zm-pf-cita__v{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin:4px 0 0; font-size:13.5px; font-weight:500; color:var(--texto); }
.zm-pf-cita__v b{ font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; }
.zm-pf-cita__v small{ font-size:12px; font-weight:400; color:var(--texto-3); }
.zm-pf-cita__pie{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; padding:10px 16px; font-size:12.5px; color:var(--texto-2); background:var(--solido-2); border-top:1px solid var(--zm-pf-borde); }
.zm-pf-cita__agendo{ display:block; margin-top:7px; font-size:12.5px; color:var(--texto-3); }
.zm-pf-cita__agendo .zm-quien{ color:var(--texto-2); font-weight:500; }
.zm-pf-vida__nota{ margin:4px 0 8px; padding:8px 12px; border-radius:12px; font-size:12.5px; color:var(--texto-2); background:var(--solido-2); border:1px solid var(--zm-pf-borde); }
.zm-pf-recorrido{ padding:12px 16px 4px; }
.zm-pf-recorrido ol{ list-style:none; margin:6px 0 0; padding:0; display:flex; gap:0; }
.zm-pf-recorrido li{ position:relative; flex:1 1 0; min-width:0; padding:20px 12px 8px 0; display:flex; flex-direction:column; gap:2px; font-size:12.5px; color:var(--texto-2); }
.zm-pf-recorrido li::after{ content:''; position:absolute; left:14px; right:0; top:5px; height:2px; background:color-mix(in srgb,var(--acento) 30%,var(--linea)); }
.zm-pf-recorrido li:last-child::after{ display:none; }
.zm-pf-recorrido__nodo{ position:absolute; left:0; top:0; width:12px; height:12px; border-radius:999px; background:var(--acento); box-shadow:0 0 0 3px var(--acento-suave); }
.zm-pf-recorrido li[data-tipo="atendida"] .zm-pf-recorrido__nodo, .zm-pf-recorrido li[data-tipo="confirmada"] .zm-pf-recorrido__nodo{ background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 18%,transparent); }
.zm-pf-recorrido li[data-tipo="cancelada"] .zm-pf-recorrido__nodo, .zm-pf-recorrido li[data-tipo="no_asistio"] .zm-pf-recorrido__nodo{ background:var(--danger); box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 16%,transparent); }
.zm-pf-recorrido li b{ font-size:13px; font-weight:600; color:var(--texto); }
.zm-pf-recorrido li small{ font-size:12px; color:var(--texto-3); }
.zm-pf-cita__fichas{ padding:0 16px 10px; }
.zm-pf-cita[data-tipo="ficha"] .zm-pf-cita__fichas{ padding:0 8px 6px; }
.zm-pf-cita__acciones{ display:flex; flex-wrap:wrap; gap:8px; padding:4px 16px 14px; }
.zm-pf-vida__mas{ margin:2px 0 0 70px; }
.zm-pf-vida__sueltos{ margin-top:10px; }

/* ---------- Teléfono: la acción de cada perfil bajo el pulgar ---------- */
.zm-pf-pulgar{ display:none; }

/* ---------- Anchos ---------- */
@media(max-width:1100px){
  .zm-pf-cols{ grid-template-columns:minmax(0,1fr); }
  .zm-pf-riel, .zm-pf--v336[data-compacta="si"] .zm-pf-riel{ position:static; max-height:none; overflow:visible; margin:0; padding:0; }
  .zm-pf--v336 .zm-pf-sec--riel{ padding:0; }
  .zm-pf-plan[data-con-pago] .zm-pf-plan__rejilla{ grid-template-columns:minmax(0,1fr); }
}
@media(max-width:820px){
  .zm-pf--v336 .zm-pf-banda{ padding:18px 20px 84px; }
  .zm-pf--v336 .zm-pf-banda .zm-pf-acciones{ display:flex; width:auto; max-width:100%; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .zm-pf--v336 .zm-pf-banda .zm-pf-acciones::-webkit-scrollbar{ display:none; }
  .zm-pf--v336 .zm-pf-banda .zm-pf-acciones > *{ flex:0 0 auto; }
  .zm-pf-teselas, .zm-pf-teselas[data-n]{ display:grid; grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:86%; gap:10px; padding:0 20px 4px; margin-top:-60px;
    overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding:0 20px; scrollbar-width:none; }
  .zm-pf-teselas::-webkit-scrollbar{ display:none; }
  .zm-pf--v336 .zm-pf-tesela{ scroll-snap-align:start; }
  .zm-pf--v336 .zm-pf-indice{ padding:12px 20px 8px; }
  .zm-pf--v336 .zm-pf-cuerpo{ padding:6px 20px 28px; }
  .zm-pf-cita__grilla{ grid-template-columns:minmax(0,1fr); }
  .zm-pf-recorrido ol{ flex-direction:column; }
  .zm-pf-recorrido li{ padding:0 0 12px 24px; }
  .zm-pf-recorrido li::after{ left:5px; right:auto; top:14px; bottom:0; width:2px; height:auto; }
  .zm-pf-barra__quien small, .zm-pf-barra .zm-pf-pildora--alergia{ display:none; }
  .zm-pf-vida__filtros{ flex-direction:column; align-items:stretch; }
}
/* 3-nov-2026 · Receta y exámenes a la vista también en el teléfono: la banda baja a una segunda
   línea en vez de deslizarse (lo que quedaba a la derecha no se veía) y sus verbos se acortan
   («Receta», «Exámenes») para que «Más» quepa en la misma línea. */
@media(max-width:820px){
  .zm-pf--v336 .zm-pf-banda .zm-pf-acciones{ flex-wrap:wrap; overflow-x:visible; }
  .zm-pf--v336 .zm-pf-banda .zm-pf-acc__verbo{ display:none; }
  .zm-pf--v336 .zm-pf-banda .zm-pf-acc--corto{ text-transform:capitalize; }
  /* Sin la tira deslizable, un botón más ancho que la línea («Escríbele a María de los Ángeles…»)
     se ajusta en dos líneas en vez de salirse de la banda. */
  .zm-pf--v336 .zm-pf-banda .zm-pf-acciones > *{ flex:0 1 auto; min-width:0; max-width:100%; }
  html .zm-pf--v336 .zm-pf-banda .zm-pf-acciones > .btn, html[data-theme="dark"] .zm-pf--v336 .zm-pf-banda .zm-pf-acciones > .btn,
  html .zm-pf--v336 .zm-pf-banda .zm-pf-acciones .zm-mas > summary, html[data-theme="dark"] .zm-pf--v336 .zm-pf-banda .zm-pf-acciones .zm-mas > summary{ white-space:normal; text-align:left; padding-top:6px; padding-bottom:6px; }
}
@media(max-width:700px){
  .zm-pf--v336 .zm-pf-scroll{ overflow:visible; }
  .modal.zm-pf-modal--v336{ overflow:visible; max-height:none; }
  .zm-pf--v336 .zm-pf-cabeza{ border-radius:inherit; overflow:visible; }
  .zm-pf--v336 .zm-pf-banda{ border-radius:inherit; border-bottom-left-radius:0; border-bottom-right-radius:0; }
  .zm-pf--v336 .zm-pf-indice{ position:sticky; margin:0; box-shadow:none; border:0; }
  .zm-pf--v336 .zm-pf-sec{ scroll-margin-top:150px; }
  .zm-pf-barra{ padding:0 14px; gap:10px; }
  .zm-pf-barra__acc .btn:not(.gold){ display:none; }
  .zm-pf-barra .zm-pf-pildora--cobro{ display:none; }
}
@media(max-width:520px){
  .zm-pf--v336 .zm-pf-banda{ padding:16px 18px 80px; }
  .modal .zm-pf--v336 h2.zm-pf-nombre{ font-size:26px; }
  .zm-pf--v336 .zm-pf-mono{ width:46px; height:46px; font-size:15px; }
  .zm-pf--v336 .zm-pf-banda .zm-pf-sub{ font-size:13.5px; }
  .zm-pf-quien{ align-items:flex-start; gap:12px; margin-top:14px; }
  .zm-pf-pildora, .zm-pf--v336 .zm-pf-pildoras .zm-cita-pildora-plan, .zm-pf--v336 .zm-pf-banda .zm-origen{ height:27px; font-size:12px; padding:0 10px; }
  .zm-pf--v336 .zm-pf-banda .zm-pf-alerta{ border-radius:14px; align-items:flex-start; }
  .zm-pf-teselas, .zm-pf-teselas[data-n]{ padding:0 18px 4px; scroll-padding:0 18px; }
  .zm-pf--v336 .zm-pf-tesela__valor{ font-size:23px; }
  .zm-pf--v336 .zm-pf-tesela__valor--monto{ font-size:30px; }
  .zm-pf--v336 .zm-pf-indice{ padding:10px 14px 8px; }
  .zm-pf--v336 .zm-pf-cuerpo{ padding:6px 14px 112px; }
  .zm-pf-sec--principal{ padding:16px 14px !important; border-radius:20px; }
  .zm-pf-plan__sigue{ font-size:18px; }
  .zm-pf-plan__paso{ grid-template-columns:36px minmax(0,1fr); padding:12px; gap:12px; }
  .zm-pf-plan__nodo{ width:34px; height:34px; font-size:13px; }
  .zm-pf-plan__dinero{ grid-column:2; flex-direction:row; align-items:center; justify-content:flex-start; }
  .zm-pf-plan__visitas li{ grid-template-columns:auto minmax(0,1fr); }
  .zm-pf-plan__visitas li .btn{ grid-column:1/-1; justify-self:start; }
  .zm-pf-vida__mes{ margin-left:0; }
  .zm-pf-cita{ grid-template-columns:minmax(0,1fr); gap:0; }
  .zm-pf-cita::before, .zm-pf-cita__fecha{ display:none; }
  .zm-pf-cita__fechatel{ display:inline; }
  .zm-pf-vida__mas{ margin-left:0; }
  /* La ventana y su fondo no atrapan la barra fija: sin transform ni desenfoque en el teléfono. */
  .modal-bg:has(> .zm-pf-modal--v336){ -webkit-backdrop-filter:none; backdrop-filter:none; }
  .modal.zm-pf-modal--v336{ animation:none; transform:none; }
  .zm-pf-pulgar{ position:fixed; z-index:40; left:0; right:0; bottom:0; display:flex; gap:8px; padding:12px 14px calc(14px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,color-mix(in srgb,var(--solido) 0%,transparent),var(--solido) 28%); }
  .zm-pf-pulgar > button{ all:unset; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:50px; border-radius:999px; font-size:15px; font-weight:600; cursor:pointer; }
  .zm-pf-pulgar > .zm-pf-pulgar__pri{ flex:1 1 auto; color:var(--acento-tinta); background:var(--acento); box-shadow:0 10px 24px -10px color-mix(in srgb,var(--acento) 70%,transparent); }
  .zm-pf-pulgar > .zm-pf-pulgar__sec{ flex:0 1 40%; color:var(--texto); background:var(--solido); border:1px solid var(--linea); box-shadow:var(--zm-pf-sombra-2); }
  .zm-pf-pulgar > .zm-pf-pulgar__ico{ flex:0 0 50px; width:50px; color:var(--texto); background:var(--solido); border:1px solid var(--linea); box-shadow:var(--zm-pf-sombra-2); }
  .zm-pf-pulgar > button:disabled{ opacity:.5; cursor:not-allowed; }
  .zm-pf-pulgar > button:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
}

/* ---------- Noche: los mismos azules, sin negro; borde y luz interior en vez de sombra ---------- */
html[data-theme="dark"] .zm-pf--v336 .zm-pf-banda{ background:radial-gradient(640px 280px at 84% -10%, color-mix(in srgb,var(--zm-palido) 18%,transparent), transparent 70%),
  linear-gradient(160deg,color-mix(in srgb,var(--zm-noche-1) 92%,var(--zm-palido)),color-mix(in srgb,var(--zm-noche-2) 92%,var(--zm-palido))); }
html[data-theme="dark"] .zm-pf--v336{ --zm-pf-borde:color-mix(in srgb,white 10%,transparent);
  --zm-pf-sombra:inset 0 1px 0 color-mix(in srgb,white 6%,transparent), 0 18px 40px -18px color-mix(in srgb,var(--zm-noche-1) 80%,transparent);
  --zm-pf-sombra-2:inset 0 1px 0 color-mix(in srgb,white 4%,transparent); }
html[data-theme="dark"] .zm-pf--v336 .zm-pf-scroll, html[data-theme="dark"] .modal.zm-pf-modal--v336{ background:var(--zm-noche-1); }
html[data-theme="dark"] .zm-pf--v336 .zm-pf-indice{ background:linear-gradient(180deg,var(--zm-noche-1) 78%,transparent); }
html[data-theme="dark"] .zm-pf--v336 .zm-pf-tesela, html[data-theme="dark"] .zm-pf-sec--principal, html[data-theme="dark"] .zm-pf--v336 .zm-pf-tarj,
html[data-theme="dark"] .zm-pf--v336 .zm-pf-plegables, html[data-theme="dark"] .zm-pf--v336 .zm-pf-sec--riel .zm-pf-conv, html[data-theme="dark"] .zm-pf-cita__tarjeta,
html[data-theme="dark"] .zm-pf-plan__pago, html[data-theme="dark"] .zm-pf-plan__paso{ background:var(--zm-noche-2); }
html[data-theme="dark"] .zm-pf-sec--principal[data-seccion="planes"]{ background:linear-gradient(180deg,color-mix(in srgb,var(--zm-palido) 8%,var(--zm-noche-2)),var(--zm-noche-2) 45%); }
html[data-theme="dark"] .zm-pf-plan__paso[data-sigue], html[data-theme="dark"] .zm-pf-cita__pie, html[data-theme="dark"] .zm-pf-cita[data-estado="cancelada"] .zm-pf-cita__tarjeta{ background:var(--zm-noche-1); }
html[data-theme="dark"] .zm-pf--v336 .zm-pf-indice button, html[data-theme="dark"] .zm-pf-conquien__chip, html[data-theme="dark"] .zm-pf-atajo,
html[data-theme="dark"] .zm-pf-plan__visitas li, html[data-theme="dark"] .zm-pf-plan__nodo{ background:var(--zm-noche-2); }
html[data-theme="dark"] .zm-pf-tesela__grande, html[data-theme="dark"] .zm-pf-pulgar__pri{ color:var(--zm-noche-1); background:var(--zm-palido); }
html[data-theme="dark"] .zm-pf-cita[data-prox] .zm-pf-cita__fecha{ background:var(--zm-palido); border-color:var(--zm-palido); }
html[data-theme="dark"] .zm-pf-cita[data-prox] .zm-pf-cita__fecha b, html[data-theme="dark"] .zm-pf-cita[data-prox] .zm-pf-cita__fecha span{ color:var(--zm-noche-1); }
html[data-theme="dark"] .zm-pf-pulgar{ background:linear-gradient(180deg,transparent,var(--zm-noche-1) 28%); }

@media (prefers-reduced-motion: reduce){
  .zm-pf-barra, .zm-pf--v336 .zm-pf-indice, .zm-pf-riel, .zm-pf-tesela__grande, .zm-pf-cita__chev, .zm-pf-pleg > summary::after{ transition:none; }
  .zm-pf-cita__detalle{ animation:none; }
  .zm-pf-tesela__grande:active:not(:disabled){ transform:none; }
}
/* ── fin zm · ficha v336 ── */
/* ── zm · ficha v337 ── */
/* Las mismas piezas para todos, en distinto orden y peso según quién mira. La del centro es lo que
   ese perfil resuelve al abrir la ficha (Atender, Cuenta o Próxima cita): más ancha, más alta y
   12 px dentro de la banda azul noche. Profundidad y posición, sin inclinar ni cambiar de color. */
.zm-pf--v336{ --zm-pf-sombra-centro:0 2px 4px color-mix(in srgb,var(--zm-noche-1) 8%,transparent), 0 26px 48px -18px color-mix(in srgb,var(--zm-noche-1) 42%,transparent); }

/* Las piezas: lo relevante al medio, más ancho y más alto (sube 12 px en la banda). */
.zm-pf-teselas, .zm-pf-teselas[data-n="3"]{ grid-template-columns:minmax(0,1fr) minmax(0,1.32fr) minmax(0,1fr); }
.zm-pf-teselas[data-n="2"]{ grid-template-columns:minmax(0,1.32fr) minmax(0,1fr); }
.zm-pf--v336 .zm-pf-tesela[data-slot="centro"]{ margin-top:-12px; padding:20px 22px 18px; box-shadow:var(--zm-pf-sombra-centro); }
.zm-pf--v336 .zm-pf-tesela[data-tipo="cuenta"][data-tono="mal"]::before{ content:''; position:absolute; inset:0 0 auto 0; height:4px; background:var(--danger); }
.zm-pf--v336 .zm-pf-tesela[data-tipo="cuenta"][data-tono="ok"] .zm-pf-tesela__valor{ color:var(--ok); }
.zm-pf-tesela__linea{ margin:8px 0 0; font-size:13px; line-height:1.45; color:var(--texto-2); }
.zm-pf-tesela__linea .zm-pf-enlace, .zm-pf-tesela__sub .zm-pf-enlace, .zm-pf-compras .zm-pf-enlace, .zm-pf-tesela__cabeza .zm-pf-enlace, .zm-pf-cuenta-linea .zm-pf-enlace{ color:var(--acento); text-decoration:none; font-weight:500; }
.zm-pf-enlace--mas{ display:inline-flex; align-items:center; gap:4px; font-size:13px; }
.zm-pf-enlace:disabled{ opacity:.45; cursor:not-allowed; }
/* v349 (revisión) · Enlaces sueltos que son la entrada a una acción («Unir» de la próxima cita, «Es otra
   visita · Agendar»): área de toque de al menos 24×24 sin cambiar cómo se ven. */
.zm-pf-enlace--toque{ display:inline-flex; align-items:center; justify-content:center; min-height:24px; min-width:24px; padding:2px 4px; box-sizing:border-box; }
.zm-pf-tesela__boton{ align-self:flex-start; margin-top:12px; }
.zm-pf-atajo[data-tono="acento"]{ color:var(--acento); border-color:color-mix(in srgb,var(--acento) 35%,var(--linea)); background:var(--acento-suave); }

/* Fila de estados con orden fijo (agenda · consentimiento · pago). */
.zm-pf-estados{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px; }
.zm-pf-estados .zm-pf-enlace{ font-size:12.5px; color:var(--acento); text-decoration:none; font-weight:500; }

/* Cuenta: primero lo que ha gastado (lo pidió Jaime), después el saldo, que manda con su cifra. */
.zm-pf-gasto{ margin-top:8px; display:flex; flex-direction:column; gap:8px; }
.zm-pf-gasto__cabeza{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; font-size:12.5px; color:var(--texto-3); }
.zm-pf-gasto__cabeza b{ font-size:22px; font-weight:650; letter-spacing:-.025em; font-variant-numeric:tabular-nums; color:var(--texto); }
.zm-pf-gasto__barra{ display:flex; gap:2px; height:8px; border-radius:999px; overflow:hidden; background:color-mix(in srgb,var(--linea) 60%,transparent); }
.zm-pf-gasto__barra > span[data-origen="clinica"]{ background:var(--acento); }
.zm-pf-gasto__barra > span[data-origen="web"]{ background:var(--zm-noche-2); }
.zm-pf-gasto__leyenda{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; }
.zm-pf-gasto__tramo{ all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:6px; min-height:28px; font-size:13px; color:var(--texto-2); cursor:pointer; border-radius:8px; }
.zm-pf-gasto__tramo::before{ content:''; width:8px; height:8px; border-radius:999px; background:var(--acento); }
.zm-pf-gasto__tramo[data-origen="web"]::before{ background:var(--zm-noche-2); }
.zm-pf-gasto__tramo b{ color:var(--texto); font-weight:600; font-variant-numeric:tabular-nums; }
.zm-pf-gasto__tramo:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
@media (hover:hover) and (pointer:fine){ .zm-pf-gasto__tramo:hover{ color:var(--texto); } }
@media (pointer:coarse){ .zm-pf-gasto__tramo{ min-height:44px; } }
.zm-pf-gasto__tenue{ font-size:13px; color:var(--texto-3); }
.zm-pf-gasto__neto, .zm-pf-gasto__ultimo{ font-size:12.5px; color:var(--texto-3); }
.zm-pf-gasto__vacio{ margin:0; font-size:13.5px; color:var(--texto-2); }
.zm-pf-saldo{ display:flex; flex-direction:column; gap:2px; margin-top:14px; padding-top:12px; border-top:1px solid var(--zm-pf-borde); }
.zm-pf-saldo__cabeza{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12.5px; color:var(--texto-3); }
.zm-pf-saldo__acc{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }
.zm-pf-saldo__acc .zm-pf-tesela__grande{ flex:1 1 220px; width:auto; }
.zm-pf-saldo__acc > .btn{ margin-top:12px; }

/* Ha comprado y antes de tratar: listas cortas de una línea. */
.zm-pf-compras{ margin-top:12px; padding-top:10px; border-top:1px solid var(--zm-pf-borde); }
.zm-pf-compras__cab{ display:flex; justify-content:space-between; gap:8px; font-size:12.5px; color:var(--texto-3); }
.zm-pf-compras__fila{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:2px 10px; padding:6px 0; font-size:13px; }
.zm-pf-compras__fila b{ font-weight:500; color:var(--texto); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.zm-pf-compras__fila small{ grid-column:1; color:var(--texto-3); }
.zm-pf-compras__pie, .zm-pf-compras__vacio{ margin:4px 0 0; font-size:12.5px; color:var(--texto-3); }
.zm-pf-antes{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 10px; margin:8px 0 0; font-size:13px; }
.zm-pf-antes dt{ color:var(--texto-3); }
.zm-pf-antes dd{ margin:0; color:var(--texto); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.zm-pf-cuenta-linea{ display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:10px; font-size:13px; color:var(--texto-2); }
.zm-pf-cuenta-linea [data-tono="mal"]{ color:var(--danger); font-weight:600; }

/* Banda: una píldora de estado y plan, contacto en una línea y «Editar datos» junto al nombre. */
.zm-pf-pildora--plan[data-tono="ok"]::before{ content:''; width:7px; height:7px; border-radius:999px; background:var(--ok); }
.zm-pf-contactos{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:14px; font-size:14px; }
.zm-pf-contactos a, .zm-pf-contactos > span{ display:inline-flex; align-items:center; gap:7px; min-width:0; overflow-wrap:anywhere; color:color-mix(in srgb,var(--zm-pf-claro) 86%,transparent); text-decoration:none; }
.zm-pf-contactos a:focus-visible{ outline:2px solid var(--zm-palido); outline-offset:2px; border-radius:6px; }
.zm-pf-editar{ all:unset; box-sizing:border-box; margin-left:auto; flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px; border-radius:999px;
  font-size:13.5px; font-weight:500; color:var(--zm-pf-claro); background:var(--zm-pf-vidrio); border:1px solid var(--zm-pf-vidrio-borde); cursor:pointer; }
.zm-pf-editar:focus-visible{ outline:2px solid var(--zm-palido); outline-offset:2px; }
.zm-pf-editar:disabled{ opacity:.5; cursor:not-allowed; }
@media (hover:hover) and (pointer:fine){ .zm-pf-editar:hover:not(:disabled){ background:color-mix(in srgb,var(--zm-pf-claro) 12%,transparent); } }
.zm-pf-punto{ width:7px; height:7px; border-radius:999px; background:var(--zm-ambar); flex:0 0 auto; }
.zm-pf-acciones .btn .zm-pf-punto{ margin-left:2px; }

/* La línea de zairi: una sola línea, plegada; al abrir, la altura con grid-template-rows. */
.zm-pf-zairi--v337{ position:relative; z-index:2; margin:14px 32px 0; padding:0; border-radius:16px; color:var(--texto); background:var(--solido); border:1px solid color-mix(in srgb,var(--acento) 20%,var(--zm-pf-borde)); box-shadow:var(--zm-pf-sombra-2); }
.zm-pf-zairi__linea{ all:unset; box-sizing:border-box; display:flex; align-items:center; gap:10px; width:100%; min-height:48px; padding:0 16px; cursor:pointer; border-radius:16px; }
.zm-pf-zairi__linea:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
.zm-pf-zairi--v337 .zm-pf-zairi__orbe{ flex:0 0 24px; width:24px; height:24px; border-radius:999px; overflow:hidden; display:inline-grid; place-items:center; }
.zm-pf-zairi--v337 .zm-pf-zairi__orbe img{ width:24px; height:24px; display:block; }
.zm-pf-zairi__txt{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:14.5px; color:var(--texto); }
.zm-pf-zairi__n{ flex:0 0 auto; height:22px; padding:0 8px; border-radius:999px; font-size:12px; line-height:22px; color:var(--acento); background:var(--acento-suave); }
.zm-pf-zairi__chev{ flex:0 0 auto; width:7px; height:7px; margin:-3px 2px 0; border-right:1.5px solid var(--texto-3); border-bottom:1.5px solid var(--texto-3); transform:rotate(45deg); transition:transform .15s ease; }
.zm-pf-zairi__linea[aria-expanded="true"] .zm-pf-zairi__chev{ transform:rotate(-135deg); margin-top:3px; }
.zm-pf-zairi__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .2s var(--sal); }
.zm-pf-zairi__panel[data-abierto]{ grid-template-rows:1fr; }
.zm-pf-zairi__panel > div{ min-height:0; overflow:hidden; padding:0 16px 0 48px; }
.zm-pf-zairi__panel[data-abierto] > div{ padding-bottom:14px; }
.zm-pf-zairi__frase{ margin:0 0 8px; font-size:14px; line-height:1.5; color:var(--texto-2); }
.zm-pf-zairi__resumen{ margin:0 0 8px; font-size:13px; line-height:1.5; color:var(--texto-2); }
.zm-pf-zairi__panel .zm-hallazgo{ margin-top:6px; background:var(--solido-2); }
.zm-pf-zairi__panel .zm-pf-zairi{ margin:10px 0 0; }
.zm-pf-zairi__otra{ margin-top:10px; }
.zm-pf-zairi--v337[data-cargando] .zm-pf-zairi__orbe{ animation:zm-pf-orbe-espera 1.2s ease-in-out infinite; }
@keyframes zm-pf-orbe-espera{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }
html[data-theme="dark"] .zm-pf-zairi--v337{ background:var(--zm-noche-2); }
html[data-theme="dark"] .zm-pf-gasto__barra > span[data-origen="web"], html[data-theme="dark"] .zm-pf-gasto__tramo[data-origen="web"]::before{ background:var(--zm-palido); }
html[data-theme="dark"] .zm-pf-atajo[data-tono="acento"]{ color:var(--zm-palido); background:color-mix(in srgb,var(--zm-palido) 12%,var(--zm-noche-2)); }

/* Entrada: lo del centro llega primero; los lados, 50 ms después. Solo opacidad y transform,
   y solo al montar la ficha (@starting-style): un onChange no reinserta las piezas. */
.zm-pf--v336 .zm-pf-tesela{ transition:opacity .22s var(--sal), transform .22s var(--sal); }
.zm-pf--v336 .zm-pf-tesela[data-slot="lado"]{ transition-delay:50ms; }
@starting-style{
  .zm-pf--v336 .zm-pf-tesela{ opacity:0; transform:translateY(6px); }
  .zm-pf--v336 .zm-pf-tesela[data-slot="centro"]{ opacity:0; transform:translateY(6px) scale(.98); }
}
.zm-pf-zairi--v337{ transition:opacity .16s var(--sal) .12s; }
@starting-style{ .zm-pf-zairi--v337{ opacity:0; } }

/* Tablet y teléfono: una columna, lo del centro primero (adiós al carrusel que cortaba «Saldo $1.…»). */
@media(max-width:820px){
  .zm-pf-teselas, .zm-pf-teselas[data-n]{ grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:minmax(0,1fr); overflow:visible; scroll-snap-type:none; padding:0 20px; }
  .zm-pf--v336 .zm-pf-tesela[data-slot="centro"]{ order:-1; margin-top:0; }
  .zm-pf-zairi--v337{ margin:12px 20px 0; }
  .zm-pf-zairi__panel > div{ padding-left:16px; }
}
@media(max-width:700px){ .zm-pf-barra__editar{ display:none; } }
@media(max-width:520px){
  .zm-pf-teselas, .zm-pf-teselas[data-n]{ padding:0 18px; }
  .zm-pf-zairi--v337{ margin:12px 18px 0; }
  .zm-pf-editar{ width:44px; height:44px; padding:0; justify-content:center; }
  /* Teléfono: los lados se acortan; manda la pieza del centro. */
  .zm-pf--v336 .zm-pf-tesela[data-slot="lado"] .zm-pf-compras__fila,
  .zm-pf--v336 .zm-pf-tesela[data-slot="lado"] .zm-pf-tesela__sub{ display:none; }
  .zm-pf-antes dt:nth-of-type(n+3), .zm-pf-antes dd:nth-of-type(n+3){ display:none; }
  .zm-pf-editar__txt{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}

@media (prefers-reduced-motion: reduce){
  .zm-pf--v336 .zm-pf-tesela, .zm-pf--v336 .zm-pf-tesela[data-slot="lado"]{ transition:opacity .15s ease; transition-delay:0s; }
  @starting-style{ .zm-pf--v336 .zm-pf-tesela, .zm-pf--v336 .zm-pf-tesela[data-slot="centro"]{ opacity:0; transform:none; } }
  .zm-pf-zairi--v337{ transition:opacity .15s ease; }
  .zm-pf-zairi__panel, .zm-pf-zairi__chev{ transition:none; }
  .zm-pf-zairi--v337[data-cargando] .zm-pf-zairi__orbe{ animation:none; }
}
/* v337b · Revisión visual: lo que se cortaba, se repetía o no se leía de noche. */
/* La ficha del consentimiento no se sale de la pieza: se acorta con «…» (el texto completo va en title)
   y viaja junto a su «Solicitar», sin que el enlace quede suelto al lado del pago. */
.zm-pf-estados .zm-pf-chip{ display:inline-block; max-width:100%; min-width:0; overflow:hidden; text-overflow:ellipsis; line-height:22px; vertical-align:middle; }
.zm-pf-estados .zm-pf-chip::before{ display:inline-block; vertical-align:middle; margin:-2px 6px 0 0; }
.zm-pf-estados__grupo{ display:inline-flex; align-items:center; gap:6px; max-width:100%; min-width:0; }
.zm-pf-estados__grupo > .zm-pf-chip{ flex:0 1 auto; }
.zm-pf-estados__grupo > .zm-pf-enlace{ flex:0 0 auto; }
/* Fecha y hora, sesión y botón de visita: no se parten por dentro. */
.zm-pf-nocorta, .zm-pf-plan__visitas li .btn{ white-space:nowrap; }
html .zm-pf--v336 .zm-pf-plan__visitas li .btn, html[data-theme="dark"] .zm-pf--v336 .zm-pf-plan__visitas li .btn{ max-width:100%; padding:0 10px; gap:5px; font-size:12.5px; }
/* La sublínea del nombre: el separador va delante de cada dato y el del comienzo de línea queda
   fuera de la vista; ningún «·» al final ni un dato partido en dos. */
.zm-pf--v336 .zm-pf-banda .zm-pf-sub{ margin-left:-18px; clip-path:inset(-6px -6px -6px 18px); }
.zm-pf--v336 .zm-pf-banda .zm-pf-sub > span{ white-space:nowrap; }
.zm-pf--v336 .zm-pf-banda .zm-pf-sub > span:not(:last-child)::after{ content:none; }
.zm-pf--v336 .zm-pf-banda .zm-pf-sub > span::before{ content:'·'; display:inline-block; width:18px; text-align:center; color:var(--zm-pf-tenue-claro); }
/* Cuenta: los dos botones con la misma altura. */
.zm-pf-saldo__acc .zm-pf-tesela__grande, .zm-pf--v336 .zm-pf-saldo__acc > .btn.sm{ min-height:44px; margin-top:12px; }
/* La ficha anidada en una cita no toca los bordes de la tarjeta (el borde es de la lista misma). */
.zm-pf-cita__detalle .zm-pf-cita__fichas{ margin:0 16px 12px; padding:6px; }
/* El recorrido del plan mide su propio ancho: en una columna angosta, el aparte del pago baja
   y las fichas de cada tratamiento vuelven a ir en fila. */
.zm-pf-plan{ container-type:inline-size; }
@container (max-width: 760px){
  .zm-pf-plan[data-con-pago] .zm-pf-plan__rejilla{ grid-template-columns:minmax(0,1fr); }
}
/* El índice pegajoso es sólido: no se transparenta lo que pasa por debajo; el desvanecido es una
   sombra del mismo color (la sombra no la recorta el desplazamiento horizontal del índice). */
.zm-pf--v336 .zm-pf-indice{ background:var(--solido); box-shadow:0 8px 10px -4px var(--solido); }
html[data-theme="dark"] .zm-pf--v336 .zm-pf-indice{ background:var(--zm-noche-1); box-shadow:0 8px 10px -4px var(--zm-noche-1); }
/* Noche: las fichas de estado llegan a 4,5:1 sobre su fondo, y la «Agendada» hueca tiene borde. */
html[data-theme="dark"] .zm-pf-chip[data-tono="ok"], html[data-theme="dark"] .zm-pf-cita__pagocorto[data-tono="ok"]{ color:color-mix(in srgb,var(--ok) 55%,white); }
html[data-theme="dark"] .zm-pf-chip[data-tono="mal"], html[data-theme="dark"] .zm-pf-cita__pagocorto[data-tono="mal"]{ color:color-mix(in srgb,var(--danger) 50%,white); }
html[data-theme="dark"] .zm-pf-chip[data-tono="aviso"], html[data-theme="dark"] .zm-pf-cita__pagocorto[data-tono="aviso"]{ color:color-mix(in srgb,var(--zm-ambar) 60%,white); }
html[data-theme="dark"] .zm-pf-chip[data-tono="hueco"]{ color:var(--texto-2); border-color:var(--linea); }
@media(max-width:520px){
  /* Un mismo borde para las piezas y las secciones. */
  .zm-pf--v336 .zm-pf-cuerpo{ padding-left:18px; padding-right:18px; }
  .zm-pf--v336 .zm-pf-indice{ padding-left:18px; padding-right:18px; }
  /* Sin filas a la vista en la pieza del lado, el pie no cuenta «+N más»: queda «Ver todo». */
  .zm-pf--v336 .zm-pf-tesela[data-slot="lado"] .zm-pf-compras__mas{ display:none; }
}
/* ── fin zm · ficha v337 ── */
/* ── zm · cita v338 ── */
/* El scroller lleva el azul noche en su mitad de arriba: al sobrepasar (rubber band) no asoma el
   blanco del modal sobre la banda. La grilla pinta su propio fondo para que el azul no se cuele. */
.modal.zm-cita-modal > .zm-cita__cuerpo{ background:linear-gradient(to bottom, var(--zm-noche-1) 0 50%, var(--solido) 50%); }
.zm-cita__grilla{ background:var(--solido); }
html[data-theme="dark"] .modal.zm-cita-modal > .zm-cita__cuerpo{ background:linear-gradient(to bottom, var(--zm-noche-2) 0 50%, var(--solido) 50%); }
/* Telemedicina a primer ojo: chip en la banda y la videollamada bajo el pago, a la derecha. */
.zm-cita-chip-tele{ gap:6px; border-color:color-mix(in srgb,var(--zm-palido) 55%,transparent); }
.zm-cita-tele{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 16px; border-radius:20px;
  border:1px solid color-mix(in srgb,var(--acento) 35%,var(--linea)); background:color-mix(in srgb,var(--acento) 8%,var(--solido)); box-shadow:var(--zm-cita-sombra); }
.zm-cita-tele__txt{ flex:1 1 180px; display:flex; align-items:center; gap:10px; min-width:0; }
.zm-cita-tele__txt > div{ display:flex; flex-direction:column; min-width:0; }
.zm-cita-tele__txt b{ font-size:14px; font-weight:600; color:var(--texto); }
.zm-cita-tele__txt > div > span{ font-size:12.5px; color:var(--texto-2); }
.zm-cita-tele__ico{ display:grid; place-items:center; width:34px; height:34px; flex:0 0 auto; border-radius:12px; color:var(--acento); background:var(--solido); border:1px solid color-mix(in srgb,var(--acento) 30%,var(--linea)); }
.zm-cita-tele__btn{ flex:1 1 100%; justify-content:center; min-height:46px; font-size:15px; font-weight:600; }
/* Consentimiento bajo el pago: su estado y su acción, en la misma tarjeta de siempre. */
.zm-cita__lado--arriba .zm-cita-consent{ padding:14px 16px; }
.zm-cita__lado--arriba .zm-cita-consent > .row > span:first-child{ display:flex; align-items:center; gap:8px; }
.zm-cita__lado--arriba .zm-cita-consent > .row > span:first-child::before{ content:''; width:8px; height:8px; border-radius:999px; background:var(--texto-3); }
.zm-cita__lado--arriba .zm-cita-consent:has(.pill) > .row > span:first-child::before{ background:var(--danger); }
/* Notas: la cabecera con «Editar» y el editor en la misma tarjeta. */
.zm-cita-tarjeta__fila{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 10px; }
.zm-cita-tarjeta__fila > .zm-cita-tarjeta__titulo{ margin:0; }
.zm-cita-notas-editor{ display:flex; flex-direction:column; gap:8px; }
.zm-cita-notas-editor textarea{ width:100%; min-height:96px; resize:vertical; font:inherit; font-size:14px; line-height:1.45; padding:10px 12px; border-radius:12px;
  border:1px solid var(--linea); background:var(--solido-2); color:var(--texto); box-sizing:border-box; }
.zm-cita-notas-editor textarea:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
.zm-cita-notas-editor__acc{ display:flex; justify-content:flex-end; gap:8px; }
/* El comprobante que llegó por el chat se distingue de los demás botones del pago. */
.zm-cita-pago__acciones .zm-cita-comprobante{ color:var(--acento); border-color:color-mix(in srgb,var(--acento) 40%,var(--linea)); background:color-mix(in srgb,var(--acento) 8%,var(--solido)); }
@media(max-width:920px){ .zm-cita-tele{ padding:12px 14px; } }
/* En el teléfono la grilla vuelve a una columna: las reglas de v336 (360/330 px) venían después
   de la de 920 px y dejaban el pago en una columna de 0 px. */
@media(max-width:920px){ .zm-cita__grilla{ grid-template-columns:minmax(0,1fr); } }
/* ── fin zm · cita v338 ── */
/* ── zm · ficha v338 ── */
/* El expediente: una sola columna de secciones plegadas, cada una con su cabecera (título, cuenta y
   una línea de resumen). Lo del turno sigue arriba, en las tres piezas; nada se repite abajo. */
.zm-pf-expediente{ display:flex; flex-direction:column; gap:10px; }
.zm-pf--v336 .zm-pf-sec--pleg{ padding:0 !important; margin:0; border-radius:20px; background:var(--solido); border:1px solid var(--zm-pf-borde); box-shadow:var(--zm-pf-sombra-2); overflow:clip; }
.zm-pf--v336 .zm-pf-sec--pleg:first-child{ border-color:color-mix(in srgb,var(--acento) 22%,var(--zm-pf-borde)); }
.zm-pf--v336 .zm-pf-sec--pleg > summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"chev titulo acc" "chev resumen acc";
  align-items:center; column-gap:12px; row-gap:2px; margin:0; padding:14px 18px; min-height:60px; }
.zm-pf--v336 .zm-pf-sec--pleg > summary::-webkit-details-marker{ display:none; }
.zm-pf--v336 .zm-pf-sec--pleg > summary:focus-visible{ outline:2px solid var(--acento); outline-offset:-2px; border-radius:20px; }
.zm-pf-sec__chev{ grid-area:chev; width:9px; height:9px; margin:0 4px; border-right:1.7px solid var(--texto-3); border-bottom:1.7px solid var(--texto-3); transform:rotate(-45deg); transition:transform .2s var(--sal); }
.zm-pf--v336 .zm-pf-sec--pleg[open] > summary .zm-pf-sec__chev{ transform:rotate(45deg); }
.zm-pf--v336 .zm-pf-sec--pleg > summary > h3{ grid-area:titulo; display:flex; align-items:center; gap:8px; margin:0; font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--texto); }
.zm-pf--v336 .zm-pf-sec--pleg > summary > h3 .zm-cont__cuenta{ font-size:12px; }
.zm-pf-sec__resumen{ grid-area:resumen; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; color:var(--texto-3); }
.zm-pf--v336 .zm-pf-sec--pleg[open] > summary .zm-pf-sec__resumen{ color:var(--texto-2); }
.zm-pf--v336 .zm-pf-sec--pleg > summary > .zm-pf-sec__acciones{ grid-area:acc; display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.zm-pf-sec__cuerpo{ padding:2px 18px 18px; }
.zm-pf--v336 .zm-pf-sec--pleg[open] > summary{ border-bottom:1px solid var(--zm-pf-borde); margin-bottom:12px; }
.zm-pf--v336 .zm-pf-sec--pleg[data-seccion="planes"][open]{ background:linear-gradient(180deg,color-mix(in srgb,var(--acento-suave) 55%,var(--solido)),var(--solido) 220px); }
@media (hover:hover) and (pointer:fine){ .zm-pf--v336 .zm-pf-sec--pleg:not([open]) > summary:hover{ background:color-mix(in srgb,var(--solido-2) 70%,var(--solido)); } }
/* Dentro de una sección ya enmarcada, las tarjetas no llevan otra sombra: solo su línea. */
.zm-pf-sec__cuerpo .zm-pf-tarj, .zm-pf-sec__cuerpo .zm-pf-plegables{ box-shadow:none; }
.zm-pf-sec__cuerpo > .zm-seccion__ayuda{ margin:0 0 10px; font-size:13px; color:var(--texto-2); }
.zm-pf-pie-ficha{ margin-top:14px; }
/* Compras y pagos: los totales del libro mayor y una fila por compra (pago · agenda). */
.zm-pf-compras-lista__totales{ display:flex; flex-wrap:wrap; gap:6px 18px; margin:0 0 10px; font-size:13px; color:var(--texto-2); }
.zm-pf-compras-lista__totales > span{ display:inline-flex; align-items:center; gap:7px; }
.zm-pf-compras-lista__totales > span[data-origen]::before{ content:''; width:8px; height:8px; border-radius:999px; background:var(--acento); }
.zm-pf-compras-lista__totales > span[data-origen="web"]::before{ background:var(--zm-noche-2); }
.zm-pf-compras-lista__totales b{ color:var(--texto); font-weight:600; font-variant-numeric:tabular-nums; }
.zm-pf-compras-lista .zm-estado + .zm-estado{ margin-left:6px; }
.zm-pf-movs{ margin-top:12px; }
/* Otros planes, plegados; la línea de vida se contiene cuando se piden todas las citas. */
.zm-pf-planes-otros{ margin-top:14px; }
.zm-pf-plan-otro{ margin-top:8px; padding:0 14px; border-radius:16px; border:1px solid var(--zm-pf-borde); background:var(--solido); }
.zm-pf-plan-otro[open]{ padding-bottom:12px; }
.zm-pf-vida__lista[data-contenida="si"]{ max-height:560px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; padding-right:6px; }
/* «Escríbele a …» con menú cuando hay varias conversaciones posibles. */
.zm-pf-escribele > .zm-mas > summary{ display:inline-flex; align-items:center; gap:8px; }
/* Entrada (skill animate): la pieza del centro primero, nítida desde el desenfoque; los lados
   llegan desde el centro hacia afuera 80 ms después; las secciones suben en cascada. La
   transición de v337 se apaga: la reemplaza la animación, que no deja filtro al terminar. */
.zm-pf--v336 .zm-pf-tesela, .zm-pf--v336 .zm-pf-tesela[data-slot="lado"]{ transition-duration:0s; transition-delay:0s; }
@keyframes zm-pf-entra-centro{ from{ opacity:0; transform:translateY(10px) scale(.97); filter:blur(8px); } }
@keyframes zm-pf-entra-izq{ from{ opacity:0; transform:translateX(22px); filter:blur(6px); } }
@keyframes zm-pf-entra-der{ from{ opacity:0; transform:translateX(-22px); filter:blur(6px); } }
@keyframes zm-pf-sube{ from{ opacity:0; transform:translateY(8px); } }
@keyframes zm-pf-aparece{ from{ opacity:0; } }
.zm-pf--v336 .zm-pf-tesela[data-slot="centro"]{ animation:zm-pf-entra-centro .3s cubic-bezier(.2,.7,.2,1) backwards; }
.zm-pf--v336 .zm-pf-tesela[data-slot="lado"]{ animation:zm-pf-entra-izq .3s cubic-bezier(.2,.7,.2,1) 80ms backwards; }
.zm-pf--v336 .zm-pf-tesela[data-slot="centro"] ~ .zm-pf-tesela[data-slot="lado"]{ animation-name:zm-pf-entra-der; }
.zm-pf--v336 .zm-pf-zairi--v337{ animation:zm-pf-aparece .2s ease 180ms backwards; }
.zm-pf-expediente > .zm-pf-sec{ animation:zm-pf-sube .26s cubic-bezier(.2,.7,.2,1) backwards; animation-delay:calc(160ms + var(--i, 0) * 40ms); }
.zm-pf--v336 .zm-pf-sec--pleg[open] > .zm-pf-sec__cuerpo{ animation:zm-pf-sube .18s cubic-bezier(.2,.7,.2,1) backwards; }
@media (prefers-reduced-motion: reduce){
  .zm-pf--v336 .zm-pf-tesela[data-slot="centro"], .zm-pf--v336 .zm-pf-tesela[data-slot="lado"], .zm-pf--v336 .zm-pf-tesela[data-slot="centro"] ~ .zm-pf-tesela[data-slot="lado"],
  .zm-pf-expediente > .zm-pf-sec, .zm-pf--v336 .zm-pf-sec--pleg[open] > .zm-pf-sec__cuerpo, .zm-pf--v336 .zm-pf-zairi--v337{ animation:zm-pf-aparece .15s ease backwards; }
  .zm-pf-sec__chev{ transition:none; }
}
@media(max-width:700px){
  .zm-pf--v336 .zm-pf-sec--pleg > summary{ padding:12px 14px; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"chev titulo" "chev resumen" "acc acc"; }
  .zm-pf--v336 .zm-pf-sec--pleg > summary > .zm-pf-sec__acciones{ justify-content:flex-start; margin-top:6px; }
  .zm-pf-sec__cuerpo{ padding:2px 14px 14px; }
  .zm-pf-vida__lista[data-contenida="si"]{ max-height:70dvh; }
}
html[data-theme="dark"] .zm-pf--v336 .zm-pf-sec--pleg, html[data-theme="dark"] .zm-pf-plan-otro{ background:var(--zm-noche-2); }
/* El índice vive en la barra compacta (segunda fila): aparece al bajar, cuando las cabeceras del
   expediente ya no están a la vista. La barra crece a dos filas; su alto sigue en la variable. */
.zm-pf--v336{ --zm-pf-barra-alto:108px; }
.zm-pf--v336 .zm-pf-barra{ flex-wrap:wrap; align-content:space-between; padding-top:10px; padding-bottom:8px; overflow:hidden; }
.zm-pf--v336 .zm-pf-indice--barra, .zm-pf--v336[data-compacta="si"] .zm-pf-indice--barra{ position:static; top:auto; flex:1 1 100%; min-width:0; margin:0; padding:0 0 2px; background:none; box-shadow:none; border:0; transition:none; }
.zm-pf--v336 .zm-pf-indice--barra button{ min-height:30px; padding:0 12px; font-size:12.5px; color:color-mix(in srgb,var(--zm-pf-claro) 82%,transparent); background:color-mix(in srgb,var(--zm-pf-claro) 8%,transparent); border-color:color-mix(in srgb,var(--zm-pf-claro) 16%,transparent); }
.zm-pf--v336 .zm-pf-indice--barra button[aria-current="true"]{ color:var(--zm-noche-1); background:var(--zm-palido); border-color:var(--zm-palido); font-weight:600; }
.zm-pf--v336 .zm-pf-indice--barra .zm-pf-indice__n{ color:inherit; opacity:.8; }
.zm-pf--v336 .zm-pf-indice--barra .zm-estado[data-tono="aviso"]{ background:var(--zm-ambar); }
html[data-theme="dark"] .zm-pf--v336 .zm-pf-indice--barra{ background:none; }
@media(max-width:700px){ .zm-pf--v336{ --zm-pf-barra-alto:100px; } .zm-pf--v336 .zm-pf-barra{ padding-top:8px; padding-bottom:6px; } .zm-pf--v336 .zm-pf-indice--barra{ padding:0; } }
/* ── fin zm · ficha v338 ── */

/* ── zm · cita y ficha v339 ── */
/* La ventana de la cita un 15 % más grande que la v336 (Jaime, 28-oct-2026): 1184 → 1362 px, 80 → 92 dvh. */
.modal.zm-cita-modal{ max-width:min(1362px, 100%); max-height:min(calc(100dvh - 40px), 92dvh); }
.zm-cita__grilla{ grid-template-columns:minmax(0,1fr) 390px; }
.zm-cita-banda{ padding-right:440px; }
@media(max-width:1100px){ .zm-cita__grilla{ grid-template-columns:minmax(0,1fr) 340px; } .zm-cita-banda{ padding-right:380px; } }
@media(max-width:920px){ .zm-cita-banda{ padding-right:20px; } .zm-cita__grilla{ grid-template-columns:minmax(0,1fr); } .modal.zm-cita-modal{ max-height:calc(100dvh - 90px); } }
/* Pagar y agendar en la fila del tratamiento del plan (cita y ficha): los botones junto al monto y el panel que se abre debajo. */
.zm-cita-plan__acc{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; margin-top:2px; }
.zm-cita-plan__acc .btn, .zm-pf-plan__dinero .btn, .zm-pf-plan__agendar1 .btn{ min-height:32px; }
.zm-pf-plan__dinero{ gap:8px; }
.zm-pf-plan__agendar1{ grid-column:2 / -1; }
.zm-cita-plan__accion{ grid-column:1 / -1; animation:zm-agv-entra .18s var(--sal) both; }
.zm-pf-plan__accion{ grid-column:2 / -1; animation:zm-agv-entra .18s var(--sal) both; }
@keyframes zm-agv-entra{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.zm-cita-plan__accion .zm-cita-plan-medios, .zm-pf-plan__accion .zm-cita-plan-medios{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:10px 12px; border-radius:14px; background:var(--solido); border:1px solid var(--linea); }
.zm-cita-plan-medios > .hint, .zm-cita-plan-medios__corregir{ flex-basis:100%; grid-column:1 / -1; margin:0; }
.zm-cita-plan-medios__corregir{ font-size:12.5px; text-align:left; padding:0; margin-top:2px; }
/* El agendador de una sesión: cuándo y a qué hora. */
.zm-agv{ display:flex; flex-direction:column; gap:10px; padding:14px 16px; border-radius:16px; background:var(--solido); border:1px solid var(--linea); }
.zm-agv__cab{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 14px; }
.zm-agv__tit{ margin:0; display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600; color:var(--texto); }
.zm-agv__con{ margin:0; font-size:12.5px; color:var(--texto-2); display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.zm-agv__con b{ font-weight:600; color:var(--texto); }
.zm-agv__con select{ margin:0; width:auto; min-height:30px; font-size:12.5px; }
.zm-agv__con .zm-enlace{ font-size:12.5px; }
.zm-agv__mes{ margin:0; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--texto-3); }
.zm-agv__mesfila{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.zm-agv__dias{ display:flex; align-items:center; gap:6px; flex-wrap:nowrap; }
.zm-agv__flecha{ flex:0 0 30px; width:30px; height:52px; border-radius:12px; border:1px solid var(--linea); background:var(--solido); color:var(--texto-2); font-size:20px; line-height:1; cursor:pointer; }
.zm-agv__flecha:disabled{ opacity:.4; cursor:default; }
.zm-agv__dia{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; flex:1 1 0; min-width:38px; max-width:58px; height:52px; padding:0; border-radius:14px; border:1px solid var(--linea); background:var(--solido); color:var(--texto-2); cursor:pointer; line-height:1.1; transition:background .15s ease, color .15s ease, border-color .15s ease; }
.zm-agv__dia small{ font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; }
.zm-agv__dia b{ font-size:16px; font-weight:600; color:var(--texto); }
.zm-agv__dia[data-hoy] small{ color:var(--acento); font-weight:700; }
.zm-agv__dia:hover{ border-color:var(--acento); }
.zm-agv__dia[aria-pressed="true"]{ background:var(--zm-noche-1); border-color:var(--zm-noche-1); color:var(--zm-palido); }
.zm-agv__dia[aria-pressed="true"] small, .zm-agv__dia[aria-pressed="true"] b{ color:var(--zm-palido); }
.zm-agv__fecha{ margin:0; width:auto !important; min-height:34px; padding:4px 8px; font-size:12.5px; }
.zm-agv__horas{ display:flex; flex-wrap:wrap; gap:6px; min-height:36px; }
.zm-agv__horas p{ margin:0; align-self:center; font-size:13px; color:var(--texto-2); }
.zm-agv__hora{ min-width:60px; height:36px; padding:0 12px; border-radius:999px; border:1px solid var(--linea); background:var(--solido); color:var(--texto); font-size:13.5px; font-weight:500; font-variant-numeric:tabular-nums; cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease; }
.zm-agv__hora:hover{ border-color:var(--acento); }
.zm-agv__hora[aria-pressed="true"]{ background:var(--acento); border-color:var(--acento); color:var(--acento-tinta); }
.zm-agv__acc{ display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
html[data-theme="dark"] .zm-agv__dia[aria-pressed="true"]{ background:var(--acento); border-color:var(--acento); }
html[data-theme="dark"] .zm-agv__dia[aria-pressed="true"] small, html[data-theme="dark"] .zm-agv__dia[aria-pressed="true"] b{ color:var(--acento-tinta); }
/* El historial clínico: cada atención dice cómo se abre. */
.zm-at__leer{ font-size:12px; font-weight:600; color:var(--acento); white-space:nowrap; }
@media(max-width:560px){ .zm-agv__dia{ height:48px; } .zm-agv__dia b{ font-size:14px; } .zm-pf-plan__accion, .zm-pf-plan__agendar1{ grid-column:1 / -1; } .zm-cita-plan__acc{ justify-content:flex-start; } }
@media (prefers-reduced-motion: reduce){ .zm-cita-plan__accion, .zm-pf-plan__accion{ animation:none; } }
/* ── fin zm · cita y ficha v339 ── */
/* ── zm · servicio en su fila v340 ──
   «Editar» y «Quitar» de un servicio actúan en SU fila (Jaime, 29-oct-2026: «despliega hacia
   abajo, no es entendible para la secretaria… más claro y con contraste»). La fila activa se
   resalta: azul noche mientras se edita, rojo mientras se confirma quitarla; el precio que se
   va a quitar se tacha y el total dice cómo queda antes de guardar. */
.agenda-servicio.zm-svc-activa{ margin:8px -14px; padding:14px; border-radius:14px; border-top-color:transparent; transition:background-color .18s ease, box-shadow .18s ease; }
.agenda-servicio.zm-svc-activa + .agenda-servicio{ border-top-color:transparent; }
.zm-svc-activa--editar{ background:rgba(13,28,69,.05); box-shadow:inset 0 0 0 2px #0D1C45; }
.zm-svc-activa--quitar{ background:rgba(192,57,43,.07); box-shadow:inset 0 0 0 2px #c0392b; }
.zm-svc-activa--quitar .agenda-servicio-resumen strong{ text-decoration:line-through; color:#a93226; }
.zm-svc-activa .pago-historial-acciones .btn[aria-expanded="true"]{ background:#0D1C45; color:#fff; border-color:#0D1C45; }
.zm-svc-activa--quitar .pago-historial-acciones .btn[aria-expanded="true"]{ background:#c0392b; border-color:#c0392b; }
.zm-svc-panel{ margin-top:12px; display:grid; gap:10px; }
.zm-svc-panel__titulo{ margin:0; display:flex; align-items:center; gap:8px; font-weight:700; font-size:14.5px; color:#0D1C45; }
.zm-svc-activa--quitar .zm-svc-panel__titulo{ color:#a93226; }
.zm-svc-panel__campos{ display:grid; grid-template-columns:minmax(0,1fr) 190px; gap:10px; }
.zm-svc-panel .zm-campo{ margin:0; }
.zm-svc-panel input{ margin:0; width:100%; background:var(--card, #fff); }
.zm-svc-panel__peso{ display:flex; align-items:center; gap:6px; }
.zm-svc-panel__peso input{ font-size:17px; font-weight:600; font-variant-numeric:tabular-nums; }
.zm-svc-panel__total{ margin:0; font-size:14px; }
.zm-svc-panel__total s{ color:var(--muted); margin-right:2px; }
.zm-svc-panel__total b{ font-size:16px; font-variant-numeric:tabular-nums; }
.zm-svc-panel__total small{ display:block; color:var(--muted); font-size:12px; margin-top:3px; }
.zm-svc-panel__error{ margin:0; color:#a93226; font-size:13px; font-weight:600; }
.zm-svc-panel__acciones{ display:flex; gap:8px; justify-content:flex-end; align-items:center; flex-wrap:wrap; }
.zm-svc-panel__otro{ margin-right:auto; font-size:13px; }
@media(max-width:560px){ .zm-svc-panel__campos{ grid-template-columns:minmax(0,1fr); } .agenda-servicio.zm-svc-activa{ margin:8px -8px; padding:12px; } .zm-svc-panel__otro{ margin-right:0; width:100%; text-align:left; } }
@media(prefers-reduced-motion:reduce){ .agenda-servicio.zm-svc-activa{ transition:none; } }
html[data-theme="dark"] .zm-svc-activa--editar{ background:rgba(173,188,252,.08); box-shadow:inset 0 0 0 2px #ADBCFC; }
html[data-theme="dark"] .zm-svc-activa--quitar{ background:rgba(231,76,60,.12); box-shadow:inset 0 0 0 2px #ff8a7a; }
html[data-theme="dark"] .zm-svc-panel__titulo{ color:#ADBCFC; }
html[data-theme="dark"] .zm-svc-activa--quitar .zm-svc-panel__titulo, html[data-theme="dark"] .zm-svc-panel__error, html[data-theme="dark"] .zm-svc-activa--quitar .agenda-servicio-resumen strong{ color:#ff8a7a; }
html[data-theme="dark"] .zm-svc-activa .pago-historial-acciones .btn[aria-expanded="true"]{ background:#ADBCFC; color:#071331; border-color:#ADBCFC; }
html[data-theme="dark"] .zm-svc-activa--quitar .pago-historial-acciones .btn[aria-expanded="true"]{ background:#ff8a7a; color:#2a0a06; border-color:#ff8a7a; }
.zm-cita-modal .zm-svc-panel .btn.danger, .zm-svc-panel .btn.danger{ background:#c0392b; color:#fff; border-color:#c0392b; box-shadow:none; }
.zm-cita-modal .zm-svc-panel .btn.danger:hover:not(:disabled){ filter:brightness(1.08); }
.zm-svc-panel .btn:disabled{ opacity:.5; }
html[data-theme="dark"] .zm-cita-modal .zm-svc-panel .btn.danger{ background:#e5534b; border-color:#e5534b; color:#fff; }
/* ── fin zm · servicio en su fila v340 ── */
/* ── zm · tarjeta del plan que actúa ahí mismo v344 ──
   «Agendar», «Ver todo», «Ver plan» y «Enviar plan» de la tarjeta «Plan de tratamiento» de la ficha
   (Jaime, 30-oct-2026): lo que se abre queda dentro de la tarjeta, enmarcado en azul noche. */
.zm-pf-tesela__acciones{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.zm-pf-tesela__panel{ margin-top:10px; padding:12px; border-radius:12px; background:rgba(13,28,69,.045); box-shadow:inset 0 0 0 1.5px #0D1C45; display:grid; gap:8px; min-width:0; }
/* El agendador ya trae su propio marco: en la tarjeta va sin el segundo, con el borde azul. */
.zm-pf-tesela__panel--agendar{ padding:0; background:none; box-shadow:none; min-width:0; }
.zm-pf-tesela__panel--agendar .zm-agv{ border:1.5px solid #0D1C45; padding:12px; min-width:0; }
/* En una tarjeta angosta los días se desplazan dentro (las flechas siguen a los lados). */
.zm-pf-tesela__panel--agendar .zm-agv__dias{ min-width:0; }
.zm-pf-tesela__panel--agendar .zm-agv__dias{ gap:3px; }
.zm-pf-tesela__panel--agendar .zm-agv__flecha{ flex-basis:22px; width:22px; border-radius:10px; font-size:17px; }
.zm-pf-tesela__panel--agendar .zm-agv__dia{ min-width:0; height:48px; border-radius:11px; }
.zm-pf-tesela__panel--agendar .zm-agv__dia small{ font-size:9.5px; letter-spacing:0; }
.zm-pf-tesela__panel--agendar .zm-agv__dia b{ font-size:14px; }
.zm-pf-tesela__panel--agendar .zm-agv__mesfila{ flex-wrap:wrap; }
html[data-theme="dark"] .zm-pf-tesela__panel--agendar .zm-agv{ border-color:#ADBCFC; }
.zm-pf-tesela__panel-titulo{ margin:0; font-size:13.5px; line-height:1.45; color:var(--texto, inherit); }
.zm-pf-tesela__panel-acciones{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.zm-pf-tesela__opcion{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; text-align:left; padding:9px 11px; border-radius:10px; border:1px solid var(--linea, #e4e2ec); background:var(--solido, #fff); cursor:pointer; font:inherit; }
.zm-pf-tesela__opcion:hover{ border-color:#0D1C45; }
.zm-pf-tesela__opcion small{ color:var(--texto-3, #888); font-size:12px; }
.zm-pf-tesela__aviso{ margin:10px 0 0; padding:9px 11px; border-radius:10px; font-size:13px; line-height:1.45; }
.zm-pf-tesela__aviso[data-tono="ok"]{ background:rgba(31,138,91,.10); color:#156b45; }
.zm-pf-tesela__aviso[data-tono="mal"]{ background:rgba(192,57,43,.09); color:#a93226; }
html[data-theme="dark"] .zm-pf-tesela__panel{ background:rgba(173,188,252,.07); box-shadow:inset 0 0 0 1.5px #ADBCFC; }
html[data-theme="dark"] .zm-pf-tesela__opcion{ background:transparent; border-color:rgba(173,188,252,.3); }
html[data-theme="dark"] .zm-pf-tesela__aviso[data-tono="ok"]{ color:#7fdcae; }
html[data-theme="dark"] .zm-pf-tesela__aviso[data-tono="mal"]{ color:#ff8a7a; }
/* ── fin zm · tarjeta del plan v344 ── */
/* ── zm · aviso de la cita v344 ──
   El resultado de cada acción de la ventana de la cita, en una barra fija al pie del cuerpo:
   siempre a la vista, con color según salió bien o mal (antes, texto gris de 12 px en la
   columna derecha y la ventana saltaba hasta él). */
.zm-cita-aviso{ position:sticky; bottom:0; z-index:5; display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:12px 28px 0; padding:10px 12px 10px 14px; border-radius:12px; background:var(--solido-2, #f4f4f8); color:var(--texto, #111); font-size:14px; line-height:1.45; border-left:4px solid #1F8A5B; box-shadow:0 -6px 18px rgba(7,19,49,.10); }
.zm-cita-aviso[data-tono="mal"]{ border-left-color:#c0392b; background:#fdf1ef; color:#7d1f15; }
.zm-cita-aviso p{ margin:0; flex:1 1 220px; min-width:0; }
.zm-cita-aviso__cerrar{ margin-left:auto; border:0; background:none; font-size:20px; line-height:1; color:inherit; opacity:.6; cursor:pointer; padding:2px 6px; }
.zm-cita-aviso__cerrar:hover{ opacity:1; }
html[data-theme="dark"] .zm-cita-aviso{ background:#0D1C45; color:#e8ecff; }
html[data-theme="dark"] .zm-cita-aviso[data-tono="mal"]{ background:#3a1512; color:#ffd2cb; border-left-color:#ff8a7a; }
@media(max-width:700px){ .zm-cita-modal .zm-cita__cuerpo{ overflow:visible; } .zm-cita-aviso{ margin:12px 16px 0; } }
/* Lo que se trae a la vista no queda bajo la barra superior fija (teléfono y tableta). */
@media(max-width:820px){ .zm-cita-modal .cita-edicion, .zm-cita-modal [data-traer]{ scroll-margin-top:72px; } }
.zm-cita-confirma{ flex:1 1 100%; display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:12px 14px; border-radius:12px; background:#fdf1ef; box-shadow:inset 0 0 0 2px #c0392b; color:#5f1a12; }
.zm-cita-confirma p{ margin:0; flex:1 1 320px; font-size:14px; line-height:1.45; }
.zm-cita-confirma__acc{ display:flex; gap:8px; margin-left:auto; }
.zm-cita-confirma .btn.danger{ background:#c0392b; color:#fff; border-color:#c0392b; }
html[data-theme="dark"] .zm-cita-confirma{ background:#3a1512; color:#ffd2cb; box-shadow:inset 0 0 0 2px #ff8a7a; }
/* ── fin zm · aviso de la cita v344 ── */
/* v344 · En el teléfono el agendador de una sesión del plan cabe entero: la flecha «Días siguientes ›»
   quedaba fuera de la pantalla (fila del plan en la cita y en la ficha). */
@media(max-width:560px){ .zm-agv__dias{ gap:4px; } .zm-agv__dia{ min-width:0; } .zm-agv__flecha{ flex:0 0 26px; width:26px; } }
/* ── zm · plan: unir cita y agendar varios v348 ──
   Caso #4165 (Jaime, 30-oct-2026): la visita del plan que ya tiene hora fuera del plan se dice en ámbar,
   con «Unir al plan» en azul noche y su confirmación dentro de la tarjeta; «Agendar» con varias visitas
   abre casillas y las agenda una tras otra; la cita dice «coincide con la visita pendiente…». */
.zm-pf-sinunir{ margin:10px 0 0; padding:10px 12px; border-radius:12px; background:color-mix(in srgb,var(--zm-ambar,#B7791F) 10%,var(--solido,#fff)); box-shadow:inset 3px 0 0 var(--zm-ambar,#B7791F); display:grid; gap:6px; min-width:0; }
.zm-pf-sinunir__txt{ margin:0; font-size:13px; line-height:1.45; color:var(--texto,#111); }
.zm-pf-sinunir__txt b{ font-weight:600; }
.zm-pf-sinunir__aviso{ margin:0; font-size:12.5px; line-height:1.45; color:var(--texto-2,#444); }
.zm-pf-sinunir__acc{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.zm-pf-sinunir__acc .zm-pf-enlace{ font-size:12.5px; color:var(--acento); text-decoration:none; font-weight:500; }
.zm-pf-sinunir__acc .btn.gold, .zm-pf-unir .btn.gold, .zm-unir .btn.gold, .zm-unir-cita .btn.gold, .zm-pf-cola__lista .btn.gold{ background:var(--zm-noche-2,#0D1C45); border-color:var(--zm-noche-2,#0D1C45); color:#fff; }
.zm-pf-sinunir__acc .btn.gold:hover:not(:disabled), .zm-pf-unir .btn.gold:hover:not(:disabled), .zm-unir .btn.gold:hover:not(:disabled), .zm-unir-cita .btn.gold:hover:not(:disabled), .zm-pf-cola__lista .btn.gold:hover:not(:disabled){ background:var(--zm-noche-1,#071331); }
.zm-pf-unir__efectos, .zm-unir__efectos{ margin:0; padding:0 0 0 18px; display:grid; gap:4px; font-size:13px; line-height:1.45; color:var(--texto,#111); }
.zm-pf-tesela__aviso[data-tono="nada"]{ background:color-mix(in srgb,var(--zm-noche-2,#0D1C45) 6%,var(--solido,#fff)); color:var(--texto-2,#444); }
/* Elegir varias visitas: una fila por visita con su casilla; la marcada en azul noche. */
.zm-pf-cola__filas{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.zm-pf-cola__fila{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:2px 10px; margin:0; padding:9px 11px; border-radius:10px; border:1px solid var(--linea,#e4e2ec); background:var(--solido,#fff); cursor:pointer; font-weight:400; transition:border-color .15s ease, background-color .15s ease; }
.zm-pf-cola__fila input{ width:18px; height:18px; margin:0; accent-color:var(--zm-noche-2,#0D1C45); }
.zm-pf-cola__fila[data-marcada="si"]{ border-color:var(--zm-noche-2,#0D1C45); background:color-mix(in srgb,var(--zm-noche-2,#0D1C45) 5%,var(--solido,#fff)); }
.zm-pf-cola__fila[data-sinunir="si"]{ border-style:dashed; }
.zm-pf-cola__nombre{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; min-width:0; font-size:13px; }
.zm-pf-cola__nombre b{ font-weight:600; color:var(--texto,#111); }
.zm-pf-cola__nombre small{ font-size:12px; color:var(--texto-3,#777); }
.zm-pf-cola__nota{ grid-column:2; font-size:12px; line-height:1.4; color:color-mix(in srgb,var(--zm-ambar,#B7791F) 70%,var(--texto,#111)); }
/* La cola: «Agendando 2 de 3 · …», lo ya agendado con check y el agendador de la visita en curso. Un solo
   marco azul noche (el del panel); el agendador de adentro queda con un borde suave. */
.zm-pf-cola{ display:grid; gap:8px; }
.zm-pf-tesela__panel--agendar.zm-pf-cola{ padding:10px; background:color-mix(in srgb,var(--zm-noche-2,#0D1C45) 4.5%,var(--solido,#fff)); box-shadow:inset 0 0 0 1.5px var(--zm-noche-2,#0D1C45); }
.zm-pf-tesela__panel--agendar.zm-pf-cola .zm-agv{ border:1px solid var(--linea,#e4e2ec); padding:10px; }
html[data-theme="dark"] .zm-pf-tesela__panel--agendar.zm-pf-cola{ background:color-mix(in srgb,var(--zm-palido,#ADBCFC) 7%,transparent); box-shadow:inset 0 0 0 1.5px var(--zm-palido,#ADBCFC); }
html[data-theme="dark"] .zm-pf-tesela__panel--agendar.zm-pf-cola .zm-agv{ border-color:color-mix(in srgb,var(--zm-palido,#ADBCFC) 28%,transparent); }
.zm-pf-cola__cab{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.zm-pf-cola__paso{ margin:0; font-size:13px; line-height:1.4; color:var(--texto,#111); }
.zm-pf-cola__paso b{ color:var(--zm-noche-2,#0D1C45); font-weight:700; }
.zm-pf-cola__hechos{ list-style:none; margin:0; padding:0; display:grid; gap:3px; font-size:12.5px; color:var(--ok); }
.zm-pf-cola__hechos li{ display:flex; align-items:flex-start; gap:6px; min-width:0; line-height:1.4; }
.zm-pf-cola__hechos li svg{ flex:0 0 auto; margin-top:2px; }
.zm-pf-cola > .zm-pf-cola__nota{ margin:0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* El agendador avisa si la visita ya tiene hora fuera del plan. */
.zm-agv__aviso{ margin:0; padding:8px 10px; border-radius:10px; font-size:12.5px; line-height:1.45; background:color-mix(in srgb,var(--zm-ambar,#B7791F) 12%,var(--solido,#fff)); color:var(--texto,#111); box-shadow:inset 3px 0 0 var(--zm-ambar,#B7791F); }
.zm-plan-sinunir{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 10px; padding:9px 11px; border-radius:10px; font-size:12.5px; line-height:1.45; background:color-mix(in srgb,var(--zm-ambar,#B7791F) 12%,var(--solido,#fff)); box-shadow:inset 3px 0 0 var(--zm-ambar,#B7791F); }
.zm-plan-sinunir p{ margin:0; flex:1 1 280px; color:var(--texto,#111); }
/* La ficha de la cita: «Esta cita coincide con la visita pendiente de … ¿Es la misma?». */
.zm-unir-cita{ display:grid; gap:8px; margin:0 0 12px; }
.zm-unir-cita__franja{ display:grid; gap:8px; padding:12px 14px; border-radius:14px; background:color-mix(in srgb,var(--zm-noche-2,#0D1C45) 5%,var(--solido,#fff)); box-shadow:inset 0 0 0 1.5px var(--zm-noche-2,#0D1C45); min-width:0; }
.zm-unir-cita__franja[data-unible="no"]{ background:color-mix(in srgb,var(--zm-ambar,#B7791F) 10%,var(--solido,#fff)); box-shadow:inset 0 0 0 1.5px var(--zm-ambar,#B7791F); }
.zm-unir-cita__txt{ margin:0; display:flex; align-items:flex-start; gap:8px; font-size:14px; line-height:1.45; color:var(--texto,#111); }
.zm-unir-cita__txt svg{ flex:0 0 auto; margin-top:2px; color:var(--zm-noche-2,#0D1C45); }
.zm-unir-cita__aviso{ margin:0; font-size:13px; line-height:1.45; color:var(--texto-2,#444); }
.zm-unir-cita__acc{ display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.zm-unir{ display:grid; gap:8px; padding:10px 12px; border-radius:12px; background:var(--solido,#fff); border:1px solid var(--linea,#e4e2ec); animation:zm-unir-entra .18s var(--sal,ease-out) both; }
.zm-unir__titulo{ margin:0; font-size:13.5px; line-height:1.45; color:var(--texto,#111); }
.zm-unir__error{ margin:0; font-size:13px; font-weight:600; color:var(--danger); }
.zm-unir__acc{ display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.zm-unir-agregar{ display:grid; gap:8px; margin:8px 0; padding:10px 12px; border-radius:12px; background:color-mix(in srgb,var(--zm-noche-2,#0D1C45) 5%,var(--solido,#fff)); box-shadow:inset 0 0 0 1.5px var(--zm-noche-2,#0D1C45); }
.btn.zm-unir-chip{ padding:3px 10px; font-size:11.5px; border-color:var(--zm-noche-2,#0D1C45); color:var(--zm-noche-2,#0D1C45); font-weight:600; }
@keyframes zm-unir-entra{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
html[data-theme="dark"] .zm-pf-sinunir, html[data-theme="dark"] .zm-agv__aviso, html[data-theme="dark"] .zm-plan-sinunir, html[data-theme="dark"] .zm-unir-cita__franja[data-unible="no"]{ background:color-mix(in srgb,var(--zm-ambar,#B7791F) 16%,transparent); }
html[data-theme="dark"] .zm-unir-cita__franja, html[data-theme="dark"] .zm-unir-agregar{ background:color-mix(in srgb,var(--zm-palido,#ADBCFC) 7%,transparent); box-shadow:inset 0 0 0 1.5px var(--zm-palido,#ADBCFC); }
html[data-theme="dark"] .zm-unir-cita__txt svg, html[data-theme="dark"] .zm-pf-cola__paso b{ color:var(--zm-palido,#ADBCFC); }
html[data-theme="dark"] .zm-pf-sinunir__acc .btn.gold, html[data-theme="dark"] .zm-pf-unir .btn.gold, html[data-theme="dark"] .zm-unir .btn.gold, html[data-theme="dark"] .zm-unir-cita .btn.gold, html[data-theme="dark"] .zm-pf-cola__lista .btn.gold{ background:var(--zm-palido,#ADBCFC); border-color:var(--zm-palido,#ADBCFC); color:var(--zm-noche-1,#071331); }
/* En oscuro el «:hover» de arriba pintaba el fondo azul noche bajo el texto azul noche: «Unir al plan» quedaba
   como una píldora vacía mientras el puntero seguía encima (se vio al abrir su confirmación). */
html[data-theme="dark"] .zm-pf-sinunir__acc .btn.gold:hover:not(:disabled), html[data-theme="dark"] .zm-pf-unir .btn.gold:hover:not(:disabled), html[data-theme="dark"] .zm-unir .btn.gold:hover:not(:disabled), html[data-theme="dark"] .zm-unir-cita .btn.gold:hover:not(:disabled), html[data-theme="dark"] .zm-pf-cola__lista .btn.gold:hover:not(:disabled){ background:color-mix(in srgb,var(--zm-palido,#ADBCFC) 82%,#fff); border-color:color-mix(in srgb,var(--zm-palido,#ADBCFC) 82%,#fff); color:var(--zm-noche-1,#071331); }
html[data-theme="dark"] .zm-pf-cola__fila{ background:transparent; border-color:color-mix(in srgb,var(--zm-palido,#ADBCFC) 30%,transparent); }
html[data-theme="dark"] .zm-pf-cola__fila[data-marcada="si"]{ border-color:var(--zm-palido,#ADBCFC); background:color-mix(in srgb,var(--zm-palido,#ADBCFC) 8%,transparent); }
html[data-theme="dark"] .zm-pf-cola__fila input{ accent-color:var(--zm-palido,#ADBCFC); }
html[data-theme="dark"] .btn.zm-unir-chip{ border-color:var(--zm-palido,#ADBCFC); color:var(--zm-palido,#ADBCFC); }
@media(max-width:700px){
  .zm-pf-sinunir__acc .btn, .zm-pf-unir .zm-pf-tesela__panel-acciones .btn, .zm-unir__acc .btn, .zm-pf-cola__lista .zm-pf-tesela__panel-acciones .btn{ flex:1 1 auto; min-height:40px; }
  .zm-pf-cola__fila{ padding:11px 12px; }
  .zm-pf-cola__fila input{ width:20px; height:20px; }
  .zm-unir-cita__franja{ padding:12px; }
  .zm-unir-cita__acc .btn{ flex:1 1 100%; min-height:40px; }
}
/* Ronda 2 (31-oct): «Unir» de «Próxima cita» con área de toque de 44 px sin cambiar su tamaño; «＋ Agregar»
   en otra cita avisa que esa visita ya tiene hora fuera del plan y pide confirmar; «Editar plan» abierto
   desde «Quitar del plan» marca la línea; la gestión marca la línea con hora fuera del plan. */
.zm-pf-estados__grupo .zm-pf-enlace{ position:relative; }
.zm-pf-estados__grupo .zm-pf-enlace::after{ content:""; position:absolute; left:50%; top:50%; width:max(100%,44px); height:max(100%,44px); transform:translate(-50%,-50%); }
.zm-unir-fuera{ margin:6px 0 0; padding:8px 10px; border-radius:10px; display:grid; gap:6px; font-size:12.5px; line-height:1.45; color:var(--texto,#111); background:color-mix(in srgb,var(--zm-ambar,#B7791F) 12%,var(--solido,#fff)); box-shadow:inset 3px 0 0 var(--zm-ambar,#B7791F); }
.zm-unir-fuera p{ margin:0; }
.zm-unir-fuera__ok{ display:flex; align-items:center; gap:8px; min-height:32px; margin:0; font-weight:600; cursor:pointer; color:var(--texto,#111); }
.zm-unir-fuera__ok input{ width:18px; height:18px; margin:0; accent-color:var(--zm-noche-2,#0D1C45); }
.zm-plan-destacar{ box-shadow:0 0 0 2px var(--zm-ambar,#B7791F); }
.zm-plan-destacar__nota{ margin:0 0 10px; padding:9px 11px; border-radius:10px; font-size:13px; line-height:1.45; color:var(--texto,#111); background:color-mix(in srgb,var(--zm-ambar,#B7791F) 12%,var(--solido,#fff)); box-shadow:inset 3px 0 0 var(--zm-ambar,#B7791F); }
.zm-plan-etiqueta.zm-plan-destacar__tag, .zm-plan-etiqueta.zm-plan-conhora{ background:color-mix(in srgb,var(--zm-ambar,#B7791F) 14%,var(--solido,#fff)); color:color-mix(in srgb,var(--zm-ambar,#B7791F) 60%,var(--texto,#111)); border-color:color-mix(in srgb,var(--zm-ambar,#B7791F) 45%,transparent); }
.zm-plan-vacio{ margin:4px 0 12px; font-size:13px; line-height:1.45; color:var(--texto-2,#444); }
html[data-theme="dark"] .zm-unir-fuera, html[data-theme="dark"] .zm-plan-destacar__nota{ background:color-mix(in srgb,var(--zm-ambar,#B7791F) 16%,transparent); }
html[data-theme="dark"] .zm-plan-etiqueta.zm-plan-destacar__tag, html[data-theme="dark"] .zm-plan-etiqueta.zm-plan-conhora{ background:color-mix(in srgb,var(--zm-ambar,#B7791F) 18%,transparent); color:color-mix(in srgb,var(--zm-ambar,#B7791F) 45%,#fff); }
html[data-theme="dark"] .zm-unir-fuera__ok input{ accent-color:var(--zm-palido,#ADBCFC); }
@media (prefers-reduced-motion: reduce){ .zm-unir{ animation:none; } .zm-pf-cola__fila{ transition:none; } }
/* ── fin zm · plan: unir cita y agendar varios v348 ── */
/* ── zm · documento del plan v354 (Adhara, 5-nov-2026): cada plan del recorrido con «Ver plan»,
   «Descargar PDF» y «Enviar plan»; la tarjeta elige el plan cuando hay más de uno vigente ── */
html .zm-pf-tesela__doc, html[data-theme="dark"] .zm-pf-tesela__doc{ flex:1 1 100%; min-width:0; max-width:100%; min-height:38px; margin:0; padding:6px 10px; font-size:13px; }
.zm-pf-plan-doc{ flex:1 1 100%; display:grid; gap:8px; min-width:0; }
.zm-pf-plan-doc__acc{ display:flex; flex-wrap:wrap; gap:8px; }
.zm-pf-plan-doc .zm-pf-tesela__panel, .zm-pf-plan-doc .zm-pf-tesela__aviso{ margin-top:0; }
@media(max-width:700px){ .zm-pf-plan-doc__acc .btn{ flex:1 1 auto; min-height:40px; } }
/* ── fin zm · documento del plan v354 ── */