/* ============================================================
   Vista mobile (tab bar, shell y los 5 pases de feedback de jul-2026).
   ============================================================
   Extraído VERBATIM de styles.css el 20-ago-2026 (líneas 3604-4052), espejando la regla
   de `js/<zona>.js`: la hoja de una zona se llama como su archivo de JS.
   ⚠⚠ EL ORDEN DE CARGA ES LA CASCADA: este archivo va DESPUÉS de styles.css y en el
   mismo orden relativo que tenía adentro (ver los <link> de index.html). Moverlo de
   lugar cambia qué regla gana, sin ningún error.
   ============================================================ */
/* ===== Vista mobile (shell) — jul 2026, spec 2026-07-19; tab bar retirada el 1-oct-2026 ===== */
/* Chrome solo-mobile: inexistente en escritorio */
.mtab-bar { display:none; }
.nav-hamburger { display:none; }
.nav-backdrop { display:none; }
.sidebar-cuenta { display:none; }

@media (max-width:768px){
  /* ⚠⚠ UN SOLO MENÚ (Martín, 1-oct-2026): "no que haya dos menús, sidebar e inferior… que quede el
     sidebar, minimizado pero que sea sidebar". Hasta ese día el celular tenía la tab bar de abajo
     (5 accesos + un 🚗 Cotizar) Y el ☰, que abría la .sidebar como bottom sheet con el resto.
     Ahora: la .sidebar es un RIEL de íconos a la izquierda, siempre visible, y el ☰ lo DESPLIEGA
     encima del contenido con los nombres. La tab bar sigue en el DOM (js/mobile.js la cablea)
     pero no se muestra. */
  .app { grid-template-columns:56px 1fr; }
  /* ⚠ El bloque base define `padding:24px 32px 40px` y acá solo se pisaba el bottom: los
     32px laterales sobrevivían y dejaban 311px útiles de 375. */
  .content { min-width:0; padding-left:12px; padding-right:12px; padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
  .nav-hamburger { display:flex; align-items:center; justify-content:center; flex-shrink:0;
    width:44px; height:42px; margin-left:6px; background:transparent; border:none; color:white;
    font-size:22px; line-height:1; cursor:pointer; border-radius:8px; -webkit-tap-highlight-color:transparent; }
  .nav-hamburger:active { background:rgba(255,255,255,0.14); }

  /* RIEL minimizado: sólo el ícono. Los rótulos son nodos de texto sueltos al lado del
     <span class="nav-icon"> (index.html) → van con el font-size del botón (0 = ocultos). */
  .sidebar { padding:6px 0 calc(8px + env(safe-area-inset-bottom)); }
  .sidebar-section { padding:0 4px; margin-bottom:2px; }
  .sidebar-title { font-size:0; padding:0; margin:6px 10px; border-top:1px solid rgba(255,255,255,0.14); }
  .sidebar .nav-item { position:relative; justify-content:center; gap:0; padding:11px 0; font-size:0; }
  .sidebar .nav-item .nav-icon { width:auto; font-size:20px; }
  .sidebar .nav-item .nav-badge { position:absolute; top:3px; right:2px; margin:0; padding:0 4px; min-width:15px;
    line-height:15px; font-size:9px; text-align:center; background:var(--c-danger, #dc2626); color:#fff; }
  .sidebar .nav-item.active { box-shadow:inset 3px 0 0 var(--c-secondary); }
  .sidebar-backups { justify-content:center; margin:0; padding:10px 0; }
  .sidebar-backups .sb-texto { display:none; }

  /* Cuenta (Mi Perfil / Cerrar sesión): mismo aspecto que un ítem del menú, separada arriba. */
  .sidebar-cuenta { display:block; border-top:1px solid rgba(255,255,255,0.14); margin:6px 6px 0; padding:6px 0 0; }
  .cuenta-item { display:flex; align-items:center; justify-content:center; gap:0; width:100%; padding:11px 0; font-size:0;
    background:none; border:none; border-radius:6px; color:rgba(255,255,255,0.78); font-family:inherit; font-weight:500; cursor:pointer; text-align:left; }
  .cuenta-item .nav-icon { width:auto; font-size:20px; display:flex; }
  .cuenta-item[data-cuenta="logout"] { color:#fca5a5; }

  /* DESPLEGADO (☰): el mismo sidebar, a 250px, ENCIMA del contenido y con los nombres. */
  .app.nav-open .sidebar { position:fixed; top:56px; left:0; bottom:0; width:250px; z-index:80;
    overflow-y:auto; box-shadow:4px 0 24px rgba(0,0,0,0.3); animation:nav-abre .18s ease-out; }
  .app.nav-open .sidebar .nav-item { justify-content:flex-start; gap:12px; padding:10px 14px; font-size:14px; }
  .app.nav-open .sidebar .nav-item .nav-badge { position:static; margin-left:auto; font-size:10px; }
  .app.nav-open .sidebar-section { padding:0 8px; }
  .app.nav-open .sidebar-title { font-size:10px; margin:0; padding:12px 14px 4px; border-top:none; }
  .app.nav-open .sidebar-backups { justify-content:flex-start; padding:14px 18px; }
  .app.nav-open .sidebar-cuenta { margin:6px 8px 0; padding:6px 0 0; }
  .app.nav-open .cuenta-item { justify-content:flex-start; gap:12px; padding:10px 14px; font-size:14px; }
  .app.nav-open .sidebar-backups .sb-texto { display:block; }

  .nav-backdrop { display:block; position:fixed; inset:56px 0 0 0; background:rgba(0,0,0,0.45);
    opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:75; }
  .app.nav-open .nav-backdrop { opacity:1; pointer-events:auto; }

  /* topbar compacta */
  .logo { width:auto; padding-left:6px; gap:7px; }
  .logo-text { display:none; }
  .topbar-search { min-width:0; }
  /* pedido 19-jul: sin los 3 botones de la derecha (🚩 reportes, 📣 novedades, avatar);
     la campanita de solicitudes queda. El buscador gana el ancho. */
  .error-report-btn, .anuncios-wrapper, .user-menu-wrapper { display:none !important; }

  /* La tab bar de abajo se fue (un solo menú). */
  .mtab-bar { display:none !important; }
}
@keyframes nav-abre { from { transform:translateX(-24px); opacity:.6; } to { transform:none; opacity:1; } }

@media (max-width:768px){
  /* ----- Inicio mobile: campañas + 4 KPIs + movimientos + cumpleaños ----- */
  .m-hide { display:none !important; }

  /* fuera del inicio mobile: charts, calendario, tira de cías, renovaciones, solicitudes */
  #view-dashboard .calendar-card,
  #view-dashboard #dash-cias { display:none !important; }
  #view-dashboard .dash-grid > :is([data-widget="tira-companias"], [data-widget="chart-aseguradoras"], [data-widget="chart-secciones"], [data-widget="renovaciones"], [data-widget="solicitudes"]) { display:none; }

  /* apilado y densidad (reciclado del patch de jun-2026) */
  #view-dashboard .dash-grid { margin-bottom:12px; }
  /* KPIs compactos a 2 columnas EN TODAS las vistas (el recorte de 66px fijos
     dejaba solo el ícono en cualquier kpi-grid-compact, no solo el del dashboard) */
  .kpi-grid-compact { grid-template-columns:repeat(2, minmax(0,1fr)) !important; grid-auto-rows:auto !important; }
  .kpi-grid-compact .kpi-card { height:auto !important; min-height:64px; align-items:center; padding:10px 12px; }
  .kpi-grid-compact .kpi-label { white-space:normal; overflow:visible; font-size:10.5px; letter-spacing:0.2px; }
  .kpi-grid-compact .kpi-body { overflow:visible; }
  /* ⚠ El dashboard necesita su PROPIA versión id-scoped: las reglas de escritorio de
     `#view-dashboard .dash-grid` (id) ganan por especificidad a las genéricas de arriba
     — bug visto en prod el 19-jul (entonces con `.kpi-grid-compact`). */
  #view-dashboard .dash-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-rows:auto; }
  #view-dashboard .dash-grid > [data-widget] { grid-column:1 / -1; grid-row:auto; }
  /* gana al «¼ no-KPI = span 2» de ≤1100px (styles.css) */
  #view-dashboard .dash-grid > [data-widget]:not(.kpi-card) { grid-column:1 / -1; }
  #view-dashboard .dash-kpis { grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-rows:auto; height:auto; }
  #view-dashboard .dash-grid > .calendar-card { contain:none; height:auto; min-height:0; }
  #view-dashboard .dash-grid .kpi-card { height:auto; min-height:64px; overflow:visible; padding:10px 12px; }
  #view-dashboard .dash-grid .kpi-body { overflow:visible; }
  #view-dashboard .dash-grid .kpi-label { white-space:normal; overflow:visible; font-size:10.5px; letter-spacing:0.2px; }
  /* Campañas del Home: renderCampanasDash escribe repeat(N,…) INLINE → apilar */
  :is(#dash-campanas, .camp-b-vista) .camp-grid { grid-template-columns:1fr !important; }
  #view-dashboard .page-title { font-size:20px; }
  #view-dashboard .page-subtitle { font-size:12px; }
}

@media (max-width:768px){

  /* ----- resto de las vistas: que nada rompa el layout de página ----- */
  .data-table { overflow-x:auto; }
  .card { min-width:0; }
  .page-header { flex-wrap:wrap; gap:10px; }
}

/* ===== Mobile pase 2 (feedback Martín 19-jul): menos info, de a una por fila ===== */
@media (max-width:768px){
  /* lienzo oscuro: cualquier hairline de redondeo u overscroll queda del color de la app */
  html { background:#0f172a; }
  /* KPIs de las VISTAS internas: afuera (el celular es operativo; los números viven
     en el Home). El dashboard es la excepción. Nota: en Operaciones eran también el
     filtro por tipo — en mobile queda sin ese filtro, decisión aceptada 19-jul. */
  .kpi-grid-compact { display:none !important; }
  .cot-stats-row { display:none !important; }

  /* Campañas: card resumida — sin chips de compañías/ramos/condiciones, título entero
     arriba a ancho completo y premio + días en fila abajo */
  .camp-card-v2 .camp-chips { display:none; }
  .camp-card-v2 .camp-head-left { height:auto; }
  .camp-card-v2 .camp-titulo-xl { white-space:normal; margin-top:0; }
  .camp-card-v2 .camp-card-head { flex-direction:column; align-items:stretch; }
  .camp-card-v2 .camp-head-der { flex-direction:row; align-items:center; justify-content:flex-start; gap:8px; }
  /* Compacta en teléfono: no hay ancho para número + barra + premio en una fila, así que
     el premio se queda arriba junto al conteo y la barra pasa a ocupar el renglón entero
     (order:3). La nota del neto también baja de renglón: al costado partía la frase. */
  .camp-card-compacta .camp-prog-row { gap:8px; flex-wrap:wrap; }
  .camp-card-compacta .camp-prog-barwrap { order:3; flex-basis:100%; }
  .camp-card-compacta .camp-premio-pill { margin-left:auto; }

  /* Cumpleaños: que el nombre respire (pill y botón se achican) */
  .cumple-item { gap:8px; padding:9px 10px; grid-template-columns:auto minmax(0,1fr) auto auto; }
  .cumple-days-pill { min-width:auto; font-size:10px; padding:3px 7px; }
  .cumple-name { font-size:12.5px; }
  .cumple-info { font-size:10.5px; }

  /* Toolbars: los filtros de a UNO por fila */
  /* ⚠⚠ Los filtros DE A DOS, no de a uno (20-ago-2026). Apilados en una columna, la toolbar de
     Pólizas medía 340px: la pantalla de entrada del celular eran cinco desplegables y ni una
     póliza. Los selects son cortos ("Todas las compañías") y entran de a dos a 390px; el
     BUSCADOR se queda solo a lo ancho porque es el que más se usa en la mano y el que tiene el
     texto más largo. Mismo criterio en .cot-toolbar y en la variante .toolbar-onerow. */
  .toolbar, .cot-toolbar { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; gap:8px; }
  .toolbar .filter-select, .toolbar .search-box, .toolbar select, .toolbar input[type=text],
  .cot-toolbar .filter-select, .cot-toolbar .search-box, .cot-toolbar select, .cot-toolbar input[type=text] { width:100% !important; max-width:none; box-sizing:border-box; }
  .toolbar .search-box, .cot-toolbar .search-box { grid-column:1/-1; }
}

/* ===== Mobile pase 3 (feedback 19-jul): formularios de a UN campo por fila ===== */
@media (max-width:768px){
  /* ⚠ auto-fit + un hijo con grid-column:span 2 FUERZA una 2ª columna aunque no entre
     (medido en el cotizador: tracks de 200px + 78px a 402 de viewport). Por eso van las
     DOS reglas: template a 1 columna Y todos los hijos a fila completa. */
  .form-grid, .field-grid, .cred-fields, .aseg-info-grid, .cot-summary-body,
  .em-grid, .dom-fields, .insp-grid, .pcap-grid, .camp-form-grid, .camp-form-grid-3,
  .sol-domicilio-grid, .sol-cli-fila1, .sol-cli-fila2, .sol-riesgo-grid, .sol-grid-datos,
  .sin-ei-group .form-grid { grid-template-columns:1fr !important; }
  .form-grid > *, .field-grid > *, .cred-fields > *, .cot-summary-body > *,
  .em-grid > *, .insp-grid > *, .pcap-grid > *, .camp-form-grid > *, .camp-form-grid-3 > *,
  .sol-domicilio-grid > *, .sol-cli-fila1 > *, .sol-cli-fila2 > *, .sol-riesgo-grid > *, .sol-grid-datos > *,
  .sin-ei-group .form-grid > * { grid-column:1 / -1 !important; }

  /* densidad: que el ancho útil sea para los campos */
  .form-section { padding:14px; }
  .form-input { width:100%; box-sizing:border-box; }

  /* Grupo repetible en modo DOS FILAS (las máquinas agrícolas): sus 12 columnas dan celdas de
     ~28px en un celular. Cae a UNA por línea, igual que el resto de las grillas del form.
     ⚠ El `--col` de cada celda es de escritorio: acá lo pisa el `span 1`. */
  .sol-items-2f tr.sol-item-row { grid-template-columns:1fr !important; }
  .sol-items-2f td { grid-column:span 1 !important; }

  /* la variante .toolbar-onerow es un grid de 5 columnas: en el celular va a 2, como el resto */
  .toolbar-onerow { grid-template-columns:1fr 1fr !important; }
  /* ⚠ Los hijos van de a DOS; sólo el buscador y la fila de chips toman el ancho completo.
     El `grid-column:1/-1` para TODOS era lo que dejaba los 5 filtros en 5 renglones. */
  .toolbar-onerow > * { grid-column:auto !important; }
  .toolbar-onerow > .search-box, .toolbar-onerow > .filtros-chips, .toolbar-onerow > .toolbar-chips { grid-column:1 / -1 !important; }
  /* El popover de "Más filtros" pasa a sheet desde abajo (mismo patrón que el menú ☰). */
  .filtros-pop { position:fixed; left:0; right:0; bottom:0; top:auto; width:auto; max-height:70vh; overflow-y:auto; border-radius:14px 14px 0 0; padding:16px; z-index:1200; }
  /* El de período también, y los dos calendarios pasan a uno debajo del otro. */
  .fp-pop { position:fixed; left:0; right:0; bottom:0; top:auto; max-height:85vh; overflow-y:auto; border-radius:14px 14px 0 0; padding:16px; z-index:1210; flex-direction:column; }
  /* ⚠ La clase repetida NO es redundante: `.fp-pop.fp-pop-der` (0-2-0) le gana a `.fp-pop`
     (0-1-0) aunque éste viva en una media query — estar adentro de una @media NO suma
     especificidad. Sin esta línea, una hoja que se abrió volteada en desktop y se sigue viendo
     al angostar queda con `left:auto` y despegada del borde izquierdo. */
  .fp-pop.fp-pop-der { left:0; right:0; }
  .fp-cal-par { flex-direction:column; align-items:center; }
  .fp-lat { border-left:none; border-top:1px solid #f1f5f9; padding-left:0; padding-top:10px; }
}

/* ===== Mobile pase 4 (feedback 19-jul): fichas y resultado del cotizador ===== */
@media (max-width:768px){
  /* Headers de ficha (asegurado/póliza): título arriba, acciones abajo en fila que envuelve.
     El .detail-header-poliza de escritorio fuerza nowrap → acá gana la columna. */
  .detail-header, .detail-header-poliza { flex-direction:column; align-items:stretch; flex-wrap:wrap !important; gap:12px; }
  .detail-header-left { flex-wrap:wrap; }
  .detail-actions { justify-content:flex-start; flex-wrap:wrap; }

  /* Cards de póliza en la ficha del asegurado: icono+contenido arriba, premio abajo */
  .poliza-card { grid-template-columns:auto minmax(0,1fr); }
  .poliza-card-premio { grid-column:1 / -1; display:flex; align-items:baseline; gap:8px; text-align:left; min-width:0; }
  .poliza-card-arrow { display:none; }

  /* Resultado del cotizador: el JS fija columnas INLINE (repeat(N,minmax(250px,1fr)),
     scroll horizontal pensado para escritorio) → en el celular, una compañía abajo de otra */
  .cot-cols2 { grid-template-columns:1fr !important; }
  /* Header del resumen: título arriba; Editar/Guardar abajo compartiendo la fila */
  .cot-summary-header { flex-direction:column; align-items:stretch; gap:8px; }
  .cot-summary-header > div { flex-wrap:wrap; }
  .cot-summary-header .btn-cotizar { min-width:0 !important; flex:1; }
}

/* ===== Mobile pase 5 (19-jul): pase integral — tablas a cards, listados y fichas ===== */
@media (max-width:768px){
  /* Filas de cards en CUALQUIER vista (Biblioteca/Campañas traen 1fr 1fr inline) */
  .dashboard-row { grid-template-columns:1fr !important; }



  /* Usuarios: la fila envuelve; la sangría por nivel no se come el ancho */
  .usuario-main { flex:1; min-width:0; flex-wrap:wrap; }
  .usuario-name { white-space:normal; }
  .usuario-meta { white-space:normal; overflow-wrap:anywhere; flex-shrink:1; min-width:0; margin-left:0; text-align:left; }
  .usuario-row.sub { margin-left:10px; }
  .usuario-row[style*="margin-left"] { margin-left:14px !important; }

  /* Ficha de póliza: las tablas numéricas (endosos, plan de pagos) scrollean adentro de su card */
  .endosos-table, .cuotas-table { display:block; overflow-x:auto; }
  /* Coberturas de la ficha: el layout 2-columnas tipo diario (inline, auto-flow:column)
     desbordaba 64px y los montos quedaban recortados → una sola columna */
  div[style*="grid-auto-flow:column"] { grid-auto-flow:row !important; grid-template-rows:none !important; column-gap:0 !important; }
}

/* ===== Tablas de gestión → cards: SÓLO en el TELÉFONO (< 600px) =====
   ⚠ Hasta el 1-oct-2026 esto vivía en el pase 5 con `max-width:768px`, o sea que también un iPad
   parado (768) veía las pólizas como cards. Martín: "deberían ser filas como siempre". Desde 600px
   (cualquier tablet) vuelve la TABLA, con las columnas fijas achicadas en el pase 6. */
@media (max-width:599px){
  /* ----- Clientes: filas de la tabla como cards apiladas ----- */
  #view-list .list-table, #view-list .list-table tbody,
  #view-list .list-table tr, #view-list .list-table td { display:block; width:100%; box-sizing:border-box; }
  #view-list .list-table thead, #view-list .list-table colgroup { display:none; }
  #view-list .list-table tr { background:var(--c-surface); border:1px solid var(--c-border);
    border-radius:var(--r-md); padding:10px 14px; margin-bottom:8px; cursor:pointer; }
  #view-list .list-table td { border:none; padding:2px 0; font-size:13px; color:var(--c-text-2);
    height:auto; white-space:normal; overflow:visible; }
  #view-list .list-table td:first-child { padding-bottom:6px; }
  #view-list .name-cell .name { white-space:normal; }
  #view-list .data-table { border:none; background:transparent; box-shadow:none; }
  #view-list .toolbar { flex-wrap:wrap; border:none; border-radius:var(--r-md); }
  #view-list .search-box { width:100% !important; }

  /* Tablas de gestión (Pólizas, Renovaciones, Operaciones, Cobranzas…) → cards apiladas.
     ⚠⚠ La card es una GRILLA, no una pila de celdas sueltas (20-ago-2026). Con cada `td` en su
     propio renglón, UNA póliza medía 382px de alto: dos por pantalla en un iPhone, y el estado
     —lo primero que uno busca al barrer una lista— quedaba hasta abajo de todo. Ahora la primera
     celda y la última comparten el renglón de arriba (identidad a la izquierda, estado a la
     derecha, que es como se lee una card) y el resto va abajo a lo ancho. Sirve para TODAS las
     tablas de listado sin saber qué columnas tiene cada una: lo único que se asume es que la
     primera columna identifica y la última resume (estado / conteo / tipo), que es el patrón
     que ya siguen las 6 vistas de gestión. */
  .list-table, .list-table tbody, .list-table td { display:block; width:100%; box-sizing:border-box; }
  .list-table thead, .list-table colgroup { display:none; }
  .list-table tr { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:10px; row-gap:3px;
    background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-md); padding:11px 14px; margin-bottom:8px; }
  .list-table td { grid-column:1/-1; border:none; padding:0; font-size:13px; color:var(--c-text-2); height:auto; white-space:normal; overflow:visible; min-width:0; }
  .list-table td:first-child { grid-column:1; grid-row:1; font-weight:600; color:var(--c-text); }
  .list-table td:last-child:not(:empty) { grid-column:2; grid-row:1; justify-self:end; width:auto; }
  /* ⚠ Cuando la última celda es la de acciones y viene VACÍA (una fila sin acciones disponibles),
     el resumen es la ANTERIOR: sin esto el estado se iba al pie de la card y arriba a la derecha
     no quedaba nada. `:has()` ya se usa en otras reglas de este archivo. */
  .list-table td:nth-last-child(2):has(+ td:empty) { grid-column:2; grid-row:1; justify-self:end; width:auto; }
  /* Las alineaciones de la TABLA (importe a la derecha, chip centrado) no valen en la card: acá
     todo arranca del mismo margen izquierdo, que es lo que hace legible una pila de datos. */
  .list-table td[style*="text-align"] { text-align:left !important; }
  /* La de acciones es la excepción: son botones, no un resumen — van abajo, a lo ancho. */
  .list-table td.td-acciones { grid-column:1/-1; grid-row:auto; justify-self:stretch; margin-top:6px; }
  .list-table td:empty { display:none; }
  /* ⚠ `table.list-table-uniform` (0,0,2,1) le gana a `.list-table td` (0,0,1,1): sin repetir la
     especificidad acá, la card móvil seguía con el alto FIJO de 60px por celda y el separador
     de la tabla de escritorio — 6 celdas × 60px era el 90% de los 382px que medía cada póliza. */
  table.list-table-uniform td { height:auto; padding:0; border-bottom:none; }
  table.list-table-uniform th { height:auto; }
  .data-table { border:none; background:transparent; box-shadow:none; overflow:visible; }

  /* Listado de cotizaciones: los bloques de la card, apilados */
  /* ⚠⚠ En el celular la card MOSTRABA menos de lo que hace falta para decidir: desde 900px para
     abajo se ocultaban el número de cotización, la fecha Y EL ESTADO — o sea que en un teléfono
     no se veía si una cotización estaba cotizada, emitida o vencida, que es lo primero que se
     mira en esta lista. Vuelven el número y el estado, en un renglón de encabezado (número a la
     izquierda, chip a la derecha); la fecha sí se queda afuera, que es el dato más prescindible.
     Y los rótulos ("ASEGURADO", "DETALLE DEL RIESGO") se van: repetidos en cada card se comen
     un tercio del ancho de un iPhone para decir siempre lo mismo. */
  .cot-card-body { display:grid; grid-template-columns:minmax(0,1fr) auto !important; gap:7px 10px; }
  .cot-card-body > .cot-card-col { grid-column:1/-1; }
  /* ⚠ Con la misma especificidad que la regla de arriba (`> .cot-card-col`), estas dos perdían y
     las dos celdas quedaban una ENCIMA de la otra en el renglón 1. */
  .cot-card-body > .cot-card-col-id { display:flex !important; grid-column:1; grid-row:1; }
  .cot-card-body > .cot-card-col-estado { display:flex !important; grid-column:2; grid-row:1; align-items:flex-end; text-align:right; }
  .cot-card-col-label { display:none; }
  /* El chip de origen queda del ancho de su texto: dentro de una columna flex se estiraba a lo
     ancho de la card y parecía una barra de color. */
  .cot-card-body .origen-chip { align-self:flex-start; }
  /* El ⋯ (único punto de interacción de la card) sube al renglón del encabezado, al lado del
     estado: solo en su renglón al pie, cada card gastaba ~45px de aire (1-oct-2026). */
  .cot-card-body:not(.sin-card .cot-card-body) { grid-template-columns:minmax(0,1fr) auto auto !important; }
  .cot-card-body:not(.sin-card .cot-card-body) > .cot-card-col-actions { grid-column:3; grid-row:1; align-self:start; }
}

/* ===== Mobile pase 4 (auditoría 26-jul-2026) ===== */
@media (max-width:768px){
  /* Grids que DESBORDAN el viewport de 375px. Medido con scrollWidth real: .camp-grid pide un
     track de 430px y .sol-cia-list-ficha uno de 440px contra 311px de contenedor → 119px y
     129px de desborde. Existía un override para .camp-grid pero apuntado a `#dash-campanas
     .camp-grid`, o sea SOLO el Home: la vista Campañas usa la clase pelada y quedaba afuera.
     Es el mismo patrón que el KPI cortado del Home: una regla móvil escrita para el caso que
     se estaba mirando, que no cubre su gemelo en otra vista. */
  .camp-grid, .sol-cia-list-ficha { grid-template-columns:1fr !important; }

  /* ⚠ AUTO-ZOOM DE iOS. Safari zoomea al enfocar cualquier input con font-size < 16px, y los 8
     controles del sistema estaban entre 12,5 y 14px. El agravante: html,body{overflow:hidden}
     deja al usuario SIN forma de scrollear para volver — hay que pellizcar a mano. En una app
     cuyo uso móvil es cotizar y emitir (todo formularios) pasaba en cada campo. */
  .form-input, .search-box input, .filter-select,
  .sol-input, .sol-select, .sol-textarea, .cred-input, .em-input { font-size:16px; }

  /* Área táctil de 44px sin tocar el diseño: el hit-box va por pseudo-elemento, así que el
     control se sigue viendo igual. Medidos a 375px: .cot-ficha-x 24×17 (cerrar la ficha del
     plan, paso obligado del flujo de emisión), .renov-act 24×24 con 3px entre tres botones,
     .cal-nav-btn ~17px, .banc-del y .filtros-chip aún menos. */
  .renov-act, .cal-nav-btn, .cot-ficha-x, .banc-del, .fuente-del, .fuente-edit { position:relative; }
  .renov-act::after, .cal-nav-btn::after, .cot-ficha-x::after,
  .banc-del::after, .fuente-del::after, .fuente-edit::after {
    content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:44px; height:44px; }
}

/* Aviso de versión nueva (🚩 #24): barra discreta abajo a la derecha, NO un popup — puede haber
   una cotización a medio cargar y el proyecto no interrumpe con modales. */
.rt-version-aviso {
  position: fixed; right: 18px; bottom: 18px; z-index: 9500;
  display: flex; align-items: center; gap: 10px;
  background: #0f172a; color: #f8fafc;
  border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
  padding: 10px 12px 10px 16px; font-size: 13px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(2,6,23,.35);
}
.rt-version-btn {
  background: var(--c-primary); color: #fff; border: 0; border-radius: 8px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.rt-version-btn:hover { filter: brightness(1.08); }
.rt-version-x {
  background: transparent; color: #94a3b8; border: 0; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 0 2px;
}
.rt-version-x:hover { color: #f8fafc; }
@media (max-width: 640px) { .rt-version-aviso { left: 12px; right: 12px; bottom: 12px; } }

/* ── Orden de la tira: la RÉPLICA arrastrable de la vista Compañías ──────────────
   Reusa .dash-cia-logo / .dash-cia-img (las clases reales de la tira del dashboard) para que lo
   que el organizador acomoda sea idéntico a lo que ve el PAS — acá sólo se suman los affordances
   de arrastre. `justify-content:flex-start`: el bloque NO va centrado como en el dashboard, porque
   al reordenar un bloque centrado se corren TODOS los tiles y el movimiento se lee mal. */
.cias-ord-strip { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-start; }
.cias-ord-strip .dash-cia-logo { cursor:grab; user-select:none; }
.cias-ord-strip .dash-cia-logo:active { cursor:grabbing; }
.cias-ord-strip .dash-cia-logo:hover { border-color:#93c5fd; }
/* El tile que se está arrastrando queda fantasma: el que se ve sólido en su lugar nuevo es el
   preview de dónde va a caer (el reordenamiento es EN VIVO, antes de soltar). */
.cias-ord-strip .dash-cia-logo.is-arrastrando { opacity:.35; }
/* Foco visible: el camino sin puntero (Tab + ← →) no sirve si no se ve cuál está seleccionado. */
.cias-ord-strip .dash-cia-logo:focus-visible { outline:2px solid #3b82f6; outline-offset:2px; border-color:#3b82f6; }

/* Orden de emisión (v2, jul-2026): el pedido del PAS que se muestra dentro del form del org. */
.sol-emision-pedido { background:#fffbeb; border-left:3px solid #f59e0b; border-radius:6px;
  padding:8px 10px; margin-bottom:10px; font-size:13px; color:#78350f; }
/* Aviso dentro de una grilla de formulario (🚩 bds #82: la póliza que se va a anular ya está
   renovada). Toma la FILA ENTERA: es un aviso del formulario, no un campo más, y partido en una
   columna de tres quedaría como una etiqueta suelta al lado de la fecha. */
.sol-form-aviso { grid-column:1/-1; background:#fffbeb; border-left:3px solid #f59e0b;
  border-radius:6px; padding:8px 10px; font-size:13px; color:#78350f; }
.sol-form-aviso[hidden] { display:none; }

/* Alta manual de póliza: aviso cuando la compañía tipeada sincroniza su cartera sola. Mismo
   lenguaje visual que .sol-form-aviso (ámbar, borde izquierdo) — es la misma clase de mensaje:
   "no hagas esto, y esto es lo que va a pasar en su lugar". */
.pcap-aviso-feed { margin-top:6px; background:#fffbeb; border-left:3px solid #f59e0b;
  border-radius:6px; padding:8px 10px; font-size:12.5px; color:#78350f; font-weight:400; }
.pcap-aviso-feed[hidden] { display:none; }

/* Orden de emisión: pantalla propia — formulario a la izquierda, vista previa del PDF a la
   derecha. La previa es el MISMO nodo que se rasteriza al PDF (794px de ancho), escalado con
   transform para que entre en la columna sin re-maquetarlo: si se re-maquetara, lo que se ve
   dejaría de ser lo que se imprime. */
.oe-split { display:grid; grid-template-columns:minmax(420px,1fr) minmax(360px,520px); gap:16px; align-items:start; }
/* Grilla del formulario: 4 TRACKS, no 2 columnas. La mitad de los campos de "Datos de la orden"
   son cortos (una fecha, un año, 10 cuotas, 5 %, ARS) y en una grilla de 2 los inputs salían
   3-4× más anchos que su contenido → el form se estiraba a 7 filas de aire y la vista previa
   quedaba lejos de los campos que la alimentan.
   Con 4 tracks, cada campo declara cuánto mide: por DEFECTO span 2 (= la media fila de antes,
   así los campos de las otras dos cards no cambian ni una línea) y los cortos llevan `.oe-w1`.
   ⚠ El ORDEN del HTML importa: la auto-colocación de grid no reordena, así que un span 2 que no
   entra en lo que queda de la fila baja a la siguiente y deja el hueco. Los campos de "Datos de
   la orden" están ordenados para que cada fila cierre en 4 (ver el markup en js/orden-emision.js).
   ⚠ CBU/Tarjeta viven `hidden` (display:none) → NO ocupan track hasta que el medio de pago los
   muestra; por eso no rompen el tiling estando ocultos. */
.oe-grid { grid-template-columns:repeat(4,1fr); }
.oe-grid > .form-field { grid-column:span 2; }
.oe-grid > .form-field.oe-w1 { grid-column:span 1; }
/* Zona muerta: entre 1101 y 1280 el split sigue en dos columnas pero la del formulario ya es
   angosta, y un track de 4 no le entra a un `<input type=date>`. Ahí los cortos vuelven a media
   fila (= el layout de antes). Por debajo de 1100 el split colapsa y el form toma el ancho
   completo, así que los cortos vuelven a valer. */
@media (max-width:1280px){
  .oe-grid > .form-field.oe-w1 { grid-column:span 2; }
}
@media (max-width:1100px){
  .oe-grid > .form-field.oe-w1 { grid-column:span 1; }
}
.oe-items-ed { overflow-x:auto; border:1px solid var(--c-border,#e2e8f0); border-radius:8px; padding:8px; background:#f8fafc; }
.oe-items-ed td, .oe-items-ed th { font-size:11px; white-space:nowrap; padding:3px 12px 3px 0; }
/* ⚠ `auto`, no el `fixed` que hereda de .sol-items-tbl: acá la tabla es READ-ONLY y las columnas
   tienen que medirse por su contenido. Con fixed, "Tractores Con Ruedas" se montaba sobre la
   marca de al lado. */
.oe-items-ed .sol-items-tbl { table-layout:auto; width:auto; min-width:100%; }
.oe-items-ed td .form-input { height:28px; font-size:11px; padding:0 6px; min-width:90px; }
.oe-items-ed td { padding:2px 6px 2px 0; }
.oe-preview { position:sticky; top:12px; }
/* La escala la pone _oeAjustarPrev (ancho del panel / 794px): el papel queda centrado con el
   mismo margen a los dos lados; el alto sigue al documento, con scroll para las órdenes largas. */
.oe-pdf-prev { overflow:auto; border:1px solid var(--c-border,#e2e8f0); border-radius:8px; background:#fff; height:640px; }
.oe-pdf-prev .opdf { transform-origin:top left; }
/* La previa del PEDIDO DE ENDOSO usa el mismo panel, pero su documento es `.ppdf` (el layout
   compartido con el pedido de cotización), no `.opdf`. Sin esta regla el nodo entra a tamaño real
   (794px) y se ve la esquina superior izquierda del papel, que parece un PDF roto. */
.ep-pdf-prev .ppdf { transform:scale(.56); transform-origin:top left; }
.ep-pdf-prev { overflow:auto; }
@media (max-width:1100px){
  .oe-split { grid-template-columns:1fr; }
  .oe-preview { position:static; }
}
/* Selector de ORGANIZADOR de la fila Intermediación. Hasta el 31-jul-2026 el organizador era
   fijo (el tope) y acá iba su nombre en un div `.oe-ro`; ahora se elige, porque una organización
   puede tener varios (vigier tiene diez) y el negocio entra por el del que cuelga el PAS.
   ⚠ El alto va igualado al del `.form-input` que ocupa ese mismo lugar en la fila del PRODUCTOR
   (que es un buscador, o sea un <input>): un <select> mide 2px menos que un <input>, y sin esto
   los selects de CÓDIGO de abajo quedan corridos entre sí y se lee como si estuvieran
   desalineados. Lo pinea probe-orden-productor-typeahead.mjs, que compara las dos cajas. */
#oe-org.form-input { min-height:34px; }

/* Documentación de la cotización que viaja a la orden (🚩 bds #68). */
.oe-adjuntos { display:flex; flex-direction:column; gap:4px; }
.oe-adj { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:8px; cursor:pointer;
  border:1px solid var(--c-border,#e2e8f0); background:var(--c-surface,#fff); font-size:13px; }
.oe-adj:hover { border-color:var(--c-primary,#0a1450); }
.oe-adj input { margin:0; flex:none; }
.oe-adj-nom { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.oe-adj-peso { color:var(--c-text-soft,#64748b); flex:none; }
.oe-adj-cia { margin-left:auto; font-size:11px; color:var(--c-text-soft,#64748b);
  background:var(--c-bg,#f1f5f9); padding:2px 8px; border-radius:99px; flex:none; }

/* Cerrito / Libertador — los dos sistemas de Zurich (🚩 bds #64). Va como botonera y no como
   <select>: no es un campo más del formulario sino por cuál de las DOS compañías entra el
   negocio, y de eso dependen los dos códigos que se imprimen. El borde marca la elegida. */
.oe-sistemas { display:flex; gap:8px; flex-wrap:wrap; }
.oe-sistema { display:flex; align-items:center; gap:7px; padding:9px 14px; border-radius:10px; cursor:pointer;
  border:2px solid var(--c-border,#e2e8f0); background:var(--c-surface,#fff); font-size:13px; transition:border-color .12s, background .12s; }
.oe-sistema:hover { border-color:var(--c-primary,#0a1450); }
/* ⚠ El fondo va por `rgba(var(--c-primary-rgb),…)` y NO por `color-mix`: Chrome serializa el
   computado de un color-mix como `color(srgb …)`, y html2canvas —el que saca la captura de los
   reportes 🚩— no sabe parsear esa función y ABORTA la captura entera ("Attempting to parse an
   unsupported color function color", 🚩 bds #380: reporte de la orden de emisión sin screenshot).
   `color-mix(in srgb, X 5%, transparent)` es exactamente `rgba(X, 0.05)`, así que no cambia nada
   de lo que se ve. Fallback = el mismo #0a1450 de las reglas de al lado, en RGB. */
.oe-sistema.on { border-color:var(--c-primary,#0a1450); background:rgba(var(--c-primary-rgb,10,20,80),0.05); }
.oe-sistema input { margin:0; }
.oe-sistema-sub { color:var(--c-text-soft,#64748b); }

/* ===== Mobile pase 6 (1-oct-2026): TABLET y fichas del teléfono =====
   Pedido de Martín: "que la app sea MUCHO más responsive para tablet, cel, etc.".
   Medido antes de tocar (scripts/sweep-mobile.mjs a 390 / 768 / 1024, con la cartera real):
   · TABLET APAISADA (769–1199): era el layout de escritorio entero. El menú de 200px se comía
     un quinto de la pantalla y en Pólizas se cortaban columnas ("Vida Cole", "Contractua"), los
     filtros ("Todas las comp") y los rótulos de los KPIs.
   · TABLET PARADA (600–768): era el layout del celular estirado — UNA card por renglón a 740px
     de ancho, con la mitad derecha vacía.
   · TELÉFONO: la ficha de una póliza era un scroll sin fin — 4 KPIs de a uno por renglón, cada
     dato de "Información general" en su propia card de 64px con ícono, y los 5 botones de
     acción en renglones desparejos.
   Nada de esto toca por encima de 1199px: el escritorio queda idéntico. Las decisiones de los
   pases anteriores se respetan (KPIs internos ocultos en el celular, filtros de a dos, tab bar). */

/* ===== 1. TABLET APAISADA: el menú pasa a RIEL de íconos con rótulo chico =====
   Patrón "navigation rail" (el de las apps de iPad): ícono arriba, nombre abajo en 10px. Nada
   de tooltips: en una tablet no hay hover, y un riel de íconos SIN nombre obliga a adivinar.
   Los rótulos son nodos de texto sueltos al lado del <span class="nav-icon"> (index.html), así
   que van con el font-size del botón; el badge pasa a burbuja sobre el ícono. */
@media (min-width:769px) and (max-width:1199px){
  .app { grid-template-columns:84px 1fr; }
  .logo { width:84px; padding:0; }
  .logo-text { display:none; }
  /* Logo raster del tenant (brand-logo-topbar): que no se salga de la columna angosta. */
  .logo .brand-logo-topbar { max-width:70px; height:auto; max-height:36px; object-fit:contain; }

  .sidebar { padding:8px 0; }
  .sidebar-section { margin-bottom:2px; }
  .sidebar-title { font-size:0; padding:0; margin:6px 14px; border-top:1px solid rgba(255,255,255,0.14); }
  /* ⚠ Sin `overflow-wrap:anywhere`: partía "Renovaciones" en "Renovacione / s". A 10px y con
     4px de margen lateral, la palabra más larga del menú ("Administración") entra entera. */
  .sidebar-section { padding:0 4px; }
  .sidebar .nav-item { position:relative; flex-direction:column; justify-content:center; gap:3px;
    padding:8px 0 7px; font-size:10px; line-height:1.15; text-align:center; letter-spacing:-0.2px;
    white-space:normal; min-height:56px; }
  .sidebar .nav-item .nav-icon { width:auto; font-size:20px; height:22px; }
  .sidebar .nav-item .nav-badge { position:absolute; top:3px; left:calc(50% + 6px); margin:0;
    padding:0 5px; min-width:16px; line-height:15px; font-size:9.5px; text-align:center;
    background:var(--c-danger, #dc2626); color:#fff; }
  /* Pie de backups: sólo el escudo (el texto no entra en 84px; el color del escudo ya dice si
     está al día, y el detalle sigue en escritorio). */
  .sidebar-backups { justify-content:center; margin:0 6px; padding:12px 0; margin-top:auto; }
  .sidebar-backups .sb-texto { display:none; }

  .content { padding:20px 22px 32px; }
  .topbar { padding-right:14px; }
}

/* ===== 2. TABLET PARADA (600–768): TABLA, no cards =====
   Las cards quedaron sólo para el teléfono (ver el bloque "< 600px" de arriba). Acá la tabla vive
   sin menú lateral (el shell sigue siendo el del celular: ☰ + tab bar), con las columnas fijas
   achicadas por las reglas de abajo. */
@media (min-width:600px) and (max-width:768px){
  .content { padding-left:20px; padding-right:20px; }
}

/* ===== 2b. TABLAS EN TABLET (600–1199): columnas fijas más angostas =====
   Las columnas fijas de Pólizas / Operaciones / Renovaciones (index.html: 180 + 200 + 24% + … en
   px) suman casi todo el ancho de escritorio, y el ASEGURADO —la única sin ancho, que se queda
   con lo que sobra— medía 46px a 1024 (10px en Renovaciones): se leía "C…". Se apunta al valor
   del `style` para no depender de la posición de cada columna en cada tabla. */
@media (min-width:600px) and (max-width:1199px){
  .list-table-uniform col[style*="width:180px"] { width:128px !important; }
  .list-table-uniform col[style*="width:200px"] { width:150px !important; }
  .list-table-uniform col[style*="width:24%"] { width:19% !important; }
  .list-table-uniform col[style*="width:150px"], .list-table-uniform col[style*="width:145px"] { width:118px !important; }
  .list-table-uniform col[style*="width:140px"] { width:112px !important; }
  /* Las tablas que igual no entran (Cobranzas, de layout automático) scrollean dentro de su card
     en vez de empujar la página. */
  .data-table { overflow-x:auto; }
}
/* iPad parado (600–768): además del riel de 56px, ancho de celular. N° de póliza, Ramo y Vigencia
   se angostan otro poco para que el Asegurado no baje de ~110px. */
@media (min-width:600px) and (max-width:768px){
  .list-table-uniform col[style*="width:200px"] { width:130px !important; }
  .list-table-uniform col[style*="width:24%"] { width:16% !important; }
  .list-table-uniform col[style*="width:150px"], .list-table-uniform col[style*="width:145px"] { width:104px !important; }
}
/* Tablet angosta (iPad parado, 600–1023): la Compañía queda SÓLO con su logo (el nombre sigue en
   el tooltip del logo y en la ficha). Son 128px que vuelven al Asegurado. */
@media (min-width:600px) and (max-width:1023px){
  .list-table-uniform col[style*="width:180px"] { width:52px !important; }
  /* sólo en las tablas cuya 1ª columna es la Compañía (las de 180px): en Clientes la 1ª es el NOMBRE */
  .list-table-uniform:has(col[style*="width:180px"]:first-child) td:first-child span[title] { display:none; }
  /* El ícono del ramo (36px + 8 de aire) se va: el NOMBRE del ramo es el dato, y a 768 quedaba
     "Cauc" / "Vida Colect". */
  .list-table-uniform .ramo-icon-pill { display:none; }
  /* Sin el nombre, el rótulo "COMPAÑÍA" de esa columna de 52px quedaba "C…". */
  .list-table-uniform:has(col[style*="width:180px"]:first-child) th:first-child { font-size:0; }
}

/* ===== 2c. COTIZACIONES EN TABLET =====
   Igual que las pólizas: en el iPad, la FILA de escritorio, no la card del celular (que quedó
   sólo < 600px). Pero la regla vieja de ≤ 900px (styles.css) ocultaba el N° de cotización, la
   fecha Y EL ESTADO — en un iPad parado no se veía si una cotización estaba emitida. Acá vuelven
   el número y el estado; la fecha (lo más prescindible) se queda afuera hasta 900px.
   ⚠ `.sin-card` (Siniestros) reusa .cot-card-body con su propia grilla: va aparte, abajo. */
@media (min-width:600px) and (max-width:900px){
  .cot-card-body:not(.sin-card .cot-card-body) { grid-template-columns:minmax(0,1.3fr) minmax(0,1.7fr) 108px 96px 40px; gap:12px; padding:12px 14px; }
  .cot-card-body:not(.sin-card .cot-card-body) > .cot-card-col-id,
  .cot-card-body:not(.sin-card .cot-card-body) > .cot-card-col-estado { display:flex; }
  /* Siniestros (fecha · asegurado · póliza · estado): la misma regla de ≤ 900px le ocultaba la
     fecha y el ESTADO pero dejaba sus 4 columnas → la mitad derecha de la fila vacía. */
  .sin-card .cot-card-body { grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) 140px; gap:12px; padding:12px 14px; }
  .sin-card .cot-card-body > .cot-card-col-estado { display:flex; }
}

/* ===== 3. TELÉFONO Y TABLET PARADA: fichas más densas ===== */
@media (max-width:768px){
  /* Botonera de la ficha (Recotizar, Cotizar renovación, Crear solicitud, Denunciar siniestro,
     Imprimir): grilla pareja de a dos y a lo ancho, en vez de renglones desparejos que
     dependían del largo de cada rótulo. */
  .detail-actions { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; width:100%; }
  .detail-actions > * { width:100%; min-width:0; }
  .detail-actions > * > button, .detail-actions > button, .detail-actions > a { width:100%; justify-content:center; text-align:center; }
  .detail-actions button { white-space:normal; line-height:1.2; min-height:42px; }

  /* KPIs de la ficha (Premio acumulado, Estado, Siniestros, Vigencia restante): de a dos. */
  .mini-stats { grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; margin-bottom:14px; }
  .mini-stat { padding:10px 11px; gap:9px; }
  .mini-stat-icon-box { width:30px; height:30px; font-size:14px; border-radius:8px; }
  .mini-stat-label { font-size:9.5px; letter-spacing:0.3px; margin-bottom:4px; }
  .mini-stat-value { font-size:15.5px; overflow-wrap:anywhere; }
  .mini-stat-sub { font-size:10.5px; }

  /* KPIs de la ficha del ASEGURADO y de Compañías (`.kpi-grid` común, no la compacta de las
     vistas, que en el celular se oculta a propósito): de a dos, como los de la póliza. Antes
     eran cuatro cards de a una por renglón = una pantalla entera antes de llegar a un dato. */
  .kpi-grid:not(.kpi-grid-compact) { grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
  .kpi-grid:not(.kpi-grid-compact) .kpi-card { padding:10px 11px; gap:9px; min-width:0; }
  .kpi-grid:not(.kpi-grid-compact) .kpi-icon { width:30px; height:30px; font-size:14px; border-radius:8px; flex-shrink:0; }
  .kpi-grid:not(.kpi-grid-compact) .kpi-label { font-size:9.5px; letter-spacing:0.3px; white-space:normal; }
  .kpi-grid:not(.kpi-grid-compact) .kpi-value { font-size:17px; overflow-wrap:anywhere; }

  /* Datos de la ficha ("Información general", vehículo, asegurado): de a dos y SIN ícono —
     el rótulo ya dice qué es, y el ícono de 36px se comía un tercio de la celda. El alto fijo
     de 64px (escritorio) se suelta: un domicilio largo ahora envuelve en vez de cortarse. */
  .profile-fields { grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px; }
  .profile-field { height:auto; min-height:52px; padding:8px 10px; }
  .profile-field-icon { display:none; }
  .profile-field-label { font-size:9.5px; letter-spacing:0.3px; white-space:normal; line-height:1.2; }
  .profile-field-value { white-space:normal; overflow-wrap:anywhere; }
  /* Los editables (ficha del asegurado, con el ✎) envuelven el valor en .field-val con su propio
     nowrap+ellipsis: "18/10/1958 · 67 a…". */
  .profile-field-value.editable > .field-val { white-space:normal; overflow-wrap:anywhere; }

  /* El cuadrado de 64px con el 📋 arriba del título de la póliza: decorativo, y en el celular
     quedaba SOLO en su renglón (empujaba todo 80px para abajo). */
  .detail-header-poliza .detail-avatar { display:none; }

  /* Filtros de las toolbars: todos del mismo alto y casi del mismo cuerpo. Los <select> van a
     16px por el auto-zoom de iOS (pase 4) y los disparadores propios (Productor, Ramo, "Más
     filtros") quedaban en 12,5px: dos tamaños de letra en la misma fila. */
  .toolbar .filter-select, .toolbar .fp-trigger, .toolbar .filtros-btn,
  .cot-toolbar .filter-select, .cot-toolbar .fp-trigger, .cot-toolbar .filtros-btn { height:40px; }
  .toolbar .fp-trigger, .toolbar .filtros-btn, .cot-toolbar .fp-trigger, .cot-toolbar .filtros-btn { font-size:15px; }
  .toolbar .search-box input, .cot-toolbar .search-box input { height:40px; box-sizing:border-box; }

  /* ⚠ AUTO-ZOOM DE iOS, los dos agujeros que le quedaban al pase 4 (medido campo por campo a
     390px): el BUSCADOR de arriba (13px, en TODAS las pantallas) y los 14 campos del cotizador
     de autos, que perdían por especificidad — `.cotizador-form:not([id]) .form-input` (0-3-0,
     14px) le gana a `.form-input` (0-1-0) aunque ésta viva en la media query. */
  .topbar-search input { font-size:16px; }
  .cotizador-form:not([id]) .form-input { font-size:16px; }

  /* Modales como HOJA desde abajo (el mismo patrón que el menú ☰ y "Más filtros"): pegados al
     borde, a lo ancho, con los botones al alcance del pulgar. Centrados dejaban 20px de marco
     inútil por lado y, con el teclado abierto, el `90vh` de Safari (que no descuenta la barra
     del navegador) escondía el pie con los botones. `dvh` sí la descuenta. */
  .modal-overlay { align-items:flex-end; padding:0; }
  .modal-overlay > .modal { max-width:none !important; border-radius:16px 16px 0 0; max-height:92vh; max-height:92dvh;
    padding:18px 16px calc(18px + env(safe-area-inset-bottom)); animation:modal-sube .18s ease-out; }

  /* Cards: menos padding, más dato (las que traen padding inline no cambian). */
  .card { padding:14px; }
}
@keyframes modal-sube { from { transform:translateY(24px); opacity:.6; } to { transform:none; opacity:1; } }
/* Con el riel de 56px a la izquierda, a cada KPI del Home le quedan ~140px: el ícono de 40px dejaba
   el cuerpo en 58px (cifra y rótulo partidos). En el teléfono el ícono se va; la etiqueta ya dice
   qué es. */
@media (max-width:599px){
  #view-dashboard .dash-grid .kpi-icon { display:none; }
  #view-dashboard .dash-grid .kpi-card { padding:10px 11px; }
}
/* En pantallas muy angostas (SE / 320–359px) los datos vuelven a uno por renglón. */
@media (max-width:359px){
  .profile-fields { grid-template-columns:1fr; }
}