/* ============================================================
   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 (tab bar + shell) — jul 2026, spec 2026-07-19 ===== */
/* Chrome solo-mobile: inexistente en escritorio */
.mtab-bar { display:none; }
.nav-hamburger { display:none; }
.nav-backdrop { display:none; }

@media (max-width:768px){
  .app { grid-template-columns: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. Es la causa que amplifica
     los desbordes de grid de abajo. */
  .content { min-width:0; padding-left:14px; padding-right:14px; padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
  .nav-hamburger { display:flex; align-items:center; justify-content:center; flex-shrink:0;
    width:42px; 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); }

  /* sidebar como BOTTOM SHEET: fija abajo, sube con .app.nav-open */
  .sidebar { position:fixed; left:0; right:0; bottom:0; top:auto; width:auto; max-height:72vh;
    overflow-y:auto; z-index:80; transform:translateY(100%); transition:transform .25s ease;
    border-radius:18px 18px 0 0; box-shadow:0 -4px 24px rgba(0,0,0,0.25);
    padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
  .app.nav-open .sidebar { transform:translateY(0); }

  /* ítems del sheet en grilla de 2 columnas */
  .sidebar-section { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:10px 12px; }
  .sidebar-title { grid-column:1 / -1; }
  /* los 5 que ya viven en la tab bar no se repiten en el sheet */
  .sidebar .nav-item[data-view="dashboard"], .sidebar .nav-item[data-view="asegurados"],
  .sidebar .nav-item[data-view="cotizador"], .sidebar .nav-item[data-view="solicitudes"],
  .sidebar .nav-item[data-view="siniestros"] { display:none; }

  .nav-backdrop { display:block; position:fixed; inset:0; background:rgba(0,0,0,0.45);
    opacity:0; pointer-events:none; transition:opacity .25s 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; }

  .mtab-bar { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:70;
    background:var(--c-surface); border-top:1px solid var(--c-border);
    padding:6px 4px calc(8px + env(safe-area-inset-bottom));
    justify-content:space-around; align-items:flex-end; }
  .mtab { position:relative; flex:1; max-width:76px; background:none; border:none; cursor:pointer; text-align:center;
    color:var(--c-text-3); padding:0; -webkit-tap-highlight-color:transparent; font-family:inherit; }
  .mtab-ico { display:flex; align-items:center; justify-content:center; font-size:22px; line-height:1.2; height:24px; }
  .mtab-lbl { display:block; font-size:10px; margin-top:2px; }
  .mtab.active { color:var(--c-primary); font-weight:600; }
  .mtab-central { margin-top:-24px; max-width:84px; color:var(--c-primary); font-weight:600; }
  .mtab-fab { display:flex; align-items:center; justify-content:center; width:50px; height:50px; margin:0 auto;
    border-radius:50%; background:var(--c-primary); color:#fff; font-size:24px;
    border:4px solid var(--c-bg); box-shadow:var(--sh-md); }
  .mtab-badge { position:absolute; top:-4px; right:14px; background:var(--c-danger); color:#fff;
    font-size:9.5px; border-radius:var(--r-pill); padding:0 5px; min-width:14px; line-height:14px; }
}

@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 .dashboard-row:has(#chart-aseguradoras),
  #view-dashboard .dashboard-row:has(#renovaciones-list) > .card:has(#renovaciones-list),
  #view-dashboard .dashboard-row:has(#solicitudes-pend-list) > .card:has(#solicitudes-pend-list) { display:none; }

  /* apilado y densidad (reciclado del patch de jun-2026) */
  #view-dashboard .dashboard-row, .dashboard-top-row { grid-template-columns:1fr !important; margin-bottom:12px !important; }
  /* 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: la regla de escritorio
     `#view-dashboard .kpi-grid-compact { repeat(4,…) !important }` gana por
     especificidad (id) a la genérica de arriba — bug visto en prod el 19-jul. */
  #view-dashboard .kpi-grid-compact { grid-template-columns:repeat(2, minmax(0,1fr)) !important; grid-auto-rows:auto !important; }
  #view-dashboard .kpi-grid-compact .kpi-card { height:auto !important; overflow:visible; }
  #view-dashboard .kpi-grid-compact .kpi-body { overflow:visible; }
  /* Campañas del Home: renderCampanasDash escribe repeat(N,…) INLINE → apilar */
  #dash-campanas .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){
  /* ----- 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; }

  /* ----- 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; }
  #view-dashboard .kpi-grid-compact { display:grid !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; }

  /* 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; }

  /* 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; }
}

/* ===== 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); }
.oe-sistema.on { border-color:var(--c-primary,#0a1450); background:color-mix(in srgb, var(--c-primary,#0a1450) 5%, transparent); }
.oe-sistema input { margin:0; }
.oe-sistema-sub { color:var(--c-text-soft,#64748b); }