/* SayWorld · design system. Replica el sistema visual de la maqueta de referencia (archivada en vault-OS/SAYWORLD-archivo/maqueta-referencia.html).
   Desktop: sidebar navy fija. Mobile: tabbar abajo con safe areas iOS. */

:root {
  --navy: #1c2b48; --navy2: #233559; --cel: #8eb1d1; --cel2: #a7c7e7; --celsoft: #EAF1F7;
  --bg: #F4F6F8; --ink: #1c2b48; --mut: #5B6B7C; --mut2: #8494A5; --line: #E3E9EE;
  --green: #2D8C4E; --greensoft: #E8F5EC;
  --red: #C62828; --redsoft: #FBEAEA; --link: #4E7CA6; --orange: #E84419; --orangesoft: #FFF0EB;
  /* Tintes consolidados en la auditoría de diseño (sesión 4): antes andaban sueltos
     como hex crudos por las páginas. Toda la app los usa por var(), nunca por hex. */
  --gris: #EEF1F4;      /* fondos neutros: chip gris, avatares bucket, barras */
  --fondo2: #FAFBFC;    /* fondo de celda o fila apenas más claro que --bg */
  --celink: #37627F;    /* texto celeste oscuro legible sobre celsoft */
  --celtxt: #4E6E8C;    /* texto de chips celestes apagados (chip.yel) */
  --navy3: #33465F;     /* navy intermedio para chips sobre navy */
  --redline: #F3CFCF;   /* borde del rojo suave */
  --red2: #7A1B1B;      /* tinta sobre fondos rojos suaves (badge rojo) */
  --sidebar-w: 240px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; }
/* html y body NO scrollean nunca: el único scroll vertical de la app es el del
   contenedor del contenido (.main), con su barra pegada al borde derecho de la
   ventana. Con el body scrolleando la página entera, la barra nativa quedaba
   flotando en la franja entre el sidebar fijo y el contenido (sesión 9). */
html, body { height: 100%; overflow: hidden; }
body {
  font-family: 'Outfit', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

/* Barras de scroll de TODA la app: finas, pista transparente, pulgar traslúcido con
   esquinas redondeadas y sin flechas. Ninguna barra nativa del sistema queda visible.
   Sobre fondos claros el pulgar es gris; sobre el navy del sidebar, blanco traslúcido. */
* { scrollbar-width: thin; scrollbar-color: rgba(28,43,72,.28) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(28,43,72,.28); border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(28,43,72,.45); }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
*::-webkit-scrollbar-corner { background: transparent; }
.side { scrollbar-color: rgba(255,255,255,.28) transparent; }
.side::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); }
.side::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.45); }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

/* ===== Utilidades de layout (mismas clases que la maqueta) ===== */
.f { display: flex; align-items: center; }
.fc { display: flex; flex-direction: column; }
.g4 { gap: 4px; } .g6 { gap: 6px; } .g8 { gap: 8px; } .g10 { gap: 10px; }
.g12 { gap: 12px; } .g14 { gap: 14px; } .g16 { gap: 16px; } .g20 { gap: 20px; }
.sp { flex: 1; } .grow { flex: 1; min-width: 0; } .cen { justify-content: center; }
.acen { align-items: center; } .tc { text-align: center; } .w100 { width: 100%; }
.mt-a { margin-top: auto; } .wrap { flex-wrap: wrap; }

/* ===== Tipografía ===== */
.h1 { font-size: 22px; font-weight: 700; color: var(--ink); }
.h2 { font-size: 16.5px; font-weight: 700; color: var(--ink); }
.h3 { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.h4 { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.b1 { font-size: 13px; font-weight: 500; color: var(--mut); line-height: 1.45; }
.s1 { font-size: 12px; font-weight: 500; color: var(--mut); }
.s2 { font-size: 11.5px; font-weight: 500; color: var(--mut2); line-height: 1.45; }
.lab { font-size: 10.5px; font-weight: 600; color: var(--mut); letter-spacing: .07em; text-transform: uppercase; }
.lab.oncel { color: var(--cel2); }
.lk { font-size: 13px; font-weight: 600; color: var(--link); }
.gr { color: var(--green); } .wt { color: #fff; } .rd { color: var(--red); } .yl { color: var(--mut); }
.big { font-size: 36px; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -.02em; }

/* Marca */
.wm { font-weight: 800; color: var(--navy); line-height: 1; }
.wm i { font-style: normal; color: var(--cel); }

/* ===== Cards ===== */
.card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.card.navy { background: var(--navy); border: none; }
.card.soft { background: var(--celsoft); border: none; }
.card.gsoft { background: var(--greensoft); border: none; }
.card.ysoft { background: var(--celsoft); border: none; }
.card.rsoft { background: var(--redsoft); border: none; }
.card.p0 { padding: 0; overflow: hidden; }

/* ===== Botones (touch target 44px en los principales) ===== */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--navy); color: #fff; font-weight: 600; font-size: 15px;
  padding: 13px 22px; border-radius: 12px; border: none; text-align: center; min-height: 44px;
}
.btn.sec { background: #fff; color: var(--navy); border: 1.5px solid var(--navy); }
.btn.grn { background: var(--green); }
.btn.out { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn.ghost { background: rgba(255,255,255,.16); color: #fff; }
.btn.sm { padding: 9px 16px; font-size: 13px; border-radius: 10px; min-height: 38px; }
.btn.xs { padding: 7px 12px; font-size: 12px; border-radius: 9px; min-height: 32px; }
.btn:disabled { opacity: .55; cursor: default; }

/* ===== Chips ===== */
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px;
  background: var(--celsoft); color: var(--navy); font-size: 11px; font-weight: 600; white-space: nowrap;
}
.chip.grn { background: var(--greensoft); color: var(--green); }
.chip.yel { background: #E7EEF5; color: var(--celtxt); }
.chip.red { background: var(--redsoft); color: var(--red); }
.chip.nvy { background: var(--navy); color: #fff; }
.chip.org { background: var(--orangesoft); color: var(--orange); }
.chip.gry { background: var(--gris); color: var(--mut); }
.chip.onnvy { background: rgba(255,255,255,.14); color: #fff; }
.chip.sm { padding: 3px 9px; font-size: 10.5px; }

/* ===== Stats ===== */
.stat { flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; min-width: 0; }
.stat b { display: block; font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.15; }
.stat span { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 600; color: var(--mut); letter-spacing: .06em; text-transform: uppercase; }

/* ===== Formularios ===== */
.inp { display: flex; flex-direction: column; gap: 6px; }
.inp label { font-size: 12.5px; font-weight: 500; color: var(--mut); }
.fld {
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  font-size: 13.5px; color: var(--ink); display: flex; align-items: center; gap: 8px; min-height: 44px; width: 100%;
}
.fld.wh { background: #fff; }
.fld:focus, .ta:focus { outline: none; border-color: var(--cel); background: #fff; box-shadow: 0 0 0 3px rgba(142,177,209,.22); }
.fld::placeholder, .ta::placeholder { color: var(--mut2); }
.ta {
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  font-size: 13px; color: var(--ink); line-height: 1.5; min-height: 96px; width: 100%; resize: vertical;
}
.ta.wh { background: #fff; }

/* ===== Logos y avatares ===== */
.logo { display: flex; align-items: center; justify-content: center; border-radius: 12px; font-weight: 600; flex: none; }
.l28 { width: 28px; height: 28px; font-size: 10.5px; border-radius: 9px; }
.l32 { width: 32px; height: 32px; font-size: 11px; border-radius: 10px; }
.l36 { width: 36px; height: 36px; font-size: 12px; }
.l40 { width: 40px; height: 40px; font-size: 13px; }
.l44 { width: 44px; height: 44px; font-size: 13px; border-radius: 13px; }
.l48 { width: 48px; height: 48px; font-size: 15px; border-radius: 14px; }
.l64 { width: 64px; height: 64px; font-size: 19px; border-radius: 18px; }
.av { border-radius: 999px !important; background: var(--cel2); color: var(--navy); }
.av.o { background: var(--orangesoft); color: var(--orange); }
.logo.bk { background: var(--gris); color: var(--mut); } /* buckets sin login: neutro, sin color de persona */
.av.g { background: var(--greensoft); color: var(--green); }
.mark { background: var(--celsoft); color: var(--navy); }

.dot { width: 8px; height: 8px; border-radius: 99px; background: var(--green); flex: none; }
.dot.y { background: var(--cel); } .dot.r { background: var(--red); } .dot.c { background: var(--cel); }
.divv { height: 1px; background: var(--line); flex: none; }

/* ===== Íconos ===== */
.ic { width: 20px; height: 20px; flex: none; color: var(--ink); }
.ic.s14 { width: 14px; height: 14px; } .ic.s16 { width: 16px; height: 16px; }
.ic.s18 { width: 18px; height: 18px; } .ic.s24 { width: 24px; height: 24px; }

/* ===== Segmentos ===== */
/* .seg (botones pastilla) se eliminó en la auditoría de la sesión 4: la regla de oro
   manda desplegables estilo Attio para toda elección. Si volvés a necesitar elegir
   entre opciones, usá montarDesplegable de js/ui.js. */

/* ===== Listas ===== */
.lrow { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.lrow + .lrow { border-top: 1px solid var(--line); }
.chev { font-size: 16.5px; font-weight: 700; color: var(--mut2); }

/* ===== Tarjeta de tarea ===== */
/* Sin franjas de color al costado: los estados van en chips y tipografía (regla de proyecto). */
.tcard {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px;
  display: flex; gap: 11px; align-items: flex-start; position: relative; overflow: hidden;
}

/* ===== Notificaciones ===== */
.noti { display: flex; gap: 12px; padding: 14px 16px; align-items: flex-start; }
.noti + .noti { border-top: 1px solid var(--line); }
.noti .nic { width: 36px; height: 36px; border-radius: 11px; background: var(--celsoft); display: flex; align-items: center; justify-content: center; flex: none; }
.noti .nic.y { background: var(--celsoft); } .noti .nic.g { background: var(--greensoft); } .noti .nic.r { background: var(--redsoft); }

/* ===== Tablas ===== */
.tbl { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.tbl .tr { display: flex; align-items: center; padding: 12px 18px; }
.tbl .tr + .tr { border-top: 1px solid var(--line); }
.tbl .th { background: var(--celsoft); border-top: none !important; }
.tbl .th span { font-size: 10.5px; font-weight: 600; color: var(--mut); letter-spacing: .07em; text-transform: uppercase; }
.tbl .tr.warn { background: var(--fondo2); }
.c1 { flex: 1; min-width: 0; }
.cw60 { width: 60px; flex: none; } .cw80 { width: 80px; flex: none; } .cw90 { width: 90px; flex: none; }
.cw110 { width: 110px; flex: none; } .cw120 { width: 120px; flex: none; } .cw130 { width: 130px; flex: none; }
.cw140 { width: 140px; flex: none; } .cw150 { width: 150px; flex: none; } .cw170 { width: 170px; flex: none; }
.cw200 { width: 200px; flex: none; }
/* Toda celda de ancho fijo recorta lo que no entra: sin min-width:0 + overflow el texto
   largo de una columna se montaba sobre la vecina (bug de Fase actual en Producciones). */
.tbl .tr > * { min-width: 0; }
[class^="cw"], [class*=" cw"] { overflow: hidden; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tblwrap { overflow-x: auto; }
.score { width: 34px; height: 26px; border-radius: 8px; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; flex: none; }
.score.mid { background: var(--celsoft); color: var(--navy); }
.score.low { background: var(--gris); color: var(--mut); }

.per { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 9px 14px; font-size: 12.5px; font-weight: 600; color: var(--mut); display: flex; align-items: center; gap: 8px; white-space: nowrap; }

/* ===== Kanban ===== */
/* Las columnas se estiran a la misma altura (align-items: stretch): una columna
   vacía muestra su cuerpo con el estado vacío, nunca queda solo el header. */
.kb { display: flex; gap: 12px; align-items: stretch; overflow-x: auto; min-height: 60vh; }
.kcol { flex: 1; min-width: 210px; background: var(--gris); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 9px; }
.kcol .kh { display: flex; align-items: center; gap: 7px; padding: 4px 6px 6px; }
.kcol .kh b { font-size: 12px; font-weight: 700; color: var(--ink); letter-spacing: .1px; }
.kcol .kh span { font-size: 11px; font-weight: 600; color: var(--mut2); background: #fff; border-radius: 99px; padding: 1px 7px; margin-left: auto; }
.kc { background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 10px 11px; display: flex; flex-direction: column; gap: 7px; text-align: left; }
.kc .kt { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.kvacia { border: 1.5px dashed var(--line); border-radius: 11px; padding: 18px 10px; text-align: center; font-size: 12px; color: var(--mut2); }
/* Arrastre (desktop): la tarjeta agarra el cursor, las columnas destino se
   marcan al levantar y la que está debajo del puntero se prende. */
.kc[draggable="true"] { cursor: grab; }
.kc.arrastrando { opacity: .45; cursor: grabbing; }
.kcol.recibe { outline: 1.5px dashed var(--cel); outline-offset: -1.5px; }
.kcol.recibe .kvacia { border-color: var(--cel); color: var(--celtxt); }
.kcol.encima { outline: 2px solid var(--cel); background: var(--celsoft); }

/* ===== Barras ===== */
.bars { display: flex; align-items: flex-end; gap: 7px; height: 104px; }
.bars i { flex: 1; background: var(--cel2); border-radius: 4px 4px 0 0; }
.bars i.hi { background: var(--navy); }
.hbar { height: 9px; border-radius: 5px; background: var(--gris); overflow: hidden; flex: 1; }
.hbar i { display: block; height: 100%; border-radius: 5px; background: var(--cel); }
.hbar i.full { background: var(--cel); }
.hbar i.over { background: var(--red); }
.hbar i.ok { background: var(--green); }

/* ===== Toggle ===== */
.tog { width: 40px; height: 23px; border-radius: 99px; background: #E7EBEF; position: relative; flex: none; border: none; }
.tog i { position: absolute; top: 2.5px; left: 3px; width: 18px; height: 18px; border-radius: 99px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.tog.on { background: var(--navy); }
.tog.on i { left: auto; right: 3px; box-shadow: none; }

/* ===== Upload ===== */
.upl { border: 1.5px dashed var(--cel); background: var(--celsoft); border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 18px; text-align: center; }

/* ===== Nota ===== */
.note-n { background: #F3F7FB; border: 1px dashed var(--cel); border-radius: 10px; padding: 9px 12px; font-size: 11px; font-weight: 500; color: var(--celink); line-height: 1.5; }

/* ===== SOPs y lotes del Área 3 (sesión 8) ===== */
/* Sin franjas de color al costado: el estado se cuenta con chips y tipografía. */
.paso { display: flex; gap: 10px; align-items: flex-start; }
.paso .pn {
  width: 22px; height: 22px; border-radius: 7px; background: var(--celsoft); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex: none; margin-top: 1px;
}
.paso .pq { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 500; color: var(--mut2); line-height: 1.45; }
.sopcod {
  font-size: 11.5px; font-weight: 700; color: var(--mut2); font-variant-numeric: tabular-nums;
  width: 40px; flex: none; letter-spacing: .01em;
}
.paq-hd { display: flex; align-items: center; gap: 11px; padding: 13px 15px; cursor: pointer; width: 100%; background: none; border: none; text-align: left; }
.paq-hd:hover { background: var(--fondo2); }
.paq-bd { border-top: 1px solid var(--line); background: var(--fondo2); }
.paq-n {
  width: 30px; height: 30px; border-radius: 9px; background: var(--gris); color: var(--mut);
  display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; flex: none;
}
.paq-n.on { background: var(--navy); color: #fff; }
.srow { display: flex; align-items: center; gap: 10px; padding: 9px 15px; border-top: 1px solid var(--line); width: 100%; background: none; border-left: none; border-right: none; border-bottom: none; text-align: left; cursor: pointer; }
.srow:hover { background: #fff; }
.srow.vacia { cursor: pointer; }
.srow.vacia .h4 { color: var(--mut2); font-weight: 500; }

/* Línea de los 11 estados de producción de un producto: segmentos llenos hasta el
   estado actual. Verde recién al entregar (o devolver); antes, celeste del branding. */
.lestados { display: flex; gap: 3px; width: 100%; }
.lestados i { height: 5px; flex: 1; border-radius: 3px; background: #E3E9EE; }
.lestados i.on { background: var(--cel); }
.lestados i.fin { background: var(--green); }

/* ============================================================
   SHELL DE LA APP
   ============================================================ */

/* El layout ocupa EXACTO el alto de la ventana: sidebar fijo a la izquierda (con su
   propio scroll solo si no entra) y el contenido a la derecha como única región de
   scroll vertical de la página. */
.app { display: flex; height: 100%; }

/* --- Sidebar desktop --- */
.side {
  width: var(--sidebar-w); background: var(--navy); display: flex; flex-direction: column;
  padding: 26px 20px 22px; flex: none;
  position: fixed; top: 0; bottom: 0; left: 0; overflow-y: auto; z-index: 30;
}
.side .wm { font-size: 22px; color: #fff; }
.side .wm i { color: var(--cel); }
.side .sub { font-size: 9.5px; font-weight: 500; color: var(--cel2); letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; }
.snav { display: flex; flex-direction: column; gap: 3px; margin-top: 20px; }
.snav .sgrp { font-size: 9.5px; font-weight: 600; color: rgba(167,199,231,.6); letter-spacing: .1em; text-transform: uppercase; margin: 11px 12px 3px; }
.snav a { display: flex; align-items: center; gap: 9px; padding: 7.5px 12px; border-radius: 9px; color: var(--cel2); font-size: 12.5px; font-weight: 500; }
.snav a .ic { color: currentColor; }
.snav a.on { background: rgba(255,255,255,.12); color: #fff; font-weight: 600; }
.snav .nbadge { margin-left: auto; background: var(--cel); color: var(--navy); min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.snav .nbadge.r { background: #F0A8A8; color: var(--red2); }
/* El badge arranca hidden hasta que llega el número: display:flex no debe pisar a [hidden]. */
.nbadge[hidden] { display: none !important; }
/* Misma ley para las filas: una .lrow oculta (ej. el mensaje de la foto en Perfil)
   no puede quedar como banda vacía porque display:flex le gane a [hidden]. */
.lrow[hidden] { display: none !important; }

/* Bloque del nombre + menú de modo vista */
.suser {
  margin-top: auto; display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; text-align: left; padding: 10px 8px; border-radius: 10px; min-height: 44px;
}
.suser:hover { background: rgba(255,255,255,.08); }
.suser .logo { background: rgba(255,255,255,.14); color: #fff; border-radius: 10px; }
.suser .sunom { font-size: 13px; font-weight: 600; color: #fff; }
.suser .surol { font-size: 9.5px; font-weight: 600; color: var(--cel2); letter-spacing: .06em; text-transform: uppercase; }

/* Avatar con foto: la imagen tapa las iniciales, que quedan de fallback abajo */
.logo.confoto { position: relative; overflow: hidden; }
.logo.confoto img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit; display: block;
}

/* Cartel beta: discreto, gris con borde sutil */
.beta-badge {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  background: rgba(255,255,255,.07); color: rgba(226,233,240,.75); border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px; padding: 5px 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
}

/* --- Main --- */
.main {
  flex: 1; min-width: 0; margin-left: var(--sidebar-w);
  height: 100%; overflow-y: auto;
  padding: 26px 30px 40px; display: flex; flex-direction: column; gap: 16px;
}

/* --- Banner modo vista ---
   El banner es sticky DENTRO de .main (el contenedor de scroll). No se usa
   margen negativo vertical: sticky lo anula clavando el banner contra el borde
   del contenido, y el padding-top de .main quedaba visible como una franja
   clara arriba del banner (bug de la sesión 7). En su lugar, el shell marca
   .main con .con-banner (padding-top 0) y el banner separa al header con su
   margen inferior: 10 + gap 16 = los mismos 26px del padding normal. */
.main.con-banner { padding-top: 0; }
.vista-banner {
  position: sticky; top: 0; z-index: 25;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; margin: 0 -30px 10px; font-size: 12.5px; font-weight: 600;
}
.vista-banner .ic { color: var(--cel2); }
.vista-banner .btn {
  min-height: 34px; padding: 6px 14px; font-size: 12px; border-radius: 8px;
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.45);
}
.vista-banner .btn:hover { background: rgba(255,255,255,.12); }

/* --- Tabbar mobile --- */
.tabbar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: #fff; border-top: 1px solid var(--line);
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 10px; font-weight: 500; color: var(--mut2); min-height: 44px; border-radius: 8px;
}
.tabbar a.on { color: var(--navy); font-weight: 600; }
.tabbar a .ic { width: 22px; height: 22px; color: currentColor; }

/* --- Menú de usuarios (modo vista) --- */
.menu-vista {
  position: fixed; z-index: 60; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(16,28,50,.3); padding: 8px; width: 250px; max-height: 70vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}
.menu-vista .mv-t { font-size: 10.5px; font-weight: 600; color: var(--mut); letter-spacing: .07em; text-transform: uppercase; padding: 8px 10px 4px; }
.menu-vista button {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 9px;
  background: none; border: none; text-align: left; font-size: 12.5px; font-weight: 500; color: var(--ink); min-height: 44px; width: 100%;
}
.menu-vista button:hover { background: var(--celsoft); }
.menu-vista button.on { background: var(--celsoft); font-weight: 600; }
.menu-vista .divv { margin: 6px 4px; }

/* --- Overlay para menús y sheets --- */
.overlay { position: fixed; inset: 0; z-index: 50; background: rgba(16,24,40,.45); }
.overlay.trans { background: transparent; }

/* --- Action sheet mobile --- */
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff;
  border-radius: 22px 22px 0 0; padding: 12px 20px calc(30px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 12px; box-shadow: 0 -10px 40px rgba(16,28,50,.25);
}
.grab { width: 44px; height: 5px; border-radius: 3px; background: var(--line); align-self: center; }

/* --- Estados vacíos --- */
.vacio {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 44px 24px; text-align: center; background: #fff; border: 1px dashed var(--line); border-radius: 16px;
}
.vacio .ic { width: 34px; height: 34px; color: var(--mut2); }

/* --- Esqueletos de carga (forma real del contenido) --- */
@keyframes brillo { 0% { opacity: .55; } 50% { opacity: 1; } 100% { opacity: .55; } }
.skel { border-radius: 8px; background: #E7EBEF; animation: brillo 1.3s ease-in-out infinite; }
.side .skel, .tabbar .skel { background: rgba(255,255,255,.16); }
.skel.txt { height: 12px; width: 90px; }
.skel.txt.s { height: 9px; width: 60px; }
.skel.circ { border-radius: 99px; }

/* --- Modal --- */
.modal { position: fixed; inset: 0; background: rgba(16,24,40,.5); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 70; }
.mbox { background: #fff; border-radius: 18px; padding: 20px; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 18px 50px rgba(16,28,50,.3); }

/* ===== Cuestionario SÍ/NO (C7) ===== */
.qq { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; display: flex; align-items: center; gap: 10px; }
.qq .qt { font-size: 12.5px; font-weight: 500; color: var(--ink); flex: 1; line-height: 1.35; }
.yn { display: flex; gap: 5px; flex: none; }
.yn button {
  padding: 5px 13px; border-radius: 8px; border: 1px solid var(--line); background: #fff;
  font-size: 11.5px; font-weight: 600; color: var(--mut2); min-height: 34px; min-width: 44px;
}
.yn button.si { background: var(--greensoft); border-color: #BFE3CC; color: var(--green); }
.yn button.no { background: var(--redsoft); border-color: var(--redline); color: var(--red); }

/* ===== Aviso simulado (estilo F2, mensaje de bot) ===== */
.gmsg { display: flex; gap: 10px; align-items: flex-start; }
.gmsg .gav { width: 34px; height: 34px; border-radius: 9px; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: none; }
.gmsg .gav.verde { background: var(--green); }
.gmsg .gav.rojo { background: var(--red); }
.gbox { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; flex: 1; min-width: 0; }
.gbox.verde { border-color: #BFE3CC; background: var(--greensoft); }
.gbox.rojo { border-color: var(--redline); background: var(--redsoft); }

/* ===== Panel: modal en desktop, sheet en mobile ===== */
/* Una sola región de scroll: el .panel-bd. El .panel en sí NO scrollea (si no, quedaba
   la barra nativa del panel encima de la barra fina del cuerpo: doble scroll). */
.panel {
  position: fixed; z-index: 70; background: #fff; display: flex; flex-direction: column; gap: 12px;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 48px)); max-height: min(86vh, 780px);
  border-radius: 18px; padding: 20px; box-shadow: 0 18px 50px rgba(16,28,50,.3); overflow: hidden;
}
/* Con un modal abierto el body queda quieto: la página de atrás no acompaña la rueda. */
body.modal-abierta { overflow: hidden; }
.panel .grab { display: none; }
@media (max-width: 900px) {
  .panel {
    left: 0; top: auto; bottom: 0; transform: none; width: 100%; max-height: 88dvh;
    border-radius: 22px 22px 0 0; padding: 12px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .panel .grab { display: block; }
}

/* ===== Desplegable custom (estilo Attio): el único filtro permitido ===== */
.dd { position: relative; display: inline-flex; }
.dd-btn {
  display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 12px; min-height: 38px; font-size: 12.5px; font-weight: 500;
  color: var(--mut); cursor: pointer; white-space: nowrap;
}
.dd-btn:hover { border-color: var(--cel); }
.dd-btn b { color: var(--ink); font-weight: 600; }
.dd-btn .ic { color: var(--mut2); }
.dd-menu {
  /* Por encima del panel modal (z 70): los formularios de los modales usan estos
     desplegables (gestión de cobranzas, ronda de correcciones) y a 65 quedaban
     tapados. El datepicker ya vivía en 75 por lo mismo. */
  position: fixed; z-index: 75; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(16,28,50,.22); padding: 6px; min-width: 210px; max-height: 320px;
  overflow-y: auto; display: flex; flex-direction: column; gap: 1px;
}
.dd-menu .dd-buscar { margin: 2px 2px 6px; }
.dd-menu button.dd-op {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 8px; border: none;
  background: none; text-align: left; font-size: 12.5px; font-weight: 500; color: var(--ink);
  min-height: 38px; width: 100%; cursor: pointer;
}
.dd-menu button.dd-op:hover { background: var(--celsoft); }
.dd-menu button.dd-op.on { background: var(--celsoft); font-weight: 600; color: var(--navy); }
.dd-menu button.dd-op .ic { margin-left: auto; color: var(--navy); }

/* ===== Chip de responsable (color estable por persona) ===== */
/* El nombre de pila SIEMPRE visible: en cualquier listado se ve de quién es la tarea. */
.pchip {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
  background: var(--pbg, var(--gris)); color: var(--pfg, var(--mut));
  font-weight: 600; white-space: nowrap; max-width: 100%; overflow: hidden;
}
.pchip i {
  font-style: normal; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--pfg, var(--mut2)); color: #fff; flex: none;
}
.pchip.sm { padding: 3px 10px 3px 3px; font-size: 11.5px; }
.pchip.sm i { width: 18px; height: 18px; font-size: 9.5px; }
.pchip.md { padding: 4px 12px 4px 4px; font-size: 13px; }
.pchip.md i { width: 24px; height: 24px; font-size: 10px; }
.pchip.lg { padding: 5px 15px 5px 5px; font-size: 15px; font-weight: 700; }
.pchip.lg i { width: 30px; height: 30px; font-size: 11.5px; font-weight: 700; }
.pchip.vacio { background: var(--redsoft); color: var(--red); }
.pchip.vacio i { display: none; }

/* ===== Filtros acumulables (js/filtros.js): el ÚNICO sistema de filtros ===== */
.filtros { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.fbtn {
  display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 12px; min-height: 38px; font-size: 12.5px; font-weight: 600;
  color: var(--navy); cursor: pointer; white-space: nowrap; font-family: inherit;
}
.fbtn:hover { border-color: var(--cel); background: var(--celsoft); }
.fbtn .ic { color: var(--navy); }
.fbtn.plano { border-color: transparent; background: none; color: var(--mut); font-weight: 500; }
.fbtn.plano:hover { background: var(--gris); color: var(--ink); }
.ftoken {
  display: inline-flex; align-items: stretch; border: 1px solid var(--line); background: #fff;
  border-radius: 10px; overflow: hidden; min-height: 38px; max-width: 340px;
}
.ftoken:hover { border-color: var(--cel); }
.ftk-cuerpo {
  display: inline-flex; align-items: center; gap: 7px; background: none; border: none;
  padding: 6px 10px; font-family: inherit; font-size: 12.5px; color: var(--ink);
  cursor: pointer; min-width: 0;
}
.ftk-cuerpo .ftk-campo { color: var(--mut); font-weight: 500; flex: none; }
.ftk-cuerpo b { font-weight: 600; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ftk-x {
  display: inline-flex; align-items: center; justify-content: center; width: 32px;
  border: none; border-left: 1px solid var(--line); background: none; color: var(--mut2); cursor: pointer;
}
.ftk-x:hover { background: var(--redsoft); color: var(--red); }
.fmenu {
  position: fixed; z-index: 65; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(16,28,50,.22); padding: 6px; min-width: 240px; max-width: 320px;
  display: flex; flex-direction: column; gap: 1px;
}
.fmenu .fm-hd { font-size: 10.5px; font-weight: 600; color: var(--mut); letter-spacing: .07em; text-transform: uppercase; padding: 8px 10px 5px; }
.fmenu .fm-buscar { min-height: 36px; padding: 7px 10px; margin: 0 2px 6px; font-size: 12.5px; }
.fmenu .fm-lista { display: flex; flex-direction: column; gap: 1px; max-height: 290px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #C6D0DB transparent; }
.fmenu .fm-lista::-webkit-scrollbar { width: 6px; }
.fmenu .fm-lista::-webkit-scrollbar-thumb { background: #C6D0DB; border-radius: 3px; }
.fmenu .fm-op {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; border: none;
  background: none; text-align: left; font-family: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--ink); min-height: 38px; width: 100%; cursor: pointer;
}
.fmenu .fm-op:hover { background: var(--celsoft); }
.fmenu .fm-op .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fmenu .fm-op .ic { color: var(--mut2); flex: none; }
.fmenu .fm-chk {
  width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--line); flex: none;
  display: inline-flex; align-items: center; justify-content: center; background: #fff;
}
.fmenu .fm-chk.on { background: var(--navy); border-color: var(--navy); }
.fmenu .fm-chk .ic { color: #fff; }
.fmenu .fm-ct { background: var(--celsoft); color: var(--navy); border-radius: 99px; padding: 1px 7px; font-size: 10.5px; font-weight: 700; }
.fmenu .fm-vacio { padding: 14px 10px; font-size: 11.5px; color: var(--mut2); text-align: center; }
.fmenu .fm-pie { display: flex; gap: 6px; padding: 6px 4px 2px; border-top: 1px solid var(--line); margin-top: 5px; }
.fmenu .fm-pie .fbtn { flex: 1; justify-content: center; min-height: 36px; }
@media (max-width: 900px) {
  .fmenu.sheet {
    left: 0; right: 0; bottom: 0; top: auto; max-width: none; width: 100%;
    border-radius: 22px 22px 0 0; padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 40px rgba(16,28,50,.25); z-index: 60;
  }
  .fmenu.sheet .fm-op { min-height: 44px; font-size: 13.5px; }
  .fmenu.sheet .fm-lista { max-height: 52vh; }
  .fmenu.sheet .fm-pie .fbtn { min-height: 44px; }
  .ftoken { max-width: 100%; }
}

/* ===== Paginado sobrio (tablas largas: Legales) ===== */
.pager { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pager .pg {
  min-width: 36px; height: 36px; padding: 0 11px; border-radius: 9px; border: 1px solid var(--line);
  background: #fff; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--mut);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.pager .pg:hover:not(:disabled) { border-color: var(--cel); color: var(--ink); }
.pager .pg.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.pager .pg:disabled { opacity: .45; cursor: default; }

/* ===== Encabezados de tabla ordenables ===== */
.tbl .th .sortable {
  display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 0;
  font-family: inherit; font-size: 10.5px; font-weight: 600; color: var(--mut);
  letter-spacing: .07em; text-transform: uppercase; cursor: pointer;
}
.tbl .th .sortable:hover { color: var(--navy); }
.tbl .th .sortable.on { color: var(--navy); }
.tbl .th .sortable .ic { width: 12px; height: 12px; color: currentColor; }

/* ===== Tabs sobrios subrayados (bandejas dentro de una página) ===== */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 10px 14px; font-size: 12.5px; font-weight: 500; color: var(--mut); white-space: nowrap;
  min-height: 42px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
}
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--navy); font-weight: 600; border-bottom-color: var(--navy); }
.tabs .tct {
  background: var(--gris); color: var(--mut); border-radius: 99px; min-width: 20px; height: 19px;
  padding: 0 6px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 600;
}
.tabs button.on .tct { background: var(--celsoft); color: var(--navy); }

/* ===== Panel/modal: header sticky con cruz + scrollbar estilizada ===== */
.panel { padding: 0; gap: 0; }
.panel-hd {
  position: sticky; top: 0; z-index: 2; background: #fff; display: flex; align-items: center; gap: 10px;
  padding: 14px 20px 12px; border-bottom: 1px solid var(--line); border-radius: 18px 18px 0 0;
}
.panel-hd .grab { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); }
.panel-hd .panel-titulo { font-size: 14.5px; font-weight: 600; color: var(--ink); flex: 1; min-width: 0; }
.panel-x {
  width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line); background: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none;
}
.panel-x:hover { background: var(--celsoft); }
.panel-bd { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 20px; overflow-y: auto; }
.panel-bd { scrollbar-width: thin; scrollbar-color: #C6D0DB transparent; }
.panel-bd::-webkit-scrollbar { width: 6px; }
.panel-bd::-webkit-scrollbar-track { background: transparent; }
.panel-bd::-webkit-scrollbar-thumb { background: #C6D0DB; border-radius: 3px; }
.panel-bd::-webkit-scrollbar-thumb:hover { background: var(--mut2); }
@media (max-width: 900px) {
  .panel { padding: 0; }
  .panel-hd { padding-top: 18px; border-radius: 22px 22px 0 0; }
  .panel-bd { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}

/* ===== Datepicker propio (desktop) ===== */
.datep {
  position: fixed; z-index: 75; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 14px 40px rgba(16,28,50,.22); padding: 12px; width: 264px;
}
.datep .dp-hd { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.datep .dp-hd b { flex: 1; text-align: center; font-size: 13px; font-weight: 600; color: var(--ink); text-transform: capitalize; }
.datep .dp-nav {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.datep .dp-nav:hover { background: var(--celsoft); }
.datep .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.datep .dp-dow { font-size: 10px; font-weight: 600; color: var(--mut2); text-align: center; padding: 4px 0; text-transform: uppercase; }
.datep .dp-dia {
  border: none; background: none; border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--ink);
  height: 32px; cursor: pointer; font-family: inherit;
}
.datep .dp-dia:hover { background: var(--celsoft); }
.datep .dp-dia.otro { color: var(--mut2); opacity: .55; }
.datep .dp-dia.hoy { box-shadow: inset 0 0 0 1.5px var(--cel); font-weight: 700; }
.datep .dp-dia.sel { background: var(--navy); color: #fff; font-weight: 600; }

/* ===== Animación sutil para el modo demo ===== */
@keyframes destello { 0% { background: var(--greensoft); } 100% { background: transparent; } }
.destello { animation: destello 1.6s ease-out forwards; border-radius: 12px; }

/* ============================================================
   LOGIN (pantalla C0)
   ============================================================ */
/* El login scrollea por su cuenta (el body ya no scrollea nunca). El centrado va con
   margin auto en la caja: con justify-content center, al desbordar en ventanas bajas
   el tope del formulario quedaba recortado e inalcanzable. */
.login-page { height: 100%; overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding: 24px; gap: 18px; }
.login-caja { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 18px; margin-top: auto; margin-bottom: auto; }
.login-pie { font-size: 11.5px; font-weight: 500; color: var(--mut2); text-align: center; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .side { display: none; }
  .tabbar { display: flex; }
  .main {
    margin-left: 0;
    padding: 16px 16px calc(84px + env(safe-area-inset-bottom, 0px));
    gap: 13px;
  }
  .vista-banner { margin: 0 -16px 3px; }
  .h1 { font-size: 19px; }
  .stat { padding: 11px 13px; }
  .stat b { font-size: 19px; }
  .fila-stats { flex-wrap: wrap; }
  .fila-stats .stat { min-width: 30%; }
}

@media (min-width: 901px) {
  .solo-mobile { display: none !important; }
}
@media (max-width: 900px) {
  .solo-desktop { display: none !important; }
}

/* ---------- Recorrido de bienvenida (js/tour.js) ---------- */
/* El velo intercepta los clicks; el foco recorta el elemento resaltado con un
   box-shadow gigante (todo lo demás queda oscuro). Va por arriba de modales (70)
   y desplegables (75). */
.tour-velo { position: fixed; inset: 0; z-index: 80; overflow: hidden; }
.tour-foco {
  position: fixed; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 200vmax rgba(16, 24, 40, .55);
  transition: top .22s ease, left .22s ease, width .22s ease, height .22s ease;
}
.tour-tarjeta {
  position: fixed; z-index: 81; width: min(370px, calc(100vw - 24px));
  background: #fff; border-radius: 14px; padding: 15px 17px 13px;
  display: flex; flex-direction: column; gap: 7px;
  box-shadow: 0 14px 44px rgba(16, 24, 40, .28);
}
.tour-paso {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--link);
}
.tour-titulo { font-size: 16px; font-weight: 700; color: var(--ink); }
.tour-texto { font-size: 13px; font-weight: 500; color: var(--mut); line-height: 1.55; }
.tour-botones { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
@media (max-width: 900px) {
  /* En touch la tarjeta es una hoja abajo, con targets de 44px. */
  .tour-tarjeta {
    left: 10px !important; right: 10px; top: auto !important; width: auto;
    bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 16px 16px 14px;
  }
  .tour-botones .btn { min-height: 44px; }
}