/* ============================================================
   SOLUM · Hermana de Nexus. Misma marca, otra ergonomía.

   Nexus se usa sentado, en una oficina. Solum se usa A PLENO SOL,
   CAMINANDO, CON UNA MANO. De ahí sale todo lo de abajo:
     · botones de 56px — el pulgar, no el mouse
     · contraste alto — la pantalla se lava con el sol
     · lo urgente en rojo y grande; lo demás, callado

   Rojo ladrillo #C43D30  <<< VERIFICAR contra el CSS real de Nexus.
   Negro carbón #1C1C1A. Dorado apagado para alertas.
   Serif editorial en titulares; sans en MAYÚSCULAS con tracking en etiquetas.
   ============================================================ */

:root{
  --rojo:#C43D30;          /* PENDIENTE: hex exacto del CSS de Nexus */
  --rojo-hondo:#9E2F25;
  --carbon:#1C1C1A;
  --dorado:#B8893B;        /* alertas — nunca rojo: el rojo es la marca */
  --papel:#FBFAF8;
  --tinta:#1C1C1A;
  --gris:#6E6B66;
  --linea:#E3DFD9;
  --serif:ui-serif,Georgia,"Iowan Old Style","Palatino Linotype",serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--sans);
  background:var(--papel); color:var(--tinta);
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
.oculto{display:none !important}

/* ------------------------------------------------------------ ver como
   DORADO, no rojo: es un aviso, no una emergencia (el rojo es la marca).
   Se queda pegado arriba y no se puede cerrar. Si el jefe olvida que está
   mirando la cartera de otro, lee cifras ajenas como propias. */
.banner-ver{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--dorado); color:#231A08;
  font:600 13px/1.3 var(--sans); letter-spacing:.3px;
  padding:10px 14px; padding-top:calc(10px + env(safe-area-inset-top));
}
/* Los nombres de SIESA son largos ("ARBOLEDA OCAMPO YOHANA CATALINA") y vienen
   en mayúsculas. Con altura fija, el nombre empujaba el botón fuera de la
   pantalla. El aviso crece; el botón nunca se encoge. */
.banner-ver b{overflow-wrap:anywhere}
/* En FRASE y sin mayúsculas — a propósito distinto del "Salir" del header, que
   es una etiqueta gritada en mayúsculas con borde. Este es una acción de
   "volver", no un botón de cerrar sesión. Que no se confundan nunca más. */
.banner-ver button{
  flex:0 0 auto;
  background:#231A08; color:#fff; border:0; border-radius:2px;
  font:700 12px/1 var(--sans); letter-spacing:.3px;
  padding:10px 12px; white-space:nowrap;
}
/* Con el aviso arriba, la barra deja de ser pegajosa: dos elementos pegados a
   top:0 se montan uno sobre otro, y el que tiene que quedarse SIEMPRE a la
   vista es el aviso (de eso depende que el jefe no lea cifras ajenas como
   propias). La marca y "Buscar" se van con el scroll: se puede vivir con eso. */
.con-banner .barra{position:static}

/* --------------------------------------------------- vista de dirección
   Franja de CONTEXTO, no de alerta. El directivo mira su propia vista y ve
   TODAS las cuentas. Sobria y OSCURA (carbón), deliberadamente distinta de
   la DORADA de "ver como": son dos estados y no deben confundirse. Estilo de
   ETIQUETA (mayúsculas + tracking), no de frase, para que ni de reojo se
   parezca al aviso dorado. Alto contraste igual — la app se usa a pleno sol.
   Comparte la mecánica sticky y el arreglo de .con-banner .barra de arriba. */
.banner-dir{
  position:sticky; top:0; z-index:30;
  background:var(--carbon); color:var(--papel);
  font:700 11px/1.3 var(--sans); letter-spacing:1.5px; text-transform:uppercase;
  padding:9px 14px; padding-top:calc(9px + env(safe-area-inset-top));
}
.banner-dir b{font-weight:800; color:#fff}

/* ------------------------------------------------ pipeline de desarrollo
   Kanban de OPORTUNIDADES. Columnas = etapas. Se desplaza en horizontal (el
   embudo tiene 5 etapas y no caben en un móvil): scroll-snap para que cada
   columna caiga en su sitio. Las tarjetas NO se arrastran — se tocan. */
.tablero{
  display:flex; gap:0; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding-bottom:env(safe-area-inset-bottom);
}
.columna{
  flex:0 0 84%; max-width:340px; scroll-snap-align:start;
  border-right:1px solid var(--linea); min-height:60vh;
}
.col-cabeza{
  position:sticky; top:0; z-index:5; background:var(--papel);
  padding:14px 14px 10px; border-bottom:1px solid var(--linea);
}
.col-nombre{
  font:700 11px/1.2 var(--sans); letter-spacing:1.5px; text-transform:uppercase;
  color:var(--carbon);
}
.col-meta{
  margin-top:5px; font:600 10px/1 var(--sans); letter-spacing:.5px;
  color:var(--gris); text-transform:uppercase;
}
.col-cuerpo{padding:12px 12px 24px; display:grid; gap:10px}
.tarjeta{
  width:100%; text-align:left; background:#fff; border:1px solid var(--linea);
  border-left:4px solid var(--rojo); border-radius:3px; padding:13px 14px;
}
.tarjeta:active{background:#F4F1EC}
.tarjeta .t-cli{font:700 15px/1.25 var(--sans); color:var(--tinta)}
.tarjeta .t-nom{margin-top:3px; font:400 13px/1.3 var(--sans); color:var(--gris)}
.tarjeta .t-val{
  margin-top:8px; font-family:var(--serif); font-size:17px; font-weight:700;
  color:var(--carbon);
}
.col-vacia{
  color:var(--gris); font-size:13px; line-height:1.4; padding:6px 2px;
}

/* Campo de texto/número de las hojas de oportunidad. Mismo aire que #nota. */
.campo{
  width:100%; padding:14px; border:1px solid var(--linea); border-radius:3px;
  font:400 16px/1.4 var(--sans); margin-bottom:16px; background:#fff;
}
/* Separa el bloque de "cerrar" (ganada/perdida) de "guardar cambios": son dos
   acciones distintas y no deben tocarse por error. */
.cerrar-titulo{margin-top:24px}

/* Botón secundario de la ficha: "+ Nueva oportunidad". No compite con el rojo
   de "Registrar visita" (ese es la acción principal): es sobrio, con borde. */
.secundario{
  width:100%; min-height:54px; margin-top:10px;
  background:#fff; color:var(--carbon); border:1px solid var(--carbon);
  border-radius:3px; font:700 12px/1 var(--sans);
  letter-spacing:1.5px; text-transform:uppercase;
}
.secundario:active{background:#F4F1EC}

/* ------------------------------------------------ diagnóstico (dirección)
   Stat tiles, no gráficos: la cifra ES el argumento. Grande, en serif, legible
   a distancia (reunión) y en el pulgar (celular). Rojo = marca, para la
   estrella; dorado = alerta, para el riesgo (siempre con etiqueta, nunca color
   solo). Alto contraste: se muestra proyectado y al sol. */
.diag{padding:16px 16px 28px; display:grid; gap:12px}

/* LA CIFRA ESTRELLA — el $ en riesgo de fuga (era "facturando sin dueño", que
   desde la migración 08 da cero). Ocupa sola el ancho. Fondo carbón + subrayado
   rojo, como el titular de gerencia: es un dato editorial. */
.diag-estrella{
  background:var(--carbon); color:#fff; border-bottom:3px solid var(--rojo);
  border-radius:4px; padding:22px 20px; text-align:left;
  width:100%; display:block;
}
.diag-estrella .d-eti{
  font:700 11px/1.3 var(--sans); letter-spacing:1.8px; text-transform:uppercase;
  color:#C9C5BE;
}
.diag-estrella .d-cifra{
  font-family:var(--serif); font-weight:700; line-height:1;
  font-size:clamp(36px, 11vw, 56px); margin-top:10px;
}
.diag-estrella .d-sub{margin-top:10px; font:600 13px/1.4 var(--sans); color:#B3AFA8}

/* Las secundarias, en rejilla. Dos por fila en móvil; más si hay ancho. */
.diag-rejilla{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
@media (min-width:640px){ .diag-rejilla{grid-template-columns:repeat(4,1fr)} }

.diag-tile{
  background:#fff; border:1px solid var(--linea); border-radius:4px;
  padding:16px 16px 14px; text-align:left; display:block; width:100%;
}
.diag-tile .d-cifra{
  font-family:var(--serif); font-weight:700; line-height:1;
  font-size:clamp(26px, 8vw, 34px); color:var(--carbon);
}
.diag-tile .d-cifra small{font-size:14px; color:var(--gris); font-weight:400}
.diag-tile .d-eti{
  margin-top:8px; font:700 10px/1.3 var(--sans); letter-spacing:1.2px;
  text-transform:uppercase; color:var(--gris);
}
/* Segunda línea del recuadro, en minúsculas: el desglose que convierte la cifra
   en trabajo ("67 cuentas · 31 no compran"). Va aparte de .d-eti porque metido
   ahí se vuelve una etiqueta en MAYÚSCULAS de tres renglones, que no se lee. */
.diag-tile .d-sub{
  margin-top:5px; font:400 12px/1.35 var(--sans); color:var(--carbon);
}
.diag-tile .d-sub b{font-weight:700}

/* Riesgo: borde dorado (la alerta de la marca). La etiqueta lo dice — nunca
   dependemos solo del color. */
.diag-tile.alerta{border-left:4px solid var(--dorado)}

/* Tocable: lleva a su lista. Se ve tocable (pista '›') y responde al toque. */
.tocable{cursor:pointer}
.tocable:active{background:#F4F1EC}
.diag-estrella.tocable:active{background:#111}
.tocable .d-ir{
  float:right; color:var(--gris); font:700 18px/1 var(--sans);
}
.diag-estrella.tocable .d-ir{color:#8A8681}

.ver-como{padding:22px 16px; border-top:1px solid var(--linea)}
.ver-como h2{
  font-family:var(--sans); font-size:11px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--gris);
  margin-bottom:4px;
}
.ver-como > .pista{display:block; margin-bottom:12px}

/* ---------------------------------------------------------------- barra */
.barra{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; padding-top:calc(12px + env(safe-area-inset-top));
  background:var(--carbon);
}
/* Wordmark encajonado: cuadro blanco, nombre en rojo. Igual que Nexus. */
.marca span{
  display:inline-block; background:#fff; color:var(--rojo);
  font-family:var(--sans); font-weight:800;
  letter-spacing:1.5px; font-size:14px;
  padding:6px 10px;
}
.icono{
  background:none; border:1px solid #4A4843; color:#fff;
  font:600 11px/1 var(--sans); letter-spacing:1.5px; text-transform:uppercase;
  padding:10px 12px; border-radius:2px;
}

/* Gerencia ve 4 botones (Sin dueño, Ver como, Buscar, Salir). En un celular
   angosto no caben en una línea: que envuelvan hacia la derecha en vez de
   desbordar. El asesor solo ve 2 (Buscar, Salir) y nunca envuelve. */
.barra-btns{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}

/* El titular de gerencia. La cifra ES el argumento: nadie en la empresa sabe
   hoy cuánto se está facturando sin dueño. Por eso va grande y en serif —
   es un dato editorial, no un contador. */
.titular{
  background:var(--carbon); color:#fff;
  padding:26px 16px 24px; border-bottom:3px solid var(--rojo);
}
.t-cifra{
  font-family:var(--serif); font-size:38px; line-height:1;
  font-weight:700; color:#fff; margin-bottom:10px;
}
.t-txt{font-size:14px; line-height:1.5; color:#C9C5BE}
.t-txt b{color:#fff; font-weight:700}

.buscador{padding:10px 16px; background:var(--carbon)}
.buscador.claro{background:#fff; border-bottom:1px solid var(--linea)}
.buscador.claro input{border:1px solid var(--linea)}

/* En la bandeja, la fila lleva el botón de asignar a la derecha. */
#lista-ger li{align-items:center; justify-content:space-between}
.buscador input{
  width:100%; padding:14px; border:0; border-radius:2px;
  font-size:16px;   /* 16px o menos hace que iOS haga zoom al enfocar */
  font-family:var(--sans);
}

/* -------------------------------------------------------------- filtros */
.filtros{
  display:flex; gap:8px; padding:14px 16px; overflow-x:auto;
  scrollbar-width:none; border-bottom:1px solid var(--linea); background:#fff;
}
.filtros::-webkit-scrollbar{display:none}
.filtros button{
  flex:0 0 auto; background:#fff; border:1px solid var(--linea);
  color:var(--gris); border-radius:999px; padding:10px 16px;
  font:600 11px/1 var(--sans); letter-spacing:1.2px; text-transform:uppercase;
  white-space:nowrap;
}
.filtros button.activo{background:var(--carbon); border-color:var(--carbon); color:#fff}
/* Buscando, el filtro NO manda: el servidor busca en toda la cartera. Las
   pestañas se apagan para decirlo. Si siguieran encendidas, el asesor vería
   "Hay que visitar" resaltado junto a clientes que no están en alerta. */
.filtros button.apagado{opacity:.4}
.filtros button.apagado.activo{background:#fff; border-color:var(--linea); color:var(--gris)}

.resumen{
  padding:14px 16px 6px; color:var(--gris);
  font:600 11px/1.4 var(--sans); letter-spacing:1.5px; text-transform:uppercase;
}

/* ---------------------------------------------------------------- lista */
.lista{list-style:none}
.lista li{
  background:#fff; border-bottom:1px solid var(--linea);
  padding:16px; display:flex; gap:14px; align-items:flex-start;
  /* cursor:pointer NO es cosmético aquí. iOS Safari solo dispara `click` de
     forma fiable sobre elementos interactivos o sobre los que lo declaran
     así; sin esto, el toque sobre la fila se pierde y hay que insistir dos o
     tres veces. Era el "hay que oprimirle varias veces con el dedo".
     touch-action:manipulation quita además la espera del doble-toque. */
  cursor:pointer; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.lista li:active{background:#F4F1EC}
.lista li:focus-visible{outline:2px solid var(--rojo); outline-offset:-3px}

/* ABRIENDO. La ficha tarda ~3 s (siete consultas a una base remota, en fila),
   y tres segundos de nada se sienten como que el toque no registró: el asesor
   vuelve a tocar. La fila se oscurece EN EL ACTO y gira un aro a la derecha.
   No la hace más rápida — hace que se note que lo oyó. */
.lista li.cargando{background:#EFEDE8}
.lista li.cargando::after{
  content:''; align-self:center; flex:none;
  width:18px; height:18px; margin-left:auto;
  border:2px solid var(--linea); border-top-color:var(--rojo); border-radius:50%;
  animation:girar .7s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  /* Sin giro, pero la señal NO desaparece: se marca el borde en rojo. */
  .lista li.cargando::after{animation:none; border-color:var(--rojo)}
}

/* Mismo caso: las filas de oportunidad y las tarjetas del tablero también se
   tocan y tampoco son elementos interactivos. */
.oport-fila,.sec summary{cursor:pointer; touch-action:manipulation}

/* ------------------------------------------------------------ sesión cerrada */
.salida{padding:40px 20px; text-align:center; max-width:420px; margin:0 auto}
.salida h2{font-family:var(--serif); font-size:26px; margin-bottom:14px}
.salida .pista{margin-bottom:16px; text-align:left}
.salida .grande{margin-top:10px}

/* El semáforo. Lo único que el asesor necesita ver de reojo, caminando. */
.pulso{
  flex:0 0 auto; width:52px; text-align:center;
  font-family:var(--serif); font-size:19px; font-weight:700; line-height:1;
  padding:8px 0; border-radius:3px;
}
.pulso small{
  display:block; margin-top:3px;
  font:600 8px/1 var(--sans); letter-spacing:1px; text-transform:uppercase;
}
.pulso.grave{background:var(--rojo); color:#fff}      /* >3x su ritmo */
.pulso.medio{background:#F6E9D5; color:#8A6420}       /* vencido, sin drama */
.pulso.bien {background:#EFEDE8; color:var(--gris)}   /* al día */
/* SIN RITMO: compró una vez y no volvió. Ni verde ni rojo — no hay ritmo que
   romper. Morado: es otra categoría de problema, no una emergencia. */
.pulso.sinritmo{background:#F0EAF6; color:#5B3E7A}

.cli-nombre{
  font-family:var(--serif); font-size:17px; line-height:1.25;
  font-weight:600; margin-bottom:3px;
}
.cli-sub{color:var(--gris); font-size:13px; line-height:1.4}

/* ENTRÓ AL PORTAL — la señal de Nexus, en la lista.
   NO va en rojo ni en dorado a propósito: no es una alarma ni un vencimiento,
   es una oportunidad caliente. Carbón con un punto delante — se distingue del
   subtítulo gris sin gritar más que el pulso de días sin comprar, que sigue
   siendo el dato que manda en la tarjeta. */
.cli-nexus{
  display:flex; align-items:center; gap:6px; margin-top:5px;
  color:var(--carbon); font:600 12px/1.35 var(--sans);
}
.cli-nexus::before{
  content:''; flex:0 0 auto;
  width:6px; height:6px; border-radius:50%; background:var(--carbon);
}

.cli-marcas{display:flex; gap:6px; flex-wrap:wrap; margin-top:7px}
.marca-chip{
  font:700 9px/1 var(--sans); letter-spacing:1px; text-transform:uppercase;
  padding:4px 7px; border-radius:2px;
}
.chip-mora{background:#FBE9E7; color:var(--rojo-hondo)}
.chip-bloq{background:var(--carbon); color:#fff}
.chip-nunca{background:#F0EAF6; color:#5B3E7A}
.chip-sincel{background:#EFEDE8; color:var(--gris)}
.chip-pend{background:#F6E9D5; color:#7A5718}

/* INTENTO SIN CONFIRMAR.
   Dorado, no rojo: no es una alarma ni un regaño. Es trabajo que el asesor ya
   hizo y que todavía no le está contando. El tono importa — si esto se siente
   como una multa, deja de tocar el botón de contacto, y perdemos la señal. */
.pendiente{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#F6E9D5; border-left:4px solid var(--dorado);
  padding:14px; border-radius:3px; margin-bottom:8px;
}
.p-txt{font-family:var(--serif); font-size:16px; font-weight:600; color:#5C4312}
.p-sub{
  margin-top:3px; color:#8A6420;
  font:600 9px/1 var(--sans); letter-spacing:1px; text-transform:uppercase;
}
.p-btn{
  flex:0 0 auto; min-height:48px; padding:0 16px; border:0; border-radius:3px;
  background:var(--carbon); color:#fff;
  font:700 11px/1 var(--sans); letter-spacing:1.2px; text-transform:uppercase;
}

/* ---------------------------------------------------------------- ficha */
.volver{
  display:block; width:100%; text-align:left;
  background:#fff; border:0; border-bottom:1px solid var(--linea);
  padding:16px; font:600 11px/1 var(--sans);
  letter-spacing:1.5px; text-transform:uppercase; color:var(--gris);
}
.cabeza{background:#fff; padding:20px 16px; border-bottom:1px solid var(--linea)}
.cabeza h1{font-family:var(--serif); font-size:25px; line-height:1.2; font-weight:700}
.cabeza .cli-sub{margin-top:5px}

/* Los dos botones que de verdad importan. Grandes: se usan de pie. */
.acciones{display:flex; gap:10px; padding:16px; background:#fff}
.acciones a,.acciones button{
  flex:1; display:flex; align-items:center; justify-content:center;
  min-height:56px; border-radius:3px; border:0;
  font:700 12px/1 var(--sans); letter-spacing:1.5px; text-transform:uppercase;
  text-decoration:none;
}
/* El ícono es lo que diferencia los dos botones de reojo. La paleta NO se
   toca: el verde de esta app ya significa "hubo pedido" (.si, .h-res.si), y
   pintarlo aquí le pondría el color de "vendió" a un botón que solo abre una
   conversación. La distinción la hace la forma, no un color prestado. */
.acciones svg{width:19px; height:19px; flex:none}
.acciones a{gap:9px}
.wa{background:var(--carbon); color:#fff}
/* No se muestra un botón muerto: si no hay celular, el botón PIDE el celular. */
.wa-falta{background:#fff; color:var(--rojo); border:2px dashed var(--rojo) !important}
.llamar{background:#fff; color:var(--carbon); border:1px solid var(--linea) !important}

.seccion{background:#fff; margin-top:10px; padding:18px 16px}
.seccion h2{
  font:700 10px/1 var(--sans); letter-spacing:1.8px; text-transform:uppercase;
  color:var(--gris); margin-bottom:14px;
}
.rejilla{display:grid; grid-template-columns:1fr 1fr; gap:16px 12px}
.dato .k{
  font:600 9px/1 var(--sans); letter-spacing:1.2px; text-transform:uppercase;
  color:var(--gris); margin-bottom:5px;
}
.dato .v{font-family:var(--serif); font-size:19px; font-weight:600; line-height:1.2}
.dato .v.mal{color:var(--rojo)}
.dato .v small{font-family:var(--sans); font-size:11px; font-weight:400; color:var(--gris)}

/* El corazón del modelo: "lleva 43x su propio ritmo sin comprar". */
/* ============================================================
   EL PORQUÉ — lo primero de la ficha, antes que cualquier cifra.
   Responde "¿entro hoy o no?", que es la única pregunta que el asesor tiene
   parado en la puerta. Antes vivía dentro del bloque de SIESA, debajo de
   cuatro recuadros: en un celular quedaba por debajo del doblez.
   Hereda los colores de `gravedad()`, los mismos de siempre.
   ============================================================ */
.porque{
  background:#fff; padding:16px; border-bottom:1px solid var(--linea);
  border-left:5px solid var(--linea);
}
.porque.grave{background:#FBE9E7; border-left-color:var(--rojo)}
.porque.medio{background:#F6E9D5; border-left-color:var(--dorado)}
.porque.sinritmo{background:#EFEDE8; border-left-color:var(--gris)}
.porque.bien{background:#fff; border-left-color:var(--linea)}
.p-k{
  font:700 9px/1 var(--sans); letter-spacing:1.5px; text-transform:uppercase;
  color:var(--gris); margin-bottom:8px;
}
.p-v{font-size:15px; line-height:1.45}
.p-v b{font-weight:700}
.porque.grave .p-v{color:var(--rojo-hondo)}
.porque.medio .p-v{color:#7A5718}
.p-x{
  display:inline-block; margin-top:10px; padding:7px 10px; border-radius:2px;
  background:var(--dorado); color:#fff;
  font:800 12px/1 var(--sans); font-variant-numeric:tabular-nums;
}
.porque.grave .p-x{background:var(--rojo)}

/* La cartera vencida NO se pliega: saberla después de tocar la puerta no
   sirve de nada. Es la razón #1 por la que un cliente no compra. */
.alerta-cartera{
  background:#FBE9E7; color:var(--rojo-hondo); border-left:5px solid var(--rojo);
  padding:14px 16px; font-size:14px; line-height:1.45;
  border-bottom:1px solid var(--linea);
}
.alerta-cartera b{font-weight:700}

/* ============================================================
   SECCIONES PLEGABLES
   Lo plegado no es información escondida: cada encabezado dice lo suyo sin
   abrirse ("$8.6M en 12 meses", "1 sin cerrar"). El asesor abre lo que
   necesita en vez de recorrer la ficha entera cada vez.
   ============================================================ */
.sec{background:#fff; margin-top:10px}
.sec summary{
  list-style:none; cursor:pointer; padding:16px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  -webkit-tap-highlight-color:transparent;
}
.sec summary::-webkit-details-marker{display:none}
.sec summary:focus-visible{outline:2px solid var(--rojo); outline-offset:-3px}
.s-izq{min-width:0}
.s-tit{
  font:700 10px/1.3 var(--sans); letter-spacing:1.8px; text-transform:uppercase;
  color:var(--gris);
}
.s-res{
  display:block; margin-top:6px; font-size:13.5px; line-height:1.45;
  color:var(--tinta);
}
.s-chip{
  display:inline-block; margin-left:7px; vertical-align:1px;
  padding:4px 7px; border-radius:2px; background:var(--dorado); color:#fff;
  font:800 9px/1 var(--sans); letter-spacing:.9px; text-transform:uppercase;
}
.s-chip.urgente{background:var(--carbon)}
.chev{
  flex:none; color:var(--gris); font-size:17px; line-height:1;
  transition:transform .18s ease;
}
.sec[open] .chev{transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){.chev{transition:none}}
.s-cuerpo{padding:0 16px 18px}

/* ============================================================
   "REGISTRAR VISITA" FIJA ABAJO
   Era el último elemento de la ficha: con historial largo había que
   recorrerla entera para llegar a la acción principal de la pantalla.
   Ahora flota sobre el contenido, a un toque desde cualquier punto.
   ============================================================ */
.fija{
  position:sticky; bottom:0; z-index:30;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  /* Fondo SÓLIDO, no degradado. El degradado iba de --papel a transparente,
     pero las secciones de abajo son BLANCAS: el resultado era una franja de
     dos tonos que parecía el texto cortado por la mitad, no una barra.
     Con fondo pleno y una línea arriba se lee como lo que es: una barra que
     flota sobre el contenido. */
  background:var(--papel);
  border-top:1px solid var(--linea);
  box-shadow:0 -6px 16px rgba(28,28,26,.07);
}
/* Nada queda inalcanzable: al ser `sticky` y no `fixed`, la barra ocupa su
   sitio real al final del documento, así que en el tope del scroll el
   contenido termina ARRIBA de ella. Mientras se baja lo tapa —como en
   cualquier app— y por eso importa que se lea como barra y no como corte.
   Un respiro extra en la última sección para que no quede pegada. */
#ficha .sec:last-of-type .s-cuerpo{padding-bottom:22px}

.veredicto{
  margin-top:16px; padding:14px; border-radius:3px;
  font-size:14px; line-height:1.45;
}
.veredicto.grave{background:#FBE9E7; color:var(--rojo-hondo); border-left:4px solid var(--rojo)}
.veredicto.medio{background:#F6E9D5; color:#7A5718; border-left:4px solid var(--dorado)}
.veredicto.bien {background:#EFEDE8; color:var(--gris); border-left:4px solid var(--linea)}
.veredicto b{font-weight:700}

.aviso-carrito{
  background:var(--carbon); color:#fff; padding:14px; border-radius:3px;
  font-size:14px; line-height:1.45; margin-bottom:12px;
}
.aviso-carrito .refs{
  display:block; margin-top:7px; color:#C9C5BE; font-size:12px;
  word-break:break-word;
}

.historial{list-style:none}
.historial li{padding:13px 0; border-bottom:1px solid var(--linea)}
.historial li:last-child{border:0}
.h-linea{display:flex; justify-content:space-between; gap:12px; align-items:baseline}
.h-res{font-family:var(--serif); font-size:15px; font-weight:600}
.h-res.si{color:#2F6B45}
.h-res.no{color:var(--rojo)}
.h-fecha{
  color:var(--gris); font:600 10px/1 var(--sans);
  letter-spacing:1px; text-transform:uppercase; flex:0 0 auto;
}
.h-nota{color:var(--gris); font-size:13px; line-height:1.45; margin-top:5px}
.vacio{color:var(--gris); font-size:14px; line-height:1.5}

.caso{
  background:#F6E9D5; border-left:4px solid var(--dorado);
  padding:12px; border-radius:3px; margin-bottom:8px;
}
.caso .k{
  font:700 9px/1 var(--sans); letter-spacing:1.2px; text-transform:uppercase;
  color:#7A5718; margin-bottom:5px;
}
.caso .d{font-size:14px; line-height:1.4; color:#5C4312}

/* El botón que hace que todo esto sirva de algo. Fijo, siempre a la mano. */
/* El sticky lo hace ahora .fija, que además le pone el degradado para que el
   contenido no se corte a ras del botón. Dejarlo aquí también era un sticky
   dentro de otro sticky: no rompe, pero el de adentro no hace nada y confunde
   a quien lo lea después. */
.registrar{
  width:100%; min-height:62px; border:0;
  background:var(--rojo); color:#fff;
  font:800 14px/1 var(--sans); letter-spacing:2px; text-transform:uppercase;
  margin-top:10px; padding-bottom:env(safe-area-inset-bottom);
}
.registrar:active{background:var(--rojo-hondo)}

/* ------------------------------------------------- hoja: registrar visita */
.hoja{
  position:fixed; inset:0; z-index:50;
  background:rgba(28,28,26,.55);
  display:flex; align-items:flex-end;
}
.hoja-caja{
  width:100%; max-height:92vh; overflow-y:auto;
  background:var(--papel); border-radius:14px 14px 0 0;
  padding:22px 16px calc(22px + env(safe-area-inset-bottom));
  position:relative;
}
.cerrar{
  position:absolute; top:12px; right:12px;
  width:40px; height:40px; border:0; background:none;
  font-size:20px; color:var(--gris);
}
.hoja-titulo{font-family:var(--serif); font-size:22px; font-weight:700}
.hoja-cliente{color:var(--gris); font-size:14px; margin:4px 0 22px}
.pregunta{
  font:700 10px/1 var(--sans); letter-spacing:1.8px; text-transform:uppercase;
  color:var(--gris); margin-bottom:12px;
}
.si-no{display:flex; gap:12px}
.grande{
  flex:1; min-height:72px; border:0; border-radius:3px;
  font:800 17px/1 var(--sans); letter-spacing:1px;
}
.si{background:#2F6B45; color:#fff}
.no{background:#fff; color:var(--carbon); border:1px solid var(--linea) !important}
.no.elegido{background:var(--carbon); color:#fff; border-color:var(--carbon) !important}

.motivos{display:grid; gap:10px; margin-bottom:20px}
.motivos button{
  min-height:58px; text-align:left; padding:0 16px;
  background:#fff; border:1px solid var(--linea); border-radius:3px;
  font:600 15px/1.3 var(--sans); color:var(--tinta);
}
.motivos button.elegido{
  background:var(--carbon); color:#fff; border-color:var(--carbon);
}
.motivos button.elegido .pista{color:#B3AFA8}
.pista{
  display:block; margin-top:3px;
  font:600 9px/1 var(--sans); letter-spacing:1px; text-transform:uppercase;
  color:var(--gris);
}

#nota{
  width:100%; padding:14px; border:1px solid var(--linea); border-radius:3px;
  font:400 16px/1.45 var(--sans); margin-bottom:12px; resize:vertical;
}
.aviso{
  background:#F6E9D5; color:#7A5718; padding:12px; border-radius:3px;
  font-size:13px; line-height:1.45; margin-bottom:12px;
  border-left:4px solid var(--dorado);
}
.guardar{width:100%; background:var(--rojo); color:#fff; min-height:62px}
.guardar:active{background:var(--rojo-hondo)}
.guardar:disabled{opacity:.5}

.toast{
  position:fixed; left:16px; right:16px; bottom:24px; z-index:80;
  background:var(--carbon); color:#fff; padding:16px; border-radius:3px;
  font-size:14px; line-height:1.4; text-align:center;
}

/* ------------------------------------------------- posible cliente (flotante)
   Se toca CAMINANDO, con una mano, parado en la puerta de un negocio: abajo a
   la derecha cae bajo el pulgar. La barra de arriba no se alcanza sin acomodar
   el celular — y además ya tiene seis botones.
   64px, más que los 56 del resto: es un blanco que hay que acertar sin mirar.
   z-index 40 -> por debajo de la hoja (50) y del toast (80): cuando la hoja
   está abierta, el flotante no puede quedar flotando encima de ella. */
.flotante{
  position:fixed; z-index:40;
  right:16px; bottom:calc(20px + env(safe-area-inset-bottom));
  width:64px; height:64px; border-radius:50%; border:0;
  background:var(--rojo); color:#fff;
  font:300 34px/1 var(--sans);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(28,28,26,.28);
}
.flotante:active{background:var(--rojo-hondo)}
.flotante span{margin-top:-3px}   /* el '+' no centra ópticamente solo */

/* En pantalla ancha el body se centra a 640px; el flotante es fixed y se iría
   al borde de la ventana, lejos de la app. Se ancla al carril. */
@media (min-width:720px){
  .flotante{right:calc(50vw - 320px + 16px)}
}

/* Etiqueta de campo OPCIONAL. Que se vea a simple vista cuál es el único
   obligatorio: si parecen todos iguales, el asesor los llena todos —o
   abandona el formulario en la puerta del negocio, que es lo que pasa. */
.pregunta.opcional{color:var(--gris); font-weight:600}
.pregunta.opcional span{
  display:block; margin-top:4px;
  font:400 11px/1.3 var(--sans); letter-spacing:0; text-transform:none;
}

@media (min-width:720px){
  body{max-width:640px; margin:0 auto; border-left:1px solid var(--linea);
       border-right:1px solid var(--linea); min-height:100vh}
}

/* El desglose del titular de gerencia. Va debajo de la cifra grande porque
   la cifra sola no explica nada: la plata sin dueño importa por CÓMO se está
   perdiendo, no por cuánta es. */
.t-desglose{
  margin-top:16px; padding-top:14px; border-top:1px solid #3A3833;
  display:grid; gap:6px;
}
.t-desglose div{font-size:13px; line-height:1.5; color:#C9C5BE}
.t-desglose b{color:var(--rojo); font-weight:700; font-family:var(--serif);
              font-size:15px}

/* ============================================================ DICTADO
   El botón más grande de la app. Se usa de pie, con una mano, con el pulgar,
   a pleno sol. Si hay que apuntarle, no sirve. */
.voz{
  width:100%; min-height:88px; border:0; border-radius:3px;
  background:var(--carbon); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; margin-bottom:22px;
  -webkit-user-select:none; user-select:none;      /* mantener ≠ seleccionar */
  -webkit-touch-callout:none;
}
.voz-txt{
  font:800 15px/1 var(--sans); letter-spacing:1.5px; text-transform:uppercase;
}
.voz-sub{font:400 12px/1 var(--sans); color:#B3AFA8}

/* Mientras escucha: rojo y latiendo. El asesor tiene que SABER que lo está
   oyendo — si duda, habla dos veces o suelta antes de tiempo. */
.voz.grabando{background:var(--rojo); animation:latido 1.1s ease-in-out infinite}
.voz.grabando .voz-sub{color:#F6D5D1}
@keyframes latido{50%{background:var(--rojo-hondo)}}
@media (prefers-reduced-motion:reduce){.voz.grabando{animation:none}}

/* DICTAR LA NOTA — deliberadamente MÁS CALLADO que el botón de arriba.
   Aquel es la acción principal de la hoja (dicta la visita entera y la IA la
   estructura): negro, 88px, imposible de no ver. Este es una ayuda del campo
   de texto — sobrio, con borde, pegado al textarea. Si los dos gritaran igual,
   el asesor no sabría cuál toca primero, y son cosas distintas.
   Ancho completo y 52px de alto: sigue siendo un blanco para el pulgar. */
.dictar{
  width:100%; min-height:52px; margin:-6px 0 12px;
  background:#fff; color:var(--carbon);
  border:1px solid var(--linea); border-radius:3px;
  font:700 12px/1 var(--sans); letter-spacing:1.4px; text-transform:uppercase;
  -webkit-user-select:none; user-select:none;
}
/* Escuchando: el MISMO lenguaje que el botón grande —rojo y latiendo—, porque
   significa lo mismo. Si el micrófono abierto se viera distinto según dónde,
   el asesor tendría que aprender dos señales para el mismo hecho. */
.dictar.grabando{
  background:var(--rojo); color:#fff; border-color:var(--rojo);
  animation:latido 1.1s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){.dictar.grabando{animation:none}}

/* "+ Agregar nota" dentro de cada visita del historial. Discreto: el historial
   se LEE, no es una bandeja de tareas. Pero tiene que estar — sin él, el
   asesor que quiere completar algo registra otra visita y daña el dato. */
.h-agregar{
  margin-top:8px; min-height:38px; padding:0 12px;
  background:none; border:1px solid var(--linea); border-radius:3px;
  font:700 10px/1 var(--sans); letter-spacing:1.2px; text-transform:uppercase;
  color:var(--gris);
}

/* La nota que YA tiene la visita, dentro de la hoja: gris y no editable.
   Que se vea qué había, para no repetirlo — y que quede claro que esto SUMA,
   no reemplaza. */
.nota-previa{
  background:#EFEDE8; border-left:4px solid var(--linea);
  padding:12px 14px; margin-bottom:14px; border-radius:0 3px 3px 0;
  font:400 14px/1.5 var(--sans); color:var(--gris);
  white-space:pre-wrap; max-height:180px; overflow-y:auto;
}
#ne-texto{
  width:100%; padding:14px; border:1px solid var(--linea); border-radius:3px;
  font:400 16px/1.45 var(--sans); margin-bottom:12px; resize:vertical;
}

/* Lo que va oyendo, en vivo. Confirma que le está entendiendo. */
.voz-estado{
  background:#fff; border:1px solid var(--linea); border-radius:3px;
  padding:14px; margin:-14px 0 22px;
  font-size:15px; line-height:1.45; color:var(--gris); min-height:20px;
}

/* LO QUE ESCRIBIÓ LA IA VA MARCADO. Nada de magia silenciosa: si el asesor
   descubre después que la app le puso palabras que él no dijo, no vuelve a
   tocar el botón — y perdemos la función entera. */
.aviso-voz{
  background:#EFEDE8; border-left:4px solid var(--carbon);
  padding:12px; border-radius:3px; margin-bottom:12px;
  font-size:13px; line-height:1.5; color:var(--gris);
}
.aviso-voz.dudoso{background:#F6E9D5; border-left-color:var(--dorado); color:#7A5718}
.aviso-voz b{color:var(--tinta)}
.aviso-voz.dudoso b{color:#5C4312}
.dicho{
  display:block; margin-top:7px; font-style:italic;
  color:var(--tinta); opacity:.75;
}