*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }

  /* ===== Design tokens (Data-Dense Dashboard · identidad corporativa azul) ===== */
  :root{
    /* Paleta. ⚠ Los azules de marca se consumen SOLO vía var() (migración 13-jul-2026):
       el branding por tenant (js/bootstrap.js applyTenantBrand) los pisa con el
       colorPrimario de config/tenants/<id>.json + tonos derivados. Sherpa = estos defaults. */
    --c-primary:#1e40af; --c-primary-700:#1e3a8a; --c-secondary:#3b82f6;
    --c-primary-strong:#1d4ed8; --c-secondary-strong:#2563eb;
    --c-primary-rgb:30,64,175; --c-primary-700-rgb:30,58,138; --c-secondary-rgb:59,130,246;
    /* Azul FIJO de los badges/chips de ESTADO (Renovación, Creada, En gestión, Denunciado,
       "Vence" normal, etc.). NO usa --c-primary a propósito: el branding por tenant pisa
       --c-primary y los estados deben verse IGUALES en los 3 tenants (Martín, 21-jul-2026).
       Los demás estados (rojo/amarillo/verde/violeta) ya son hex fijos. */
    --c-estado-azul:#1e40af;
    /* Chrome oscuro (topbar/sidebar/login/boot/loaders). Familia propia, NO tocar
       #0f172a (ese es texto). El branding por tenant los deriva del colorPrimario. */
    --chrome-1:#0a1628; --chrome-2:#15294a; --chrome-3:#06101e; --chrome-4:#1e3a5f;
    --c-accent:#d97706; --c-accent-bg:#fef3c7;
    --c-bg:#f8fafc; --c-surface:#ffffff;
    --c-border:#e2e8f0; --c-border-soft:#f1f5f9;
    /* ⚠ --c-text-3 pasó de #94a3b8 a #64748b (26-jul-2026): el anterior daba 2,56:1 sobre
       blanco cuando AA pide 4,5:1, y casi siempre se combina con fuentes de 10-12px. Es el
       peor caso por VOLUMEN de la app (92 usos) en un producto de uso diario y dato denso.
       #64748b da 4,76:1 ✔ y ya es el gris que la app usa como "sub" en otros lugares. */
    --c-text:#0f172a; --c-text-2:#475569; --c-text-3:#64748b;
    --c-success:#15803d; --c-success-bg:#dcfce7;
    --c-warn:#92400e;    --c-warn-bg:#fef3c7;
    --c-danger:#b91c1c;  --c-danger-bg:#fee2e2;
    /* Radios */
    --r-sm:7px; --r-md:10px; --r-lg:14px; --r-pill:999px;
    /* Sombras / elevación */
    --sh-xs:0 1px 2px rgba(15,23,42,0.05);
    --sh-sm:0 1px 3px rgba(15,23,42,0.07), 0 1px 2px rgba(15,23,42,0.04);
    --sh-md:0 4px 12px rgba(15,23,42,0.08);
    --sh-lg:0 12px 32px rgba(15,23,42,0.16);
    /* Transiciones */
    --t-fast:.15s ease; --t:.2s ease;
    /* Anillo de foco accesible */
    --ring:0 0 0 3px rgba(var(--c-secondary-rgb),0.35);
  }
  body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; background:var(--c-bg); color:var(--c-text); font-size:14px; line-height:1.45; }

  /* ===== Íconos SVG (js/iconos.js) =====
     Tamaño por CONTEXTO, no por clase de tamaño: el ícono se dimensiona con la fuente del
     contenedor (1em) y toma su color de `currentColor`, así que las píldoras que ya declaran
     `color:` (.kpi-icon, .cot-stat-icon) siguen mandando sin una variante por color.
     `.ico-slot` es el hueco del HTML estático mientras hidratarIconos() no corrió: reserva el
     lugar para que el layout no salte. */
  .ico { width:1em; height:1em; display:block; flex-shrink:0; }
  .ico-slot { display:inline-flex; align-items:center; justify-content:center; width:1em; height:1em; }
  .kpi-icon .ico, .cot-stat-icon .ico { width:1.15em; height:1.15em; }


  /* ===== Avisos in-app (js/avisos.js) — reemplazan a alert() =====
     Abajo y centrados, que es donde ya aparecía el toast de "Generando documento…": el usuario
     de esta app mira la mitad de arriba (grillas y formularios) y un cartel ahí tapa justo el
     dato que se está por corregir. Ancho acotado a 460px porque los mensajes de error traen
     respuestas del backend, que pueden ser largas, y una línea de 1.400px no se lee. */
  .avisos-region { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:99999; display:flex; flex-direction:column; align-items:center; gap:10px; width:min(460px, calc(100vw - 32px)); pointer-events:none; }
  .aviso { pointer-events:auto; width:100%; display:flex; align-items:flex-start; gap:10px; padding:12px 12px 12px 14px; border-radius:var(--r-md); background:var(--c-surface); border:1px solid var(--c-border); border-left:3px solid var(--c-text-3); box-shadow:var(--sh-lg); color:var(--c-text); font-size:13.5px; line-height:1.45; animation:aviso-entra .16s ease-out; }
  /* ⚠ `pre-line`: los mensajes vienen de alert() y muchos separan causa y detalle con \n\n.
     Sin esto los dos párrafos se pegan en un chorizo. */
  .aviso-texto { flex:1; white-space:pre-line; overflow-wrap:anywhere; }
  .aviso-cerrar { flex-shrink:0; background:none; border:none; padding:2px; margin:-2px; color:var(--c-text-3); cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:var(--r-sm); }
  .aviso-cerrar:hover { color:var(--c-text); background:var(--c-border-soft); }
  .aviso-cerrar .ico { width:14px; height:14px; }
  .aviso-error { border-left-color:var(--c-danger); }
  .aviso-ok { border-left-color:var(--c-success); }
  .aviso-info { border-left-color:var(--c-secondary); }
  /* El de PROGRESO no se va solo y no reporta un desenlace: va en el azul del chrome, sin el
     borde de color que en los otros significa "esto ya pasó". */
  .aviso-progreso { background:var(--chrome-1); border-color:var(--chrome-2); border-left-color:var(--c-secondary); color:#fff; }
  .aviso-progreso .aviso-cerrar { color:rgba(255,255,255,.65); }
  .aviso-progreso .aviso-cerrar:hover { color:#fff; background:rgba(255,255,255,.12); }
  @keyframes aviso-entra { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
  @media (max-width: 768px){
    /* Arriba en el celular: abajo está la barra de pestañas y el teclado. */
    .avisos-region { bottom:auto; top:calc(env(safe-area-inset-top, 0px) + 64px); }
  }

  /* ===== Cifras alineadas (tabular-nums) =====
     La fuente del sistema usa dígitos de ANCHO VARIABLE: el 1 ocupa menos que el 8, así que en una
     columna de importes cada fila arranca en un lugar distinto y comparar dos cifras exige leerlas
     enteras en vez de mirar el largo. `tabular-nums` le pide a la MISMA fuente su juego de dígitos
     de ancho fijo — no cambia tipografía, ni tamaño, ni color, ni el layout: sólo hace que las
     columnas de números queden a plomo.
     Va sólo donde hay CIFRAS QUE SE COMPARAN (importes, conteos, KPIs, fechas de tabla), no en el
     texto corrido: en una oración los dígitos proporcionales se leen mejor. */
  .kpi-value, .bar-amount-right, .venc-monto, .venc-monto-cuota, .venc-fecha,
  .cot-stat-num, .ind-num, .ind-var, .poliza-card-premio-monto, .cot-actual-monto,
  .camp-premio-monto, .pill-count, .sol-monto-wrap input,
  .endosos-table td.num, .cuotas-table td, table.list-table td.num {
    font-variant-numeric: tabular-nums;
  }

  /* Confirmación in-app (js/avisos.js). Reusa .modal-overlay/.modal de la app: acá sólo va lo
     propio del diálogo — el texto y la botonera. */
  .confirmar-modal { max-width:420px; }
  .confirmar-texto { white-space:pre-line; font-size:14px; line-height:1.5; color:var(--c-text); }
  /* El "detallecito" de un confirmar: qué va a cambiar, línea por línea, con scroll propio para
     que 30 sublímites no empujen los botones fuera de la pantalla. */
  .confirmar-detalle { margin:10px 0 0; padding:8px 10px 8px 26px; max-height:40vh; overflow:auto; font-size:12.5px; line-height:1.45; color:#334155; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; }
  .confirmar-detalle li { margin:2px 0; }
  .confirmar-modal:has(.confirmar-detalle) { max-width:640px; }
  .confirmar-acciones { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
  /* En el celular los botones van a lo ancho, y `column-reverse` deja CANCELAR abajo: es el que
     cae bajo el pulgar, así que un toque de más no dispara la acción destructiva. */
  @media (max-width:768px){
    .confirmar-acciones { flex-direction:column-reverse; }
    .confirmar-acciones button { width:100%; padding:12px; }
  }

  /* Estado vacío de un listado (estadoVacioHTML, js/helpers.js). Sin regla propia, `.sol-empty`
     salía como un renglón de texto suelto en el medio de la nada. */
  .estado-vacio { text-align:center; padding:44px 20px; background:var(--c-surface); border:1px dashed var(--c-border); border-radius:var(--r-md); }
  .estado-vacio .ev-titulo { font-size:15px; font-weight:600; color:var(--c-text); }
  .estado-vacio .ev-texto { font-size:13px; color:var(--c-text-2); margin-top:6px; max-width:460px; margin-left:auto; margin-right:auto; line-height:1.5; }
  .estado-vacio .ev-btn { margin-top:16px; }
  /* ⚠ El vacío POR FILTRO se ve EXACTAMENTE IGUAL que el otro (decisión de Martín, 21-ago-2026):
     lo que cambia entre los dos casos es lo que DICE el cartel y qué hace su botón, no el color.
     Estuvo en ámbar unas horas y se sacó. */

  /* Foco visible y accesible para teclado (no afecta el click con mouse) */
  button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .clickable:focus-visible {
    outline:none; box-shadow:var(--ring); border-radius:var(--r-sm);
  }
  @media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }
  /* +2px de OVERHANG (no 100vh/100vw pelados) + html/body overflow:hidden que lo recorta:
     con escalado/zoom fraccional, WebKit calcula 100vh/100vw ~0,5px MÁS CORTO que el viewport
     real en píxeles (medido: innerHeight 811 → 100vh = 810.984), así que el .app deja la última
     fila/columna device descubierta y asoma el --c-bg (casi blanco) del <body> como una línea
     en los bordes inferior/derecho (muy visible contra el sidebar/topbar oscuros, y la notó el
     banner de impersonación). En Retina en modo ESCALADO (render a 2× y downsample al panel) un
     overhang de 1px se resamplea y no alcanza → 2px, el MISMO valor probado del .boot-overlay
     (inset:-2px, que a Martín le quedó perfecto mientras la web seguía con línea a 1px). El
     overhang tapa esa fila con el propio contenido del .app en vez de perseguir el redondeo. */
  /* 200px de sidebar (era 230, afinado 25-ago-2026): tiene que alcanzar para el ítem más
     largo del menú ("Administración" + ícono + paddings ≈ 165px) y para el logo del topbar,
     cuyo ancho (.logo) va en lockstep con esta columna. */
  .app { display:grid; grid-template-columns:200px 1fr; grid-template-rows:56px 1fr; width:calc(100vw + 2px); height:calc(100vh + 2px); }
  html, body { overflow:hidden; }   /* la página no scrollea (scrollea .content); recorta el overhang del .app */

  /* ===== Top bar ===== */
  .topbar { grid-column:1/-1; background:linear-gradient(90deg,var(--chrome-1) 0%,var(--chrome-2) 100%); color:white; display:flex; align-items:center; padding-right:20px; box-shadow:0 1px 3px rgba(0,0,0,0.15); }
  /* Lockup CENTRADO en la columna de 200px, apenas más chico que el original (~6%: nombre
     16, bajada 7.2, montaña 38). Iterado con Martín el 25-ago-2026 mirando prod: a escala
     15/6.8 quedó "raro", a 17/7.5 centrado "muy grande" — éste es el punto intermedio que
     pidió. Contenido ≈ 38+9+115 = 162px → ~19px de aire por lado (menos en Safari, que
     rinde la bajada más ancha que el headless). */
  .logo { display:flex; align-items:center; justify-content:center; gap:9px; color:white; user-select:none; width:200px; box-sizing:border-box; flex-shrink:0; }
  .logo-mountain { width:38px; height:22px; flex-shrink:0; color:white; }
  .logo-text { display:flex; flex-direction:column; line-height:1; gap:4px; width:max-content; }
  .logo-name { display:flex; justify-content:space-between; width:100%; font-size:16px; font-weight:800; color:white; line-height:1; }
  .logo-tag { font-size:7.2px; font-weight:500; letter-spacing:0.18em; color:rgba(255,255,255,0.72); white-space:nowrap; line-height:1; }
  .topbar-search { flex:1; max-width:480px; margin-right:14px; position:relative; }
  .topbar-search input { width:100%; background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.12); padding:8px 12px 8px 36px; border-radius:7px; color:white; font-size:13px; outline:none; }
  .topbar-search input::placeholder { color:rgba(255,255,255,0.55); }
  .topbar-search input:focus { background:rgba(255,255,255,0.18); border-color:rgba(125,211,252,0.4); }
  .topbar-search { display:flex; align-items:center; }
  .topbar-search input { width:100%; height:36px; box-sizing:border-box; }
  .topbar-search::before { content:''; position:absolute; left:12px; top:50%; margin-top:-7px; width:14px; height:14px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E"); background-size:contain; opacity:0.7; pointer-events:none; z-index:1; }
  .global-search-results { position:absolute; top:calc(100% + 6px); left:0; right:0; background:white; border:1px solid #e2e8f0; border-radius:10px; box-shadow:0 12px 32px rgba(15,23,42,0.18); max-height:480px; overflow-y:auto; z-index:1000; }
  .gsr-section { padding:6px 0; }
  .gsr-section + .gsr-section { border-top:1px solid #f1f5f9; }
  .gsr-section-title { font-size:10.5px; color:#64748b; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; padding:8px 14px 4px 14px; display:flex; align-items:center; gap:6px; }
  .gsr-section-count { background:#f1f5f9; color:#475569; padding:1px 7px; border-radius:10px; font-size:10px; font-weight:700; }
  .gsr-item { display:flex; align-items:center; gap:11px; padding:9px 14px; cursor:pointer; transition:background 0.08s; }
  .gsr-item:hover, .gsr-item.gsr-active { background:#f1f5f9; }
  .gsr-icon { width:32px; height:32px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
  .gsr-icon.aseg { background:#dbeafe; color:var(--c-primary); }
  .gsr-icon.pol { background:#dcfce7; color:#15803d; }
  .gsr-icon.pat { background:#fef3c7; color:#92400e; }
  .gsr-icon.sin { background:#fee2e2; color:#991b1b; }
  .gsr-text { flex:1; min-width:0; }
  .gsr-title { font-size:13px; font-weight:600; color:#0f172a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .gsr-subtitle { font-size:11.5px; color:#64748b; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .gsr-meta { font-size:11px; color:#94a3b8; flex-shrink:0; }
  .gsr-empty { padding:20px 16px; text-align:center; font-size:12.5px; color:#94a3b8; }
  .gsr-hint { padding:14px 16px 6px 16px; font-size:11px; color:#94a3b8; line-height:1.5; }
  .gsr-hint b { color:#475569; font-weight:600; }
  mark.gsr-mark { background:#fef08a; color:#0f172a; padding:0 2px; border-radius:2px; font-weight:600; }
  .gsr-more { padding:8px 14px; font-size:11.5px; font-weight:700; color:var(--c-primary); cursor:pointer; text-align:center; border-top:1px solid #f1f5f9; transition:background 0.08s; }
  .gsr-more:hover { background:#f1f5f9; }
  .topbar-actions { display:flex; gap:8px; align-items:center; margin-left:auto; }
  .icon-btn { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; color:white; font-size:16px; transition:background 0.15s; position:relative; }
  .icon-btn:hover { background:rgba(255,255,255,0.16); }
  /* Tooltip propio vía data-tip (el title nativo tarda ~1s y en Safari no aparece).
     Va hacia ABAJO: el topbar está pegado al borde superior de la ventana. */
  .icon-btn[data-tip]::after { content:attr(data-tip); position:absolute; top:calc(100% + 7px); left:50%; transform:translateX(-50%); background:#0f172a; color:#fff; font-size:11px; font-weight:500; line-height:1.2; padding:5px 9px; border-radius:6px; white-space:nowrap; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.12s; z-index:60; box-shadow:0 2px 8px rgba(0,0,0,0.18); }
  .icon-btn[data-tip]::before { content:''; position:absolute; top:calc(100% + 2px); left:50%; transform:translateX(-50%); border:5px solid transparent; border-bottom-color:#0f172a; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.12s; z-index:60; }
  .icon-btn[data-tip]:hover::after, .icon-btn[data-tip]:hover::before { opacity:1; visibility:visible; }
  .avatar-top { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--c-secondary),#06b6d4); color:white; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:13px; cursor:pointer; }

  /* ===== Sidebar ===== */
  /* margin-right:-1px: el grid de .app (200px 1fr) puede redondear la columna del sidebar
     medio píxel de más o de menos según el DPI, dejando un hairline gap que muestra el
     --c-bg del body — invisible en temas oscuros (Sherpa) pero MUY visible como línea
     celeste suelta contra el brand color claro de otros tenants (ej. Bureau #00adef). El
     overlap de 1px tapa ese gap con el propio fondo del sidebar en vez de perseguir el
     redondeo. */
  /* ⚠ flex column para que el indicador de backups pueda irse al fondo con margin-top:auto.
     Las secciones quedan igual (eran bloques apilados y siguen siéndolo). */
  .sidebar { background:linear-gradient(180deg,var(--chrome-1) 0%,var(--chrome-3) 100%); color:white; padding:14px 0; overflow-y:auto; border-right:1px solid #1e293b; margin-right:-1px; display:flex; flex-direction:column; }
  .sidebar::-webkit-scrollbar { width:6px; }
  .sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.10); border-radius:3px; }
  .sidebar-section { padding:0 12px; margin-bottom:6px; }
  .sidebar-title { text-transform:uppercase; font-size:10px; letter-spacing:1.2px; color:rgba(255,255,255,0.40); padding:14px 10px 6px; font-weight:700; }
  /* Densidad compacta SOLO en pantallas bajas: el menú completo (15 ítems + título) mide
     ~827px y en un notebook con banner de impersonación el sidebar queda más corto → aparece
     scrollbar (pedido Martín 24-ago-2026: "logo más grande, pero sin scrollbar en el sidebar").
     En monitores altos no cambia nada. ⚠ Misma especificidad que las reglas base: los
     selectores se repiten tal cual (una media query NO suma especificidad). */
  @media (max-height:950px){
    .sidebar { padding:8px 0; }
    .sidebar .nav-item { padding:6px 10px; }
    .sidebar-title { padding:8px 10px 4px; }
  }
  /* Indicador de backups (pie del sidebar). Deliberadamente apagado: informa, no compite
     con el menú. El verde vive SOLO en el escudo — pintar el texto de verde lo convertiría
     en una alerta al revés, y esto no es una alerta. */
  /* margin-top:auto lo empuja al FONDO del sidebar (no queda pegado al último menú).
     Sin filete separador a propósito: lo pidió Martín y de paso deja de leerse como
     "otra sección" del menú. */
  .sidebar-backups { display:flex; align-items:flex-start; gap:10px; margin:0 12px; padding:14px 10px 16px; margin-top:auto; }
  .sb-escudo { flex:none; display:flex; align-items:center; height:20px; color:rgba(255,255,255,0.28); }
  .sb-escudo svg { width:15px; height:15px; }
  .sidebar-backups.sb-ok .sb-escudo { color:#4ade80; }
  .sb-texto { min-width:0; }
  .sb-titulo { font-size:13px; color:rgba(255,255,255,0.72); line-height:1.5; }
  .sb-sub, .sb-fecha { font-size:11.5px; color:rgba(255,255,255,0.45); line-height:1.5; }
  /* ⚠ Son <button> desde el 26-jul-2026, no <div>. Un <div> sin tabindex no recibe foco ni
     dispara con Enter, y la tab-bar móvil delega en estos mismos nodos: la app entera era
     inoperable por teclado y no había ruta alternativa. Con <button> hereda el
     :focus-visible que ya define este archivo. Estas 4 props resetean el estilo del UA. */
  .nav-item { display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:6px; cursor:pointer; color:rgba(255,255,255,0.78); font-weight:500; transition:all 0.12s; font-size:13px; user-select:none;
    background:none; border:none; width:100%; text-align:left; font-family:inherit; }
  .nav-item:hover { background:rgba(255,255,255,0.06); color:white; }
  .nav-item.active { background:rgba(var(--c-secondary-rgb),0.18); color:white; box-shadow:inset 3px 0 0 var(--c-secondary); }
  .nav-item .nav-icon { width:18px; display:flex; align-items:center; justify-content:center; font-size:18px; }
  .nav-item .nav-badge { margin-left:auto; background:rgba(var(--c-secondary-rgb),0.25); color:#bfdbfe; padding:1px 7px; border-radius:10px; font-size:10px; font-weight:600; }
  .nav-item.pending { opacity:0.65; cursor:default; }
  .nav-item.pending:hover { background:rgba(255,255,255,0.04); color:rgba(255,255,255,0.78); }

  /* ===== Content ===== */
  .content { padding:24px 32px 40px; overflow-y:auto; }
  .content::-webkit-scrollbar { width:8px; }
  .content::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:4px; }
  .content::-webkit-scrollbar-thumb:hover { background:#94a3b8; }
  #view-cotizador .page-header:not(:has(button:not([hidden]))) { display:none; }
  .content:has(#view-cotizador:not([hidden])) { padding-top:12px; }
  /* Cotizador · resultado generado: el header (datos del asegurado) queda fijo arriba y
     el grid de compañías ocupa todo el alto disponible debajo, con scroll propio. Las
     cards reparten el alto (grid-auto-rows:1fr) → más altas, mejor visualmente.
     Solo aplica cuando el resultado está visible; el formulario arranca arriba normal.
     ⚠ El predicado exige #view-cotizador:not([hidden]) ADEMÁS del resultado: switchView
     oculta el padre #view-cotizador pero NO #cotizador-results, así que sin ese guard la
     regla quedaba activa al navegar a otra vista (Asegurados, etc.) y le dejaba overflow:hidden
     a .content → no se podía scrollear en ninguna vista hasta recargar. */
  .content:has(#view-cotizador:not([hidden]) #cotizador-results:not([hidden])) {
    display:flex;
    flex-direction:column;
    padding-top:16px;
    padding-bottom:16px;
    overflow:hidden;
  }
  .content:has(#view-cotizador:not([hidden]) #cotizador-results:not([hidden])) > #view-cotizador {
    flex:1; display:flex; flex-direction:column; min-height:0;
  }
  .content:has(#view-cotizador:not([hidden]) #cotizador-results:not([hidden])) #cotizador-results {
    flex:1; display:flex; flex-direction:column; min-height:0;
  }
  .content:has(#view-cotizador:not([hidden]) #cotizador-results:not([hidden])) > #view-cotizador > .page-header { display:none; }
  .content:has(#view-cotizador:not([hidden]) #cotizador-results:not([hidden])) #cot-summary-card { flex-shrink:0; }
  .content:has(#view-cotizador:not([hidden]) #cotizador-results:not([hidden])) #cot-results-grid {
    flex:1; min-height:0; grid-auto-rows:min-content; overflow:auto; padding:2px;
  }
  /* Pantallas inline (comparador / emisión) que REEMPLAZAN al grid: heredan su rol de
     scroller — en este modo .content queda overflow:hidden y sin esto el panel se
     recorta sin scroll (bug 2-jul: la comparación no dejaba bajar). */
  .content:has(#view-cotizador:not([hidden]) #cotizador-results:not([hidden])) #cmp-panel-wrap,
  .content:has(#view-cotizador:not([hidden]) #cotizador-results:not([hidden])) #em-panel-wrap {
    flex:1; min-height:0; overflow-y:auto;
  }
  /* Mientras SOLO está el loader, su fila vuelve a llenar todo el alto (1fr) — sin él
     las filas son min-content para no dejar hueco muerto entre la tira y la tabla. */
  .content:has(#view-cotizador:not([hidden]) #cotizador-results:not([hidden])) #cot-results-grid:has(> .cot-loader) { grid-auto-rows:1fr; }
  /* Mientras SOLO está el loader "Cotizando…": el panel azul ocupa todo el inline, sin
     bordes blancos (el "blanco" es --c-bg que asoma por el padding del .content y del grid).
     ⚠ En AUTOS, las reglas de #cotizador-results de arriba son MÁS específicas que un simple
     .content:has(.cot-loader): mantenían padding-top/bottom:16px en el .content y padding:2px
     en el grid → el override DEBE repetir ese prefijo + .cot-loader para ganar por especificidad
     (si no, "sigue apareciendo con bordes blancos", que era el bug). Médicos no tiene esas
     reglas, así que el selector simple le alcanza. */
  .content:has(.cot-loader) { padding:0; }                                    /* Médicos (y left/right de Autos) */
  #med-grid:has(.cot-loader) { padding:0; }                                   /* grid de Médicos */
  /* Hogar: como Autos/Médicos, el loader de la 1ª cotización TAPA todo el inline (el form se
     esconde por JS en ejecutarCotizacionHogar). Misma cadena flex que Médicos, abajo. */
  .content:has(#cotizador-hogar:not([hidden]) #cotizador-hogar-results:not([hidden]) > .cot-loader) { display:flex; flex-direction:column; overflow:hidden; padding:0; }
  .content:has(#cotizador-hogar:not([hidden]) #cotizador-hogar-results:not([hidden]) > .cot-loader) > #view-cotizador { flex:1; display:flex; flex-direction:column; min-height:0; }
  .content:has(#cotizador-hogar:not([hidden]) #cotizador-hogar-results:not([hidden]) > .cot-loader) #cotizador-hogar,
  .content:has(#cotizador-hogar:not([hidden]) #cotizador-hogar-results:not([hidden]) > .cot-loader) #cotizador-hogar-results { flex:1; display:flex; flex-direction:column; min-height:0; margin-top:0 !important; }
  .content:has(#cotizador-hogar:not([hidden]) #cotizador-hogar-results:not([hidden]) > .cot-loader) #cotizador-hogar-results > .cot-loader { flex:1; }
  .content:has(#cotizador-hogar:not([hidden]) #cotizador-hogar-results:not([hidden]) > .cot-loader) #cotizador-hogar > :first-child { display:none; }
  .content:has(#view-cotizador:not([hidden]) #cotizador-results:not([hidden]) .cot-loader) { padding:0; }                    /* Autos: gana al padding 16px del .content */
  .content:has(#view-cotizador:not([hidden]) #cotizador-results:not([hidden]) .cot-loader) #cot-results-grid { padding:0; }  /* Autos: gana a los 2px del grid */
  /* (Acá vivía una regla que escondía la franja del "← Volver al listado" de resultados mientras
     estaba el loader. Desde el 14-ago-2026 ese botón vive DENTRO del header de #cot-summary-card,
     que el propio renderResultadosCot esconde mientras ninguna compañía respondió → la regla
     quedó sin objeto y se retiró.) */
  /* Médicos: mientras está el loader, el panel azul ocupa TODO el inline (igual que Autos).
     Cadena flex: .content → #view-cotizador → #cotizador-medicos → #medicos-results → #med-grid
     → .cot-loader, cada eslabón flex:1 con min-height:0 para que el loader crezca a pantalla
     completa en vez de quedarse en el min-height:60vh con borde blanco abajo. */
  .content:has(#cotizador-medicos:not([hidden]) #medicos-results:not([hidden]) .cot-loader) { display:flex; flex-direction:column; overflow:hidden; padding:0; }
  .content:has(#cotizador-medicos:not([hidden]) #medicos-results:not([hidden]) .cot-loader) > #view-cotizador { flex:1; display:flex; flex-direction:column; min-height:0; }
  .content:has(#cotizador-medicos:not([hidden]) #medicos-results:not([hidden]) .cot-loader) #cotizador-medicos,
  .content:has(#cotizador-medicos:not([hidden]) #medicos-results:not([hidden]) .cot-loader) #medicos-results,
  .content:has(#cotizador-medicos:not([hidden]) #medicos-results:not([hidden]) .cot-loader) #med-grid { flex:1; display:flex; flex-direction:column; min-height:0; }
  .content:has(#cotizador-medicos:not([hidden]) #medicos-results:not([hidden]) .cot-loader) #med-grid > .cot-loader { flex:1; }
  /* …y se oculta la barra de "Volver al listado" / "Editar datos": durante el loader el panel
     azul es lo ÚNICO en el inline (no debe asomar una franja blanca con botones arriba).
     ⚠⚠ Por eso la barra NO puede declarar su `display` en un `style=""` inline: el inline le
     gana a CUALQUIER selector de la hoja, así que un `display:flex` ahí revive la franja y
     esta regla queda muda (pasó el 10-ago-2026 al juntar los dos botones en una fila). El
     layout de la barra vive en `.med-topbar`, en el bloque <style> de Médicos. */
  .content:has(#cotizador-medicos:not([hidden]) #medicos-results:not([hidden]) .cot-loader) #cotizador-medicos > .med-topbar { display:none; }
.content:has(#cotizador-viajero:not([hidden]) #viajero-results:not([hidden]) .cot-loader) #cotizador-viajero > .vj-topbar { display:none; }
  .page-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:22px; gap:16px; flex-wrap:wrap; }
  .page-title { font-size:22px; font-weight:700; color:#0f172a; letter-spacing:-0.3px; }
  .page-subtitle { color:#64748b; font-size:13px; margin-top:4px; }

  .btn-primary { background:var(--c-primary); color:white; border:none; padding:9px 16px; border-radius:6px; font-weight:600; cursor:pointer; font-size:13px; display:inline-flex; align-items:center; gap:6px; transition:background 0.15s; }
  .btn-primary:hover:not(:disabled) { background:var(--c-primary-700); box-shadow:var(--sh-sm); }
  .btn-primary:active:not(:disabled) { transform:translateY(1px); }
  .btn-primary:disabled { background:#94a3b8; cursor:not-allowed; opacity:0.7; }
  .btn-secondary { background:white; color:#334155; border:1px solid #cbd5e1; padding:8px 14px; border-radius:6px; font-weight:500; cursor:pointer; font-size:13px; transition:all 0.15s; }
  .btn-secondary:hover { background:#f8fafc; border-color:#94a3b8; }

  .period-controls { display:flex; align-items:center; gap:12px; }
  .period-controls .period-static-label { font-size:11px; color:#64748b; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; }
  .filter-select { height:34px; padding:0 32px 0 14px; border:1px solid #e2e8f0; border-radius:8px; background:#fafbfc; font-size:12.5px; color:#475569; font-weight:500; cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:14px; font-family:inherit; transition:all 0.15s; }
  .filter-select:hover { border-color:#cbd5e1; background-color:white; }
  .filter-select:focus { border-color:var(--c-secondary); box-shadow:0 0 0 3px rgba(var(--c-secondary-rgb),0.12); outline:none; background-color:white; color:#0f172a; }

  /* Period dropdown custom */
  .period-dropdown { position:relative; }
  .period-trigger { background:white; border:1px solid #cbd5e1; border-radius:9px; padding:7px 12px 7px 14px; display:flex; align-items:center; gap:11px; cursor:pointer; font-family:inherit; transition:all 0.15s; min-width:230px; text-align:left; }
  .period-trigger:hover { border-color:var(--c-secondary); box-shadow:0 2px 8px rgba(15,23,42,0.06); }
  .period-trigger.open { border-color:var(--c-secondary); box-shadow:0 0 0 3px rgba(var(--c-secondary-rgb),0.12); }
  .period-icon-box { width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg,#dbeafe,#cffafe); color:var(--c-primary); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
  .period-text { flex:1; display:flex; flex-direction:column; line-height:1.15; min-width:0; }
  .period-label-current { font-size:13px; font-weight:700; color:#0f172a; }
  .period-sublabel { font-size:11px; color:#64748b; margin-top:3px; font-weight:500; }
  .period-chevron { font-size:11px; color:#94a3b8; transition:transform 0.2s; flex-shrink:0; }
  .period-trigger.open .period-chevron { transform:rotate(180deg); color:var(--c-primary); }
  .period-menu { position:absolute; top:calc(100% + 6px); right:0; background:white; border:1px solid #e2e8f0; border-radius:10px; box-shadow:0 10px 32px rgba(15,23,42,0.18); min-width:280px; z-index:200; overflow:hidden; }
  .period-menu-header { padding:10px 14px; background:#f8fafc; border-bottom:1px solid #e2e8f0; font-size:10.5px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:0.6px; }
  .period-menu-item { padding:11px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; transition:background 0.12s; border-bottom:1px solid #f1f5f9; }
  .period-menu-item:last-child { border-bottom:none; }
  .period-menu-item:hover { background:#f8fafc; }
  .period-menu-item.active { background:#dbeafe; }
  .period-menu-item.active .period-menu-label { color:var(--c-primary); }
  .period-menu-text { display:flex; flex-direction:column; line-height:1.2; }
  .period-menu-label { font-size:13px; font-weight:600; color:#0f172a; }
  .period-menu-sub { font-size:11px; color:#64748b; margin-top:3px; }
  .period-check { color:var(--c-primary); font-weight:700; font-size:15px; display:none; }
  .period-menu-item.active .period-check { display:inline; }

  /* ===== KPI grid ===== */
  .kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-bottom:14px; }
  /* Mini KPIs de las vistas: 4 columnas fijas iguales (si hay menos cards, queda espacio libre)
     + alto FIJO de card (referencia: Renovaciones, label+valor sin leyenda = 66px) para que
     todas las vistas queden parejas aunque algunas cards tengan leyenda (.kpi-trend).
     El Dashboard tiene sus propias reglas (#view-dashboard ...) que pisan estas. */
  .kpi-grid-compact { grid-template-columns:repeat(4, minmax(0,1fr)); }
  /* Solicitudes tiene 7 KPIs (Endosos/Anulaciones/Documentos/Cobranzas/Órdenes/Gestiones/Altas)
     → una sola fila. ⚠ El número está CABLEADO acá: sumar una card sin tocar esto deja la
     última sola en un renglón aparte, que se lee como un error de maquetación (pasó al sumar
     Gestiones, 🚩 bds #199). */
  /* Los 7 KPIs de Solicitudes van SIEMPRE en UNA SOLA FILA (pedido de Martín, 22-ago-2026).
     ⚠ A 1280 —el viewport real de varios usuarios— eso deja ~130px por card, y con el tamaño
     normal los rótulos largos ("Anulaciones", "Documentos", "Cobranzas") se cortaban con
     ellipsis, que se lee como un bug. Por eso abajo de 1400 la card va COMPRIMIDA: menos gap,
     menos padding, ícono y tipografía más chicos. Medido con capturas headless a 1280 y 1440;
     rehacer la medición si se suma un KPI más o si cambia el ancho del sidebar. */
  #view-solicitudes .kpi-grid-compact { grid-template-columns:repeat(7, minmax(0,1fr)); gap:8px; }
  #view-solicitudes .kpi-grid-compact .kpi-card { padding:8px 9px; gap:7px; }
  #view-solicitudes .kpi-grid-compact .kpi-icon { width:28px; height:28px; font-size:14px; border-radius:7px; }
  #view-solicitudes .kpi-grid-compact .kpi-label { font-size:10px; letter-spacing:.01em; }
  #view-solicitudes .kpi-grid-compact .kpi-value { font-size:18px; }
  #view-solicitudes .kpi-grid-compact .kpi-trend { font-size:9.5px; }
  /* Abajo de 1280 ni comprimida entra el rótulo: se cae el ÍCONO, que es decorativo, antes que
     el texto, que es el dato. Así la fila única se sostiene hasta ~1024 sin ellipsis. */
  @media (max-width: 1279px){
    #view-solicitudes .kpi-grid-compact .kpi-icon { display:none; }
  }
  @media (min-width: 1400px){
    #view-solicitudes .kpi-grid-compact { gap:12px; }
    #view-solicitudes .kpi-grid-compact .kpi-card { padding:8px 12px; gap:10px; }
    #view-solicitudes .kpi-grid-compact .kpi-icon { width:34px; height:34px; font-size:16px; border-radius:8px; }
    #view-solicitudes .kpi-grid-compact .kpi-label { font-size:11px; }
    #view-solicitudes .kpi-grid-compact .kpi-value { font-size:20px; }
    #view-solicitudes .kpi-grid-compact .kpi-trend { font-size:10.5px; }
  }
  /* Siniestros: 6 tarjetas, una por CATEGORÍA (25-sep-2026) → una sola fila.
     ⚠ El número está CABLEADO acá igual que en Solicitudes: sumar una card sin tocar esto deja
     la última sola en un renglón aparte. Los rótulos son cortos ("Resp. Civil" el más largo),
     así que el ícono recién se cae abajo de 1100 px. */
  #view-siniestros .kpi-grid-compact { grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px; }
  #view-siniestros .kpi-grid-compact .kpi-card { padding:8px 10px; gap:8px; }
  #view-siniestros .kpi-grid-compact .kpi-icon { width:30px; height:30px; font-size:15px; border-radius:7px; }
  #view-siniestros .kpi-grid-compact .kpi-label { font-size:10.5px; letter-spacing:.01em; }
  @media (max-width: 1099px){
    #view-siniestros .kpi-grid-compact .kpi-icon { display:none; }
  }
  @media (min-width: 1400px){
    #view-siniestros .kpi-grid-compact { gap:12px; }
    #view-siniestros .kpi-grid-compact .kpi-card { padding:8px 14px; gap:12px; }
    #view-siniestros .kpi-grid-compact .kpi-icon { width:34px; height:34px; font-size:16px; border-radius:8px; }
    #view-siniestros .kpi-grid-compact .kpi-label { font-size:11px; }
  }
  .kpi-grid-compact .kpi-card { height:66px; padding:8px 16px; box-sizing:border-box; overflow:hidden; }
  .kpi-grid-compact .kpi-label { font-size:11px; line-height:1.15; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .kpi-grid-compact .kpi-value { font-size:20px; }
  .kpi-grid-compact .kpi-trend { font-size:10.5px; line-height:1.15; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* Las pills de stats de Cotizaciones acompañan el mismo alto */
  .cot-stats-row .cot-stat-pill { height:66px; padding:8px 10px; box-sizing:border-box; }
  .kpi-card { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-md); padding:14px 16px; display:flex; gap:12px; align-items:center; transition:box-shadow var(--t-fast), border-color var(--t-fast); cursor:default; box-shadow:var(--sh-xs); }
  .kpi-card:hover { border-color:var(--c-secondary); box-shadow:var(--sh-md); }
  .kpi-card.kpi-link { cursor:pointer; }
  .kpi-card.kpi-active { border-color:var(--c-secondary); box-shadow:0 0 0 2px var(--c-secondary) inset, var(--sh-md); }
  /* Cobranzas: KPI por estado = label + $ (grande) + cuotas (chico). 3 líneas → un poco más altos que el compacto de 66px. */
  .kpi-grid-cobr .kpi-card { height:auto; min-height:78px; }
  .kpi-grid-cobr .kpi-value { font-size:20px; }
  .kpi-grid-cobr .kpi-trend { font-size:11px; margin-top:3px; color:#64748b; white-space:nowrap; }
  .kpi-icon { width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; font-weight:600; }
  .kpi-body { flex:1; min-width:0; }
  .kpi-label { font-size:11.5px; color:#64748b; text-transform:uppercase; letter-spacing:0.4px; font-weight:600; margin-bottom:3px; }
  .kpi-value { font-size:22px; font-weight:700; color:#0f172a; line-height:1; letter-spacing:-0.3px; white-space:nowrap; }
  .kpi-trend { font-size:11px; color:#64748b; margin-top:3px; font-weight:500; }
  .kpi-trend.up { color:#15803d; }
  .kpi-trend.down { color:#b91c1c; }
  /* Dashboard mantiene la altura original (más alta) */
  #view-dashboard .kpi-grid { gap:14px; margin-bottom:22px; }
  #view-dashboard .kpi-card { padding:18px; gap:14px; align-items:flex-start; }
  #view-dashboard .kpi-icon { width:42px; height:42px; border-radius:10px; font-size:18px; }
  #view-dashboard .kpi-label { letter-spacing:0.6px; margin-bottom:6px; }
  #view-dashboard .kpi-value { font-size:24px; line-height:1.1; letter-spacing:-0.5px; }
  #view-dashboard .kpi-trend { font-size:11.5px; margin-top:6px; }
  /* Dashboard: KPIs (3/4) + calendario (1/4) en la fila superior */
  .dashboard-top-row { display:grid; grid-template-columns:3fr 1fr; gap:14px; margin-bottom:14px; }
  /* KPIs en 4 col x 2 filas para aprovechar el ancho de 3/4 — tamaño igual al resto del sistema */
  #view-dashboard .kpi-grid-compact { grid-template-columns:repeat(4, minmax(0, 1fr)) !important; grid-auto-rows:110px; gap:12px; margin-bottom:0; }
  #view-dashboard .kpi-grid-compact .kpi-card { padding:14px 16px; gap:12px; align-items:center; height:110px; min-width:0; overflow:hidden; }
  #view-dashboard .kpi-grid-compact .kpi-body { min-width:0; flex:1; overflow:hidden; }
  #view-dashboard .kpi-grid-compact .kpi-value { white-space:nowrap; }
  #view-dashboard .kpi-grid-compact .kpi-icon { width:38px; height:38px; border-radius:9px; font-size:17px; }
  /* En el Dashboard el label puede ocupar 2 líneas (las cards miden 110px); el nowrap+ellipsis
     de .kpi-grid-compact .kpi-label es solo para las cards chicas (66px) de las vistas. */
  #view-dashboard .kpi-grid-compact .kpi-label { font-size:11px; letter-spacing:0.4px; margin-bottom:4px; line-height:1.15; white-space:normal; overflow:visible; text-overflow:clip; }
  #view-dashboard .kpi-grid-compact .kpi-value { font-size:clamp(15px, 2.1cqi, 22px); line-height:1; letter-spacing:-0.4px; white-space:nowrap; }
  #view-dashboard .kpi-grid-compact .kpi-card { container-type:inline-size; }
  #view-dashboard .kpi-grid-compact .kpi-trend { font-size:10.5px; margin-top:4px; line-height:1.15; }
  /* Card dividida en 2 — Movimiento del período (Emisiones vs Anulaciones) */
  #view-dashboard .kpi-grid-compact .kpi-card-split { grid-column:span 2; padding:12px 16px; }
  .movimiento-split { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; margin-top:6px; }
  .mov-divider { width:1px; align-self:stretch; background:#e2e8f0; }
  .mov-side { text-align:center; display:flex; flex-direction:column; gap:3px; }
  .mov-row { display:flex; align-items:center; justify-content:center; gap:6px; }
  .mov-arrow { font-size:16px; font-weight:700; line-height:1; }
  .mov-num { font-size:22px; font-weight:700; line-height:1; letter-spacing:-0.3px; }
  .mov-side.mov-up .mov-arrow, .mov-side.mov-up .mov-num { color:#15803d; }
  .mov-side.mov-down .mov-arrow, .mov-side.mov-down .mov-num { color:#b91c1c; }
  .mov-lbl { font-size:10.5px; color:#64748b; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; }
  /* Variante en un solo slot del grid (Altas/Bajas unificadas) — más compacta para
     dejar lugar al icono a la izquierda. */
  #view-dashboard .kpi-grid-compact .kpi-card-mov .movimiento-split { gap:8px; margin-top:8px; }
  #view-dashboard .kpi-grid-compact .kpi-card-mov .mov-num { font-size:clamp(15px, 2.6cqi, 21px); }
  #view-dashboard .kpi-grid-compact .kpi-card-mov .mov-arrow { font-size:12px; }
  /* Calendario compacto — formato sistema */
  .calendar-card { padding:14px 16px; display:flex; flex-direction:column; min-height:0; }
  /* Alto = exactamente la grilla de KPIs a la izquierda: 2 filas × 110px + 12px gap. */
  .dashboard-top-row .calendar-card { height:232px; overflow:hidden; }
  .calendar-card .card-title { margin-bottom:10px; padding-bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
  /* Título del calendario: más chico y sin negrita (más estético). Solo acá — .card-title-text es global.
     Una sola línea con ellipsis: si falta ancho se trunca (…) en vez de envolverse y chocar con el nav. */
  .calendar-card .card-title-text { display:block; flex:1 1 auto; min-width:0; font-size:11px; font-weight:500; color:#475569; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .calendar-card .card-title .icon { font-size:13px; }
  /* Navegador de mes (‹ Junio 2026 ›) en la fila del título — sin sumar alto a la card (232px fija).
     flex-shrink:0 → el nav mantiene su ancho y es el título el que cede (ellipsis). */
  .cal-nav { display:flex; align-items:center; gap:0; flex-shrink:0; }
  .cal-nav-btn { border:none; background:transparent; color:#64748b; cursor:pointer; font-size:15px; line-height:1; padding:1px 4px; border-radius:6px; transition:all .12s; }
  .cal-nav-btn:hover { background:#f1f5f9; color:#0f172a; }
  .cal-month { border:none; background:transparent; cursor:pointer; font-size:10.5px; font-weight:600; color:#334155; padding:2px 3px; border-radius:6px; min-width:68px; text-align:center; white-space:nowrap; transition:all .12s; }
  .cal-month:hover { background:#f1f5f9; color:#0f172a; }
  .calendar-event-actions { display:flex; gap:4px; flex-shrink:0; }
  .calendar-event-actions button { border:none; background:transparent; cursor:pointer; font-size:12px; padding:2px 4px; border-radius:5px; color:#94a3b8; transition:all .12s; }
  .calendar-event-actions button:hover { background:#e2e8f0; color:#0f172a; }
  .cal-ev-empty { font-size:11px; color:#94a3b8; text-align:center; padding:10px 0; }
  #cal-month { color:#06b6d4; font-weight:700; }
  .calendar-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; }
  .calendar-dow { font-size:9px; text-align:center; padding:2px 0 4px; color:#64748b; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; }
  .calendar-day { display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:500; border-radius:6px; cursor:pointer; position:relative; color:#475569; transition:all 0.12s; height:24px; border:1px solid transparent; }
  .calendar-day:hover:not(.empty) { background:#f8fafc; border-color:#e2e8f0; color:#0f172a; }
  .calendar-day.empty { visibility:hidden; }
  .calendar-day.past { color:#cbd5e1; font-weight:400; }
  .calendar-day.past:hover { background:#f8fafc; border-color:#e2e8f0; color:#94a3b8; }
  .calendar-day.has-event { background:#fee2e2; color:#b91c1c; font-weight:700; }
  .calendar-day.has-event.past { background:#f1f5f9; color:#94a3b8; font-weight:500; }
  .calendar-day.has-event:hover:not(.today) { background:#fecaca; border-color:#b91c1c; }
  .calendar-day.today { background:linear-gradient(135deg, var(--c-primary-700), #06b6d4); color:white; font-weight:700; box-shadow:0 3px 8px rgba(var(--c-primary-700-rgb),0.28); border-color:transparent; }
  .calendar-day.today.has-event { background:linear-gradient(135deg, var(--c-primary-700), #06b6d4); color:white; }
  /* Contador cuando el día tiene MÁS DE UN evento (con uno solo no se dibuja: sería ruido). */
  .calendar-day-badge { position:absolute; top:-4px; right:-4px; min-width:13px; height:13px; padding:0 3px; border-radius:7px; background:#b91c1c; color:#fff; font-size:8.5px; font-weight:700; line-height:13px; text-align:center; box-shadow:0 0 0 1.5px #fff; pointer-events:none; }
  .calendar-day.today .calendar-day-badge { background:#0f172a; }
  .calendar-events { margin-top:12px; padding-top:10px; border-top:1px solid #f1f5f9; flex:1; overflow-y:auto; min-height:0; display:flex; flex-direction:column; gap:6px; }
  .calendar-events-title { font-size:9.5px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:0.8px; margin-bottom:2px; }
  .calendar-event { padding:8px 10px; border:1px solid #e2e8f0; border-radius:8px; display:grid; grid-template-columns:auto 1fr auto; gap:9px; align-items:center; transition:all 0.12s; cursor:pointer; background:white; }
  .calendar-event:hover { background:#f8fafc; border-color:#cbd5e1; }
  .calendar-event-icon { width:28px; height:28px; border-radius:7px; background:#fee2e2; color:#b91c1c; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
  .calendar-event-text { font-size:11.5px; font-weight:600; color:#0f172a; line-height:1.3; min-width:0; }
  .calendar-event-date { flex-shrink:0; font-size:10px; font-weight:700; color:#b91c1c; text-transform:uppercase; letter-spacing:0.4px; white-space:nowrap; padding:3px 8px; background:#fee2e2; border-radius:5px; }
  /* ===== Modal de evento (ver / crear / editar) ===== */
  .evento-modal-overlay { position:fixed; inset:0; background:rgba(15,23,42,0.45); display:flex; align-items:center; justify-content:center; z-index:9000; padding:20px; }
  .evento-modal-card { background:white; border-radius:14px; box-shadow:0 20px 60px rgba(15,23,42,0.3); width:100%; max-width:420px; padding:22px; max-height:calc(100vh - 40px); overflow-y:auto; }
  .evento-modal-head { display:flex; gap:13px; align-items:center; margin-bottom:14px; }
  .evento-modal-emoji { width:46px; height:46px; border-radius:11px; background:#dbeafe; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
  .evento-modal-title { font-size:18px; font-weight:700; color:#0f172a; line-height:1.25; }
  .evento-modal-sub { font-size:12.5px; color:#64748b; margin-top:3px; }
  .evento-modal-desc { font-size:13.5px; color:#334155; line-height:1.5; background:#f8fafc; border:1px solid #f1f5f9; border-radius:9px; padding:11px 13px; margin-bottom:16px; white-space:pre-wrap; }
  .evento-modal-desc.muted { color:#94a3b8; font-style:italic; }
  .evento-modal-actions { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
  .evento-form { display:flex; flex-direction:column; gap:12px; margin:16px 0 18px; }
  .evento-field { display:flex; flex-direction:column; gap:5px; }
  .evento-field > span { font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:0.4px; }
  .evento-field .form-input { width:100%; }
  .evento-check { display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:#334155; cursor:pointer; }
  .evento-check input { accent-color:var(--c-primary, var(--c-primary)); width:16px; height:16px; }
  /* "Todo el día" atenúa la hora en vez de esconderla: el campo se ve siempre (si se esconde,
     nadie descubre que el evento puede tener hora) y tocarlo destilda el check. */
  .evento-field.ev-hora-off > span { opacity:0.55; }
  .evento-field.ev-hora-off .form-input { opacity:0.5; }
  /* Agenda de un día con VARIOS eventos (modal verDia) */
  .evento-dia-list { display:flex; flex-direction:column; gap:6px; margin:14px 0 18px; max-height:46vh; overflow-y:auto; }
  /* Scrollbar fino */
  .calendar-events::-webkit-scrollbar { width:4px; }
  .calendar-events::-webkit-scrollbar-thumb { background:#e2e8f0; border-radius:2px; }
  .calendar-events::-webkit-scrollbar-thumb:hover { background:#cbd5e1; }
  @media (max-width:1100px) {
    .dashboard-top-row { grid-template-columns:1fr; }
    .dashboard-top-row .calendar-card { height:auto; }
  }

  /* ===== Dashboard layout ===== */
  .dashboard-row { display:grid; grid-template-columns:1.4fr 1fr; gap:18px; margin-bottom:22px; }
  @media (max-width:1100px){ .dashboard-row { grid-template-columns:1fr; } }
  .card { background:var(--c-surface); border-radius:var(--r-md); border:1px solid var(--c-border); padding:20px; box-shadow:var(--sh-sm); }
  .card-title { font-size:13.5px; font-weight:700; color:#0f172a; margin-bottom:16px; display:flex; align-items:center; gap:8px; padding-bottom:12px; border-bottom:1px solid #f1f5f9; justify-content:space-between; }
  .card-title-text { display:flex; align-items:center; gap:8px; }
  .card-title .icon { font-size:15px; }

  /* Bar chart */
  .bar-list { display:flex; flex-direction:column; gap:11px; }
  /* Label a 150px y en UNA línea (ellipsis + title): "Accidentes Personales" /
     "Responsabilidad Civil" partían la fila en dos a 130px. La barra (1fr) absorbe. */
  .bar-row { display:grid; grid-template-columns:150px 1fr 115px; align-items:center; gap:12px; }
  .bar-label { font-size:12.5px; color:#334155; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .bar-track { background:#f1f5f9; border-radius:6px; height:14px; position:relative; overflow:hidden; }
  .bar-fill { height:100%; background:linear-gradient(90deg,var(--c-primary) 0%,var(--c-secondary) 100%); border-radius:6px; min-width:0; transition:width 0.4s ease; }
  .bar-amount-right { font-size:12.5px; font-weight:500; color:#334155; text-align:right; white-space:nowrap;  }
  .bar-row.otras .bar-fill { background:linear-gradient(90deg,#94a3b8 0%,#cbd5e1 100%); }
  .bar-row.otras .bar-label { color:#64748b; font-style:italic; }

  /* Renovaciones list */
  .renov-list { display:flex; flex-direction:column; gap:10px; }
  .renov-item { padding:11px 12px; border:1px solid #e2e8f0; border-radius:8px; display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; transition:all 0.12s; cursor:pointer; height:64px; box-sizing:border-box; }
  .renov-item:hover { background:#f8fafc; border-color:var(--c-secondary); }
  .renov-item > div { min-width:0; }   /* permite el ellipsis en la columna de texto */
  .renov-name { font-size:13px; font-weight:600; color:#0f172a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .renov-info { font-size:11.5px; color:#64748b; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* Isotipo de la compañía inline en el renglón gris (dashboard: Movimientos, Renovaciones
     y Solicitudes pendientes).
     ⚠ Al pasar a flex, el ellipsis se MUDA al <span> interno: un flex item nace con
     min-width:auto y no encoge, así que el texto desbordaría la card en vez de cortarse.
     Modificador y no la regla base: .renov-item/.renov-info los comparten cumpleaños
     y eventos, que no llevan compañía — y una solicitud suelta tampoco la tiene. */
  .renov-info.con-cia { display:flex; align-items:center; gap:5px; }
  .renov-info.con-cia > span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .renov-date { font-size:11.5px; font-weight:600; padding:4px 8px; border-radius:6px; white-space:nowrap; }
  .renov-date.urgent { background:#fee2e2; color:#991b1b; }
  .renov-date.soon { background:#fef3c7; color:#92400e; }
  .renov-date.normal { background:#dbeafe; color:var(--c-estado-azul); }

  /* Movements table */
  .movements-table { width:100%; border-collapse:collapse; }
  .movements-table th { text-align:left; padding:9px 14px; font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:0.6px; border-bottom:1px solid #e2e8f0; }
  .movements-table td { padding:11px 14px; border-bottom:1px solid #f1f5f9; font-size:13px; color:#334155; }
  .movements-table tr:last-child td { border-bottom:none; }
  .mov-tag { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; }
  .mov-tag.emision { background:#dcfce7; color:#166534; }
  .mov-tag.anulacion { background:#fee2e2; color:#991b1b; }
  .mov-tag.renovacion { background:#dbeafe; color:var(--c-estado-azul); }
  .mov-tag.endoso { background:#fef3c7; color:#92400e; }
  .mov-tag.cobranza { background:#cffafe; color:#155e75; }

  /* ===== Listados (asegurados y pólizas) ===== */
  .toolbar { background:white; padding:10px 14px; border-radius:8px 8px 0 0; border:1px solid #e2e8f0; border-bottom:none; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .filter-tabs { display:flex; gap:3px; flex-wrap:wrap; }
  .filter-tab { padding:0 12px; height:34px; border-radius:8px; cursor:pointer; font-size:12.5px; color:#64748b; font-weight:500; transition:all 0.12s; user-select:none; display:inline-flex; align-items:center; gap:6px; box-sizing:border-box; }
  .filter-tab:hover { background:#f1f5f9; }
  .filter-tab.active { background:#dbeafe; color:var(--c-primary); }
  .filter-tab .count { display:inline-block; background:rgba(var(--c-primary-rgb),0.14); padding:1px 7px; border-radius:10px; font-size:11px; font-weight:600; line-height:1.4; }
  .filter-tab:not(.active) .count { background:#e2e8f0; color:#64748b; }
  .toolbar-spacer { flex:1; }
  /* Variante de una sola fila: grilla de 5 columnas iguales — hasta 4 filtros + buscador
     SIEMPRE en la última columna. Con menos filtros quedan columnas vacías (a propósito). */
  .toolbar-onerow { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); }
  .toolbar-onerow .filter-select, .toolbar-onerow .search-box { width:auto; min-width:0; max-width:none; }
  .toolbar-onerow .search-box { grid-column:5; }
  /* 5 filtros a la vez (raro: exige ≥2 organizadores Y ≥2 ejecutivos en la misma cartera):
     la fila pasa a 6 columnas en vez de que el 5º filtro pise el buscador. La clase la pone
     _fcAjustarGrid (js/filtros-cartera.js) contando los filtros visibles. */
  .toolbar-onerow.toolbar-onerow-6 { grid-template-columns:repeat(6, minmax(0,1fr)); }
  .toolbar-onerow.toolbar-onerow-6 .search-box { grid-column:6; }
  /* Barra de filtros con popover (js/filtros-toolbar.js): 3 filtros fijos + "Más filtros" + buscador.
     La cantidad de columnas la fija el JS en --tb-cols según cuántos filtros tengan contenido, y el
     buscador queda último por ORDEN DEL DOM (acá NO va pineado a una columna fija). */
  .toolbar-onerow.toolbar-filtros { grid-template-columns:repeat(var(--tb-cols,5), minmax(0,1fr)); position:relative; }
  .toolbar-onerow.toolbar-filtros .search-box { grid-column:auto; }
  .filtros-btn { height:34px; border:1px solid #e2e8f0; border-radius:8px; background:#fafbfc; font-size:12.5px; color:#475569; font-weight:500; font-family:inherit; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; transition:all 0.15s; }
  .filtros-btn:hover { border-color:#cbd5e1; background:white; }
  .filtros-btn.tiene { border-color:var(--c-secondary); background:rgba(var(--c-secondary-rgb),0.08); color:var(--c-primary); }
  .filtros-btn .cnt { background:var(--c-secondary); color:white; border-radius:999px; padding:0 6px; font-size:11px; font-weight:600; }
  .filtros-pop { position:absolute; top:calc(100% - 4px); z-index:60; width:290px; background:white; border:1px solid #cbd5e1; border-radius:10px; box-shadow:0 8px 24px rgba(15,23,42,0.12); padding:12px; display:flex; flex-direction:column; gap:9px; }
  .filtros-pop[hidden] { display:none; }
  .filtros-pop .fp-fila { display:flex; flex-direction:column; gap:3px; }
  .filtros-pop .fp-lbl { font-size:11px; color:#94a3b8; font-weight:600; }
  .filtros-pop .filter-select { width:100%; }
  .filtros-chips { background:white; border-left:1px solid #e2e8f0; border-right:1px solid #e2e8f0; padding:0 14px 10px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .filtros-chips[hidden] { display:none; }
  .filtros-chip { background:rgba(var(--c-secondary-rgb),0.10); color:var(--c-primary); border-radius:999px; padding:3px 9px; font-size:11.5px; font-weight:500; display:inline-flex; align-items:center; gap:5px; }
  .filtros-chip .x { cursor:pointer; opacity:0.65; font-weight:700; }
  .filtros-chip .x:hover { opacity:1; }
  .filtros-limpiar { font-size:11.5px; color:#64748b; cursor:pointer; margin-left:auto; }
  .filtros-limpiar:hover { color:var(--c-primary); text-decoration:underline; }

  /* ===== Selector de período con rango libre (js/filtro-periodo.js) =====
     El trigger imita a .filter-select para que la fila de filtros quede pareja. */
  .filtro-periodo { position:relative; min-width:0; }
  .filtro-periodo[hidden] { display:none; }
  .fp-trigger { width:100%; height:34px; padding:0 10px 0 14px; border:1px solid #e2e8f0; border-radius:8px; background:#fafbfc; font-size:12.5px; color:#475569; font-weight:500; font-family:inherit; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px; transition:all 0.15s; }
  .fp-trigger:hover { border-color:#cbd5e1; background:white; }
  .fp-trigger .fp-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .fp-trigger .fp-caret { color:#64748b; flex-shrink:0; }
  /* ===== Filtro de lista con selección múltiple — PRODUCTOR y RAMO (js/filtro-multi.js) =====
     Reusa .fp-trigger para que la fila de filtros quede pareja con los <select> y el período. */
  .filtro-multi { position:relative; min-width:0; padding:0; border:none; background:none; }
  .filtro-multi[hidden] { display:none; }
  .filtro-multi .fp-trigger.tiene { border-color:var(--c-secondary); background:rgba(var(--c-secondary-rgb),0.08); color:var(--c-primary); font-weight:600; }
  .fm-pop { position:absolute; top:calc(100% + 4px); left:0; z-index:70; width:250px; background:white; border:1px solid #cbd5e1; border-radius:10px; box-shadow:0 8px 24px rgba(15,23,42,0.12); padding:8px; display:flex; flex-direction:column; gap:6px; }
  .fm-pop[hidden] { display:none; }
  .fm-buscar { height:30px; padding:0 9px; border:1px solid #e2e8f0; border-radius:7px; font-size:12.5px; font-family:inherit; color:#334155; outline:none; }
  .fm-buscar:focus { border-color:var(--c-secondary); }
  .fm-buscar[hidden] { display:none; }   /* listas cortas (ramos): el buscador no aparece */
  /* Tope de alto: con ~190 PAS (Bureau) la lista tiene que scrollear adentro del popover, no
     estirarlo hasta salirse de la pantalla. */
  .fm-lista { max-height:230px; overflow-y:auto; display:flex; flex-direction:column; }
  .fm-op { display:flex; align-items:center; gap:8px; padding:5px 7px; border-radius:6px; font-size:12.5px; color:#475569; cursor:pointer; }
  .fm-op:hover { background:#f1f5f9; }
  .fm-op[hidden] { display:none; }
  .fm-op input { accent-color:var(--c-secondary); margin:0; cursor:pointer; flex-shrink:0; }
  .fm-vacio { font-size:12px; color:#94a3b8; padding:6px 7px; }
  .fm-vacio[hidden] { display:none; }
  .fm-pie { display:flex; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid #f1f5f9; padding-top:6px; }
  .fm-cuenta { font-size:11px; color:#94a3b8; }
  .fm-limpiar { border:none; background:none; font-family:inherit; font-size:11.5px; color:#64748b; cursor:pointer; padding:0; }
  .fm-limpiar:hover { color:var(--c-primary); text-decoration:underline; }
  .fp-pop { position:absolute; top:calc(100% + 4px); left:0; z-index:70; background:white; border:1px solid #cbd5e1; border-radius:10px; box-shadow:0 8px 24px rgba(15,23,42,0.12); padding:12px; display:flex; gap:12px; }
  .fp-pop[hidden] { display:none; }
  /* Volteo a la derecha cuando el trigger está pegado al borde de la pantalla (lo pone
     _fpAcomodar midiendo la caja): con `left:0` fijo, el calendario del filtro de Indicadores
     —que vive en el extremo derecho del encabezado— quedaba cortado fuera del viewport. */
  .fp-pop.fp-pop-der { left:auto; right:0; }
  .fp-inputs { display:flex; gap:8px; margin-bottom:10px; }
  .fp-inputs .fp-in { flex:1; height:30px; border:1px solid #e2e8f0; border-radius:8px; background:#fafbfc; display:flex; align-items:center; padding:0 10px; font-size:12px; color:#475569; }
  .fp-cal-par { display:flex; gap:16px; }
  .fp-cal { width:196px; }
  .fp-cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
  .fp-cal-titulo { font-size:12.5px; font-weight:600; color:#0f172a; text-transform:capitalize; }
  .fp-nav { cursor:pointer; color:#64748b; font-size:16px; line-height:1; padding:0 6px; user-select:none; }
  .fp-nav:hover { color:var(--c-primary); }
  .fp-nav-off { width:16px; }
  .fp-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; }
  .fp-dow { font-size:10.5px; font-weight:700; color:#94a3b8; text-align:center; padding-bottom:3px; }
  .fp-dia { font-size:11.5px; color:#334155; text-align:center; padding:5px 0; border-radius:6px; cursor:pointer; user-select:none; }
  .fp-dia:hover { background:#f1f5f9; }
  .fp-dia.fp-vacio { cursor:default; }
  .fp-dia.fp-vacio:hover { background:transparent; }
  .fp-dia.fp-hoy { font-weight:700; color:var(--c-primary); }
  .fp-dia.fp-off { color:#cbd5e1; cursor:default; }
  .fp-dia.fp-off:hover { background:transparent; }
  .fp-dia.fp-en-rango { background:rgba(var(--c-secondary-rgb),0.12); border-radius:0; }
  .fp-dia.fp-punta { background:var(--c-secondary); color:white; font-weight:600; }
  .fp-lat { display:flex; flex-direction:column; gap:3px; min-width:150px; border-left:1px solid #f1f5f9; padding-left:12px; }
  .fp-preset { text-align:left; background:none; border:none; border-radius:6px; padding:5px 9px; font-size:12px; color:#475569; font-family:inherit; cursor:pointer; }
  .fp-preset:hover { background:#f1f5f9; }
  .fp-preset.on { background:rgba(var(--c-secondary-rgb),0.12); color:var(--c-primary); font-weight:600; }
  .fp-acciones { display:flex; gap:6px; margin-top:auto; padding-top:10px; }
  /* Set 'rango' (sin atajos): la columna lateral queda sólo con Aplicar/Cancelar, abajo a la derecha. */
  .fp-lat-sin-atajos { min-width:0; border-left:none; padding-left:0; justify-content:flex-end; }
  /* Dentro de un formulario, el trigger toma la altura y el borde de un .form-input. */
  .form-field .fp-trigger { height:35px; background:white; border-color:#cbd5e1; border-radius:6px; font-size:13px; color:#0f172a; font-weight:400; }
  .form-field .fp-trigger.fp-vacio { color:#94a3b8; }
  .form-field .filtro-periodo.vj-campo-err .fp-trigger { border-color:#ef4444; background:#fef2f2; }
  .fp-aplicar { flex:1; background:var(--c-primary); color:white; border:none; border-radius:6px; padding:7px 0; font-size:12px; font-weight:600; font-family:inherit; cursor:pointer; }
  .fp-aplicar:hover { background:var(--c-primary-700); }
  .fp-cancelar { background:white; color:#475569; border:1px solid #cbd5e1; border-radius:6px; padding:7px 12px; font-size:12px; font-family:inherit; cursor:pointer; }
  .fp-cancelar:hover { background:#f8fafc; }
  /* Operaciones: los 5 controles (ventana, compañía, ramo, productor, buscador) en UNA fila
     — usa la grilla base de 5 columnas; el buscador queda en la última (grid-column:5). */
  .search-box { position:relative; width:240px; flex-shrink:0; }
  .search-box input { width:100%; height:34px; padding:0 12px 0 34px; border:1px solid #e2e8f0; border-radius:8px; font-size:12.5px; outline:none; transition:all 0.15s; background:#fafbfc; font-family:inherit; color:#0f172a; box-sizing:border-box; }
  .search-box input:hover { border-color:#cbd5e1; background:white; }
  .search-box input:focus { border-color:var(--c-secondary); box-shadow:0 0 0 3px rgba(var(--c-secondary-rgb),0.12); background:white; }
  .search-box::before { content:''; position:absolute; left:12px; top:50%; transform:translateY(-50%); width:14px; height:14px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E"); background-size:contain; pointer-events:none; }

  .data-table { background:var(--c-surface); border:1px solid var(--c-border); border-radius:0 0 var(--r-md) var(--r-md); overflow:hidden; box-shadow:var(--sh-sm); }
  table.list-table { width:100%; border-collapse:collapse; }
  table.list-table th { text-align:left; padding:11px 16px; font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:0.6px; background:#f8fafc; border-bottom:1px solid #e2e8f0; }
  table.list-table td { padding:13px 16px; border-bottom:1px solid #f1f5f9; vertical-align:middle; font-size:13px; color:#334155; }
  table.list-table th.th-sortable { cursor:pointer; user-select:none; white-space:nowrap; }
  table.list-table th.th-sortable:hover { color:#334155; }
  .th-sort-arrow { font-size:12px; color:var(--c-secondary); margin-left:2px; }
  table.list-table tr:last-child td { border-bottom:none; }
  table.list-table tr.clickable { cursor:pointer; transition:background 0.1s; }
  table.list-table tr.clickable:hover { background:#f8fafc; }
  /* Operaciones: ancho fijo, mismo alto por fila, truncado en 1 línea */
  /* Filas de alto UNIFORME en todas las tablas de listado (referencia: Operaciones).
     Layout fijo + celdas sin wrap (los textos largos se cortan con "…"): el alto de la
     fila no depende del contenido → todas las vistas quedan parejas. white-space se
     hereda, así que los nombres de asegurado quedan SIEMPRE en una sola línea. */
  table.list-table-uniform { table-layout:fixed; }
  table.list-table-uniform th { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; height:39px; box-sizing:border-box; }
  table.list-table-uniform td { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; height:60px; box-sizing:border-box; padding-top:9px; padding-bottom:9px; }
  table.list-table-uniform td > div { overflow:hidden; text-overflow:ellipsis; }
  /* La celda de acciones NO recorta: los tooltips data-tip se dibujan fuera del botón
     (hacia la izquierda) y el overflow:hidden de arriba los dejaba invisibles. */
  table.list-table-uniform td.td-acciones { overflow:visible; }

  .name-cell { display:flex; align-items:center; gap:11px; }
  .name-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-weight:700; font-size:12px; flex-shrink:0; }
  .name-info .name { font-weight:600; color:#0f172a; font-size:13.5px; }
  .name-info .sub { font-size:11.5px; color:#64748b; margin-top:2px; }
  .pill-count { display:inline-block; padding:3px 10px; background:#dbeafe; color:var(--c-primary); border-radius:12px; font-size:11.5px; font-weight:600; }

  /* ===== Paginación ===== */
  .pagination { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:white; border:1px solid #e2e8f0; border-top:none; border-radius:0 0 8px 8px; gap:12px; flex-wrap:wrap; }
  .pagination-info { font-size:12.5px; color:#64748b; font-weight:500; }
  .pagination-controls { display:flex; gap:4px; align-items:center; }
  .page-btn, .page-num { height:32px; min-width:32px; padding:0 11px; border:1px solid #e2e8f0; border-radius:7px; background:white; cursor:pointer; font-size:12.5px; color:#475569; font-weight:500; transition:all 0.12s; font-family:inherit; box-sizing:border-box; }
  .page-btn:hover:not(:disabled), .page-num:hover:not(.active) { background:#f1f5f9; border-color:#cbd5e1; color:#0f172a; }
  .page-btn:disabled { opacity:0.4; cursor:not-allowed; }
  .page-num.active { background:var(--c-primary); border-color:var(--c-primary); color:white; }
  .page-numbers { display:flex; gap:4px; }
  .page-ellipsis { padding:0 4px; color:#94a3b8; font-weight:600; align-self:center; }

  .poliza-num { font-family:inherit; font-size:12.5px; font-weight:600; color:#0f172a; }
  .link-asegurado { color:var(--c-primary); cursor:pointer; font-weight:500; }
  .link-asegurado:hover { text-decoration:underline; }

  /* Estado pólizas */
  .estado-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:12px; font-size:11px; font-weight:600; white-space:nowrap; }
  .estado-vigente { background:#d1fae5; color:#065f46; }
  .estado-en-gestion { background:#dbeafe; color:var(--c-estado-azul); }
  .estado-anulada { background:#fee2e2; color:#991b1b; }
  .estado-vencida { background:#e2e8f0; color:#475569; }
  .estado-emitida { background:#e0e7ff; color:#3730a3; }
  .estado-renovada { background:#cffafe; color:#155e75; }
  .estado-por-renovar { background:#fef3c7; color:#92400e; }
  .estado-atrasada { background:#fee2e2; color:#991b1b; }
  .estado-no-renueva { background:#e2e8f0; color:#475569; }
  /* Botones de acción inline de la vista Renovaciones */
  .renov-act { position:relative; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border:1px solid #e2e8f0; border-radius:6px; background:#fff; cursor:pointer; font-size:12px; line-height:1; padding:0; margin-right:3px; transition:all .12s; }
  /* Indicador sin acción (ej. ✓ ya renovada): mismo tooltip que los botones */
  .renov-flag { position:relative; display:inline-flex; align-items:center; color:#94a3b8; font-size:12px; }
  /* Tooltip instantáneo hacia la IZQUIERDA (la columna Acción está al borde derecho;
     el overflow:hidden de .data-table recortaría un tooltip hacia arriba o derecha).
     ⚠ Requiere que la celda contenedora NO recorte (td.td-acciones, arriba). */
  .renov-act[data-tip]::after, .renov-flag[data-tip]::after { content:attr(data-tip); position:absolute; right:calc(100% + 8px); top:50%; transform:translateY(-50%); background:#0f172a; color:#fff; font-size:11px; font-weight:500; line-height:1.2; padding:5px 8px; border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .12s; z-index:50; box-shadow:0 2px 8px rgba(0,0,0,0.18); }
  .renov-act[data-tip]::before, .renov-flag[data-tip]::before { content:''; position:absolute; right:calc(100% + 3px); top:50%; transform:translateY(-50%); border:5px solid transparent; border-left-color:#0f172a; opacity:0; pointer-events:none; transition:opacity .12s; z-index:50; }
  .renov-act[data-tip]:hover::after, .renov-act[data-tip]:hover::before, .renov-flag[data-tip]:hover::after, .renov-flag[data-tip]:hover::before { opacity:1; }
  .renov-act:hover { border-color:#94a3b8; background:#f8fafc; }
  .renov-act.r:hover { border-color:#06b6d4; background:#ecfeff; }
  .renov-act.a:hover { border-color:#ef4444; background:#fef2f2; }
  .renov-act.n:hover { border-color:#64748b; background:#f1f5f9; }
  .renov-act.c:hover { border-color:var(--c-secondary); background:#eff6ff; }

  /* Cobranza badge */
  .cobranza-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:10px; font-size:10.5px; font-weight:600; }
  .cobranza-al-dia { background:#dcfce7; color:#166534; }
  .cobranza-pendiente { background:#fef3c7; color:#92400e; }
  .cobranza-mora { background:#fee2e2; color:#991b1b; }
  /* Detalle de rechazo de cobro (motivo + copiar link): a la DERECHA del badge, misma línea */
  .rech-detalle { display:inline-flex; align-items:center; gap:8px; flex-wrap:nowrap; white-space:nowrap; margin-left:8px; vertical-align:middle; font-size:10.5px; color:#94a3b8; }
  /* En el listado de Cobranzas el rechazo solo muestra la fecha (motivo + link → en la ficha). */
  .rech-fecha { margin-top:4px; font-size:10.5px; color:#94a3b8; white-space:nowrap; }
  /* "Todavía no se le comunicó al cliente". Se apaga cuando cualquiera manda el WhatsApp. */
  .rech-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#ef4444; margin-left:6px; vertical-align:middle; }
  .rech-copiar { display:inline-flex; align-items:center; gap:4px; padding:1px 9px; border-radius:999px; font-size:10.5px; font-weight:600; line-height:1.7; color:var(--c-secondary-strong); background:#eff6ff; border:1px solid #bfdbfe; text-decoration:none; cursor:pointer; transition:background 0.12s, border-color 0.12s, color 0.12s; }
  .rech-copiar:hover { background:#dbeafe; border-color:#93c5fd; color:var(--c-primary-strong); }

  /* ===== Detail genérico ===== */
  .back-link { display:inline-flex; align-items:center; gap:6px; color:#64748b; text-decoration:none; cursor:pointer; font-size:13px; margin-bottom:14px; transition:color 0.12s; user-select:none; }
  .back-link:hover { color:var(--c-primary); }
  .detail-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:22px; gap:20px; flex-wrap:wrap; }
  /* 📩 "No leída/o" en el header de las fichas (solicitud/cotización manual, siniestro):
     deja el ítem pendiente para volver a entrarle. Compacto y con el tooltip propio de la app
     (patrón data-tip propio — el title nativo tarda y en Safari no sale). */
  .sol-d-estado { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
  .notif-noleido-btn { position:relative; font-size:12px; padding:5px 10px; white-space:nowrap; flex-shrink:0; }
  .notif-noleido-btn::after { content:attr(data-tip); position:absolute; top:calc(100% + 7px); right:0; background:#0f172a; color:white; font-size:11px; font-weight:500; padding:5px 9px; border-radius:6px; white-space:nowrap; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.12s; z-index:60; }
  .notif-noleido-btn:hover::after { opacity:1; visibility:visible; }
  .detail-header-left { display:flex; align-items:center; gap:16px; }
  .detail-avatar { width:60px; height:60px; border-radius:50%; color:white; font-weight:700; font-size:20px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .detail-name { font-size:21px; font-weight:700; color:#0f172a; letter-spacing:-0.3px; }
  .detail-tags { display:flex; gap:6px; margin-top:7px; flex-wrap:wrap; }
  .tag { padding:3px 9px; background:#f1f5f9; color:#475569; border-radius:4px; font-size:11.5px; font-weight:500; }
  .tag.productor { background:#dbeafe; color:var(--c-primary); }
  .tag.aseguradora { background:#cffafe; color:#155e75; }
  /* Mismo ámbar que .origen-chip.manual del listado de cotizaciones: en toda la app,
     "manual" = ámbar. */
  .tag.manual { background:#fef3c7; color:#92400e; }
  .detail-actions { display:flex; gap:8px; flex:0 1 auto; flex-wrap:wrap; justify-content:flex-end; }
  /* Ficha de póliza: botones SIEMPRE arriba-derecha (nunca envuelven a una fila
     debajo del bloque izquierdo). El header no envuelve entre sus dos hijos; el
     bloque izquierdo cede ancho y los botones se apilan en doble fila si hace falta. */
  .detail-header-poliza { flex-wrap:nowrap; }
  .detail-header-poliza .detail-header-left { flex:1 1 auto; min-width:0; }
  .detail-header-poliza .detail-header-left > div { min-width:0; }
  .detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
  @media (max-width:1100px) { .detail-grid { grid-template-columns:1fr; } }
  .field-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px 22px; }
  .field { display:flex; flex-direction:column; gap:3px; }
  .field.full { grid-column:1/-1; }
  .field-label { font-size:10.5px; color:#64748b; text-transform:uppercase; letter-spacing:0.6px; font-weight:700; }
  .field-value { font-size:13.5px; color:#0f172a; font-weight:500; }
  .field-value.muted { color:#94a3b8; font-style:italic; font-weight:400; }
  .field-value.big { font-size:16px; font-weight:700; }
  .field-value a { color:var(--c-primary); text-decoration:none; }
  .field-value a:hover { text-decoration:underline; }

  /* Mini stats row para detalle de póliza */
  .mini-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-bottom:18px; }
  .mini-stat { background:white; border:1px solid #e2e8f0; border-radius:10px; padding:14px 16px; display:flex; gap:12px; align-items:flex-start; transition:all 0.15s; }
  .mini-stat:hover { border-color:var(--c-secondary); box-shadow:0 4px 12px rgba(15,23,42,0.06); }
  .mini-stat-icon-box { width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
  .mini-stat-body { flex:1; min-width:0; }
  .mini-stat-label { font-size:10.5px; color:#64748b; text-transform:uppercase; letter-spacing:0.6px; font-weight:700; margin-bottom:6px; }
  .mini-stat-value { font-size:18px; font-weight:700; color:#0f172a; letter-spacing:-0.3px; line-height:1.1; }
  .mini-stat-sub { font-size:11px; color:#64748b; margin-top:4px; }
  .mini-stat-value.green { color:#15803d; }
  .mini-stat-value.amber { color:#b45309; }
  .mini-stat-value.red { color:#b91c1c; }

  /* Cuotas table */
  .cuotas-table { width:100%; border-collapse:collapse; }
  .cuotas-table th { text-align:left; padding:9px 14px; font-size:10.5px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:0.6px; background:#f8fafc; border-bottom:1px solid #e2e8f0; }
  .cuotas-table td { padding:10px 14px; border-bottom:1px solid #f1f5f9; font-size:13px; }
  .cuotas-table tr:last-child td { border-bottom:none; }
  .cuotas-detail-row > td { border-bottom:1px solid #e2e8f0 !important; }
  /* Acciones de la cuota (link de pago + WhatsApp del rechazo). Columna angosta a la derecha;
     los botones sólo existen cuando la cuota rebotó y la compañía mandó link (hoy, Zurich). */
  .cuotas-table td.cuotas-acc { text-align:right; white-space:nowrap; padding-left:4px; }
  .cuota-acc { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; margin-left:4px; border-radius:6px; border:1px solid #e2e8f0; color:#475569; text-decoration:none; font-size:13px; line-height:1; vertical-align:middle; }
  .cuota-acc:hover { background:#f1f5f9; border-color:#cbd5e1; }

  /* Timeline movimientos */
  .timeline { padding:6px 4px; }
  .timeline-item { display:grid; grid-template-columns:90px 1fr; gap:14px; padding:10px 0; border-left:none; position:relative; }
  .timeline-date { font-size:12px; color:#64748b; font-weight:600; padding-top:1px; }
  .timeline-content { padding-left:18px; border-left:2px solid #e2e8f0; padding-bottom:14px; position:relative; }
  .timeline-content::before { content:''; position:absolute; left:-7px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--c-secondary); border:2px solid white; box-shadow:0 0 0 2px #cbd5e1; }
  .timeline-item:last-child .timeline-content { border-left-color:transparent; padding-bottom:0; }
  .timeline-title { font-size:13px; font-weight:600; color:#0f172a; }
  .timeline-desc { font-size:12px; color:#64748b; margin-top:2px; }

  /* Tabla de endosos / movimientos reales */
  /* ⚠ `flex-wrap` acá + `white-space:nowrap` en el hijo: la barra envuelve ENTRE los dos
     tramos, nunca DENTRO de uno. Sin esto "↩ Renovación de" se partía en dos renglones y la
     tira quedaba de tres líneas con los números colgando (🚩 vigier #146, 9-sep-2026). El
     ancho lo fija la columna del encabezado de la ficha, así que el wrap es inevitable: lo
     que se elige es DÓNDE corta. */
  .renov-bar { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; padding:9px 12px; margin:0 0 12px 0; background:#f0f9ff; border:1px solid #bae6fd; border-radius:8px; font-size:12.5px; color:#075985; }
  .renov-link { display:inline-flex; gap:6px; align-items:center; white-space:nowrap; }
  .renov-link strong { color:#0c4a6e; font-family:inherit; font-size:12px; }
  .renov-goto { color:inherit; text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
  .renov-goto:hover { color:#0369a1; }
  .renov-link strong.renov-huerfana { color:#64748b; cursor:help; }
  /* Chip atómico del combo Asegura2 (ficha de póliza): una asociada = una unidad que no se
     parte — el wrap de la barra ocurre ENTRE chips, nunca adentro de uno. */
  .a2-chip { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; background:#fff; border:1px solid #bae6fd; border-radius:999px; padding:2px 9px; font-size:12px; color:#075985; }
  .a2-chip.a2-total { background:#e0f2fe; cursor:help; }
  .renov-huerfana-tag { margin-left:5px; font-size:10px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:#94a3b8; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:6px; padding:1px 6px; }
  .endosos-resumen { display:flex; gap:18px; padding:10px 12px; margin:0 0 12px 0; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; }
  .endosos-resumen > div { display:flex; flex-direction:column; gap:2px; }
  .endosos-resumen .lbl { font-size:10.5px; color:#64748b; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; }
  .endosos-resumen .val { font-size:14px; color:#0f172a; font-weight:700; }
  .endosos-table { width:100%; border-collapse:collapse; }
  .endosos-table th { text-align:left; padding:9px 12px; font-size:10.5px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:0.6px; background:#f8fafc; border-bottom:1px solid #e2e8f0; }
  .endosos-table th.num { text-align:right; }
  .endosos-table td { padding:9px 12px; border-bottom:1px solid #f1f5f9; font-size:12.5px; color:#1e293b; }
  .endosos-table td.num { text-align:right;  font-family:inherit; font-size:12px; }
  .endosos-table td.nowrap { white-space:nowrap; font-size:12px; }
  .endosos-table tr:hover td { background:#fafbfc; }
  .endosos-table tr.endoso-row-current td { background:#fefce8; }
  .endosos-table td.td-left, .endosos-table th.td-left { text-align:left; font-family:inherit; font-size:12.5px; }
  .endosos-table td.td-left, .endosos-table th.td-left { text-align:left; font-family:inherit; font-size:12.5px; }
  .btn-factura { background:#f1f5f9; border:1px solid #cbd5e1; color:#1e293b; font-size:11px; padding:4px 8px; border-radius:5px; cursor:pointer; white-space:nowrap; transition:all 0.15s; }
  .btn-factura:hover { background:var(--c-primary); color:#fff; border-color:var(--c-primary); }
  .endosos-table tr.endoso-row-current:hover td { background:#fef9c3; }
  .tipo-chip { display:inline-block; padding:3px 9px; border-radius:5px; font-size:11px; font-weight:600; white-space:nowrap; }
  /* Chips para las 4 categorías oficiales (Póliza/Renovación/Anulación/Endoso) */
  .tipo-chip.tipo-p-liza            { background:#dcfce7; color:#15803d; }   /* Póliza   = verde */
  .tipo-chip.tipo-renovaci-n        { background:#dbeafe; color:var(--c-estado-azul); }   /* Renov.   = azul  */
  .tipo-chip.tipo-anulaci-n         { background:#fecaca; color:#991b1b; }   /* Anul.    = rojo  */
  .tipo-chip.tipo-endoso            { background:#f1f5f9; color:#475569; }   /* Endoso   = gris  */
  /* Compatibilidad con clasificación vieja por si quedan endosos sin re-clasificar */
  .tipo-chip.tipo-alta              { background:#dcfce7; color:#15803d; }
  .tipo-chip.tipo-refacturaci-n     { background:#f1f5f9; color:#475569; }
  .tipo-chip.tipo-reducci-n-de-prima{ background:#fed7aa; color:#9a3412; }
  .tipo-chip.tipo-anulaci-n-parcial { background:#fecaca; color:#991b1b; }
  /* Movimiento real del endoso (🚩 bds #62). Namespace PROPIO (mov-*) y no los tipo-* de
     arriba: los tipo-* los comparten las tablas de TODAS las compañías, así que pintar
     "Endoso" de amarillo ahí le cambiaría el color a Galicia/MA/SC, que nadie pidió.
     Sólo Zurich trae `tipoEndosoCrudo`, así que sólo su tabla usa estas clases. */
  .tipo-chip.mov-refacturacion { background:#ede9fe; color:#6d28d9; }   /* violeta */
  .tipo-chip.mov-renovacion    { background:#dbeafe; color:var(--c-estado-azul); }
  .tipo-chip.mov-poliza        { background:#dcfce7; color:#15803d; }
  .tipo-chip.mov-habilitacion  { background:#dcfce7; color:#15803d; }
  .tipo-chip.mov-anulacion     { background:#fecaca; color:#991b1b; }
  .tipo-chip.mov-endoso        { background:#fef9c3; color:#854d0e; }   /* amarillo */
  /* Variante sólo-ícono: el nombre vive en el title (tooltip). */
  .btn-factura.btn-ico { padding:4px 7px; font-size:14px; line-height:1; }

  /* ===== Profile fields (Datos personales) ===== */
  .profile-fields { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
  @media (max-width:1100px){ .profile-fields { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
  @media (max-width:700px){ .profile-fields { grid-template-columns:1fr; } }
  .profile-field { display:flex; align-items:center; gap:11px; padding:11px 12px; background:#fafbfc; border:1px solid #f1f5f9; border-radius:8px; transition:all 0.12s; height:64px; box-sizing:border-box; min-width:0; }
  .profile-field:hover { background:white; border-color:#e2e8f0; }
  .profile-field-icon { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
  .profile-field-icon.blue { background:#dbeafe; color:var(--c-primary); }
  .profile-field-icon.purple { background:#ede9fe; color:#5b21b6; }
  .profile-field-icon.amber { background:#fef3c7; color:#92400e; }
  .profile-field-icon.green { background:#dcfce7; color:#15803d; }
  .profile-field-icon.cyan { background:#cffafe; color:#0e7490; }
  .profile-field-icon.pink { background:#fce7f3; color:#9d174d; }
  .profile-field-icon.gray { background:#f1f5f9; color:#475569; }
  .profile-field-icon.red { background:#fee2e2; color:#991b1b; }
  .profile-field-content { flex:1; min-width:0; overflow:hidden; }
  .profile-field-label { font-size:10px; color:#64748b; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; line-height:1; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .profile-field-value { font-size:13px; color:#0f172a; font-weight:500; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .profile-field-value.muted { color:#94a3b8; font-style:italic; font-weight:400; }
  /* Campo con dropdown (el buscador de Asesor): el overflow:hidden del ellipsis recortaba las
     sugerencias absolute-positioned y el desplegable quedaba invisible (bds, 21-ago-2026). */
  .profile-field.pf-desborda .profile-field-content,
  .profile-field.pf-desborda .profile-field-value { overflow:visible; }
  /* Modificadores semánticos para mantener tipografía consistente */
  .profile-field-value.mono { font-family:inherit; font-size:12.5px; letter-spacing:0.3px; }
  .profile-field-value.strong { font-weight:700; }
  .profile-field-value.wrap { white-space:normal; line-height:1.5; }
  .profile-field-value.link { color:var(--c-primary); }
  .profile-field-value.danger { color:#991b1b; font-weight:600; }
  .profile-field-value.field-padding { padding-top:13px; padding-bottom:13px; }
  /* Lápiz de edición inline de la ficha de Solicitudes (cotización manual, solo org) —
     mismo lenguaje visual que .field-edit-btn (oculto hasta hover de la caja). */
  .sol-edit { margin-left:4px; font-size:11px; text-decoration:none; color:var(--c-text-3); opacity:0.35; transition:opacity var(--t-fast); flex-shrink:0; }
  .profile-field:hover .sol-edit { opacity:1; }
  .sol-edit:hover { color:var(--c-primary); }
  /* Edición inline por campo (✎) */
  .profile-field-value.editable { display:flex; align-items:center; gap:6px; }
  .profile-field-value.editable > .field-val { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
  /* Mientras se edita un campo (panel multi-fuente), la celda crece y deja ver todo el
     panel (incluido "Cerrar"). Sin esto, height:64px + overflow:hidden lo recortan. */
  .profile-field.editing-field { height:auto; min-height:64px; overflow:visible; align-items:stretch; z-index:20; position:relative; }
  .profile-field.editing-field .profile-field-content { overflow:visible; }
  .profile-field.editing-field .profile-field-value { overflow:visible; white-space:normal; }
  .field-edit-btn { background:none; border:none; cursor:pointer; color:var(--c-text-3); font-size:12px; line-height:1; padding:2px 4px; margin-left:auto; border-radius:var(--r-sm); opacity:0.35; transition:opacity var(--t-fast), color var(--t-fast), background var(--t-fast); flex-shrink:0; }
  .profile-field:hover .field-edit-btn { opacity:1; }
  .field-edit-btn:hover { color:var(--c-primary); background:var(--c-accent-bg); }
  /* Candado del campo que este usuario NO edita (hoy: fecha de nacimiento para un PAS).
     Comparte el lugar del ✎ pero NO es un botón: cursor normal y sin hover de acción, para
     que no invite a un click que no hace nada. Se ve siempre, no sólo al hover de la caja:
     su razón de ser es que el que mira ENTIENDA por qué no puede editar (🚩 bds #135). */
  .field-lock { cursor:default; opacity:0.5; }
  .profile-field:hover .field-lock { opacity:0.75; }
  .field-lock:hover { color:var(--c-text-3); background:none; }
  .field-edit-wrap { display:flex; align-items:center; gap:5px; width:100%; }
  .field-edit-input { flex:1; min-width:0; padding:4px 8px; border:1px solid var(--c-secondary); border-radius:var(--r-sm); font:inherit; font-size:13px; outline:none; box-shadow:var(--ring); }
  .field-edit-ok, .field-edit-cancel { border:none; cursor:pointer; border-radius:var(--r-sm); width:24px; height:24px; font-size:12px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; }
  .field-edit-ok { background:var(--c-success-bg); color:var(--c-success); }
  .field-edit-cancel { background:var(--c-danger-bg); color:var(--c-danger); }

  /* ===== Panel multi-fuente (valor por compañía + predeterminado) ===== */
  .fuentes-panel { width:100%; display:flex; flex-direction:column; gap:7px; padding:8px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:var(--r-md, 8px); }
  .fuentes-rows { display:flex; flex-direction:column; gap:3px; }
  .fuente-row { display:flex; align-items:center; gap:8px; padding:5px 7px; border-radius:6px; cursor:pointer; transition:background var(--t-fast); }
  .fuente-row:hover { background:#eef2f7; }
  .fuente-row.is-principal { background:#e0f2fe; }
  .fuente-row input[type=radio] { accent-color:var(--c-primary, var(--c-primary)); flex-shrink:0; cursor:pointer; margin:0; }
  .fuente-val { flex:1; min-width:0; font-size:12.5px; color:#0f172a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .fuente-badges { display:flex; gap:3px; flex-shrink:0; }
  .fuente-badge { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; padding:2px 6px; border-radius:5px; background:#e2e8f0; color:#475569; white-space:nowrap; }
  .fuente-badge.fuente-zurich { background:#dbeafe; color:var(--c-primary); }
  .fuente-badge.fuente-sc { background:#dcfce7; color:#15803d; }
  .fuente-badge.fuente-manual { background:#fef3c7; color:#a16207; }
  .fuente-badge.fuente-arca { background:#e0e7ff; color:#3730a3; }
  /* Conflicto entre fuentes en un dato univaluado (fecha de nacimiento, CUIT, IVA, actividad).
     ⚠ opacity:1 explícito: la fila lo esconde junto al ✎ (que aparece en hover) y el aviso tiene
     que verse siempre. */
  .field-conflicto { margin-left:6px; color:#a16207; opacity:1; cursor:help; }
  /* Valor que NO es un dato sino una deducción (hoy: el sexo cuando el CUIT no lo distingue). */
  .dato-inferido { margin-left:6px; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px;
    padding:2px 5px; border-radius:5px; background:#f1f5f9; color:#64748b; cursor:help; opacity:1; }
  .fuente-del { border:none; background:transparent; cursor:pointer; font-size:11px; padding:2px 4px; border-radius:5px; color:#94a3b8; flex-shrink:0; }
  .fuente-del:hover { background:#fee2e2; color:#b91c1c; }
  .fuente-edit { border:none; background:transparent; cursor:pointer; font-size:11px; padding:2px 4px; border-radius:5px; color:#94a3b8; flex-shrink:0; }
  .fuente-edit:hover { background:#dbeafe; color:var(--c-primary-strong); }
  .fuente-add { display:flex; align-items:center; gap:5px; border-top:1px solid #e2e8f0; padding-top:7px; }
  .fuente-add.dom-add { align-items:flex-end; }
  /* Grilla de domicilio: fila1 calle(3)+nº · fila2 dto+piso+CP(2) · fila3 localidad(2)+provincia(2) */
  .dom-fields { display:grid; grid-template-columns:repeat(4, 1fr); gap:5px; flex:1; min-width:0; }
  .dom-fields input { padding:4px 7px; border:1px solid var(--c-secondary, #cbd5e1); border-radius:var(--r-sm, 6px); font:inherit; font-size:12px; outline:none; min-width:0; width:100%; box-sizing:border-box; }
  .dom-fields .dom-calle { grid-column:span 3; }
  .dom-fields .dom-cp { grid-column:span 2; }
  .dom-fields .dom-loc-wrap { grid-column:span 2; position:relative; min-width:0; }
  .dom-fields .dom-provincia { grid-column:span 2; }
  .dom-loc-sug { text-align:left; }
  .fuentes-actions { display:flex; justify-content:flex-end; }
  .fuente-cerrar { border:none; background:transparent; cursor:pointer; font-size:11px; font-weight:600; color:#64748b; padding:2px 6px; border-radius:5px; }
  .fuente-cerrar:hover { background:#e2e8f0; color:#0f172a; }

  /* ===== Datos bancarios ===== */
  .bancarios-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  @media (max-width:900px) { .bancarios-grid { grid-template-columns:1fr; } }
  .cbus-list, .tarjetas-list { display:flex; flex-direction:column; gap:8px; }
  .cbu-item, .tarjeta-item { display:flex; align-items:center; gap:12px; padding:11px 14px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; transition:border-color 0.12s; min-height:60px; box-sizing:border-box; }
  .cbu-item:hover, .tarjeta-item:hover { border-color:#cbd5e1; }
  .cbu-badge, .tarjeta-marca { width:60px; height:36px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:11px; color:white; flex-shrink:0; letter-spacing:0.8px; }
  .cbu-badge { background:linear-gradient(135deg,var(--c-primary),#0891b2); }
  .tarjeta-marca.visa { background:#1A1F71; }
  .tarjeta-marca.mastercard { background:linear-gradient(135deg,#EB001B,#F79E1B); }
  .tarjeta-marca.amex { background:#006FCF; }
  .tarjeta-marca.cabal { background:#0072CE; }
  .tarjeta-marca.naranja { background:linear-gradient(135deg,#FF6900,#F7941E); }
  .cbu-info, .tarjeta-info { display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
  .cbu-banco, .tarjeta-tipo { font-size:10.5px; color:#64748b; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; line-height:1; }
  .cbu-display, .tarjeta-numero { font-family:inherit; font-size:13px; font-weight:400; color:#0f172a; letter-spacing:0.4px; line-height:1.2; }
  .bancarios-empty { padding:14px; text-align:center; color:#94a3b8; font-size:12.5px; font-style:italic; background:#f8fafc; border:1px dashed #e2e8f0; border-radius:8px; min-height:60px; display:flex; align-items:center; justify-content:center; }
  .bancario-form { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px; padding:12px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; }
  .bancario-form .banc-fields { display:flex; gap:8px; flex-wrap:wrap; flex:1; }
  .bancario-form select, .bancario-form input { font-size:12.5px; padding:6px 9px; border:1px solid #cbd5e1; border-radius:6px; background:white; color:#0f172a; }
  .bancario-form input { flex:1; min-width:120px; }
  .banc-form-actions { display:flex; gap:6px; }
  .banc-del { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid #e2e8f0; background:#fff; cursor:pointer; font-size:13px; line-height:1; padding:0; border-radius:7px; color:#94a3b8; flex-shrink:0; transition:all 0.15s; }
  .banc-del:hover { background:#fee2e2; border-color:#fecaca; color:#b91c1c; }

  /* ===== Revelado del medio de pago (CBU / nº de tarjeta) =====
     Botón discreto: es una acción POCO frecuente y con costo (pide la contraseña), así que
     no compite con la lectura de la ficha. Mismo alto que .banc-del para que la fila del CBU
     no cambie de altura al aparecer/desaparecer según el rol. */
  /* En la ficha de póliza el botón vive en la fila del RÓTULO (el valor necesita los 236px
     de la celda enteros, ver el comentario en js/polizas.js). `overflow:visible` porque
     .profile-field-label recorta con ellipsis y se comería el botón. */
  .profile-field-label.mp { display:flex; align-items:center; gap:8px; overflow:visible; }
  .profile-field-label.mp .mp-ver { height:18px; padding:0 6px; font-size:10px; letter-spacing:0.3px; margin-left:0; }
  /* Botón 🔒 del campo CBU/Tarjeta de la orden de emisión: aparece SÓLO cuando el campo muestra
     la máscara de un medio del cliente (elegirlo del selector no destapa nada, Martín 10-sep-2026).
     Va debajo del input, discreto: no es una acción del flujo normal. */
  .oe-ver-medio { margin-top:4px; border:0; background:none; padding:0; cursor:pointer; font-size:11.5px; font-weight:600; color:#64748b; }
  .oe-ver-medio:hover { color:#1d4ed8; text-decoration:underline; }
  .oe-ver-medio:disabled { opacity:.6; cursor:default; text-decoration:none; }
  .mp-ver { display:inline-flex; align-items:center; gap:4px; height:28px; margin-left:8px; padding:0 9px; border:1px solid #e2e8f0; background:#fff; border-radius:7px; cursor:pointer; font-size:11.5px; font-weight:600; line-height:1; color:#64748b; flex-shrink:0; white-space:nowrap; vertical-align:middle; transition:all 0.15s; }
  .mp-ver:hover { background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }
  .mp-ver:disabled { opacity:.55; cursor:default; }
  /* El valor destapado se distingue a propósito: que se note que eso NO es lo que se ve
     normalmente, y que vuelve a taparse solo.
     ⚠ SIN letter-spacing ni padding generoso: el número destapado con separadores es MÁS
     largo que su máscara y la celda recorta por la derecha, o sea justo los últimos dígitos.
     Lo pinea scripts/probe-medio-pago-ui.mjs midiendo el desborde real. */
  .mp-abierto .mp-rotulo { display:none; }
  .mp-revelado { background:#eff6ff; border-radius:4px; padding:1px 3px; color:#1d4ed8; font-weight:600; letter-spacing:normal; cursor:pointer; }

  /* ===== Cross-selling ===== */
  .cross-selling-card { background:linear-gradient(135deg,#fef3c7 0%,#fef9e7 50%,#ffffff 100%); border:1px solid #fde68a; }
  .cross-selling-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  @media (max-width:900px){ .cross-selling-grid { grid-template-columns:1fr; } }
  .cross-item { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:14px; border:1px solid #e2e8f0; border-radius:10px; background:white; transition:all 0.15s; }
  .cross-item:hover { border-color:var(--c-secondary); box-shadow:0 4px 12px rgba(15,23,42,0.06); transform:translateY(-1px); }
  .cross-item.priority-alta { border-left:4px solid #ef4444; }
  .cross-item.priority-media { border-left:4px solid #f59e0b; }
  .cross-item.priority-baja { border-left:4px solid #94a3b8; }
  .cross-icon { width:44px; height:44px; border-radius:10px; background:#f1f5f9; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
  .cross-info { min-width:0; }
  .cross-ramo { font-size:13.5px; font-weight:700; color:#0f172a; line-height:1.2; }
  .cross-razon { font-size:11.5px; color:#64748b; margin-top:4px; line-height:1.4; }
  .cross-priority { font-size:9.5px; margin-top:6px; text-transform:uppercase; letter-spacing:0.6px; font-weight:700; }
  .cross-priority.alta { color:#dc2626; }
  .cross-priority.media { color:#d97706; }
  .cross-priority.baja { color:#64748b; }
  .cross-action { background:var(--c-primary); color:white; border:none; padding:7px 12px; border-radius:6px; font-size:11.5px; font-weight:600; cursor:pointer; white-space:nowrap; transition:background 0.15s; }
  .cross-action:hover { background:var(--c-primary-700); }
  .cross-empty { padding:24px; text-align:center; color:#94a3b8; font-size:13px; font-style:italic; }

  /* Pólizas (vista en ficha de asegurado) - tabla compacta */
  .policies-card { padding:0; }
  .policies-header { padding:18px 20px 12px; border-bottom:1px solid #f1f5f9; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
  .policies-title { font-size:13.5px; font-weight:700; display:flex; align-items:center; gap:8px; }
  .empty-policies { padding:50px 20px; text-align:center; color:#94a3b8; font-size:13px; }

  /* ===== Pólizas cards (nuevo estilo) ===== */
  .polizas-cards { display:flex; flex-direction:column; gap:10px; padding:16px 20px 20px; }
  .poliza-card { display:grid; grid-template-columns:auto 1fr auto auto; gap:14px; padding:14px 16px; background:#fafbfc; border:1px solid #e2e8f0; border-radius:10px; cursor:pointer; transition:all 0.15s; align-items:center; }
  .poliza-card:hover { background:white; border-color:var(--c-secondary); box-shadow:0 4px 14px rgba(15,23,42,0.07); transform:translateX(2px); }
  .poliza-card-icon { width:48px; height:48px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
  .poliza-card-content { min-width:0; flex:1; }
  .poliza-card-line1 { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:3px; }
  .poliza-card-ramo { font-size:14.5px; font-weight:700; color:#0f172a; line-height:1.2; }
  .poliza-card-bien { font-size:11.5px; color:#64748b; font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .poliza-card-meta { display:flex; gap:14px; margin-top:8px; flex-wrap:wrap; font-size:11.5px; color:#475569; align-items:center; }
  .poliza-card-meta-item { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
  .poliza-card-meta-divider { width:1px; height:14px; background:#e2e8f0; }
  .cia-chip-logo { width:18px; height:18px; border-radius:4px; object-fit:contain; background:#fff; flex-shrink:0; }
  /* Marca DISCRETA de carga manual sobre el logo de la compañía (ciaLogoPoliza, js/helpers.js):
     punto ámbar en la esquina. El wrapper es inline-flex y sin tamaño propio para no correr
     nada de lugar; el aro blanco lo despega del isotipo. El significado lo da el title. */
  .cia-logo-manual { position:relative; display:inline-flex; flex-shrink:0; }
  .cia-logo-manual::after { content:''; position:absolute; top:-3px; right:-3px; width:8px; height:8px; border-radius:50%; background:#d97706; border:1.5px solid #fff; box-sizing:border-box; }
  .poliza-card-premio { text-align:right; min-width:110px; }
  .poliza-card-premio-monto { font-size:14.5px; font-weight:700; color:#15803d; line-height:1.2; }
  .poliza-card-premio-label { font-size:10.5px; color:#94a3b8; text-transform:uppercase; letter-spacing:0.4px; margin-top:2px; }
  .poliza-card-arrow { color:#cbd5e1; font-size:18px; transition:all 0.15s; flex-shrink:0; }
  .poliza-card:hover .poliza-card-arrow { color:var(--c-secondary); transform:translateX(4px); }
  .empty-polizas-card { padding:48px 20px; text-align:center; color:#94a3b8; }
  .empty-polizas-icon { font-size:42px; margin-bottom:10px; opacity:0.4; }
  .empty-polizas-text { font-size:14px; font-weight:600; color:#475569; margin-bottom:4px; }
  .empty-polizas-sub { font-size:12px; color:#94a3b8; }

  /* Avatar gradients (azulados) */
  .av-1 { background:linear-gradient(135deg,var(--c-primary),var(--c-secondary)); }
  .av-2 { background:linear-gradient(135deg,#0c4a6e,#0284c7); }
  .av-3 { background:linear-gradient(135deg,var(--c-primary-700),#06b6d4); }
  .av-4 { background:linear-gradient(135deg,#155e75,#0ea5e9); }
  .av-5 { background:linear-gradient(135deg,var(--c-primary),#7c3aed); }
  .av-6 { background:linear-gradient(135deg,#0f172a,var(--c-secondary)); }
  .av-7 { background:linear-gradient(135deg,var(--c-primary-700),#22d3ee); }
  .av-8 { background:linear-gradient(135deg,#075985,#38bdf8); }
  /* Fallback: avatares con clase legada "blue" (asegurados reales Zurich/SC) → gradiente corporativo */
  .name-avatar.blue, .detail-avatar.blue { background:linear-gradient(135deg,var(--c-primary),var(--c-secondary)); }

  /* ===== Usuarios / Equipo ===== */
  .usuario-row { display:flex; align-items:center; gap:12px; padding:8px 8px; border-bottom:1px solid var(--c-border-soft); cursor:pointer; transition:background var(--t-fast); border-radius:var(--r-sm); }
  .usuario-row.sub { margin-left:30px; }  /* asesores/empleados indentados bajo su jefe */
  .usuarios-filtros { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
  .uf-chip { font-size:12px; font-weight:600; padding:6px 14px; border-radius:var(--r-pill); border:1px solid var(--c-border-soft); background:white; color:var(--c-text-2); cursor:pointer; transition:all 0.12s; }
  .uf-chip:hover { border-color:var(--c-primary); color:var(--c-primary); }
  .uf-chip.active { background:var(--c-primary); border-color:var(--c-primary); color:white; }
  .usuario-row:last-child { border-bottom:none; }
  .usuario-row:hover { background:var(--c-bg); }
  .usuario-row.inactivo { opacity:0.55; }
  .usuario-avatar { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-weight:700; font-size:11px; flex-shrink:0; }
  /* Fila en UNA sola línea: nombre+chips a la izquierda, meta (jerarquía/email) a la derecha */
  .usuario-main { flex:1; min-width:0; display:flex; align-items:center; gap:10px; }
  .usuario-name { font-size:13.5px; font-weight:400; color:var(--c-text); display:flex; align-items:center; gap:8px; white-space:nowrap; overflow:hidden; }
  .usuario-rol { font-size:10px; font-weight:700; padding:2px 8px; border-radius:var(--r-pill); text-transform:uppercase; letter-spacing:0.4px; }
  .usuario-rol.organizador { background:var(--c-accent-bg); color:var(--c-accent); }
  .usuario-rol.productor { background:#dbeafe; color:var(--c-primary); }
  .usuario-rol.socio { background:#f3e8ff; color:#7e22ce; }
  .usuario-rol.asesor { background:#eef2ff; color:#4338ca; }
  .usuario-rol.empleado { background:#f0fdf4; color:#15803d; }
  .usuario-rol.inactivo { background:var(--c-danger-bg); color:var(--c-danger); }
  .usuario-rol.sinacceso { background:#f1f5f9; color:#64748b; }
  /* COLORES DE MEMBRESÍA — el hex vive ACÁ y en ningún otro lado. Lo consumen tres superficies
     (el chip del listado, la placa del saludo y los swatches del editor); antes estaba copiado en
     cada una y agregar un color pedía tocar las tres.
     ⚠ Colores FIJOS, nunca --c-primary: ese cambia por tenant y dos membresías del mismo color
     dejarían de distinguirse. ⚠ `colorado` va TERROSO, no el rojo de alerta: ese ya significa
     deuda/error en la app y un PAS no debería ver su membresía con el color de un problema.
     ⚠ Toda key nueva acá necesita su entrada en COLORES_MEMBRESIA (lib/membresias-pas.mjs) y en
     la paleta del editor, o el saneo del PUT la degrada a gris sin avisar. */
  .memb-verde-oscuro   { --memb-c:#1B5E3A; }
  .memb-oro            { --memb-c:#BA7517; }
  .memb-ocre           { --memb-c:#B45309; }
  .memb-bordo          { --memb-c:#8E2A20; }
  .memb-violeta-oscuro { --memb-c:#4A2477; }
  .memb-verde          { --memb-c:#1B6E3C; }
  .memb-mostaza        { --memb-c:#CA8A04; --memb-fg:#3F2D00; }
  .memb-naranja        { --memb-c:#D85A30; }
  .memb-colorado       { --memb-c:#C0392B; }
  .memb-violeta        { --memb-c:#5B2D91; }
  .memb-verde-claro    { --memb-c:#3FA372; --memb-fg:#0B2E1C; }
  .memb-amarillo       { --memb-c:#EAB308; --memb-fg:#3F2D00; }
  .memb-ambar          { --memb-c:#F59E0B; --memb-fg:#4A2E00; }
  .memb-salmon         { --memb-c:#F08A6E; --memb-fg:#4A1B0C; }
  .memb-lila           { --memb-c:#A78BFA; --memb-fg:#2E1065; }
  .memb-azul-oscuro    { --memb-c:#1E3A8A; }
  .memb-petroleo       { --memb-c:#155E75; }
  .memb-oliva          { --memb-c:#4D7C0F; }
  .memb-ciruela        { --memb-c:#86164F; }
  .memb-gris-oscuro    { --memb-c:#475569; }
  .memb-azul           { --memb-c:#2563EB; }
  .memb-celeste        { --memb-c:#378ADD; }
  .memb-verde-lima     { --memb-c:#65A30D; --memb-fg:#1B2A05; }
  .memb-magenta        { --memb-c:#C2418A; }
  .memb-gris           { --memb-c:#64748b; }
  .memb-celeste-claro  { --memb-c:#60A5FA; --memb-fg:#0C2C5A; }
  .memb-cielo          { --memb-c:#7DD3FC; --memb-fg:#0C3A52; }
  .memb-lima           { --memb-c:#A3E635; --memb-fg:#243B02; }
  .memb-rosa           { --memb-c:#F472B6; --memb-fg:#4B1028; }
  .memb-gris-claro     { --memb-c:#94A3B8; --memb-fg:#1F2937; }

  /* Chip de MEMBRESÍA en el listado de Usuarios. Mismo lenguaje que .usuario-rol, que vive al
     lado. Fondo saturado + texto blanco (y no pálido + oscuro) para que se lea igual acá y en el
     título de 22px del dashboard. */
  .membresia-chip { font-size:10px; font-weight:700; padding:2px 8px; border-radius:var(--r-pill); text-transform:uppercase; letter-spacing:0.4px; white-space:nowrap; background:var(--memb-c); color:var(--memb-fg,#fff); }

  /* PLACA del saludo del dashboard. Mismo dato que .membresia-chip, otra escala: pegada al nombre
     con el fondo sólido del color elegido (Martín, 3-ago-2026).
     ⚠ 13px y no 10px: acá convive con un título de 22px y al tamaño del listado se perdía.
     ⚠ vertical-align + el top negativo la centran ópticamente contra la mayúscula del título. */
  .memb-placa { display:inline-block; margin-left:12px; padding:4px 13px; border-radius:var(--r-pill); font-size:13px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; vertical-align:middle; position:relative; top:-2px; white-space:nowrap; background:var(--memb-c); color:var(--memb-fg,#fff); }
  /* "Aliados" es el rótulo, el nombre es el dato: va más liviano para que el que manda sea la
     membresía. Los dos en blanco sobre el color — la jerarquía la da el peso, no la opacidad
     (bajar la opacidad sobre un fondo saturado ensucia el color en vez de aclarar el texto). */
  .memb-placa-rotulo { font-weight:500; }

  /* SELECTOR de color del editor: un trigger que muestra el color actual y abre una GRILLA de
     swatches (pedido de Martín, con la referencia del selector de etiquetas de Trello). Un select
     nativo no sirve: sólo puede listar los NOMBRES, y lo que hay que elegir es el color.
     ⚠ La grilla va `position:fixed` con coordenadas calculadas al abrir, NO `absolute` dentro de
     la fila: `.modal` tiene `overflow:auto` + `max-height:90vh`, así que un popover en el flujo
     del modal queda RECORTADO. Cambiar el `.modal` global para arreglarlo tocaría todos los
     modales de la app; posicionarlo fijo lo resuelve sin efectos colaterales. */
  .memb-color-wrap { position:relative; flex-shrink:0; }
  .memb-color-trigger { display:flex; align-items:center; gap:6px; height:36px; padding:0 10px; border:1px solid var(--c-border-soft); border-radius:8px; background:white; cursor:pointer; }
  .memb-color-trigger:hover { border-color:var(--c-primary); }
  .memb-caret { font-size:10px; color:var(--c-text-2); line-height:1; }
  .memb-paleta { position:fixed; z-index:9100; display:grid; grid-template-columns:repeat(5, 30px); gap:7px; padding:10px; background:white; border:1px solid var(--c-border-soft); border-radius:10px; box-shadow:0 8px 24px rgba(15,23,42,0.14); }
  .memb-paleta[hidden] { display:none; }
  /* El swatch: círculo dentro del trigger, rectángulo redondeado dentro de la grilla (como la
     referencia). El elegido lleva un TILDE, no un borde — un borde cambiaría su tamaño y la
     grilla saltaría al elegir. */
  .memb-sw { width:22px; height:22px; border-radius:50%; border:none; padding:0; background:var(--memb-c); box-shadow:0 0 0 1px rgba(15,23,42,0.12); flex-shrink:0; }
  .memb-paleta .memb-sw { width:30px; height:30px; border-radius:7px; cursor:pointer; position:relative; transition:transform 0.12s; }
  .memb-paleta .memb-sw:hover { transform:scale(1.08); }
  .memb-paleta .memb-sw[aria-pressed="true"]::after { content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--memb-fg,#fff); font-size:15px; font-weight:700; text-shadow:0 1px 2px rgba(0,0,0,0.35); }

  /* Editor del catálogo de membresías (modal desde la toolbar de Usuarios). Una fila por
     membresía: nombre elástico, color angosto, preview del chip y los 3 botones de acción.
     El reorden va con flechas, NO con drag-and-drop HTML5 (no existe en touch). */
  .memb-editor { display:flex; flex-direction:column; gap:8px; }
  .memb-row { display:flex; align-items:center; gap:8px; }
  .memb-row > .form-input:first-child { flex:1; min-width:0; }
  .memb-row > select.form-input { width:110px; flex-shrink:0; }
  .memb-row > .membresia-chip { flex-shrink:0; min-width:64px; text-align:center; }
  .memb-btn { border:1px solid var(--c-border-soft); background:white; color:var(--c-text-2); border-radius:6px; width:30px; height:30px; flex-shrink:0; cursor:pointer; font-size:13px; line-height:1; transition:all 0.12s; }
  .memb-btn:hover:not(:disabled) { border-color:var(--c-primary); color:var(--c-primary); }
  .memb-btn:disabled { opacity:0.35; cursor:not-allowed; }
  .memb-btn.danger:hover { border-color:var(--c-danger); color:var(--c-danger); }
  .usuario-meta { font-size:12px; color:var(--c-text-2); margin-left:auto; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex-shrink:0; }
  .usuario-creds { display:flex; gap:6px; margin-top:7px; flex-wrap:wrap; }
  .cred-chip { font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:var(--r-pill); }
  .cred-chip.own { background:var(--c-success-bg); color:var(--c-success); }
  .cred-chip.inherit { background:#eef2ff; color:#4338ca; }
  .cred-chip.env { background:#f1f5f9; color:var(--c-text-2); }
  .usuario-arrow { color:var(--c-text-3); font-size:15px; flex-shrink:0; }
  .usuario-row:hover .usuario-arrow { color:var(--c-primary); }
  .btn-danger { background:var(--c-danger-bg); color:var(--c-danger); border:1px solid #fecaca; padding:9px 16px; border-radius:var(--r-sm); font-weight:600; cursor:pointer; font-size:13px; transition:all var(--t-fast); }
  .btn-danger:hover { background:#fecaca; }
  .cred-blocks { display:flex; flex-direction:column; gap:14px; }
  .cred-block { border:1px solid var(--c-border); border-radius:var(--r-md); padding:14px; background:var(--c-bg); }
  .cred-block-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
  .cred-block-title { font-weight:700; font-size:13.5px; color:var(--c-text); }
  /* Compañías como acordión: la tarjeta cerrada es solo la barra del head; el padding vive en
     head y body (no en el bloque) para que colapsada quede compacta. */
  .cred-collapsible { padding:0; overflow:hidden; }
  .cred-block-toggle { padding:12px 14px; cursor:pointer; user-select:none; transition:background 0.12s; }
  .cred-block-toggle:hover { background:var(--c-bg-2,#f8fafc); }
  .cred-chevron { display:inline-block; transition:transform 0.15s; color:var(--c-text-3); font-size:11px; margin-right:4px; }
  .cred-collapsible.abierta .cred-chevron { transform:rotate(90deg); }
  .cred-collapsible.abierta .cred-block-toggle { border-bottom:1px solid var(--c-border); }
  .cred-block-body { padding:0 14px 14px; }
  .cred-toggle { font-size:12.5px; color:var(--c-text-2); display:flex; align-items:center; gap:6px; cursor:pointer; user-select:none; }
  .cred-block-hint { font-size:12px; color:var(--c-text-3); font-style:italic; margin-top:8px; }
  .cred-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); gap:10px 14px; margin-top:12px; }
  .u-doc-acciones { display:flex; gap:6px; align-items:center; flex-shrink:0; }
  .u-doc-acciones .btn-secondary, .u-doc-acciones .btn-danger { padding:5px 10px; font-size:12px; text-decoration:none; }

  /* ===== Cotizador ===== */
  .cotizador-form { display:flex; flex-direction:column; gap:14px; }
  /* Recotizar una póliza con CP ambiguo: se destapa el contenedor del form SOLO para preguntar
     la localidad, y el form nunca se llenó (el input se arma en memoria) → sin esto el PAS ve
     su cliente y su vehículo EN BLANCO y lo reporta como "no me trae los datos" (🚩 bds #333). */
  #cotizador-form-container.cot-solo-picker > *:not(.cotizador-form) { display:none; }
  #cotizador-form-container.cot-solo-picker .cotizador-form > *:not(#cot-localidad-picker) { display:none; }
  .form-section { background:white; border:1px solid #e2e8f0; border-radius:10px; padding:18px 20px; }
  .form-section-title { font-size:13px; font-weight:700; color:#0f172a; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid #f1f5f9; display:flex; align-items:center; gap:8px; }
  .form-section-title .step-num { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; background:var(--c-primary); color:white; border-radius:50%; font-size:11px; font-weight:700; }
  .form-toggle { display:flex; gap:8px; margin-bottom:14px; }
  .form-toggle label { flex:1; padding:10px 12px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; cursor:pointer; font-size:13px; color:#334155; font-weight:500; text-align:center; transition:all 0.12s; }
  .form-toggle label:hover { background:#f1f5f9; }
  .form-toggle label:has(input:checked) { background:#dbeafe; border-color:var(--c-secondary); color:var(--c-primary); font-weight:600; }
  .form-toggle input { display:none; }
  /* Resumen del cliente elegido (reemplaza los campos duplicados, jun 2026) */
  .cli-res-card { background:#f8fafc; border:1px solid #bfdbfe; border-radius:10px; padding:14px 16px; margin-top:12px; }
  .cli-res-head { display:flex; align-items:flex-start; gap:12px; }
  .cli-res-avatar { width:42px; height:42px; border-radius:50%; background:#dbeafe; color:var(--c-primary); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; flex-shrink:0; }
  .cli-res-main { flex:1; min-width:0; }
  .cli-res-name-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .cli-res-name { font-size:15px; font-weight:700; color:#0f172a; }
  .cli-res-badge { display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:600; color:#15803d; background:#dcfce7; padding:2px 9px; border-radius:999px; }
  .cli-res-sub { font-size:12.5px; color:#64748b; margin-top:3px; }
  .cli-res-actions { display:flex; gap:6px; flex-shrink:0; }
  .cli-res-btn { font-size:12px; color:var(--c-primary); background:white; border:1px solid #e2e8f0; border-radius:7px; padding:5px 11px; cursor:pointer; font-weight:600; }
  .cli-res-btn:hover { background:#eff6ff; border-color:#bfdbfe; }
  .cli-res-chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px solid #e2e8f0; }
  .cli-res-chip { font-size:12px; color:#334155; background:white; border:1px solid #e2e8f0; padding:5px 10px; border-radius:8px; }
  .cli-res-k { color:#94a3b8; font-weight:600; margin-right:2px; }
  .form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px 18px; }
  .form-field { display:flex; flex-direction:column; gap:5px; min-width:0; }
  .form-field-label { font-size:11.5px; color:#475569; font-weight:600; }
  .form-field-label .req { color:#dc2626; }
  /* Asterisco de obligatorio SIEMPRE rojo, también fuera de .form-field-label (subtítulos). */
  .req { color:#dc2626; }
  .form-input { width:100%; padding:8px 12px; border:1px solid #cbd5e1; border-radius:6px; font-size:13px; color:#0f172a; background:white; outline:none; transition:border-color 0.15s; font-family:inherit; }
  .form-input:focus { border-color:var(--c-secondary); box-shadow:0 0 0 3px rgba(var(--c-secondary-rgb),0.15); }
  .form-input:disabled { background:#f1f5f9; cursor:not-allowed; }
  /* Acciones de contraseña (ficha de usuario): van en el grid de Datos, al lado del campo
     "Contraseña de acceso", NO en el pie de la ficha — ahí quedaban a tres scrolls del
     desplegable que las habilita (reporte de Martín, 18-jul). Ocupan 2 columnas para que
     los dos botones entren en una línea; el label vacío los alinea con los inputs vecinos. */
  /* justify-content:flex-end alinea los botones con los INPUTS vecinos (el .form-field es
     flex column y los otros tienen label arriba) — sin el truco del label con &nbsp;. */
  #u-acciones-clave { grid-column:span 2; justify-content:flex-end; }
  .u-acciones-clave-btns { display:flex; gap:8px; flex-wrap:wrap; }
  .u-acciones-clave-btns button {
    display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
    padding:8px 14px; border-radius:6px; font-size:12.5px; font-weight:600;
    font-family:inherit; cursor:pointer; transition:filter .15s ease, background .15s ease, border-color .15s ease;
  }
  /* Acción principal con el verde de WhatsApp: el color dice a dónde te lleva. Mismo #25D366
     que .cumple-wa-btn y .cot-ficha-alta-btn — una sola marca en toda la app. */
  .u-btn-wa { border:none; background:#25D366; color:#fff; font-weight:700; }
  .u-btn-wa:hover { filter:brightness(1.08); }
  .u-btn-wa:active { filter:brightness(.95); }
  /* El reseteo es la salida de escape (pasar la clave a mano): queda en segundo plano. */
  .u-btn-clave { border:1px solid #cbd5e1; background:transparent; color:#475569; }
  .u-btn-clave:hover { background:#f1f5f9; border-color:#94a3b8; }
  .form-input[readonly] { background:#f8fafc; color:#475569; cursor:default; }
  .loc-suggestions { position:absolute; top:calc(100% + 4px); left:0; right:0; background:white; border:1px solid #e2e8f0; border-radius:8px; box-shadow:0 8px 22px rgba(15,23,42,0.12); max-height:280px; overflow-y:auto; z-index:200; }
  .loc-sug-item { padding:8px 12px; cursor:pointer; font-size:12.5px; color:#0f172a; border-bottom:1px solid #f1f5f9; display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .loc-sug-item:last-child { border-bottom:none; }
  /* Sólo los ítems que llevan la línea "Provincia · CP" (los ambiguos) se apilan: al lado del
     nombre no hay ancho en una columna angosta y lo partía palabra por palabra. Sin meta, el
     ítem tiene un solo hijo y se ve exactamente igual que antes. */
  .loc-sug-item.loc-sug-2l { flex-direction:column; align-items:flex-start; gap:2px; }
  .loc-sug-item:hover, .loc-sug-item.active { background:#eff6ff; }
  .loc-sug-loc { font-weight:600; color:#0f172a; }
  .loc-sug-meta { font-size:11px; color:#64748b; white-space:nowrap; }
  .loc-sug-empty { padding:14px; text-align:center; color:#94a3b8; font-size:12.5px; }
  /* Buscador de productor de la orden de emisión. Cada ítem es "Nombre + su código en la cía", y
     al ancho del campo (196px) el `white-space:nowrap` del meta se queda con el espacio y parte el
     NOMBRE en dos renglones. Dos correcciones: (1) el desplegable se ancha por su cuenta — es un
     overlay absoluto, no empuja nada; (2) el que trunca es el CÓDIGO, no el nombre, porque el
     nombre es contra lo que uno busca. `min-width:0` es obligatorio: sin eso un hijo flex no
     encoge por debajo de su contenido y el ellipsis no llega a activarse nunca. */
  #oe-pas-suggestions { min-width:min(340px, 88vw); }
  #oe-pas-suggestions .loc-sug-loc { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
  #oe-pas-suggestions .loc-sug-meta { overflow:hidden; text-overflow:ellipsis; min-width:0; }
  /* Fila "Cotizar como" + "Cliente" del cotizador (mitad y mitad, jul-2026). Si uno de los
     dos campos está oculto, el otro toma la fila entera. En mobile manda la media query
     genérica de .form-grid (1 columna, !important). */
  /* "Datos del intermediario" de los 3 cotizadores: organizador · productor · asesor.
     `auto-fit` y no `repeat(3,1fr)` porque el campo del PRODUCTOR nace `hidden` (lo muestra
     poblarSociedadSelect sólo si el usuario tiene elegibles) — con columnas fijas eso dejaba
     una columna vacía en el medio. Con auto-fit, los que quedan visibles reparten la fila. */
  .cot-interm-grid { grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
  @media (max-width:900px){ .cot-interm-grid { grid-template-columns:1fr; } }
  .cot-cliente-fila { grid-template-columns:1fr 1fr; margin-bottom:10px; }
  /* Desde que el PAS se fue a "Datos del intermediario", el buscador de cliente suele quedar
     SOLO en su fila: sin esto tomaba media fila y dejaba la otra mitad muerta. */
  .cot-cliente-fila > .form-field:only-child { grid-column:1 / -1; }
  /* Reglas GENÉRICAS (autos/hogar/médicos comparten la fila): si un campo está oculto,
     el visible toma la fila entera. */
  .cot-cliente-fila > .form-field[hidden] ~ .form-field { grid-column:1 / -1; }
  .cot-cliente-fila:has(> .form-field[hidden]:last-child) > .form-field:first-child { grid-column:1 / -1; }
  /* ── Densidad compacta del cotizador de AUTO (pedido jul-2026): que la carga de datos
     (cliente + vehículo) entre en una pantalla sin scroll. Scopeado a .cotizador-form:not([id]):
     el form de auto es el ÚNICO sin id; hogar (#hogar-form) y médicos (#medicos-form) NO se tocan.
     Solo recorta espacios/paddings — no cambia la grilla ni el JS. ── */
  .cotizador-form:not([id]) { gap:10px; }
  .cotizador-form:not([id]) .sol-ia-lector { margin-top:0; padding:9px 14px; }
  .cotizador-form:not([id]) .form-section { padding:12px 18px; }
  .cotizador-form:not([id]) .form-section-title { margin-bottom:10px; padding-bottom:8px; }
  .cotizador-form:not([id]) .form-grid { gap:14px 20px; }
  .cotizador-form:not([id]) .cot-cliente-fila { margin-bottom:6px; }
  /* Fila del vehículo del cotizador: Patente (Datacar, busca sola y elige el tipo) · Vehículo
     (Auto/Moto/Camión) · Marca · Año · Modelo · Versión · Uso en UNA línea. Patente, tipo y Año
     angostos; Versión la más ancha, es el texto largo (pedidos de Martín, 23 y 25-sep-2026). Bajo
     1200px vuelve al auto-fit de .form-grid, que en mobile ya queda en una columna. */
  .veh-grid { grid-template-columns:130px 120px minmax(0,1.2fr) 100px minmax(0,1fr) minmax(0,1.4fr); }
  /* Fila 2: Localidad · Uso · Accesorios · (Valor del GNC) · Medio de pago. El valor del GNC NO reserva
     lugar (dejaba un hueco en blanco): con GNC elegido la fila pasa a 5 columnas (Martín, 28-sep-2026). */
  .veh-grid-2 { grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr); }
  .veh-grid-2:has(> #gnc-valor-wrapper:not([hidden])) { grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr); }
  /* Localidad y provincia en UN campo (como el cotizador manual, 25-sep-2026): la provincia (y el
     CP) se muestran en gris dentro del input de localidad; el dato sigue en su input oculto. */
  .loc-prov-tag { position:absolute; right:12px; bottom:8px; max-width:55%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:#64748b; pointer-events:none; }
  @media (max-width:1200px){ .veh-grid, .veh-grid-2 { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); } }
  .veh-patente-input { text-transform:uppercase; }
  /* toggle Individuo/Empresa: los márgenes inline (12/14px) son espacio muerto → los comprimo */
  .cotizador-form:not([id]) .form-toggle { margin:8px 0 10px !important; }
  /* Campos más grandes y con aire (Martín, 28-sep-2026: «muy pegados, chicos, cortados»). */
  .cotizador-form:not([id]) .form-field { gap:6px; }
  .cotizador-form:not([id]) .form-field-label { font-size:12.5px; }
  .cotizador-form:not([id]) .form-input { padding:10px 12px; font-size:14px; }
  .cotizador-form:not([id]) input.form-input, .cotizador-form:not([id]) select.form-input { height:40px; box-sizing:border-box; }
  .cotizador-form:not([id]) .loc-prov-tag { bottom:11px; }
  .cotizador-form:not([id]) select.form-input { padding:6px 32px 6px 12px; }
  .cotizador-form:not([id]) .form-field-hint { margin-top:3px; }
  .cotizador-form:not([id]) .form-actions { padding-top:0; }
  /* Fila "➕ Cliente nuevo" del buscador del cotizador (progressive disclosure, jul-2026) */
  .loc-sug-nuevo { background:#eff6ff; }
  .loc-sug-nuevo .loc-sug-loc { color:#1d4ed8; }
  .loc-sug-nuevo:hover, .loc-sug-nuevo.active { background:#dbeafe; }
  select.form-input { padding:7px 32px 7px 12px; cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 8px center; background-size:14px; }
  .form-checks { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
  .check-pill { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:20px; cursor:pointer; font-size:12.5px; font-weight:500; color:#334155; transition:all 0.12s; user-select:none; }
  .check-pill:hover { border-color:#cbd5e1; background:#f1f5f9; }
  .check-pill input { accent-color:var(--c-primary); }
  .check-pill:has(input:checked) { background:#dbeafe; border-color:var(--c-secondary); color:var(--c-primary); }
  .check-pill .cob-code { display:inline-block; padding:1px 5px; background:rgba(var(--c-primary-rgb),0.15); border-radius:3px; font-size:10px; font-weight:700; }
  .form-actions { display:flex; gap:10px; justify-content:flex-end; padding:6px 0 0; }
  .form-section-subtitle { font-size:11.5px; color:#475569; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; margin:14px 0 8px; display:flex; align-items:center; gap:6px; }
  .form-section-subtitle:first-child { margin-top:0; }
  .form-field-hint { font-size:11.5px; color:#64748b; margin-top:5px; }
  /* Input + botón de copiar en la misma línea (CUIT del cliente en el cotizador de autos).
     `flex:1 1 0` y NO `1 1 auto`: con basis auto el basis es el max-content del input y el botón
     se va de línea antes de que el input encoja (ver skill verificar-ui). */
  .cuit-ind-row { display:flex; align-items:center; gap:6px; }
  .cuit-ind-row .form-input { flex:1 1 0; min-width:0; }
  /* Ficha de edición de usuario/organizador: campos prolijos y alineados.
     (1) label a una sola línea → un label largo no empuja su input y lo desalinea de la fila;
         la aclaración larga va abajo del input como .form-field-hint, no dentro del label.
     (2) alto uniforme para inputs y selects (el select traía 1px menos de padding vertical). */
  .uedit-grid .form-field-label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .uedit-grid .form-input,
  .uedit-grid select.form-input { height:38px; box-sizing:border-box; }
  .aseg-info-card { background:linear-gradient(135deg,#f0f9ff,#f8fafc); border:1px solid #bae6fd; border-radius:10px; padding:14px 16px; margin-top:12px; }
  .aseg-info-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:14px 18px; }
  .aseg-info-grid > div { display:flex; flex-direction:column; gap:4px; min-width:0; }
  .check-pill .cia-icon { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:4px; background:var(--c-primary); color:white; font-size:9px; font-weight:700; }
  .btn-cotizar { background:linear-gradient(90deg,var(--c-primary),var(--c-secondary)); color:white; border:none; padding:11px 28px; border-radius:8px; font-weight:700; cursor:pointer; font-size:14px; display:inline-flex; align-items:center; gap:8px; transition:all 0.15s; box-shadow:0 2px 8px rgba(var(--c-primary-rgb),0.25); }
  .btn-cotizar:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(var(--c-primary-rgb),0.35); }
  /* 🚩 bds #248: un <button disabled> se TRAGA el click (ni burbujea) — con pointer-events:none
     el click pasa al wrapper .form-actions, que es quien explica POR QUÉ está gris (elegir la
     localidad del picker). Sin esto el aviso de js/cotizadores.js no puede dispararse nunca. */
  #btn-cotizar:disabled { pointer-events:none; opacity:0.55; }

  /* Resultados cotización */
  .cot-summary { padding:8px 14px; margin-bottom:8px; }
  .cot-summary-header { display:flex; justify-content:space-between; align-items:center; padding-bottom:7px; margin-bottom:8px; border-bottom:1px solid #f1f5f9; }
  .cot-summary-title { font-size:15px; font-weight:700; color:#0f172a; display:flex; align-items:center; gap:8px; }
  .cot-nro-badge { font-size:12px; font-weight:700; color:var(--c-primary); background:#eff6ff; border:1px solid #dbeafe; border-radius:14px; padding:2px 10px; }
  .cot-summary-body { display:grid; grid-template-columns:2fr 2fr 1.2fr 1.2fr; gap:10px; }
  @media (max-width:900px){ .cot-summary-body { grid-template-columns:1fr 1fr; } }
  .cot-summary-item { display:flex; flex-direction:column; gap:1px; padding:6px 11px; background:#f8fafc; border:1px solid #f1f5f9; border-radius:10px; }
  .cot-summary-item .field-label { font-size:10px; letter-spacing:0.5px; }
  .cot-summary-item-value { font-size:12.5px; font-weight:400; color:#1e293b; line-height:1.3; }
  .cot-summary-sub { font-size:11px; color:#64748b; font-weight:400; line-height:1.35; }

  .cot-toolbar { padding:12px 16px; margin-bottom:14px; background:white; border:1px solid #e2e8f0; border-radius:8px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
  .cot-toolbar-label { font-size:11.5px; color:#64748b; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; }

  /* KPIs-filtro del listado de cotizaciones (clic = filtrar, re-clic = desfiltrar) */
  .cot-stats-row { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px; margin-bottom:10px; }
  /* Tira de filtros por ESTADO (24-ago-2026): chips con contador, mismos colores que los
     badges de las cards. "Todas" es el default neutro; .active = filtro puesto (outline del
     propio color). Un estado en cero no dibuja chip (salvo activo — ver render). */
  .cot-echips { display:flex; gap:8px; align-items:center; margin-bottom:12px; }
  /* Todos los chips del MISMO ancho (pedido de Martín): grid de pistas iguales. auto-fit y no
     repeat(9): si mañana entra un estado nuevo la tira no se toca — y el ancho igual entre
     chips lo garantiza el 1fr, no el conteo. En angosto envuelve en filas, celdas iguales. */
  .cot-echips-grid { flex:1; min-width:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(104px, 1fr)); gap:6px; }
  .cot-echip { display:flex; align-items:center; justify-content:center; padding:5px 6px; border-radius:999px; border:none; font-size:11.5px; font-weight:700; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:inherit; min-width:0; }
  .cot-echip.active { outline:2px solid currentColor; outline-offset:-1px; }
  /* PALETA de 9 estados, UN color por estado (Martín, 1-sep-2026: "se repiten los colores,
     quiero q no se repitan" — la tira tenía 8 chips y sólo 5 colores). Lógica: frío al arrancar
     → violeta al cotizar → cálido lo trabado → verde el cierre → rojo la perdida → gris la pausa.
     El LIMA de en-emision es deliberado (turquesa se confundía con el cyan de En proceso).
     Los badges de las cards (.cot-card-badge) y las franjas usan LA MISMA tabla.
     Pin: scripts/verify-cot-botonera.mjs (9 fondos distintos). */
  .cot-echip.creada { background:#dbeafe; color:#1d4ed8; }
  .cot-echip.solicitada { background:#cffafe; color:#0e7490; }
  .cot-echip.cotizada { background:#ede9fe; color:#6d28d9; }
  .cot-echip.falta-documentacion { background:#fef3c7; color:#92400e; }
  .cot-echip.pendiente-inspeccion { background:#fed7aa; color:#9a3412; }
  .cot-echip.en-emision { background:#ecfccb; color:#4d7c0f; }
  .cot-echip.emitida { background:#dcfce7; color:#15803d; }
  .cot-echip.rechazada { background:#fee2e2; color:#991b1b; }
  .cot-echip.pospuesta { background:#e2e8f0; color:#475569; }
  .cot-stat-pill { background:white; border:1px solid #e2e8f0; border-radius:10px; padding:12px 10px; display:flex; align-items:center; gap:9px; transition:all 0.15s; }
  .cot-stat-pill:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(15,23,42,0.06); }
  .cot-stat-pill.filtrable { cursor:pointer; user-select:none; }
  .cot-stat-pill.filtrable.active { border-color:#6366f1; background:#eef2ff; box-shadow:0 0 0 2px rgba(99,102,241,0.18); }
  .cot-stat-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
  .cot-stat-icon.total { background:#e0e7ff; color:#3730a3; }
  .cot-stat-icon.cotizada { background:#ede9fe; color:#6d28d9; }
  .cot-stat-icon.emitida { background:#dcfce7; color:#15803d; }
  .cot-stat-icon.pendiente { background:#fef3c7; color:#92400e; }
  .cot-stat-icon.en-emision { background:#dcfce7; color:#15803d; }
  .cot-stat-icon.rechazada { background:#fee2e2; color:#991b1b; }
  .cot-stat-icon.creada { background:#dbeafe; color:var(--c-primary); }
  .cot-stat-icon.solicitada { background:#dbeafe; color:var(--c-primary); }
  .cot-stat-icon.falta-documentacion { background:#ffedd5; color:#9a3412; }
  .cot-stat-icon.manual { background:#ffedd5; color:#9a3412; }
  .cot-stat-icon.renovacion { background:#ccfbf1; color:#0f766e; }
  .cot-stat-icon.online { background:#dbeafe; color:var(--c-primary); }
  /* 'En emisión' (🚩 bds #293): índigo y NO el verde de emitida — están una al lado de la
     otra y son cosas distintas (una orden esperando vs. la póliza ya hecha). */
  .cot-stat-icon.en-vuelo { background:#e0e7ff; color:#3730a3; }
  .cot-stat-body { flex:1; min-width:0; }
  .cot-stat-num { font-size:18px; font-weight:700; color:#0f172a; line-height:1; }
  .cot-stat-total { font-size:12px; font-weight:600; color:#94a3b8; }
  .cot-stat-lbl { font-size:9.5px; color:#64748b; font-weight:600; margin-top:3px; text-transform:uppercase; letter-spacing:0.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* Listado de cotizaciones (formato lista, una por fila) */
  .cot-cards-grid { display:flex; flex-direction:column; gap:8px; }
  /* Sin overflow:hidden (recortaría los tooltips de las acciones); la franja se redondea sola */
  .cot-card { background:white; border:1px solid #e2e8f0; border-radius:10px; cursor:pointer; transition:all 0.12s; display:flex; align-items:stretch; position:relative; }
  .cot-card:hover { border-color:var(--c-primary); box-shadow:0 4px 14px rgba(15,23,42,0.08); transform:translateY(-1px); }
  /* La card con el menú ⋯ abierto pinta ARRIBA de las siguientes (ver cotMenuToggle). */
  .cot-card.menu-abierto { z-index:45; }
  /* Sello de feature en prueba (Martín, 14-sep-2026): AP y Viajero salen a toda la organización con el aviso a la vista. */
  .cot-beta-aviso { margin:0 0 12px; padding:10px 14px; border-radius:var(--r-md, 8px); background:var(--c-warn-bg); color:var(--c-warn); font-size:13px; line-height:1.4; }
  .tag-prueba { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:var(--r-pill); background:var(--c-warn-bg); color:var(--c-warn); font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; vertical-align:middle; line-height:1.5; }
  .cot-card-stripe { width:4px; flex-shrink:0; border-radius:10px 0 0 10px; }
  /* Franjas: misma paleta de 9 que los chips (.cot-echip). */
  .cot-card.cotizada .cot-card-stripe { background:linear-gradient(180deg,#a78bfa,#6d28d9); }
  .cot-card.emitida   .cot-card-stripe { background:linear-gradient(180deg,#10b981,#15803d); }
  .cot-card.pendiente .cot-card-stripe { background:linear-gradient(180deg,#f59e0b,#92400e); }
  .cot-card.pendiente-inspeccion .cot-card-stripe { background:linear-gradient(180deg,#fb923c,#9a3412); }
  .cot-card.en-emision .cot-card-stripe { background:linear-gradient(180deg,#a3e635,#4d7c0f); }
  .cot-card.rechazada .cot-card-stripe { background:linear-gradient(180deg,#ef4444,#991b1b); }
  .cot-card.creada     .cot-card-stripe { background:linear-gradient(180deg,#60a5fa,#1d4ed8); }
  .cot-card.solicitada .cot-card-stripe { background:linear-gradient(180deg,#22d3ee,#0e7490); }
  .cot-card.falta-documentacion .cot-card-stripe { background:linear-gradient(180deg,#fbbf24,#92400e); }
  .cot-card.pospuesta .cot-card-stripe { background:linear-gradient(180deg,#94a3b8,#475569); }
  /* 1ª columna 120px: la FECHA es el piso real (89,7px medidos) y el resto lo dicta el
     nombre del creador. A 165px estaba dimensionada para el peor nombre de la base
     ("Papalini Guillermo Alejandro", 157px) y le sobraban 75px con un nombre normal.
     Ahora el nombre largo corta con "…" (.cot-card-creada-por) y el título lo muestra
     entero al pasar el mouse; los ~45px liberados se los quedan las dos columnas
     flexibles (Asegurado y Detalle del riesgo), que son las que venían truncando. */
  /* ⚠⚠ NINGUNA pista puede depender del CONTENIDO (20-ago-2026, reporte de Martín "mira como se
     corren las lineas"): cada card es su PROPIO grid, así que un track `max-content` lo resuelve
     fila por fila y las columnas dejan de alinearse ENTRE cards — que es lo que se lee como
     "listado desprolijo". Medido antes del fix, a 1600px: la columna Cotización arrancaba en
     x=466 (6 botones + badge "Pend. inspección"), 473 (6 botones), 518 (2 botones) y 541 (2
     botones + badge corto) — 75px de corrimiento en la misma pantalla.
     Por eso las dos últimas van FIJAS, dimensionadas al PEOR caso real:
       · estado 176px  = el badge más ancho ("📎 Falta documentación", 174px medidos) + 2px.
       · acciones 198px = la botonera máxima (6 iconos: 6×28 + 5×6). La botonera es VARIABLE —de
         2 a 6 iconos según estado, compañía y rol— y los botones tienen `flex-shrink:0`, así que
         una pista más chica NO da overflow ni scroll: se dibujan encima del badge (era el bug del
         19-ago-2026, "quedan muchos botones q tapan cosas"). Un 7º icono exige recalcular ESTE
         número; lo caza `verify-cot-botonera.mjs` (mide el desborde por la izquierda).
     La alineación entre filas la pinea `verify-cot-columnas-alineadas.mjs`. */
  .cot-card-body { flex:1; padding:12px 18px; display:grid; grid-template-columns: 110px minmax(0,2fr) minmax(0,3fr) 120px 150px 44px; align-items:center; gap:18px; min-width:0; }
  /* Panel de participantes (Task 13): fila propia debajo de las columnas, mismo borde que
     separa la stripe de la tarjeta. Reusa .sol-part-* (chips/buscador) tal cual Siniestros. */
  .cot-card-col { display:flex; flex-direction:column; min-width:0; }
  .cot-card-col-label { font-size:9.5px; color:#94a3b8; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:3px; }
  .cot-card-id { font-family:inherit; font-size:12.5px; color:#0f172a; font-weight:600; letter-spacing:0.3px; }
  /* nowrap SIN ellipsis se desbordaba sobre la columna Asegurado en cuanto el nombre no
     entraba — la misma familia del desborde del riesgo (🚩 bds #114). El nombre completo
     sigue disponible en el title del elemento. */
  .cot-card-creada-por { font-size:10.5px; color:#64748b; margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:5px; }
  .cot-card-creada-por .ico { width:12px; height:12px; }
  /* Último movimiento del hilo (🚩 vigier #171): el listado ordena por esta fecha, así que la
     card tiene que mostrarla o una cotización vieja arriba se lee como un bug del orden. Sólo
     aparece cuando difiere del alta (ver `_cotUltimoMov`). */
  .cot-card-ultimo-mov { font-size:10.5px; color:#0f766e; margin-top:4px; white-space:nowrap; display:flex; align-items:center; gap:5px; }
  .cot-card-ultimo-mov .ico { width:12px; height:12px; }
  .cot-card-badge { display:inline-block; font-size:10.5px; padding:4px 10px; border-radius:11px; font-weight:700; letter-spacing:0.2px; white-space:nowrap; align-self:flex-start; text-transform:uppercase; }
  /* Badges: misma paleta de 9 que los chips (.cot-echip), un color por estado. */
  .cot-card-badge.cotizada { background:#ede9fe; color:#6d28d9; }
  .cot-card-badge.emitida   { background:#dcfce7; color:#15803d; }
  .cot-card-badge.pendiente { background:#fef3c7; color:#92400e; }
  .cot-card-badge.en-emision { background:#ecfccb; color:#4d7c0f; }
  .cot-card-badge.pendiente-inspeccion { background:#fed7aa; color:#9a3412; }
  .cot-card-badge.rechazada { background:#fee2e2; color:#991b1b; }
  .cot-card-badge.creada     { background:#dbeafe; color:#1d4ed8; }
  .cot-card-badge.solicitada { background:#cffafe; color:#0e7490; }
  .cot-card-badge.falta-documentacion { background:#fef3c7; color:#92400e; }
  .cot-card-badge.pospuesta { background:#e2e8f0; color:#475569; }
  /* Siniestros con la tarjeta de Cotizaciones (25-sep-2026): UNA paleta de 7 por GRUPO de estado
     (sinGrupoEstado, js/compartido/siniestros-modelo.js) para chip, franja y badge. */
  .sin-g-creado     { --sin-g-bg:#dbeafe; --sin-g-fg:#1d4ed8; --sin-g-a:#60a5fa; }
  .sin-g-denunciado { --sin-g-bg:#cffafe; --sin-g-fg:#0e7490; --sin-g-a:#22d3ee; }
  .sin-g-en-analisis{ --sin-g-bg:#ede9fe; --sin-g-fg:#6d28d9; --sin-g-a:#a78bfa; }
  .sin-g-aprobado   { --sin-g-bg:#fef3c7; --sin-g-fg:#92400e; --sin-g-a:#fbbf24; }
  .sin-g-en-pagos   { --sin-g-bg:#fed7aa; --sin-g-fg:#9a3412; --sin-g-a:#fb923c; }
  .sin-g-pagado     { --sin-g-bg:#dcfce7; --sin-g-fg:#15803d; --sin-g-a:#10b981; }
  .sin-g-rechazado  { --sin-g-bg:#fee2e2; --sin-g-fg:#991b1b; --sin-g-a:#ef4444; }
  .cot-echip.sin-echip { background:var(--sin-g-bg); color:var(--sin-g-fg); }
  .sin-card .cot-card-stripe { background:linear-gradient(180deg,var(--sin-g-a,#94a3b8),var(--sin-g-fg,#475569)); }
  .sin-card.sin-vencido .cot-card-stripe { background:linear-gradient(180deg,#ef4444,#991b1b); }
  .sin-card .cot-card-badge { background:var(--sin-g-bg); color:var(--sin-g-fg); }
  .sin-card .cot-card-body { grid-template-columns: 110px minmax(0,2fr) minmax(0,3fr) 170px; }
  .sin-card-sub { font-size:10.5px; color:#64748b; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sin-card-vencido { font-size:10.5px; color:#b91c1c; font-weight:700; margin-top:3px; white-space:nowrap; }
  .sin-card-poliza { display:flex; align-items:center; gap:9px; min-width:0; }
  .sin-card-poliza .sin-row-tags { margin-top:3px; }
  .sin-record { margin-top:12px; padding:8px 12px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; font-size:12.5px; color:#334155; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
  .sin-record-que { color:#64748b; }
  .sin-record-btn { margin-left:auto; border:1px solid #cbd5e1; background:white; border-radius:6px; padding:3px 10px; font-size:12px; cursor:pointer; }
  .sin-record-edit label { display:inline-flex; align-items:center; gap:6px; }
  .cot-card-veh { display:flex; align-items:center; gap:9px; min-width:0; }
  .cot-card-veh-icon { width:30px; height:30px; border-radius:7px; background:#f1f5f9; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
  .cot-card-veh-text { font-size:13.5px; font-weight:700; color:#0f172a; line-height:1.2; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cot-card-aseg { display:flex; align-items:center; gap:9px; min-width:0; }
  .cot-card-aseg-avatar { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--c-primary-700),var(--c-secondary)); color:white; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }
  .cot-card-aseg-info { flex:1; min-width:0; }
  .cot-card-aseg-name { font-size:13px; font-weight:600; color:#0f172a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cot-card-aseg-prod { font-size:11.5px; color:#64748b; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cot-card-fecha { font-size:12.5px; color:#475569; font-weight:500; display:flex; align-items:center; gap:6px; }
  .cot-card-fecha .ico { width:13px; height:13px; color:var(--c-text-3); }
  /* Acciones colapsadas en UN menú ⋯ (24-ago-2026, canvas "Botonera Cotizaciones"): antes eran
     hasta 8 botones azules llenos (.cot-card-icon-btn) por fila. position:relative ancla el menú. */
  .cot-card-col-actions { flex-direction:row !important; gap:6px; align-items:center; justify-content:flex-end; position:relative; }
  .cot-menu-btn { width:28px; height:28px; border-radius:7px; border:1px solid #cbd5e1; background:white; color:#64748b; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; transition:all 0.12s; flex-shrink:0; }
  .cot-menu-btn:hover { border-color:var(--c-primary); color:var(--c-primary); }
  .cot-menu-btn .ico { width:15px; height:15px; }
  .cot-menu { position:absolute; top:calc(100% + 4px); right:0; z-index:40; background:white; border:1px solid #e2e8f0; border-radius:10px; box-shadow:var(--sh-lg); padding:5px; min-width:240px; }
  .cot-menu-item { display:flex; align-items:center; gap:9px; width:100%; padding:7px 10px; border:none; background:none; border-radius:7px; font-size:12.5px; color:#334155; cursor:pointer; text-align:left; font-family:inherit; white-space:nowrap; }
  .cot-menu-item .ico { width:14px; height:14px; color:#64748b; flex-shrink:0; }
  .cot-menu-item:hover { background:#f1f5f9; color:#0f172a; }
  .cot-menu-item.peligro { color:#b91c1c; }
  .cot-menu-item.peligro .ico { color:#b91c1c; }
  .cot-menu-item.peligro:hover { background:#fee2e2; }
  .cot-menu-item.deshabilitado { opacity:.5; cursor:not-allowed; }
  .cot-menu-item.deshabilitado:hover { background:none; color:#334155; }
  .cot-menu-sep { height:1px; background:#f1f5f9; margin:4px 6px; }
  .cot-cards-empty { padding:60px 20px; text-align:center; color:#94a3b8; font-size:14px; background:white; border:1px dashed #cbd5e1; border-radius:10px; }
  @media (max-width: 1200px){
    /* ⚠ NO ocultar las acciones: la card no tiene onclick propio, así que el ⋯ es el ÚNICO
       punto de interacción. Con el menú, el kebab entra en la fila con columna propia
       (antes la botonera de 8 botones pasaba a una fila al pie). Touch target 36px. */
    .cot-card-body { grid-template-columns: 110px minmax(0,1.5fr) minmax(0,2fr) 100px 100px 40px; gap:14px; }
    .cot-menu-btn { width:36px; height:36px; }
  }
  @media (max-width: 900px){
    .cot-card-body { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 40px; gap:10px; }
    .cot-card-col-id, .cot-card-col-fecha, .cot-card-col-estado { display:none; }
  }
  /* Con 4 pills (se partió 'Manuales' en nuevas/renovaciones) el título más largo
     —"Renovaciones manuales"— no entra en 1/4 de una notebook: a 2 columnas antes del 1fr. */
  @media (max-width: 1150px) { .cot-stats-row { grid-template-columns:repeat(2, minmax(0,1fr)); } }
  @media (max-width: 700px)  { .cot-stats-row { grid-template-columns:1fr; } }

  .cot-results-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; align-items:stretch; }
  @media (max-width:1100px){ .cot-results-grid { grid-template-columns:repeat(2,1fr); } }
  @media (max-width:720px){ .cot-results-grid { grid-template-columns:1fr; } }

  /* Banda "tiene hoy" (recotización desde la ficha de una póliza): compañía + cobertura
     vigente + premio de la última cuota emitida, arriba del grid. Paleta ÁMBAR, la misma del
     widget de campañas del dashboard (#dash-campanas): fondo #fffbeb→#fff7ed, borde #fcd34d,
     textos #78350f/#b45309. Es una paleta FIJA, no --c-primary → se ve igual en los 3 tenants
     aunque el branding cambie. */
  .cot-actual-band { display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    padding:9px 14px; margin:0 0 8px; font-size:12.5px;
    background:linear-gradient(180deg,#fffbeb,#fff7ed); border:1.5px solid #fcd34d; border-radius:12px; }
  .cot-actual-tag { display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
    font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:#b45309; font-weight:600; }
  .cot-actual-ico { font-size:13px; }
  /* Columnas de dos renglones: dato fuerte arriba, detalle abajo. La de compañía crece
     (flex:1 1 0, no `auto`: con basis max-content el bloque se va entero a la línea de abajo
     en vez de encoger) y empuja monto y nº de póliza a la derecha. */
  .cot-actual-col { display:flex; flex-direction:column; gap:1px; min-width:0; }
  /* min-width: sin él la columna se encoge hasta partir la cobertura palabra por palabra
     ("RC;R/H / Inc y / Dest…" en una columna de 5 renglones, medido a 900px). Con el piso, si
     la fila no entra los bloques de la derecha bajan a un segundo renglón, que se lee bien. */
  .cot-actual-col-cia { flex:1 1 0; min-width:190px; }
  .cot-actual-fuerte { font-weight:600; font-size:13.5px; color:#78350f; white-space:nowrap; }
  .cot-actual-plata { margin-left:auto; text-align:right; align-items:flex-end; }
  .cot-actual-monto { font-size:15px; font-weight:700; color:#78350f; line-height:1.2; white-space:nowrap; }
  .cot-actual-sub { font-size:10.5px; color:#b45309; }
  .cot-actual-nro { font-size:10.5px; color:#b45309; white-space:nowrap; }
  .cot-actual-link { color:#b45309; font-weight:600; text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
  .cot-actual-link:hover { color:#78350f; }
  @media (max-width:720px){ .cot-actual-plata { margin-left:0; text-align:left; } }

  /* ====== Rediseño cotizador autos: grid por grupo de cobertura (A/B/C/D) ====== */
  /* El contenedor #cot-results-grid sigue siendo un grid de 3 col (layout viejo): los
     hijos nuevos (tira, toolbar, grilla de columnas) ocupan el ancho completo. */
  .cot-cols2 { grid-column:1/-1; }

  /* --- Tira de condiciones comerciales (sobre el grid) --- */
  .cot-cc-strip { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:10px 14px; margin-bottom:0; box-shadow:0 1px 3px rgba(15,23,42,.04); }
  .cot-cc-titulo { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#64748b; margin-bottom:7px; }
  .cot-cc-row-blocks { display:flex; flex-wrap:wrap; gap:10px; }
  .cot-cc-block { flex:1 1 200px; min-width:190px; background:#f8fafc; border:1px solid #eef2f7; border-radius:10px; padding:10px 11px; }
  .cot-cc-head { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:7px; min-height:46px; }
  .cot-cc-valor { text-align:center; font-size:11px; color:#64748b; margin-bottom:2px; }
  /* Campaña comercial de la cía, en su propia línea bajo la suma asegurada. La línea se
     renderiza SIEMPRE (vacía con &nbsp; si no hay campaña) para que todas las cards midan
     igual y las filas de Comisión/Bonificación queden alineadas. */
  .cot-cc-campania { text-align:center; font-size:11px; font-weight:600; color:#0f766e; min-height:15px; line-height:15px; margin-bottom:8px; }
  .cot-cc-logo { width:22px; height:22px; border-radius:6px; color:#fff; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  /* Altura FIJA + ancho auto: los PNG de img/cias/ están RECORTADOS al contenido (sin
     padding transparente — SC traía 21px arriba/abajo y se veía chico), así la altura CSS
     es la altura VISUAL del logo y todos quedan parejos aunque el ancho varíe por marca.
     max-width + contain protegen la columna más angosta (250px) del lockup más ancho (Galicia 7:1). */
  .cot-cc-logoimg { height:30px; width:auto; max-width:100%; object-fit:contain; object-position:center; display:block; min-width:0; }
  .cot-cc-nombre { font-size:13px; font-weight:700; color:#1e293b; }
  .cot-cc-hint { margin-left:auto; font-size:11px; font-weight:600; color:var(--c-secondary-strong); font-style:italic; }
  .cot-cc-ctrls { display:flex; flex-direction:column; gap:5px; }
  .cot-cc-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:3px 9px; background:#eff6ff; border:1px solid #bfdbfe; border-radius:8px; }
  /* Comisión/Bonif alineadas al tamaño/peso del badge de cobertura (.cot-fila-badge, 12px/600) para que la card lea uniforme con las filas de abajo (pedido 8-jul). Los colores (label azul, valor oscuro) se conservan: son parte del tema del pill. */
  .cot-cc-lbl { font-size:12px; font-weight:600; color:var(--c-primary); white-space:nowrap; }
  .cot-cc-row .cot-comision-sel { font-size:12px; font-weight:600; color:#0f172a; border:1px solid #cbd5e1; border-radius:6px; padding:3px 7px; background:#fff; cursor:pointer; }
  .cot-cc-row .cot-comision-sel:disabled { opacity:.6; cursor:wait; }
  .cot-cc-val { font-size:12px; font-weight:600; color:#0f172a; }
  .cot-cc-na { color:#94a3b8; font-weight:600; font-style:italic; }
  .cot-cc-aviso { font-size:10.5px; color:#b45309; line-height:1.35; padding:2px 2px 0; }

  /* --- Toolbar (orden + filtro de compañías + comparar) --- */
  .cot-grid-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:9px 12px; background:#f8fafc; border:1px solid #eef2f7; border-radius:10px; margin-bottom:0; font-size:12px; }
  .cot-tb-lbl { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#94a3b8; }
  .cot-tb-sep { width:1px; align-self:stretch; background:#e2e8f0; margin:0 2px; }
  .cot-orden-chip, .cot-cia-chip { padding:4px 11px; border-radius:14px; border:1px solid #e2e8f0; background:#fff; color:#475569; cursor:pointer; font-weight:600; transition:all .12s; user-select:none; }
  .cot-orden-chip:hover, .cot-cia-chip:hover { border-color:#cbd5e1; }
  .cot-orden-chip.on { background:#dbeafe; border-color:#bfdbfe; color:var(--c-primary); }
  .cot-cia-chip.off { opacity:.45; text-decoration:line-through; }
  .cot-comparar-btn { margin-left:auto; padding:5px 14px; border-radius:8px; border:1px solid #e2e8f0; background:#fff; color:#475569; font-weight:600; font-size:12px; cursor:pointer; transition:all .12s; }
  .cot-comparar-btn:hover { border-color:#cbd5e1; }
  .cot-comparar-btn[disabled] { opacity:.7; cursor:not-allowed; }

  /* --- Una columna por compañía (header = condiciones, cuerpo = coberturas agrupadas) --- */
  .cot-cols2 { display:grid; gap:10px; align-items:start; }
  .cot-col2 { background:#fff; border:1px solid #e2e8f0; border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(15,23,42,.04); }
  .cot-col2-head { border-bottom:1px solid #e2e8f0; }
  /* el bloque de condiciones se reusa como header → se le saca el estilo de "strip" */
  .cot-col2-head .cot-cc-block { background:transparent; border:none; border-radius:0; padding:10px; min-width:0; box-shadow:none; }
  .cot-col2-body { padding:3px 0 5px; }
  .cot-col2-msg { padding:22px 12px; text-align:center; color:#94a3b8; font-size:12px; }
  .cot-col2-msg.err { color:#b45309; }
  /* Nota "se tarifó por otro CP" (🚩 vigier #152): informativa, no un error — va discreta al
     pie de la card, sin el padding grande del mensaje de card vacía. */
  .cot-col2-msg.alt-cp { padding:6px 8px; font-size:11px; color:var(--c-secondary-strong); font-style:italic; }
  .cot-col2-err-det { margin-top:6px; font-size:11px; font-weight:400; color:#94a3b8; line-height:1.4; }
  .cot-col2-msg .cot-cc-hint { margin-left:0; }
  .cot-col2-grupo.sep { border-top:1px solid #eef2f7; margin-top:2px; padding-top:2px; }
  .cot-fila2 { display:flex; align-items:center; justify-content:flex-start; gap:6px; padding:6px 12px; cursor:pointer; transition:background .12s; }   /* todo pegado a la izquierda: mínimo espacio cobertura↔costo (pedido 2-jul) */
  .cot-fila2:hover { background:#f8fafc; }
  /* nowrap: el badge es un CÓDIGO, no texto — los de dos palabras ("TD3 1%" de FedPat,
     "Premium Max" de Sancor) partían en dos renglones y la fila quedaba a doble alto. */
  .cot-fila-badge { font-size:12px; font-weight:600; color:#64748b; white-space:nowrap; }
  .cot-fila-exc { font-size:11px; color:#b45309; }   /* paquete excepcionado Zurich: cotiza, emitir requiere aprobación */
  .cot-fila-precio { font-size:10.5px; line-height:1.2; color:#0f172a; white-space:nowrap; }   /* mismo formato que el nombre de cobertura, en negro */
  /* Garage al pie de la card (abajo de la A): misma fila que el resto, con un rótulo chico que
     avisa que NO cubre a terceros — sin él una cobertura de $11k al lado de una RC de $36k se
     lee como "la más barata". No abre ficha → sin cursor de click ni hover. */
  /* .cot-fila2-garage NO lleva estilo propio: desde el 14-sep-2026 el garage es una cobertura
     más de la card (mismo formato, badge de familia). La clase queda como HOOK de los
     verificadores headless, que necesitan distinguir esa fila sin leer el badge. */
  .cot-col-vacia { color:#cbd5e1; text-align:center; padding:14px 8px; font-size:13px; }

  /* ---- Comparador (jul 2026) ---- */
  /* Sin círculo/checkbox (pedido 2-jul): la fila entera togglea y la selección se marca
     con outline + fondo rojizo suave, que reemplazan la señal visual del tilde. */
  .cot-fila2.cmp-sel { outline:2px solid #fca5a5; border-radius:8px; background:#fef2f2; }
  .cot-fila-info { flex:0 1 auto; min-width:0; display:flex; align-items:baseline; gap:6px; }   /* badge + nombre EN LÍNEA, sin estirar: el precio queda pegado */
  .cot-fila-nombre { font-size:10.5px; color:#94a3b8; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
  .cot-comparar-btn.on { background:#fee2e2; border-color:#dc2626; color:#b91c1c; }
  .cot-comparar-btn.ver { background:#dc2626; color:#fff; border-color:#dc2626; }
  .cmp-hint { font-size:11.5px; color:#64748b; }

  .cmp-panel { background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:18px 20px; }
  .cmp-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:12px; }
  .cmp-tit { font-weight:700; font-size:16px; }
  .cmp-veh { font-size:12.5px; color:#475569; }
  .cmp-scroll { overflow-x:auto; border:1px solid #e2e8f0; border-radius:10px; }
  .cmp-tabla { width:100%; border-collapse:collapse; font-size:12.5px; }
  .cmp-tabla th, .cmp-tabla td { border-bottom:1px solid #eef2f7; padding:8px 10px; text-align:center; vertical-align:middle; }
  .cmp-tabla td:first-child, .cmp-tabla th:first-child { text-align:left; font-weight:600; color:#334155; min-width:150px; }
  .cmp-tabla thead th { position:sticky; top:0; background:#f8fafc; z-index:1; }
  .cmp-logoimg { height:22px; max-width:150px; object-fit:contain; }  /* tope amplio: los lockups anchos (mapfre/fedpat) no deben achicarse — alto uniforme, ancho variable */
  .cmp-plan { font-size:11px; color:#475569; font-weight:400; margin-top:4px; }        /* misma fuente/tamaño que el detalle de las celdas (pedido 2-jul) */
  .cmp-suma-head { font-size:11px; color:#475569; font-weight:400; margin-top:2px; }   /* la suma asegurada vive en el header, debajo de la cobertura */
  /* 🚩 bds #246: plan excepcionado en la comparación — misma señal que el ⚠ del grid */
  .cmp-exc { font-size:10px; color:#b45309; font-weight:600; margin-top:3px; }
  .cmp-nota-exc { display:block; font-size:11px; color:#b45309; margin:8px 2px 0; }
  .cmp-si { color:#16a34a; font-weight:700; } .cmp-no { color:#dc2626; font-weight:700; }
  .cmp-sd { color:#94a3b8; font-size:11px; }
  .cmp-det { font-size:11px; color:#475569; display:block; max-width:180px; margin:0 auto; }
  .cmp-suma td, .cmp-cuota td { background:#f8fafc; font-weight:600; }
  .cmp-acciones { display:flex; align-items:center; gap:10px; margin-top:12px; justify-content:flex-end; }
  .cmp-nota { font-size:11px; color:#94a3b8; margin-right:auto; }
  .cmp-logochip { width:26px; height:26px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:11px; font-weight:700; }
  .cmp-vacio { color:#94a3b8; font-size:12px; padding:18px 10px !important; text-align:center; }

  /* Columnas del resultado SIEMPRE parejas (mín 300px c/u): si no entran, #cot-results-grid
     scrollea horizontal (pedido 2-jul) — reemplaza el colapso a 2/1 columnas por media query. */
  /* Grid compacto de planes Zurich: 3 por fila */
  .cot-plan-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
  @media (max-width:980px){ .cot-plan-grid { grid-template-columns:repeat(2,1fr); } }
  @media (max-width:640px){ .cot-plan-grid { grid-template-columns:1fr; } }
  .cot-plan-card { background:white; border:1px solid #e2e8f0; border-radius:10px; padding:13px 14px; display:flex; flex-direction:column; gap:9px; transition:box-shadow .12s,border-color .12s; }
  .cot-plan-card:hover { border-color:var(--c-secondary); box-shadow:0 3px 10px rgba(var(--c-primary-rgb),.10); }
  .cot-plan-head { display:flex; align-items:center; gap:8px; }
  .cot-plan-code { display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:24px; padding:0 7px; background:var(--c-primary); color:#fff; border-radius:6px; font-size:11.5px; font-weight:700; flex-shrink:0; }
  .cot-plan-name { font-size:12.5px; font-weight:600; color:#1e293b; line-height:1.25; }
  .cot-plan-price { font-size:19px; font-weight:800; color:#0f172a; }
  .cot-plan-per { font-size:12px; font-weight:600; color:#64748b; margin-left:2px; }
  .cot-plan-na { font-size:12px; font-weight:600; color:#dc2626; }
  .cot-cia-card { background:white; border:2px solid #e2e8f0; border-radius:12px; overflow:hidden; transition:all 0.15s; display:flex; flex-direction:column; min-height:205px; }
  .cot-cia-card:hover { border-color:var(--c-secondary); box-shadow:0 6px 18px rgba(15,23,42,0.08); transform:translateY(-2px); }
  .cot-cia-header { padding:6px 12px; color:white; display:flex; justify-content:space-between; align-items:center; gap:8px; }
  .cot-cia-logo { width:28px; height:28px; border-radius:7px; background:rgba(255,255,255,0.22); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; flex-shrink:0; }
  .cot-cia-info-block { display:flex; align-items:center; gap:9px; }
  .cot-cia-info { flex:1; }
  .cot-cia-name { font-size:14px; font-weight:700; }
  .cot-cia-stars { font-size:11px; opacity:0.9; margin-top:2px; }
  .cot-cia-badge { background:#10b981; color:white; font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:5px; text-transform:uppercase; letter-spacing:0.4px; white-space:nowrap; }
  .cot-coberturas { padding:6px 8px; flex:1; min-height:0; display:flex; flex-direction:column; gap:2px; overflow-y:auto; }
  .cot-cobertura { display:grid; grid-template-columns:auto 1fr auto auto; gap:8px; padding:2px 8px; border-radius:8px; align-items:center; transition:background 0.12s; }
  .cot-cobertura:hover { background:#f8fafc; }
  .cot-cob-code { display:inline-block; width:44px; height:21px; line-height:21px; text-align:center; background:var(--c-primary); color:white; border-radius:5px; font-size:10.5px; font-weight:700; flex-shrink:0; }
  /* Hover sobre la fila → el badge del código muestra el rayito de emitir (mantiene el azul) */
  .cot-cob-code.cob-emitir { cursor:pointer; transition:transform 0.12s; }
  .cot-cob-code .cob-code-bolt { display:none; font-size:12px; }
  .cot-cobertura:hover .cob-emitir .cob-code-txt { display:none; }
  .cot-cobertura:hover .cob-emitir .cob-code-bolt { display:inline; }
  .cob-emitir:hover { transform:scale(1.1); }
  .cot-cob-code.cob-disabled { background:#94a3b8; opacity:0.75; cursor:not-allowed; }
  .cot-no-emite { margin:6px 2px 0; font-size:11px; color:#b45309; line-height:1.3; }
  /* ===== Emisión de motor unificada (em-*) ===== */
  .em-panel { margin-top:14px; border:0.5px solid #e2e8f0; border-radius:12px; background:#fff; overflow:hidden; }
  .em-head { display:flex; justify-content:space-between; align-items:center; padding:13px 16px; }
  .em-head-info { display:flex; align-items:center; gap:11px; }
  .em-logo { width:38px; height:38px; border-radius:9px; background:rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; color:#fff; flex-shrink:0; }
  .em-head-tit { font-size:14.5px; font-weight:600; color:#fff; }
  .em-head-sub { font-size:12px; color:rgba(255,255,255,0.85); margin-top:2px; }
  .em-volver { background:rgba(255,255,255,0.18); color:#fff; border:none; }
  .em-volver:hover { background:rgba(255,255,255,0.28); }
  .em-aviso { font-size:11.5px; color:#991b1b; margin:12px 16px 0; line-height:1.4; }
  /* Paso 2 de 2 — la inspección del auto (Mercantil Andina). Pantalla propia y GRANDE: hasta el
     11-sep-2026 la autoinspección de Barbara se embebía en `.sol-modal`, que mide 420px y está
     hecho para confirmaciones de texto — la app de la compañía entraba cortada, con su scroll
     adentro de otro scroll, y el título rojo "No se emitió" encabezaba lo que en realidad es el
     paso siguiente del circuito. Acá el iframe manda: ocupa todo el alto disponible (flex) y el
     encabezado dice en qué paso estás, no que algo falló. */
  .em-insp-ov { position:fixed; inset:0; background:rgba(15,42,74,.45); display:flex; align-items:center; justify-content:center; z-index:1100; padding:16px; box-sizing:border-box; }
  .em-insp { background:#fff; border-radius:14px; width:min(1040px,96vw); height:min(880px,94vh); display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(15,42,74,.30); }
  /* Sin iframe (inspección ya enviada) la caja se ajusta al contenido: con el alto fijo, el ✓
     quedaba flotando en 600px de blanco. */
  .em-insp--compacta { height:auto; max-height:94vh; }
  .em-insp-head { padding:14px 18px 12px; border-bottom:1px solid #e2e8f0; flex-shrink:0; }
  .em-insp-paso { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#0369a1; }
  .em-insp-tit { font-size:16px; font-weight:700; color:#1e293b; margin-top:3px; }
  .em-insp-sub { font-size:12.5px; color:#475569; margin-top:4px; line-height:1.5; }
  /* min-height:0 es lo que deja al iframe encogerse dentro del flex (sin él, el hijo crece con su
     contenido y el footer se va abajo del viewport). */
  .em-insp-body { flex:1; min-height:0; display:flex; flex-direction:column; padding:0 18px 4px; }
  .em-insp-frame { flex:1; min-height:0; width:100%; border:1px solid #cbd5e1; border-radius:10px; background:#fff; margin-top:12px; }
  .em-insp-ok { flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; padding:28px 20px 24px; }
  .em-insp-ok-ico { font-size:38px; line-height:1; color:#16a34a; }
  .em-insp-ok-tit { font-size:17px; font-weight:700; color:#166534; }
  .em-insp-ok-txt { font-size:13px; color:#475569; line-height:1.55; max-width:520px; }
  .em-insp-foot { padding:12px 18px; border-top:1px solid #e2e8f0; display:flex; gap:9px; align-items:center; flex-wrap:wrap; flex-shrink:0; }
  .em-insp-foot-sp { flex:1; }
  .em-insp-vigia { font-size:12px; font-weight:600; color:#0369a1; }
  .em-seccion { margin:14px 16px 0; }
  .em-seccion-tit { font-size:10.5px; color:#64748b; text-transform:uppercase; font-weight:700; letter-spacing:.03em; margin-bottom:6px; }
  .em-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
  /* Variante de grano fino (10 col): deja dar anchos proporcionales al DATO — Piso y Depto son
     un carácter y en la grilla de 5 ocupaban lo mismo que "Lugar de nacimiento". Se estrena en
     Hogar (Martín, 30-jul-2026: "algunos campos quedan muy grandes para el valor que se ingresa,
     queda poco ui/ux"); Motor sigue en la de 5 hasta que se decida moverlo. ⚠ Todo hijo directo
     necesita su `grid-column:span N` explícito: sin él ocupa 1/10 y queda ilegible. */
  .em-grid-fino { grid-template-columns:repeat(10,1fr); }
  .em-grid label { font-size:12px; color:#475569; display:flex; flex-direction:column; gap:3px; }
  .em-ro { background:#f1f5f9; color:#64748b; }
  .em-de-cartera { border-color:#22c55e; }
  .em-cartera-tag { color:#15803d; font-weight:600; }
  .em-pago { display:flex; gap:16px; align-items:center; margin-top:6px; flex-wrap:wrap; }
  .em-pago label { font-size:12.5px; color:#334155; }
  .em-panel .form-actions { margin:14px 16px 16px; }
  .em-confirm { margin:12px 16px 0; padding:12px 14px; background:#fef2f2; border:1px solid #fecaca; border-radius:8px; }
  .em-confirm-tit { color:#991b1b; font-weight:500; }
  .em-confirm-txt { font-size:12.5px; margin-top:6px; color:#334155; line-height:1.45; }
  .em-confirm-acc { margin-top:10px; display:flex; gap:8px; }
  .em-ok { margin:12px 16px 16px; padding:12px; background:#ecfdf5; border:1px solid #6ee7b7; border-radius:8px; color:#065f46; font-size:13px; }
  .em-btn-emitir { color:#fff; }

  /* ===== Aviso de emisión en curso (em-lo-*) =====
     Emitir es IRREVERSIBLE y tarda 10-40s, y el único feedback que había era el texto del
     botón — al pie de un form largo, invisible si el productor scrolleó (Martín, 29-jul-2026).
     ⚠ BLOQUEA a propósito (Martín): "que estorbe, la idea es que el usuario no pueda hacer
     nada hasta que termina ese proceso". La capa es transparente pero captura los clicks —
     un fondo transparente NO desactiva el hit-testing, sólo pointer-events lo haría.
     Sin velo oscuro: la tarjeta centrada ya explica por qué no responde nada.
     ⚠ El gradiente va de --chrome-2 a --chrome-4, NO el --c-primary-700/--c-secondary del
     encabezado del panel: es el único par que da AA (>4.5) con texto blanco en los TRES
     tenants (medido: 12,7 Sherpa · 5,1 Bureau · 6,9 Vigier). El del encabezado da 1,88 en
     Bureau y 2,19 en Vigier — el verde oliva y el cian de marca son demasiado claros.
     Los chrome-* también derivan de colorPrimario, así que sigue siendo el color del tenant. */
  .em-lo-bloqueo { position:fixed; inset:0; z-index:9400; display:flex; align-items:center; justify-content:center; padding:20px; }
  .em-lo-toast { display:flex; align-items:center; gap:13px; padding:15px 18px; border-radius:12px;
    max-width:min(370px, calc(100vw - 40px));
    background:linear-gradient(135deg,var(--chrome-2),var(--chrome-4));
    box-shadow:0 14px 40px rgba(15,23,42,0.28), 0 0 0 1px rgba(255,255,255,0.06) inset; animation:em-lo-entra 0.4s cubic-bezier(.2,.8,.2,1); }
  /* Anillo con degradado cónico (mask deja sólo el aro) y giro con aceleración, en vez del arco plano. */
  .em-lo-sp { width:20px; height:20px; flex-shrink:0; border-radius:50%; background:conic-gradient(from 0deg, transparent 0 30%, rgba(255,255,255,0.35) 60%, #fff 100%); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2.6px), #000 calc(100% - 2px)); mask:radial-gradient(farthest-side, transparent calc(100% - 2.6px), #000 calc(100% - 2px)); animation:cot-spin 0.9s cubic-bezier(.6,.15,.4,.85) infinite; }
  .em-lo-txt { min-width:0; }
  .em-lo-etapa { font-size:13.5px; font-weight:600; color:#fff; }
  /* min-height reservado: el subtítulo cambia entre etapas y alguna lo deja vacío — sin
     esto la tarjeta cambia de alto sola y se mueve del centro. */
  .em-lo-sub { font-size:12px; color:rgba(255,255,255,0.82); margin-top:2px; line-height:1.4; min-height:17px; }
  /* Escape tardío: ahora que BLOQUEA, una emisión que nunca resuelve dejaría la app
     inusable y la única salida sería recargar — que es peor (pierde el resultado). No
     cancela nada: la emisión sigue y el resultado igual aparece en su modal. */
  .em-lo-salir { display:block; margin-top:8px; background:none; border:none; padding:0; cursor:pointer;
    font-size:11.5px; color:rgba(255,255,255,0.7); text-decoration:underline; }
  .em-lo-salir:hover { color:#fff; }
  @keyframes em-lo-entra { from { opacity:0; transform:translateY(10px) scale(0.97); } to { opacity:1; transform:none; } }
  /* El spinner SE QUEDA: es la única señal de que algo está pasando. Lo que se apaga es
     la entrada, que es decorativa. */
  @media (prefers-reduced-motion: reduce) { .em-lo-toast { animation:none; } }

  /* ===== Nuevo siniestro — panel estilo emisión (sin-nuevo-*) ===== */
  .sin-nuevo-panel { border:0.5px solid #e2e8f0; border-radius:12px; background:#fff; }
  .sin-nuevo-head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 18px; background:linear-gradient(135deg,var(--c-primary-700),var(--c-secondary)); border-radius:12px 12px 0 0; }
  .sin-nuevo-head-info { display:flex; align-items:center; gap:12px; min-width:0; }
  .sin-nuevo-logo { width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; }
  .sin-nuevo-tit { font-size:16px; font-weight:600; color:#fff; }
  .sin-nuevo-sub { font-size:12px; color:rgba(255,255,255,0.88); margin-top:2px; }
  .sin-nuevo-head .btn-cotizar { background:rgba(255,255,255,0.95); color:var(--c-primary); flex-shrink:0; }
  .sin-nuevo-head .btn-cotizar:hover { background:#fff; }
  .sin-nuevo-body { padding:6px 18px 18px; }
  .sin-sec { margin-top:6px; }
  .sin-sec-tit { font-size:12px; color:var(--c-primary); text-transform:uppercase; font-weight:700; letter-spacing:.04em; margin:20px 0 10px; display:flex; align-items:center; gap:7px; }
  .sin-sec-tit.sin-sec-first { margin-top:6px; }
  .sin-subtit { font-size:11px; color:#475569; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin:14px 0 8px; }
  /* Datos de la póliza y riesgo + asegurado en una sola grilla de 4 columnas. */
  .sin-pyr-grid { grid-template-columns:repeat(5, minmax(0,1fr)); gap:9px; }
  @media (max-width:1280px){ .sin-pyr-grid { grid-template-columns:repeat(3, minmax(0,1fr)); } }
  @media (max-width:760px){ .sin-pyr-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
  @media (max-width:520px){ .sin-pyr-grid { grid-template-columns:1fr; } }
  .sin-contents { display:contents; }
  .sin-pf-wide { grid-column:span 2; }
  .sin-pf-wide3 { grid-column:span 3; }
  @media (max-width:760px){ .sin-pf-wide3 { grid-column:span 2; } }
  @media (max-width:520px){ .sin-pf-wide, .sin-pf-wide3 { grid-column:auto; } }
  .sin-pyr-grid .profile-field { height:auto; min-height:60px; align-items:flex-start; }
  .sin-pyr-grid .profile-field-icon { margin-top:1px; }
  .sin-pyr-grid .profile-field-label, .sin-pyr-grid .profile-field-value { white-space:normal; overflow:visible; text-overflow:clip; }
  .sin-box-inp { width:100%; border:none; background:transparent; font-size:13px; color:#0f172a; font-weight:500; padding:0; outline:none; font-family:inherit; }
  .sin-box-inp[readonly] { color:#475569; cursor:default; }
  .sin-pf-edit { background:#fff; border-color:#dbeafe; }
  .sin-pf-edit .sin-box-inp { border-bottom:1px dashed #cbd5e1; padding-bottom:2px; }
  .sin-pf-edit .sin-box-inp:focus { border-bottom-color:var(--c-secondary); }
  /* Botones de tipo de siniestro (con icono). */
  .sin-tipo-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(128px,1fr)); gap:10px; }
  .sin-tipo-btn { display:flex; flex-direction:column; align-items:center; gap:7px; padding:14px 10px; border:1px solid #e2e8f0; border-radius:10px; background:#fff; cursor:pointer; transition:border-color .12s, background .12s; }
  .sin-tipo-btn:hover { border-color:#bfdbfe; background:#f8fafc; }
  .sin-tipo-btn.sel { border:2px solid var(--c-secondary-strong); background:#eff6ff; padding:13px 9px; }
  .sin-tipo-ico { font-size:24px; line-height:1; }
  .sin-tipo-lbl { font-size:12.5px; font-weight:600; color:#334155; text-align:center; }
  .sin-tipo-btn.sel .sin-tipo-lbl { color:var(--c-primary); }
  /* Qué incluye el tipo (hoy sólo Fast Track). Va con -4px de gap para que se lea pegado al
     label —es su bajada, no un segundo dato— y no empuja la altura de las otras tarjetas
     porque el grid las iguala por fila. */
  .sin-tipo-det { font-size:10.5px; font-weight:400; color:#64748b; text-align:center; line-height:1.25; margin-top:-4px; }
  .sin-tipo-btn.sel .sin-tipo-det { color:var(--c-primary); opacity:.75; }
  .sin-subsec { margin-top:13px; }
  .sin-subsec:first-child { margin-top:2px; }
  .sin-subsec-tit { font-size:10.5px; color:#475569; text-transform:uppercase; font-weight:700; letter-spacing:.04em; margin-bottom:7px; display:flex; align-items:center; gap:6px; }
  .sin-collap { margin-top:14px; border:0.5px solid #e2e8f0; border-radius:10px; overflow:hidden; }
  .sin-collap-head { display:flex; align-items:center; gap:9px; padding:12px 14px; cursor:pointer; user-select:none; }
  .sin-collap-head:hover { background:#f8fafc; }
  .sin-collap-chev { font-size:11px; color:#94a3b8; }
  .sin-collap-ico { font-size:16px; }
  .sin-collap-lbl { font-size:13px; font-weight:600; color:#0f172a; }
  .sin-collap-body { padding:2px 14px 14px; border-top:0.5px solid #f1f5f9; }
  /* Terceros involucrados: N bloques (🚩 vigier #40). El separador arriba sólo aparece a partir
     del segundo, para que con uno solo se vea exactamente igual que antes del cambio. */
  .sin-ter-item + .sin-ter-item { margin-top:14px; padding-top:12px; border-top:0.5px dashed #e2e8f0; }
  .sin-ter-item-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
  .sin-ter-item-tit { font-size:12px; font-weight:600; color:#334155; }
  .sin-ter-quitar { background:none; border:0; padding:2px 6px; font-size:11.5px; color:#94a3b8; cursor:pointer; border-radius:6px; }
  .sin-ter-quitar:hover { color:#dc2626; background:#fef2f2; }
  .cot-cob-text { min-width:0; }
  .cot-cob-name { font-size:12.5px; font-weight:400; color:#0f172a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cot-cob-features { font-size:11px; color:#64748b; margin-top:2px; }
  .cot-cobertura-price { text-align:right; min-width:110px; }
  .cot-price-monthly { font-size:13px; font-weight:400; color:#0f172a; white-space:nowrap; }
  .cot-price-yearly { font-size:11px; color:#64748b; white-space:nowrap; margin-top:1px; }
  .cot-expand-btn { display:block; width:100%; border:none; background:none; color:var(--c-secondary-strong); font-size:11.5px; font-weight:600; padding:4px 0 2px; cursor:pointer; border-top:1px dashed #e2e8f0; margin-top:4px; }
  .cot-expand-btn:hover { color:var(--c-primary); }
  .cot-comision-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:3px 8px; margin-bottom:3px; background:#eff6ff; border:1px solid #bfdbfe; border-radius:8px; }
  .cot-comision-lbl { font-size:11.5px; font-weight:700; color:var(--c-primary); }
  .cot-comision-sel { font-size:12.5px; font-weight:600; color:#0f172a; border:1px solid #cbd5e1; border-radius:6px; padding:3px 7px; background:white; cursor:pointer; }
  .cot-comision-sel:disabled { opacity:0.6; cursor:wait; }
  .cot-recotizando { padding:26px 16px; text-align:center; color:var(--c-primary); font-size:12.5px; font-weight:600; }
  .cot-recotizando::before { content:''; display:inline-block; width:13px; height:13px; margin-right:7px; vertical-align:-2px; border:2px solid #bfdbfe; border-top-color:var(--c-primary); border-radius:50%; animation:cot-spin 0.7s linear infinite; }
  @keyframes cot-spin { to { transform:rotate(360deg); } }
  /* Loader branded mientras cotiza (reusa el mountain animado y el AZUL del splash de booteo). */
  /* Mismo lenguaje que el splash de boot (aurora, brillo del logo, montañita); la barra queda
     INDETERMINADA (acá no hay fases) pero como haz de luz, no como bloque que rebota. */
  .cot-loader { position:relative; overflow:hidden; grid-column:1/-1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:52px 16px; min-height:340px; animation:bootIn 0.55s cubic-bezier(.2,.8,.2,1) both; background:linear-gradient(135deg,var(--chrome-1) 0%,var(--chrome-4) 50%,var(--chrome-2) 100%); }
  .cot-loader > * { position:relative; z-index:1; }
  .cot-loader .cl-mountain { width:88px; height:48px; overflow:visible; }
  .cot-loader .cl-mountain path { fill:none; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
  .cot-loader .cl-mountain-bg { stroke:rgba(255,255,255,0.15); }
  .cot-loader .cl-mountain-draw { stroke:color-mix(in srgb,var(--c-secondary) 60%,white); stroke-dasharray:100; filter:drop-shadow(0 0 5px rgba(var(--c-secondary-rgb),0.95)); animation:bootDraw 2.6s cubic-bezier(.45,0,.2,1) infinite; }
  .cot-loader .cl-brand { font-size:16px; font-weight:800; letter-spacing:6px; text-indent:6px; color:#ffffff; margin-top:8px; text-shadow:0 0 18px rgba(var(--c-secondary-rgb),0.45); animation:bootTracking 0.9s cubic-bezier(.2,.8,.2,1) both; }
  .cot-loader .cl-brand-logo { max-height:44px; max-width:220px; object-fit:contain; }
  .cot-loader .cl-title { font-size:13.5px; font-weight:700; color:#e2e8f0; margin-top:14px; animation:bootUp 0.6s cubic-bezier(.2,.8,.2,1) 0.15s both; }
  .cot-loader .cl-bar { position:relative; width:200px; height:3px; border-radius:2px; background:rgba(255,255,255,0.12); overflow:hidden; margin-top:18px; animation:bootUp 0.6s cubic-bezier(.2,.8,.2,1) 0.3s both; }
  .cot-loader .cl-bar-fill { position:absolute; inset:0; width:55%; border-radius:2px; background:linear-gradient(90deg,transparent,var(--c-secondary) 35%,color-mix(in srgb,var(--c-secondary) 55%,white) 65%,transparent); animation:bootSlide 1.5s cubic-bezier(.4,0,.2,1) infinite; }
  .cot-select-btn { background:var(--c-primary); color:white; border:none; padding:7px 14px; border-radius:6px; font-size:11.5px; font-weight:600; cursor:pointer; transition:background 0.15s; white-space:nowrap; }
  .cot-select-btn:hover { background:var(--c-primary-700); }
  .cot-best-tag { display:inline-block; background:#10b981; color:white; font-size:9.5px; font-weight:700; padding:1px 6px; border-radius:3px; text-transform:uppercase; letter-spacing:0.4px; vertical-align:middle; }
  .empty-results { padding:60px; text-align:center; color:#94a3b8; font-size:14px; background:white; border-radius:10px; border:1px solid #e2e8f0; }

  /* Los resultados del cotizador de RC Médicos viven en el <style> de su bloque en
     index.html (clases .med-band / .med-opt*). El .med-head/.med-sub que había acá quedó
     sin markup con el rediseño del 10-ago-2026. */

  /* ===== Compañías y Asesores grids ===== */
  /* Vista Compañías: cards. auto-fit, NUNCA columnas fijas (clavarlo en 3 rompió la vista a
     1280px la semana pasada). Reemplaza el bloque .cia-card viejo (dead code: nada lo generaba,
     sub-clases cia-card-header/info/stats/actions sin uso en ningún js). */
  .companias-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:14px; }
  .cia-card { background:#fff; border:1px solid #e2e8f0; border-left:3px solid #94a3b8; border-radius:12px; padding:12px; transition:box-shadow .12s; }
  .cia-card:hover { box-shadow:0 2px 8px rgba(15,23,42,.08); }
  .cia-card-head { display:flex; align-items:center; gap:9px; min-width:0; margin-bottom:10px; cursor:pointer; }
  .cia-card-logo { width:32px; height:32px; border-radius:7px; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex:none; }
  .cia-card-id { min-width:0; }
  .cia-card-nombre { font-size:14px; font-weight:600; color:#0f172a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cia-card-razon { font-size:11px; color:#94a3b8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cia-card-off { opacity: .72; }
  .cia-card-hint { margin-top: 12px; padding: 10px 12px; background: var(--c-bg); border-radius: 8px; font-size: 12px; color: var(--c-text-3); }
  .cia-maestro { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; font-size: 13px; cursor: pointer; }
  .cia-sws { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--c-border); }
  .cia-sws-label { font-size: 11px; color: var(--c-text-3); margin-bottom: 10px; }
  .cia-sw { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 3px 0; cursor: pointer; }
  .cia-sw-ro { cursor: default; opacity: .8; }
  .cia-sw-ico { width: 18px; text-align: center; color: var(--c-text-3); }
  .cia-cats { margin-top: 14px; padding-left: 28px; }
  /* Con "Cotización manual" apagado la fila se muestra IGUAL, en gris y no clickeable (30-jul-2026):
     antes desaparecía entera y eso se leía como una inconsistencia entre compañías —una tenía los
     ramos y la otra no— en vez de como la consecuencia del tilde de arriba. La dependencia se ve
     mejor deshabilitada que oculta. */
  .cia-cats-off { opacity: .5; }
  .cia-cats-label { font-size: 11px; color: var(--c-text-3); margin-bottom: 8px; }
  .cia-cat { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin: 0 16px 6px 0; cursor: pointer; }
  /* Manual prendido y CERO categorías = no aparece en ningún ramo. Ámbar y no rojo: es un estado
     válido (recién habilitada, o destildada a propósito), no un error. Color FIJO, nunca
     var(--c-primary) — ver la nota de .cia-creds abajo. */
  .cia-cats-vacio { margin-top: 6px; padding: 8px 10px; background: #fef3c7; color: #92400e; border-radius: 6px; font-size: 12px; }
  /* Resumen read-only en la card del listado; los switches viven en la ficha. */
  .cia-resumen { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--c-border); font-size: 11.5px; color: var(--c-text-3); }
  /* Colores FIJOS, nunca var(--c-primary): con el color de marca de cada tenant un verde de
     "todo bien" se volvería verde-oliva en Vigier y azul en Bureau (misma regla de los badges
     de estado — ver CLAUDE.md). */
  .cia-creds { margin-top: 14px; padding: 10px 12px; border-radius: 8px; font-size: 12px; }
  .cia-creds.ok { background: #dcfce7; color: #15803d; }
  .cia-creds.warn { background: #fef3c7; color: #92400e; }
  .cias-apagadas { margin-top: 2rem; }
  .cias-apagadas > summary { cursor: pointer; font-size: 14px; color: var(--c-text-3); padding: 10px 0; }
  .cias-apagadas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 12px; }

  .asesor-card-top { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
  .asesor-card-avatar { width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-weight:700; font-size:18px; flex-shrink:0; }
  .asesor-card-name { font-size:15.5px; font-weight:700; color:#0f172a; line-height:1.2; }
  .asesor-card-meta { font-size:11.5px; color:#64748b; margin-top:3px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
  .asesor-card-meta .matricula { background:#dbeafe; color:var(--c-primary); padding:2px 8px; border-radius:4px; font-weight:600; font-size:10.5px; letter-spacing:0.4px; }
  .asesor-card-stats { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; padding-top:12px; border-top:1px solid #f1f5f9; }
  .asesor-card-stat { background:#f8fafc; border-radius:8px; padding:10px 12px; }
  .asesor-card-stat-label { font-size:10px; color:#64748b; text-transform:uppercase; letter-spacing:0.5px; font-weight:600; margin-bottom:3px; }
  .asesor-card-stat-value { font-size:15px; font-weight:700; color:#0f172a; }
  .asesor-card-stat-value.green { color:#15803d; }
  .asesor-card-contact { display:flex; gap:14px; margin-top:12px; padding-top:12px; border-top:1px solid #f1f5f9; font-size:11.5px; color:#64748b; flex-wrap:wrap; }
  .asesor-card-contact span { display:inline-flex; align-items:center; gap:5px; }
  .asesor-card { background:white; border:1px solid #e2e8f0; border-radius:12px; padding:18px; cursor:pointer; transition:all 0.15s; display:flex; flex-direction:column; }
  .asesor-card:hover { border-color:var(--c-primary); box-shadow:0 6px 18px rgba(15,23,42,0.08); transform:translateY(-2px); }
  .asesor-card-inactivo { opacity:0.7; background:#fafafa; }
  .asesor-card-inactivo:hover { opacity:1; }

  /* Siniestros */
  .sin-estado-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:12px; font-size:11.5px; font-weight:600; white-space:nowrap; }
  .sin-estado-badge.sin-estado-denunciado { background:#dbeafe; color:var(--c-estado-azul); }
  .sin-estado-badge.sin-estado-evaluacion { background:#fef3c7; color:#92400e; }
  .sin-estado-badge.sin-estado-acordado   { background:#e0e7ff; color:#3730a3; }
  .sin-estado-badge.sin-estado-pagado     { background:#dcfce7; color:#15803d; }
  .sin-estado-badge.sin-estado-rechazado  { background:#fee2e2; color:#991b1b; }

  /* Cobranzas realizadas (Zurich) */
  .cob-zurich-toolbar { align-items:flex-end; flex-wrap:wrap; gap:10px; }
  .cob-date-lbl { display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:600; color:#64748b; text-transform:uppercase; letter-spacing:0.4px; }
  .cob-date-lbl input { min-width:150px; }
  .cob-zurich-status { padding:18px; text-align:center; color:#64748b; font-size:13px; background:#f8fafc; border:1px dashed #e2e8f0; border-radius:10px; }
  /* Vencimientos / Gestión de cobranzas */
  /* La tabla se ADAPTA al contenido (en vez de anchos fijos que truncaban Aseguradora/
     Póliza/Vencimiento/Estado mientras sobraba espacio). Cada columna toma lo que necesita;
     solo el nombre del cliente (lo más variable) se capa con elipsis para no desbordar.
     Si aun así no entra (pantalla angosta), el contenedor scrollea horizontal en vez de cortar. */
  table.list-table-vencimientos { table-layout:auto; }
  /* 8 columnas: el padding es el que más pesa (se paga 2 veces por columna). De 14 a 10 son
     ~64px recuperados sin tocar contenido. Medido con contenido de peor caso (pólizas de San
     Cristóbal, "Accidentes Personales", nombres largos): 1154px → entra en un viewport de 1280
     con la sidebar puesta, donde antes se comía la columna de acciones. */
  /* ⚠ Va con `table.` adelante para igualar la especificidad de `table.list-table td` (0,0,1,2).
     Sin eso la regla NO GANA y el padding sigue en los 16px de la base — que es lo que pasaba
     con el `padding-left:14px` que había acá: estaba escrito y no aplicaba a nada. */
  table.list-table-vencimientos td, table.list-table-vencimientos th { padding-left:10px; padding-right:10px; }
  /* ⚠ El tope va en las DOS líneas de la celda. Estaba sólo en el nombre, y el ancho de la
     columna lo terminaba fijando el "PAS <apellido nombre>" de abajo, que no tenía ninguno. */
  .list-table-vencimientos .venc-cli-name,
  .list-table-vencimientos .venc-cli-doc { max-width:210px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .data-table:has(.list-table-vencimientos) { overflow-x:auto; overflow-y:visible; }
  /* ⚠ La columna de acciones queda FIJA a la derecha. Achicar la tabla ayuda pero no garantiza
     nada: el ancho real depende de los datos (un nombre largo, una compañía con nombre largo) y
     del zoom del navegador. Con la columna pegada, lo que se corta al scrollear es información
     que se puede leer scrolleando — nunca el botón que hay que apretar.
     El fondo es opaco a propósito: si no, las celdas que pasan por debajo se transparentan. */
  .list-table-vencimientos th:last-child,
  .list-table-vencimientos td:last-child { position:sticky; right:0; background:var(--c-surface); }
  .list-table-vencimientos th:last-child { background:#f8fafc; z-index:2; }
  table.list-table-vencimientos tr.clickable:hover td:last-child { background:#f8fafc; }
  .list-table-vencimientos td { vertical-align:middle; }
  .venc-cli-name { color:#0f172a; font-size:13px; line-height:1.3; }
  .venc-cli-doc { font-size:11px; color:#64748b; margin-top:2px; }
  .venc-poliza-num { font-family:inherit; color:#0f172a; font-size:12.5px; }
  .venc-poliza-ramo { font-size:11px; color:#64748b; margin-top:2px; }
  .venc-monto { color:#0f172a; font-size:13.5px; }
  .venc-monto-cuota { font-size:11px; color:#94a3b8; margin-top:2px; }
  .medio-pago-pill { display:inline-block; padding:4px 11px; border-radius:11px; font-size:11px; font-weight:700; letter-spacing:0.3px; }
  .medio-pago-pill.cbu { background:#dbeafe; color:var(--c-primary); }
  .medio-pago-pill.tc { background:#fce7f3; color:#9d174d; }
  .medio-pago-pill.efectivo { background:#fef3c7; color:#92400e; }
  /* La compañía no informa el medio: gris neutro, para que NO se lea como un medio más
     (🚩 sherpa #31 — antes estas pólizas figuraban "Efectivo" y eran un dato inventado). */
  .medio-pago-pill.sindato { background:#f1f5f9; color:#64748b; font-weight:600; }
  .venc-fecha { color:#0f172a; font-size:13px; }
  .venc-fecha-rel { font-size:11.5px; color:#64748b; margin-top:2px; }
  .venc-fecha-rel.urgente { color:#b91c1c; }
  .venc-fecha-rel.vencido { color:#991b1b; }
  .estado-cobr-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:14px; font-size:11.5px; font-weight:700; white-space:nowrap; }
  .estado-cobr-badge::before { content:'●'; font-size:9px; }
  .estado-cobr-badge.a-vencer { background:#dcfce7; color:#15803d; }
  .estado-cobr-badge.en-proceso { background:#fef3c7; color:#92400e; }
  .estado-cobr-badge.con-deuda { background:#fee2e2; color:#991b1b; }

  /* Comisiones */
  .moneda-pill { display:inline-block; padding:3px 8px; border-radius:5px; font-size:10.5px; font-weight:700; letter-spacing:0.5px; }
  .moneda-pill.ars { background:#dbeafe; color:var(--c-primary); }
  .moneda-pill.usd { background:#dcfce7; color:#15803d; }
  .pct-pill { display:inline-block; padding:3px 9px; border-radius:11px; font-size:11.5px; font-weight:700;  }
  .pct-pill.pct-low { background:#f1f5f9; color:#64748b; }
  .pct-pill.pct-mid { background:#fef3c7; color:#92400e; }
  .pct-pill.pct-high { background:#dcfce7; color:#15803d; }
  .cia-mini-logo { width:24px; height:24px; border-radius:5px; display:inline-flex; align-items:center; justify-content:center; color:white; font-weight:700; font-size:9.5px; flex-shrink:0; letter-spacing:0.3px; }
  .ramo-icon-pill { width:28px; height:28px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
  .ramo-icon-pill .ico, .cot-card-veh-icon .ico { width:17px; height:17px; }
  /* ⚠ `white-space:nowrap`: la columna "Cotización" es angosta y sin esto el chip se parte ADENTRO
     (el emoji en un renglón y la palabra abajo) apenas el texto pasa de una palabra — se vio a
     1100px al sumar el chip de renovación. */
  .origen-chip { display:inline-block; white-space:nowrap; padding:2px 7px; border-radius:6px; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; margin-top:5px; }
  .origen-chip.online { background:#dcfce7; color:#15803d; }
  .origen-chip.manual { background:#fef3c7; color:#92400e; }
  .origen-chip.pedido { background:#ede9fe; color:#6d28d9; }
  /* Va SIEMPRE junto al chip de origen (nunca solo) → margen izquierdo para que no se peguen. */
  .origen-chip.renovacion { background:#ccfbf1; color:#0f766e; margin-left:4px; }
  .comisiones-foot-row td { background:#f8fafc; font-size:13px; padding:11px 12px !important; border-top:2px solid #e2e8f0 !important; }
  .list-table-comisiones th { white-space:nowrap; }
  /* ⚠ nowrap en TODAS las celdas: la fila es UN renglón SIEMPRE (Martín, 1-sep-2026 — los
     nombres y montos envueltos hacían que "una fila se parta en dos"). La tabla crece a lo
     ancho y scrollea (overflow-x del contenedor, abajo); lo largo va con ellipsis + title. */
  .list-table-comisiones td { font-size:12.5px; white-space:nowrap; }
  /* Celdas compactas (Martín, 1-sep-2026: "que entre todo sin scroll lateral"): el padding
     16px del list-table genérico por 11 columnas era ~⅕ del ancho de la tabla en puro aire.
     ⚠ CON `table.` adelante: el genérico es `table.list-table td` (0-1-2) y una regla
     `.list-table-comisiones td` (0-1-1) PIERDE en silencio — medido: el padding seguía en 16
     con la regla "aplicada" (mismo gotcha de especificidad que la media query del 2-ago). */
  table.list-table-comisiones th { padding:11px 7px; }
  table.list-table-comisiones td { padding:13px 7px; }
  .list-table-comisiones .com-ellip { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* La sub-línea de detalle (tipo de endoso · nota del TC) también capea: con nowrap, una nota
     larga estira su columna entera y devuelve el scroll lateral que se acaba de sacar. */
  .list-table-comisiones .com-det { max-width:150px; overflow:hidden; text-overflow:ellipsis; }
  /* Sin negritas en la planilla (pedido de Martín, 1-sep-2026): el Nº de póliza hereda el
     600 de .poliza-num global — acá va a peso normal. Los montos ya salen sin bold del JS. */
  .list-table-comisiones .poliza-num { font-weight:400; }
  /* Solapas Comisión PAS / Organización: pegadas al borde superior de la tabla (mismo gesto
     que .toolbar capeando un .data-table). La activa, blanca con el subrayado primario. */
  .com-tabs { display:flex; width:fit-content; border:1px solid #e2e8f0; border-bottom:none; border-radius:8px 8px 0 0; overflow:hidden; background:#f8fafc; }
  .com-tab { padding:9px 22px; font-size:12.5px; font-weight:600; border:none; cursor:pointer; background:transparent; color:#64748b; }
  .com-tab.active { background:var(--c-surface, #fff); color:#1d4ed8; box-shadow:inset 0 -2px 0 #1d4ed8; }
  .com-tabs + .data-table { border-top-left-radius:0; }
  /* ⚠ .data-table nace con overflow:hidden: al sumar la columna Asesor (11ª, 1-sep-2026) la
     tabla ya no entra a 1280px y el recorte era SILENCIOSO (la columna existe en el DOM y no
     se ve). Mismo patrón que .list-table-vencimientos: que scrollee, no que se corte. */
  .data-table:has(.list-table-comisiones) { overflow-x:auto; overflow-y:visible; }

  /* ===== Comisiones percibidas / liquidación a asesores (js/comisiones.js) ===== */
  /* La barra de VISTAS (Percibidas · Devengadas · Liquidar) usa los mismos .com-tab pero
     va separada de la tabla: abajo de ella puede haber KPIs, no un .data-table. */
  .com-vistas { margin-bottom:14px; border-bottom:1px solid #e2e8f0; border-radius:8px; }
  .com-dim { color:#94a3b8; }
  .com-chip { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; white-space:nowrap; }
  .com-chip-azul { background:#dbeafe; color:#1d4ed8; }
  .com-chip-ok { background:#dcfce7; color:#15803d; }
  .com-chip-warn { background:#fef3c7; color:#b45309; }
  .com-chip-gris { background:#f1f5f9; color:#64748b; border:1px solid #e2e8f0; }
  .com-aviso-ambar { background:#fef3c7; color:#92400e; border:1px solid #fde68a; border-radius:8px; padding:8px 12px; font-size:12px; margin-bottom:10px; }
  .com-nota { font-size:11.5px; color:#64748b; margin-top:10px; }
  .com-sec-tit { font-size:11.5px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; color:#64748b; margin:18px 0 8px; }
  .com-fila-sin-tc td { background:#fffbeb; }
  .com-liq-anulada td { text-decoration:line-through; color:#94a3b8; }
  .com-liq-box { display:flex; gap:16px; align-items:flex-end; justify-content:space-between; flex-wrap:wrap;
    border:1px solid #e2e8f0; border-radius:10px; padding:14px; margin-bottom:14px; background:#f8fafc; }
  .com-liq-cab { font-size:11.5px; font-weight:600; color:#64748b; }
  .com-liq-total { font-size:26px; font-weight:800; color:#15803d; }
  .com-modal { max-width:640px; }
  .com-modal-row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
  .com-field { display:grid; gap:4px; }
  .com-field label { font-size:11px; font-weight:600; color:#64748b; }
  .com-map { display:grid; gap:6px; margin-bottom:10px; }
  .com-map-row { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; }
  .com-map-from { background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px; padding:4px 8px; font-family:ui-monospace,Menlo,monospace; font-size:11px; }
  .com-sum { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:12px 0; }
  .com-sum div { border:1px solid #e2e8f0; border-radius:8px; padding:8px 10px; font-size:11.5px; color:#64748b; }
  .com-sum b { display:block; font-size:16px; color:#1e293b; }
  .com-modal-acc { display:flex; gap:10px; justify-content:flex-end; margin-top:14px; }
  @media (max-width:640px){ .com-sum { grid-template-columns:1fr 1fr; } .com-liq-box { flex-direction:column; align-items:stretch; } }

  /* Compañías - badge de API */
  .cia-api-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:11px; font-size:10.5px; font-weight:700; letter-spacing:0.2px; white-space:nowrap; }
  .cia-api-badge.integrada { background:#dcfce7; color:#15803d; }
  .cia-api-badge.manual { background:#e0e7ff; color:#3730a3; }
  .cia-api-badge.test { background:#dbeafe; color:var(--c-estado-azul); }
  .cia-api-badge.pendiente { background:#fef3c7; color:#92400e; }
  .cia-api-badge.sin { background:#fee2e2; color:#991b1b; }

  /* Detalle de compañía */
  .cia-detail-logo { width:78px; height:78px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:white; font-weight:800; font-size:24px; flex-shrink:0; letter-spacing:0.6px; }
  .creds-warning { background:#fef3c7; border:1px solid #fde68a; border-radius:8px; padding:11px 14px; font-size:12px; color:#78350f; margin-bottom:14px; line-height:1.5; }
  .creds-list { display:flex; flex-direction:column; gap:8px; }
  .cred-row { display:grid; grid-template-columns:160px 1fr; gap:14px; align-items:center; padding:11px 14px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; }
  .cred-label { font-size:11.5px; color:#475569; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; }
  .cred-value { display:flex; align-items:center; gap:8px; min-width:0; flex-wrap:wrap; }
  .cred-value code { flex:1; min-width:0; font-family:inherit; font-size:13px; color:#0f172a; background:white; padding:7px 11px; border:1px solid #e2e8f0; border-radius:6px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cred-btn { padding:5px 10px !important; font-size:11px !important; flex-shrink:0; }

  /* Listado de asesores en formato lista (una fila por asesor) */
  .asesor-estado-badge { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:10px; font-size:10px; font-weight:700; letter-spacing:0.3px; text-transform:uppercase; margin-left:6px; }
  .asesor-estado-badge.activo { background:#dcfce7; color:#15803d; }
  .asesor-estado-badge.inactivo { background:#fee2e2; color:#991b1b; }
  /* Detalle de asesor */
  .asesor-detail-header { padding:20px 22px; }
  .asesor-detail-top { display:flex; align-items:center; gap:18px; }
  .asesor-detail-avatar { width:78px; height:78px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-weight:700; font-size:26px; flex-shrink:0; }
  .asesor-detail-info { flex:1; min-width:0; }
  .asesor-detail-name { font-size:22px; font-weight:800; color:#0f172a; line-height:1.2; display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
  .asesor-detail-role { font-size:13px; color:#64748b; font-weight:500; margin-top:4px; }
  .asesor-detail-meta { display:flex; gap:8px; flex-wrap:wrap; font-size:12px; color:#64748b; margin-top:8px; align-items:center; }
  .asesor-detail-actions { display:flex; gap:8px; flex-shrink:0; }
  /* nowrap: es una etiqueta de UNA línea — en el header del resumen del cotizador (donde va
     al lado de "Editar datos") el flex lo apretaba y caía a tres renglones. */
  .btn-back { background:transparent; border:1px solid #e2e8f0; color:#475569; font-size:13px; font-weight:600; padding:7px 14px; border-radius:7px; cursor:pointer; transition:all 0.12s; white-space:nowrap; }
  .btn-back:hover { background:#f1f5f9; border-color:#cbd5e1; color:#0f172a; }

  /* Print dropdown */
  .print-dropdown-wrapper { position:relative; display:inline-block; }
  .print-menu { position:absolute; top:calc(100% + 6px); right:0; background:white; border:1px solid #e2e8f0; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.15); min-width:240px; z-index:500; overflow:hidden; color:#0f172a; }
  .print-menu-header { padding:10px 16px; background:#f8fafc; border-bottom:1px solid #e2e8f0; font-size:10.5px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:0.6px; }
  .print-menu-item { padding:11px 16px; font-size:13px; cursor:pointer; display:flex; align-items:center; gap:10px; transition:background 0.12s; border-bottom:1px solid #f1f5f9; user-select:none; }
  .print-menu-item:last-child { border-bottom:none; }
  .print-menu-item:hover { background:#f1f5f9; color:var(--c-primary); }
  .print-menu-item .doc-icon { font-size:15px; width:22px; text-align:center; }
  /* Documentos que la compañía no provee: visibles pero apagados, con el motivo al pie
     (decisión de diseño 17-jul: "visible con motivo", nunca botones rotos). */
  .print-menu-item-off { cursor:default; opacity:0.45; }
  .print-menu-item-off:hover { background:transparent; color:inherit; }
  .print-menu-off-motivo { padding:9px 16px; font-size:11.5px; color:#94a3b8; background:#f8fafc; border-top:1px solid #e2e8f0; line-height:1.4; }

  /* Resalte breve de la card a la que se llega por un salto interno (menú Imprimir →
     Movimientos): sin esto el scroll deja al usuario en una tabla sin señal de por qué. */
  .card-resaltada { animation: cardResalte 1.6s ease-out; }
  @keyframes cardResalte {
    0%   { box-shadow:0 0 0 0 rgba(37,99,235,0); }
    18%  { box-shadow:0 0 0 3px rgba(37,99,235,0.38); }
    100% { box-shadow:0 0 0 0 rgba(37,99,235,0); }
  }

  /* Estados específicos de cotizaciones */
  .estado-cotizada { background:#dbeafe; color:var(--c-estado-azul); }
  .estado-emitida { background:#d1fae5; color:#065f46; }
  .estado-pendiente { background:#fef3c7; color:#92400e; }
  .estado-rechazada { background:#fee2e2; color:#991b1b; }

  /* ===== Dashboard - Tareas ===== */
  .tareas-list { display:flex; flex-direction:column; gap:8px; }
  /* Solicitudes usa la fila BASE de .renov-item (texto | derecha, 64px), igual que
     Movimientos y Renovaciones: el isotipo de la compañía va inline en el renglón
     gris con .renov-info.con-cia, no como avatar en una tercera columna.
     La columna derecha (chip + fecha apilados) no debe pasarse del alto de la fila,
     o la empujaría hacia abajo. Achicamos el chip para que chip↔título y
     fecha↔subtítulo queden en la misma línea. */
  #solicitudes-pend-list .renov-item .sol-chip { padding-top:1px; padding-bottom:1px; }

  /* ===== Dashboard - Cumpleaños ===== */
  .cumple-list { display:flex; flex-direction:column; gap:8px; }
  .cumple-item { padding:11px 12px; border:1px solid #e2e8f0; border-radius:8px; display:grid; grid-template-columns:auto 1fr auto auto; gap:11px; align-items:center; transition:all 0.12s; cursor:pointer; }
  .cumple-item:hover { background:#f8fafc; border-color:#cbd5e1; }
  .cumple-avatar-bday { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; color:white; flex-shrink:0; position:relative; }
  .cumple-avatar-bday::after { content:'🎂'; position:absolute; bottom:-3px; right:-4px; font-size:13px; line-height:1; }
  .cumple-name { font-size:13px; font-weight:600; color:#0f172a; }
  .cumple-info { font-size:11px; color:#64748b; margin-top:3px; }
  .cumple-days-pill { font-size:11px; font-weight:600; padding:4px 9px; border-radius:5px; white-space:nowrap; text-align:center; min-width:62px; }
  .cumple-days-pill.long { background:#f1f5f9; color:#475569; }
  .cumple-days-pill.this-month { background:#fef3c7; color:#92400e; }
  .cumple-days-pill.this-week { background:#fee2e2; color:#991b1b; }
  .cumple-days-pill.today { background:#10b981; color:white; }
  .cumple-wa-btn{
    flex-shrink:0;
    display:inline-flex; align-items:center; justify-content:center;
    width:32px; height:32px; margin-left:8px;
    border:none; border-radius:50%; cursor:pointer;
    background:#25D366; color:#fff;
    transition:filter .15s ease, transform .15s ease;
  }
  .cumple-wa-btn:hover{ filter:brightness(1.08); transform:scale(1.06); }
  .cumple-wa-btn:active{ transform:scale(.96); }

  /* Dashboard KPI grid forzar 4 columnas */
  #view-dashboard .kpi-grid { grid-template-columns:repeat(4,1fr); }
  @media (max-width:1100px) { #view-dashboard .kpi-grid { grid-template-columns:repeat(2,1fr); } }

  /* Variante de bar-fill para prima por sección */
  .bar-list-secondary .bar-fill { background:linear-gradient(90deg,#0891b2 0%,#06b6d4 100%); }

  /* ===== Dashboard - Accesos rápidos ===== */
  .quick-access-card { background:white; border:1px solid #e2e8f0; border-radius:10px; padding:18px 20px; display:flex; align-items:center; gap:14px; cursor:pointer; transition:all 0.15s; }
  .quick-access-card:hover { border-color:var(--c-secondary); box-shadow:0 6px 18px rgba(15,23,42,0.08); transform:translateY(-2px); }
  .quick-access-icon { width:48px; height:48px; border-radius:12px; color:white; font-size:22px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .quick-access-info { flex:1; min-width:0; }
  .quick-access-title { font-size:14px; font-weight:700; color:#0f172a; margin-bottom:4px; }
  .quick-access-desc { font-size:11.5px; color:#64748b; line-height:1.4; }
  .quick-access-arrow { font-size:18px; color:#94a3b8; transition:transform 0.15s, color 0.15s; flex-shrink:0; }
  .quick-access-card:hover .quick-access-arrow { color:var(--c-secondary); transform:translateX(4px); }

  /* ===== User menu dropdown ===== */
  .user-menu-wrapper { position:relative; }
  .user-menu { position:absolute; top:calc(100% + 10px); right:0; background:white; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.18); min-width:250px; z-index:1000; border:1px solid #e2e8f0; overflow:hidden; color:#0f172a; }
  .user-menu-header { padding:14px 16px; display:flex; align-items:center; gap:11px; background:#f8fafc; }
  .user-menu-avatar { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--c-secondary),#06b6d4); color:white; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
  .user-menu-name { font-size:13.5px; font-weight:600; color:#0f172a; }
  .user-menu-email { font-size:11.5px; color:#64748b; margin-top:2px; }
  .user-menu-divider { height:1px; background:#e2e8f0; }
  .user-menu-item { padding:11px 16px; font-size:13px; color:#0f172a; cursor:pointer; display:flex; align-items:center; gap:12px; transition:background 0.12s; user-select:none; }
  .user-menu-item:hover { background:#f1f5f9; }
  .user-menu-icon { font-size:14px; width:18px; text-align:center; }
  .user-menu-item.danger { color:#b91c1c; }
  .user-menu-item.danger:hover { background:#fee2e2; }

  /* ===== Login (pantalla completa sobre el color del tenant) =====
     La marca va ARRIBA y grande, y el formulario flota en un panel de vidrio: el fondo
     entero es del tenant (chrome + los dos resplandores), así que no hay card blanca que
     neutralice la marca. Todo el color sale de las variables que pisa applyTenantBrand;
     ningún hex de marca escrito acá.
     ⚠ `.login-input` es la ÚNICA clase de este bloque que se usa fuera de las pantallas de
     login (el buscador del selector de soporte, que vive en una card BLANCA). Por eso la base
     queda clara y el vestido oscuro va SCOPEADO a `.login-screen`: sacar ese scope deja el
     input del soporte con texto blanco sobre blanco. */
  .login-screen { position:fixed; inset:0; background:linear-gradient(160deg,var(--chrome-2) 0%,var(--chrome-1) 46%,var(--chrome-3) 100%); display:flex; align-items:center; justify-content:center; z-index:10000; padding:32px 20px; overflow:auto; }
  /* Resplandores: el de arriba con el secundario (en Bureau es el celeste de la paleta dual),
     el de abajo con el primario. Van en un ::before para no tapar el contenido. */
  .login-screen::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(760px 500px at 82% -6%,rgba(var(--c-secondary-rgb),0.26),transparent 64%),radial-gradient(620px 460px at 4% 104%,rgba(var(--c-primary-rgb),0.42),transparent 66%); }
  .login-stack { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:26px; width:100%; margin:auto; }
  .login-card { position:relative; z-index:1; width:100%; max-width:392px; margin:auto; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:20px; padding:30px 30px 28px; backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); box-shadow:0 28px 70px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.14); }
  .login-brand-block { display:flex; flex-direction:column; align-items:center; gap:11px; color:#fff; }
  .login-mountain { width:76px; height:42px; }
  .login-brand-text { display:flex; flex-direction:column; line-height:1; align-items:center; width:max-content; }
  .login-brand-name { display:flex; justify-content:space-between; width:100%; min-width:214px; font-size:31px; font-weight:800; color:#fff; line-height:1; }
  .login-brand-tag { font-size:10px; font-weight:500; color:rgba(255,255,255,0.58); letter-spacing:2.8px; margin-top:7px; line-height:1; }
  .login-brand-madre { display:flex; align-items:center; gap:10px; margin-top:4px; }
  .login-brand-madre span { font-size:13px; font-style:italic; color:rgba(255,255,255,0.5); }
  .login-brand-madre img { height:38px; width:auto; display:block; }
  /* El logo del login respira más que en la topbar (el tope general de .brand-logo-img es
     230×84): acá la marca ES la pantalla. Un PNG no se agranda más allá de su tamaño real,
     así que el tope alto no lo pixela. */
  .login-brand-block .brand-logo-img { max-width:260px; max-height:104px; }
  .login-title { font-size:19px; font-weight:700; color:#fff; margin-bottom:0; letter-spacing:-0.3px; }
  .login-subtitle { font-size:12.5px; color:rgba(255,255,255,0.58); margin:5px 0 22px; line-height:1.45; }
  .login-field { margin-bottom:15px; display:flex; flex-direction:column; gap:6px; }
  .login-field label { font-size:12px; font-weight:600; color:rgba(255,255,255,0.78); }
  .login-hint { font-size:11.5px; color:rgba(255,255,255,0.45); margin-top:2px; }
  .login-input { width:100%; padding:11px 14px; border:1px solid #cbd5e1; border-radius:8px; font-size:14px; outline:none; transition:all 0.15s; font-family:inherit; color:#0f172a; }
  .login-input:focus { border-color:var(--c-primary); box-shadow:0 0 0 3px rgba(var(--c-primary-rgb),0.12); }
  .login-screen .login-input { height:44px; padding:0 14px; border-radius:10px; border-color:rgba(255,255,255,0.18); background:rgba(255,255,255,0.07); color:#fff; }
  .login-screen .login-input::placeholder { color:rgba(255,255,255,0.34); }
  .login-screen .login-input:focus { border-color:rgba(255,255,255,0.55); background:rgba(255,255,255,0.11); box-shadow:0 0 0 3px rgba(255,255,255,0.14); }
  .login-pw { position:relative; display:flex; align-items:center; }
  .login-pw .login-input { padding-right:44px; }
  .login-eye { position:absolute; right:7px; width:30px; height:30px; display:grid; place-items:center; border:0; background:transparent; color:rgba(255,255,255,0.55); border-radius:7px; cursor:pointer; padding:0; }
  .login-eye:hover { color:#fff; background:rgba(255,255,255,0.1); }
  .login-eye svg { width:18px; height:18px; }
  /* El tachado se prende con una CLASE en el botón, no con el atributo `hidden` del <path>:
     en SVG ese atributo no lo esconde (el ojo quedaba sin tachar con la clave a la vista). */
  .login-eye-tachado { display:none; }
  .login-eye.ver .login-eye-tachado { display:inline; }
  .login-options { display:flex; justify-content:space-between; align-items:center; margin:14px 0 18px; font-size:12.5px; }
  .login-checkbox { display:flex; align-items:center; gap:7px; color:rgba(255,255,255,0.75); cursor:pointer; user-select:none; }
  .login-checkbox input { accent-color:#fff; cursor:pointer; width:15px; height:15px; }
  .login-forgot { color:rgba(255,255,255,0.8); text-decoration:none; font-weight:500; }
  .login-forgot:hover { color:#fff; text-decoration:underline; }
  .login-error { background:rgba(239,68,68,0.16); color:#fecaca; padding:10px 12px; border-radius:10px; font-size:12.5px; margin-bottom:14px; border:1px solid rgba(248,113,113,0.42); display:flex; align-items:center; gap:8px; }
  /* Botón BLANCO con el texto en el color de marca, no el degradé de marca con texto blanco:
     medido el 15-sep-2026, el texto blanco sobre el final de ese degradé daba 3,68 (Sherpa),
     3,22 (Bureau) y 2,19 (Vigier) contra el 4,5 que pide AA — o sea, ninguno pasaba y el verde
     de Vigier era ilegible. Así da 10,4 / 11,4 / 5,3 y además resalta sobre el fondo oscuro. */
  .login-btn { width:100%; height:46px; background:#fff; color:var(--c-primary-700); border:none; border-radius:10px; font-size:14.5px; font-weight:700; font-family:inherit; letter-spacing:-0.1px; cursor:pointer; transition:transform 0.15s, box-shadow 0.15s; }
  .login-btn:hover { transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,0.34); }
  .login-btn[disabled] { opacity:0.6; cursor:default; transform:none; box-shadow:none; }
  .login-recuperar .login-subtitle { margin-bottom:20px; }
  .login-volver { text-align:center; margin-top:14px; font-size:12.5px; }
  .login-footer { text-align:center; font-size:11px; color:rgba(255,255,255,0.36); margin-top:0; padding-top:0; border-top:0; }
  .login-salir { font-size:12.5px; color:rgba(255,255,255,0.8); text-decoration:none; font-weight:500; }
  .login-salir:hover { color:#fff; text-decoration:underline; }

  /* ===== Overlay de carga inicial (bootstrap) ===== */
  /* inset NEGATIVO a propósito: con inset:0 el redondeo de subpíxel (zoom fraccional,
     simulador de Safari) deja una línea del body blanco en los bordes derecho/inferior */
  /* 0.15s (era 0.35s, 3-sep-2026): el fade es lo último que ve el usuario antes de poder clickear
     y medía como espera pura — 0,4 s entre que el bootstrap terminó y la app respondió. */
  .boot-overlay { position:fixed; inset:-2px; z-index:9500; overflow:hidden; background:linear-gradient(135deg,var(--chrome-1) 0%,var(--chrome-4) 50%,var(--chrome-2) 100%); display:flex; align-items:center; justify-content:center; transition:opacity 0.15s ease; }
  /* Aurora (3-sep-2026, pedido Martín "más dinámicos, high end"): dos manchas radiales en los
     colores del tenant (--c-secondary-rgb la pisa el branding) derivando despacio detrás de la
     tarjeta. Compartida con .cot-loader. Sólo transform → composited, no repinta. Ninguna marca
     acá: el color y el logo salen de la paleta/tenantBrand. */
  .boot-overlay::before, .boot-overlay::after, .cot-loader::before, .cot-loader::after { content:""; position:absolute; inset:-30%; pointer-events:none; will-change:transform; }
  .boot-overlay::before, .cot-loader::before { background:radial-gradient(closest-side at 32% 38%, rgba(var(--c-secondary-rgb),0.34), transparent 70%); animation:bootAuroraA 9s ease-in-out infinite alternate; }
  .boot-overlay::after, .cot-loader::after { background:radial-gradient(closest-side at 70% 66%, rgba(255,255,255,0.10), transparent 66%); animation:bootAuroraB 12s ease-in-out infinite alternate; }
  @keyframes bootAuroraA { from { transform:translate(-5%,-4%) scale(1); } to { transform:translate(7%,6%) scale(1.18); } }
  @keyframes bootAuroraB { from { transform:translate(6%,5%) scale(1.1); } to { transform:translate(-7%,-6%) scale(0.92); } }
  .boot-overlay.boot-out { opacity:0; pointer-events:none; }
  /* ...y el inset negativo NO alcanza: el canvas del browser hereda el fondo de <body>
     (--c-bg, casi blanco) y un position:fixed NO acompaña el rebote elástico del scroll
     de Safari → un gesto de trackpad durante el loader destapa ese casi-blanco en los
     bordes. Mientras el loader o el login tapan la pantalla, pintamos el canvas del
     mismo oscuro (el branding por tenant pisa --chrome-1, así que acompaña solo). */
  body:has(.boot-overlay:not([hidden])),
  body:has(.login-screen:not([hidden])) { background:var(--chrome-1); }
  .boot-card { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; animation:bootIn 0.55s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes bootIn { from { opacity:0; transform:translateY(14px) scale(0.97); } to { opacity:1; transform:none; } }
  .boot-mountain { width:104px; height:58px; overflow:visible; }
  .boot-mountain path { fill:none; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
  .boot-mountain-bg { stroke:rgba(255,255,255,0.13); }
  /* La montañita dibuja con cabeza luminosa, sostiene y se desvanece (antes se "desdibujaba"
     hacia atrás). El trazo es el acento del tenant aclarado hacia blanco. */
  .boot-mountain-draw { stroke:color-mix(in srgb,var(--c-secondary) 60%,white); stroke-dasharray:100; filter:drop-shadow(0 0 5px rgba(var(--c-secondary-rgb),0.95)); animation:bootDraw 2.6s cubic-bezier(.45,0,.2,1) infinite; }
  @keyframes bootDraw { 0% { stroke-dashoffset:100; opacity:1; } 58% { stroke-dashoffset:0; opacity:1; } 82% { stroke-dashoffset:0; opacity:1; } 100% { stroke-dashoffset:0; opacity:0; } }
  /* El nombre (o el logo, que vive adentro de .boot-brand) entra desenfocado y se resuelve. */
  .boot-brand { font-size:19px; font-weight:800; letter-spacing:7px; text-indent:7px; color:white; margin-top:10px; text-shadow:0 0 18px rgba(var(--c-secondary-rgb),0.45); animation:bootTracking 0.9s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes bootTracking { from { letter-spacing:14px; opacity:0; filter:blur(3px); } to { letter-spacing:7px; opacity:1; filter:none; } }
  /* El brillo abraza la FORMA del logo (drop-shadow respeta el alfa del PNG), no su caja. */
  .boot-card .brand-logo-img, .cot-loader .cl-brand-logo { animation:bootLogoGlow 3.2s ease-in-out infinite; }
  @keyframes bootLogoGlow { 0%,100% { filter:drop-shadow(0 0 0 rgba(var(--c-secondary-rgb),0)); } 50% { filter:drop-shadow(0 0 14px rgba(var(--c-secondary-rgb),0.75)) brightness(1.06); } }
  .boot-title { font-size:14px; font-weight:600; color:#e2e8f0; margin-top:16px; animation:bootUp 0.6s cubic-bezier(.2,.8,.2,1) 0.15s both; }
  /* min-height: la última etapa deja el subtítulo vacío y sin reserva la tarjeta salta. */
  .boot-sub { font-size:12px; color:rgba(255,255,255,0.66); margin-top:4px; min-height:15px; animation:bootUp 0.6s cubic-bezier(.2,.8,.2,1) 0.25s both; }
  @keyframes bootUp { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
  /* Barra con PROGRESO REAL: --boot-p la mueve bootProgreso() (js/bootstrap.js) en cada fase del
     bootstrap; el brillo que la recorre dice "sigue vivo" entre fase y fase. */
  .boot-bar { position:relative; width:220px; height:3px; border-radius:2px; background:rgba(255,255,255,0.12); overflow:hidden; margin-top:18px; animation:bootUp 0.6s cubic-bezier(.2,.8,.2,1) 0.35s both; }
  .boot-bar-fill { position:absolute; left:0; top:0; height:100%; border-radius:2px; width:var(--boot-p,6%); background:linear-gradient(90deg,var(--c-secondary),color-mix(in srgb,var(--c-secondary) 55%,white)); transition:width 0.7s cubic-bezier(.2,.8,.2,1); }
  .boot-bar-fill.boot-creep { transition:width 2.2s cubic-bezier(.1,.6,.3,1); }
  .boot-bar-fill::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.6) 50%,transparent); transform:translateX(-100%); animation:bootSheen 1.6s ease-in-out infinite; }
  @keyframes bootSheen { to { transform:translateX(100%); } }
  .boot-pct { font-size:10.5px; letter-spacing:0.12em; color:rgba(255,255,255,0.42); margin-top:9px; min-height:13px; font-variant-numeric:tabular-nums; animation:bootUp 0.6s cubic-bezier(.2,.8,.2,1) 0.4s both; }
  @keyframes bootSlide { 0% { transform:translateX(-100%); } 100% { transform:translateX(200%); } }

  /* ===== Mi Perfil ===== */
  .profile-card-top { display:flex; align-items:center; gap:24px; padding:28px; margin-bottom:18px; background:white; border-radius:10px; border:1px solid #e2e8f0; flex-wrap:wrap; }
  .profile-avatar { width:96px; height:96px; border-radius:50%; background:linear-gradient(135deg,var(--c-primary),var(--c-secondary)); color:white; font-weight:700; font-size:34px; display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; letter-spacing:0.5px; overflow:visible; }
  .profile-avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
  .profile-avatar-edit { position:absolute; bottom:0; right:0; width:32px; height:32px; border-radius:50%; background:white; border:2px solid var(--c-primary); color:var(--c-primary); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:14px; transition:all 0.15s; }
  .profile-avatar-edit:hover { background:var(--c-primary); color:white; }
  .profile-info-name { font-size:24px; font-weight:700; color:#0f172a; line-height:1.2; }
  .profile-info-role { font-size:13px; color:#64748b; margin-top:8px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .profile-info-contact { font-size:13px; color:#475569; margin-top:10px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
  .profile-info-contact span { display:inline-flex; align-items:center; gap:5px; }

  [hidden] { display:none !important; }

/* ===== Solicitudes ===== */
.modal-overlay { position:fixed; inset:0; background:rgba(15,23,42,0.45); display:flex; align-items:center; justify-content:center; z-index:9000; padding:20px; }
.modal { background:#fff; border-radius:14px; box-shadow:0 20px 60px rgba(15,23,42,0.3); width:100%; max-width:480px; padding:22px; max-height:90vh; overflow:auto; }
.modal h2 { margin:0 0 14px; font-size:18px; color:#0f172a; }
/* Modal "Nueva gestión" del dashboard: dos secciones de tiles con el MISMO formato que las
   cards de tipo del alta de solicitud (.sol-tipo-card) — cotizadores arriba, los 5 tipos de
   solicitud directos abajo (sin paso intermedio, pedido de Martín 24-ago-2026). */
.gestion-modal { max-width:600px; }
.gestion-modal-head { display:flex; justify-content:space-between; align-items:center; }
.gestion-modal-x { border:none; background:none; font-size:15px; color:#94a3b8; cursor:pointer; padding:4px 6px; line-height:1; }
.gestion-modal-x:hover { color:#475569; }
.gestion-modal-sec { font-size:11.5px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; color:#64748b; margin:16px 0 8px; }
.gestion-tiles { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.gestion-tiles .gestion-tile-full { grid-column:1 / -1; }
@media (max-width:640px){ .gestion-tiles { grid-template-columns:1fr; } }
/* Alta a pantalla completa — selector de tipo en tarjetas */
.sol-tipo-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
.sol-tipo-card { display:flex; align-items:center; gap:12px; padding:13px 15px; border:1.5px solid #e2e8f0; border-radius:11px; background:#fff; cursor:pointer; transition:all 0.14s; }
.sol-tipo-card:hover { border-color:#bfdbfe; box-shadow:0 3px 10px rgba(var(--c-primary-rgb),0.08); transform:translateY(-1px); }
.sol-tipo-card.sel { border-color:var(--c-secondary); background:linear-gradient(135deg,#f0f9ff,#eff6ff); box-shadow:0 0 0 3px rgba(var(--c-secondary-rgb),0.13); }
.sol-tipo-ico { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; }
.sol-tipo-nom { font-size:14px; font-weight:700; color:#0f172a; }
.sol-tipo-sub { font-size:11.5px; color:#64748b; margin-top:1px; }
/* Misma altura para inputs y selects de una fila (texto vs select difieren unos px) */
#sol-nueva-cont input.form-input, #sol-nueva-cont select.form-input { height:38px; box-sizing:border-box; }
/* ⚠ EXCEPCIÓN: la grilla de coberturas va compacta (Martín, 3-sep-2026: "más apiladas"). La regla
   de arriba lleva un id, así que la excepción también tiene que llevarlo o no gana — bajar la
   altura sólo en `.sol-cobs` (css/polizas-recuotificar.css) no hacía NADA y la grilla seguía igual. */
#sol-nueva-cont .sol-cobs input.form-input, #sol-nueva-cont .sol-cobs select.form-input,
#sol-nueva-cont input.sol-cob-otras { height:28px; }
/* Alta a ANCHO COMPLETO: los campos llenan el ancho (la form-grid auto-fit arma varias
   columnas) y Comentarios + Adjuntos van al final; así entra sin scroll largo. */
.sol-nueva-cols { display:block; }
/* Alta de COTIZACIÓN MANUAL en secciones numeradas (gráfica del cotizador de autos, jul-2026):
   contenedor plano apilando cards .form-section; el .sol-grupo intermedio se vuelve transparente
   para que las secciones del builder queden como hijas directas. */
.sol-cot-alta { display:flex; flex-direction:column; gap:14px; }
.sol-cot-alta .sol-grupo[data-grupo="cotizacion"] { display:contents; }
.sol-cot-alta .sol-ia-lector { margin-top:0; }
#sol-nueva-cont .sol-tipo-cards { grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.sol-desc-grow { min-height:90px; resize:vertical; }
/* Campo de importe: chip de moneda pegado al input (grupo). */
/* Lector de póliza por IA (cotización manual): banner con el botón + hint. */
.sol-ia-lector { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; padding:12px 14px; border:1px dashed #c7d2fe; background:#eef2ff; border-radius:10px; }
.sol-ia-lector .sol-ia-hint { color:#475569; font-size:12.5px; line-height:1.35; flex:1; min-width:200px; }
.sol-ia-btn:disabled { opacity:.7; cursor:default; transform:none; }
/* Campo leído por la IA con poca certeza: resaltado para que el usuario lo revise. */
.sol-ia-dudoso, .sol-ia-dudoso.form-input { background:#fef9c3 !important; border-color:#facc15 !important; }
/* Campo traído del padrón de ARCA. Es el CONTRARIO del ámbar de .sol-ia-dudoso: aquél dice
   "revisá esto", éste dice "esto es el registro fiscal". Verde suave, no grita. */
.sol-arca, .sol-arca.form-input { background:#f0fdf4 !important; border-color:#86efac !important; }
/* Fecha de nacimiento que este usuario NO puede corregir (organizador + sus socios/empleados, ver
   puedeEditarFechaNacFront). Mismo gris que la identidad bloqueada del cotizador: dice "esto no se
   toca", no "esto está mal". ⚠ Va DESPUÉS de .sol-arca y con !important porque el campo suele
   venir de ARCA y quedaría verde-editable a la vista, que es justo lo contrario de lo que pasa. */
.fnac-bloqueada, .fnac-bloqueada.form-input { background:#f1f5f9 !important; border-color:#e2e8f0 !important; color:#475569; cursor:not-allowed; }
/* Aviso del padrón, debajo del CUIT/DNI. Sin botón (la consulta se dispara al salir del campo),
   este texto es TAMBIÉN el indicador de carga — de ahí el "Consultando ARCA…". */
.sol-padron-msg { margin-top:5px; font-size:12px; line-height:1.35; color:#64748b; }
.sol-padron-msg.ok { color:#15803d; }
.sol-padron-msg.err { color:#b91c1c; }
.sol-padron-msg.warn { color:#a16207; font-weight:600; }
/* Botón de reintento del padrón: aparece dentro del aviso cuando la consulta falló o ARCA no
   contestó a tiempo. Antes el único reintento era salir y volver a entrar al campo — un gesto
   que nadie descubre (🚩 bds #33). */
.padron-reintentar { margin-left:8px; padding:1px 8px; font-size:11.5px; font-weight:600;
  color:#b91c1c; background:#fef2f2; border:1px solid #fecaca; border-radius:6px; cursor:pointer; }
.padron-reintentar:hover { background:#fee2e2; }
/* Un DNI que en ARCA pertenece a más de una persona: el aviso ámbar las lista para ELEGIR
   (🚩 bds #209). Botones apilados y a ancho completo porque lo que se compara es el NOMBRE —
   en fila, dos apellidos largos se cortan y la elección vuelve a ser a ciegas. El que ya está
   cargado va deshabilitado: es el estado actual, no una alternativa. */
.padron-candidatos { display:flex; flex-direction:column; gap:4px; margin-top:6px; }
.padron-candidato { text-align:left; padding:5px 9px; font-size:12px; font-weight:600;
  color:#713f12; background:#fff; border:1px solid #facc15; border-radius:7px; cursor:pointer; }
.padron-candidato:hover:not(:disabled) { background:#fef9c3; }
.padron-candidato:disabled { color:#a16207; background:#fef9c3; cursor:default; opacity:.75; }
/* Aviso del lector de póliza del cotizador de autos (js/cotizador-leer-poliza.js): los campos
   que hay que completar/verificar. Mismo ámbar que .sol-ia-dudoso — significa lo mismo. */
#cot-ia-aviso { margin-top:10px; display:flex; flex-direction:column; gap:6px; }
/* Contenedor de los avisos de la precarga por IA de la ORDEN de emisión (🚩 bds #198). Reusa
   `.cot-ia-aviso-item` para cada línea: el ámbar significa lo mismo en las dos pantallas, y
   duplicar la paleta sería que un día dejen de parecerse. */
.oe-ia-aviso { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
/* Ídem para el lector de DENUNCIAS del alta de siniestro (js/siniestros-leer-denuncia.js), que
   es la tercera pantalla con este mismo circuito. ⚠ `flex-basis:100%`: acá el aviso vive DENTRO
   de la caja `.sol-ia-lector`, que es un flex EN FILA — sin esto se apretaría al lado del botón
   en vez de ocupar su propio renglón. */
#sin-ia-aviso { flex-basis:100%; margin-bottom:0; }
/* Lector de la denuncia en la FICHA del siniestro (backfill). Reusa el componente azul del
   lector del alta; lo único propio es la separación: acá abre la ficha, así que se alinea con
   los márgenes de las cards que vienen abajo en vez de colgar del bloque anterior. */
#sin-bf-lector { margin-top:0; margin-bottom:16px; }
.cot-ia-aviso-item { background:#fef9c3; border:1px solid #facc15; border-radius:8px; padding:8px 11px; font-size:12.5px; color:#713f12; line-height:1.45; }
/* "✓ Verifiqué los datos": libera el botón Cotizar, que queda trabado mientras haya un campo en
   ámbar sin confirmar. Va DENTRO del aviso ámbar (misma paleta, no un botón primario: confirmar
   no es la acción principal de la pantalla — cotizar lo es). */
.cot-ia-confirmar { margin-left:8px; background:#fff; border:1px solid #ca8a04; color:#854d0e; border-radius:7px; padding:4px 10px; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; }
.cot-ia-confirmar:hover { background:#fefce8; border-color:#a16207; }
/* Cotizar frenado: se ve APAGADO y no invita al click, pero sigue siendo el mismo botón (el
   motivo está en el aviso de arriba, no en un tooltip que hay que descubrir).
   ⚠ Sólo .btn-frenado, NO :disabled a secas: ese mismo `disabled` lo usa el guard de
   doble-submit mientras cotiza, y apagar el botón ahí cambiaría el estado "cotizando…". */
.btn-cotizar.btn-frenado { opacity:.5; cursor:not-allowed; box-shadow:none; }
.btn-cotizar.btn-frenado:hover { transform:none; box-shadow:none; }
.sol-monto-wrap { display:flex; align-items:stretch; }
.sol-monto-wrap .sol-monto-cur { display:flex; align-items:center; padding:0 10px; background:#f1f5f9; border:1px solid #e2e8f0; border-right:none; border-radius:8px 0 0 8px; color:#475569; font-size:13px; white-space:nowrap; }
.sol-monto-wrap .form-input { border-top-left-radius:0; border-bottom-left-radius:0; min-width:0; }
/* Sufijo (el % de la tasa): mismo chip que el prefijo de moneda pero del lado derecho. */
.sol-tasa-wrap .form-input { border-radius:8px 0 0 8px; border-right:none; }
.sol-monto-suf { display:flex; align-items:center; padding:0 10px; background:#f1f5f9; border:1px solid #e2e8f0; border-left:none; border-radius:0 8px 8px 0; color:#475569; font-size:13px; }
/* Campo tipo 'domicilio' (cliente + riesgo): 2 filas. Fila 1: calle(3) + nº/piso/dto. Fila 2:
   localidad(3) + cp + provincia(2). La localidad trae CP + provincia del catálogo LOCALIDADES_AR. */
.sol-domicilio-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.sol-domicilio-grid .sol-dom-calle,
.sol-domicilio-grid .sol-dom-localidad { grid-column:span 3; }
.sol-domicilio-grid .sol-dom-provincia { grid-column:span 2; }
@media (max-width:640px){
  .sol-domicilio-grid { grid-template-columns:repeat(2,1fr); }
  .sol-domicilio-grid .sol-dom-calle,
  .sol-domicilio-grid .sol-dom-localidad { grid-column:1 / -1; }
  .sol-domicilio-grid .sol-dom-provincia { grid-column:auto; }
}
/* Banda de "Tipo de operación": queda SÓLO para el grupo de cotización embebido en una solicitud
   común, que no tiene sección de intermediario donde meter los dos campos. En el alta y en la
   ficha viven dentro de la card del intermediario (19-ago-2026). */
.sol-tipoop-banda { border:1px solid var(--c-border); border-radius:12px; padding:14px 16px; margin-bottom:14px; background:var(--c-surface); }
.sol-tipoop-banda .form-field-label { margin-bottom:6px; }
/* Hueco del lector de PDF con IA, ahora a la DERECHA del título de la sección 1 (antes se turnaba
   con el buscador de póliza en la fila; desde que la póliza está siempre visible ya no hay turno).
   `margin-left:auto` lo manda al extremo del encabezado, que es flex. */
/* ⚠ `min-height` = el alto del botón del lector (33px, MEDIDO): se ESCONDE en renovación
   (display:none) y sin reservarle el alto el encabezado —y con él la card entera— se achicaba al
   alternar de modo, o sea la fila saltaba. Si cambia el padding/tamaño del botón hay que re-medir:
   lo pinea `scripts/verify-cot-manual-grilla.mjs` ("la sección mide IGUAL en los dos modos"). */
.form-section-title .sol-tipoop-extra { margin-left:auto; display:flex; align-items:center; min-height:33px; }
.sol-tipoop-extra > div:empty { display:none; }
/* El lector, ya dentro del encabezado, deja de ser una banda con fondo propio: es un control más. */
.sol-tipoop-extra .sol-ia-lector { margin:0; padding:0; border:none; background:none; border-radius:0; }
.sol-tipoop-extra .sol-ia-lector .sol-ia-btn { white-space:nowrap; padding:6px 12px; font-size:12.5px; }
/* Grilla única de la card "Datos del intermediario y tipo de operación": los CINCO campos en UNA
   línea (tipo de operación · póliza que renueva · organizador · productor · asesor).
   ⚠ Las columnas van 5 → 1, nunca un número que no divida a 5: cualquier otro deja la última fila
   con hueco muerto al final, que es justo lo que pinea verify-cot-manual-grilla. */
.sol-interm-grid { grid-template-columns:repeat(5,1fr); }
.sol-interm-solo-op { grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){
  .sol-interm-grid { grid-template-columns:1fr; }
  .sol-interm-solo-op { grid-template-columns:1fr; }
}
/* Datos del cliente (cotización manual) — DOS filas (3-ago-2026, pedido de Martín):
   arriba la IDENTIDAD, abajo DOMICILIO + contacto. Las columnas se miden POR CONTENIDO (fr
   desparejos, no N columnas iguales): así "Responsable Inscripto" entra justo, un "Piso" no
   ocupa lo mismo que una calle, y ninguna fila deja hueco muerto al final.
   Fila 1: CUIT · Nombre/Razón social · IVA · Tipo · Actividad · Fecha de nac.
   ⚠ `.es-empresa` saca la última columna: a una persona jurídica no se le pide fecha de
   nacimiento (🚩 bds #72) y su campo va `hidden` — un hidden sale del flujo, la PISTA no, así
   que sin cambiar el molde quedaba la columna vacía. Lo togglea `_solTipoCliAplicar`. */
.sol-cli-fila1 { grid-template-columns:1.25fr 2.6fr 1.8fr 1.05fr 2fr 1.3fr; align-items:end; }
/* El aviso de ARCA (sólo errores acá: el ✓ está apagado por `avisoOk:false`) se ANCLA al pie de
   su campo en vez de crecer dentro: creciendo, empujaba su celda y sacaba de línea a toda la fila
   — dos renglones de texto movían los seis campos. Con fondo propio, porque flota sobre la fila
   de abajo. */
.sol-cli-fila1 .form-field { position:relative; }
.sol-cli-fila1 .sol-padron-msg { position:absolute; top:100%; left:0; z-index:3; margin-top:3px;
  min-width:100%; width:max-content; max-width:320px; background:#fff; border-radius:6px; padding:2px 4px; }
.sol-cli-fila1.es-empresa { grid-template-columns:1.3fr 3fr 1.9fr 1.2fr 2.2fr; }
/* Fila 2: domicilio (5 sub-inputs) + teléfono + email. */
.sol-cli-fila2 { grid-template-columns:6.2fr 1.1fr 1.5fr; align-items:end; margin-top:12px; }
/* Domicilio del cliente: Calle · Nº · Piso · Dto + el cuadro ÚNICO de localidad (localidad + CP +
   provincia). Nº/Piso/Dto al mínimo — antes ocupaban 1/12 de la fila cada uno para dos dígitos. */
.sol-domicilio-grid.sol-dom-cli { grid-template-columns:2.3fr .75fr .5fr .5fr 2.6fr; gap:12px; }
/* ⚠ PISO del Nº (19-ago-2026): con la altura repartida sólo por `fr`, un número de calle de 4
   dígitos NO ENTRABA en la caja a los anchos reales de trabajo — medido `scrollWidth 56 > clientWidth
   44` a 1280px y 53 a 1000px: se veía "2396" con el último dígito cortado, y era el domicilio de
   pantalla, no un caso raro. El `min-width` lo hace independiente del reparto (una pista `fr` no
   baja del min-content de su ítem); Piso y Dto siguen al mínimo, que es lo que se quería. Lo pinea
   `verify-cot-manual-grilla` ("ningún sub-input del domicilio recorta su valor"). */
.sol-domicilio-grid.sol-dom-cli .sol-dom-numero { min-width:72px; }
.sol-domicilio-grid.sol-dom-cli .sol-loc-inp { position:relative; }
/* ⚠ El molde de arriba NO alcanza: `.sol-domicilio-grid .sol-dom-calle { grid-column:span 3 }`
   (el domicilio del RIESGO, 6 columnas iguales) le pega a estos mismos sub-inputs y hacía que
   Calle se comiera tres tracks — medido: Piso de 333px y Localidad de 64px. Cada campo va a UNA
   celda, y su ancho lo pone la pista. */
.sol-domicilio-grid.sol-dom-cli .sol-dom-calle,
.sol-domicilio-grid.sol-dom-cli .sol-dom-numero,
.sol-domicilio-grid.sol-dom-cli .sol-dom-piso,
.sol-domicilio-grid.sol-dom-cli .sol-dom-dto,
.sol-domicilio-grid.sol-dom-cli .sol-loc-inp { grid-column:auto; }
@media (max-width:1250px){
  /* ⚠ Las clases se REPITEN a propósito: `.sol-cli-fila1.es-empresa` (0,2,0) le gana a un
     `.sol-cli-fila1` pelado (0,1,0) aunque esté dentro de una media query — estar en una media
     query NO suma especificidad, y ese fue el bug del 2-ago (filas de un campo con 138px muertos). */
  .sol-cli-fila1, .sol-cli-fila1.es-empresa { grid-template-columns:repeat(2,1fr); }
  .sol-cli-fila2 { grid-template-columns:1fr; }
  .sol-domicilio-grid.sol-dom-cli { grid-template-columns:2.3fr .6fr .6fr .6fr 2.6fr; }
}
@media (max-width:900px){
  .sol-cli-fila1, .sol-cli-fila1.es-empresa { grid-template-columns:1fr; }
  .sol-domicilio-grid.sol-dom-cli { grid-template-columns:1fr 1fr; }
  .sol-domicilio-grid.sol-dom-cli .sol-dom-calle,
  .sol-domicilio-grid.sol-dom-cli .sol-loc-inp { grid-column:1 / -1; }
}
/* Grilla de "Datos del riesgo": 8 columnas; los anchos van inline por campo (rubro 3 / m² 1 /
   seguridad 4 entran en una fila; domicilio y coberturas a ancho completo). */
/* ⚠ 24 columnas (era 8 hasta el 3-ago-2026). Con 8 no entran SEIS campos en una fila, y con 12 no
   se puede hacer Año (4 dígitos) más angosto que Patente (7) y que la fila igual CIERRE. El ancho
   por campo lo declara su def (`ancho`, default 6 = un cuarto de fila, exactamente lo que valía
   2 de 8) → ningún otro ramo se movió. */
.sol-riesgo-grid { grid-template-columns:repeat(24,1fr); }
@media (max-width:820px){
  .sol-riesgo-grid { grid-template-columns:1fr; }
  .sol-riesgo-grid > .form-field { grid-column:1 / -1 !important; }
}
/* Variante 'una sola fila' (domicilio del riesgo): los 7 sub-inputs en una línea. */
/* Calle · Nº · Piso · Dto · [localidad unificada]: el bloque de localidad es UNA celda desde el
   3-ago-2026 (antes eran tres columnas sueltas). */
.sol-dom-oneline { grid-template-columns:1.8fr .6fr .6fr .6fr 2.4fr; }
.sol-dom-oneline .sol-dom-calle,
.sol-dom-oneline .sol-dom-localidad,
.sol-dom-oneline .sol-dom-provincia { grid-column:auto; }
@media (max-width:820px){
  .sol-dom-oneline { grid-template-columns:repeat(2,1fr); }
  .sol-dom-oneline .sol-dom-calle,
  .sol-dom-oneline .sol-dom-localidad { grid-column:1 / -1; }
}
/* Campo tipo 'localidad': UN input visible con el texto compuesto (localidad + CP + provincia) y
   su desplegable anclado — los tres datos viajan en hidden. */
/* El input de localidad va envuelto para poder anclarle el desplegable de sugerencias
   (`.loc-suggestions` es `position:absolute`: sin un ancestro posicionado se cuelga del viewport). */
.sol-loc-inp { position:relative; }
/* Aviso dentro de la grilla del riesgo (def `tipo:'nota'`): NO es un campo — no lleva label ni
   input, así que tampoco lleva el borde de `.form-input`. Ámbar de "leeme", no rojo de error:
   lo que dice es un requisito del ramo (adjuntar el contrato de obra), no algo que esté mal. */
.sol-riesgo-nota {
  font-size:12.5px; line-height:1.45; color:#92400e;
  background:#fffbeb; border:1px solid #fde68a; border-radius:8px; padding:9px 12px;
}
/* Edades del viajero: una caja chica por pasajero, que envuelven cuando son muchos. */
.sol-edades { display:flex; flex-wrap:wrap; gap:8px; }
.sol-edades .sol-edad { width:64px; text-align:center; }
.sol-edades-vacio { font-size:12.5px; color:#94a3b8; padding:9px 0; }
/* Dentro de una fila repetible (los lotes de Agro) el desplegable tiene que poder desbordar la
   celda de la tabla, y el input ocupar todo el ancho de su columna. */
.sol-loc-item { width:100%; }
.sol-loc-item .form-input { width:100%; }
.sol-items-tbl td { overflow:visible; }
/* (`.sol-dom-12` — el domicilio del cliente sobre 12 columnas iguales — murió el 3-ago-2026:
   el domicilio pasó a `.sol-dom-cli`, con columnas por contenido y localidad/CP/provincia en un
   solo cuadro. El molde vive arriba, junto a las dos filas del cliente.) */
/* === Logo-imagen de tenant (white-label) === */
.brand-logo-img{max-width:230px;max-height:84px;width:auto;height:auto;display:block;margin:0 auto;}
/* max-width < los 200px de la columna del sidebar: un logo de tenant al límite no toca los bordes */
.brand-logo-topbar{max-height:64px;max-width:176px;width:auto;height:auto;display:block;}
/* Logo de tenant en el topbar: centrarlo en su contenedor (sin el padding-left que lo tira a la izquierda) */
.topbar .logo:has(.brand-logo-topbar){justify-content:center;padding-left:0;}
/* `chromeContinuo` (config del tenant): topbar, logo y sidebar son UN solo panel —
   mismo degradé vertical anclado al viewport (fixed), sin cortes de color ni líneas entre ellos. */
html.chrome-continuo .topbar,
html.chrome-continuo .topbar .logo,
html.chrome-continuo .sidebar{background:linear-gradient(180deg,var(--chrome-1) 0%,var(--chrome-3) 100%) fixed;}
html.chrome-continuo .topbar .logo{align-self:stretch;}
html.chrome-continuo .sidebar{border-right:0;}
/* Panel oscuro detrás de logos blancos (ej. Bureau) */
.login-brand-block.brand-oscuro,.boot-card.brand-oscuro{background:#0f172a;border-radius:14px;padding:20px 24px;}
.boot-card.brand-oscuro{box-shadow:none;}

/* ===== Impersonación / Selector de soporte ===== */
.imp-banner{position:fixed;top:0;left:0;right:0;z-index:9999;background:#b45309;color:#fff;
  padding:8px 16px;display:flex;align-items:center;gap:12px;justify-content:center;font-size:13px;font-weight:600;}
.imp-banner-salir{background:#fff;color:#b45309;border:none;border-radius:6px;padding:4px 12px;cursor:pointer;font-weight:700;}
/* El banner (position:fixed, ~37px) tapa la franja superior; el .app se corre para abajo
   con padding-top PROPIO en vez de padding en el body + calc(100vh-36).
   ⚠ Por qué así: body{padding-top:36px} + .app{height:calc(100vh-36px)} parte el alto del
   viewport en DOS valores que redondean por separado → con escalado/zoom fraccional su suma
   cae 1px device por debajo de 100vh y asoma una línea del --c-bg (casi blanco) del body en
   el borde inferior (visible contra el sidebar oscuro). Un solo valor (.app height:100vh)
   redondea una sola vez y cubre el viewport exacto; el padding-top interno (border-box, via
   el reset *) baja la grilla por debajo del banner sin agregar alto de página. */
body.impersonando .app{padding-top:37px;}
.soporte-selector{position:fixed;inset:0;z-index:9998;background:#0f172a;display:flex;align-items:center;justify-content:center;padding:20px;}
.soporte-card{background:#fff;border-radius:16px;padding:28px;width:100%;max-width:440px;box-shadow:0 20px 60px rgba(0,0,0,.4);}
.soporte-title{font-size:22px;font-weight:800;}
.soporte-sub{color:#64748b;margin:4px 0 16px;}
.soporte-lista{max-height:340px;overflow:auto;margin-top:10px;display:flex;flex-direction:column;gap:6px;}
.soporte-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid #e2e8f0;border-radius:10px;cursor:pointer;}
.soporte-item:hover{background:#f1f5f9;}
.soporte-item .rol{font-size:11px;color:#64748b;text-transform:uppercase;}
.insp-estado { display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:13px; color:#334155; flex-wrap:wrap; }
.insp-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
/* ⚠ min-width:0 + width:100%: un grid item mide `auto` por defecto y el input[type=file]
   nativo tiene un ancho intrínseco grande → la 2ª columna se desbordaba del modal y
   quedaba recortada (medido 25-jul-2026 en el panel de inspección de SC). */
.insp-slot { display:flex; flex-direction:column; gap:4px; min-width:0; font-size:12px; color:#475569; border:1px solid #e2e8f0; border-radius:8px; padding:8px; }
.insp-slot > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.insp-slot input[type=file] { width:100%; max-width:100%; box-sizing:border-box; font-size:11px; }

/* Pautas de suscripción pendientes (GetUnderwrittingIssues): mientras haya una que
   bloquee, SC rechaza las fotos con "Existen pautas pendientes de Resolución" — así que
   se muestran con su texto y qué papel pide, no un contador. */
.insp-pautas { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.insp-pauta { border:1px solid #fcd34d; background:#fffbeb; border-radius:8px; padding:8px 10px; font-size:12.5px; color:#78350f; }
.insp-pauta-tit { font-weight:700; display:flex; align-items:center; gap:6px; margin-bottom:2px; }
.insp-pauta-doc { margin-top:4px; font-size:12px; color:#92400e; }
.insp-pauta.insp-pauta-ok { border-color:#bbf7d0; background:#f0fdf4; color:#166534; }
/* El botón de "enviar fotos" de SC en realidad compromete la póliza: que no sorprenda. */
.insp-aviso-emite { margin-top:10px; font-size:12.5px; color:#92400e; background:#fffbeb; border:1px solid #fcd34d; border-radius:8px; padding:8px 10px; }

/* Accesos rápidos en el header de la ficha del asegurado */
.aseg-accesos { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.aseg-acceso-btn { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border:1px solid #e2e8f0; border-radius:9px; background:#fff; color:#334155; font-size:13px; font-weight:600; cursor:pointer; transition:background .15s,border-color .15s; }
.aseg-acceso-btn:hover { background:#f8fafc; border-color:#cbd5e1; }
.aseg-cnt { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:#dbeafe; color:var(--c-primary); font-size:12px; font-weight:700; }
.aseg-cnt.aseg-cnt-zero { background:#f1f5f9; color:#94a3b8; }

/* Banner "Mostrando solo: <cliente>" en Solicitudes/Siniestros/Cotizaciones */
.filtro-cliente-banner { display:flex; align-items:center; gap:10px; background:#eff6ff; border:1px solid #bfdbfe; border-radius:10px; padding:9px 14px; margin-bottom:14px; }
.filtro-cliente-banner .fcb-text { font-size:13px; color:var(--c-primary); font-weight:600; }
.filtro-cliente-banner .fcb-x { margin-left:auto; padding:4px 10px; border:1px solid #bfdbfe; border-radius:8px; background:#fff; color:var(--c-primary); font-size:12px; font-weight:600; cursor:pointer; }
.filtro-cliente-banner .fcb-x:hover { background:#dbeafe; }

/* Sección de documentos del cliente */
/* ====== Relaciones entre clientes (grupos de afinidad) — ver js/asegurados-relaciones.js ====== */
.aseg-rel-card { background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:18px 22px; margin-top:22px; }
.aseg-rel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.aseg-rel-title { font-size:15px; font-weight:700; color:#1e293b; }
.aseg-rel-head-r { display:flex; align-items:center; gap:10px; }
.aseg-rel-count { font-size:11.5px; color:#64748b; font-weight:500; }
.aseg-rel-add-btn { padding:7px 14px; border:1px solid #cbd5e1; border-radius:9px; background:#fff; color:#334155; font-size:13px; font-weight:600; cursor:pointer; }
.aseg-rel-add-btn:hover { background:#f8fafc; }
.aseg-rel-list { display:flex; flex-direction:column; gap:8px; }
.aseg-rel-empty { color:#94a3b8; font-size:13px; padding:8px 2px; }
.aseg-rel-row { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid #e2e8f0; border-radius:10px; }
.aseg-rel-info { flex:1; min-width:0; }
.aseg-rel-nombre { color:#2563eb; font-size:13.5px; font-weight:600; cursor:pointer; }
.aseg-rel-nombre:hover { text-decoration:underline; }
.aseg-rel-nombre-off { color:#64748b; cursor:default; }
.aseg-rel-nombre-off:hover { text-decoration:none; }
.aseg-rel-sub { font-size:11.5px; color:#94a3b8; }
.aseg-rel-pill { background:#f1f5f9; color:#475569; border-radius:999px; padding:4px 11px; font-size:11.5px; font-weight:600; white-space:nowrap; }
.aseg-rel-del { background:none; border:none; color:#cbd5e1; font-size:14px; cursor:pointer; padding:2px 4px; }
.aseg-rel-del:hover { color:#ef4444; }
/* Editar vínculo (🚩 bds #262): mismo botón fantasma que el borrar, pero el hover invita a
   editar (azul), no a destruir. */
.aseg-rel-edit:hover { color:#2563eb; }
.aseg-rel-form { background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:14px; margin-bottom:8px; }
.aseg-rel-form-row { display:flex; gap:10px; align-items:flex-start; }
.aseg-rel-fld { flex:1; position:relative; }
.aseg-rel-fld-tipo { flex:0 0 176px; }
/* La razón social de una empresa desborda el track de 176px → recortar con puntos suspensivos. */
.aseg-rel-fld label { display:block; font-size:11px; color:#64748b; font-weight:600; margin-bottom:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Los campos usan .form-input del proyecto (select.form-input ya apaga el appearance nativo y
   dibuja el chevron). ⚠ La altura FIJA es lo que los empareja: un select con appearance nativa se
   dimensiona con las métricas del SO e IGNORA el padding → salía más bajo que el input aunque
   ambos tuvieran el mismo padding. */
.aseg-rel-fld .form-input { height:38px; }
.aseg-rel-res { position:absolute; left:0; right:0; z-index:5; background:#fff; border:1px solid #e2e8f0; border-top:none; border-radius:0 0 8px 8px; max-height:190px; overflow-y:auto; }
.aseg-rel-res:empty { display:none; }
.aseg-rel-res-row { padding:8px 10px; border-bottom:1px solid #f1f5f9; display:flex; justify-content:space-between; gap:8px; font-size:12.5px; color:#1e293b; cursor:pointer; }
.aseg-rel-res-row:last-child { border-bottom:none; }
.aseg-rel-res-row:hover { background:#f8fafc; }
.aseg-rel-res-doc { color:#94a3b8; font-size:11.5px; white-space:nowrap; }
.aseg-rel-res-empty { padding:8px 10px; color:#94a3b8; font-size:12.5px; }
.aseg-rel-form-foot { display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
.aseg-rel-hint { font-size:11.5px; color:#94a3b8; }
.aseg-rel-btns { display:flex; gap:7px; }
.aseg-rel-cancel { padding:6px 12px; border:1px solid #e2e8f0; border-radius:8px; background:#fff; color:#64748b; font-size:12.5px; font-weight:600; cursor:pointer; }
.aseg-rel-save { padding:6px 14px; border:none; border-radius:8px; background:#2563eb; color:#fff; font-size:12.5px; font-weight:600; cursor:pointer; }
.aseg-rel-save:hover { background:#1d4ed8; }

.aseg-docs-card { background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:18px 22px; margin-top:22px; }
.aseg-docs-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.aseg-docs-title { font-size:15px; font-weight:700; color:#1e293b; }
.aseg-docs-upload-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border:1px solid #cbd5e1; border-radius:9px; background:#fff; color:#334155; font-size:13px; font-weight:600; cursor:pointer; }
.aseg-docs-upload-btn:hover { background:#f8fafc; }
.aseg-docs-list { display:flex; flex-direction:column; gap:8px; }
.aseg-docs-empty, .aseg-docs-loading { color:#94a3b8; font-size:13px; padding:8px 2px; }
.aseg-doc-row { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid #e2e8f0; border-radius:10px; }
.aseg-doc-ic { font-size:18px; }
.aseg-doc-info { flex:1; min-width:0; }
.aseg-doc-nombre { font-size:14px; color:#1e293b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aseg-doc-meta { font-size:12px; color:#94a3b8; }
.aseg-doc-act { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border:none; border-radius:8px; background:transparent; color:#475569; font-size:16px; cursor:pointer; text-decoration:none; }
.aseg-doc-act:hover { background:#f1f5f9; }
.aseg-doc-del:hover { background:#fee2e2; color:#b91c1c; }
.insp-msg { margin:10px 0; font-size:12.5px; color:#334155; min-height:16px; }

.doc-volver{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:#64748b;background:none;border:none;cursor:pointer;padding:4px 0;margin-bottom:8px;}
.doc-volver:hover{color:var(--c-secondary);}
.doc-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:.5px solid #e2e8f0;border-bottom:.5px solid #e2e8f0;margin-bottom:12px;flex-wrap:wrap;}
.doc-breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:#64748b;flex-wrap:wrap;}
.doc-crumb{color:var(--c-secondary);cursor:pointer;}
.doc-crumb:hover{text-decoration:underline;}
.doc-sep{color:#cbd5e1;}
.doc-actions{display:flex;gap:8px;}
.doc-actions .btn-pri,.doc-actions .btn-sec{font-size:13px;padding:7px 12px;border-radius:8px;cursor:pointer;border:.5px solid #cbd5e1;background:#fff;}
.doc-actions .btn-pri{border-color:var(--c-secondary);color:var(--c-primary-strong);}
.doc-list{border:.5px solid #e2e8f0;border-radius:8px;overflow:hidden;}
.doc-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:.5px solid #f1f5f9;cursor:pointer;}
.doc-row:last-child{border-bottom:none;}
.doc-row:hover{background:#f8fafc;}
.doc-ico{font-size:20px;width:24px;text-align:center;}
.doc-row-info{flex:1;min-width:0;}
.doc-name{font-size:14px;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.doc-meta{font-size:12px;color:#94a3b8;}
.doc-row-acc{display:flex;gap:6px;align-items:center;}
.doc-ico-btn{font-size:15px;color:#64748b;cursor:pointer;padding:2px 4px;border-radius:6px;}
.doc-ico-btn:hover{background:#e2e8f0;}
.doc-empty{padding:28px 14px;text-align:center;color:#94a3b8;font-size:13px;}
.doc-progress{height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden;margin-bottom:10px;}
#doc-progress-bar{height:100%;width:0;background:var(--c-secondary);transition:width .15s;}

/* max-width:none pisa el `.sol-modal { max-width:520px }` de la sección Solicitudes (~línea 1750). */
.pcap-modal { width:min(680px,94vw); max-width:none; max-height:88vh; overflow-y:auto; }
.captar-prefill { border-color:#16a34a !important; background:#f0fdf4; }
.captar-dudoso  { border-color:#d97706 !important; background:#fffbeb; }
.pcap-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; }
.pcap-grid label { display:flex; flex-direction:column; font-size:12px; color:#475569; gap:4px; }
.pcap-leyenda { font-size:12px; color:#64748b; margin-bottom:10px; }
.pcap-dot-ok { color:#16a34a; } .pcap-dot-dud { color:#d97706; }
.pcap-errores { color:#991b1b; background:#fee2e2; border-radius:8px; padding:8px 10px; margin-top:10px; font-size:13px; }
/* Secciones de riesgo del alta (🚩 bds #121): vehículo y riesgo patrimonial. */
.pcap-sec-tit { font-size:12px; font-weight:700; color:#0f172a; margin:16px 0 8px; padding-top:12px; border-top:1px solid #e2e8f0; }
.pcap-sec-btns { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.pcap-sec-btn { font-size:12px; padding:6px 10px; }
.pcap-cobs { margin-top:10px; }
.pcap-cobs-tit { font-size:10.5px; color:#64748b; text-transform:uppercase; font-weight:700; letter-spacing:.4px; padding-bottom:4px; }
.pcap-cob-row { display:flex; justify-content:space-between; gap:14px; font-size:12.5px; color:#334155; padding:5px 2px; border-bottom:1px solid #f1f5f9; }
.pcap-cob-row span:last-child { color:#0f172a; font-weight:600; white-space:nowrap; }

/* ===== Cotización manual — compañías a cotizar ===== */
.sol-cia-head { display:flex; justify-content:flex-end; margin-bottom:4px; }
.sol-cia-count { font-size:12px; color:#888; }
/* Reparto de la fila de la FICHA. El nombre se lleva 1.4fr (antes 1fr contra 1.25fr del detalle):
   con la ficha a 2 columnas cada fila tiene la mitad del ancho, y el reparto viejo dejaba al
   nombre ~106px en la columna más angosta que el grid admite → "Federación Patronal" con ellipsis.
   Con 1.4fr / 130px / 1fr, en esa misma columna mínima (440px) el nombre se lleva ~169px, que es
   lo que mide la fila más larga (tilde 22 + gap 10 + texto). El detalle (motivo/adjunto) tolera
   achicarse: el input es elástico y el chip del adjunto tiene texto FIJO ("Ver documento"). */
/* ⚠ EL REPARTO CAMBIÓ EL 18-ago-2026 (1.4/1 → 1.15/1.35) porque la 3ª celda dejó de tener UN
   elemento: ahora lleva "📄 Ver documento" + 🔄 Reemplazar + ✕ Quitar (recotización). Medido en la
   ficha REAL, que va a DOS columnas: con el reparto viejo la celda daba 178px, el link solo ocupa
   121px y el ✕ se caía a un segundo renglón — la fila quedaba de dos líneas desalineadas (captura
   de prod de Martín: "queda horrible como se ve"). Con 1.35fr la celda pasa a ~231px y los tres
   entran en una línea.
   ⚠⚠ Los dos ejes están ATADOS: lo que se le da al detalle se le saca al NOMBRE, y ahí aparece la
   ellipsis. Los dos se miden juntos en `scripts/verify-cia-fila-acciones.mjs` — tocar este reparto
   sin correrlo es volver a elegir a ciegas. */
.sol-cia-row { display:grid; grid-template-columns:minmax(0,1.15fr) 130px minmax(0,1.35fr); gap:10px; align-items:center; padding:8px 0; border-top:1px solid #e5e5e5; }
.sol-cia-row.off { opacity:.5; }
/* La celda del adjunto se declara FLEX en fila: sin `display` era un bloque con hijos inline, que
   envuelven solos y en el orden en que caen (así el ✕ terminaba SOLO, debajo y a la izquierda). */
.sol-cia-det { display:flex; align-items:center; gap:4px; min-width:0; }
.sol-cia-nom { display:flex; align-items:center; gap:10px; min-width:0; }
.sol-cia-nom > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sol-cia-chk { display:inline-flex; align-items:center; cursor:pointer; }
.sol-cia-chk .sol-cia-in { position:absolute; opacity:0; width:0; height:0; }
/* Cuadrado (no círculo): un círculo sugiere "elegí una sola", acá se tildan varias. */
.sol-cia-tilde { width:22px; height:22px; border-radius:5px; border:1px solid #c8c8c8; display:inline-flex; align-items:center; justify-content:center; font-size:13px; flex:none; }
.sol-cia-tilde.on { background:#e6f5ec; border-color:#2e9e5b; color:#2e7d46; }
/* Alta (sol-f-): fila reducida a tilde+nombre (sin estado/detalle) → HASTA 5 por fila (Martín lo
   pidió explícito el 17-jul: "hasta 5 columnas"), bajando solo a 4/3/2/1 cuando el ancho no da.
   ⚠ auto-fit con minmax(190px,1fr) PELADO no sirve: esta vista es full-width (sin tope de ancho),
   así que a 1440px+ empaqueta 6/7 columnas. El techo se logra haciendo que el track mínimo nunca
   baje de UN QUINTO del contenedor: `max(190px, (100% - 4*gap)/5)` → con 5 tracks ya no entra un
   6º. El `100%` resuelve contra el CONTENEDOR (no el viewport) → cuenta el sidebar y el padding
   solo, sin media queries que adivinen anchos. El piso de 190px es lo que mide la fila más larga
   ("Federación Patronal" = tilde 22 + gap 10 + texto) con aire; por debajo de eso caen columnas.
   Medido (ancho del contenedor): ≥1030→5, 800..1029→4, 590..799→3, 380..589→2, <380→1.
   Esto NO es el mismo error que el de la fila de 1280px (aquella tenía 8 tracks fijos +
   ocultamiento por nth-child sobre controles distintos entre sí — acá son N columnas iguales de
   una lista). Los conteos por viewport están pineados en scripts/verify-cias.mjs. */
.sol-cia-list-alta {
  --sol-cia-gap: 20px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(max(190px, (100% - 4 * var(--sol-cia-gap)) / 5), 1fr));
  gap:0 var(--sol-cia-gap);
}
.sol-cia-list-alta .sol-cia-row { grid-template-columns:1fr; padding:8px 0; }

/* Ficha (sol-v-): HASTA 2 columnas (Martín, 17-jul: "2 columnas, más compacto todo"). Mismo truco
   de techo que el alta — el track mínimo nunca baja de LA MITAD del contenedor, así no entra una
   3ª — pero con piso de 440px en vez de 190: la fila de la ficha lleva nombre + estado + detalle,
   no solo tilde+nombre. Debajo de 904px de contenedor (2×440 + gap) cae sola a 1 columna, que es
   el layout de siempre. ⚠ El piso y el reparto de `.sol-cia-row` están atados: bajar el piso sin
   darle más fr al nombre le activa la ellipsis. Conteos por viewport pineados en verify-cias.mjs. */
.sol-cia-list-ficha {
  --sol-cia-gap: 24px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(max(440px, (100% - var(--sol-cia-gap)) / 2), 1fr));
  gap:0 var(--sol-cia-gap);
}
.sol-cia-est { font-size:13px; }
.sol-cia-pend { background:#f2f2f2; color:#555; }
.sol-cia-sol  { background:#e8f0fb; color:#1c4f8f; }
.sol-cia-cot  { background:#fdf0d9; color:#8a5a08; }
.sol-cia-ok   { background:#e6f5ec; color:#1f6b3c; }
.sol-cia-no   { background:#fbeaea; color:#992d2d; }
.sol-cia-hint { font-size:12px; color:#888; }

/* ===== Documentos editables y regenerables (🚩 sherpa #78) ===== */
/* El modal previo a bajar un PDF: todos los campos que el documento imprime, agrupados por la
   misma sección en la que salen impresos, para que se lea como el papel que se está por generar. */
.doc-sec { margin-bottom:14px; }
.doc-sec-tit { font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  color:#64748b; margin-bottom:6px; padding-bottom:4px; border-bottom:1px solid #e2e8f0; }
/* Dos columnas: los campos son cortos (nombre, póliza, teléfono) y en una sola columna el modal
   quedaba con 16 renglones y scroll. El de prosa ocupa el ancho completo. */
.doc-sec-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; }
.doc-campo { margin:0; }
.doc-campo-ancho { grid-column:1/-1; }
@media (max-width:640px){ .doc-sec-grid { grid-template-columns:1fr; } }
/* Campo FIJO: su valor lo decide la póliza o algo que ya se eligió antes, así que no se edita.
   Se dibuja apagado —fondo gris, sin cursor de texto— pero SELECCIONABLE: quien lo carga en la
   compañía copia y pega desde acá. El origen va en la etiqueta ("· de la póliza"): un campo que
   no se puede tocar y no dice por qué se lee como un bug. */
.doc-campo-fijo .form-input { background:#f1f5f9; border-color:#e2e8f0; color:#475569; cursor:default; }
.doc-campo-fijo .form-input:focus { outline:none; box-shadow:none; border-color:#e2e8f0; }
.doc-campo-origen { font-weight:400; text-transform:none; letter-spacing:0; color:#94a3b8; }
/* El cartel de "no estás mirando el original". Ámbar, no rojo: tener una versión editada es lo
   normal y esperado, no un error — lo que hace falta es que se note antes de volver a mandarlo. */
.doc-aviso { display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:#fffbeb; border:1px solid #fde68a; color:#92400e; border-radius:8px;
  padding:8px 10px; font-size:12px; margin-bottom:10px; }
.doc-aviso-btn { flex:0 0 auto; padding:4px 10px; font-size:12px; }
/* Grillas editables dentro del modal (ítems de flota, coberturas). Se puede agregar y quitar
   renglones: a la compañía se le manda a veces una unidad menos, o una fila que el ticket no tenía. */
.doc-tabla-wrap { margin:0; }
.doc-tabla { width:100%; border-collapse:collapse; margin:4px 0 6px; }
.doc-tabla th { font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  color:#64748b; text-align:left; padding:2px 4px; }
.doc-tabla td { padding:2px; }
.doc-tabla .form-input.doc-celda { padding:4px 6px; font-size:12px; }
.doc-tabla-x { width:26px; }
.doc-fila-x { border:none; background:none; cursor:pointer; color:#94a3b8; font-size:16px; line-height:1; padding:2px 4px; }
.doc-fila-x:hover { color:#dc2626; }
.doc-fila-mas { padding:3px 10px; font-size:12px; }
.doc-tabla-vacia { font-size:12px; color:#94a3b8; padding:2px 0 6px; }
/* Chip del adjunto. ⚠ SIN `text-overflow:ellipsis`: lo tuvo un año y NUNCA truncó nada — el
   ellipsis no aplica a un contenedor flex, así que el chip desbordaba la celda entera y se montaba
   sobre la fila vecina. Lo que lo contiene de verdad es `max-width:100%` + `overflow:hidden`, y el
   texto ahora es fijo ("Ver documento") → el ancho no depende del nombre del archivo. */
.sol-cia-adj { display:inline-flex; align-items:center; gap:4px; font-size:12px; padding:4px 8px; border-radius:6px; background:#f4f4f4; max-width:100%; overflow:hidden; white-space:nowrap; }
a.sol-cia-adj { color:inherit; text-decoration:none; }
a.sol-cia-adj:hover { background:#e8e8e8; text-decoration:underline; }
.sol-cia-adj-btn { font-size:12px; padding:4px 10px; }
/* Tasa cotizada por compañía (🚩 bds #206, sólo ART). Convive con el adjunto en la 3ª columna:
   en ART la compañía muchas veces contesta la alícuota por mail SIN PDF, así que el número y el
   archivo son independientes. `flex:none` para que el input no se estire y deje sin lugar al
   botón Adjuntar — .sol-cia-det es flex y sin esto el input se come la fila. */
.sol-cia-tasa-wrap { position:relative; display:inline-flex; align-items:center; flex:none; }
.sol-cia-tasa { width:74px; padding-right:20px; font-size:12.5px; text-align:right; }
.sol-cia-tasa-pct { position:absolute; right:7px; font-size:11.5px; color:var(--c-text-3); pointer-events:none; }
.sol-cia-tasa-ro { font-size:12.5px; font-weight:600; white-space:nowrap; flex:none; }
@media (max-width: 700px) { .sol-cia-row { grid-template-columns:1fr; gap:6px; } }

/* Autoguardado de la ficha de cotización: ocupa el lugar del ex botón "Guardar cambios". Es el
   ÚNICO feedback de que un cambio viajó → el error tiene que ser imposible de no ver. */
.sol-autosave { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--c-text-3); min-height:32px; }
.sol-autosave-guardando { color:var(--c-text-3); }
.sol-autosave-ok { color:#1f6b3c; }
.sol-autosave-error { color:#991b1b; background:#fbeaea; border-radius:6px; padding:4px 10px; font-weight:600; }
.sol-autosave-retry { font-size:12px; padding:2px 8px; margin-left:4px; }
/* Obligatorio vacío: avisa, NO frena (decisión de Martín: el autoguardado graba igual). */
.campo-falta { border-color:#dc2626 !important; background:#fffafa; }

/* ===== Detalle de compañía — Accesos WS/API (solo organizador TOPE) ===== */
.cia-acc-chip { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; padding:2px 8px; border-radius:var(--r-pill); background:var(--c-border-soft); color:var(--c-text-2); margin-left:8px; vertical-align:middle; }
.cia-acc-desc { font-size:12px; color:var(--c-text-3); margin:-4px 0 12px; }
.cia-acc-cargando { font-size:12.5px; color:var(--c-text-3); padding:6px 0; }
.cia-acc-vacio { font-size:12.5px; color:var(--c-text-2); background:var(--c-bg); border:1px dashed var(--c-border); border-radius:var(--r-sm); padding:12px 14px; }
.cia-acc-tabla { width:100%; border-collapse:collapse; }
.cia-acc-tabla tr + tr td { border-top:1px solid var(--c-border-soft); }
.cia-acc-lbl { padding:8px 12px 8px 0; font-size:12px; color:var(--c-text-2); font-weight:600; white-space:nowrap; width:1%; }
.cia-acc-val { padding:8px 0; font-size:12.5px; color:var(--c-text); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; word-break:break-all; }

/* ===== Reporte de errores (botón 🐞 de la topbar) ===== */
.error-report-modal { max-width: 520px; }
.error-report-hint { margin: 0 0 12px; font-size: 12.5px; color: #64748b; }
.error-report-modal textarea { width: 100%; box-sizing: border-box; border: 1.5px solid #e2e8f0; border-radius: 9px; padding: 10px 12px; font: inherit; font-size: 13px; resize: vertical; }
.error-report-modal textarea:focus { outline: none; border-color: var(--c-secondary); box-shadow: 0 0 0 3px rgba(var(--c-secondary-rgb), 0.13); }
.error-report-shot { margin: 12px 0; border: 1px solid #e2e8f0; border-radius: 9px; overflow: hidden; background: #f8fafc; text-align: center; }
.error-report-shot img { display: block; width: 100%; max-height: 220px; object-fit: contain; background: #f1f5f9; }
.error-report-noshot { display: block; padding: 14px; font-size: 12px; color: #94a3b8; }
.error-report-actions { display: flex; justify-content: flex-end; gap: 10px; }
.error-report-toast { position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 12px); background: #0f172a; color: #fff; padding: 11px 18px; border-radius: 10px; font-size: 13px; box-shadow: 0 10px 30px rgba(15,23,42,0.35); opacity: 0; transition: opacity 0.3s, transform 0.3s; z-index: 9500; max-width: 90vw; }
.error-report-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.error-report-toast.error { background: #b91c1c; }

/* ====== Ficha de usuario: cards Avisos / Menús / Permisos (spec 2026-08-31) ====== */
/* Chip tildable: el input va oculto y el <span> es la pastilla (sin :has — sibling selector). */
.chip-check { display: inline-flex; cursor: pointer; user-select: none; }
.chip-check input { display: none; }
.chip-check span { font-size: 12.5px; padding: 4px 12px; border-radius: 999px; border: 1px solid #cbd5e1; color: #64748b; background: #fff; transition: background 0.12s, border-color 0.12s; white-space: nowrap; }
.chip-check input:checked + span { background: #dbeafe; border-color: #2563eb; color: #1d4ed8; font-weight: 600; }
.chip-check input:disabled + span { opacity: 0.5; cursor: default; }
/* Switch (checkbox disfrazado): mismo patrón sibling. */
.sw-check { position: relative; display: inline-block; width: 36px; height: 20px; flex: none; cursor: pointer; }
.sw-check input { display: none; }
.sw-check span { position: absolute; inset: 0; border-radius: 999px; background: #cbd5e1; transition: background 0.15s; }
.sw-check span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left 0.15s; }
.sw-check input:checked + span { background: #2563eb; }
.sw-check input:checked + span::after { left: 18px; }
/* Filas de la card Avisos */
.avisos-fila { display: flex; align-items: flex-start; gap: 14px; padding: 11px 4px; border-bottom: 1px solid #eef2f7; }
.avisos-fila:last-child { border-bottom: none; }
.avisos-tema { width: 150px; flex: none; font-size: 14px; font-weight: 600; color: #0f172a; padding-top: 1px; }
.avisos-det { flex: 1; min-width: 0; }
.avisos-sub { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.avisos-sub:last-child { margin-bottom: 0; }
.avisos-etq { font-size: 12px; font-weight: 600; color: #334155; }
.avisos-radio { font-size: 12.5px; color: #334155; display: flex; gap: 5px; align-items: center; cursor: pointer; }
.avisos-nota { font-size: 12px; color: #94a3b8; padding-top: 3px; }
.avisos-chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* Notas y observaciones — 🚩 vigier #166. Mismo componente en la ficha del cliente y en la de
   la póliza (js/notas.js); calcado de .aseg-rel-card para que las tres cards de la ficha se
   lean como una sola familia. */
.notas-card { background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:18px 22px; margin-top:22px; }
.notas-head { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.notas-title { font-size:15px; font-weight:700; color:#1e293b; }
.notas-count { font-size:11.5px; color:#64748b; font-weight:500; background:#f1f5f9; padding:2px 8px; border-radius:8px; }
.notas-sub { font-size:12px; color:#94a3b8; margin-bottom:12px; }
.notas-head + .notas-list { margin-top:12px; }
.notas-list { display:flex; flex-direction:column; }
.notas-empty { color:#94a3b8; font-size:13px; padding:8px 2px; }
.notas-item { border-top:1px solid #f1f5f9; padding:12px 0; }
.notas-item:first-child { border-top:none; }
.notas-item-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:4px; }
.notas-autor { font-size:13px; font-weight:600; color:#334155; }
.notas-fecha { font-size:11.5px; color:#94a3b8; white-space:nowrap; }
/* ⚠ pre-wrap: la nota se escribe con saltos de línea (una medida de seguridad por renglón) y
   sin esto se aplastan todos en un párrafo. `break-word` para que un dato largo no desborde. */
.notas-texto { font-size:13.5px; line-height:1.6; color:#1e293b; white-space:pre-wrap; overflow-wrap:break-word; }
.notas-item-acc { display:flex; gap:12px; margin-top:6px; }
.notas-link { background:none; border:none; padding:0; font-size:12px; font-weight:600; color:#64748b; cursor:pointer; }
.notas-link:hover { color:#334155; text-decoration:underline; }
.notas-link-peligro:hover { color:#dc2626; }
.notas-nueva { display:flex; gap:8px; align-items:flex-start; margin-top:14px; padding-top:14px; border-top:1px solid #f1f5f9; }
.notas-input { flex:1; padding:8px 11px; border:1px solid #cbd5e1; border-radius:9px; font-size:13.5px; font-family:inherit; color:#1e293b; resize:vertical; }
.notas-input:focus { outline:none; border-color:#94a3b8; }
.notas-add-btn { padding:8px 16px; border:1px solid #cbd5e1; border-radius:9px; background:#fff; color:#334155; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; }
.notas-add-btn:hover { background:#f8fafc; }
.notas-item-edit .notas-input { width:100%; }

/* ===== Cotizador de CONSORCIO (js/consorcio.js + js/consorcio-resultado.js, 26-sep-2026) =====
   SÓLO lo que Hogar no tiene: la tarjeta de coberturas, la banda vertical (.hg-side) y "Incluidas
   sin costo" son las clases hg-* de Hogar (index.html, bloque #cotizador-hogar) — mismo molde
   (Martín, 28-sep-2026). Acá: el selector de variantes, el corte de columna y los avisos. */
.cz-campo-err { border-color:#dc2626 !important; }
.cz-emi-chip { background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.45); border-radius:8px; padding:10px 14px; font-size:13.5px; font-weight:700; text-align:center; }
.cz-aviso { font-size:13px; color:#92400e; background:#fffbeb; border:1px solid #fde68a; border-radius:8px; padding:8px 12px; margin:0 0 10px; }
.cz-cobs .cz-col2 { break-before:column; }
.cz-nom { min-width:0; line-height:1.3; }
.cz-hint { display:block; font-size:10.5px; color:#94a3b8; }
.cz-fila[data-var] .cz-nom { white-space:nowrap; }
.cz-seg { display:inline-flex; margin-left:auto; border:1px solid #cbd5e1; border-radius:8px; overflow:hidden; flex:none; }
.cz-seg button { border:none; border-right:1px solid #cbd5e1; background:#fff; color:#475569; font-size:11.5px; font-weight:600; padding:4px 9px; cursor:pointer; white-space:nowrap; font-family:inherit; }
.cz-seg button:last-child { border-right:none; }
.cz-seg button:hover:not(.on):not([disabled]) { background:#f1f5f9; }
.cz-seg button.on { background:var(--c-primary); color:#fff; }
.cz-seg button[disabled] { cursor:default; }
.hg-side-sels .hg-side-ancho { grid-column:1/-1; }
.cz-band .hg-side-acc:not(.cz-acc-lock) { grid-template-columns:1fr 1fr 1fr; }
.cz-band .hg-side-acc .btn-cotizar { padding:10px 6px; }
/* Pantallas angostas (notebook): el selector no entra al lado del nombre → baja a su renglón,
   debajo del nombre, y el monto queda arriba a la derecha como en las demás filas. */
.cz-cobs { container:czcobs / inline-size; }
@container czcobs (max-width:1199px){
  .cz-fila[data-var] { flex-wrap:wrap; row-gap:4px; }
  .cz-fila[data-var] .hg-res-sa { order:2; margin-left:auto; }
  .cz-fila[data-var] .cz-seg { order:3; margin:0 0 4px; }
}
@media (max-width:1100px){ .cz-cobs .cz-col2 { break-before:auto; } }
/* Pedido de emisión de una cotización de Consorcio (js/orden-emision.js): error inline por campo
   obligatorio, debajo del input — el 400 del server es el guard real. */
.oe-p-campo-err { border-color:#dc2626 !important; }
.oe-p-err { color:#dc2626; font-size:11.5px; margin-top:3px; }

/* ===== Asistente de cotización manual — 4 pasos (js/cotizacion-asistente.js, 26-sep-2026) ===== */
.cotw-paso[hidden], .cotw [hidden] { display:none !important; }
.cotw-nav { display:flex; align-items:center; gap:10px; margin-top:14px; }
.cotw-nav-sp { flex:1; }
/* Paso 2: áreas arriba (5 cards), los ramos del área abajo con el MISMO tile del modal "Nueva gestión". */
.cotw-areas { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-top:6px; }
.cotw-area { display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 8px; border:1.5px solid var(--c-border); border-radius:11px; background:var(--c-surface); color:var(--c-text); cursor:pointer; font:inherit; transition:all .14s; }
.cotw-area:hover { border-color:#bfdbfe; box-shadow:0 3px 10px rgba(var(--c-primary-rgb),0.08); }
.cotw-area.sel { border-color:var(--c-secondary); background:linear-gradient(135deg,#f0f9ff,#eff6ff); box-shadow:0 0 0 3px rgba(var(--c-secondary-rgb),0.13); }
.cotw-area-ico { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:24px; }
.cotw-area b { font-size:13.5px; font-weight:600; text-align:center; line-height:1.25; }
.cotw-ramos { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; margin-top:16px; }
.cotw-tile .sol-tipo-nom { color:var(--c-text); }
.cotw-tile.off { opacity:.45; cursor:not-allowed; }
.cotw-tile.off:hover { transform:none; box-shadow:none; border-color:#e2e8f0; }
.cotw-vacio { padding:14px 2px; color:var(--c-text-3); font-size:13px; }
@media (max-width:760px){ .cotw-areas { grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* Paso 3: vehículos. */
.cotw-vehs { display:flex; flex-direction:column; gap:10px; }
.cotw-veh-fila { display:flex; align-items:center; gap:14px; padding:10px 12px; border:1px solid var(--c-border); border-radius:10px; background:var(--c-surface); }
.cotw-veh-fila.incompleto { border-color:var(--c-warn); }
.cotw-veh-tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cotw-veh-tx b { font-size:13.5px; font-weight:600; color:var(--c-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cotw-veh-tx span { font-size:12px; color:var(--c-text-3); }
.cotw-btn-chico { padding:5px 10px; font-size:12px; }
.cotw-veh-add { align-self:flex-start; }
.cotw-veh-ed { border:1px solid var(--c-border); border-radius:12px; padding:14px; background:var(--c-surface); }
.cotw-vg1 { display:grid; grid-template-columns:150px auto minmax(0,1fr); gap:12px; align-items:end; }
.cotw-vg2 { display:grid; grid-template-columns:minmax(0,1.2fr) 150px minmax(0,1.2fr) minmax(0,1.6fr); gap:12px; margin-top:12px; }
.cotw-vg3 { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr) auto auto; gap:12px; margin-top:12px; align-items:end; }
.cotw-pat input { text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.cotw-opc { color:var(--c-text-3); font-weight:400; }
.cotw-pat-estado { font-size:12px; color:var(--c-text-2); align-self:center; }
.cotw-veh-pie { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.cotw-tipo { display:flex; gap:8px; align-items:center; }
.cotw-otro { width:auto; min-width:110px; }
.cotw-otro.on { border-color:var(--c-secondary); box-shadow:0 0 0 3px rgba(var(--c-secondary-rgb),0.13); }
.cotw-seg { display:inline-flex; border:1px solid var(--c-border); border-radius:9px; overflow:hidden; background:var(--c-surface); }
.cotw-seg button { border:0; border-left:1px solid var(--c-border); background:transparent; padding:8px 11px; font:inherit; font-size:12.5px; color:var(--c-text-2); cursor:pointer; white-space:nowrap; }
.cotw-seg button:first-child { border-left:0; }
.cotw-seg button.on { background:rgba(var(--c-primary-rgb),0.1); color:var(--c-primary); font-weight:600; }
.cotw-combo-in { position:relative; }
.cotw-sug { position:absolute; z-index:30; left:0; right:0; top:calc(100% + 2px); max-height:240px; overflow:auto; background:#fff; border:1px solid var(--c-border); border-radius:8px; box-shadow:var(--sh-md); }
.cotw-sug .loc-sug-item { padding:7px 10px; font-size:13px; cursor:pointer; }
.cotw-sug .loc-sug-item:hover { background:#f1f5f9; }
.cotw-sug .loc-sug-empty { padding:8px 10px; font-size:12px; color:var(--c-text-3); }
.cotw-loc { margin-top:14px; grid-template-columns:minmax(0,420px); }
.cotw-loc > .form-field { grid-column:auto !important; }
@media (max-width:1180px){ .cotw-vg1 { grid-template-columns:150px minmax(0,1fr); } .cotw-vg1 .cotw-pat-estado { grid-column:1/-1; } .cotw-vg2, .cotw-vg3 { grid-template-columns:repeat(2,minmax(0,1fr)); } .cotw-vg3 > :nth-child(n+3) { grid-column:1/-1; } }
@media (max-width:600px){ .cotw-vg1, .cotw-vg2, .cotw-vg3 { grid-template-columns:1fr; } .cotw-seg { flex-wrap:wrap; } }
/* Patente dibujada según su formato. */
.cotw-plate { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; flex:none; border-radius:5px; font-family:'Arial Narrow',Arial,sans-serif; line-height:1; width:104px; height:38px; position:relative; overflow:hidden; }
.cotw-plate i { font-style:normal; font-size:6.5px; letter-spacing:.14em; font-weight:700; }
.cotw-plate b { font-size:17px; letter-spacing:.06em; font-weight:700; margin-top:2px; white-space:nowrap; }
.cotw-plate.nueva { background:#fff; border:1.5px solid #1f2937; color:#111827; padding-top:11px; }
.cotw-plate.nueva i { position:absolute; top:0; left:0; right:0; height:10px; background:#1d4ed8; color:#fff; display:flex; align-items:center; justify-content:center; }
.cotw-plate.moto { width:62px; height:46px; }
.cotw-plate.moto b { font-size:13px; text-align:center; line-height:1.05; }
.cotw-plate.vieja { background:#1f2937; color:#f8fafc; border:1.5px solid #9ca3af; box-shadow:inset 0 0 0 2px #1f2937, inset 0 0 0 3px #e5e7eb; }
.cotw-plate.vieja i { font-size:5.5px; color:#e5e7eb; margin-bottom:1px; }
.cotw-plate.okm { background:#f8fafc; border:1.5px dashed #cbd5e1; color:#64748b; }
.cotw-plate.okm b { font-size:11px; letter-spacing:.04em; }
/* Paso 4: compañías con logo. */
.sol-cia-logo { height:26px; width:120px; max-width:100%; object-fit:contain; object-position:left center; flex:none; }
.sol-cia-row.con-logo .sol-cia-nom > span { display:none; }
.cotw-desc { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:16px; align-items:start; }
.cotw-desc > .form-section-title { grid-column:1/-1; }
.cotw-desc > div:not(.form-field):not(.form-section-title) { display:none; }
.cotw-desc textarea { min-height:78px; }
@media (max-width:760px){ .cotw-desc { grid-template-columns:1fr; } }
.cotw .sol-cia-list-alta .sol-cia-row { border:1px solid var(--c-border); border-radius:10px; padding:8px 10px; background:var(--c-surface); }
.cotw .sol-cia-list-alta .sol-cia-row.off { opacity:.7; }