/* ============================================================================
   Noguera y Vergara · v2 — Sistema de diseño
   ----------------------------------------------------------------------------
   Un solo archivo, sin dependencias ni compilación. Todo sale de los tokens de
   :root, así que cambiar la identidad es cambiar esas variables.

   Principio rector: este sistema muestra MUCHOS datos. Hay tablas de 20
   columnas y listados de miles de filas. El skin se moderniza sin perder
   densidad: la fila sigue midiendo 34px, porque una operadora que hoy ve 25
   pólizas en pantalla no puede pasar a ver 12.
   ========================================================================== */

/* --- TOKENS --------------------------------------------------------------- */
:root{
  /* Azul de NOVE. El --azul-700 es el #004B87 del logo (img/marca/); el
     resto de la escala tiene su mismo tono (207°) y sólo cambia la luz. */
  --azul-50:#eef7ff;  --azul-100:#dbeefd; --azul-200:#b9defb; --azul-300:#84c3f5;
  --azul-400:#47a2eb; --azul-500:#067fe0; --azul-600:#006cc2; --azul-700:#004b87;
  --azul-800:#003a69; --azul-900:#062d4b;

  /* Rojo de NOVE, el de «ve.» en el logo.
     Es color de IDENTIDAD, no de estado: se usa sólo en el marco de la
     aplicación y nunca dentro de los datos, donde el rojo ya significa
     anulado / error / no renovado. Así las dos cosas no se confunden. */
  --rojo-marca:#e63946;
  --navy-marca:#000010;

  /* Neutros fríos, para que convivan con el azul sin verse sucios */
  --gris-0:#ffffff;   --gris-25:#fbfcfd;  --gris-50:#f6f8fa;  --gris-100:#eef1f5;
  --gris-200:#e2e7ee; --gris-300:#cbd3de; --gris-400:#9aa6b6; --gris-500:#6b7787;
  --gris-600:#4d5867; --gris-700:#36404d; --gris-800:#222a35; --gris-900:#141a22;

  /* Roles */
  /* El fondo de la zona de contenido, debajo de las tarjetas. Un paso más
     oscuro que antes (era gris-50) para que las tarjetas blancas se despeguen
     en vez de fundirse con la página. La cabecera sigue blanca: es la franja
     del título y se lee como parte del marco, no del contenido. */
  --fondo:var(--gris-100);
  --superficie:var(--gris-0);
  --borde:var(--gris-200);
  --borde-fuerte:var(--gris-300);
  --texto:var(--gris-800);
  --texto-suave:var(--gris-500);
  --texto-inverso:#fff;
  --marca:var(--azul-700);
  --interactivo:var(--azul-600);

  /* Tipografía */
  --fuente:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --fuente-mono:"JetBrains Mono","Cascadia Mono",Consolas,"Courier New",monospace;
  --t-11:11px; --t-12:12px; --t-13:13px; --t-14:14px;
  --t-16:16px; --t-18:18px; --t-22:22px; --t-28:28px;

  /* Espaciado (escala de 4) */
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:20px; --e-6:24px; --e-8:32px;

  --radio:6px;
  --radio-lg:10px;
  --sombra:0 1px 2px rgba(20,26,34,.06), 0 1px 3px rgba(20,26,34,.04);
  --sombra-alta:0 4px 12px rgba(20,26,34,.10), 0 1px 3px rgba(20,26,34,.06);

  --fila:34px;        /* alto de fila de tabla — densidad del sistema */
  --barra-lateral:216px;
}

/* --- COLORES DE ESTADO ---------------------------------------------------- */
/* El sistema actual marca cada estado con un color de Semantic UI
   (rojo, naranjo, oliva, calipso…). Se conservan los mismos 13 nombres para
   que migrar los estados sea mecánico, pero en versión "pastilla": fondo
   teñido y texto oscuro. Una tabla con 25 badges ya no grita. */
:root{
  --rojo-bg:#fdecec;     --rojo-fg:#b4232a;     --rojo-solido:#d93a41;
  --naranjo-bg:#fff1e3;  --naranjo-fg:#9c520a;  --naranjo-solido:#e07c1f;
  --amarillo-bg:#fff8db; --amarillo-fg:#846000; --amarillo-solido:#e2b007;
  --oliva-bg:#f1f7dc;    --oliva-fg:#5c6f10;    --oliva-solido:#7f9a16;
  --verde-bg:#e8f7ee;    --verde-fg:#16744a;    --verde-solido:#1f9d5f;
  --calipso-bg:#e2f6f5;  --calipso-fg:#0d6b67;  --calipso-solido:#14908a;
  --azul-bg:var(--azul-50); --azul-fg:var(--azul-700); --azul-solido:var(--azul-600);
  --violeta-bg:#eeedff;  --violeta-fg:#463bb0;  --violeta-solido:#6356e0;
  --purpura-bg:#f7ecfb;  --purpura-fg:#762a8e;  --purpura-solido:#a03fbe;
  --rosado-bg:#fdecf3;   --rosado-fg:#a3285e;   --rosado-solido:#d9407f;
  --cafe-bg:#f6efe9;     --cafe-fg:#744d2c;     --cafe-solido:#a06a3a;
  --plomo-bg:#eef1f5;    --plomo-fg:#4d5867;    --plomo-solido:#6b7787;
  --negro-bg:#e4e7ec;    --negro-fg:#222a35;    --negro-solido:#222a35;
}

/* --- BASE ---------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

/* `hidden` gana siempre.
   La regla del navegador para `[hidden]` es `display:none` con la
   especificidad más baja que existe, así que cualquier `display:flex` nuestro
   le gana y el elemento se dibuja igual con el atributo puesto. Pasó tres
   veces —la barra de cobranza, el resumen del vehículo— y cada vez costó un
   rato entender por qué «no funciona hidden». Se arregla una vez, acá.
   El <dialog> queda fuera: él se esconde con su propia regla. */
[hidden]:not(dialog){ display:none !important; }
body{
  font-family:var(--fuente);
  font-size:var(--t-13);
  line-height:1.5;
  color:var(--texto);
  background:var(--fondo);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.01em; }
h1{ font-size:var(--t-22); }
h2{ font-size:var(--t-18); }
h3{ font-size:var(--t-16); }
h4{ font-size:var(--t-13); text-transform:uppercase; letter-spacing:.06em; color:var(--texto-suave); font-weight:600; }
p{ margin:0 0 var(--e-3); }
a{ color:var(--interactivo); text-decoration:none; }
a:hover{ text-decoration:underline; }
code{ font-family:var(--fuente-mono); font-size:var(--t-12); background:var(--gris-100);
  padding:1px 5px; border-radius:4px; color:var(--gris-700); }

/* Los números de plata van tabulares y a la derecha. En un sistema de seguros
   las columnas de prima se leen comparando, y con cifras proporcionales los
   dígitos bailan de fila en fila. */
.num{ font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }

/* --- ESTRUCTURA ---------------------------------------------------------- */
.app{ display:flex; min-height:100vh; }

.lateral{
  width:var(--barra-lateral); flex:0 0 var(--barra-lateral);
  background:var(--azul-900); color:#cfdcec;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.lateral__marca{
  display:flex; align-items:center; gap:var(--e-3);
  padding:var(--e-4) var(--e-5);
  border-bottom:1px solid rgba(255,255,255,.08);
}
/* Abierta, la barra muestra el logo completo en su versión clara (el azul
   pasado a blanco, que sobre --azul-900 no se vería); plegada, sólo el
   icono «n.», que es el mismo del favicon. El logo ya dice «Seguros Noguera
   & Vergara», así que el nombre en texto queda sólo para lectores de
   pantalla. Las imágenes salen de bd/generar_marca.php. */
.lateral__logo{ display:block; width:142px; height:auto; }
.lateral__icono{
  display:none; width:34px; height:34px; flex:0 0 34px; border-radius:8px;
}
.lateral-plegada .lateral__logo{ display:none; }
.lateral-plegada .lateral__icono{ display:block; }

.lateral__nav{ padding:var(--e-3) var(--e-2); overflow-y:auto; flex:1; }
.lateral__grupo{
  padding:var(--e-4) var(--e-3) var(--e-1);
  font-size:var(--t-11); text-transform:uppercase; letter-spacing:.07em;
  color:#6f8aa8; font-weight:600;
}
.lateral a.item{
  display:flex; align-items:center; gap:var(--e-3);
  padding:7px var(--e-3); margin-bottom:1px;
  border-radius:var(--radio); color:#cfdcec; font-size:var(--t-13);
}
.lateral a.item:hover{ background:rgba(255,255,255,.07); color:#fff; text-decoration:none; }
.lateral a.item--activo{ background:var(--azul-600); color:#fff; font-weight:500; }
.lateral a.item .ico{ opacity:.75; }
.lateral a.item--activo .ico{ opacity:1; }

.lateral .cuenta{
  margin-left:auto; font-size:var(--t-11); font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.12); padding:1px 6px; border-radius:20px;
}

.lateral__pie{
  padding:var(--e-3) var(--e-4); border-top:1px solid rgba(255,255,255,.08);
  font-size:var(--t-11); color:#7e97b4;
  display:flex; align-items:center; gap:var(--e-3);
}
.lateral__pie .quien{ min-width:0; flex:1; }
.lateral__pie .quien b{ display:block; color:#dce7f3; font-size:var(--t-12); font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lateral__pie a{ color:#9bb4d0; }

/* --- AVATAR --------------------------------------------------------------
   El equipo se eligió un avatar ilustrado cada uno y se reconocen por él.
   Cuando no hay archivo no se muestra una imagen "sin foto" como en v1: se
   dibujan las iniciales sobre un color derivado del nombre, así cada persona
   tiene siempre algo propio y estable. */
.avatar{
  width:32px; height:32px; flex:0 0 32px; border-radius:50%;
  object-fit:cover; background:var(--gris-200);
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
  display:grid; place-items:center;
  font-size:var(--t-12); font-weight:600; color:#fff; letter-spacing:.02em;
  overflow:hidden; text-transform:uppercase;
}
.avatar--sm{ width:24px; height:24px; flex-basis:24px; font-size:10px; }
.avatar--lg{ width:64px; height:64px; flex-basis:64px; font-size:var(--t-22); }
.avatar--xl{ width:84px; height:84px; flex-basis:84px; font-size:var(--t-28); }
.avatar--borde-claro{ box-shadow:0 0 0 1px rgba(255,255,255,.22); }

.principal{ flex:1; min-width:0; display:flex; flex-direction:column; }

.cabecera{
  background:var(--superficie);
  border-bottom:1px solid var(--borde);
  padding:var(--e-4) var(--e-6);
  display:flex; align-items:center; gap:var(--e-4); flex-wrap:wrap;
}
.cabecera__titulo{ min-width:0; }
.cabecera__titulo .ruta{ font-size:var(--t-11); color:var(--texto-suave); text-transform:uppercase; letter-spacing:.06em; }
.cabecera__acciones{ margin-left:auto; display:flex; gap:var(--e-2); flex-wrap:wrap; }

.contenido{ padding:var(--e-6); flex:1; }

/* Aviso de ambiente. Hoy el sistema pinta toda la barra de rojo cuando es
   servidor de pruebas; acá se resuelve con una cinta que no secuestra la
   identidad pero es imposible de pasar por alto. */
.ambiente{
  background:var(--rojo-solido); color:#fff; text-align:center;
  font-size:var(--t-12); font-weight:600; padding:5px var(--e-4);
  letter-spacing:.04em;
}

/* --- PESTAÑAS ------------------------------------------------------------
   La ficha de cliente de la v1 se navega por pestañas y la gente ya tiene esa
   forma aprendida. Se mantiene: cambia el aspecto, no dónde está cada cosa. */
.tabs{
  display:flex; gap:2px; align-items:flex-end;
  border-bottom:1px solid var(--borde); overflow-x:auto;
  /* Barra de desplazamiento siempre visible y delgada: en el teléfono las seis
     pestañas no caben, y una barra fina dice "hay más" sin ocupar espacio.
     Antes había un degradado que parecía un botón apagado. */
  scrollbar-width:thin;
  scrollbar-color:var(--borde-fuerte) transparent;
}
.tabs::-webkit-scrollbar{ height:3px; }
.tabs::-webkit-scrollbar-track{ background:transparent; }
.tabs::-webkit-scrollbar-thumb{ background:var(--borde-fuerte); border-radius:3px; }
.tabs a{
  display:flex; align-items:center; gap:7px; white-space:nowrap;
  padding:9px var(--e-4); font-size:var(--t-13); color:var(--texto-suave);
  border:1px solid transparent; border-bottom:none;
  border-radius:var(--radio) var(--radio) 0 0; margin-bottom:-1px;
}
.tabs a:hover{ background:var(--gris-200); color:var(--gris-700); text-decoration:none; }
.tabs a.activa{
  background:var(--superficie); color:var(--texto); font-weight:500;
  border-color:var(--borde); border-bottom:1px solid var(--superficie);
}
.tabs .cuantos{
  font-size:var(--t-11); font-variant-numeric:tabular-nums;
  background:var(--gris-200); color:var(--texto-suave);
  padding:0 6px; border-radius:20px; min-width:18px; text-align:center;
}
.tabs a.activa .cuantos{ background:var(--azul-100); color:var(--azul-700); }

/* Pestañas de ficha con el contenido en un recuadro propio (.tabs-cuerpo).
   La barra va sobre fondo gris y la activa es blanca, del mismo blanco que el
   recuadro, con una línea azul arriba: se lee como una carpeta abierta, y no
   queda duda de en qué pestaña se está. */
.tabs--ficha{
  background:var(--gris-100); border:1px solid var(--borde); border-bottom:none;
  border-radius:var(--radio-lg) var(--radio-lg) 0 0;
  padding:6px 6px 0; gap:4px;
  /* La línea de abajo es una sombra y no un borde: la pestaña activa la tapa
     con su fondo, sin moverse (la barra tiene scroll y no admite que nada se
     salga de ella). */
  box-shadow:inset 0 -1px 0 var(--borde);
}
.tabs--ficha a{ border-radius:var(--radio) var(--radio) 0 0; margin-bottom:0; }
.tabs--ficha a:hover{ background:var(--gris-200); }
.tabs--ficha a.activa{
  background:var(--superficie); color:var(--azul-800); font-weight:600;
  border-color:var(--borde);
  box-shadow:inset 0 3px 0 var(--azul-solido);
}
.tabs-cuerpo{
  background:var(--superficie); border:1px solid var(--borde); border-top:none;
  border-radius:0 0 var(--radio-lg) var(--radio-lg);
  padding:var(--e-4); box-shadow:var(--sombra);
}
/* Adentro del recuadro, los paneles dejan de colgar de la barra y pasan a ser
   bloques cerrados, y las tarjetas pierden la sombra: ya están dentro de algo. */
.tabs-cuerpo .panel{ border-top:1px solid var(--borde); border-radius:var(--radio-lg); overflow:hidden; }
.tabs-cuerpo .tarjeta{ box-shadow:none; }
.tabs-cuerpo > :last-child{ margin-bottom:0; }
@media (max-width:640px){
  .tabs-cuerpo{ padding:var(--e-3); }
}
.panel{
  background:var(--superficie); border:1px solid var(--borde); border-top:none;
  border-radius:0 0 var(--radio-lg) var(--radio-lg); padding:var(--e-5);
}
.panel--pegado{ padding:0; }
.panel__vacio{ padding:var(--e-8) var(--e-5); text-align:center; color:var(--texto-suave); }

/* --- TARJETAS ------------------------------------------------------------ */
.tarjeta{
  background:var(--superficie); border:1px solid var(--borde);
  border-radius:var(--radio-lg); box-shadow:var(--sombra);
}
.tarjeta__cabeza{
  padding:10px var(--e-5); border-bottom:1px solid var(--borde);
  display:flex; align-items:center; gap:var(--e-3);
}
.tarjeta__cabeza .acciones{ margin-left:auto; display:flex; gap:var(--e-2); }
.tarjeta__cuerpo{ padding:var(--e-4) var(--e-5); }
.tarjeta__cuerpo--pegado{ padding:0; }

/* Tarjetas de totales, como las 5 del listado de renovaciones */
.totales{ display:grid; gap:var(--e-4); grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); margin-bottom:var(--e-5); }
.total{
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio-lg);
  padding:var(--e-4) var(--e-5); box-shadow:var(--sombra);
  cursor:pointer; border-top:3px solid var(--borde-fuerte);
  transition:box-shadow .12s, transform .12s;
}
.total:hover{ box-shadow:var(--sombra-alta); transform:translateY(-1px); }
.total--activo{ border-color:var(--azul-300); background:var(--azul-50); }
.total__rotulo{ font-size:var(--t-11); text-transform:uppercase; letter-spacing:.06em; color:var(--texto-suave); font-weight:600; }
.total__dato{ font-size:var(--t-28); font-weight:650; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.15; margin:2px 0 var(--e-1); }
.total__detalle{ font-size:var(--t-12); color:var(--texto-suave); font-variant-numeric:tabular-nums; }
.total--gris{ border-top-color:var(--plomo-solido); }
.total--verde{ border-top-color:var(--verde-solido); }
.total--oliva{ border-top-color:var(--oliva-solido); }
.total--rojo{ border-top-color:var(--rojo-solido); }
.total--azul{ border-top-color:var(--azul-solido); }
/* Una tarjeta de total puede ser un enlace al listado filtrado. Hereda el
   color del texto y no se subraya: tiene que verse como la tarjeta que es. */
a.total{ color:inherit; }
a.total:hover{ text-decoration:none; border-color:var(--azul-300); }

/* --- BOTONES ------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:32px; padding:0 var(--e-4);
  font-family:inherit; font-size:var(--t-13); font-weight:500; line-height:1;
  border:1px solid transparent; border-radius:var(--radio);
  /* Un paso más oscuro que el fondo de la página, que ahora es gris-100: con
     el gris de antes un botón suelto sobre la página no tenía borde visible. */
  background:var(--gris-200); color:var(--gris-700);
  cursor:pointer; white-space:nowrap;
  transition:background .12s, border-color .12s, box-shadow .12s;
}
.btn:hover{ background:var(--gris-300); text-decoration:none; }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--azul-200); }
.btn[disabled],.btn--inactivo{ opacity:.45; pointer-events:none; }

.btn--primario{ background:var(--interactivo); color:#fff; }
.btn--primario:hover{ background:var(--azul-700); }
.btn--contorno{ background:var(--superficie); border-color:var(--borde-fuerte); color:var(--gris-700); }
.btn--contorno:hover{ background:var(--gris-50); border-color:var(--gris-400); }
/* Sutil, pero legible: antes heredaba el gris claro del texto secundario y
   un botón de acción no puede tener menos contraste que el texto que rodea. */
.btn--sutil{ background:transparent; color:var(--gris-700); }
.btn--sutil:hover{ background:var(--gris-100); color:var(--gris-900); }
.btn--peligro{ background:var(--rojo-solido); color:#fff; }
.btn--peligro:hover{ background:var(--rojo-fg); }
/* «Limpiar filtros»: resaltado en ámbar para que no se confunda con que no hay
   nada filtrado, pero sin gritar como un botón primario. Lleva un puntito igual
   al del menú, así se asocian de un vistazo. */
.btn--limpiar{
  background:var(--naranjo-bg); color:var(--naranjo-fg);
  border:1px solid #f3d3ad; font-weight:500;
}
.btn--limpiar:hover{ background:#ffe8d1; border-color:var(--naranjo-solido); color:var(--naranjo-fg); }
.btn--limpiar::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--naranjo-solido); flex:0 0 auto; margin-right:1px;
}
.btn--chico{ height:26px; padding:0 var(--e-3); font-size:var(--t-12); gap:5px; }
/* El icono de un botón chico va un punto más chico: al tamaño normal le
   gana al texto en una fila de tabla. */
.btn--chico .ico{ width:13px; height:13px; }
/* Un icono nunca se encoge ni se estira: es un cuadrado. */
.btn .ico{ flex:0 0 auto; }
.btn--icono{ width:32px; padding:0; }

/* El sistema actual bloquea el botón mientras la petición viaja. Se mantiene,
   porque evita el doble envío, pero mostrando por qué está bloqueado. */
.btn--cargando{ pointer-events:none; color:transparent !important; position:relative; }
.btn--cargando::after{
  content:""; position:absolute; width:13px; height:13px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  animation:girar .6s linear infinite;
}
.btn--contorno.btn--cargando::after,.btn--sutil.btn--cargando::after{
  border-color:var(--gris-300); border-top-color:var(--gris-600);
}
@keyframes girar{ to{ transform:rotate(360deg); } }

/* --- PASTILLAS DE ESTADO ------------------------------------------------- */
.estado{
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 9px; border-radius:20px;
  font-size:var(--t-12); font-weight:500; white-space:nowrap;
  background:var(--plomo-bg); color:var(--plomo-fg);
}
.estado .punto{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 6px; }
.estado--rojo{ background:var(--rojo-bg); color:var(--rojo-fg); }
.estado--naranjo{ background:var(--naranjo-bg); color:var(--naranjo-fg); }
.estado--amarillo{ background:var(--amarillo-bg); color:var(--amarillo-fg); }
.estado--oliva{ background:var(--oliva-bg); color:var(--oliva-fg); }
.estado--verde{ background:var(--verde-bg); color:var(--verde-fg); }
.estado--calipso{ background:var(--calipso-bg); color:var(--calipso-fg); }
.estado--azul{ background:var(--azul-bg); color:var(--azul-fg); }
.estado--violeta{ background:var(--violeta-bg); color:var(--violeta-fg); }
.estado--purpura{ background:var(--purpura-bg); color:var(--purpura-fg); }
.estado--rosado{ background:var(--rosado-bg); color:var(--rosado-fg); }
.estado--cafe{ background:var(--cafe-bg); color:var(--cafe-fg); }
.estado--plomo{ background:var(--plomo-bg); color:var(--plomo-fg); }
.estado--negro{ background:var(--negro-bg); color:var(--negro-fg); }
/* Terminal: el estado ya no admite acciones. Se marca con un trazo, no con
   otro color, para no gastar un color en algo ortogonal. */
.estado--terminal{ box-shadow:inset 0 0 0 1px currentColor; }

/* --- TABLA DE DATOS ------------------------------------------------------ */
.tabla-env{ overflow:auto; border-radius:0 0 var(--radio-lg) var(--radio-lg); }
table.tabla{ width:100%; border-collapse:separate; border-spacing:0; font-size:var(--t-13); }
table.tabla thead th{
  position:sticky; top:0; z-index:2;
  background:var(--gris-50); color:var(--gris-600);
  font-size:var(--t-11); font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  text-align:left; padding:var(--e-2) var(--e-3); height:32px;
  border-bottom:1px solid var(--borde-fuerte); white-space:nowrap;
}
table.tabla thead th.num{ text-align:right; }
/* Alineadas arriba. Con alto fijo y centrado vertical, una fila donde el nombre
   ocupa dos líneas dejaba las demás celdas flotando al medio y la lectura
   horizontal se perdía. Ahora todas arrancan a la misma altura y la fila crece
   con su contenido; el relleno mantiene los 34px cuando es de una línea. */
table.tabla tbody td{
  padding:7px var(--e-3);
  border-bottom:1px solid var(--borde);
  vertical-align:top;
}
/* Lo que va dentro de una celda y es de una sola línea se sigue viendo
   centrado respecto del texto, porque arranca en la misma base. */
table.tabla tbody td > .fila-flex{ align-items:center; }
/* Sin cebra y sin bordes verticales: en una tabla de 20 columnas el rayado
   compite con el dato. El hover marca la fila, que es lo que se necesita para
   no perderse recorriéndola a lo ancho. */
table.tabla tbody tr:hover td{ background:var(--azul-50); }
table.tabla tbody tr.seleccionada td{ background:var(--azul-100); }
table.tabla tbody tr:last-child td{ border-bottom:none; }
table.tabla tfoot td{
  padding:var(--e-2) var(--e-3); font-weight:600; background:var(--gris-50);
  border-top:1px solid var(--borde-fuerte); font-variant-numeric:tabular-nums;
}
.tabla .apagada{ opacity:.5; }
.tabla .principal-celda{ font-weight:500; }
.tabla .secundario{ font-size:var(--t-11); color:var(--texto-suave); }

/* --- FORMULARIOS -------------------------------------------------------- */
.campo{ margin-bottom:var(--e-3); }
.campo__rotulo{ display:block; font-size:var(--t-12); font-weight:500; color:var(--gris-700); margin-bottom:3px; }
.campo__rotulo .req{ color:var(--rojo-solido); }
.control{
  width:100%; height:32px; padding:0 var(--e-3);
  font-family:inherit; font-size:var(--t-13); color:var(--texto);
  background:var(--superficie); border:1px solid var(--borde-fuerte); border-radius:var(--radio);
}
textarea.control{ height:auto; min-height:76px; padding:7px var(--e-3); resize:vertical; line-height:1.5; }
select.control{ appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%236b7787' d='M6 8.5 2 4.5h8z'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center; padding-right:28px; }
.control:hover{ border-color:var(--gris-400); }
.control:focus{ outline:none; border-color:var(--azul-500); box-shadow:0 0 0 3px var(--azul-100); }
.control[disabled]{ background:var(--gris-100); color:var(--texto-suave); }
.control--error{ border-color:var(--rojo-solido); }
.control--error:focus{ box-shadow:0 0 0 3px var(--rojo-bg); }
.campo__ayuda{ font-size:var(--t-11); color:var(--texto-suave); margin-top:3px; line-height:1.35; }
.campo__error{ font-size:var(--t-11); color:var(--rojo-fg); margin-top:3px; font-weight:500; line-height:1.35; }

/* Todos los filtros arrancan arriba. Con `align-items:end` se alineaban por
   abajo, así que un campo sin texto de ayuda —"Tipo"— quedaba empujado hacia
   abajo hasta la altura de la ayuda de los que sí la tienen, y los rótulos no
   calzaban entre sí. */
.filtros{ display:grid; gap:var(--e-4); grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); align-items:start; }
.filtros .campo{ margin-bottom:0; }
/* La celda de botones no tiene rótulo: se le deja su altura para que los
   botones queden a la misma línea que los campos y no flotando arriba.
   23px = 18px de línea del rótulo + 5px de separación. */
.filtros .campo--acciones{ padding-top:21px; }

/* --- MENSAJES ----------------------------------------------------------- */
.aviso{
  display:flex; gap:var(--e-3); padding:var(--e-3) var(--e-4);
  border-radius:var(--radio); border:1px solid var(--borde);
  background:var(--gris-50); font-size:var(--t-13); margin-bottom:var(--e-4);
}
.aviso__ico{ flex:0 0 auto; font-size:var(--t-14); line-height:1.4; }
.aviso strong{ display:block; margin-bottom:1px; }
.aviso--ok{ background:var(--verde-bg); border-color:#bde5cd; color:var(--verde-fg); }
.aviso--alerta{ background:var(--amarillo-bg); border-color:#eedfa0; color:var(--amarillo-fg); }
.aviso--error{ background:var(--rojo-bg); border-color:#f3c9c9; color:var(--rojo-fg); }
.aviso--info{ background:var(--azul-bg); border-color:var(--azul-200); color:var(--azul-fg); }

/* --- PAGINADOR ---------------------------------------------------------- */
.paginador{
  display:flex; align-items:center; gap:var(--e-2);
  padding:var(--e-3) var(--e-5); border-top:1px solid var(--borde);
  font-size:var(--t-12); color:var(--texto-suave);
}
.paginador .paginas{ margin-left:auto; display:flex; gap:3px; }
.paginador .pag{
  min-width:28px; height:28px; padding:0 7px; border-radius:var(--radio);
  display:grid; place-items:center; font-variant-numeric:tabular-nums;
  color:var(--gris-700); border:1px solid transparent;
}
.paginador .pag:hover{ background:var(--gris-100); text-decoration:none; }
.paginador .pag--activa{ background:var(--interactivo); color:#fff; font-weight:600; }

/* --- AUXILIARES --------------------------------------------------------- */
.fila-flex{ display:flex; align-items:center; gap:var(--e-3); flex-wrap:wrap; }
.suave{ color:var(--texto-suave); }
/* Faltaba: el JS de los buscadores agrega .hidden para esconder la caja de
   resultados, y sin esta regla quedaba un rectángulo vacío con borde y sombra
   debajo del campo. */
.hidden{ display:none !important; }
.rejilla-2{ display:grid; gap:var(--e-5); grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.pila{ display:flex; flex-direction:column; gap:var(--e-5); }
.muestra{ display:flex; flex-wrap:wrap; gap:var(--e-2); align-items:center; }

/* --- RESPONSIVO --------------------------------------------------------- */
@media (max-width:900px){
  .app{ flex-direction:column; }
  .lateral{ width:100%; flex:none; height:auto; position:static; }
  .lateral__nav{ display:flex; gap:var(--e-1); overflow-x:auto; padding:var(--e-2); }
  .lateral__grupo{ display:none; }
  .lateral a.item{ white-space:nowrap; }
  /* El pie lleva el único acceso a "Salir". Antes se ocultaba junto con los
     títulos de grupo y en el teléfono no había forma de cerrar sesión. */
  .lateral__pie{ padding:var(--e-2) var(--e-4); }
  /* «Salir» se pega al nombre en vez de irse al extremo derecho de la
     hilera: en el teléfono la hilera mide lo que mide la pantalla y el
     enlace quedaba en el borde, fuera de lo que se ve. */
  .lateral__pie .quien{ flex:0 1 auto; overflow:hidden; }
  .lateral__pie .quien b{ display:inline; }
  .contenido,.cabecera{ padding:var(--e-4); }
  .cabecera__acciones{ width:100%; margin-left:0; }
  /* En pantalla angosta el encabezado ya repite el número en el título, así
     que el bloque grande sobra y empuja el contenido hacia abajo. */
  .solo-ancho{ display:none; }
  /* Las pestañas más apretadas, para que quepan más de las seis. */
  .tabs a{ padding:9px var(--e-3); }
  /* La rejilla de dos columnas pasa a una sola y pierde el borde que las
     separaba, que en vertical no separa nada. */
  .rejilla-2 > div[style*="border-right"]{ border-right:none !important; }
}

/* --- GUÍA ----------------------------------------------------------------
   Texto para leer, no para escanear: interlínea más suelta y títulos con aire.
   Es lo contrario de una tabla de datos, y está bien que lo sea. */
/* Sin tope de ancho propio: el texto usa todo el espacio de la tarjeta, y el
   ancho lo acota la tarjeta. Tenía un límite de 74 caracteres por línea —lo que
   recomienda la tipografía para leer de corrido— pero en pantalla grande eso
   dejaba líneas muy cortas con medio ancho en blanco al lado, y se veía partido. */
.md-cuerpo{ font-size:var(--t-14); line-height:1.65; }
.md-cuerpo h2{ font-size:var(--t-18); margin:var(--e-6) 0 var(--e-3); }
.md-cuerpo h3{ font-size:var(--t-16); margin:var(--e-5) 0 var(--e-2); }
.md-cuerpo h4{ font-size:var(--t-13); margin:var(--e-4) 0 var(--e-2);
  text-transform:none; letter-spacing:0; color:var(--texto); font-weight:600; }
.md-cuerpo > :first-child{ margin-top:0; }
.md-cuerpo p{ margin:0 0 var(--e-4); }
.md-cuerpo ul,.md-cuerpo ol{ margin:0 0 var(--e-4); padding-left:var(--e-5); }
.md-cuerpo li{ margin-bottom:var(--e-2); }
.md-cuerpo hr{ border:none; border-top:1px solid var(--borde); margin:var(--e-6) 0; }
.md-cuerpo .tabla-env{ margin:0 0 var(--e-4); border:1px solid var(--borde); border-radius:var(--radio); }
.md-cuerpo .md-tabla{ font-size:var(--t-13); }
.md-cuerpo .md-tabla td{ vertical-align:top; }
.md-codigo{ background:var(--gris-100); border:1px solid var(--borde); border-radius:var(--radio);
  padding:var(--e-3) var(--e-4); overflow-x:auto; font-family:var(--fuente-mono);
  font-size:var(--t-12); line-height:1.5; margin:0 0 var(--e-4); }
.md-cita{ margin:0 0 var(--e-4); padding:var(--e-3) var(--e-4);
  border-left:3px solid var(--azul-300); background:var(--azul-50);
  border-radius:0 var(--radio) var(--radio) 0; }
.md-cita p:last-child{ margin-bottom:0; }
.md-cuerpo h2{ padding-bottom:var(--e-2); border-bottom:1px solid var(--borde); }

/* Diagramas (```mermaid). Van en su propio recuadro, centrados y con scroll
   lateral si no caben: un flujo achicado hasta que entre en un teléfono deja
   de leerse. Mientras Mermaid no lo dibuja, el texto se ve como código. */
.md-diagrama{ margin:0 0 var(--e-5); padding:var(--e-5) var(--e-4);
  background:var(--gris-25); border:1px solid var(--borde); border-radius:var(--radio-lg);
  overflow-x:auto; text-align:center; }
.md-diagrama .mermaid{ margin:0; font-family:var(--fuente-mono); font-size:var(--t-12);
  text-align:left; white-space:pre; color:var(--gris-600); }
.md-diagrama .mermaid[data-processed]{ font-family:inherit; text-align:center; white-space:normal; }
.md-diagrama svg{ max-width:100%; height:auto; }

/* Índice de la guía: una tarjeta por tema, con icono y lo que trae. */
.guia-tema{ display:flex; gap:var(--e-4); padding:var(--e-4) var(--e-5);
  color:inherit; text-decoration:none; transition:border-color .15s, box-shadow .15s, transform .15s; }
.guia-tema:hover{ text-decoration:none; border-color:var(--azul-300);
  box-shadow:0 6px 18px rgba(10,43,80,.10); transform:translateY(-1px); }
.guia-tema__ico{ flex:0 0 40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--azul-50); color:var(--azul-600); }
.guia-tema__texto{ min-width:0; display:flex; flex-direction:column; flex:1; }
.guia-tema__texto p{ margin:var(--e-2) 0 0; font-size:var(--t-12); }
.guia-tema__pie{ display:flex; align-items:center; gap:var(--e-2); margin-top:auto; padding-top:var(--e-3); }
.guia-tema__pie .estado{ display:inline-flex; align-items:center; gap:4px; }
.guia-tema__leer{ margin-left:auto; font-size:var(--t-12); font-weight:500; color:var(--azul-600); }

.item-guia{ display:block; padding:7px var(--e-3); border-radius:var(--radio);
  font-size:var(--t-13); color:var(--gris-700); }
.item-guia:hover{ background:var(--gris-100); text-decoration:none; }
.item-guia--activo{ background:var(--azul-50); color:var(--azul-700); font-weight:500; }

/* --- BUSCADOR CON SUGERENCIAS -------------------------------------------- */
.buscador-resultados{
  position:relative; margin-top:3px; background:var(--superficie);
  border:1px solid var(--borde-fuerte); border-radius:var(--radio);
  box-shadow:var(--sombra-alta); max-height:300px; overflow-y:auto; z-index:5;
}
.buscador-item{
  display:block; width:100%; text-align:left; border:none; background:none;
  padding:7px var(--e-3); cursor:pointer; font:inherit; color:var(--texto);
  border-bottom:1px solid var(--borde);
}
.buscador-item:last-child{ border-bottom:none; }
.buscador-item:hover,.buscador-item:focus{ background:var(--azul-50); outline:none; }
.buscador-item b{ display:block; font-weight:500; }
.buscador-item span{ font-size:var(--t-11); color:var(--texto-suave); font-variant-numeric:tabular-nums; }
.buscador-vacio{ padding:var(--e-3); color:var(--texto-suave); font-size:var(--t-12); }

/* --- CAMPOS EN REJILLA ----------------------------------------------------
   Los formularios usan todo el ancho de la página, así que los campos se
   acomodan en columnas en vez de estirarse. Un campo de texto de 1200px no es
   más cómodo: es más difícil de apuntar y de leer. El número de columnas sale
   del ancho disponible, sin medidas fijas. */
.campos{
  display:grid; gap:10px var(--e-4);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  align-items:start;
}
/* Para los campos cortos de verdad: fechas, montos, porcentajes. Caben seis
   en una pantalla de 1200px en vez de cuatro, y el formulario deja de pedir
   scroll por cosas que ocupan ocho caracteres. */
.campos--corto{ grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); }
.campos--largo{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.campos .campo{ margin-bottom:0; }
/* Para lo que sí necesita todo el ancho: una observación, una dirección larga */
.campos .campo--ancho{ grid-column:1 / -1; }

/* --- SELECTOR MÚLTIPLE CON BUSCADOR -------------------------------------- */
.multi{ position:relative; }
.multi__resultados{
  position:absolute; left:0; right:0; z-index:6; margin-top:3px;
  background:var(--superficie); border:1px solid var(--borde-fuerte);
  border-radius:var(--radio); box-shadow:var(--sombra-alta);
  max-height:300px; overflow-y:auto;
}
.multi__grupo{
  padding:6px var(--e-3); font-size:var(--t-11); font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; color:var(--texto-suave);
  background:var(--gris-50); border-bottom:1px solid var(--borde); position:sticky; top:0;
}
.multi__elegidos{ display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--e-3); }
.multi__vacio{ font-size:var(--t-12); color:var(--texto-suave); }
.multi__tag{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--calipso-bg); color:var(--calipso-fg);
  border-radius:20px; padding:3px 4px 3px 11px; font-size:var(--t-12); font-weight:500;
}
.multi__quitar{
  border:none; background:rgba(0,0,0,.08); color:inherit; cursor:pointer;
  width:18px; height:18px; border-radius:50%; line-height:1; font-size:14px;
  display:grid; place-items:center; padding:0;
}
.multi__quitar:hover{ background:rgba(0,0,0,.18); }

/* Utilidad: un número alineado a la izquierda. `.num` lo manda a la derecha,
   que es lo correcto para montos, pero un folio o un RUT se leen mejor
   alineados con el resto de la columna. */
.num.izq{ text-align:left; }

/* La opción resaltada con las flechas del teclado. Mismo aspecto que al pasar
   el mouse, para que recorrer con teclado y con mouse se vean igual. */
.buscador-item--marcado{ background:var(--azul-50); }

/* --- DENSIDAD DE LOS FORMULARIOS -----------------------------------------
   Pedido de Freddy: menos aire y menos scroll. Un formulario de propuesta
   tiene treinta campos; con la separación de antes no cabía ni la mitad en
   pantalla y había que recordar lo de arriba para llenar lo de abajo.

   `form.denso` se pone en el <form> y afecta a todo lo de adentro, así que la
   pantalla no se llena de `style="margin-bottom:…"` campo por campo. */
form.denso .tarjeta{ margin-bottom:var(--e-3); }
form.denso .tarjeta__cuerpo{ padding:var(--e-3) var(--e-4); }
form.denso .tarjeta__cabeza{ padding:7px var(--e-4); }
form.denso .tarjeta__cabeza h3{ font-size:var(--t-13); }
form.denso .aviso{ margin-bottom:var(--e-3); padding:7px var(--e-3); }
form.denso textarea.control{ min-height:58px; }
form.denso .campo:last-child{ margin-bottom:0; }

/* Dos tarjetas lado a lado cuando la pantalla da. Debajo de 1100px se apilan
   solas: en un notebook angosto dos columnas de campos quedan demasiado
   estrechas para leer la etiqueta. */
.columnas{ display:grid; gap:0 var(--e-3); grid-template-columns:1fr; align-items:start; }
@media (min-width:1100px){ .columnas{ grid-template-columns:1fr 1fr; } }

/* Un valor que el sistema calcula y no se escribe. Se ve como un campo para
   que no rompa la rejilla, pero sin borde de entrada: no invita a escribir. */
.calculado{
  height:32px; display:flex; align-items:center; gap:6px;
  padding:0 var(--e-3); border-radius:var(--radio);
  background:var(--azul-50); border:1px solid var(--azul-200);
  font-size:var(--t-13); font-variant-numeric:tabular-nums;
}
.calculado b{ font-weight:650; }

/* Una tabla donde cada celda es un campo. Los controles se pegan al alto de la
   fila y pierden el relleno extra: con treinta coberturas, cuatro píxeles por
   fila son ciento veinte de scroll. */
.tabla--editable td{ padding:4px 6px; vertical-align:middle; }
.tabla--editable .control{ height:28px; font-size:var(--t-12); }
.tabla--editable select.control{ padding-right:22px; background-position:right 6px center; }
.tabla--editable .secundario{ white-space:nowrap; }

/* Un botón dentro de una rejilla de campos: se alinea con los controles, no
   con sus rótulos. */
.campos .campo--acciones{ display:flex; align-items:flex-end; min-height:52px; }
.campos .campo--acciones .btn{ width:100%; }

/* --- PANEL DE INICIO -----------------------------------------------------
   Banner de saludo, tres columnas y la tira del equipo. Los colores salen de
   los tokens: el diseño venía con los hexadecimales escritos a mano y así se
   desalinearía la primera vez que cambie la marca. */
.ini{ display:flex; flex-direction:column; gap:var(--e-5); }

.ini-hero{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-6);
  padding:var(--e-6) var(--e-8);
  border-radius:var(--radio-lg);
  background:var(--azul-50); border:1px solid var(--azul-100);
}
.ini-hero__txt{ flex:1 1 320px; min-width:0; }
.ini-hero__txt h1{
  margin:0; font-size:var(--t-28); line-height:1.2;
  letter-spacing:-.01em; color:var(--azul-900);
}
.ini-hero__txt p{ margin:6px 0 0; font-size:var(--t-16); line-height:1.5; color:var(--gris-700); }
.ini-hero__acc{ display:flex; gap:var(--e-2); flex-wrap:wrap; }
/* El avatar grande del saludo. Va redondo y con borde blanco para que se
   despegue del fondo celeste del banner. */
.ini-hero .avatar.ini-hero__foto{
  width:96px; height:96px; flex-basis:96px; font-size:var(--t-28);
  border-radius:50%; border:4px solid #fff;
  box-shadow:0 6px 16px rgba(0,82,162,.18);
}
.ini-rojo{ color:var(--rojo-fg); }

.ini-cols{
  display:grid; gap:var(--e-5);
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
}
/* Debajo de 1000px las tres columnas no caben sin partir los nombres de los
   clientes, que es justo lo que hay que leer. Se apilan. */
@media (max-width:1000px){ .ini-cols{ grid-template-columns:1fr; } }

.ini-ch{
  display:flex; align-items:center; gap:var(--e-2);
  padding:var(--e-3) var(--e-4); border-bottom:1px solid var(--borde);
  font-size:var(--t-13); font-weight:600;
}
.ini-ch i{ width:8px; height:8px; border-radius:50%; flex:0 0 8px; }
.ini-n{
  margin-left:auto; font-size:var(--t-12); font-weight:600;
  padding:2px 8px; border-radius:999px; font-variant-numeric:tabular-nums;
}

.ini-it{
  display:flex; flex-direction:column; gap:3px;
  padding:9px var(--e-4); border-bottom:1px solid var(--borde);
  color:var(--texto) !important; text-decoration:none;
}
.ini-it:last-child{ border-bottom:none; }
.ini-it:hover{ background:var(--gris-50); text-decoration:none; }
.ini-top{ display:flex; align-items:center; gap:var(--e-2); min-width:0; }
/* El folio también acá: es por donde se identifica la fila. Más chico que en
   el listado porque esta tarjeta es angosta y comparte línea con el nombre. */
.ini-id{ font-size:var(--t-14); font-weight:650; letter-spacing:-.01em;
         font-variant-numeric:tabular-nums; color:var(--interactivo); }
/* El nombre del cliente se recorta con puntos suspensivos en vez de empujar
   los días fuera de la tarjeta. */
.ini-tit{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.ini-late{ margin-left:auto; font-size:var(--t-12); font-weight:600;
           color:var(--rojo-fg); white-space:nowrap; }
.ini-sub{
  display:flex; align-items:center; gap:5px;
  font-size:var(--t-11); color:var(--texto-suave);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ini-vacio{ padding:var(--e-4); color:var(--texto-suave); font-size:var(--t-12); }
.ini-mas{ padding:7px var(--e-4); font-size:var(--t-11); color:var(--texto-suave);
          background:var(--gris-25); border-top:1px solid var(--borde); }

/* Tira del equipo conectado */
.ini-eq{ display:flex; flex-wrap:wrap; align-items:center;
         gap:var(--e-5); padding:var(--e-4) var(--e-5); }
.ini-eq__rotulo{ display:flex; flex-direction:column; margin-right:var(--e-2); }
.ini-eq__rotulo b{ font-size:var(--t-13); font-weight:600; }
.ini-eq__rotulo span{ font-size:var(--t-11); color:var(--texto-suave); }
.ini-tm{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  width:76px; text-align:center;
  font-size:var(--t-11); color:var(--gris-700); text-decoration:none;
}
.ini-tm:hover{ text-decoration:none; color:var(--azul-700); }
.ini-ph{ position:relative; display:inline-flex; }
.ini-ph .avatar{ border-radius:50%; }
/* El punto verde de «conectada». Va con borde blanco para que se lea sobre
   cualquier foto. */
.ini-ph i{
  position:absolute; right:1px; bottom:1px;
  width:13px; height:13px; border-radius:50%;
  border:2px solid #fff; background:var(--verde-solido);
}

/* --- SEGUIMIENTO ---------------------------------------------------------
   La estrella de las fichas (va dentro del rótulo del folio, chica, para no
   competir con los botones de la cabecera) y las tarjetas del inicio. */
.folio__rotulo{ display:flex; align-items:center; justify-content:flex-end; gap:4px; }
.seg{ display:inline-flex; margin:0; }
.seg__btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; padding:0; border:0; border-radius:50%;
  background:transparent; color:var(--gris-400); cursor:pointer;
  transition:color .15s, background .15s, transform .15s;
}
.seg__btn:hover{ color:var(--amarillo-solido); background:var(--amarillo-bg); }
.seg__btn:active{ transform:scale(.88); }
.seg__btn--on{ color:var(--amarillo-solido); }
.seg__btn--on .ico{ fill:currentColor; }
.seg__btn[disabled]{ opacity:.5; cursor:wait; }

.seg-panel__cab{
  display:flex; align-items:center; gap:var(--e-2); margin-bottom:var(--e-3);
  font-size:var(--t-13); font-weight:600;
}
.seg-panel__cab .ico{ color:var(--amarillo-solido); fill:currentColor; }
.seg-panel__cab span{ font-weight:400; font-size:var(--t-11); color:var(--texto-suave); }
.seg-tjs{
  display:grid; gap:var(--e-3);
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.seg-tj{ position:relative; padding:0; transition:border-color .15s, box-shadow .15s; }
.seg-tj:hover{ border-color:var(--azul-100); box-shadow:0 4px 12px rgba(0,82,162,.08); }
.seg-tj__link{
  display:flex; flex-direction:column; gap:3px; height:100%;
  padding:var(--e-3) var(--e-4); color:var(--texto) !important; text-decoration:none;
}
.seg-tj__link:hover{ text-decoration:none; }
.seg-tj__tipo{ font-size:var(--t-11); color:var(--texto-suave); text-transform:uppercase;
               letter-spacing:.05em; font-weight:600; padding-right:22px; }
.seg-tj__tipo b{ color:var(--interactivo); font-variant-numeric:tabular-nums; letter-spacing:0; }
.seg-tj__tit{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.seg-tj__det{ font-size:var(--t-12); color:var(--texto-suave);
              white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.seg-tj__pie{ display:flex; align-items:center; gap:var(--e-2); margin-top:auto; padding-top:6px; }
.seg-tj__quien{ margin-left:auto; display:flex; align-items:center; gap:5px;
                font-size:var(--t-11); color:var(--texto-suave); white-space:nowrap; }
.seg-tj .seg{ position:absolute; top:6px; right:6px; }
/* Desmarcada desde el inicio: queda a la vista (por si fue sin querer) pero
   apagada; al recargar ya no está. */
.seg-tj--off{ opacity:.55; }

/* --- LISTADO DE COTIZACIONES ---------------------------------------------
   Tarjetas de estado que además filtran, y una tabla con avatares. Los
   colores salen de la paleta de estado: la tarjeta «Negocio ganado» usa el
   mismo verde que la pastilla de ese estado en la tabla, así que se reconocen
   entre sí sin tener que leer. */
.cot{ display:flex; flex-direction:column; gap:var(--e-4); }
.cot-bajada{ margin:0; color:var(--texto-suave); font-size:var(--t-13); }
.cot-bajada b{ color:var(--texto); font-variant-numeric:tabular-nums; }

.cot-est{ display:grid; gap:var(--e-3); grid-template-columns:repeat(5,minmax(0,1fr)); }
@media (max-width:1100px){ .cot-est{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){  .cot-est{ grid-template-columns:1fr; } }

.cot-t{
  display:flex; flex-direction:column; gap:var(--e-2);
  padding:var(--e-3) var(--e-4); border-radius:14px;
  border:1px solid transparent; text-decoration:none;
}
.cot-t:hover{ text-decoration:none; filter:brightness(.97); }
/* La tarjeta activa se marca con su propio color, no con azul: así se ve cuál
   está filtrando sin romper el código de color del estado. */
.cot-t--activa{ border-color:currentColor; box-shadow:0 0 0 3px rgba(20,26,34,.07); }
.cot-t__h{ display:flex; align-items:center; gap:7px; font-size:var(--t-12); font-weight:600; }
.cot-t__h i{
  width:24px; height:24px; border-radius:7px; flex:0 0 24px;
  display:grid; place-items:center; background:rgba(255,255,255,.65);
}
.cot-t__n{ display:flex; align-items:baseline; gap:7px; }
.cot-t__n b{ font-size:var(--t-28); font-weight:700; letter-spacing:-.02em;
             line-height:1.05; font-variant-numeric:tabular-nums; }
.cot-t__n span{ font-size:var(--t-12); opacity:.75; font-variant-numeric:tabular-nums; }

/* «En curso» va BLANCA, no con el gris de su estado: ese gris (--plomo-bg)
   es exactamente el nuevo color de fondo de la página, así que la tarjeta
   desaparecía. Blanca con borde se lee igual de neutra y se despega. Es lo que
   hacía el diseño original con esta tarjeta. */
.cot-t--plomo{ background:var(--superficie); color:var(--plomo-fg); border-color:var(--borde); }
.cot-t--plomo .cot-t__h i{ background:var(--plomo-bg); }
.cot-t--naranjo{  background:var(--naranjo-bg);  color:var(--naranjo-fg); }
.cot-t--violeta{  background:var(--violeta-bg);  color:var(--violeta-fg); }
.cot-t--verde{    background:var(--verde-bg);    color:var(--verde-fg); }
.cot-t--rojo{     background:var(--rojo-bg);     color:var(--rojo-fg); }

/* Fila de filtros: una línea que se parte sola. No usa `.filtros` porque acá
   los campos no llevan rótulo —el placeholder dice qué es— y así entran los
   seis en una sola franja. */
.cot-fil{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2);
  padding:var(--e-3) var(--e-4); border-bottom:1px solid var(--borde);
}
.cot-fil .control{ width:auto; height:34px; }
.cot-fil__q{ flex:1 1 260px; min-width:200px; background:var(--gris-50); }
.cot-fil .btn{ height:34px; }

/* Filas más apretadas que el resto del sistema. Esta tabla lleva dos líneas en
   tres de sus columnas —nombre + tipo de cliente, día + hora— así que con el
   relleno y el interlineado normales quedaba en 50px por fila. Bajando los dos
   queda en unos 42 y entran cuatro filas más por pantalla, sin que el dato se
   pegue al borde de la celda. */
.cot-tabla tbody td{ padding:5px var(--e-3); line-height:1.35; }
.cot-tabla .secundario{ line-height:1.3; }
/* El avatar del cliente baja a 22px para no ser más alto que las dos líneas
   que acompaña. */
.cot-cli .avatar{ width:22px; height:22px; flex-basis:22px; font-size:9px; }
.cot-cli{ display:flex; align-items:center; gap:var(--e-2); min-width:0; }
.cot-eq{ display:flex; align-items:center; gap:var(--e-2); min-width:0; }
/* Los avatares del equipo se solapan un poco cuando hay dos, como en una lista
   de participantes. El borde blanco los separa. */
.cot-eq .avatar + .avatar{ margin-left:-12px; box-shadow:0 0 0 2px var(--superficie); }
.cot-eq span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.cot-tipo{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.cot-tipo i{ width:6px; height:6px; border-radius:50%; flex:0 0 6px; }
.cot-tipo .cot-tipo--nuevo{ background:var(--azul-solido); }
.cot-tipo .cot-tipo--otro{  background:var(--purpura-solido); }

/* El botón de abrir la fila. Aparece al pasar por encima: siempre visible son
   veinticinco flechas compitiendo con los datos. */
.cot-ir{
  width:28px; height:28px; border-radius:8px;
  border:1px solid var(--borde); color:var(--gris-600);
  display:grid; place-items:center; opacity:0; transition:opacity .12s;
}
.cot-tabla tr:hover .cot-ir{ opacity:1; }
.cot-ir:hover{ background:var(--azul-50); border-color:var(--azul-300); color:var(--azul-700); }
/* En pantalla táctil no hay «pasar por encima», así que se queda visible. */
@media (hover:none){ .cot-ir{ opacity:1; } }

/* --- EL FOLIO ------------------------------------------------------------
   El número con el que la gente habla: «ve la cotización 3999», «la propuesta
   422340». Se dice por teléfono, se anota en un papel y se busca en el
   listado, así que tiene que leerse de lejos y no competir con el nombre del
   cliente por el mismo tamaño de letra.

   Dos formas del mismo dato:
     .folio        el bloque grande de la ficha
     .folio-celda  la celda del listado
   -------------------------------------------------------------------------- */
.folio{
  margin-left:auto; text-align:right; flex:none;
  padding-left:var(--e-5); border-left:1px solid var(--borde);
}
.folio__rotulo{
  font-size:var(--t-11); color:var(--texto-suave);
  text-transform:uppercase; letter-spacing:.06em; font-weight:600;
}
.folio__num{
  font-size:38px; line-height:1.02; font-weight:700; letter-spacing:-.025em;
  font-variant-numeric:tabular-nums; color:var(--azul-900);
  display:flex; align-items:baseline; justify-content:flex-end; gap:1px;
}
/* El «#» es un signo de puntuación, no parte del número: a tamaño completo le
   roba peso a los dígitos, que son lo que se lee. */
.folio__num i{ font-style:normal; font-size:.55em; font-weight:600; color:var(--gris-400); }
.folio__pie{ font-size:var(--t-11); color:var(--texto-suave); font-variant-numeric:tabular-nums; }

/* En el listado. Un paso más grande que el resto de la fila y en el azul de
   enlace, porque además es por donde se entra. */
.folio-celda{
  font-size:var(--t-18); font-weight:650; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; color:var(--interactivo);
  text-decoration:none; display:inline-block;
}
.folio-celda:hover{ color:var(--azul-800); text-decoration:none; }

@media (max-width:760px){
  /* En pantalla angosta el bloque grande se pone debajo, a la izquierda y sin
     el borde: a la derecha de un nombre largo no cabe, y antes simplemente se
     escondía — justo el dato que se quería destacar. */
  .folio{
    margin-left:0; text-align:left; width:100%;
    padding-left:0; padding-top:var(--e-3);
    border-left:none; border-top:1px solid var(--borde);
  }
  .folio__num{ justify-content:flex-start; font-size:30px; }
}

/* --- FICHA EN DOS COLUMNAS -----------------------------------------------
   El documento a la izquierda y su historia a la derecha. La columna de la
   derecha es fija y angosta: una línea de tiempo se lee en vertical, y darle
   la mitad del ancho sólo estira las líneas.

   Debajo de 1150px se apila, con la historia abajo: en una pantalla angosta
   lo primero es la cotización.
   -------------------------------------------------------------------------- */
.ficha-cols{ display:grid; gap:var(--e-4); grid-template-columns:1fr; align-items:start; }
@media (min-width:1150px){
  .ficha-cols{ grid-template-columns:minmax(0,1fr) 400px; }
}
/* Sin `position:sticky`. Con las acciones arriba de la bitácora esta columna
   es la más alta de las dos, y fijarla dejaría su parte de abajo —el final de
   la historia— imposible de alcanzar scrolleando. */

/* En una columna de 400px los botones de acción no caben de a dos: van uno por
   línea y a todo el ancho, que además los hace más fáciles de apuntar. Los
   paneles que piden datos heredan la rejilla de `.filtros`, que a este ancho
   se resuelve sola en una sola columna. */
.ficha-cols__lado .muestra .btn,
.ficha-cols__lado .muestra form{ width:100%; }
.ficha-cols__lado .muestra{ display:grid; gap:6px; }
/* La columna principal también es grid con separación: la tarjeta de
   adjuntos quedaba pegada a la rejilla de arriba, sin aire entre las dos. */
/* `min-width:0` sola no alcanza: la columna implícita de ESTA rejilla es
   `auto`, y `auto` se estira hasta el max-content de la tabla más ancha.
   Con eso la ficha crecía hasta 893px dentro de una pista de 697 y se
   metía debajo de la columna de la historia. `minmax(0,1fr)` la obliga a
   caber, y lo que no cabe lo resuelve el `overflow-x` de cada tabla. */
.ficha-cols__principal{
  min-width:0; display:grid; grid-template-columns:minmax(0,1fr);
  gap:var(--e-4); align-content:start;
}
/* La columna de la derecha lleva dos tarjetas —acciones y bitácora— y sin esto
   quedaban pegadas, leyéndose como una sola. */
.ficha-cols__lado{ display:grid; gap:var(--e-4); align-content:start; }

/* --- BITÁCORA COMO LÍNEA DE TIEMPO --------------------------------------- */
.bita{ list-style:none; margin:0; padding:var(--e-4) var(--e-4) var(--e-2); }
.bita__it{
  position:relative; padding:0 0 var(--e-4) var(--e-5);
  /* La línea que une los puntos es el borde izquierdo del propio elemento. */
  border-left:2px solid var(--borde);
  margin-left:5px;
}
.bita__it:last-child{ border-left-color:transparent; padding-bottom:0; }
.bita__punto{
  position:absolute; left:-7px; top:3px;
  width:12px; height:12px; border-radius:50%;
  background:var(--gris-300); box-shadow:0 0 0 3px var(--superficie);
}
/* El nodo «Ahora»: lo que sigue pasando, no lo que pasó. Punto hueco —con el
   color del estado en el borde en vez del relleno—, línea de puntos hacia
   abajo y un halo para que sea el primero que se ve. */
.bita__it--ahora{ border-left-style:dashed; border-left-color:var(--borde-fuerte); }
.bita__it--ahora > .bita__punto{
  width:14px; height:14px; left:-8px;
  background:var(--superficie) !important;
  box-shadow:0 0 0 3px var(--superficie), inset 0 0 0 3px currentColor, 0 0 0 6px var(--azul-100);
}
.bita__it--ahora > .bita__cab b{ color:var(--azul-900); font-size:var(--t-14); }

.bita__cab{ display:flex; align-items:baseline; gap:var(--e-2); flex-wrap:wrap; }
.bita__cab b{ font-size:var(--t-13); font-weight:600; }
.bita__cuando{ margin-left:auto; font-size:var(--t-11); color:var(--texto-suave); white-space:nowrap; }
.bita__paso{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:5px; }
.bita__flecha{ color:var(--gris-400); font-size:var(--t-12); }
/* El texto de un movimiento puede traer una ruta larga sin espacios —las
   líneas que vienen del historial de la v1 incluyen la ruta del archivo— y
   eso ensanchaba la columna hasta sacar la tarjeta de la pantalla. */
.bita__texto{
  margin-top:4px; font-size:var(--t-12); color:var(--gris-600); line-height:1.45;
  overflow-wrap:anywhere;
}
.bita__quien{
  display:flex; align-items:center; gap:6px; margin-top:6px;
  font-size:var(--t-11); color:var(--texto-suave);
}
.bita__quien .avatar{ width:18px; height:18px; flex-basis:18px; font-size:8px; }
.bita__sistema{ font-style:italic; }
.bita__pie{
  padding:var(--e-3) var(--e-4); border-top:1px solid var(--borde);
  font-size:var(--t-11); color:var(--texto-suave); background:var(--gris-25);
  border-radius:0 0 var(--radio-lg) var(--radio-lg);
}

/* El color del punto lo pone el estado al que llegó el movimiento, así que la
   columna de puntos cuenta la historia sin leer el texto. */
.bita__it--plomo    > .bita__punto{ background:var(--plomo-solido); color:var(--plomo-solido); }
.bita__it--azul     > .bita__punto{ background:var(--azul-solido); color:var(--azul-solido); }
.bita__it--amarillo > .bita__punto{ background:var(--amarillo-solido); color:var(--amarillo-solido); }
.bita__it--naranjo  > .bita__punto{ background:var(--naranjo-solido); color:var(--naranjo-solido); }
.bita__it--verde    > .bita__punto{ background:var(--verde-solido); color:var(--verde-solido); }
.bita__it--oliva    > .bita__punto{ background:var(--oliva-solido); color:var(--oliva-solido); }
.bita__it--rojo     > .bita__punto{ background:var(--rojo-solido); color:var(--rojo-solido); }
.bita__it--violeta  > .bita__punto{ background:var(--violeta-solido); color:var(--violeta-solido); }

/* --- ESTADO Y ACCIONES DE LA COTIZACIÓN ----------------------------------
   Primero dónde está, después qué se puede hacer, y lo segundo plegado.
   Antes eran siete botones sueltos al mismo nivel: «Marcar Pendiente x CIA»
   junto a «Anular», y había que leerlos todos para encontrar el que servía.
   -------------------------------------------------------------------------- */
.acc-ahora{
  display:flex; align-items:center; gap:var(--e-2); flex-wrap:wrap;
  padding:var(--e-3); margin-bottom:var(--e-3);
  background:var(--gris-50); border:1px solid var(--borde);
  border-radius:var(--radio);
}
.acc-ahora__desde{ font-size:var(--t-11); color:var(--texto-suave); margin-left:auto; }

/* El despliegue es un <details> nativo: funciona con el JavaScript caído y el
   teclado lo recorre sin que haya que programar nada. */
.acc-grupo{ border:1px solid var(--borde-fuerte); border-radius:var(--radio); margin-bottom:var(--e-2); }
.acc-grupo > summary{
  display:flex; align-items:center; gap:var(--e-2);
  height:34px; padding:0 var(--e-3); cursor:pointer;
  font-size:var(--t-13); font-weight:500; color:var(--gris-700);
  list-style:none; border-radius:var(--radio);
}
.acc-grupo > summary::-webkit-details-marker{ display:none; }
/* El triángulo lo dibujamos nosotros, para que apunte abajo al abrir. */
.acc-grupo > summary::before{
  content:""; width:0; height:0; flex:0 0 auto;
  border-left:5px solid currentColor; border-top:4px solid transparent;
  border-bottom:4px solid transparent; transition:transform .12s;
  opacity:.6;
}
.acc-grupo[open] > summary::before{ transform:rotate(90deg) translateX(1px); }
.acc-grupo > summary:hover{ background:var(--gris-50); }
.acc-grupo[open] > summary{ border-bottom:1px solid var(--borde); border-radius:var(--radio) var(--radio) 0 0; }
.acc-grupo__cuerpo{ padding:var(--e-3); display:grid; gap:6px; }

/* El rótulo de cada subgrupo dentro del despliegue. */
.acc-sub{
  font-size:var(--t-11); font-weight:600; color:var(--texto-suave);
  text-transform:uppercase; letter-spacing:.06em;
  margin-top:var(--e-2);
}
.acc-grupo__cuerpo > .acc-sub:first-child{ margin-top:0; }

/* Cada opción ocupa su línea y lleva el punto del color del estado al que
   lleva: el mismo color que después va a aparecer en la bitácora. */
.acc-op{ width:100%; justify-content:flex-start; gap:var(--e-2); }
.acc-op__punto{ width:8px; height:8px; border-radius:50%; flex:0 0 8px; }
.acc-op__punto--plomo{    background:var(--plomo-solido); }
.acc-op__punto--amarillo{ background:var(--amarillo-solido); }
.acc-op__punto--naranjo{  background:var(--naranjo-solido); }
.acc-op__punto--verde{    background:var(--verde-solido); }
.acc-op__punto--oliva{    background:var(--oliva-solido); }
.acc-op__punto--rojo{     background:var(--rojo-solido); }

/* --- ADJUNTOS -------------------------------------------------------------
   La lista y el visor. Los archivos NO se enlazan por URL directa: salen por
   `?p=adjunto_ver`, que exige sesión. Ver bd/08_adjuntos.sql.
   -------------------------------------------------------------------------- */
.adj-subir{ border-bottom:1px solid var(--borde); background:var(--gris-50); }

.adj-lista{ list-style:none; margin:0; padding:0; }
.adj-it{
  display:flex; align-items:center; gap:var(--e-3);
  padding:9px var(--e-4); border-bottom:1px solid var(--borde);
}
.adj-it:last-child{ border-bottom:none; }
.adj-it:hover{ background:var(--gris-50); }
.adj-it:hover .adj-acc{ opacity:1; }

.adj-ext{ flex:0 0 auto; font-variant-numeric:tabular-nums; min-width:46px; justify-content:center; }
.adj-datos{ min-width:0; flex:1; }

/* El nombre es un <button> cuando abre el visor y un <a> cuando se descarga.
   Se ven igual: lo que cambia es qué pasa al apretarlo, no qué es. */
.adj-nombre{
  display:block; width:100%; text-align:left; padding:0; border:none; background:none;
  font:inherit; font-weight:500; color:var(--interactivo); cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.adj-nombre:hover{ color:var(--azul-800); text-decoration:underline; }
.adj-pie{ font-size:var(--t-11); color:var(--texto-suave); }

.adj-acc{ display:flex; gap:4px; flex:0 0 auto; opacity:0; transition:opacity .12s; }
@media (hover:none){ .adj-acc{ opacity:1; } }

/* --- El visor -------------------------------------------------------------
   Casi toda la pantalla, porque lo que se mira son pólizas: en un recuadro
   chico hay que hacer zoom para leer cada línea. */
.adj-visor{
  width:min(1200px, 94vw); height:92vh; max-width:none; max-height:none;
  padding:0; border:none; border-radius:var(--radio-lg);
  background:var(--superficie); color:var(--texto);
  box-shadow:0 24px 70px rgba(10,43,80,.45);
  overflow:hidden;
}
.adj-visor::backdrop{ background:rgba(10,26,40,.62); }
.adj-visor__cab{
  display:flex; align-items:center; gap:var(--e-3); flex-wrap:wrap;
  padding:var(--e-3) var(--e-4); border-bottom:1px solid var(--borde);
  background:var(--gris-50);
}
.adj-visor__quien{ min-width:0; display:flex; flex-direction:column; }
.adj-visor__quien b{ font-size:var(--t-14); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adj-visor__quien span{ font-size:var(--t-11); }
.adj-visor__nav{ display:flex; align-items:center; gap:var(--e-2); margin-left:auto; }
.adj-visor__nav .btn{ width:30px; padding:0; font-size:var(--t-16); line-height:1; }
.adj-visor__acc{ display:flex; gap:var(--e-2); }

/* El cuerpo ocupa todo lo que queda. El PDF va en un <iframe> para que traiga
   la barra de zoom y páginas del propio navegador; la imagen se ajusta sin
   deformarse y sobre fondo oscuro, que es como se mira una foto. */
.adj-visor__cuerpo{
  height:calc(92vh - 58px); display:grid; place-items:center;
  background:var(--gris-800); overflow:auto;
}
.adj-visor__cuerpo iframe{ width:100%; height:100%; border:none; background:#fff; }
.adj-visor__cuerpo img{ max-width:100%; max-height:100%; object-fit:contain; }

@media (max-width:760px){
  .adj-visor{ width:100vw; height:100vh; border-radius:0; }
  .adj-visor__cuerpo{ height:calc(100vh - 86px); }
  .adj-visor__nav{ margin-left:0; }
}

/* --- ADJUNTOS: LA REJILLA DE MINIATURAS ----------------------------------
   Reemplaza el listado. Lo que se busca en una carpeta de documentos es
   reconocer el que se necesita, y una foto de un choque o la primera plana de
   una póliza se reconocen mirando, no leyendo el nombre.

   `auto-fill` y no `auto-fit`: con un solo archivo, `auto-fit` estira la
   tarjeta a todo el ancho de la tarjeta madre y queda una miniatura enorme y
   sola. Con `auto-fill` conserva su tamaño y el resto queda vacío, que es lo
   correcto.
   -------------------------------------------------------------------------- */
.adj-rejilla{
  display:grid; gap:var(--e-3);
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  padding:var(--e-4);
}

.adj-tj{
  margin:0; display:flex; flex-direction:column;
  border:1px solid var(--borde); border-radius:var(--radio);
  background:var(--superficie); overflow:hidden; position:relative;
}
.adj-tj:hover{ border-color:var(--borde-fuerte); box-shadow:var(--sombra); }

/* La miniatura. Es un <button> cuando abre el visor y un <a> cuando se
   descarga: se ven igual, lo que cambia es qué pasa al apretarla. */
.adj-tj__foto{
  display:grid; place-items:center;
  width:100%; aspect-ratio:4 / 3; padding:0;
  border:none; border-bottom:1px solid var(--borde);
  background:var(--gris-100); cursor:pointer; overflow:hidden;
}
.adj-tj__foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.adj-tj__foto:hover img{ opacity:.9; }

/* Lo que no es imagen: la extensión grande sobre el color de su familia.
   No hay forma de sacarle una miniatura a un PDF en este servidor —no hay
   Imagick ni Ghostscript— y un PDF se reconoce igual por su nombre. */
.adj-tj__ext{
  font-size:var(--t-18); font-weight:700; letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}
.adj-tj__foto--rojo{    background:var(--rojo-bg);    color:var(--rojo-fg); }
.adj-tj__foto--violeta{ background:var(--violeta-bg); color:var(--violeta-fg); }
.adj-tj__foto--calipso{ background:var(--calipso-bg); color:var(--calipso-fg); }
.adj-tj__foto--verde{   background:var(--verde-bg);   color:var(--verde-fg); }
.adj-tj__foto--azul{    background:var(--azul-bg);    color:var(--azul-fg); }
.adj-tj__foto--plomo{   background:var(--plomo-bg);   color:var(--plomo-fg); }

.adj-tj__pie{ padding:7px var(--e-2) 8px; min-width:0; }
/* El nombre se corta en dos líneas: con `nowrap` y puntos suspensivos, treinta
   archivos con nombres parecidos se ven todos iguales. */
.adj-tj__pie b{
  display:block; font-size:var(--t-12); font-weight:500; line-height:1.3;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.adj-tj__pie span{ display:block; font-size:var(--t-11); color:var(--texto-suave); line-height:1.35; margin-top:2px; }

/* Las acciones aparecen encima de la miniatura al pasar por arriba, para no
   gastar alto en cada tarjeta. */
.adj-tj__acc{
  position:absolute; top:5px; right:5px;
  display:flex; gap:4px; opacity:0; transition:opacity .12s;
}
.adj-tj:hover .adj-tj__acc{ opacity:1; }
.adj-tj__acc .btn{ background:rgba(255,255,255,.94); }
@media (hover:none){ .adj-tj__acc{ opacity:1; } }

/* --- OBSERVACIONES EN MODAL ----------------------------------------------
   Una observación puede ser un párrafo o treinta líneas de lo que dijo la
   compañía. Un campo de 300px dentro de un formulario con otros ocho campos
   no deja leer lo que se está escribiendo; acá se abre casi a pantalla
   completa, con sólo ese texto delante.
   -------------------------------------------------------------------------- */
.obs-texto{ white-space:pre-wrap; line-height:1.55; }

.obs-modal{
  width:min(900px, 94vw); height:88vh; max-width:none; max-height:none;
  padding:0; border:none; border-radius:var(--radio-lg);
  background:var(--superficie); color:var(--texto);
  box-shadow:0 24px 70px rgba(10,43,80,.45);
}
.obs-modal::backdrop{ background:rgba(10,26,40,.62); }
.obs-modal form{ display:flex; flex-direction:column; height:100%; }

.obs-modal__cab{
  display:flex; align-items:center; gap:var(--e-3);
  padding:var(--e-3) var(--e-5); border-bottom:1px solid var(--borde);
  background:var(--gris-50);
}
.obs-modal__cab b{ display:block; font-size:var(--t-14); }
.obs-modal__cab span{ font-size:var(--t-11); }
.obs-modal__cab .btn{ margin-left:auto; }

/* El cuerpo se estira y el textarea con él: el texto ocupa todo lo que haya,
   que es el punto de abrirlo en modal. */
.obs-modal__cuerpo{ flex:1; min-height:0; display:flex; flex-direction:column; padding:var(--e-4) var(--e-5); }
.obs-modal__area{
  flex:1; min-height:0; resize:none;
  font-size:var(--t-14); line-height:1.6; padding:var(--e-3);
}

.obs-modal__pie{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e-3);
  padding:var(--e-3) var(--e-5); border-top:1px solid var(--borde);
  background:var(--gris-50); font-size:var(--t-11);
}

@media (max-width:760px){
  .obs-modal{ width:100vw; height:100vh; border-radius:0; }
  .obs-modal__cuerpo{ padding:var(--e-3) var(--e-4); }
}

/* --- AVISOS FLOTANTES -----------------------------------------------------
   El mensaje de «guardado» entra por la esquina, no empuja el contenido y se
   va solo. Antes se imprimía arriba de la página y se quedaba ahí hasta la
   siguiente navegación.

   Abajo a la derecha: arriba compite con la cabecera y con el título, que es
   donde está mirando quien acaba de apretar Guardar.
   -------------------------------------------------------------------------- */
/* Arriba a la derecha, justo debajo de la cabecera. Abajo pasaba desapercibido:
   cae sobre la bitácora, que es contenido, y el ojo no va para allá después de
   apretar Guardar.

   El 76px es un respaldo para cuando no corre JavaScript; js/v2.js mide la
   cabecera de verdad y ajusta `--aviso-arriba`, porque su alto cambia con la
   cinta de «estás actuando como» y al angostarse la pantalla. */
.avisos{
  position:fixed; right:var(--e-5); top:var(--aviso-arriba, 76px); z-index:60;
  display:flex; flex-direction:column; gap:var(--e-2);
  width:min(420px, calc(100vw - var(--e-6)));
  /* El contenedor no recibe clics: sólo los avisos de adentro. Si no, una
     franja invisible de 420px taparía lo que haya debajo. */
  pointer-events:none;
}
.aviso--flota{
  pointer-events:auto; margin:0;
  align-items:flex-start;
  box-shadow:var(--sombra-alta);
  animation:aviso-entra .22s ease-out;
}
.aviso__texto{ min-width:0; flex:1; }
.aviso__cerrar{
  flex:0 0 auto; width:22px; height:22px; margin:-2px -4px 0 0;
  border:none; background:none; cursor:pointer; border-radius:var(--radio);
  color:inherit; opacity:.5; font-size:17px; line-height:1;
}
.aviso__cerrar:hover{ opacity:1; background:rgba(0,0,0,.07); }

@keyframes aviso-entra{
  from{ opacity:0; transform:translateY(-14px); }
  to  { opacity:1; transform:none; }
}
/* Al irse se desvanece hacia arriba, de donde vino. */
.aviso--yendose{
  opacity:0; transform:translateY(-14px);
  transition:opacity .25s ease-in, transform .25s ease-in;
}

/* Quien pidió menos movimiento no recibe animación: el aviso aparece y
   desaparece, nada más. */
@media (prefers-reduced-motion:reduce){
  .aviso--flota{ animation:none; }
  .aviso--yendose{ transition:none; }
}

@media (max-width:560px){
  .avisos{ right:var(--e-3); left:var(--e-3); width:auto; }
}

/* --- SELECTOR CON BUSCADOR (un valor) ------------------------------------
   `.elegir` envuelve un <select> normal y le pone un campo de búsqueda
   encima. El <select> sigue ahí, escondido, y es el que viaja al grabar: sin
   JavaScript queda el desplegable de siempre.
   -------------------------------------------------------------------------- */
.elegir{ position:relative; }
.elegir .buscador-resultados{
  position:absolute; left:0; right:0; z-index:8; margin-top:3px;
  max-height:320px;
}
/* La opción que está elegida ahora, para reconocerla al abrir la lista. */
.buscador-item--elegida{ font-weight:600; background:var(--azul-50); }
.buscador-item--elegida::after{ content:" ✓"; color:var(--verde-fg); }

/* --- EL AVISO FLOTANTE, EN COLOR SÓLIDO ----------------------------------
   Los avisos de la página van en tono pálido: son notas al lado de un dato y
   no deben gritar. El flotante es lo contrario — aparece por cinco segundos y
   si no se nota, no sirvió. Freddy lo dijo derecho: «apenas lo noté».

   Así que acá el color va sólido y el texto blanco. De paso queda la
   distinción: pálido = algo que acompaña al contenido, sólido = algo que acaba
   de pasar.
   -------------------------------------------------------------------------- */
.aviso--flota{
  border:none; color:#fff;
  padding:var(--e-3) var(--e-4);
  border-radius:10px;
  box-shadow:0 10px 28px rgba(10,26,40,.28), 0 2px 6px rgba(10,26,40,.18);
}
.aviso--flota.aviso--ok{      background:var(--verde-solido); }
.aviso--flota.aviso--error{   background:var(--rojo-solido); }
.aviso--flota.aviso--alerta{  background:var(--naranjo-solido); }
.aviso--flota.aviso--info{    background:var(--azul-solido); }

/* El ícono en un círculo propio: a color sólido, una marca suelta se pierde
   dentro del bloque. */
.aviso--flota .aviso__ico{
  display:grid; place-items:center; flex:0 0 22px;
  width:22px; height:22px; border-radius:50%;
  background:rgba(255,255,255,.22); font-size:var(--t-13); font-weight:700;
}
.aviso--flota strong{ font-size:var(--t-14); }
/* El texto de detalle, un poco más apagado pero legible sobre el color. */
.aviso--flota .aviso__texto{ line-height:1.4; }
.aviso--flota .aviso__texto strong + *,
.aviso--flota .aviso__texto{ color:rgba(255,255,255,.93); }

.aviso--flota .aviso__cerrar{ color:#fff; opacity:.75; }
.aviso--flota .aviso__cerrar:hover{ opacity:1; background:rgba(255,255,255,.2); }

/* Las dos formas de editar, al pie de la tarjeta de acciones. Uno por línea y
   a todo el ancho, como las demás opciones de esa columna. */
.acc-editar{
  display:grid; gap:6px; margin-top:var(--e-3);
  padding-top:var(--e-3); border-top:1px solid var(--borde);
}

/* --- ALTERNATIVAS COTIZADAS ----------------------------------------------
   La tabla de comparación: una fila por oferta de compañía, una columna por
   deducible. Es lo que se cotiza, así que va a lo ancho de la página.
   -------------------------------------------------------------------------- */
/* Filas apretadas: la tabla puede tener catorce. Una sola línea por fila —el
   logo hace de nombre de la compañía— y el alto lo manda el logo, 20px, con
   3px de aire arriba y abajo: la fila queda en 26. */
.alt-tabla tbody td{ height:auto; padding:3px var(--e-3); line-height:1.25; }
.alt-tabla thead th{ height:26px; padding:0 var(--e-3); }
.alt-tabla .secundario{ line-height:1.25; }

/* La celda de la compañía: logo, plan y observación en una línea. El `min-width:0`
   es lo que permite que la observación se recorte en vez de empujar la tabla. */
.alt-cia{ display:flex; align-items:center; gap:var(--e-2); min-width:0; }
.alt-cia .principal-celda{ white-space:nowrap; }

/* El bloque del logo. Ancho fijo aunque no haya logo: si cada fila lo trae de
   un ancho distinto, los nombres de los planes quedan bailando. */
.cia-logo{
  flex:0 0 84px; width:84px; height:20px;
  display:inline-flex; align-items:center; justify-content:flex-start;
}
.cia-logo img{ max-width:84px; max-height:20px; width:auto; height:auto; display:block; }
.cia-logo--texto{
  font-size:var(--t-11); font-weight:600; color:var(--gris-700);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Las cabeceras que ordenan. Se ven como texto de cabecera, no como enlaces
   azules: lo que ordena es toda la columna, y subrayarlas haría una fila de
   ocho enlaces compitiendo con los números. */
.alt-th{ color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:3px; }
.alt-th:hover{ color:var(--azul-700); text-decoration:none; }
.alt-flecha{ font-size:9px; opacity:.85; }

/* La observación, recortada a una línea: puede ser larga y la tabla no es el
   lugar para leerla completa — para eso está el title y el modal. */
.alt-obs{ flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
          white-space:nowrap; font-size:var(--t-11); color:var(--texto-suave); }
/* La prima más baja de su columna. Verde pálido y no un color fuerte: son
   varias celdas marcadas a la vez y en sólido la tabla se vuelve un semáforo. */
.alt-min{ background:var(--verde-bg); color:var(--verde-fg); font-weight:650; }

/* La sugerida al cliente, y la que el cliente eligió. La elegida gana sobre la
   sugerida cuando una fila es las dos cosas. */
.alt-sugerida > td{ background:var(--azul-50); }
.alt-elegida  > td{ background:var(--verde-bg); }
.alt-elegida .alt-min{ background:var(--verde-solido); color:#fff; }

.alt-marca{ font-size:var(--t-14); line-height:1; }
.alt-marca--sugerida{ color:var(--azul-600); }
.alt-marca--elegida{ color:var(--verde-fg); }

/* Las acciones, siempre a la vista. Estaban en opacity:0 hasta pasar el mouse
   por la fila, y un botón que hay que descubrir pasando el mouse, para quien
   no sabe que está ahí, no existe. Lo que se hace en cambio es bajarles el
   peso: contorno delgado y texto chico, para que no compitan con las primas,
   que son el dato por el que se viene a la tabla. */
.alt-acc{ display:flex; gap:4px; justify-content:flex-end; }
.alt-acc .btn{ height:24px; padding:0 8px; font-size:var(--t-11); }
.alt-acc .btn .ico{ width:12px; height:12px; }

.alt-pie{
  padding:var(--e-2) var(--e-4); border-top:1px solid var(--borde);
  background:var(--gris-25); font-size:var(--t-11); color:var(--texto-suave);
}

/* El modal de cargar una alternativa. Más angosto que el de observaciones: son
   tres campos y una rejilla de primas, no un texto largo. */
.alt-modal{
  width:min(680px, 94vw); max-width:none; max-height:92vh;
  padding:0; border:none; border-radius:var(--radio-lg);
  background:var(--superficie); color:var(--texto);
  box-shadow:0 24px 70px rgba(10,43,80,.45);
}
/* El buscador del select, dentro del modal: el cuerpo del modal recorta lo
   que se le sale, así que la lista se deja más baja que allá afuera. */
.alt-modal .elegir .buscador-resultados{ max-height:200px; }
.alt-modal::backdrop{ background:rgba(10,26,40,.62); }
.alt-modal form{ display:flex; flex-direction:column; max-height:92vh; }
.alt-modal__cab{
  display:flex; align-items:center; gap:var(--e-3);
  padding:var(--e-3) var(--e-5); border-bottom:1px solid var(--borde);
  background:var(--gris-50);
}
.alt-modal__cab b{ font-size:var(--t-14); }
.alt-modal__cab .btn{ margin-left:auto; }
.alt-modal__cuerpo{ padding:var(--e-4) var(--e-5); overflow-y:auto; }
.alt-modal__pie{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e-3);
  padding:var(--e-3) var(--e-5); border-top:1px solid var(--borde); background:var(--gris-50);
}

/* --- ENVIAR LAS COTIZACIONES ---------------------------------------------
   A la izquierda se escribe el correo y se elige a quién; a la derecha se
   elige qué se le manda. El correo terminado no está en la página: se mira en
   un visor que se abre con «ver cómo queda», y el botón de enviar vive ahí
   dentro. Así no se envía nada sin haberlo visto.
   -------------------------------------------------------------------------- */
.envio-cab{
  display:flex; align-items:center; gap:var(--e-4);
  margin-bottom:var(--e-4);
}
.envio-cab h2{ font-size:var(--t-18); }
.envio-ya{
  margin-left:auto; max-width:280px;
  padding:7px var(--e-3); border-radius:var(--radio);
  background:var(--naranjo-bg); color:var(--naranjo-fg);
  font-size:var(--t-11); line-height:1.35;
}

/* La columna derecha es ancha: cada alternativa lleva logo, dos controles, el
   plan y su prima más baja, y con 340px eso llegaba apretado. */
.envio-cols{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,460px);
  gap:var(--e-4); align-items:start;
}
.envio-lado{ display:flex; flex-direction:column; gap:var(--e-4); min-width:0; }
.envio-lado .tarjeta{ margin:0; }

/* Dos campos cortos en una línea: la plantilla y el asunto, el destinatario y
   la copia. Aprovechan el ancho sin alargar la pantalla. */
.envio-fila{
  display:grid; grid-template-columns:minmax(0,260px) minmax(0,1fr);
  gap:var(--e-3) var(--e-4); align-items:start; margin-bottom:var(--e-3);
}
.envio-fila:last-child{ margin-bottom:0; }

/* El texto del correo. Alto generoso: es el campo donde de verdad se trabaja
   en esta pantalla, y escribir un correo en cuatro líneas visibles es pelear
   con el scroll. */
/* El selector lleva `form.denso` porque esa regla pone `min-height:58px` a
   todos los textarea del formulario y le gana a una clase sola: el campo
   quedaba de dos líneas justo donde se escribe el correo. */
.envio-texto,
form.denso textarea.envio-texto{
  height:auto; min-height:300px; padding:var(--e-3);
  font-family:inherit; font-size:var(--t-13); line-height:1.6; resize:vertical;
}

/* Para quién, y qué se marca. Las tres listas de casillas usan la misma fila:
   control, algo que identifica, y el detalle abajo. */
.envio-para,
.envio-alt{
  display:flex; align-items:flex-start; gap:var(--e-3);
  padding:7px var(--e-2); border-radius:var(--radio); cursor:pointer;
  line-height:1.3;
}
.envio-para:hover,
.envio-alt:hover{ background:var(--gris-50); }
.envio-para input,
.envio-alt input{ margin-top:2px; flex:0 0 auto; }
.envio-alt{ gap:var(--e-2); }
.envio-alt .cia-logo{ margin-top:1px; }

/* Un destinatario sin correo válido no se puede elegir. Se muestra igual, con
   el motivo: esconderlo deja la pregunta «¿y por qué no puedo mandarle al
   cliente?» sin respuesta. */
.envio-para--no{ cursor:not-allowed; opacity:.75; }
.envio-malo{ font-size:var(--t-11); color:var(--rojo-fg); }

/* La leyenda de los dos controles de cada alternativa: uno incluye y el otro
   recomienda, y sin decirlo se parecen demasiado. Los dos rótulos van alineados
   sobre sus controles. */
.envio-leyenda{
  padding:5px var(--e-4); background:var(--gris-50);
  border-bottom:1px solid var(--borde);
  font-size:var(--t-11); color:var(--texto-suave); line-height:1.35;
}
.envio-leyenda b{ color:var(--gris-700); }

.envio-ext{
  flex:0 0 auto; min-width:42px; text-align:center;
  padding:2px 5px; border-radius:var(--radio);
  font-size:10px; font-weight:700; letter-spacing:.4px;
}
.envio-ext--rojo{    background:var(--rojo-bg);    color:var(--rojo-fg); }
.envio-ext--violeta{ background:var(--violeta-bg); color:var(--violeta-fg); }
.envio-ext--calipso{ background:var(--calipso-bg); color:var(--calipso-fg); }
.envio-ext--verde{   background:var(--verde-bg);   color:var(--verde-fg); }
.envio-ext--azul{    background:var(--azul-bg);    color:var(--azul-fg); }
.envio-ext--plomo{   background:var(--plomo-bg);   color:var(--plomo-fg); }

/* --- EL VISOR DEL CORREO -------------------------------------------------
   Grande a propósito: lo que se revisa acá es un correo entero con una tabla
   de primas, y en una ventanita hay que scrollear para leer lo que se va a
   mandar en nombre de la corredora.
   -------------------------------------------------------------------------- */
.envio-visor{
  width:min(860px, 96vw); max-width:none; max-height:94vh;
  padding:0; border:none; border-radius:var(--radio-lg);
  box-shadow:var(--sombra-alta); background:var(--superficie);
  overflow:hidden;
}
/* El flex va en [open] y NUNCA en la regla base: el navegador esconde un
   <dialog> cerrado con su propia `dialog:not([open]){display:none}`, y una
   regla del autor le gana siempre. Con `display:flex` suelto, el visor cerrado
   se dibujaba igual en el medio de la página. */
.envio-visor[open]{ display:flex; flex-direction:column; }
.envio-visor::backdrop{ background:rgba(10,26,40,.62); }
/* Sin JavaScript el <dialog> queda abierto en el flujo de la página: ahí no
   puede ser una ventana flotante ni más alto que su contenido. */
.envio-visor[open]{ margin:var(--e-4) auto; }
.envio-visor:not(:modal){ max-height:none; }

.envio-visor__cab{
  display:flex; align-items:center; gap:var(--e-3);
  padding:var(--e-3) var(--e-4); border-bottom:1px solid var(--borde);
  background:var(--gris-25); flex:0 0 auto;
}
.envio-visor__cab b{ font-size:var(--t-14); }
.envio-visor__cab .suave{ font-size:var(--t-11); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.envio-visor__cab .btn{ margin-left:auto; }

.envio-visor__cuerpo{ padding:0; overflow-y:auto; background:var(--superficie); }
.envio-visor__pie{
  display:flex; align-items:center; gap:var(--e-3);
  padding:var(--e-3) var(--e-4); border-top:1px solid var(--borde);
  background:var(--superficie); flex:0 0 auto;
}
.envio-visor__pie > .suave{ min-width:0; }
.envio-visor__pie > .fila-flex{ margin-left:auto; }

/* El sobre: lo que el correo no dice de sí mismo —el asunto y qué archivos
   van— porque eso lo ve el destinatario en su bandeja, no en el cuerpo. */
.envio-sobre{
  background:var(--superficie); border:1px solid var(--borde);
  border-radius:var(--radio); padding:var(--e-3) var(--e-4);
  margin-bottom:var(--e-3); font-size:var(--t-12); line-height:1.5;
}
.envio-sobre > div{ display:flex; gap:var(--e-3); align-items:baseline; flex-wrap:wrap; }
.envio-sobre > div + div{ margin-top:4px; }
.envio-sobre > div > span:first-child{
  flex:0 0 68px; color:var(--texto-suave); font-size:var(--t-11);
}

/* El correo trae su propio marco —el mismo que ve el destinatario— así que
   acá sólo hay que dejarlo caber. */
.envio-previa table{ max-width:100%; }
.envio-previa img{ max-width:100%; }

@media (max-width: 1100px){
  .envio-cols{ grid-template-columns:1fr; }
  .envio-fila{ grid-template-columns:1fr; }
}

/* La que ya salió al cliente. Pálida a propósito: es un dato de control, no
   el dato que se viene a buscar a la tabla. */
.alt-env{
  flex:0 0 auto; padding:1px 6px; border-radius:20px;
  background:var(--naranjo-bg); color:var(--naranjo-fg);
  font-size:10px; font-weight:600;
}

/* El folio a la izquierda. La versión de la ficha se pega al borde derecho de
   su hilera; acá abre la pantalla, así que no empuja ni lleva el filete del
   lado equivocado. */
.folio--izq{ margin-left:0; padding-left:0; border-left:none; text-align:left; }
.folio--izq .folio__num{ justify-content:flex-start; font-size:30px; }

/* --- LOS MODALES DE CIERRE -----------------------------------------------
   Ganada, perdida y anulada. Antes se desplegaban dentro de la columna del
   estado, que mide 340px, y el de «ganada» tiene que mostrar hasta catorce
   alternativas con su logo y sus primas para que uno elija una.

   OJO: ninguna de estas reglas puede traer `display`. El navegador esconde un
   <dialog> cerrado con su propia regla y cualquier regla nuestra le gana; con
   un `display:flex` suelto el formulario se dibuja siempre, en medio de la
   página. Pasó una vez, no tiene que volver a pasar.
   -------------------------------------------------------------------------- */
.cierre-modal{
  width:min(820px, 95vw); max-width:none; max-height:92vh;
  padding:0; border:none; border-radius:var(--radio-lg);
  background:var(--superficie); color:var(--texto);
  box-shadow:0 24px 70px rgba(10,43,80,.45);
  overflow:hidden;
}
.cierre-modal--corto{ width:min(560px, 95vw); }
.cierre-modal::backdrop{ background:rgba(10,26,40,.62); }
.cierre-modal form{ display:flex; flex-direction:column; max-height:92vh; }

.cierre-modal__cab{
  display:flex; align-items:center; gap:var(--e-3);
  padding:var(--e-3) var(--e-5); border-bottom:1px solid var(--borde);
  background:var(--gris-25); flex:0 0 auto;
}
.cierre-modal__cab b{ font-size:var(--t-14); }
.cierre-modal__cab .suave{
  font-size:var(--t-11); min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.cierre-modal__cab .btn{ margin-left:auto; }

.cierre-modal__cuerpo{ padding:var(--e-4) var(--e-5); overflow-y:auto; }
.cierre-modal__pie{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e-3);
  padding:var(--e-3) var(--e-5); border-top:1px solid var(--borde);
  background:var(--gris-50); flex:0 0 auto;
}

/* La lista de alternativas a la izquierda y los datos del cierre a la derecha:
   se elige mirando las primas, y la fecha y la observación son el trámite. */
.cierre-cols{ display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:var(--e-5); align-items:start; }
.cierre-datos{ border-left:1px solid var(--borde); padding-left:var(--e-4); }

.cierre-alts{
  max-height:340px; overflow-y:auto; margin-top:4px;
  border:1px solid var(--borde); border-radius:var(--radio);
  background:var(--superficie); padding:2px;
}
.cierre-alts .envio-alt{ padding:6px; }
/* Las primas de la fila, con su etiqueta: es el número con el que uno confirma
   que ésa fue la que compró. */
.cierre-primas{ display:flex; flex-wrap:wrap; gap:4px 7px; margin-top:2px; }

@media (max-width: 760px){
  .cierre-cols{ grid-template-columns:1fr; }
  .cierre-datos{ border-left:none; padding-left:0; border-top:1px solid var(--borde); padding-top:var(--e-3); }
}

/* Los campos de una alternativa, en dos filas: la compañía sola arriba, y
   abajo el plan con la moneda.

   La compañía se lleva una fila entera porque es el texto más largo del
   formulario —«SEGUROS GENERALES SURAMERICANA S.A.»— y porque su buscador
   despliega una lista: estrecho, no se lee ni lo que se escribe ni lo que se
   elige. La moneda son dos letras y le bastan 108px. */
.alt-campos{
  display:grid; gap:10px var(--e-4);
  grid-template-columns:minmax(0,1fr) 108px;
  align-items:start;
}
.alt-campos .campo{ margin-bottom:0; }
.alt-campos .campo--fila{ grid-column:1 / -1; }

/* El <select> de verdad detrás del buscador: invisible pero dibujado, para que
   la validación del navegador pueda enfocarlo y mostrar su mensaje sobre el
   campo que se ve. Con `hidden` no es enfocable y un `required` vacío deja el
   formulario sin enviar y sin aviso — el botón parece no hacer nada. */
.elegir__real{
  position:absolute; left:0; top:0; width:100%; height:32px;
  opacity:0; pointer-events:none; z-index:-1;
}

/* El rótulo de una sección dentro de una tabla de datos: «Solicitud», «Cierre».
   Sirve para tener dos bloques en un mismo recuadro sin partirlo en dos
   tarjetas — que es lo que hacía que la fila pasara de dos tarjetas a tres al
   cerrar la cotización y se reacomodara la pantalla entera. */
.tabla .tabla-seccion td{
  padding:5px var(--e-4); background:var(--gris-50);
  border-top:1px solid var(--borde); border-bottom:1px solid var(--borde);
  font-size:var(--t-11); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--texto-suave);
}
.tabla tbody tr.tabla-seccion:first-child td{ border-top:none; }
.tabla tbody tr.tabla-seccion:hover td{ background:var(--gris-50); }

/* El nombre del asegurado y el ramo, en una línea. En el listado de solicitudes
   hay once columnas: si el nombre se parte en tres renglones, en la pantalla
   entran ocho filas en vez de dieciséis. El nombre completo queda en el title
   del ramo y en la ficha. */
/* El tope va en píxeles y NO en 100%: dentro de una celda de tabla el 100%
   se mide contra la celda, y la celda crece con el contenido — así que el
   nombre en una línea ensanchaba la columna en vez de recortarse, y la tabla
   se salía del recuadro. */
.sol-nombre{
  display:block; max-width:250px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.sol-nombre--corto{ max-width:106px; }

/* En pantalla angosta la columna del estado va PRIMERO: ahí están las acciones,
   y al final de la página —después de la prima, el pedido y los adjuntos— no se
   encuentran. En el escritorio el orden no cambia: son dos columnas. */
@media (max-width: 1149px){
  .ficha-cols__lado{ order:-1; }
}
/* Salvo cuando la columna es sólo historia (la propuesta): ahí no hay
   acciones que encontrar, y en angosto lo primero es el documento. */
@media (max-width: 1149px){
  .ficha-cols__lado--historia{ order:0; }
}
.ficha-cols__principal > .totales{ margin-bottom:0; }

/* El campo «#» de la cabecera: saltar derecho a un folio. Va pegado a los
   botones de acción y es angosto a propósito — son cuatro o cinco dígitos. */
.ir-folio{ display:flex; align-items:center; gap:4px; }
.ir-folio__gato{
  font-size:var(--t-14); font-weight:700; color:var(--texto-suave);
  font-variant-numeric:tabular-nums;
}
.ir-folio .control{
  width:120px; height:30px; font-size:var(--t-13);
  font-variant-numeric:tabular-nums;
}
/* En propuestas el campo acepta dos números y el texto de ayuda lo dice,
   así que necesita unos pixeles más que el de cotizaciones. */
.ir-folio--ancho .control{ width:165px; }
@media (max-width:760px){ .ir-folio .control, .ir-folio--ancho .control{ width:92px; } }

/* Un adjunto cuyo archivo no está en la bodega. Se muestra —existió y alguien
   lo subió— pero apagado y sin enlaces: apretarlo sólo podría llevar a un visor
   en blanco, que parece un error del sistema y no un archivo perdido. */
.adj-tj--falta{ opacity:.55; }
.adj-tj--falta .adj-tj__falta{ color:var(--rojo-fg); }

/* --- TABLAS BÁSICAS -------------------------------------------------------
   El índice de las catorce listas cortas del sistema. En la v1 cada una tiene
   su pantalla en el menú y hay que recorrerlo para encontrar la que se quiere;
   acá están todas a la vista con su tamaño.
   -------------------------------------------------------------------------- */
.tb-grupo{
  font-size:var(--t-11); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--texto-suave);
  margin:var(--e-5) 0 var(--e-2);
}
.tb-grupo:first-of-type{ margin-top:var(--e-3); }

.tb-rejilla{
  display:grid; gap:var(--e-3);
  grid-template-columns:repeat(auto-fill, minmax(330px, 1fr));
}

.tb-tj{
  display:flex; align-items:center; gap:var(--e-3);
  padding:var(--e-3) var(--e-4);
  background:var(--superficie); border:1px solid var(--borde);
  border-radius:var(--radio-lg); color:var(--texto);
  text-decoration:none; transition:border-color .12s, box-shadow .12s;
}
.tb-tj:hover{
  border-color:var(--azul-300); box-shadow:var(--sombra);
  text-decoration:none; color:var(--texto);
}
.tb-tj__ico{
  flex:0 0 36px; height:36px; display:flex; align-items:center; justify-content:center;
  background:var(--azul-50); color:var(--azul-700); border-radius:var(--radio);
}
.tb-tj__cuerpo{ min-width:0; flex:1; display:flex; flex-direction:column; gap:1px; }
.tb-tj__cuerpo b{ font-size:var(--t-14); }
/* La bajada en dos líneas como máximo: dice de qué es la tabla, y si crece
   desparejo las tarjetas de la rejilla quedan de distinto alto. */
.tb-tj__de{
  font-size:var(--t-11); color:var(--texto-suave); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tb-tj__num{ flex:0 0 auto; text-align:right; display:flex; flex-direction:column; }
.tb-tj__num b{
  font-size:var(--t-18); font-variant-numeric:tabular-nums; color:var(--azul-900);
  line-height:1.1;
}
.tb-tj__num .suave{ font-size:10px; white-space:nowrap; }

/* Las filas desactivadas NO se apagan. La v1 dejó inactivos 101 de los 103
   ramos, así que apagarlas atenúa la tabla entera y resalta justo las dos
   excepciones. La pastilla Sí/No ya lo dice. */
/* Los textos largos de las tablas —el asunto de una plantilla, el nombre de una
   cobertura— recortados a una línea, con el completo en el title. */
.tb-texto{
  display:block; max-width:420px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}

/* --- VALOR UF ------------------------------------------------------------
   Dos tarjetas arriba —el valor de hoy y el campo para escribirlo a mano— y la
   lista abajo. El valor va grande porque la pregunta que trae a esta pantalla
   es «¿está el de hoy?», y eso se contesta de un vistazo o no se contesta. */
.uf-cols{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,340px);
  gap:var(--e-4); align-items:start;
}
.uf-cols .tarjeta{ margin:0 0 var(--e-4); }

.uf-grande{ display:flex; flex-direction:column; gap:2px; }
.uf-grande b{
  font-size:34px; line-height:1.05; font-weight:650;
  font-variant-numeric:tabular-nums; color:var(--azul-900);
}
.uf-grande span{ font-size:var(--t-12); color:var(--texto-suave); }
/* Un valor viejo no se esconde: se muestra en plomo para que la cifra siga
   ahí pero deje de parecer la de hoy. */
.uf-grande--viejo b{ color:var(--texto-suave); }

/* Un salto de más de cien pesos entre dos días seguidos no es la UF subiendo:
   es un valor mal escrito. Se pinta para que salte a la vista en la lista. */
.uf-salto{ color:var(--rojo-700); font-weight:600; }

@media (max-width: 900px){
  .uf-cols{ grid-template-columns:1fr; }
}

/* --- PLANES Y COBERTURAS --------------------------------------------------
   El formulario a la izquierda y el cuadro como lo ve el cliente a la derecha:
   es la única forma de saber si lo que se escribió se entiende. */
.plan-cols{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,400px);
  gap:var(--e-4); align-items:start;
}
.plan-cols .tarjeta{ margin:0 0 var(--e-4); }
.plan-previa{ display:flex; flex-direction:column; min-width:0; position:sticky; top:var(--e-4); }

/* Una fila por concepto: el rótulo arriba y el campo abajo, en dos columnas
   cuando hay ancho. Diez conceptos en una sola columna obligan a bajar la
   pantalla entera para cargar un plan. */
.plan-filas{
  display:grid; gap:10px var(--e-4);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.plan-fila{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.plan-fila label{ display:flex; flex-direction:column; gap:1px; }
.plan-fila label b{ font-size:var(--t-12); font-weight:600; }
.plan-fila label .suave{
  font-size:var(--t-11); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

@media (max-width: 1100px){
  .plan-cols{ grid-template-columns:1fr; }
  .plan-previa{ position:static; }
}

/* Un campo que todavía hay que contestar y que bloquea el envío. No es un
   error —nadie se equivocó— así que no va en rojo: va con el borde marcado,
   para que al volver del aviso se encuentre de una mirada. */
.control--pide{
  border-color:var(--amarillo-solido);
  box-shadow:0 0 0 3px rgba(226,176,7,.18);
}

/* La pastilla «recomendada» en la lista de alternativas del envío: la elección
   se hace en el formulario de la izquierda y se confirma acá. */
.alt-env--reco{ background:var(--verde-bg); color:var(--verde-fg); }

/* Una línea de la bitácora (pestaña Evolución). Sin adornos: lo que importa
   es el rótulo y el detalle, y que se distingan dos movimientos seguidos. */
.pta-bit{ padding:var(--e-2) 0; border-bottom:1px solid var(--borde); }
.pta-bit:last-child{ border-bottom:0; padding-bottom:0; }
.pta-bit b{ font-size:var(--t-12); }
.pta-bit .suave{ font-size:var(--t-11); }

/* Tarjetas de totales más bajas, para fichas donde son un resumen y lo que
   importa está en las pestañas de abajo. */
.totales--compactas{ gap:var(--e-3); margin-bottom:var(--e-4); }
.totales--compactas .total{ padding:var(--e-2) var(--e-4); cursor:default; }
.totales--compactas .total:hover{ transform:none; box-shadow:var(--sombra); }
.totales--compactas .total__dato{ font-size:var(--t-18) !important; margin:0; }
.totales--compactas .total__detalle{ font-size:var(--t-11); }

/* --- BARRA DE AVANCE (estado del sistema) --------------------------------
   Con el número al lado: una barra sola obliga a medirla a ojo, y entre 70 y
   85 la diferencia importa. Mismo color en todas — pintar de rojo lo que va
   poco diría que está mal, y un módulo que no empieza no está mal. */
.est-avance{ display:inline-flex; align-items:center; gap:7px; margin-top:6px; }
.est-avance__barra{
  display:block; width:84px; height:6px; border-radius:3px;
  background:var(--gris-200); overflow:hidden; flex:0 0 auto;
}
.est-avance__barra i{ display:block; height:100%; background:var(--verde-solido); }
.est-avance b{ font-size:var(--t-11); color:var(--texto-suave); font-variant-numeric:tabular-nums; }


/* --- ALTA DE VEHÍCULO ----------------------------------------------------
   Era un bloque plegado dentro del formulario y ahora es un modal: son nueve
   campos, y plegados empujaban las coberturas tan abajo que había que
   scrollear para volver a lo que se estaba haciendo.

   El modal vive DENTRO del formulario del ítem, así que sus campos viajan con
   él y el vehículo se crea en la misma transacción. Lo que hace falta acá es
   que con el modal cerrado se vea que quedó algo adentro.
   -------------------------------------------------------------------------- */
.veh-resumen{
  display:flex; align-items:center; gap:var(--e-2); flex-wrap:wrap;
  margin-top:var(--e-2); padding:6px var(--e-3);
  border:1px dashed var(--verde-solido); border-radius:var(--radio);
  background:var(--verde-bg); color:var(--verde-fg);
  font-size:var(--t-12);
}
.veh-resumen > span{ display:flex; align-items:center; gap:5px; min-width:0; }
.veh-resumen i{ font-style:normal; font-weight:600; }
.veh-resumen .btn{ margin-left:auto; }
.veh-resumen .btn + .btn{ margin-left:0; }

/* --- PERMISOS ------------------------------------------------------------
   Las capacidades en columnas por grupo: son veintiuna y en una sola lista
   obligan a bajar la pantalla por cada perfil. */
.perm-grupos{
  display:grid; gap:var(--e-4);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  align-items:start;
}
.perm-grupo h4{
  font-size:var(--t-11); text-transform:uppercase; letter-spacing:.06em;
  color:var(--texto-suave); margin:0 0 4px;
}
.perm-grupo .envio-alt{ padding:4px 0; }
.perm-grupo code{ font-size:10px; }

/* --- PERFILES EN TARJETAS ------------------------------------------------
   Antes los seis perfiles y sus 21 casillas cada uno vivían en la misma
   página: 126 casillas para contestar «¿qué puede cobranza?». Acá la pantalla
   contesta eso de un vistazo y editar es entrar a una página con un perfil
   adelante. */
.perfil-rejilla{
  display:grid; gap:var(--e-4);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  align-items:start; margin-bottom:var(--e-6);
}
.perfil-tj{
  background:var(--superficie); border:1px solid var(--borde);
  border-radius:var(--radio-lg); padding:var(--e-4);
  display:flex; flex-direction:column; gap:2px;
}
/* El que puede todo se distingue sin gritar: un borde, no un color de fondo. */
.perfil-tj--todo{ border-color:var(--verde-solido); }

.perfil-tj__cab{ display:flex; align-items:center; gap:var(--e-3); margin-bottom:var(--e-2); }
.perfil-tj__cab > div{ flex:1; display:flex; flex-direction:column; }
.perfil-tj__cab b{ font-size:var(--t-14); }
.perfil-tj__cab .suave{ font-size:var(--t-11); }
.perfil-tj__ico{
  display:grid; place-items:center; width:34px; height:34px; flex:0 0 auto;
  border-radius:var(--radio); background:var(--azul-50); color:var(--azul-800);
}
.perfil-tj__num{ font-size:var(--t-12); font-variant-numeric:tabular-nums; }

/* Hasta dónde llega el perfil, en pastillas: es lo que se quiere saber
   mirando, no cuáles de las veintiuna capacidades. */
.perfil-tj__mods{ display:flex; flex-wrap:wrap; gap:4px; margin-bottom:var(--e-3); }

.perfil-tj__gente{
  display:flex; align-items:center; gap:4px; flex-wrap:nowrap;
  padding-top:var(--e-2); border-top:1px solid var(--borde); min-height:34px;
}
.perfil-tj__nombres{
  font-size:var(--t-11); margin-left:4px; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.perfil-tj__pie{ display:flex; justify-content:flex-end; margin-top:var(--e-3); }

/* Las capacidades de un grupo, en columnas: así un grupo de cinco no deja
   media pantalla en blanco al lado. */
.perm-caps{
  display:grid; gap:2px var(--e-4);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.perm-caps code{ font-size:10px; }

/* --- PESTAÑAS DE PERMISOS -----------------------------------------------
   Las mismas pestañas de la ficha de propuesta, pero del navegador: el
   formulario es uno solo y se graba de una vez. Por eso son <a> con
   preventDefault y no enlaces de verdad. */
.perm-tabs{ margin-bottom:0; }
.perm-tabs a{ cursor:pointer; }
.perm-panel{
  margin-top:0; border-top-left-radius:0; border-top-right-radius:0;
}

/* --- RENOVACIONES --------------------------------------------------------
   La barra de arriba: el período y los filtros en una línea. El período va
   primero porque sin él la pantalla no significa nada. */
.ren-barra{
  display:flex; gap:var(--e-3); align-items:flex-end; flex-wrap:wrap;
}

/* Los tres atajos a lo que está incompleto, con la vista mío/todas al otro
   extremo. Son filtros, no estados: «sin prima» en el sistema anterior es un
   estado que se escribe al dibujar el listado. */
.ren-atajos{
  display:flex; gap:var(--e-2); align-items:center; flex-wrap:wrap;
  margin:var(--e-3) 0 var(--e-4);
}

/* Título chico dentro de una tarjeta, para separar dos listas que conviven. */
.perm-grupo-titulo{
  font-size:var(--t-11); text-transform:uppercase; letter-spacing:.06em;
  color:var(--texto-suave); margin:0 0 var(--e-2);
}

/* --- COBRANZAS ------------------------------------------------------------
   La barra de lo marcado y las cuotas que cubre un pago.
   -------------------------------------------------------------------------- */

/* Aparece sola al marcar la primera cuota y se queda pegada abajo: con
   cincuenta filas el botón de arriba queda fuera de la pantalla justo cuando
   se necesita. */
.cob-barra{
  position:sticky; bottom:var(--e-4); z-index:30;
  display:flex; align-items:center; gap:var(--e-4);
  margin:var(--e-4) 0 0;
  padding:var(--e-3) var(--e-4);
  background:var(--superficie); border:1px solid var(--azul-300);
  border-radius:var(--radio-lg);
  box-shadow:0 10px 30px rgba(10,43,80,.18);
}
/* El `display:flex` de arriba le gana al atributo `hidden`, así que la
   barra se dibujaba vacía con cero cuotas marcadas. Hay que devolvérselo. */
.cob-barra[hidden]{ display:none; }
.cob-barra__texto{ display:flex; flex-direction:column; min-width:0; }
.cob-barra__texto strong{ font-size:var(--t-13); }
.cob-barra__texto .suave{ font-size:var(--t-11); }
.cob-barra__plata{
  margin-left:auto; font-variant-numeric:tabular-nums;
  font-size:var(--t-16); font-weight:700; white-space:nowrap;
}
/* Monedas mezcladas: un comprobante es de una sola moneda. Se avisa antes de
   apretar, no después. */
.cob-barra__plata--mal{ color:var(--rojo-fg); font-size:var(--t-12); font-weight:600; }

/* Las cuotas de un pago, en una fila de la misma tabla que empieza oculta. */
.pago-cuotas > td{ background:var(--gris-25); }
.pago-cuotas__caja{ padding:var(--e-2) 0; }
.pago-cuota{
  display:flex; align-items:baseline; gap:var(--e-3); flex-wrap:wrap;
  font-size:var(--t-12); padding:3px 0;
}
.pago-cuota + .pago-cuota{ border-top:1px dashed var(--borde); }
.pago-cuota b{ margin-left:auto; font-variant-numeric:tabular-nums; }

/* Lo anulado se ve, pero apagado: es un dato de control. */
.fila--apagada > td{ opacity:.55; }

/* El <dialog> que no envía su propio formulario —los datos viajan en el de la
   tabla— necesita el mismo armazón que `.cierre-modal form`. Y OJO: ninguna de
   estas dos reglas puede ir en la regla base del dialog. */
.cierre-modal__caja{ display:flex; flex-direction:column; max-height:92vh; }

/* --- PLAN DE PAGO (pestaña de la propuesta) -------------------------------
   Neutro a propósito: una barra de avance y cuatro datos, en vez de cuatro
   tarjetas con línea de color. El único color es el rojo de lo vencido, para
   que cuando aparezca se vea. */
.cuo-resumen{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-4) var(--e-6);
  padding:var(--e-4) var(--e-5); margin-bottom:var(--e-4);
  border:1px solid var(--borde); border-radius:var(--radio-lg); background:var(--gris-25);
}
.cuo-resumen__avance{ flex:1 1 280px; min-width:0; }
.cuo-resumen__cifras{ display:flex; justify-content:space-between; gap:var(--e-3);
  flex-wrap:wrap; font-size:var(--t-13); margin-bottom:6px; font-variant-numeric:tabular-nums; }
.cuo-resumen__cifras b{ font-size:var(--t-16); }
.cuo-barra{ height:8px; border-radius:4px; background:var(--gris-200); overflow:hidden; }
.cuo-barra i{ display:block; height:100%; background:var(--azul-solido); border-radius:4px; }

.cuo-datos{ display:flex; flex-wrap:wrap; gap:var(--e-3) var(--e-6); margin:0; }
.cuo-datos dt{ font-size:var(--t-11); text-transform:uppercase; letter-spacing:.06em;
  color:var(--texto-suave); font-weight:600; }
.cuo-datos dd{ margin:2px 0 0; font-size:var(--t-14); font-weight:500; font-variant-numeric:tabular-nums; }
.cuo-datos dd span{ font-weight:400; font-size:var(--t-12); }

.cuo-vencido{ color:var(--rojo-fg) !important; font-weight:600; }
.cuo-estado{ display:inline-flex; align-items:center; gap:5px; font-size:var(--t-12); }
.cuo-estado--pendiente{ color:var(--texto); }
.cuo-estado .punto{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 6px; }
.cuo-tabla .cuo-fila--hecha td{ color:var(--texto-suave); }
.cuo-tabla .cuo-fila--hecha b{ font-weight:500; }
.cuo-tabla .cuo-fila--anulada td{ text-decoration:line-through; text-decoration-color:var(--gris-300); }

/* Las cuatro cifras de la ficha de la propuesta caben en una hilera dentro de
   su columna de 697px: con el mínimo general de 190px entran tres y la cuarta
   baja sola, dejando un hueco que se lee como si faltara algo. */
.ficha-cols__principal > .totales{ grid-template-columns:repeat(auto-fit,minmax(152px,1fr)); }

/* Las cuatro cifras van en flex, no en grid de columnas iguales: la tarjeta de
   Vigencia necesita más ancho que las otras tres para que su rango de fechas
   («03/10/2026 → 03/10/2027») quepa en una sola línea. En pantallas más chicas
   prefiere bajar a una fila nueva —donde tiene todo el ancho— antes que partir
   la fecha en dos. Las demás fichas que usan estas tarjetas no llevan la clase
   `total--vigencia`, así que ahí se reparten parejo como antes. */
.ficha-cols__principal > .totales--compactas{ display:flex; flex-wrap:wrap; }
.ficha-cols__principal > .totales--compactas > .total{ flex:1 1 120px; }
.ficha-cols__principal > .totales--compactas > .total--vigencia{ flex:1.5 1 230px; }
.total--vigencia .total__dato{ white-space:nowrap; }

/* Los ramos de la cotización se pintan con la pastilla de estado, que lleva
   `white-space:nowrap` —correcto para «Pendiente», no para «TODO RIESGO
   CONSTRUCCION Y MONTAJE», que en la columna angosta de la ficha se cortaba
   contra el borde de la tarjeta. */
.estado--ramo{ white-space:normal; }

/* El filtro de la línea de tiempo: con la bitácora completa —creación,
   ediciones, ítems, adjuntos, pagos— una propuesta trabajada tiene cuarenta
   líneas, y a veces se viene a buscar sólo por dónde va. */
.bita__filtro{
  display:flex; gap:var(--e-2); padding:var(--e-3) var(--e-4) 0;
}
.bita--flujo .bita__it:not([data-grupo="flujo"]){ display:none; }
/* El icono de la acción, pegado a su rótulo. */
.bita__cab b{ display:inline-flex; align-items:center; gap:5px; }
.bita__cab b .ico{ opacity:.65; flex:0 0 auto; }

/* --- LA PREGUNTA ----------------------------------------------------------
   Reemplaza al confirm() y al alert() del navegador. OJO: la regla base no
   puede traer `display` —el navegador esconde un <dialog> cerrado con su
   propia regla y cualquier regla nuestra le gana—; el flex va en [open].
   -------------------------------------------------------------------------- */
.pregunta{
  width:min(440px, 92vw); max-width:none;
  padding:0; border:none; border-radius:var(--radio-lg);
  background:var(--superficie); color:var(--texto);
  box-shadow:0 24px 70px rgba(10,43,80,.45);
  overflow:hidden;
}
.pregunta::backdrop{ background:rgba(10,26,40,.55); }
.pregunta[open]{ margin:auto; }

.pregunta__cuerpo{ padding:var(--e-5) var(--e-5) var(--e-4); }
.pregunta__titulo{ display:block; font-size:var(--t-15); margin-bottom:6px; }
.pregunta__texto{
  margin:0; font-size:var(--t-13); line-height:1.55; color:var(--texto-suave);
  /* El texto llega con saltos de línea de verdad, no con <br>: así nadie
     tiene que escapar HTML para hacer un párrafo. */
  white-space:pre-line;
}
.pregunta__pie{
  display:flex; justify-content:flex-end; gap:var(--e-2);
  padding:var(--e-3) var(--e-5); border-top:1px solid var(--borde);
  background:var(--gris-50);
}

/* La bitácora empieza cortada: se ven las primeras y el resto espera detrás
   de «ver más». Con cuarenta movimientos la columna era más alta que toda la
   ficha y había que scrollear para volver arriba. */
.bita:not(.bita--entera) .bita__it[data-resto]{ display:none; }
/* Con el filtro puesto, «ver más» ya no aplica: lo filtrado es poco. */
.bita--flujo .bita__it[data-resto]{ display:list-item; }
.bita--flujo .bita__it:not([data-grupo="flujo"]){ display:none; }

.bita__mas{
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:calc(100% - var(--e-4) * 2); margin:0 var(--e-4) var(--e-3);
  padding:7px 10px; cursor:pointer;
  background:var(--gris-50); border:1px solid var(--borde);
  border-radius:var(--radio); color:var(--texto-suave);
  font-size:var(--t-12); font-weight:600; font-family:inherit;
}
.bita__mas:hover{ background:var(--gris-100); color:var(--texto); }

/* Atajo al lado del rótulo de un campo: «+1 año» en la vigencia. Es una
   ayuda, no el camino, así que pesa menos que el rótulo.

   Va absoluto arriba a la derecha del campo y no dentro del rótulo: en una
   columna angosta «Término vigencia *» más la pastilla no caben en una
   línea, el rótulo se partía en dos y ese campo quedaba 19px más abajo que
   los de al lado. */
.campo{ position:relative; }
.campo__atajo{
  position:absolute; top:0; right:0;
  padding:1px 7px; cursor:pointer;
  background:var(--azul-50); border:1px solid var(--azul-300);
  border-radius:20px; color:var(--azul-fg);
  font:600 10px/1.6 inherit; text-transform:none; letter-spacing:0;
  vertical-align:middle;
}
.campo__atajo:hover{ background:var(--azul-300); color:#fff; }

/* --- EL MODAL DEL VEHÍCULO -----------------------------------------------
   Tres hileras agrupadas por lo que son —cuál es, cómo es, sus números— en
   vez de nueve campos en una rejilla pareja. Los selectores traen el texto
   largo (MERCEDES BENZ, CAMIONETA DOBLE CABINA, GRIS PERLA METALICO) y en
   columnas iguales quedaban del mismo ancho que el año, que son cuatro
   dígitos.
   -------------------------------------------------------------------------- */
.veh-grupo{
  font-size:var(--t-11); text-transform:uppercase; letter-spacing:.06em;
  color:var(--texto-suave); font-weight:600;
  margin:var(--e-4) 0 var(--e-2);
}
.veh-grupo:first-child{ margin-top:0; }
.veh-grupo .suave{ text-transform:none; letter-spacing:0; font-weight:400; }

.veh-fila{ display:grid; gap:var(--e-3) var(--e-4); align-items:start; }
.veh-fila .campo{ margin-bottom:0; min-width:0; }

/* Patente y año son cortos y de largo conocido; marca y modelo se llevan lo
   que sobra, que es lo que necesitan. */
.veh-fila--cual   { grid-template-columns:120px minmax(0,1fr) minmax(0,1fr) 90px; }
.veh-fila--como   { grid-template-columns:repeat(3, minmax(0,1fr)); }
.veh-fila--numeros{ grid-template-columns:repeat(2, minmax(0,1fr)); }

@media (max-width: 720px){
  .veh-fila--cual,
  .veh-fila--como,
  .veh-fila--numeros{ grid-template-columns:1fr; }
}

/* El modal del vehículo pide algo más de ancho que los demás: son nueve
   campos y cinco de ellos son selectores con texto largo. */
#vehNuevo{ width:min(900px, 95vw); }

/* --- LA BARRA LATERAL SE PLIEGA -------------------------------------------
   Plegada queda un riel de iconos de 56px, no desaparece: una barra que se
   esconde entera obliga a abrirla para cada salto de módulo, y lo que se
   gana de ancho se paga en clics. Con los iconos a la vista se sigue
   navegando de una.

   El estado vive en `<html>` y lo pone un script en el <head>, antes de
   pintar: aplicado después se vería la barra ancha y el salto al plegarse.
   -------------------------------------------------------------------------- */
:root{ --barra-riel:56px; }

.lateral-plegada .lateral{
  width:var(--barra-riel); flex-basis:var(--barra-riel);
}

/* Sólo el ancho se anima. Animar el contenido deja el texto bailando
   media pantalla, y quien plegó la barra ya sabe lo que va a pasar. */
.lateral{ transition:width .14s ease, flex-basis .14s ease; }
@media (prefers-reduced-motion:reduce){ .lateral{ transition:none; } }

/* El botón, montado sobre el borde derecho. */
.lateral__plegar{
  position:absolute; top:26px; right:-11px; z-index:5;
  width:22px; height:22px; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--azul-600);
  background:var(--azul-900); color:#cfdcec;
}
.lateral__plegar:hover{ background:var(--azul-600); color:#fff; }
.lateral__plegar:focus-visible{ outline:2px solid var(--azul-300); outline-offset:2px; }
.lateral-plegada .lateral__plegar .ico{ transform:rotate(180deg); }

/* Lo que se esconde al plegar: los títulos de grupo, el texto de cada enlace
   y el nombre de quien entró. El logo cambia por el icono (ver
   .lateral__logo). */
.lateral-plegada .lateral__grupo,
.lateral-plegada .lateral .item__txt,
.lateral-plegada .lateral__pie .quien{ display:none; }

/* Lo que queda se centra. */
.lateral-plegada .lateral__marca{ padding:var(--e-4) 0; justify-content:center; }
.lateral-plegada .lateral__nav{ padding:var(--e-3) 8px; }
.lateral-plegada .lateral a.item,
.lateral-plegada .lateral__salir{ justify-content:center; padding:9px 0; gap:0; }
.lateral-plegada .lateral__pie{ padding:var(--e-3) 0; justify-content:center; gap:var(--e-2); }

/* Un separador entre grupos, ya que los títulos no están: sin él los
   dieciocho iconos quedan en una sola tira y no se distingue dónde termina
   Seguros y empieza Configuración. */
.lateral-plegada .lateral__grupo + a.item{
  margin-top:var(--e-3);
  border-top:1px solid rgba(255,255,255,.1); padding-top:var(--e-3);
}

/* El nombre al pasar por encima sale en un globo propio (`.lateral-tip`), no
   en el `title` del navegador: el nativo tarda casi un segundo y se nota poco.
   El globo lo dibuja y lo ubica el JS (`iniciar()` en v2.js). Va montado en el
   <body> con position:fixed —fuera del aside— porque dentro de `.lateral__nav`
   el scroll lo recortaba contra el borde de los 56px. */
.lateral-tip{
  position:fixed; z-index:50; left:0; top:0;
  padding:5px 9px; border-radius:var(--radio);
  background:#0f1b2d; color:#fff; border:1px solid rgba(255,255,255,.12);
  font-size:var(--t-12); font-weight:500; white-space:nowrap;
  box-shadow:0 6px 18px rgba(8,15,30,.35);
  pointer-events:none;   /* nunca le roba el hover al icono de abajo */
  opacity:0; visibility:hidden;
  transform:translateY(-50%) translateX(-4px);
  transition:opacity .09s ease, transform .09s ease;
}
.lateral-tip--visible{
  opacity:1; visibility:visible;
  transform:translateY(-50%) translateX(0);
}
/* La flechita que apunta al icono. */
.lateral-tip::before{
  content:""; position:absolute; top:50%; left:-4px;
  width:8px; height:8px; background:inherit;
  border-left:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
  transform:translateY(-50%) rotate(45deg);
}
@media (prefers-reduced-motion:reduce){ .lateral-tip{ transition:none; } }

.lateral__salir{
  display:flex; align-items:center; gap:var(--e-2);
  color:#9bb4d0; font-size:var(--t-11); flex:0 0 auto;
}
.lateral__salir:hover{ color:#fff; text-decoration:none; }

/* Para los lectores de pantalla: el botón tiene que decir qué hace aunque en
   la pantalla sólo se vea una flecha. */
.vis-oculto{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* En angosto la barra ya es una tira horizontal: plegarla no significa nada
   y el botón estorba. */
@media (max-width:900px){
  .lateral__plegar{ display:none; }
  .lateral-plegada .lateral{ width:100%; flex-basis:auto; }
  .lateral-plegada .lateral__grupo{ display:none; }
  .lateral-plegada .lateral .item__txt,
  .lateral-plegada .lateral__pie .quien{ display:inline; }
  .lateral-plegada .lateral a.item{ justify-content:flex-start; padding:7px var(--e-3); gap:var(--e-3); }
  .lateral-plegada .lateral__marca{ padding:var(--e-4) var(--e-5); justify-content:flex-start; }
  .lateral-plegada .lateral__logo{ display:block; }
  .lateral-plegada .lateral__icono{ display:none; }
}

/* La ficha del vehículo dentro de un ítem. Nueve datos chicos: van en una
   tira que se acomoda sola, no en una tabla de nueve columnas. */
/* Cabeceras ordenables: clic en la columna ordena las filas, y una flechita
   marca por cuál columna y en qué sentido. Sólo responden los <th data-orden>. */
.tabla--ordenable th[data-orden]{ cursor:pointer; user-select:none; white-space:nowrap; }
.tabla--ordenable th[data-orden]:hover{ color:var(--texto); }
.tabla--ordenable th[data-dir]::after{
  content:"\25B2"; font-size:.72em; margin-left:5px; opacity:.75; vertical-align:middle;
}
.tabla--ordenable th[data-dir="desc"]::after{ content:"\25BC"; }

/* La cobertura recién agregada se resalta un momento, para ubicarla de un
   vistazo en una lista larga sin tener que buscarla. */
.cob-fila--nueva td{ animation:cob-nueva 1.6s ease; }
@keyframes cob-nueva{ from{ background:var(--azul-50); } to{ background:transparent; } }

.item-veh{
  display:inline-flex; align-items:center; gap:5px;
  font-size:var(--t-12); font-weight:600; color:var(--texto);
}
.item-veh .ico{ opacity:.55; }

.veh-ficha{
  display:flex; flex-wrap:wrap; gap:var(--e-2) var(--e-5);
  margin:0; padding:var(--e-3) var(--e-5);
  border-top:1px solid var(--borde); background:var(--gris-25);
}
.veh-ficha > div{ min-width:0; }
.veh-ficha dt{
  font-size:var(--t-11); color:var(--texto-suave);
  text-transform:uppercase; letter-spacing:.05em;
}
.veh-ficha dd{ margin:0; font-size:var(--t-12); font-weight:500; }

/* --- LA PESTAÑA ÍTEMS: PLEGAR, BUSCAR Y ORDENAR --------------------------
   Hay propuestas de 175 ítems con 5.779 coberturas. Abiertas de par en par
   son veinte pantallas de scroll y 2,6 MB de HTML: no es un listado, es un
   libro. Desde ocho ítems llegan plegados.
   -------------------------------------------------------------------------- */
.it-barra{
  display:flex; align-items:center; gap:var(--e-2); flex-wrap:wrap;
  margin-bottom:var(--e-4);
}
.it-barra__buscar{ position:relative; display:flex; align-items:center; }
.it-barra__buscar > .ico{
  position:absolute; left:9px; color:var(--texto-suave); pointer-events:none;
}
.it-barra__buscar .control{ width:270px; padding-left:30px; padding-right:28px; }
.it-barra__x{
  position:absolute; right:6px; display:flex; cursor:pointer;
  border:none; background:none; padding:3px; color:var(--texto-suave);
}
.it-barra__x:hover{ color:var(--texto); }
@media (max-width:760px){ .it-barra__buscar .control{ width:100%; } }

/* La cabecera de la tarjeta es el interruptor, así que tiene que verse
   apretable. Los botones de adentro paran el clic con stopPropagation. */
.it-tj__cab{ cursor:pointer; user-select:none; }
.it-tj__cab:hover{ background:var(--gris-50); }
.it-tj__flecha{
  display:flex; align-items:center; justify-content:center;
  width:18px; height:18px; flex:0 0 18px; padding:0;
  border:none; background:none; color:var(--texto-suave);
  transition:transform .12s ease;
}
.it-tj--compacta .it-tj__flecha{ transform:rotate(-90deg); }
@media (prefers-reduced-motion:reduce){ .it-tj__flecha{ transition:none; } }

/* Se pliega con una clase en la tarjeta y no con `hidden` en el cuerpo:
   mezclar las dos formas sobre lo mismo invierte el primer clic. */
.it-tj--compacta .it-tj__cuerpo{ display:none; }

/* Con la tarjeta plegada la descripción es lo único que queda para saber de
   cuál se trata, así que no puede desbordar la hilera. */
.it-tj__que{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.it-tj__cab .acciones{ margin-left:auto; flex:0 0 auto; }
/* El «Ítem N» no se parte en dos líneas: lo que cede es la descripción, que
   para eso lleva ellipsis. */
.it-tj__cab h3{ white-space:nowrap; flex:0 0 auto; }

/* --- BUSCAR DENTRO DE LA MINUTA ------------------------------------------
   Las minutas promedian 2.200 caracteres pero llegan a 34.500. En ésas,
   encontrar «deducible» a ojo es recorrer diez pantallas.
   -------------------------------------------------------------------------- */
/* El panel de la pestaña recorta lo que se sale, para que las esquinas
   redondeadas no muestren un hijo cuadrado en la punta. Pero un ancestro
   que recorta mata el `position:sticky` de cualquier descendiente, así
   que en la minuta se deja ver: sus hijos son hileras rectas del mismo
   color que el panel, no hay nada que recortar. */
.tabs-cuerpo .panel--minuta{ overflow:visible; }

/* La hilera del buscador se queda arriba mientras se baja por el texto:
   con 34.500 caracteres, al llegar a la coincidencia el campo y las
   flechas ya habían quedado diez pantallas atrás, y para ir a la
   siguiente había que subir a buscarlos. */
.min-cab{
  flex-wrap:wrap; gap:var(--e-2) var(--e-3);
  position:sticky; top:0; z-index:6;
  background:var(--superficie);
  border-bottom:1px solid var(--borde);
}
.min-buscar{
  display:flex; align-items:center; gap:4px; margin-left:auto; position:relative;
}
.min-buscar > .ico{ position:absolute; left:9px; color:var(--texto-suave); pointer-events:none; }
.min-buscar .control{ width:230px; height:30px; padding-left:30px; font-size:var(--t-13); }
@media (max-width:760px){
  .min-buscar{ margin-left:0; width:100%; }
  .min-buscar .control{ flex:1; width:auto; }
}

.min-cuenta{
  font-size:var(--t-11); color:var(--texto-suave); font-variant-numeric:tabular-nums;
  min-width:58px; text-align:right;
}
.min-cuenta--nada{ color:var(--rojo-fg); }

/* Todas las coincidencias marcadas, y la que se está mirando más fuerte: sin
   esa diferencia, apretar «siguiente» no se nota. */
.min-marca{ background:var(--amarillo-bg); color:inherit; border-radius:3px; padding:0 1px; }
.min-marca--esta{
  background:var(--amarillo-solido); color:#1b1400; font-weight:600;
  box-shadow:0 0 0 2px var(--amarillo-solido);
}

/* La lista con contexto. Es lo que evita el salto a ciegas: se lee la frase
   entera antes de decidir si es la que se buscaba. */
.min-hits{
  max-height:230px; overflow-y:auto;
  border-bottom:1px solid var(--borde); background:var(--gris-25);
}
.min-hit{
  display:flex; align-items:baseline; gap:var(--e-3); width:100%;
  padding:6px var(--e-5); cursor:pointer; text-align:left;
  background:none; border:none; border-bottom:1px solid var(--borde);
  font:inherit; font-size:var(--t-12); color:var(--texto-suave);
}
.min-hit:hover{ background:var(--gris-100); color:var(--texto); }
.min-hit--esta{ background:var(--azul-50); color:var(--texto); }
.min-hit__n{
  flex:0 0 22px; text-align:right; font-size:var(--t-11);
  color:var(--texto-suave); font-variant-numeric:tabular-nums;
}
.min-hit__txt{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.min-hit__txt b{ color:var(--texto); background:var(--amarillo-bg); }
.min-hit__mas{ padding:6px var(--e-5); font-size:var(--t-11); color:var(--texto-suave); }

.min-texto{
  padding:var(--e-5); font-size:var(--t-14); line-height:1.6; white-space:pre-wrap;
}
/* Por si el navegador decide llevar la coincidencia al borde en vez de al
   centro: que no quede debajo de la hilera del buscador. */
.min-marca{ scroll-margin-top:70px; scroll-margin-bottom:40px; }

/* ---------------------------------------------------------------------------
   Observaciones (etapa de desarrollo) — ver lib/observacion.php
   --------------------------------------------------------------------------- */

/* El botón flotante: abajo a la derecha en todas las pantallas. */
.obs-flota{
  position:fixed; right:18px; bottom:18px; z-index:60;
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px; border:none; border-radius:22px; cursor:pointer;
  background:var(--navy-marca); color:#fff; box-shadow:var(--sombra-alta);
  font:inherit; font-size:var(--t-13); font-weight:600;
  opacity:.88; transition:opacity .12s, transform .12s;
}
.obs-flota:hover{ opacity:1; transform:translateY(-1px); }
@media (max-width:640px){ .obs-flota span{ display:none; } .obs-flota{ padding:11px; } }
@media print{ .obs-flota{ display:none; } }

/* Encima del botón: las consultas de observaciones que esperan a quien mira. */
.obs-flota-consulta{
  position:fixed; right:18px; bottom:64px; z-index:60;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:16px;
  background:var(--violeta-solido, #7c3aed); color:#fff; box-shadow:var(--sombra-alta);
  font-size:var(--t-12); font-weight:600; text-decoration:none;
}
.obs-flota-consulta b{
  display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; background:#fff; color:var(--violeta-solido, #7c3aed); font-size:var(--t-11);
}
.obs-flota-consulta:hover{ filter:brightness(1.08); }
@media print{ .obs-flota-consulta{ display:none; } }

.obs-tipos{ display:flex; flex-wrap:wrap; gap:var(--e-2); align-items:center; }
.obs-tipo{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.obs-tipo input{ margin:0; }
.obs-tipo--urgente{ margin-left:auto; font-size:var(--t-13); color:var(--rojo-fg); font-weight:500; }

/* La zona para pegar o arrastrar pantallazos. */
.obs-zona{
  border:1.5px dashed var(--borde-fuerte); border-radius:var(--radio);
  padding:var(--e-3); background:var(--gris-25);
}
.obs-zona--sobre{ border-color:var(--azul-500); background:var(--azul-50); }
.obs-zona__txt{ display:flex; align-items:center; gap:7px; font-size:var(--t-12); color:var(--texto-suave); }
.obs-zona__minis{ display:flex; flex-wrap:wrap; gap:var(--e-2); }
.obs-zona__minis:not(:empty){ margin-top:var(--e-3); }
.obs-mini{
  position:relative; width:96px; height:72px; border-radius:var(--radio);
  border:1px solid var(--borde); background:#fff; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--t-11); text-align:center; padding:2px;
}
.obs-mini img{ width:100%; height:100%; object-fit:cover; }
.obs-mini__x{
  position:absolute; top:2px; right:2px; width:20px; height:20px; border-radius:50%;
  border:none; background:rgba(10,26,40,.7); color:#fff; cursor:pointer; line-height:1;
}

.obs-titulo{ margin:0; font-size:var(--t-22); font-weight:600; line-height:1.3; }
.obs-fila-pie{
  display:flex; align-items:center; gap:5px; margin-top:3px;
  font-size:var(--t-11); color:var(--texto-suave); font-weight:400;
}
.obs-fila-pie .tb-texto{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:520px; }

.obs-galeria{ display:flex; flex-wrap:wrap; gap:var(--e-3); }
.obs-foto{
  width:180px; height:120px; border-radius:var(--radio); overflow:hidden;
  border:1px solid var(--borde); background:var(--gris-50);
  display:flex; align-items:center; justify-content:center;
}
.obs-foto:hover{ border-color:var(--azul-400); }
.obs-foto img{ width:100%; height:100%; object-fit:cover; }
.obs-foto__doc{ display:flex; flex-direction:column; align-items:center; gap:4px; font-size:var(--t-12); color:var(--texto-suave); }

.obs-respuesta{ border-left:3px solid var(--azul-solido); }

/* Los tres pasos del flujo, para ver de un vistazo dónde va. */
.obs-pasos{
  list-style:none; margin:var(--e-3) 0 var(--e-4); padding:0;
  display:flex; gap:4px; font-size:var(--t-11);
}
.obs-pasos li{
  flex:1; text-align:center; padding:4px 2px; border-radius:var(--radio);
  background:var(--gris-100); color:var(--texto-suave);
}
.obs-pasos li.hecho{ background:var(--azul-100); color:var(--azul-800); }
.obs-pasos li.ahora{ background:var(--azul-solido); color:#fff; font-weight:600; }

/* ---------------------------------------------------------------------------
   Minutas con formato — ver lib/minuta.php
   --------------------------------------------------------------------------- */
.md-minuta{ font-size:var(--t-14); line-height:1.6; color:var(--texto); overflow-wrap:anywhere; }
.md-minuta > :first-child{ margin-top:0; }
.md-minuta > :last-child{ margin-bottom:0; }
.md-minuta p{ margin:0 0 var(--e-3); }
.md-minuta h3, .md-minuta h4, .md-minuta h5{ margin:var(--e-5) 0 var(--e-2); color:var(--azul-900); line-height:1.3; }
.md-minuta h3{ font-size:var(--t-18); }
.md-minuta h4{ font-size:var(--t-16); }
.md-minuta h5{ font-size:var(--t-14); }
.md-minuta .min-sub{
  margin:var(--e-4) 0 var(--e-2); font-weight:700; font-size:var(--t-13);
  color:var(--azul-800); letter-spacing:.01em;
}
.md-minuta ul, .md-minuta ol{ margin:0 0 var(--e-3); padding-left:22px; }
.md-minuta li{ margin:2px 0; }
.md-minuta ul + ul{ margin-top:calc(-1 * var(--e-2)); }
.md-minuta blockquote{
  margin:0 0 var(--e-3); padding:var(--e-2) var(--e-4);
  border-left:3px solid var(--amarillo-solido); background:var(--amarillo-bg); border-radius:0 var(--radio) var(--radio) 0;
}
.md-minuta hr{ border:none; border-top:1px solid var(--borde-fuerte); margin:var(--e-4) 0; }
.md-minuta mark{ background:#fff1a8; padding:0 2px; border-radius:2px; }
.md-minuta .tabla-env{ margin:0 0 var(--e-3); }
.min-texto--md{ white-space:normal; }
.min-texto--md mark.min-marca{ padding:0; }

/* En el formulario: la minuta formateada, que al apretarla abre el editor. */
.med-vista{
  position:relative; max-height:260px; overflow:hidden; cursor:pointer;
  border:1px solid var(--borde); border-radius:var(--radio); background:var(--gris-25);
  padding:var(--e-3) var(--e-4);
}
.med-vista::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:48px;
  background:linear-gradient(transparent, var(--gris-25)); pointer-events:none;
}
.med-vista:hover{ border-color:var(--azul-400); }
.med-vista:focus-visible{ outline:2px solid var(--azul-500); outline-offset:1px; }
.med-vista__vacio{ color:var(--texto-suave); font-size:var(--t-13); padding:var(--e-3) 0; }
.med-vista .md-minuta{ font-size:var(--t-13); }
.med-pie{ display:flex; align-items:center; gap:var(--e-3); margin-top:var(--e-2); font-size:var(--t-12); }

/* El modal del editor: casi toda la pantalla, texto y vista previa lado a lado. */
.med-modal{
  width:min(1280px, 94vw); height:88vh; max-height:88vh; padding:0;
  border:none; border-radius:var(--radio-lg); box-shadow:var(--sombra-alta);
}
.med-modal[open]{ display:flex; flex-direction:column; }
.med-modal::backdrop{ background:rgba(10,26,40,.55); }
.med-modal__cab{
  display:flex; align-items:center; gap:var(--e-4); flex-wrap:wrap;
  padding:var(--e-3) var(--e-4); border-bottom:1px solid var(--borde);
}
.med-modal__cab > b{ font-size:var(--t-16); }
.med-modal__cab > .btn{ margin-left:auto; }
.med-barra{ display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
.med-barra button{
  min-width:32px; height:30px; padding:0 8px; border:1px solid transparent; border-radius:var(--radio);
  background:none; cursor:pointer; font:inherit; font-size:var(--t-14); color:var(--texto);
}
.med-barra button:hover{ background:var(--gris-100); border-color:var(--borde); }
.med-barra button mark{ background:#fff1a8; padding:0 3px; }
.med-barra__sep{ width:1px; height:20px; background:var(--borde); margin:0 6px; }
.med-modal__cuerpo{ flex:1; min-height:0; display:grid; grid-template-columns:1fr 1fr; }
.med-texto{
  border:none; border-right:1px solid var(--borde); resize:none; outline:none;
  padding:var(--e-4) var(--e-5); font-family:var(--fuente-mono); font-size:var(--t-13); line-height:1.6;
  background:var(--gris-25);
}
.med-previa{ overflow:auto; padding:var(--e-4) var(--e-5); }
.med-modal__pie{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e-4);
  padding:var(--e-3) var(--e-4); border-top:1px solid var(--borde);
}
.med-ayuda{ font-size:var(--t-11); }
.med-ayuda code{ font-size:var(--t-11); }
@media (max-width:820px){
  .med-modal__cuerpo{ grid-template-columns:1fr; grid-template-rows:1fr 1fr; }
  .med-texto{ border-right:none; border-bottom:1px solid var(--borde); }
  .med-ayuda{ display:none; }
}

/* Formulario del ítem: ubicación y jurisdicción lado a lado. */
.it-textos{ display:grid; grid-template-columns:2fr 1fr; gap:var(--e-4); }
.it-textos textarea{ resize:vertical; min-height:36px; }
@media (max-width:720px){ .it-textos{ grid-template-columns:1fr; } }

/* Ficha: jurisdicción y minuta del ítem. */
.it-textos-ver{ padding:var(--e-3) var(--e-4); border-top:1px solid var(--borde); }
.it-textos-ver__dato{ font-size:var(--t-13); margin-bottom:var(--e-2); }
.it-textos-ver__dato .suave{ margin-right:var(--e-2); }
.it-minuta summary{
  display:flex; align-items:center; gap:var(--e-2); cursor:pointer;
  font-size:var(--t-13); font-weight:600; list-style:none;
}
.it-minuta summary::-webkit-details-marker{ display:none; }
.it-minuta summary .suave{ font-weight:400; }
.it-minuta summary .btn{ margin-left:auto; }
.it-minuta[open] summary{ margin-bottom:var(--e-3); }
.it-minuta__md{
  max-height:480px; overflow:auto; padding:var(--e-3) var(--e-4);
  background:var(--gris-25); border:1px solid var(--borde); border-radius:var(--radio);
}

/* --- NUEVO CLIENTE EN MODAL (lib/cliente.php: cliente_modal) -------------
   Usa el armazón de .cierre-modal. Sin `display` en ninguna regla, por lo de
   siempre con el <dialog> cerrado. */
.cli-modal__sub{
  margin:var(--e-4) 0 var(--e-3); padding-top:var(--e-3); border-top:1px solid var(--borde);
  font-size:var(--t-11); text-transform:uppercase; letter-spacing:.06em;
  color:var(--texto-suave); font-weight:600;
}
.cli-modal .aviso{ margin-bottom:var(--e-3); }
.cli-modal__usar{ margin-top:6px; }
/* «+ Crear cliente nuevo» al pie del «Sin resultados» del buscador. */
.buscador-item--crear{ color:var(--azul-solido); font-weight:500; border-top:1px solid var(--borde); }
/* El enlace «¿No está? Crear cliente» bajo el buscador del asegurado. */
.busca-crear{ margin-top:6px; }

/* --- ZONA DE ADJUNTOS EN UN FORMULARIO (js/v2.js: data-adj-zona) --------
   Misma cara que la de observaciones, pero con una lista de nombres en vez
   de miniaturas: acá llegan PDF, correos y planillas, no pantallazos. */
.adj-zona{
  border:1.5px dashed var(--borde-fuerte); border-radius:var(--radio);
  padding:var(--e-3); background:var(--gris-25);
}
.adj-zona--sobre{ border-color:var(--azul-500); background:var(--azul-50); }
.adj-zona__txt{ display:flex; align-items:center; gap:7px; font-size:var(--t-12); color:var(--texto-suave); }
.adj-zona__lista{ list-style:none; margin:0; padding:0; }
.adj-zona__lista:not(:empty){ margin-top:var(--e-3); border-top:1px solid var(--borde); }
.adj-zona__lista li{
  display:flex; align-items:center; gap:var(--e-3);
  padding:5px 0; border-bottom:1px solid var(--borde); font-size:var(--t-12);
}
.adj-zona__lista li:last-child{ border-bottom:none; }
.adj-zona__nombre{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.adj-zona__lista .suave{ flex:0 0 auto; font-size:var(--t-11); font-variant-numeric:tabular-nums; }
.adj-zona__x{
  flex:0 0 auto; width:22px; height:22px; border:none; border-radius:50%;
  background:transparent; color:var(--texto-suave); font-size:16px; line-height:1; cursor:pointer;
}
.adj-zona__x:hover{ background:var(--rojo-bg); color:var(--rojo-fg); }

/* El editor de minuta en su versión corta (ubicación y jurisdicción del
   ítem): pocas líneas, así que la vista es baja y sin difuminado. */
.med--corto .med-vista{ max-height:120px; padding:var(--e-2) var(--e-3); }
.med--corto .med-vista::after{ display:none; }
.med--corto .med-vista__vacio{ padding:var(--e-1) 0; }
.med--corto .med-vista__md p{ margin:0; }
/* Y en la ficha, la ubicación y la jurisdicción con formato. El rótulo a la
   izquierda y el texto con todo el ancho que queda: con inline-block el
   bloque medía lo que su línea más larga, y una jurisdicción con listas,
   notas o separadores quedaba encajonada en una columna angosta. */
.it-textos-ver__dato{ display:flex; align-items:baseline; }
.it-textos-ver__dato > .suave{ flex:0 0 auto; }
.it-textos-ver__dato .md-minuta{ flex:1; min-width:0; }
.it-textos-ver__dato .md-minuta p{ margin:0; }
.it-textos-ver__bloque{ font-size:var(--t-13); margin-bottom:var(--e-3); }
.it-textos-ver__bloque > .suave{ display:block; font-size:var(--t-11); margin-bottom:2px; }
.it-textos-ver__bloque .md-minuta p{ margin:0 0 var(--e-2); }

/* Renovaciones: su folio (el id interno) junto a la póliza, y la fila a la
   que se llegó desde una tarjeta «Siguiendo» del inicio. */
.ren-folio{ color:var(--interactivo); font-weight:600; font-variant-numeric:tabular-nums; }
.tabla tr.ren-resaltada > td{ background:var(--amarillo-bg); }
.tabla tr.ren-resaltada > td:first-child{ box-shadow:inset 3px 0 0 var(--amarillo-solido); }

/* --- INFORME: REPARTO DE COTIZACIONES ------------------------------------ */
/* Al lado, quién lleva cuántas y a quién le toca; al centro, lo que se
   asignó. En pantallas angostas se apilan. */
.inf-reparto{
  display:grid; gap:var(--e-4); align-items:start;
  grid-template-columns:360px minmax(0, 1fr);
}
.inf-reparto__lado{ display:flex; flex-direction:column; gap:var(--e-4); }
/* Los nombres, en una línea: partido en dos, «Evelyn Leon / Echeverria» se
   lee como dos personas. */
.inf-nombre{ gap:var(--e-2); white-space:nowrap; }
.inf-subtitulo td{
  background:var(--gris-50); font-size:var(--t-11); font-weight:600;
  color:var(--gris-600); padding-top:5px; padding-bottom:5px;
}
@media (max-width:1100px){
  .inf-reparto{ grid-template-columns:1fr; }
}

/* --- TRAER ÍTEM DE OTRA PROPUESTA ---------------------------------------- */
/* Las coberturas del ítem a elegir, plegadas: es lo que se mira para decidir
   cuál traer, pero un ítem puede tener cuarenta. */
.it-traer-cobs summary{ cursor:pointer; margin-top:2px; }
.it-traer-cobs ul{ margin:var(--e-1) 0 0; padding-left:var(--e-5); font-size:var(--t-12); }

/* --- CIERRE DE MES ------------------------------------------------------- */
/* Sube en verde, baja en rojo: en una cartera, que la prima baje es la
   noticia, así que se tiene que ver sin leer el signo. */
.cie-sube{ color:var(--verde-fg); font-weight:600; }
.cie-baja{ color:var(--rojo-fg); font-weight:600; }
.cie-grabar{ display:flex; flex-direction:column; gap:var(--e-2); min-width:300px; }
.cie-contra{ gap:var(--e-2); margin-bottom:var(--e-4); align-items:center; }
.cie-contra select{ width:auto; min-width:180px; }
/* El puente a la izquierda, angosto; la tabla por dimensión ocupa el resto. */
.cie-cols{ display:grid; grid-template-columns:minmax(330px, 380px) 1fr; gap:var(--e-4); align-items:start; margin-bottom:var(--e-4); }
.cie-cols > :only-child{ grid-column:1 / -1; }
.cie-puente__extremo td{ font-weight:650; background:var(--gris-50); }
@media (max-width:1100px){ .cie-cols{ grid-template-columns:1fr; } }
.cie-tabs{ overflow-y:hidden; }
/* Grabada o vista previa: tiene que notarse de lejos. La foto grabada es un
   sello verde y sólido; la vista previa, un borrador naranjo con rayas y todo
   el contenido dentro de un marco punteado. */
.cie-sello{ display:flex; gap:var(--e-4); align-items:flex-start; padding:var(--e-4) var(--e-5);
            border-radius:var(--radio-lg); margin-bottom:var(--e-4); font-size:var(--t-13); line-height:1.5; }
.cie-sello strong{ display:block; font-size:var(--t-14); margin-bottom:2px; }
.cie-sello__ico{ flex:0 0 auto; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#fff; }
.cie-sello__rotulo{ font-size:var(--t-11); font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:2px; }
.cie-sello__nota{ display:block; font-style:italic; margin:2px 0; }
.cie-sello--grabada{ background:var(--verde-bg); color:var(--verde-fg); border:1px solid var(--verde-solido); border-left:6px solid var(--verde-solido); }
.cie-sello--grabada .cie-sello__ico{ background:var(--verde-solido); }
.cie-sello--previa{ color:var(--naranjo-fg); border:1px dashed var(--naranjo-solido); border-left:6px solid var(--naranjo-solido);
                    background:repeating-linear-gradient(-45deg, var(--naranjo-bg) 0 14px, #fff7ee 14px 28px); }
.cie-sello--previa .cie-sello__ico{ background:var(--naranjo-solido); }
.cie-cuerpo--previa{ position:relative; border:2px dashed var(--naranjo-solido); border-radius:var(--radio-lg);
                     padding:var(--e-6) var(--e-4) var(--e-4); background:#fffaf4; }
.cie-cuerpo__marca{ position:absolute; top:-11px; left:var(--e-4); background:var(--naranjo-solido); color:#fff;
                    font-size:var(--t-11); font-weight:700; text-transform:uppercase; letter-spacing:.08em;
                    padding:2px 10px; border-radius:20px; }

/* ---------------------------------------------------------------------------
   Bitácora del cliente (observación #17): la historia a la izquierda y el
   cuadro para escribir a la derecha, como en la v1.
   --------------------------------------------------------------------------- */
.cbit{ display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:var(--e-4); align-items:start; }
@media (max-width:1100px){ .cbit{ grid-template-columns:1fr; } }
.cbit__linea{ padding:var(--e-3) var(--e-4); border-bottom:1px solid var(--borde); }
.cbit__linea:last-child{ border-bottom:0; }
.cbit__linea--tarea{ border-left:3px solid var(--amarillo-solido); }
.cbit__linea--cumplida{ border-left:3px solid var(--borde); }
.cbit__cab{ display:flex; align-items:center; gap:var(--e-2); flex-wrap:wrap; font-size:var(--t-12); }
.cbit__quien{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; color:var(--texto-suave); }
.cbit__texto{ white-space:pre-wrap; line-height:1.55; margin-top:6px; }
.cbit__adj{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:6px; font-size:var(--t-12); }
.cbit__adj a{ display:inline-flex; align-items:center; gap:4px; }
.cbit__pie{ margin-top:6px; font-size:var(--t-12); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

/* ---------------------------------------------------------------------------
   Resumen del listado de cotizaciones (observación #10): Nuevos negocios,
   Recotizaciones y Total, cada uno con su anillo y sus cinco estados, como el
   resumen de la v1. Cada fila filtra la tabla por ese estado y ese tipo.
   --------------------------------------------------------------------------- */
.cot-res{ display:grid; gap:var(--e-3); grid-template-columns:repeat(3, minmax(0, 1fr)); }
@media (max-width:1100px){ .cot-res{ grid-template-columns:1fr; } }
.cot-res__b{ background:var(--superficie); border:1px solid var(--borde); border-radius:14px; padding:var(--e-3) var(--e-4); }
.cot-res__b--total{ background:var(--gris-50); }
.cot-res__cab{ display:flex; align-items:baseline; gap:8px; font-size:var(--t-12); font-weight:600; margin-bottom:var(--e-2); }
.cot-res__cab b{ font-size:var(--t-22); font-weight:700; font-variant-numeric:tabular-nums; }
.cot-res__cab .suave{ font-weight:400; }
.cot-res__cuerpo{ display:flex; align-items:center; gap:var(--e-4); }
.cot-res__anillo{ width:92px; height:92px; flex:0 0 92px; }
.cot-res__filas{ flex:1; min-width:0; display:flex; flex-direction:column; }
.cot-res__fila{ display:grid; grid-template-columns:10px 1fr auto 38px; align-items:center; gap:8px;
                padding:3px 6px; border-radius:6px; color:var(--texto); font-size:var(--t-12); text-decoration:none; }
.cot-res__fila:hover{ background:var(--gris-100); text-decoration:none; }
.cot-res__fila--activa{ background:var(--azul-50); box-shadow:inset 0 0 0 1px var(--azul-600); }
.cot-res__fila i{ width:10px; height:10px; border-radius:3px; }
.cot-res__fila span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cot-res__fila b{ font-variant-numeric:tabular-nums; text-align:right; }
.cot-res__fila em{ font-style:normal; color:var(--texto-suave); font-variant-numeric:tabular-nums; text-align:right; }