/* CLP · Ecosistema Comercial
   Monocromático: marino, marino profundo, blanco y grises. Archivo. Esquinas rectas. */

/* Archivo (SIL OFL 1.1, ver tipografia/OFL.txt), servida desde el propio sitio: sin Google Fonts. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-display: swap; src: url('../tipografia/archivo-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-display: swap; src: url('../tipografia/archivo-latin-ext-400.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-display: swap; src: url('../tipografia/archivo-latin-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-display: swap; src: url('../tipografia/archivo-latin-ext-500.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap; src: url('../tipografia/archivo-latin-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap; src: url('../tipografia/archivo-latin-ext-600.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap; src: url('../tipografia/archivo-latin-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap; src: url('../tipografia/archivo-latin-ext-700.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --marino: #2A2A3E;
  --marino-prof: #1C1C2A;
  --gris-1: #5C5C74;
  --gris-2: #8A8AA0;
  --gris-3: #C6C6D6;
  --gris-4: #E4E4EC;
  --fondo: #F3F3F6;
  --blanco: #FFFFFF;
  --linea: 1px solid var(--gris-3);
  --linea-fuerte: 1px solid var(--marino);
  --lateral: 248px;
  --barra: 64px;
  --gutter: 32px;
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--marino);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--fondo); font-size: 15px; line-height: 1.45; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { font-size: 16px; }   /* 16 px: el iPhone no hace zoom al escribir */
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
p, li, dd, label, span { overflow-wrap: anywhere; }
td, th { overflow-wrap: break-word; }
table.t td span, table.t td a, table.t td div { overflow-wrap: break-word; }
:focus-visible { outline: 2px solid var(--marino); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- utilidades tipográficas ---------- */
.eti { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-1); }
.num { font-variant-numeric: tabular-nums; }
.tenue { color: var(--gris-1); }
.cargando { padding: 48px; color: var(--gris-1); }
.arranque { min-height: 100vh; min-height: 100dvh; display: grid; place-content: center; gap: 14px; background: var(--marino); color: var(--blanco); text-align: center; padding: 24px; }
.arranque-marca b { display: block; font-size: 22px; letter-spacing: .16em; }
.arranque-marca span { display: block; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--gris-3); margin-top: 6px; }
.arranque-estado { font-size: 13px; color: var(--gris-3); }

/* ---------- botones y campos ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 8px 18px; border: 1px solid var(--marino);
  background: var(--marino); color: var(--blanco); font-weight: 600; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; cursor: pointer; text-decoration: none;
  border-radius: 0; white-space: nowrap;
}
.btn:hover { background: var(--marino-prof); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.sec { background: var(--blanco); color: var(--marino); }
.btn.sec:hover { background: var(--fondo); }
.btn.fant { background: transparent; border-color: transparent; color: var(--marino); padding: 8px 10px; }
.btn.fant:hover { background: var(--gris-4); }
.btn.chico { min-height: 32px; padding: 4px 12px; font-size: 12px; }
.botones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.campo { display: grid; gap: 6px; min-width: 0; }
.campo > span { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gris-1); }
.campo input, .campo select, .campo textarea, select.sel, input.ent {
  width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--gris-2);
  background: var(--blanco); border-radius: 0;
}
.campo textarea { min-height: 84px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus, select.sel:focus, input.ent:focus { outline: none; border-color: var(--marino); box-shadow: inset 0 0 0 1px var(--marino); }
.campo small { color: var(--gris-1); font-size: 12px; }
.rejilla-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 16px; }
.rejilla-campos .ancho { grid-column: 1 / -1; }

.mensaje { border-left: 3px solid var(--marino); background: var(--fondo); padding: 10px 14px; font-weight: 500; }
.mensaje.error { background: var(--marino); color: var(--blanco); border-left-color: var(--marino-prof); }
.mensaje.ok { background: var(--blanco); border: 1px solid var(--marino); border-left-width: 3px; }

.insignia { display: inline-block; padding: 3px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--marino); white-space: nowrap; }
.insignia.si { background: var(--marino); color: var(--blanco); }
.insignia.no { color: var(--gris-2); border-color: var(--gris-3); background: var(--blanco); }

/* ---------- entrada ---------- */
.entrada { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); background: var(--marino); }
.entrada-marca { padding: 56px; color: var(--blanco); display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720' viewBox='0 0 720 720' fill='none' stroke='%23FFFFFF'%3E%3Ccircle cx='720' cy='0' r='300' stroke-opacity='.10'/%3E%3Ccircle cx='720' cy='0' r='380' stroke-opacity='.07'/%3E%3Ccircle cx='720' cy='0' r='460' stroke-opacity='.05'/%3E%3Ccircle cx='720' cy='0' r='540' stroke-opacity='.035'/%3E%3C/svg%3E") no-repeat right top; }
.entrada-marca img { width: 132px; }
.entrada-marca h1 { font-size: clamp(32px, 4.4vw, 64px); line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.entrada-marca .sub { margin-top: 14px; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--gris-3); }
.entrada-marca .pie { font-size: 13px; color: var(--gris-3); display: grid; gap: 4px; }
.entrada-panel { background: var(--blanco); padding: 56px 48px; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.entrada-panel h2 { font-size: 22px; font-weight: 700; }
.entrada-panel .ayuda { color: var(--gris-1); font-size: 14px; }
.clave-env { position: relative; display: flex; }
.clave-env input { flex: 1; min-width: 0; padding-right: 96px; }
.clave-env .ver-clave { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 32px; font-size: 11px; }
.reglas { font-size: 13px; color: var(--gris-1); }
button.enlace { background: none; border: 0; padding: 0; color: var(--marino); text-decoration: underline; cursor: pointer; justify-self: start; text-align: left; font-size: 14px; }
.entrada-panel .campo input { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--gris-2); background: var(--blanco); border-radius: 0; }
.entrada-panel .campo input:focus { outline: none; border-color: var(--marino); box-shadow: inset 0 0 0 1px var(--marino); }

/* ---------- estructura de la app ---------- */
.app { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.barra { grid-column: 1 / -1; background: var(--marino); color: var(--blanco); display: flex; align-items: center; gap: 16px; padding: env(safe-area-inset-top) max(20px, env(safe-area-inset-right)) 0 0; min-height: calc(var(--barra) + env(safe-area-inset-top)); position: sticky; top: 0; z-index: 20; }
.barra .marca { width: var(--lateral); display: flex; align-items: center; gap: 12px; padding: 0 20px 0 max(20px, env(safe-area-inset-left)); align-self: stretch; background: var(--marino-prof); flex: none; }
.barra .marca img { width: 46px; }
.barra .marca b { font-size: 12px; letter-spacing: .16em; line-height: 1.25; }
.barra .marca b span { display: block; font-weight: 500; color: var(--gris-3); letter-spacing: .12em; font-size: 10.5px; }
.barra .espacio { flex: 1; min-width: 0; }
.barra .usuario { text-align: right; line-height: 1.25; min-width: 0; }
a.usuario { color: inherit; text-decoration: none; }
a.usuario:hover b { text-decoration: underline; }
.pasos { display: flex; align-items: center; gap: 6px; }
.pasos i { flex: 1; height: 3px; background: var(--gris-3); }
.pasos i.hecho { background: var(--marino); }
.pasos span { flex: none; margin-left: 8px; font-size: 12px; color: var(--gris-1); letter-spacing: .06em; }
form.paso + form.paso { margin-top: 16px; }
.barra .usuario b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra .usuario span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-3); }
.barra .btn { background: transparent; border-color: rgba(255,255,255,.35); color: var(--blanco); }
.barra .btn:hover { background: rgba(255,255,255,.08); }
.barra .menu-movil { display: none; }

.lateral { background: var(--marino-prof); color: var(--gris-3); padding: 20px 0; position: sticky; top: var(--barra); height: calc(100vh - var(--barra)); overflow-y: auto; display: flex; flex-direction: column; justify-content: space-between; }
.lateral nav { display: grid; }
.lateral a { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: baseline; padding: 13px 22px; text-decoration: none; font-size: 14px; font-weight: 500; border-left: 3px solid transparent; }
.lateral a b { font-size: 11px; letter-spacing: .1em; color: var(--gris-2); font-weight: 600; }
.lateral a:hover { color: var(--blanco); background: rgba(255,255,255,.04); }
.lateral a.activo { color: var(--blanco); border-left-color: var(--blanco); background: rgba(255,255,255,.06); }
.lateral a.activo b { color: var(--blanco); }
.lateral .firma { padding: 20px 22px 4px; font-size: 12px; color: var(--gris-2); letter-spacing: .02em; }
.lateral .firma b { font-weight: 400; letter-spacing: .04em; }

.contenido { min-width: 0; padding: 28px max(var(--gutter), env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) var(--gutter); }
.cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; column-gap: 32px; row-gap: 14px; padding-bottom: 18px; border-bottom: var(--linea-fuerte); margin-bottom: 24px; }
.cabecera h1 { font-size: 30px; font-weight: 700; letter-spacing: -.005em; line-height: 1.1; margin-top: 6px; }
.cabecera .fecha { font-size: 12.5px; color: var(--gris-1); text-align: right; }
.cabecera .fecha b { color: var(--marino); font-weight: 600; }
.barra-herr { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }

.hoja { background: var(--blanco); border: var(--linea); padding: 28px; min-width: 0; }
.metricas { display: flex; flex-wrap: wrap; gap: 12px; }
.metrica { background: var(--marino); color: var(--blanco); padding: 12px 18px; min-width: 150px; }
.metrica span { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-3); }
.metrica b { font-size: 22px; font-weight: 700; }

.pestanas { display: flex; flex-wrap: wrap; border-bottom: var(--linea); gap: 0 4px; }
.pestanas button { border: 0; background: transparent; padding: 12px 16px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gris-1); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.pestanas button.activo { color: var(--marino); border-bottom-color: var(--marino); }

/* ---------- tablas ---------- */
.tabla-env { width: 100%; overflow-x: auto; border: var(--linea); background: var(--blanco); }
table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.t th, .pt th, .pf-t th { overflow-wrap: normal; word-break: keep-all; }
table.t th { background: var(--marino); color: var(--blanco); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-align: left; padding: 10px 12px; vertical-align: bottom; }
table.t th.grupo { text-align: center; border-left: 1px solid rgba(255,255,255,.22); border-bottom: 1px solid rgba(255,255,255,.22); }
table.t td { padding: 9px 12px; border-bottom: 1px solid var(--gris-4); vertical-align: middle; }
table.t tbody tr:hover td { background: var(--fondo); }
table.t .d { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.t .c { text-align: center; }
table.t .fuerte { font-weight: 700; }
table.t tr.apagado td { color: var(--gris-2); }
table.t tfoot td { font-weight: 700; border-top: var(--linea-fuerte); background: var(--fondo); }
table.t td.acciones { white-space: nowrap; text-align: right; }

/* ---------- ficha técnica ---------- */
.ficha { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
.ficha-cab { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; padding-bottom: 16px; border-bottom: var(--linea-fuerte); }
.ficha-cab h2 { font-size: 46px; font-weight: 700; letter-spacing: -.01em; line-height: 1; margin-top: 8px; }
.ficha-cab .lado { text-align: right; display: grid; gap: 8px; justify-items: end; }
.seccion { display: grid; grid-template-columns: 170px minmax(0, 1fr); column-gap: 24px; padding: 18px 0 20px; border-bottom: var(--linea-fuerte); }
.sec-h .n { font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--gris-1); }
.sec-h h3 { font-size: 18px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; margin-top: 4px; line-height: 1.2; }
.sec-h p { font-size: 12.5px; color: var(--gris-1); margin-top: 4px; }
.grupo-t { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 8px; }
.grupo-t + .datos { margin-bottom: 14px; }
.datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 20px; row-gap: 14px; }
.datos.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.datos.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dato { min-width: 0; }
.dato .eti { display: block; margin-bottom: 4px; font-size: 10.5px; }
.dato b { overflow-wrap: anywhere; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.dato b small { font-size: 13px; font-weight: 500; margin-left: 3px; }
.dato .nota { display: block; font-size: 12px; color: var(--gris-1); margin-top: 3px; }
.dato.texto b { font-size: 17px; }
.filas { display: grid; }
.fila { display: grid; grid-template-columns: 170px minmax(0, 1fr); column-gap: 20px; padding: 9px 0; border-bottom: 1px solid var(--gris-4); }
.fila:first-child { padding-top: 0; }
.fila .eti { padding-top: 2px; font-size: 10.5px; }
.textos2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; row-gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--gris-4); }
.textos2 p { margin-top: 4px; font-size: 14.5px; }
.areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.areas li { display: grid; grid-template-columns: 34px minmax(0, 1fr); padding: 7px 0; border-bottom: 1px solid var(--gris-4); list-style: none; }
.areas ol { margin: 0; padding: 0; display: contents; }
.areas li b { color: var(--gris-1); font-size: 13px; }
.criterio { font-size: 14.5px; margin-bottom: 16px; }
table.t.compacta td, table.t.compacta th { padding: 8px 10px; }
.plano-col { position: sticky; top: calc(var(--barra) + 20px); }
.plano-caja { border: var(--linea); background: var(--blanco); padding: 16px; }
.plano-caja img { width: 100%; max-height: calc(100vh - var(--barra) - 170px); object-fit: contain; margin: 0 auto; }
.plano-caja .pie-plano { margin-top: 10px; font-size: 12px; color: var(--gris-1); }
.menu-desc { position: relative; }
.menu-desc .opciones { position: absolute; right: 0; top: calc(100% + 4px); background: var(--blanco); border: var(--linea-fuerte); min-width: 260px; z-index: 15; display: grid; }
.menu-desc .opciones button { text-align: left; border: 0; border-bottom: 1px solid var(--gris-4); background: var(--blanco); padding: 12px 14px; cursor: pointer; }
.menu-desc .opciones button:hover { background: var(--fondo); }
.menu-desc .opciones small { display: block; color: var(--gris-1); font-size: 12px; }

/* ---------- parque ---------- */
.aviso-proy { border-left: 3px solid var(--marino); background: var(--blanco); padding: 12px 16px; font-weight: 500; margin-bottom: 20px; }
.parque { columns: 2; column-gap: 40px; }
.parque .seccion { break-inside: avoid; }
.lista-plana { margin: 0; padding: 0; list-style: none; display: grid; }
.lista-plana li { padding: 8px 0; border-bottom: 1px solid var(--gris-4); }
.lista-plana li:first-child { padding-top: 0; }
.lista-plana li b { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-1); margin-bottom: 2px; }

/* ---------- cotizador ---------- */
.cotizador { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.paso { background: var(--blanco); border: var(--linea); padding: 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.paso + .paso { margin-top: 16px; }
.paso-h { display: flex; align-items: baseline; gap: 12px; }
.paso-h b { font-size: 11px; letter-spacing: .14em; color: var(--gris-1); }
.paso-h h3 { font-size: 16px; text-transform: uppercase; letter-spacing: .06em; }
.mapa { width: 100%; min-width: 0; overflow-x: auto; }
.mapa svg { width: 100%; min-width: 620px; height: auto; display: block; }
.mapa .b rect { fill: var(--gris-4); stroke: var(--blanco); stroke-width: 2; }
.mapa .b text { fill: var(--gris-2); font: 600 10px Archivo, sans-serif; pointer-events: none; }
.mapa .b.disp { cursor: pointer; }
.mapa .b.disp rect { fill: var(--marino); }
.mapa .b.disp text { fill: var(--blanco); }
.mapa .b.disp:hover rect { fill: var(--gris-1); }
.mapa .b.sel rect { fill: var(--blanco); stroke: var(--marino); stroke-width: 3; }
.mapa .b.sel text { fill: var(--marino); }
.mapa .via { fill: var(--fondo); }
.mapa .via-t { fill: var(--gris-2); font: 700 10px Archivo, sans-serif; letter-spacing: .3em; }
.leyenda { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12px; color: var(--gris-1); }
.leyenda i { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; margin-right: 6px; border: 1px solid var(--marino); }
.leyenda i.d { background: var(--marino); }
.leyenda i.n { background: var(--gris-4); border-color: var(--gris-3); }
.resumen-bod { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--linea); }
.resumen-bod > div { padding: 12px 14px; border-right: 1px solid var(--gris-4); border-bottom: 1px solid var(--gris-4); min-width: 0; }
.resumen-bod b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.opcion { border: var(--linea-fuerte); background: var(--blanco); padding: 22px; }
.opcion.osc { background: var(--marino); color: var(--blanco); }
.opcion.osc .eti, .opcion.osc .nota { color: var(--gris-3); }
.opcion + .opcion { margin-top: 16px; }
.opcion h3 { font-size: 20px; text-transform: uppercase; letter-spacing: .02em; margin: 4px 0 14px; }
.opcion h3 .insignia { margin-left: 8px; vertical-align: 3px; }
.opcion.osc h3 .insignia { border-color: rgba(255,255,255,.5); }
.renglon { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid rgba(138,138,160,.28); font-size: 14px; }
.renglon b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.renglon.total { border-bottom: 0; border-top: 1px solid currentColor; margin-top: 8px; padding-top: 14px; font-size: 15px; font-weight: 600; }
.renglon.total b { font-size: 24px; }
.opcion .nota { font-size: 12px; color: var(--gris-1); margin-top: 10px; }

/* ---------- propuesta (pantalla) ---------- */
.propuesta-env { background: var(--gris-4); padding: 28px; overflow-x: auto; }

/* ---------- clientes / admin ---------- */
.buscador { min-width: 0; flex: 1 1 260px; max-width: 420px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { font-size: 11.5px; font-weight: 600; padding: 2px 7px; border: 1px solid var(--gris-3); white-space: nowrap; }
.sel-bodegas { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 4px; }
.sel-bodegas label { display: block; cursor: pointer; }
.sel-bodegas input { position: absolute; opacity: 0; pointer-events: none; }
.sel-bodegas span { display: block; text-align: center; padding: 6px 0; border: 1px solid var(--gris-3); font-size: 12px; font-weight: 600; }
.sel-bodegas input:checked + span { background: var(--marino); color: var(--blanco); border-color: var(--marino); }
.sel-bodegas input:focus-visible + span { outline: 2px solid var(--marino); outline-offset: 1px; }
.disp-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.disp-rejilla button { padding: 10px 0; border: 1px solid var(--gris-3); background: var(--blanco); font-weight: 700; font-size: 13px; cursor: pointer; }
.disp-rejilla button.si { background: var(--marino); border-color: var(--marino); color: var(--blanco); }
.disp-rejilla button span { display: block; font-size: 9.5px; letter-spacing: .1em; font-weight: 600; text-transform: uppercase; opacity: .75; }
.detalle-fila td { background: var(--fondo); }
.det-json { font-size: 12px; color: var(--gris-1); max-width: 520px; min-width: 220px; }
.dos-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }

.resumen3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.filtros { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; align-items: end; }
/* Bloque «Recursos» del menú lateral (debajo de las secciones numeradas) */
.lateral { justify-content: flex-start; }
.lateral .firma { margin-top: auto; }
.recursos { display: grid; margin-top: 22px; padding-top: 14px; border-top: 1px solid rgba(198,198,214,.16); }
.recursos-t { padding: 0 22px 6px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-2); }
.lateral a.recurso { display: flex; align-items: center; gap: 12px; padding: 11px 22px; font-size: 14px; }
.lateral a.recurso svg { flex: none; color: var(--gris-2); }
.lateral a.recurso:hover svg, .lateral a.recurso.activo svg { color: var(--blanco); }
.lateral a.recurso .ext { margin-left: auto; display: inline-flex; }
.btn svg { flex: none; }

/* ---------- modal ---------- */
.velo { position: fixed; inset: 0; background: rgba(28,28,42,.62); display: grid; place-items: center; padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); z-index: 50; }
.modal { background: var(--blanco); width: min(680px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; border-top: 4px solid var(--marino); }
.modal-h { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 24px; border-bottom: var(--linea); }
.modal-h h3 { font-size: 18px; }
.modal-c { padding: 22px 24px; display: grid; gap: 18px; }
.modal-p { padding: 16px 24px; border-top: var(--linea); display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.clave-grande { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border: 1px solid var(--marino); padding: 14px 16px; }
.clave-grande code { font: 700 24px ui-monospace, Menlo, Consolas, monospace; letter-spacing: .04em; overflow-wrap: anywhere; }
.aviso-flot { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); left: auto; background: var(--marino); color: var(--blanco); padding: 14px 18px; max-width: 420px; z-index: 60; font-weight: 500; }

/* ---------- pantallas medianas ---------- */
@media (max-width: 1500px) {
  .ficha { grid-template-columns: minmax(0, 1fr); }
  .plano-col { position: static; margin-top: 24px; }
  .plano-caja img { max-height: none; max-width: 640px; }
  .cotizador { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1360px) {
  :root { --lateral: 216px; --gutter: 24px; }
  .parque { columns: 1; }
  .datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .dos-col, .resumen3 { grid-template-columns: minmax(0, 1fr); }
  .filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filtros .buscar { grid-column: 1 / -1; }
}
@media (max-width: 900px), (max-height: 500px) and (max-width: 1000px) {
  :root { --gutter: 16px; --barra: 56px; }
  table.t { min-width: 640px; }
  table.t.compacta { min-width: 560px; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .barra { padding-right: 12px; gap: 8px; }
  .barra .marca { width: auto; background: transparent; padding: 0 4px 0 12px; }
  .barra .marca b { display: none; }
  .barra .menu-movil { display: inline-flex; }
  .barra .usuario b { font-size: 13px; }
  .barra .ocultable { display: none; }
  .lateral { position: fixed; top: calc(var(--barra) + env(safe-area-inset-top)); left: 0; width: min(300px, 86vw); height: calc(100dvh - var(--barra) - env(safe-area-inset-top)); padding-left: env(safe-area-inset-left); padding-bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 30; transform: translateX(-100%); transition: transform .2s; visibility: hidden; }
  .lateral.abierto { transform: none; visibility: visible; }
  .cortina { position: fixed; inset: 0; background: rgba(28,28,42,.5); z-index: 19; }   /* debajo de la barra: el botón del menú sigue a la mano */
  .entrada-marca .pie { display: grid; }
  .contenido { padding-top: 20px; }
  .cabecera h1 { font-size: 24px; }
  .cabecera .fecha { text-align: left; }
  .hoja { padding: 18px; }
  .seccion { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .fila { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .textos2, .areas { grid-template-columns: minmax(0, 1fr); }
  .ficha-cab h2 { font-size: 34px; }
  .ficha-cab .lado { text-align: left; justify-items: start; }
  .entrada { grid-template-columns: minmax(0, 1fr); }
  .entrada-marca { padding: 28px 20px; gap: 16px; }
  .entrada-marca img { width: 84px; }
  .entrada-panel { padding: 28px 20px 36px; }
  .rejilla-campos { grid-template-columns: minmax(0, 1fr); }
  .resumen-bod { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .renglon.total b { font-size: 20px; }
  .propuesta-env { padding: 12px; }
}
@media (max-width: 480px) {
  .filtros { grid-template-columns: minmax(0, 1fr); }
  .datos, .datos.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .datos.dos { grid-template-columns: minmax(0, 1fr); }
  .dato b { font-size: 20px; }
  .metrica { min-width: 0; flex: 1 1 140px; }
  .barra .btn.salir span { display: none; }
}

/* ---------- plano + áreas (pantalla) ---------- */
.plano-areas { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(200px, 1fr); column-gap: 24px; row-gap: 16px; align-items: start; }
.plano-img { border: var(--linea); background: var(--blanco); padding: 12px; }
.plano-img img { width: 100%; max-height: calc(100vh - var(--barra) - 150px); object-fit: contain; margin: 0 auto; aspect-ratio: auto 1525 / 2640; background: var(--fondo); }
.doc .plano-img img { aspect-ratio: auto; background: none; }
.plano-vacio { aspect-ratio: 4 / 3; display: grid; place-items: center; border: 1px dashed var(--gris-2); background: var(--fondo); }
.plano-vacio span { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gris-1); }
.plano-nota { margin-top: 8px; font-size: 12px; color: var(--gris-1); }
.areas-caja .et { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-1); margin-bottom: 6px; }
.areas-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.areas-lista li { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--gris-4); }
.areas-lista li b { font-variant-numeric: tabular-nums; }
.areas-lista li small { display: block; color: var(--gris-1); font-size: 12.5px; margin-top: 2px; }
.plano-sec { grid-template-columns: minmax(0, 1fr) !important; border-bottom: 0; }
@media (max-width: 1500px) { .plano-img img { max-height: none; } }
@media (max-width: 700px) { .plano-areas { grid-template-columns: minmax(0, 1fr); } }
/* Plano horizontal (parque): dibujo a todo el ancho y áreas debajo, en dos columnas si hay espacio */
.plano-areas.apaisado { grid-template-columns: minmax(0, 1fr); }
.plano-areas.apaisado .plano-img img { max-height: none; }
@media (min-width: 701px) { .plano-areas.apaisado .areas-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }

/* ---------- uso táctil: todo lo que se toca mide al menos 44 × 44 px ---------- */
@media (max-width: 900px), (max-height: 500px) and (max-width: 1000px), (pointer: coarse) {
  .btn, .btn.chico, .btn.fant { min-height: 44px; min-width: 44px; }
  .btn.chico { padding: 6px 14px; }
  .pestanas button, .menu-desc .opciones button, .disp-rejilla button { min-height: 44px; }
  .sel-bodegas span { padding: 13px 0; }
  .campo input, .campo select, .campo textarea, select.sel, input.ent { min-height: 44px; }
  .entrada-panel .campo input { min-height: 48px; }
  button.enlace { min-height: 44px; display: inline-flex; align-items: center; }
  a.usuario { min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
  table.t a, .lista-plana a, .resumen3 a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .clave-env .ver-clave { min-height: 44px; }
  /* WebKit ignora la altura de un <select> nativo: se dibuja sin apariencia del sistema, con flecha propia */
  select { -webkit-appearance: none; appearance: none; min-height: 44px; padding-right: 34px !important; border-radius: 0;
    background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232A2A3E' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 12px center; }
  .lateral a { min-height: 48px; align-items: center; }
}

/* ---------- tablas anchas → tarjetas por fila en teléfono (todos los campos) ---------- */
@media (max-width: 700px), (max-height: 500px) and (max-width: 1000px) {
  .tabla-env { overflow: visible; border: 0; background: transparent; }
  table.t, table.t tbody, table.t tfoot { display: block; width: 100%; min-width: 0 !important; }
  table.t thead { display: none; }
  table.t tr { display: block; background: var(--blanco); border: var(--linea); margin-bottom: 10px; padding: 4px 14px; }
  table.t tr.apagado { background: var(--fondo); }
  table.t tbody tr:hover td { background: transparent; }
  table.t td { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--gris-4); text-align: left !important; white-space: normal !important; }
  table.t td:last-child { border-bottom: 0; }
  table.t td::before { content: attr(data-et); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-1); }
  table.t td[data-et=""] { grid-template-columns: minmax(0, 1fr); }
  table.t td[data-et=""]::before { display: none; }
  table.t td.acciones .botones { justify-content: flex-start !important; }
  table.t tfoot tr { background: var(--fondo); }
  table.t tfoot td { border-top: 0; }
  table.t tr.detalle-fila { border-top: 0; margin-top: -10px; }
}

/* ---------- plano del parque: en teléfono, rejilla de botones de 44 px ---------- */
.mapa-movil { display: none; }
.mapa-movil h4 { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-1); margin: 4px 0 6px; }
.mapa-movil .via-m { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .3em; color: var(--gris-2); background: var(--fondo); padding: 8px 0; margin: 8px 0; }
.mapa-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; }
.mapa-rejilla button { min-height: 44px; border: 1px solid var(--gris-3); background: var(--gris-4); color: var(--gris-2); font-weight: 700; font-size: 13px; }
.mapa-rejilla button.disp { background: var(--marino); border-color: var(--marino); color: var(--blanco); cursor: pointer; }
.mapa-rejilla button.sel { background: var(--blanco); color: var(--marino); border: 3px solid var(--marino); }
.mapa-rejilla button:disabled { cursor: default; }
@media (max-width: 700px), (max-height: 500px) and (max-width: 1000px) {
  .mapa { display: none; }
  .mapa-movil { display: block; }
}

/* ---------- visor de plano a pantalla completa ---------- */
.plano-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; position: relative; text-align: inherit; }
.plano-btn .ampliar { display: flex; align-items: center; width: max-content; min-height: 44px; margin: 10px 0 0 auto; background: var(--marino); color: var(--blanco); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 10px 14px; }   /* debajo del dibujo: nunca lo tapa */
.visor { position: fixed; inset: 0; z-index: 70; background: var(--blanco); display: grid; grid-template-rows: auto minmax(0, 1fr); padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.visor-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 8px 16px; background: var(--marino); color: var(--blanco); }
.visor-barra b { font-size: 15px; }
.visor-barra .btn { background: transparent; border-color: rgba(255,255,255,.45); color: var(--blanco); }
.visor-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); min-height: 0; }
.visor-lienzo { overflow: auto; min-height: 0; touch-action: pan-x pan-y pinch-zoom; background: var(--fondo); padding: 12px; -webkit-overflow-scrolling: touch; }
.visor-lienzo img { width: 100%; max-width: none; margin: 0 auto; background: var(--blanco); }
.visor-areas { overflow: auto; padding: 16px; border-left: var(--linea); }
@media (max-width: 700px) {
  .visor-cuerpo { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .visor-areas { border-left: 0; border-top: var(--linea); max-height: 38dvh; }
}
@media (max-height: 500px) and (max-width: 1000px) {
  .visor-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(200px, 38%); }
}

/* ---------- Recursos: material comercial ---------- */
.material-grupos { display: grid; gap: 26px; }
.material-cat .grupo-t { display: flex; align-items: baseline; gap: 12px; font-size: 12px; }
.material-cat .grupo-t span { font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--gris-1); font-size: 13px; }
table.material { table-layout: fixed; width: 100%; }
table.material col.c-ver { width: 96px; } table.material col.c-fecha { width: 140px; } table.material col.c-tam { width: 110px; }
table.material col.c-fmt { width: 100px; } table.material col.c-acc { width: 170px; }
table.material td.fuerte { overflow-wrap: anywhere; }
table.material td.acciones { text-align: right; }
table.material td.acciones .btn { white-space: nowrap; }

/* ---------- Recursos: documentos legales (solo consulta) ---------- */
.legal-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 10px; }
.legal-cab h2 { font-size: 20px; margin: 0 0 4px; }
.aviso-legal { border-left: 3px solid var(--marino); padding: 4px 0 4px 16px; }
.aviso-legal b { display: block; font-size: 12px; letter-spacing: .08em; margin-bottom: 8px; }
.aviso-legal ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.acepto { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; cursor: pointer; min-height: 44px; padding-top: 4px; }
.acepto input { width: 22px; height: 22px; margin: 0; accent-color: var(--marino); }
.visor-sub { font-size: 12px; color: var(--gris-3); letter-spacing: .04em; margin-top: 2px; }
.visor-doc { grid-template-rows: auto minmax(0, 1fr); }
.doc-lienzo { padding: 16px; }
.doc-paginas { width: 100%; max-width: 860px; margin: 0 auto; display: grid; gap: 16px; }
.doc-pagina { position: relative; background: var(--blanco); border: var(--linea); overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.doc-pagina img { width: 100%; display: block; pointer-events: none; }
.marca-agua { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-around; align-items: center; pointer-events: none; overflow: hidden; }
.marca-agua span { transform: rotate(-32deg); white-space: nowrap; font-weight: 700; letter-spacing: .06em; color: rgba(42, 42, 62, .14); font-size: clamp(11px, 2.4vw, 21px); }
.doc-pie { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 12px; font-size: 11px; color: var(--gris-1); background: rgba(255,255,255,.88); border-top: 1px solid var(--gris-4); }
.doc-pie span { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }   /* «1 / 3» nunca se parte */
@media print { .visor-doc { display: none !important; } }
@media (max-width: 700px) {
  .legal-cab { flex-direction: column; }
  .doc-lienzo { padding: 8px; }
  .doc-pie { font-size: 10px; padding: 5px 8px; }
}

/* ---------- Paso 6 y 7: panel, visitas, seguimiento, operaciones y cobranza ---------- */
.insignia.alerta { background: var(--blanco); color: var(--marino); border: 2px solid var(--marino); }   /* atraso: sin rojos, con texto */
.bloque { padding: 20px 22px; margin-bottom: 18px; }
.bloque-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.bloque-h h2 { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 18px; }
.dato-k { background: var(--blanco); border: var(--linea); padding: 16px 18px; display: grid; gap: 4px; min-width: 0; }
.dato-k b { font-size: 24px; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.lista-filas { list-style: none; margin: 0; padding: 0; display: grid; }
.lista-filas li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--gris-4); }
.lista-filas li:last-child { border-bottom: 0; }
.lista-filas li.apagado { color: var(--gris-1); }
.lista-filas .der { text-align: right; display: grid; gap: 4px; justify-items: end; }
.barra-pago { display: flex; align-items: center; gap: 10px; min-width: 140px; margin-top: 4px; }
.barra-pago-v { flex: 1; height: 8px; background: var(--gris-4); border-radius: 4px; overflow: hidden; }
.barra-pago-v i { display: block; height: 100%; background: var(--marino); border-radius: 4px; }
.barra-pago b { font-size: 13px; font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; }
.avisos { display: grid; gap: 10px; }
.aviso { border: var(--linea); border-left: 3px solid var(--gris-3); padding: 12px 14px; display: grid; gap: 6px; background: var(--blanco); }
.aviso.importante { border-left-color: var(--marino); }
.aviso.leido { opacity: .8; }
.aviso p { margin: 0; white-space: pre-line; }
.aviso-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.aviso-h .tenue { margin-left: auto; font-size: 12.5px; }
.alertas { display: grid; gap: 10px; margin-bottom: 18px; }
.alerta-disp { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; background: var(--marino); color: var(--blanco); padding: 14px 18px; }
.alerta-disp .tenue { color: var(--gris-3); }
.alerta-disp .btn.sec { background: transparent; border-color: rgba(255,255,255,.5); color: var(--blanco); }
.etapas-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.etapa-n { display: grid; gap: 2px; padding: 10px 12px; border: var(--linea); text-decoration: none; color: inherit; background: var(--fondo); min-height: 44px; }
.etapa-n b { font-size: 22px; }
.etapa-n span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-1); }
.historial { list-style: none; margin: 0; padding: 0; display: grid; max-height: 320px; overflow: auto; }
.historial li { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--gris-4); }
.wa-texto { white-space: pre-wrap; font: inherit; font-size: 14px; background: var(--fondo); border: var(--linea); padding: 12px; margin: 0; max-height: 240px; overflow: auto; }
.versiones { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin-bottom: 14px; font-size: 14px; }
.suma-cal { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; margin-top: 12px; padding: 12px 14px; background: var(--fondo); border: var(--linea); }
.cal-edit input { width: 100%; min-width: 0; padding: 6px 8px; border: 1px solid var(--gris-3); font-size: 16px; }
.cal-edit td.d input { text-align: right; font-variant-numeric: tabular-nums; }
.etapas-op { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.etapas-op li { padding: 8px 0 8px 22px; border-left: 2px solid var(--gris-4); position: relative; }
.etapas-op li::before { content: ''; position: absolute; left: -6px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--blanco); border: 2px solid var(--gris-3); }
.etapas-op li.hecha::before { background: var(--marino); border-color: var(--marino); }
.precios-bod td.d input { width: 100%; max-width: 160px; min-width: 0; padding: 6px 8px; border: 1px solid var(--gris-3); font-size: 16px; text-align: right; font-variant-numeric: tabular-nums; }
.precios-bod tr.cambiada td { background: var(--fondo); }
.precios-bod .acepto { min-height: 0; padding-top: 0; align-items: center; }
.disp-rejilla button small { display: block; font-size: 9.5px; font-weight: 500; color: inherit; opacity: .7; margin-top: 2px; }
/* gráficas (monocromáticas: la serie se distingue por relleno y contorno, con leyenda y tabla) */
.graf-env { position: relative; }
.graf { width: 100%; height: auto; display: block; }
.graf-reja { stroke: var(--gris-4); stroke-width: 1; }
.graf-eje { font-size: 11px; fill: var(--gris-1); }
.graf-b { cursor: default; }
.graf-s0 { fill: var(--blanco); stroke: var(--gris-2); stroke-width: 1.5; }
.graf-s1 { fill: var(--marino); }
.graf-leyenda { display: flex; gap: 18px; font-size: 13px; margin-bottom: 6px; }
.graf-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.graf-leyenda i { width: 14px; height: 10px; display: inline-block; border: 1.5px solid var(--gris-2); background: var(--blanco); }
.graf-leyenda i.graf-s1 { background: var(--marino); border-color: var(--marino); }
.graf-tip { position: absolute; transform: translate(-50%, -100%); background: var(--marino); color: var(--blanco); font-size: 12.5px; padding: 6px 9px; white-space: nowrap; pointer-events: none; }
@media (max-width: 700px) {
  .historial li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .lista-filas li { grid-template-columns: minmax(0, 1fr); }
  .lista-filas .der { text-align: left; justify-items: start; }
  .dato-k b { font-size: 20px; }
}

/* ============================================================
   IMPRESIÓN — carta vertical, una sola columna de información.
   Cada documento es una tabla: thead/tfoot repiten encabezado y pie en cada hoja;
   el contenido fluye por las hojas necesarias. @page margin:0 → el navegador no
   imprime fecha, título ni URL. Texto ≥ 11 pt, etiquetas 10 pt, secciones 15 pt.
   ============================================================ */
#impresion { display: none; }
.doc { width: 8.5in; border-collapse: collapse; background: var(--blanco); color: var(--marino); font-size: 11pt; line-height: 1.5; }
.doc > thead > tr > td { padding: 0.5in 0.65in 0.16in; }
.doc > tfoot > tr > td { padding: 0.16in 0.65in 0.45in; }
.doc > tbody > tr > td { padding: 0 0.65in; vertical-align: top; }
.doc.tablas > thead > tr > td, .doc.tablas > tbody > tr > td, .doc.tablas > tfoot > tr > td { padding-left: 0.4in; padding-right: 0.4in; }
.pd-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 18pt; padding-bottom: 8pt; border-bottom: 1.5pt solid var(--marino); }
.pd-cab .izq { display: flex; align-items: center; gap: 12pt; min-width: 0; }
.pd-cab img { width: 0.85in; flex: none; }
.pd-cab .t1 { font-size: 10pt; letter-spacing: .12em; text-transform: uppercase; color: var(--gris-1); font-weight: 600; }
.pd-cab .t2 { font-size: 16pt; font-weight: 700; line-height: 1.2; }   /* títulos de 14–16 pt */
.pd-cab .der { text-align: right; font-size: 10pt; color: var(--gris-1); line-height: 1.45; }
.pd-cab .der b { color: var(--marino); }
.pd-pie { display: flex; justify-content: space-between; align-items: flex-end; gap: 16pt; border-top: 0.75pt solid var(--gris-3); padding-top: 6pt; font-size: 10pt; color: var(--gris-1); line-height: 1.4; }
.pd-pie .firma { font-size: 11pt; letter-spacing: .04em; }
.ps { break-inside: avoid; padding: 12pt 0 10pt; border-top: 1.5pt solid var(--marino); }
.ps.larga { break-inside: auto; }
.ps-ini { break-inside: avoid; }
.doc tbody td > .ps:first-child, .doc tbody td > .p-nota:first-child + .ps { border-top: 0; }
.ps h3 { font-size: 15pt; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin: 0 0 8pt; line-height: 1.25; break-after: avoid; }
.ps h3 .n { font-size: 11pt; color: var(--gris-1); margin-right: 10pt; letter-spacing: .1em; }
.ps-sub { font-size: 12pt; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 10pt 0 2pt; break-after: avoid; }
.pf { display: grid; grid-template-columns: 2.4in minmax(0, 1fr); column-gap: 14pt; padding: 4pt 0; border-bottom: 0.75pt solid var(--gris-4); break-inside: avoid; align-items: baseline; }
.et { font-size: 10pt; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-1); }
.pf .v { font-size: 11pt; }
.pf.num .v { font-size: 12pt; font-weight: 700; font-variant-numeric: tabular-nums; }
.pf.monto { grid-template-columns: minmax(0, 1fr) auto; }
.pf.monto .v { font-size: 12pt; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.pf.monto.total { border-bottom: 0; border-top: 1.5pt solid var(--marino); margin-top: 4pt; padding-top: 7pt; }
.pf.monto.total .et { font-size: 11pt; color: var(--marino); }
.pf.monto.total .v { font-size: 15pt; }
.pt-t { padding: 5pt 0 6pt; border-bottom: 0.75pt solid var(--gris-4); break-inside: avoid; }
.pt-t p, .pt-p { font-size: 11pt; line-height: 1.55; margin: 2pt 0 0; }
.pt-p { margin: 10pt 0; }
.pt-lista { margin: 0; padding-left: 16pt; font-size: 11pt; line-height: 1.55; }
.pt-lista li { margin-bottom: 4pt; }
.rep { break-inside: avoid; padding-bottom: 4pt; }
.doc .plano-areas { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); column-gap: 18pt; }
.doc .plano-areas.apaisado { grid-template-columns: minmax(0, 1fr); }
.doc .plano-areas.apaisado .areas-lista { grid-template-columns: minmax(0, 1fr) !important; }   /* PDF: una sola columna */
.doc .plano-img { padding: 6pt; border: 0.75pt solid var(--gris-3); }
.doc .plano-img img { max-height: 6.7in; width: 100%; object-fit: contain; }
.doc .plano-vacio { aspect-ratio: auto; height: 6.4in; }
.doc .plano-vacio span { font-size: 11pt; }
.doc .plano-nota { font-size: 10pt; }
.doc .areas-caja .et { font-size: 10pt; margin-bottom: 4pt; }
.doc .areas-lista li { grid-template-columns: 0.42in minmax(0, 1fr); column-gap: 8pt; padding: 5pt 0; font-size: 11pt; line-height: 1.4; border-bottom: 0.75pt solid var(--gris-4); }
.doc .areas-lista li small { font-size: 10pt; }
/* tablas impresas (tabla maestra y lista de precios): letra mínima 9 pt, encabezado repetido en cada hoja */
.pt { width: 100%; border-collapse: collapse; font-size: 9pt; line-height: 1.3; font-variant-numeric: tabular-nums; }
.pt thead { display: table-header-group; }
.pt tr { break-inside: avoid; }
.pt th { background: var(--marino); color: var(--blanco); font-size: 9pt; letter-spacing: .02em; font-weight: 600; padding: 4pt 3pt; text-align: left; vertical-align: bottom; line-height: 1.2; }
.pt td { padding: 3pt 3pt; border-bottom: 0.5pt solid var(--gris-3); white-space: nowrap; }
.pt .d { text-align: right; }
.pt tr.apagado td { color: var(--gris-1); }
.pt tfoot td { font-weight: 700; border-top: 1pt solid var(--marino); }
.pt.lista td { padding: 3.5pt 4pt; }
.pt.pt11 { font-size: 11pt; } .pt.pt11 th { font-size: 10pt; padding: 4pt 4pt; } .pt.pt11 td { padding: 4pt 4pt; white-space: normal; }
.p-nota { font-size: 10pt; color: var(--gris-1); margin: 8pt 0; line-height: 1.45; }
.p-metricas { display: flex; flex-wrap: wrap; gap: 6pt; margin: 8pt 0; }
.p-metricas div { background: var(--marino); color: var(--blanco); padding: 4pt 9pt; }
.p-metricas span { display: block; font-size: 9pt; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-3); }
.p-metricas b { font-size: 12pt; }

/* vista en pantalla de los documentos (propuesta) */
.propuesta-env .doc { margin: 0 auto; box-shadow: 0 1px 0 var(--gris-3); }
.propuesta-env .doc + .doc { margin-top: 24px; }

@page { size: Letter portrait; margin: 0; }
@media print {
  html, body { background: var(--blanco) !important; margin: 0 !important; }
  #raiz { display: none !important; }
  #impresion { display: block !important; }
  .doc { width: 8.5in; box-shadow: none !important; margin: 0 !important; }
  .doc + .doc { break-before: page; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}