/* ============================================================
   Recuotificar: corrección manual del plan de cuotas de un endoso.
   ============================================================
   Extraído VERBATIM de styles.css el 20-ago-2026 (líneas 2348-2992), espejando la regla
   de `js/<zona>.js`: la hoja de una zona se llama como su archivo de JS.
   ⚠⚠ EL ORDEN DE CARGA ES LA CASCADA: este archivo va DESPUÉS de styles.css y en el
   mismo orden relativo que tenía adentro (ver los <link> de index.html). Moverlo de
   lugar cambia qué regla gana, sin ningún error.
   ============================================================ */
/* ===== Recuotificar: corrección manual del plan de cuotas de un endoso (js/polizas-recuotificar.js) ===== */
.recuot-btn { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:#334155;
  background:#fff; border:1px solid #cbd5e1; border-radius:8px; padding:5px 11px; cursor:pointer; }
.recuot-btn:hover { border-color:#94a3b8; background:#f8fafc; }
/* Rastro de la corrección. Violeta y no ámbar: no es un problema a resolver — es un dato editado
   a propósito, y el ámbar de la app significa "mirá esto". */
.recuot-nota { display:flex; align-items:center; gap:7px; margin:0 14px 10px; padding:7px 11px; font-size:11.5px;
  color:#5b21b6; background:#f5f3ff; border:1px solid #ddd6fe; border-radius:8px; }
.recuot-nota a { color:#6d28d9; font-weight:600; }
.recuot-atajo { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; background:#f8fafc;
  border:1px solid #e2e8f0; border-radius:10px; padding:12px 14px; margin-bottom:14px; }
.recuot-tabla { width:100%; border-collapse:collapse; }
.recuot-tabla th { text-align:left; padding:6px 8px; font-size:10.5px; font-weight:700; color:#64748b;
  text-transform:uppercase; letter-spacing:.6px; }
.recuot-tabla td { padding:4px 8px; }
.recuot-tabla input.form-input { height:34px; font-size:13px; }
/* El total es la barrera visible: mientras no cierre contra el premio, el botón Guardar está
   deshabilitado y esta barra lo dice en rojo. */
.recuot-total { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:12px;
  padding:9px 12px; border-radius:9px; font-size:12.5px; font-weight:600; }
.recuot-total.ok  { background:#f0fdf4; border:1px solid #bbf7d0; color:#166534; }
.recuot-total.mal { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; }
/* Campos del RAMO dibujados en la fila "Datos de la cotización" (`enCotizacion`): el pago de Agro,
   el plazo de una caución, el ajuste automático. `display:contents` los deja caer como celdas de
   ESA grilla; el `grid-column: span N` que el render le pone a todo campo del riesgo es de la
   grilla de 24 columnas del riesgo y acá haría que un campo ocupe media fila. */
.sol-cot-extra { display:contents; }
.sol-cot-extra > .form-field { grid-column:auto !important; }
/* Cascada InfoAuto en el riesgo de Automotores (marca/modelo/versión): el buscador visible + el
   desplegable, con el <select> real oculto detrás. `position:relative` es OBLIGATORIO —
   `.loc-suggestions` es `position:absolute` y sin un ancestro posicionado se cuelga del viewport
   (la misma regla que `.sol-loc-inp`). */
.sol-ia-inp { position:relative; }
/* Valor FIJADO por la compañía (la valuación de San Cristóbal en Automotores): se lee como dato,
   no como campo a completar. Va gris y sin cursor de tipeo, pero SÍ se puede seleccionar y copiar
   — por eso es `readonly` y no `disabled`. Cuando la compañía no tiene precio, el campo vuelve a
   ser un input normal y lo completa el PAS. */
.sol-monto-inp.sol-monto-fijo { background:#f1f5f9; color:#475569; cursor:default; }
.sol-monto-inp.sol-monto-fijo:focus { outline:none; border-color:#e2e8f0; box-shadow:none; }
/* Medidas de seguridad: una fila de tildes con el mismo peso que un campo del form. Hasta el
   9-sep-2026 los cinco checkbox colgaban sueltos bajo su label, sin caja, pegados al borde de la
   ubicación ("quedó feo ahí así"): se leían como parte del campo de arriba y no como una lista de
   opciones. Ahora van en una caja tenue, que es lo que hace la app con todo checklist. */
.sol-seg { display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; align-content:center;
  border:1px solid #e2e8f0; border-radius:8px; background:#f8fafc; padding:8px 11px; min-height:38px; }
.sol-seg .sol-cob-chk { font-size:12.5px; }
/* Checkbox tildable (medidas de seguridad). */
.sol-cob-chk { display:flex; align-items:center; gap:6px; font-size:13px; color:#334155; font-weight:400; }
/* Grupo repetible (tipo 'items' del catálogo de ramos): una fila por ítem. Hoy lo usa Agro
   (lotes a cotizar). La tabla es fija para que las columnas no salten entre filas. */
.sol-items-tbl { width:100%; table-layout:fixed; border-collapse:collapse; }
.sol-items-tbl th { font-size:11px; font-weight:500; color:#64748b; text-align:left; padding:0 4px 4px 0; }
/* Columna no obligatoria: cabecera más tenue, así se lee de un saque qué hace falta y qué no. */
.sol-items-tbl th.sol-item-opt { color:#94a3b8; font-weight:400; }
.sol-items-tbl td { padding:2px 4px 2px 0; }
.sol-items-tbl td .form-input { height:30px; font-size:12px; padding:0 6px; }
.sol-items-tbl td.sol-item-del { width:26px; padding-right:0; text-align:right; }
/* Tildes dentro de una fila de ítem (RC Operaciones / RC Vial). La fija va deshabilitada: se
   atenúa apenas para que se lea "incluida" y no "rota". */
.sol-items-tbl td.sol-item-chk-td { text-align:center; }
/* Celda que NO se tipea: la llena el padrón de ARCA (la razón social de una cláusula, por su
   CUIT/CUIL). Es `readonly`, no `disabled`: se puede seleccionar y copiar. El handler de ARCA le
   saca la clase cuando el padrón no la puede llenar, y ahí vuelve a verse como un campo normal. */
.sol-items-tbl td .form-input.sol-item-ro { background:#f1f5f9; color:#475569; cursor:default; }
.sol-items-tbl td .form-input.sol-item-ro:focus { outline:none; border-color:#e2e8f0; box-shadow:none; }
/* ⚠⚠ Modo DOS FILAS (`dosFilas` en la def del grupo: hoy, las máquinas agrícolas). El DOM sigue
   siendo UNA <tr> por ítem —de eso dependen el "+ Agregar", el volcado del importador, el
   renumerado y la sincronía con "cantidad"—: lo único que cambia es que la fila se dibuja como
   grilla de 12 columnas y envuelve sola. Como ya no hay columnas de tabla, el <thead> sobra y el
   rótulo va DENTRO de cada celda. */
.sol-items-2f, .sol-items-2f tbody, .sol-items-2f tr, .sol-items-2f td { display:block; }
.sol-items-2f thead { display:none; }
.sol-items-2f tr.sol-item-row { display:grid; grid-template-columns:repeat(12, 1fr); gap:4px 8px;
  align-items:end; padding:8px 0; border-bottom:1px solid var(--c-border, #e2e8f0); }
.sol-items-2f tr.sol-item-row:last-child { border-bottom:0; }
.sol-items-2f td { grid-column:span var(--col, 2); padding:0; min-width:0; }
/* ⚠ La × hereda `width:26px` de la regla de tabla: en modo bloque eso la clava a la izquierda,
   contra el borde opuesto al que el usuario mira cuando quiere borrar la fila. */
.sol-items-2f td.sol-item-del { grid-column:span 12; width:auto; text-align:right; margin-top:-4px; }
.sol-items-2f td.sol-item-chk-td { text-align:left; }
/* "RC Operaciones" no entra en una columna de doceavo: en las tildes el rótulo envuelve en vez de
   cortarse con puntos suspensivos (el `align-items:end` de la fila lo mantiene alineado). */
.sol-items-2f td.sol-item-chk-td .sol-item-lbl { white-space:normal; }
.sol-item-lbl { display:block; font-size:11px; font-weight:500; color:#64748b; padding-bottom:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sol-items-2f td.sol-item-opt .sol-item-lbl { color:#94a3b8; font-weight:400; }
.sol-item-chk { width:16px; height:16px; margin:0; cursor:pointer; accent-color:var(--c-primary, #0a1450); }
.sol-item-chk:disabled { cursor:default; opacity:.65; }
.sol-item-x { border:0; background:none; cursor:pointer; color:#94a3b8; font-size:16px; line-height:1; padding:0 2px; }
.sol-item-x:hover { color:#dc2626; }
.sol-item-add { margin-top:6px; border:1px solid var(--c-border, #e2e8f0); background:#fff; border-radius:6px;
  cursor:pointer; font-size:12px; padding:4px 10px; color:#334155; }
.sol-item-add:hover { background:#f8fafc; }
/* Coberturas a cotizar: 2 columnas, cada cobertura con su nombre + suma asegurada (sin tilde). */
/* Título de grupo (Todo Riesgo Operativo: Daños Materiales · Sublímites). */
.sol-items-acciones { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sol-item-import { cursor:pointer; font-size:12.5px; color:var(--c-primary); font-weight:600; padding:6px 0; }
/* Modelo de planilla: mismo peso visual que "Importar" — son la misma herramienta en dos pasos. */
.sol-item-modelo { font-size:12.5px; color:var(--c-primary); font-weight:600; text-decoration:none; }
.sol-item-modelo:hover { text-decoration:underline; }
.sol-item-import:hover { text-decoration:underline; }
.sol-item-import-msg { font-size:12px; color:#64748b; }
.sol-item-import-msg.ok { color:#15803d; }
.sol-item-import-msg.warn { color:#b45309; }
.sol-item-import-msg.err { color:#b91c1c; }
/* Acordeón de UBICACIONES del riesgo (Comercio e Industria, 🚩 bds #210): una sección plegable por
   sucursal, con sus campos y su grilla de coberturas adentro. El gesto y los pesos son los del
   acordeón multi-ítem de la ficha de una póliza — es el mismo objeto, en modo edición. */
.sol-ubs { border:1px solid #e2e8f0; border-radius:10px; overflow:hidden; }
.sol-ub + .sol-ub { border-top:1px solid #e2e8f0; }
.sol-ub-head { display:flex; align-items:center; gap:8px; padding:10px 12px; cursor:pointer;
  font-size:13px; font-weight:600; color:#0f172a; background:#f8fafc; }
.sol-ub-head:hover { background:#f1f5f9; }
.sol-ub-chevron { color:#64748b; font-size:11px; width:10px; }
.sol-ub-tit { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* El resumen se va al fondo y NUNCA se corta: es lo que deja comparar sumas entre sucursales sin
   abrirlas, así que el que cede ancho es el título (que además ya se lee en el body). */
.sol-ub-resumen { margin-left:auto; font-size:12px; font-weight:400; color:#64748b; white-space:nowrap; }
/* Quitar una ubicación. Va en la cabecera, con el mismo gesto que la × de una fila repetible:
   gris hasta que se lo apunta, rojo al pasar por encima. `flex:none` para que el resumen no lo
   empuje fuera de la caja cuando el título es largo. */
.sol-ub-x { flex:none; border:0; background:none; cursor:pointer; color:#94a3b8; font-size:18px;
  line-height:1; padding:0 2px; margin-left:10px; }
.sol-ub-x:hover { color:#dc2626; }
.sol-ub-body { padding:12px; }
.sol-ubs-acciones { padding:8px 12px; border-top:1px solid #e2e8f0; }
.sol-cob-grupo { font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:#64748b; margin:10px 0 4px; }
.sol-cob-grupo:first-child { margin-top:0; }
/* ⚠ La grilla de coberturas va COMPACTA (Martín, 3-sep-2026: "más apiladas"). Un ramo con 20+
   coberturas —Comercio, Consorcios, los sublímites del TRO— empujaba media pantalla de scroll
   antes de llegar al resto del riesgo. Los controles son más bajos que un campo normal del form
   a propósito: acá se leen como una LISTA (nombre + su suma), no como campos sueltos. */
.sol-cobs { display:grid; grid-template-columns:1fr 1fr; gap:2px 16px; }
.sol-cob-row { display:flex; align-items:center; gap:8px; min-width:0; }
.sol-cob-row .sol-cob-name { flex:1; min-width:0; font-size:12.5px; color:#334155; }
.sol-cobs .form-input { padding:4px 10px; font-size:12.5px; }
.sol-cobs .sol-monto-cur { padding:0 8px; font-size:12.5px; }
.sol-cob-sa-wrap { width:170px; flex:none; }
/* Ítem con desplegable (el período de indemnización): mismo ancho que el cajón de suma, o el
   <select> se estira y se come el nombre de la cobertura. */
.sol-cob-opt { width:170px; flex:none; }
/* Ítem TILDE ('Uso de moto'): ocupa la misma columna que el cajón de suma para que la fila se
   lea igual que las de arriba — un checkbox pegado al nombre parecería otra cosa. */
.sol-cob-tilde { width:170px; flex:none; display:flex; align-items:center; gap:6px; font-size:13px; color:#334155; }
/* Grupo EN LÍNEA (los 4 daños materiales del TRO): N columnas iguales, nombre arriba del cajón,
   y el cajón ocupa el ancho de la columna. A menos de 900px pasa a 2 columnas. */
.sol-cobs-linea { grid-template-columns:repeat(var(--n, 4), 1fr); gap:6px 14px; }
.sol-cobs-linea .sol-cob-row { flex-direction:column; align-items:stretch; gap:3px; }
.sol-cobs-linea .sol-cob-row .sol-cob-name { flex:none; font-size:12px; font-weight:600; color:#475569; }
.sol-cobs-linea .sol-cob-sa-wrap, .sol-cobs-linea .sol-cob-opt, .sol-cobs-linea .sol-cob-tilde { width:auto; }
@media (max-width:900px){ .sol-cobs-linea { grid-template-columns:1fr 1fr; } }
/* "Otras": UNA fila más de la grilla, con su nombre y su suma como el resto (Martín, 9-sep-2026:
   "otras coberturas que esté abajo de equipos de contratistas, nombre y suma ídem al resto"). Era
   una barra a todo lo ancho, debajo de la grilla: se leía como un comentario al pie y no como la
   cobertura que es — y no tenía dónde poner la suma. */
.sol-cob-otras { flex:1; min-width:0; padding:4px 10px; font-size:12.5px; }
/* Sublímites del TRO: nombre · límite · franquicia. Tres controles por fila no entran en dos
   columnas → una sola, con una cabecera que diga cuál es cuál (los placeholders desaparecen
   apenas se carga el valor). */
/* ⚠ Sublímites a DOS columnas cuando el contenedor lo permite (Martín, 3-sep-2026). Se mide el
   CONTENEDOR y no el viewport: la misma grilla vive en el alta (ancho completo) y en la ficha, y
   con el sidebar abierto a 1280px de pantalla el nombre quedaría en 60px. A 1150px de contenedor
   cada columna deja ~350px al nombre. La 2ª cabecera sólo existe con dos columnas. */
.sol-cobs-wrap { container-type:inline-size; }
.sol-cobs-ded { grid-template-columns:1fr; }
.sol-cob-head-2 { display:none; }
@container (min-width:1150px){ .sol-cobs-ded { grid-template-columns:1fr 1fr; } .sol-cobs-ded .sol-cob-head-2 { display:flex; } }
.sol-cob-row-ded .sol-cob-ded { width:220px; flex:none; }
.sol-cob-head { font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:#64748b; margin-bottom:2px; }
.sol-cob-head .sol-cob-sa-wrap, .sol-cob-head .sol-cob-ded { padding-left:2px; }
@media (max-width:640px){ .sol-cob-row-ded { flex-wrap:wrap; } .sol-cob-row-ded .sol-cob-ded { width:100%; } .sol-cob-head { display:none; } }
@media (max-width:640px){ .sol-cobs { grid-template-columns:1fr; } }
/* Actualizar en bloque las sumas aseguradas (renovación: "lo mismo, +20%"). Va ARRIBA de la
   grilla y en una sola línea: es una herramienta sobre las coberturas, no una cobertura más —
   metido entre las filas se leería como un campo a completar. */
/* Tasa del EXPIRANTE al lado del nombre de la cobertura (renovación). Mismo tratamiento que en la
   ficha de la póliza: gris y más chico, porque es dato del año que termina — el número contra el
   que se compara lo que cotiza la compañía ahora, no algo que se cotice. */
.sol-cob-tasa { color:#94a3b8; font-size:11px; white-space:nowrap; }
.sol-cob-aumento { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 10px; }
.sol-cob-aumento .sol-aumento-wrap { width:110px; flex:none; }
.sol-cob-aumento .sol-aumento-btn { padding:6px 14px; font-size:13px; }
/* El resultado ("✓ 8 sumas actualizadas") en verde y al lado del botón: es la única señal de que
   la acción hizo algo — las sumas cambian abajo, fuera de la vista cuando la lista es larga. */
.sol-aumento-msg { font-size:12px; color:#166534; }
@media (max-width:640px){ .sol-cob-aumento { gap:6px; } }
/* Datos de la póliza en 3 columnas fijas (productor · cliente · aseguradora / póliza · + tipo).
   Los grupos por tipo son display:contents para que sus campos entren en ESTA grilla; el
   toggle por tipo (_solToggleCamposTipo) los apaga con display:none inline, que gana. */
.sol-grid-datos { grid-template-columns:repeat(3,minmax(0,1fr)); }
.sol-grupo-inline { display:contents; }
@media (max-width:900px){ .sol-grid-datos { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .sol-grid-datos { grid-template-columns:1fr; } }
/* Buscadores typeahead (productor / cliente) */
.sol-ac-wrap { position:relative; }
.sol-ac-results { position:absolute; left:0; right:0; top:100%; margin-top:4px; background:#fff; border:1px solid #e2e8f0; border-radius:9px; box-shadow:0 8px 24px rgba(15,42,74,.14); z-index:50; max-height:260px; overflow:auto; }
.sol-ac-item { padding:9px 12px; font-size:13px; color:#1e293b; cursor:pointer; display:flex; justify-content:space-between; gap:10px; align-items:center; border-bottom:1px solid #f1f5f9; }
.sol-ac-item:hover { background:#f0f7ff; }
.sol-ac-sub { font-size:11.5px; color:#94a3b8; flex-shrink:0; }
.sol-ac-empty { padding:12px; text-align:center; color:#94a3b8; font-size:12.5px; }
/* Encabezado del desplegable: avisa que el universo ofrecido está ACOTADO (hoy, la ventana ±30 días
   del buscador de renovación). Va acá y no como hint fijo bajo el campo porque el desplegable es
   ABSOLUTO: no pesa en el layout, y ese campo vive en una fila que alinea por la base — un renglón
   de más abajo del input descuadraba el <select> de al lado. `sticky` para que el aviso siga a la
   vista al scrollear las 12 filas (la lista corta en 260px). */
.sol-ac-head { position:sticky; top:0; padding:8px 12px; font-size:11.5px; line-height:1.45; color:#64748b;
  background:#f8fafc; border-bottom:1px solid #e2e8f0; border-radius:9px 9px 0 0; }
.view-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:8px; }
.view-title { font-size:22px; font-weight:700; color:#0f172a; margin:0; }
.view-subtitle { font-size:13px; color:#64748b; margin:4px 0 0; }
.sol-filtros { display:flex; gap:10px; margin:12px 0 16px; }
.sol-select, .sol-input, .sol-textarea { font:inherit; padding:8px 10px; border:1px solid #d9e1ec; border-radius:7px; background:#fff; color:#1e293b; }
.sol-textarea { width:100%; box-sizing:border-box; resize:vertical; }
.sol-rows { display:flex; flex-direction:column; gap:8px; }
/* Paginación de los listados en CARDS (Siniestros, Solicitudes): la barra de .pagination está
   pensada para colgar del borde inferior de una .data-table (sin borde superior y con las
   esquinas de arriba rectas). Pegada abajo de una lista de cards separadas se leía como una
   card rota, así que acá se cierra sola y se despega. */
.sol-rows + .pagination { border-top:1px solid #e2e8f0; border-radius:8px; margin-top:8px; }
.sol-row { position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; background:#fff; border:1px solid #eef2f7; border-radius:9px; padding:12px 14px; cursor:pointer; transition:box-shadow .12s,border-color .12s; }
.sol-row:hover { border-color:#cdd9ea; box-shadow:0 1px 6px rgba(15,42,74,.06); }
/* Punto rojo (novedades sin ver): esquina superior derecha, arriba del chip de estado. */
.sol-row-novedad { position:absolute; top:6px; right:6px; width:9px; height:9px; border-radius:50%; background:#ef4444; box-shadow:0 0 0 2px #fff; }
/* Punto rojo en las cards de cotización (mismo criterio, sobre la card relativa). */
.cot-card-novedad { position:absolute; top:6px; right:6px; width:9px; height:9px; border-radius:50%; background:#ef4444; box-shadow:0 0 0 2px #fff; z-index:2; }
/* Aviso "hay novedades que los filtros esconden" (el badge del sidebar no conoce los filtros de
   la vista, así que sin esto el número del menú y los puntos rojos del grid no cierran). */
.cot-nov-ocultas { display:flex; align-items:center; gap:10px; background:#fef2f2; border:1px solid #fecaca; border-radius:10px; padding:9px 14px; margin-bottom:14px; }
.cot-nov-ocultas-dot { width:9px; height:9px; border-radius:50%; background:#ef4444; flex:none; }
.cot-nov-ocultas-txt { font-size:13px; color:#991b1b; font-weight:600; }
.cot-nov-ocultas-btn { margin-left:auto; padding:4px 10px; border:1px solid #fecaca; border-radius:8px; background:#fff; color:#991b1b; font-size:12px; font-weight:600; cursor:pointer; }
.cot-nov-ocultas-btn:hover { background:#fee2e2; }
/* Línea de color por tipo a la izquierda de cada fila. */
.sol-row-cotizacion { border-left:4px solid var(--c-secondary); }  /* azul */
.sol-row-anulacion  { border-left:4px solid #ef4444; }  /* rojo */
.sol-row-cobranza   { border-left:4px solid #22c55e; }  /* verde */
.sol-row-endoso     { border-left:4px solid #eab308; }  /* amarillo */
.sol-row-documentacion { border-left:4px solid #a855f7; }  /* violeta */
.sol-row-orden      { border-left:4px solid #6366f1; }  /* índigo */
.sol-row-alta-compania { border-left:4px solid #f97316; }  /* naranja (Alta en compañía) */
/* Siniestros: borde por categoría (mismo tratamiento que Solicitudes). */
.sol-row-sin-auto      { border-left:4px solid #0ea5e9; }  /* celeste (Auto) */
.sol-row-sin-propiedad { border-left:4px solid #a855f7; }  /* violeta (Propiedad) */
/* Siniestros: acciones Editar/Eliminar arriba a la derecha del encabezado. */
.sin-d-acc-top { display:flex; gap:8px; align-items:center; }
.sin-acc-btn { padding:7px 14px; border:1px solid transparent; border-radius:7px; font-weight:600; font-size:13px; cursor:pointer; transition:filter .12s, box-shadow .12s; }
.sin-acc-btn:hover { filter:brightness(0.96); box-shadow:0 2px 6px rgba(15,42,74,.12); }
.sin-acc-editar { background:#e0f2fe; color:#075985; }
.sin-acc-eliminar { background:#fee2e2; color:#991b1b; }
/* Mini-modal (cambio de estado: emitir / rechazar). */
/* ⚠ padding + max-height (26-jul-2026): sin ellos, un modal más alto que el viewport quedaba
   centrado con el borde superior FUERA de la pantalla, y html,body{overflow:hidden} impedía
   scrollear hasta él. El peor caso era la emisión de RC Médicos (~10 campos): con el teclado
   abierto, el botón de emitir era literalmente inalcanzable en el celular. */
.sol-modal-ov { position:fixed; inset:0; background:rgba(15,42,74,.38); display:flex; align-items:center; justify-content:center; z-index:1000; padding:16px; box-sizing:border-box; }
.sol-modal { background:#fff; border-radius:12px; padding:20px 22px; width:min(420px,92vw); box-shadow:0 12px 40px rgba(15,42,74,.22); max-height:calc(100vh - 32px); overflow-y:auto; }
.sol-modal-tit { font-size:16px; font-weight:700; color:#1e293b; margin-bottom:14px; }
.sol-modal-acc { display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }

/* Ficha del plan (modal del grid del cotizador) — mismo patrón overlay que .sol-modal */
.cot-ficha-overlay { position:fixed; inset:0; background:rgba(15,42,74,.38); display:flex; align-items:center; justify-content:center; z-index:1000; }
.cot-ficha-overlay[hidden] { display:none; }
.cot-ficha-card { position:relative; background:#fff; border-radius:14px; padding:22px 24px; width:min(440px,92vw); max-height:88vh; overflow-y:auto; box-shadow:0 12px 40px rgba(15,42,74,.22); }
.cot-ficha-x { position:absolute; top:12px; right:14px; border:none; background:none; font-size:16px; line-height:1; color:#94a3b8; cursor:pointer; padding:4px; }
.cot-ficha-x:hover { color:#475569; }
.cot-ficha-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; padding-right:24px; }
.cot-ficha-logo { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:9px; color:#fff; font-weight:800; font-size:14px; flex-shrink:0; }
.cot-ficha-logoimg { height:28px; width:auto; max-width:170px; object-fit:contain; flex-shrink:0; }
.cot-ficha-cia { font-size:15px; font-weight:700; color:#0f172a; }
.cot-ficha-plan { font-size:13.5px; font-weight:700; color:#0f172a; margin-bottom:2px; }   /* la cobertura en su propia línea, arriba del vehículo (pedido 2-jul) */
.cot-ficha-precio { margin-left:auto; font-size:20px; font-weight:800; color:#1e293b; white-space:nowrap; }
.cot-ficha-precio span { font-size:12px; font-weight:600; color:#94a3b8; }
.cot-ficha-veh { font-size:13px; color:#475569; margin-bottom:12px; }
.cot-ficha-row { display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:7px 0; border-top:1px solid #f1f5f9; }
.cot-ficha-row span:first-child { color:#64748b; }
.cot-ficha-row span:last-child { color:#1e293b; font-weight:600; }
/* Comisión estimada: una línea chica y discreta (sin desglose PAS/Org) */
.cot-ficha-row-com { font-size:11.5px; padding:5px 0; }
.cot-ficha-row-com span:first-child { color:#94a3b8; }
.cot-ficha-row-com span:last-child { color:#64748b; font-weight:600; }
/* Comisión "no disponible" (SMG/Sancor) */
.cot-ficha-row-muted span:last-child { color:#94a3b8; font-weight:500; font-style:italic; }
.cot-ficha-sub { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:#64748b; margin:12px 0 6px; }
.cot-ficha-cobs { margin-top:6px; }
.cot-ficha-cob { display:flex; justify-content:space-between; gap:12px; font-size:12.5px; color:#334155; padding:6px 0; border-top:1px solid #f1f5f9; }
.cot-ficha-cob > span:first-child { color:#64748b; flex-shrink:0; }
.cot-ficha-cobval { text-align:right; }
.cot-ficha-nota { font-size:12.5px; color:#94a3b8; font-style:italic; margin-top:12px; }
.cot-ficha-nota-exc { color:#b45309; font-style:normal; }   /* excepción Zurich: destacada sobre la nota gris */
.cot-ficha-acciones { display:flex; justify-content:flex-end; margin-top:18px; }
.cot-ficha-emitir { border:none; border-radius:9px; padding:10px 22px; font-size:13.5px; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--c-primary-700),var(--c-secondary)); cursor:pointer; }
.cot-ficha-emitir:hover:not(:disabled) { filter:brightness(1.06); }
.cot-ficha-emitir:disabled { background:#cbd5e1; color:#f8fafc; cursor:not-allowed; }
/* Sin código propio en la compañía: aviso + CTA "Pedir alta" (WhatsApp a la organización) */
.cot-ficha-alta { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding:10px 12px; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:9px; font-size:12.5px; color:#166534; }
.cot-ficha-alta-btn { border:none; border-radius:8px; padding:8px 14px; font-size:12.5px; font-weight:700; color:#fff; background:#25D366; cursor:pointer; white-space:nowrap; }
.cot-ficha-alta-btn:hover { filter:brightness(1.06); }
.sol-row-tipo { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:#64748b; }
.sol-row-titulo { font-weight:600; color:#1e293b; }
.sol-row-meta { font-size:12px; color:#94a3b8; margin-top:2px; }
/* Lado derecho de la card: nº de trámite copiable + chip de estado. */
.sol-row-estado { display:flex; align-items:center; gap:8px; flex-shrink:0; }
/* Estado editable desde el listado de siniestros (🚩 bds #141): el chip se convierte en
   <select> al tocarlo. El wrapper conserva el tamaño del chip para que la fila no salte. */
.sin-estado-edit { cursor:pointer; display:inline-flex; align-items:center; }
.sin-estado-edit:hover .sol-chip { filter:brightness(.95); text-decoration:underline; }
.sin-estado-sel { font:inherit; font-size:12px; font-weight:600; border:1px solid var(--c-border,#e2e8f0);
  border-radius:999px; padding:3px 8px; background:#fff; color:inherit; cursor:pointer; max-width:190px; }
/* ⚠ Azul HARDCODEADO, no var(--c-primary): el branding por tenant pisa esa variable (Bureau es
   cyan #00adef) y los chips de esta fila deben verse iguales en los 3 tenants — misma doctrina
   que .sol-st-* (ver el comentario de los design tokens arriba). */
.sol-tramite { display:inline-flex; align-items:center; gap:6px; max-width:230px; padding:3px 10px; border-radius:999px; border:none; background:#eff6ff; color:#5b7ca6; font-family:inherit; font-size:12px; font-weight:600; line-height:1.5; cursor:pointer; white-space:nowrap; transition:background .12s; }
.sol-tramite:hover { background:#dbeafe; }
/* El nº es texto libre (hay frases de 42 caracteres en prod): se trunca acá, se copia entero. */
.sol-tramite b { min-width:0; overflow:hidden; text-overflow:ellipsis; color:#1e40af; font-weight:700; }
.sol-tramite-ico { opacity:.45; font-size:11px; }
/* En angosto el lado derecho baja a su propio renglón: la .sol-row es flex sin wrap, así que
   un chip de ancho fijo le comía el título (medido a 390px: quedaba en 76px, en tres renglones)
   y empujaba el chip de estado fuera de la card. ⚠ basis 100% (no `auto`): en flex-wrap el corte
   de línea se decide con el flex-basis, antes del shrink. */
@media (max-width:700px){
  .sol-row { flex-wrap:wrap; row-gap:8px; }
  .sol-row-main { flex:1 1 100%; min-width:0; }
  .sol-row-estado { width:100%; justify-content:flex-start; }
  .sol-tramite { max-width:100%; }
}
.sol-empty, .sol-cerrada, .notif-empty { padding:24px; text-align:center; color:#94a3b8; font-size:13px; }
.sol-chip { display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; }
.sol-st-creada { background:#dbeafe; color:var(--c-estado-azul); }
.sol-st-proceso { background:#fef9c3; color:#854d0e; }
.sol-st-cargada { background:#e0f2fe; color:#075985; }
.sol-st-falta { background:#ffedd5; color:#9a3412; }
.sol-st-emision { background:#fef9c3; color:#854d0e; }
.sol-st-ok { background:#dcfce7; color:#166534; }
.sol-st-rech { background:#fee2e2; color:#991b1b; }
.sol-st-canc { background:#f1f5f9; color:#64748b; }
.sol-st-violeta { background:#f3e8ff; color:#6b21a8; }
/* Pospuesta (🚩 bds #277): gris pizarra, el único estado que no pide acción hoy. */
.sol-st-pausa { background:#e2e8f0; color:#475569; }
/* Familia COTIZACIÓN: la paleta de 9 del listado (misma tabla que .cot-echip en styles.css),
   un color por estado. La ficha de una cotización manual pinta con éstas (_solEstadoClase). */
.sol-st-cot-creada { background:#dbeafe; color:#1d4ed8; }
.sol-st-cot-solicitada { background:#cffafe; color:#0e7490; }
.sol-st-cot-cotizada { background:#ede9fe; color:#6d28d9; }
.sol-st-cot-falta-documentacion { background:#fef3c7; color:#92400e; }
.sol-st-cot-pendiente-inspeccion { background:#fed7aa; color:#9a3412; }
.sol-st-cot-en-emision { background:#ecfccb; color:#4d7c0f; }
.sol-st-cot-emitida { background:#dcfce7; color:#15803d; }
.sol-st-cot-rechazada { background:#fee2e2; color:#991b1b; }
.sol-st-cot-pospuesta { background:#e2e8f0; color:#475569; }
.sol-retoma-nota { font-size:11.5px; font-weight:600; color:#475569; margin-left:8px; white-space:nowrap; }
.sol-estado-btn.sol-pausa-btn { flex:0 0 auto; padding-left:10px; padding-right:10px; }
.sol-st-celeste { background:#cffafe; color:#0e7490; }
.sol-chip-sm { padding:1px 8px; font-size:11px; }
/* Ficha de cotización: modal "Enviar a compañías". */
.sol-envio-asunto { font-size:12.5px; color:#475569; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:8px 10px; margin-bottom:12px; }
.sol-envio-list { display:flex; flex-direction:column; gap:10px; max-height:280px; overflow-y:auto; margin-bottom:4px; }
.sol-envio-row { border:1px solid #e2e8f0; border-radius:8px; padding:8px 10px; }
.sol-envio-chk { display:flex; align-items:center; gap:7px; font-weight:600; font-size:13px; color:#1e293b; margin-bottom:6px; cursor:pointer; }
.sol-envio-mails { font-size:12.5px; }
/* Siniestros: edición inline de Nº denuncia / Nº siniestro en el panel de datos. */
.sin-nro-pen { padding:1px 6px; font-size:11px; margin-left:6px; vertical-align:middle; line-height:1; }
.sin-nro-edit { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.sin-nro-inp { display:inline-block; max-width:180px; padding:4px 8px; }
/* Siniestros: etiquetas tildables + check de cierre. */
.sin-tags-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
/* `flex-wrap` porque las 13 etiquetas no entran en una línea: con `nowrap` cada pill se
   comprimía hasta quedar ilegible ("Document…", "Falta do…") y la última desbordaba la card
   — el usuario dejaba de reconocerlas como la vía para marcar varias cosas a la vez
   (🚩 vigier #45). Envuelve a dos filas, no se achica: de ahí el `flex:0 0 auto`. */
.sin-tags { display:flex; flex-wrap:wrap; gap:6px; }
.sin-tag-pill { white-space:nowrap; flex:0 0 auto; }
.sin-tag-pill { display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border:1px solid #e2e8f0; border-radius:999px; font-size:11.5px; font-weight:600; color:#475569; background:#fff; cursor:pointer; user-select:none; }
.sin-tag-pill:hover { border-color:#cbd5e1; }
.sin-tag-pill.on { background:#eff6ff; border-color:#bfdbfe; color:var(--c-estado-azul); }
.sin-tag-pill input { margin:0; }
.sin-tag { background:#eff6ff; color:var(--c-estado-azul); }
/* Color por etiqueta (siniestros): chip de listado/ficha + pill activa. */
.sin-et-amarillo.sol-chip { background:#fef9c3; color:#854d0e; }
.sin-et-rosa.sol-chip     { background:#fce7f3; color:#9d174d; }
.sin-et-rojo.sol-chip     { background:#fee2e2; color:#991b1b; }
.sin-et-naranja.sol-chip  { background:#ffedd5; color:#9a3412; }
.sin-et-azul.sol-chip     { background:#dbeafe; color:var(--c-estado-azul); }
.sin-et-violeta.sol-chip  { background:#f3e8ff; color:#6b21a8; }
.sin-et-verde.sol-chip    { background:#dcfce7; color:#166534; }
.sin-tag-pill.on.sin-et-amarillo { background:#fef9c3; border-color:#fde68a; color:#854d0e; }
.sin-tag-pill.on.sin-et-rosa     { background:#fce7f3; border-color:#fbcfe8; color:#9d174d; }
.sin-tag-pill.on.sin-et-rojo     { background:#fee2e2; border-color:#fecaca; color:#991b1b; }
.sin-tag-pill.on.sin-et-naranja  { background:#ffedd5; border-color:#fed7aa; color:#9a3412; }
.sin-tag-pill.on.sin-et-azul     { background:#dbeafe; border-color:#bfdbfe; color:var(--c-estado-azul); }
.sin-tag-pill.on.sin-et-violeta  { background:#f3e8ff; border-color:#e9d5ff; color:#6b21a8; }
.sin-tag-pill.on.sin-et-verde    { background:#dcfce7; border-color:#bbf7d0; color:#166534; }
.sin-cerrado-chk { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:#334155; cursor:pointer; user-select:none; font-weight:600; }
.sin-cerrado-chk input { margin:0; }
.sin-row-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.sin-empty-inline { font-size:12.5px; color:#94a3b8; }
/* Siniestros: ficha (header + stepper de estado). */
.sin-d-sub { font-size:13px; color:#64748b; margin-top:3px; }
.sin-d-sub2 { font-size:12px; color:#94a3b8; margin-top:2px; }
/* Resumen de subsiniestros en el encabezado: UNA línea, para enterarse sin bajar a la card.
   `flex-wrap` porque con 5 coberturas de nombre largo el ancho no alcanza en pantallas chicas —
   envuelve, no desborda. */
.sin-d-cobs { display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:12px; color:#64748b; margin-top:7px; }
.sin-d-cobs-ico { font-size:13px; line-height:1; }
.sin-d-cob-sep { color:#cbd5e1; }
.sin-d-cob-abierta { color:#92400e; font-weight:600; }
.sin-d-cob-cerrada { color:#64748b; }
.sin-cob-green { color:#15803d; font-weight:600; }
.sin-cob-red { color:#b91c1c; font-weight:600; }
.sin-cob-amber { color:#b45309; font-weight:600; }
.sin-cob-gray { color:#64748b; }
.sin-d-head-right { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.sin-stepper { display:flex; align-items:flex-start; }
.sin-step { display:flex; flex-direction:column; align-items:center; gap:7px; flex:1; min-width:0; text-align:center; }
.sin-step-click { cursor:pointer; border-radius:8px; padding:2px 0; transition:background .12s; }
.sin-step-click:hover { background:#f8fafc; }
.sin-step-node { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; }
.sin-step-cur { color:#fff; border:2px solid; box-shadow:0 0 0 3px rgba(37,99,235,0.12); }
.sin-step-done { background:#cbd5e1; color:#475569; }
.sin-step-future { background:#fff; color:#94a3b8; border:1.5px solid #e2e8f0; }
.sin-step-lbl { font-size:11px; color:#94a3b8; line-height:1.25; }
.sin-step-lbl.on { font-weight:700; }
.sin-step-conn { flex:1; border-top:2px dashed #e2e8f0; margin-top:13px; min-width:8px; }
.sin-step-conn.done { border-top-style:solid; border-top-color:#cbd5e1; }
.sin-stepper-salida { display:flex; align-items:center; gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid #f1f5f9; flex-wrap:wrap; }
.sin-salida-lbl { font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:0.5px; }
.sin-salida-chip { font-size:12px; font-weight:600; padding:4px 12px; border-radius:999px; border:1px solid #e2e8f0; background:#fff; color:#b91c1c; cursor:pointer; }
button.sin-salida-chip:hover { border-color:#fecaca; background:#fef2f2; }
.sin-salida-chip.on { background:#fee2e2; border-color:#fecaca; color:#991b1b; }
.sin-step-hint-row { margin-top:14px; }
.sin-step-hint { font-size:12px; color:#94a3b8; }
.sin-rech-aviso { font-size:12.5px; font-weight:600; color:#b91c1c; }
.sin-stepper-rech { opacity:.5; }
/* Botones del header de la ficha. */
.sin-acc-abrir, .sin-acc-cerrar { background:#f1f5f9; color:#64748b; }
.sin-acc-abrir.on { background:#dcfce7; color:#166534; box-shadow:inset 0 0 0 1px #86efac; }
.sin-acc-cerrar.on { background:#e2e8f0; color:#334155; box-shadow:inset 0 0 0 1px #cbd5e1; }
.sin-acc-rech { background:#fff; color:#b91c1c; border-color:#fecaca; }
.sin-acc-rech.on { background:#fee2e2; color:#991b1b; }
.sin-acc-btn:disabled { opacity:.5; cursor:default; box-shadow:none; filter:none; }
/* Coberturas afectadas (subsiniestros): una fila por sub, ancho completo. NO es la grilla de
   .profile-fields (4 columnas) — cada sub necesita la fila entera para su chip de estado. */
.sin-subs { display:flex; flex-direction:column; gap:8px; }
.sin-sub-row { gap:11px; }
.sin-sub-nro { font-size:13px; font-weight:600; }
/* ⚠ TRES estados de chip, no dos: el base es "no sabemos si cerró" (panel guardado antes de que
   el sync mandara `cierra`) y va NEUTRO en contorno. Si el default fuera el ámbar de "abierto",
   un sub cerrado de un ticket viejo se leería como en gestión — el error que la card viene a
   evitar, servido al revés. */
.sin-sub-chip { flex-shrink:0; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:600; background:#fff; color:#64748b; border:1px solid #e2e8f0; white-space:nowrap; }
.sin-sub-chip.sin-sub-abierto { background:#fef3c7; color:#92400e; border-color:#fef3c7; }
.sin-sub-chip.sin-sub-cerrado { background:#f1f5f9; color:#475569; border-color:#f1f5f9; }
@media (max-width:700px){
  .sin-sub-row { height:auto; flex-wrap:wrap; }
  .sin-sub-chip { margin-left:47px; }
}
/* Galería de fotos/adjuntos: miniaturas cuadradas + lightbox. */
.sin-fotos { display:flex; flex-wrap:wrap; gap:10px; }
.sin-foto { width:96px; height:96px; border-radius:10px; overflow:hidden; border:1px solid #e2e8f0; background:#f8fafc; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .08s, box-shadow .08s; }
.sin-foto:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(15,23,42,.12); }
.sin-foto img { width:100%; height:100%; object-fit:cover; display:block; }
.sin-foto-file { flex-direction:column; gap:4px; text-decoration:none; color:#475569; font-size:10px; padding:6px; text-align:center; }
.sin-foto-file .sin-foto-ico { font-size:24px; }
.sin-foto-file .sin-foto-name { width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sol-msg-adj-cap { margin-top:4px; font-size:12px; color:#64748b; font-style:italic; }
/* ⬇ por archivo: flota sobre la esquina de la miniatura. Aparece siempre (no sólo en hover):
   en touch no hay hover y el pedido (🚩 vigier #60) es justamente poder bajar los adjuntos. */
.sin-foto-wrap { position:relative; display:inline-flex; }
.sin-foto-dl { position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:6px; background:rgba(15,23,42,.62); color:#fff; font-size:12px; line-height:22px; text-align:center; text-decoration:none; }
.sin-foto-dl:hover { background:rgba(15,23,42,.85); text-decoration:none; }
.sin-lb-dl { position:absolute; top:18px; right:70px; background:rgba(255,255,255,.15); color:#fff; width:40px; height:40px; border-radius:50%; font-size:17px; line-height:40px; text-align:center; text-decoration:none; }
.sin-lb-dl:hover { background:rgba(255,255,255,.32); text-decoration:none; }
.sin-lb { position:fixed; inset:0; background:rgba(15,23,42,.92); z-index:9999; display:flex; align-items:center; justify-content:center; }
.sin-lb-stage { max-width:92vw; max-height:92vh; display:flex; flex-direction:column; align-items:center; gap:10px; }
.sin-lb-stage img { max-width:92vw; max-height:84vh; object-fit:contain; border-radius:8px; box-shadow:0 10px 40px rgba(0,0,0,.5); }
.sin-lb-cap { color:#e2e8f0; font-size:13px; text-align:center; max-width:92vw; }
.sin-lb-close { position:absolute; top:18px; right:22px; background:rgba(255,255,255,.15); color:#fff; border:none; width:40px; height:40px; border-radius:50%; font-size:18px; cursor:pointer; }
.sin-lb-nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.15); color:#fff; border:none; width:48px; height:48px; border-radius:50%; font-size:30px; line-height:1; cursor:pointer; }
.sin-lb-prev { left:20px; } .sin-lb-next { right:20px; }
.sin-lb-close:hover, .sin-lb-nav:hover { background:rgba(255,255,255,.32); }
/* Editor inline de los campos de Datos. */
.sin-ei { display:flex; flex-direction:column; gap:8px; }
.sin-ei-inp { width:100%; max-width:440px; }
.sin-ei-btns { display:flex; gap:8px; margin-top:2px; }
.sin-ei-group .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
/* Datos del siniestro: boxes editables (estilo profile-field de Póliza) + bloques largos. */
/* El valor se puede seleccionar/copiar libremente: SOLO el lápiz abre el editor. */
.sin-pf-editable .profile-field-value, .sin-pf-editable .sin-detalle-value { user-select:text; }
.sin-pf-editable:hover { background:#f1f5f9; border-color:#e2e8f0; }
.sin-pf-pen { flex-shrink:0; align-self:center; background:none; border:none; cursor:pointer; color:#cbd5e1; font-size:12px; line-height:1; padding:2px 4px; margin-left:auto; border-radius:var(--r-sm); opacity:.5; transition:opacity var(--t-fast), color var(--t-fast), background var(--t-fast); }
.sin-pf-editable:hover .sin-pf-pen { opacity:1; color:#475569; }
.sin-pf-pen:hover { color:var(--c-primary); background:var(--c-accent-bg); }
.sin-pf-empty { color:#94a3b8; }
.sin-pf-editrow { grid-column:1/-1; background:#fafbfc; border:1px solid #e2e8f0; border-radius:8px; padding:13px 14px; }
.sin-detalles { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
/* Grilla de campos de la ficha de siniestro: 4 columnas (vs las 3 genéricas). */
.profile-fields.sin-fields { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.sin-fields .sin-col3 { grid-column:span 3; }
@media (max-width:1100px){ .profile-fields.sin-fields { grid-template-columns:repeat(2, minmax(0, 1fr)); } .sin-fields .sin-col3 { grid-column:1 / -1; } }
@media (max-width:700px){ .profile-fields.sin-fields { grid-template-columns:1fr; } .sin-fields .sin-col3 { grid-column:1 / -1; } }
.sin-detalle { display:flex; align-items:flex-start; gap:11px; padding:11px 12px; background:#fafbfc; border:1px solid #f1f5f9; border-radius:8px; transition:background .12s, border-color .12s; }
.sin-detalle .profile-field-icon { margin-top:1px; }
.sin-detalle-value { font-size:13px; color:#0f172a; font-weight:500; line-height:1.45; white-space:normal; word-break:break-word; }
.sin-detalle-edit { display:block; }
/* Caja que ocupa 2 columnas de la grilla de ficha (ej. domicilio, texto largo). */
.sin-fields .sin-col2 { grid-column:span 2; }
@media (max-width:1100px){ .sin-fields .sin-col2 { grid-column:1 / -1; } }
/* Caja que envuelve su valor a varias líneas y crece (no trunca con "…"). */
.profile-field.pf-wrap { height:auto; min-height:64px; }
.profile-field.pf-wrap .profile-field-content { overflow:visible; }
.profile-field.pf-wrap .profile-field-value { white-space:normal; }
/* Ficha de cotización: NINGUNA caja trunca — cada valor se ve completo (copia fiel del form). */
.sol-cot-card .profile-field { height:auto; min-height:64px; }
.sol-cot-card .profile-field-content { overflow:visible; }
.sol-cot-card .profile-field-value { white-space:normal; word-break:break-word; }
/* Botón al pie de la ficha (Solicitar cotizaciones a las compañías), alineado a la derecha.
   Puede llevar un hint a la izquierda (por qué el botón está deshabilitado) → gap + wrap. */
.sol-d-footer { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:12px; margin-top:18px; }
/* ⚠ El pie de la ficha CONCATENA varios `.sol-d-footer` —uno por feature: PDF del pedido,
   recomendación por IA, pedido de endoso, orden de emisión— y cada uno es un <div> propio. Como
   bloques se apilaban en COLUMNA, y con tres botones eso es una escalera contra el borde derecho
   (Martín, 18-ago-2026: "los 3 botones de abajo q esten en fila no en columna"). El contenedor
   estable pasa a ser la fila; los hijos quedan como items y pierden su margen propio. */
#sol-d-footer-orden { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:12px; margin-top:18px; }
#sol-d-footer-orden .sol-d-footer { margin-top:0; }
/* .btn-cotizar no tenía estado deshabilitado y el :hover lo levantaba igual. */
.btn-cotizar:disabled { background:#cbd5e1; color:#f8fafc; box-shadow:none; cursor:not-allowed; }
.btn-cotizar:disabled:hover { transform:none; box-shadow:none; }
/* Ficha de solicitud: header con avatar de tipo (estilo ficha del resto de la app). */
.sol-d-header { margin:6px 0 18px; }
.sol-d-header .detail-avatar { font-size:24px; }
.sol-d-sub { font-size:13px; color:#64748b; margin-top:5px; }
.sol-d-estado { padding-top:4px; }
/* Barra de acciones de estado (solo organización), como card propia. */
.sol-d-acciones-card { padding:14px 18px; margin-bottom:18px; }
.sol-d-acciones-lbl { font-size:10.5px; color:#64748b; text-transform:uppercase; letter-spacing:0.6px; font-weight:700; margin-bottom:10px; }
.sol-d-acciones { display:flex; gap:5px; flex-wrap:nowrap; align-items:stretch; }
/* Botones de estado: TODOS en una sola fila (comprimidos, reparto equitativo, texto largo envuelve). */
.sol-estado-btn { flex:1 1 0; min-width:0; max-width:none; display:inline-flex; align-items:center; justify-content:center; text-align:center; gap:4px; padding:7px 5px; border:1px solid transparent; border-radius:7px; font-weight:600; font-size:11px; line-height:1.15; cursor:pointer; transition:filter .12s, box-shadow .12s, transform .08s; }
.sol-estado-btn:hover { filter:brightness(0.95); box-shadow:0 2px 6px rgba(15,42,74,.12); }
.sol-estado-btn:active { transform:translateY(1px); }
/* Estado ACTUAL dentro del set fijo: resaltado, sin cursor, no se atenúa por disabled. */
.sol-estado-btn.sol-estado-actual { cursor:default; font-weight:800; opacity:1; outline:2px solid #0f2a4a; outline-offset:1px; box-shadow:0 1px 3px rgba(15,42,74,.18); }
.sol-estado-btn.sol-estado-actual:hover { filter:none; box-shadow:0 1px 3px rgba(15,42,74,.18); }
.sol-estado-btn.sol-estado-actual:active { transform:none; }
.sol-estado-check { font-weight:900; }
/* Solo lectura (no-organizador): los estados no-actuales se ven inertes y atenuados. */
.sol-estado-btn.sol-estado-ro { cursor:default; opacity:.5; }
.sol-estado-btn.sol-estado-ro:hover { filter:none; box-shadow:none; }
.sol-estado-btn.sol-estado-ro:active { transform:none; }
/* Cambiar TIPO (solo org): fila de botones-chip con el color de cada tipo. El actual, resaltado. */
.sol-d-tipo-card { margin-top:-8px; }
.sol-d-tipos { display:flex; gap:6px; flex-wrap:wrap; }
.sol-tipo-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid transparent; border-radius:999px; font-weight:600; font-size:12px; line-height:1.1; cursor:pointer; background:var(--tipo-bg,#f1f5f9); color:var(--tipo-col,#475569); transition:filter .12s, box-shadow .12s, transform .08s; }
.sol-tipo-btn:hover { filter:brightness(0.96); box-shadow:0 2px 6px rgba(15,42,74,.12); }
.sol-tipo-btn:active { transform:translateY(1px); }
.sol-tipo-btn-ico { font-size:12px; }
.sol-tipo-btn.sol-tipo-actual { cursor:default; font-weight:800; outline:2px solid #0f2a4a; outline-offset:1px; box-shadow:0 1px 3px rgba(15,42,74,.18); }
.sol-tipo-btn.sol-tipo-actual:hover { filter:none; box-shadow:0 1px 3px rgba(15,42,74,.18); }
.sol-tipo-btn.sol-tipo-actual:active { transform:none; }
/* Eliminar: relleno gris, va siempre al final. */
.sol-eliminar { background:#f1f5f9; color:#475569; }
/* Botón "Rechazar" del modal: rojo sólido (acción destructiva). */
.btn-cotizar.sol-cancelar { background:#dc2626; box-shadow:0 2px 8px rgba(220,38,38,.25); }
.btn-cotizar.sol-cancelar:hover { box-shadow:0 4px 12px rgba(220,38,38,.35); }
/* Cards de datos + conversación: lado a lado en pantallas anchas. */
/* ⚠ 420 y no 360: con la banda de identificadores adentro (dos tiles de números lado a lado)
   360 dejaba 320 útiles y todo caía apilado — la card quedaba angosta y larguísima. */
.sol-d-cols { display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:18px; align-items:start; }
@media (max-width:1100px){ .sol-d-cols { grid-template-columns:1fr; } }
.sol-d-datos { align-self:start; }
/* En 2 columnas la card de datos angosta → un solo campo por fila. */
.sol-d-datos-grid { grid-template-columns:1fr; }
@media (max-width:1100px){ .sol-d-datos-grid { grid-template-columns:1fr 1fr; } }
/* Campos de la ficha (no-cotización): filas ícono + label + valor. Más ricas que el .field pelado. */
/* Banda de identificadores de la ficha de solicitud (🚩 bds #59): los dos números que se
   tipean en el portal de la compañía —póliza y referencia (Sancor) / N° anterior (AIS)—
   arriba de todo. Si la compañía no tiene doble numeración, queda el tile de póliza solo y
   el grid de 2 lo estira: por eso `auto-fit`, y no dos columnas fijas con un hueco. */
.sol-idband { display:grid; grid-template-columns:repeat(auto-fit,minmax(172px,1fr)); gap:8px; margin-bottom:12px; }
.sol-id { border-radius:8px; padding:11px 13px; min-width:0; }
.sol-id-pol { background:#eff6ff; }
.sol-id-ref { background:#ecfeff; }
.sol-id-k { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.sol-id-pol .sol-id-k { color:#1d4ed8; }
.sol-id-ref .sol-id-k { color:#0e7490; }
.sol-id-v { font-size:18px; font-weight:700; margin-top:2px; display:flex; align-items:center;
            gap:7px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.sol-id-pol .sol-id-v, .sol-id-pol .sol-id-v a { color:#1e3a8a; text-decoration:none; }
.sol-id-ref .sol-id-v { color:#0f4c56; }
.sol-id-pol .sol-id-v a:hover { text-decoration:underline; }
.sol-id-h { font-size:10.5px; margin-top:2px; }
.sol-id-pol .sol-id-h { color:#3b82f6; }
.sol-id-ref .sol-id-h { color:#0e7490; }
/* Tile de RAMO (🚩 bds #177): tercer identificador, sólo en las compañías que buscan la póliza
   por ramo + número. Ámbar para que se distinga de un vistazo del azul (póliza) y el celeste
   (referencia) — son tres números parecidos y el color es lo que los separa. */
.sol-id-ramo { background:#fff7ed; }
.sol-id-ramo .sol-id-k { color:#c2410c; }
.sol-id-ramo .sol-id-v { color:#7c2d12; }
.sol-id-ramo .sol-id-h { color:#ea580c; }
.sol-id-copy { border:1px solid rgba(15,23,42,.14); background:rgba(255,255,255,.7); border-radius:5px;
               font-size:11px; line-height:1; padding:3px 6px; cursor:pointer; color:#475569; flex-shrink:0; }
.sol-id-copy:hover { background:#fff; border-color:rgba(15,23,42,.28); }

/* `auto-fit`: la card de datos es angosta (420px), así que en desktop entra UNA columna y en
   pantalla ancha o apilada entran dos, sin media query. Los tiles nunca se parten. */
.sol-d-flds { display:grid; grid-template-columns:repeat(auto-fit,minmax(172px,1fr)); gap:8px; }
/* Tiles de la ficha de solicitud: mismo lenguaje que .profile-field (ficha de asegurado) —
   fondo propio, borde hairline y el icono en un cuadro de color según el campo. Antes iban
   sueltos en una sola columna con el icono siempre gris, y al lado de la banda de
   identificadores quedaban como texto plano (Martín, 30-jul-2026). */
.sol-fld { display:flex; align-items:flex-start; gap:11px; padding:10px 11px; border-radius:8px;
           background:#fafbfc; border:1px solid #f1f5f9; transition:all .12s; }
.sol-fld:hover { background:#fff; border-color:#e2e8f0; }
.sol-fld.full { grid-column:1/-1; }
.sol-fld-ico { flex-shrink:0; width:32px; height:32px; border-radius:8px; background:#f1f5f9; color:#475569;
               display:inline-flex; align-items:center; justify-content:center; font-size:15px; margin-top:1px; }
.sol-fld-ico.blue { background:#dbeafe; }
.sol-fld-ico.purple { background:#ede9fe; }
.sol-fld-ico.amber { background:#fef3c7; }
.sol-fld-ico.green { background:#dcfce7; }
.sol-fld-ico.cyan { background:#cffafe; }
.sol-fld-ico.pink { background:#fce7f3; }
.sol-fld-ico.red { background:#fee2e2; }
.sol-fld-body { min-width:0; flex:1; }
/* ⚠ Tipografía IDÉNTICA a .profile-field (la ficha de asegurado): 10px/600 el label y
   13px/500 el valor. Acá estaba en 10.5/700 y 14/600 — medio punto y un peso más pesado en
   cada línea, que es lo que la hacía leerse como de otra app (Martín, 30-jul-2026). */
.sol-fld-label { font-size:10px; color:#64748b; text-transform:uppercase; letter-spacing:0.5px; font-weight:600; line-height:1; margin-bottom:4px; }
.sol-fld-value { font-size:13px; color:#0f172a; font-weight:500; line-height:1.3; word-break:break-word; }
.sol-fld-value.emph { font-size:14px; font-weight:700; }
.sol-fld-value a { color:var(--c-primary); text-decoration:none; }
.sol-fld-value a:hover { text-decoration:underline; }
.sol-fld-doc { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; background:#eef2f7; color:#475569; font-size:11.5px; font-weight:500; }
.sol-fld-vacio { color:#94a3b8; font-style:italic; font-weight:500; }
.sol-fld-edit { margin-left:6px; color:var(--c-primary); text-decoration:none; font-weight:700; }
/* Selector inline dentro de un campo de la ficha (clasificación del alta de compañía).
   Hereda el 13px/500 del valor para no leerse como un control de otra app — el mismo motivo
   por el que .sol-fld-value bajó de 14/600 a 13/500 (Martín, 30-jul-2026). */
.sol-fld-sel { font-size:13px; font-weight:500; color:#0f172a; font-family:inherit; padding:2px 22px 2px 6px; border:1px solid #e2e8f0; border-radius:6px; background:#fff; cursor:pointer; }
.sol-fld-sel:hover { border-color:#cbd5e1; }
.sol-fld-hint { color:#64748b; font-weight:500; font-size:12px; }
/* Participantes sumados a mano a una solicitud (🚩 bds #143). Chips + buscador en la MISMA fila,
   así que el valor de la fila envuelve. El chip usa el gris de los tiles de la ficha, no un color
   propio: no es un estado, es gente. */
.sol-part-chip { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
  color:#0f172a; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:999px;
  padding:2px 10px; margin:0 6px 4px 0; white-space:nowrap; }
.sol-part-chip .sol-part-x { color:#94a3b8; text-decoration:none; font-size:15px; line-height:1; font-weight:700; }
.sol-part-chip .sol-part-x:hover { color:#dc2626; }
.sol-part-add { display:inline-block; }
/* El buscador acompaña a los chips: mismo alto y sin el chevron del <select>. */
.sol-part-add .sol-fld-sel { padding:2px 8px; min-width:170px; cursor:text; }
/* Motivo de rechazo: fila de alerta. */
.sol-fld-danger { background:#fef2f2; }
.sol-fld-danger:hover { background:#fee2e2; }
.sol-fld-danger .sol-fld-ico { background:#fee2e2; }
.sol-fld-danger .sol-fld-value { color:#991b1b; }
/* Subtítulo del modal de cambio de tipo. */
.sol-modal-sub { font-size:12.5px; color:#64748b; margin:-4px 0 12px; line-height:1.4; }
/* Cotización: vista apilada (datos full width en secciones tipo formulario, luego el hilo). */
.sol-d-stack { display:flex; flex-direction:column; gap:18px; }
.sol-d-stack .sol-d-datos-grid { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.sol-d-seccion + .sol-d-seccion { margin-top:16px; }
.sol-d-seccion .form-section-subtitle { margin-bottom:10px; }
/* Hilo de conversación: avatar + burbuja. */
.sol-timeline { display:flex; flex-direction:column; gap:14px; margin-bottom:18px; }
.sol-msg { display:flex; gap:11px; align-items:flex-start; }
.sol-msg .name-avatar { width:34px; height:34px; font-size:12px; }
.sol-msg-main { flex:1; min-width:0; }
.sol-msg-head { display:flex; align-items:baseline; gap:8px; margin-bottom:4px; }
.sol-msg-head strong { font-size:13px; color:#0f172a; font-weight:700; }
.sol-msg-head span { font-size:11.5px; color:#94a3b8; }
.sol-msg-bubble { background:#f8fafc; border:1px solid #eef2f7; border-radius:4px 10px 10px 10px; padding:9px 13px; font-size:13.5px; color:#1e293b; line-height:1.45; }
.sol-msg-meta { font-size:12px; color:#64748b; margin-bottom:4px; }
.sol-msg-meta:only-child { margin-bottom:0; }
/* Cambio de estado sin comentario: línea de evento (activity log). */
.sol-ev { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:4px 2px 4px 45px; font-size:12.5px; color:#64748b; }
.sol-ev-tx strong { color:#475569; font-weight:600; }
.sol-ev-fch { color:#cbd5e1; font-size:11.5px; }
.sol-adj { display:inline-block; margin-top:6px; margin-right:10px; font-size:13px; color:var(--c-primary-strong); text-decoration:none; }
.sol-adj:hover { text-decoration:underline; }
/* "Bajar todo": mismo renglón que los adjuntos pero con peso de acción, para que no se pierda
   entre 30 links iguales (que es exactamente el caso en el que hace falta). */
.sol-adj-todos { padding:3px 10px; border-radius:999px; background:var(--c-primary-strong); color:#fff; font-weight:600; }
.sol-adj-todos:hover { text-decoration:none; filter:brightness(1.1); }
/* ✕ para quitar un archivo subido por error (🚩 bds #302). Atenuado hasta que el mouse pasa por
   el adjunto: borra de verdad, así que no puede competir visualmente con el link que se usa todos
   los días. El margen del link va al wrapper para que el ✕ no quede pegado al siguiente adjunto. */
.sol-adj-wrap { display:inline-block; margin-right:10px; white-space:nowrap; }
.sol-adj-wrap .sol-adj { margin-right:2px; }
.sol-adj-quitar { border:0; background:none; padding:0 3px; cursor:pointer; font-size:12px; line-height:1;
  color:#cbd5e1; opacity:0; transition:opacity .12s, color .12s; }
.sol-adj-wrap:hover .sol-adj-quitar, .sol-adj-quitar:focus { opacity:1; }
.sol-adj-quitar:hover { color:var(--c-danger, #dc2626); }
.sol-comentar { background:#fafbfc; border:1px solid #eef2f7; border-radius:10px; padding:12px; margin-top:4px; }
.sol-comentar .sol-textarea { border-color:#e2e8f0; }
.sol-comentar-acciones { display:flex; justify-content:space-between; align-items:center; margin-top:10px; gap:10px; }
/* Adjuntos acumulables (chips de archivos seleccionados, ver initAdjuntos en helpers.js) */
.adj-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.adj-list:empty { margin:0; }
.adj-chip { display:inline-flex; align-items:center; gap:6px; max-width:240px; padding:4px 8px; border:1px solid #c7d2fe; border-radius:8px; background:#eef2ff; color:#3730a3; font-size:12px; }
.adj-chip-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.adj-chip-size { flex-shrink:0; color:#6366f1; font-size:11px; }
.adj-chip-x { flex-shrink:0; padding:0 0 0 2px; border:none; background:transparent; color:#6366f1; font-size:12px; line-height:1; cursor:pointer; }
.adj-chip-x:hover { color:#dc2626; }
.sol-label { display:block; font-size:13px; color:#475569; margin-bottom:10px; }
.sol-label .sol-select, .sol-label .sol-input, .sol-label .sol-textarea { display:block; width:100%; box-sizing:border-box; margin-top:4px; }
.sol-modal { max-width:520px; }
/* Recomendación por IA (js/cotizacion-recomendacion.js): el .sol-modal base mide 420px, que
   alcanza para pedir un motivo y no para tres tarjetas con fundamento editable. `max-width:none`
   pisa el 520px de arriba, igual que hace el modal del alta de póliza por PDF. */
.recom-modal { width:min(680px,94vw); max-width:none; }
/* ⚠⚠ Este es el PRIMER modal de la app con CUATRO botones (Cerrar · Regenerar · Guardar ·
   Publicar); los otros ocho tienen dos. `.sol-modal-acc` es `flex` + `justify-content:flex-end`
   SIN `flex-wrap`, así que a 390px de ancho los cuatro se apretaban en una sola fila y los dos
   primeros quedaban en x NEGATIVO — fuera de la pantalla y sin scroll que los alcance
   (`scrollWidth == clientWidth`): "Cerrar" era literalmente inalcanzable en el celular.
   El wrap va acá y NO en `.sol-modal-acc` global, para no mover los otros ocho modales.
   Lo mide `scripts/verify-recomendacion-modal.mjs` a 390×844 y a 1280×800. */
.recom-modal .sol-modal-acc { flex-wrap:wrap; }
.recom-modal .recom-card .form-input { width:100%; box-sizing:border-box; margin-bottom:6px; }
.recom-modal .recom-card .form-field-label { font-size:11.5px; color:#475569; font-weight:600; margin-bottom:2px; }
.recom-modal .recom-datos { line-height:1.5; margin-top:4px; }
/* Chips de etiqueta: MUEVEN la etiqueta entre tarjetas (nunca la duplican), así que se leen como
   un grupo de opciones y no como tres checkboxes sueltos. El estado va en `aria-pressed`, que es
   además de donde lo lee `_recomLeerDelDom` — un solo lugar para el estado, no clase + atributo. */
.recom-etqs { display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 8px; }
.recom-etq { padding:4px 10px; border:1px solid #dbe3ec; border-radius:999px; background:#fff; color:#64748b; font-size:12px; font-weight:600; cursor:pointer; transition:background .12s,border-color .12s,color .12s; }
.recom-etq:hover { border-color:#c7d2fe; color:#3730a3; }
.recom-etq[aria-pressed="true"] { background:#eef2ff; border-color:#6366f1; color:#3730a3; }
.recom-sin-etq { margin:0 0 8px; font-size:12px; color:#b45309; background:#fffbeb; border:1px solid #fde68a; border-radius:8px; padding:5px 9px; }
.sol-modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:12px; }
.notif-wrapper { position:relative; }
.notif-btn { position:relative; }
.notif-badge, .nav-badge { background:#ef4444; color:#fff; font-size:10px; font-weight:700; border-radius:999px; padding:1px 6px; min-width:16px; text-align:center; }
.notif-badge { position:absolute; top:-4px; right:-4px; }
.nav-badge { margin-left:6px; }
.notif-dropdown { position:absolute; right:0; top:42px; width:330px; max-height:440px; overflow-y:auto; background:#fff; border:1px solid #e2e8f0; border-radius:12px; box-shadow:0 12px 32px rgba(15,42,74,.18); z-index:100; }
.notif-head { display:flex; align-items:center; gap:8px; padding:11px 14px; font-weight:700; font-size:13px; color:#0f2a4a; border-bottom:1px solid #eef2f7; position:sticky; top:0; background:#fff; border-radius:12px 12px 0 0; }
.notif-head-n { background:#e0edff; color:var(--c-primary-strong); font-size:11px; font-weight:700; border-radius:999px; padding:1px 8px; }
.notif-item { display:flex; align-items:center; gap:11px; padding:11px 14px; cursor:pointer; border-bottom:1px solid #f4f7fa; transition:background .12s; }
.notif-item:last-child { border-bottom:none; }
.notif-item:hover { background:#f6f9fc; }
.notif-ico { flex:0 0 auto; width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:17px; line-height:1; }
.notif-ico.nf-auto { background:#e8f0ff; }
.notif-ico.nf-hogar { background:#e6f7ee; }
.notif-ico.nf-medicos { background:#fdeef7; }
.notif-ico.nf-siniestro { background:#fdeaea; }
.notif-ico.nf-evento { background:#f0ecfd; }
.notif-ico.nf-solicitud { background:#fff4e0; }
.notif-ico.nf-participante { background:#e1f5ee; }   /* 🚩 bds #312: "te sumaron" — el único verde de la campanita */
.notif-ico.nf-otro { background:#eef2f7; }
.notif-ico.nf-reporte { background:#fdf0e0; }
.reporte-respuesta-modal { max-width:520px; }
.reporte-respuesta-modal .rr-bloque { margin:14px 0; }
.reporte-respuesta-modal .rr-lbl { font-size:12px; color:var(--c-text-3); margin-bottom:4px; }
.reporte-respuesta-modal .rr-txt { font-size:14px; line-height:1.5; white-space:pre-wrap; }
.reporte-respuesta-modal .rr-cita { color:var(--c-text-2); border-left:3px solid var(--c-border); padding-left:10px; }
.notif-body { flex:1 1 auto; min-width:0; }
.notif-item-t { font-weight:600; font-size:13px; color:#1e293b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* ⚠ DOS líneas, no una. Con `nowrap` el aviso de rechazos cortaba en "Tenés 12 cuotas
   rechazad…" y se comía el MONTO, que es lo único que hace accionable el mensaje. El clamp
   deja respirar los textos largos sin romper las filas de una línea. */
.notif-item-m { font-size:12px; color:#94a3b8; margin-top:2px; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.notif-time { flex:0 0 auto; align-self:flex-start; font-size:11px; color:#b4c0cf; white-space:nowrap; padding-top:2px; }
.notif-item.notif-empty { display:block; }

/* Acuse explícito (✓) del correo ✉. Es la ÚNICA forma de apagar un aviso, así que tiene que
   verse siempre — nada de aparecer sólo en :hover: en touch no hay hover y el botón no
   existiría. Discreto en reposo, con color al pasarle por encima. */
.notif-ack { flex:0 0 auto; align-self:center; width:26px; height:26px; border:1px solid #e3eaf2;
  border-radius:50%; background:#fff; color:#b4c0cf; font-size:13px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .12s; }
.notif-ack:hover { border-color:var(--c-primary-strong); color:var(--c-primary-strong); background:#eff6ff; }
.notif-pie { padding:9px 14px; text-align:center; font-size:12px; font-weight:600;
  color:var(--c-primary-strong); cursor:pointer; border-top:1px solid #eef2f7; background:#fbfdff;
  border-radius:0 0 12px 12px; position:sticky; bottom:0; }
.notif-pie:hover { background:#eff6ff; }
.notif-pie .notif-pie-link:hover { text-decoration:underline; }
/* Historial "Ver anteriores" (🚩 bds #230): las leídas van atenuadas y sin el ✓ del acuse. */
.notif-sec { padding:6px 14px; font-size:11px; font-weight:700; color:#94a3b8;
  text-transform:uppercase; letter-spacing:.04em; background:#f8fafc; border-top:1px solid #eef2f7; }
.notif-item.notif-item-leida { opacity:.62; }
.notif-item.notif-item-leida:hover { opacity:1; }

/* El panel de Novedades contiene hasta 10 (cap en el server): se ven ~5 y el resto se
   ve scrolleando. Alto ≈ 5 ítems; capado al viewport en pantallas bajas. */
.notif-dropdown.anuncios-dropdown { max-height:min(690px, calc(100vh - 52px)); }
.anuncio-item { padding:11px 15px; border-bottom:1px solid #f4f7fa; position:relative; }
.anuncio-item:last-child { border-bottom:none; }
.anuncio-item.no-leido { background:#eff6ff; }
.anuncio-item.no-leido::before { content:''; position:absolute; left:6px; top:16px; width:6px; height:6px; border-radius:50%; background:#b91c1c; }
.anuncio-meta { display:flex; align-items:center; gap:7px; margin:0 0 3px 8px; }
.anuncio-nuevo { font-size:10.5px; font-weight:700; color:#1e3a8a; background:#dbeafe; padding:1px 7px; border-radius:999px; }
.anuncio-fecha { font-size:10.5px; color:#94a3b8; }
.anuncio-t { font-size:13px; font-weight:600; color:#0f172a; margin:0 0 2px 8px; }
.anuncio-b { font-size:12px; color:#475569; line-height:1.5; margin-left:8px; }