/* App "plan calculado" - celular primero. SISTEMA VISUAL UNICO v3 (el mismo del producto y de la landing).
   Tokens (6 colores, 2 familias; nadie agrega colores ni letras): sistema-visual-v3.md del 2026-11-10.
   Titulos y rotulos: Oswald 600/700 · Texto: Source Sans 3 400/600. Letras locales (fuentes/): anda sin conexion.
   Sin degradados, sin sombras blandas, sin opacidades, esquinas de 4-6 px. Estados con oliva y amarillo. */
@font-face { font-family: "Titulo"; src: url("fuentes/oswald-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Titulo"; src: url("fuentes/oswald-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cuerpo"; src: url("fuentes/sourcesans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cuerpo"; src: url("fuentes/sourcesans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --olivaOscuro: #33401F; --oliva: #4B5A2E; --carbon: #23271F; --arena: #E9DFC9; --crema: #FBF7EE; --amarillo: #FFC845;
  --titulo: "Titulo", "Cuerpo", Arial, sans-serif;
  --cuerpo: "Cuerpo", Arial, sans-serif;
  --radio: 6px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--arena); color: var(--carbon); font-family: var(--cuerpo); font-size: 18px; line-height: 1.5; }
#app { max-width: 560px; margin: 0 auto; padding: 16px 16px 40px; min-height: 100vh; }
#impresion { display: none; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 700; color: var(--carbon); line-height: 1.15; margin: 0 0 10px; }
h1 { font-size: 31px; }
h2 { font-size: 25px; font-weight: 600; }
h3 { font-size: 19px; font-family: var(--cuerpo); font-weight: 600; color: var(--carbon); }
p { margin: 0 0 12px; }
b, strong { font-weight: 600; }
.chico { font-size: 16px; color: var(--olivaOscuro); }
.etiqueta { font-family: var(--titulo); font-size: 16px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--olivaOscuro); margin: 0 0 8px; }
:focus-visible { outline: 3px solid var(--carbon); outline-offset: 2px; }
h1[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible { outline: none; }

/* botones grandes: amarillo = el unico acento */
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 58px; padding: 13px 20px;
       border-radius: var(--radio); border: 2px solid var(--carbon); background: var(--amarillo); color: var(--carbon);
       font-family: var(--titulo); font-weight: 600; font-size: 20px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2;
       cursor: pointer; text-decoration: none; text-align: center; box-shadow: 3px 3px 0 var(--carbon); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--carbon); }
.btn.sec { background: var(--crema); color: var(--carbon); box-shadow: none; }
.btn.link { background: transparent; border-color: transparent; box-shadow: none; color: var(--olivaOscuro); text-decoration: underline; min-height: 48px;
            font-family: var(--cuerpo); font-weight: 600; font-size: 18px; letter-spacing: 0; text-transform: none; }
.btn svg { width: 24px; height: 24px; flex: none; }
.barra { display: flex; gap: 12px; margin-top: 22px; }
.barra .btn { flex: 1; }
.barra .btn.sec { flex: 0 0 38%; }

/* tapa: la imagen del producto; si falta, una tapa de CSS con el mismo sistema */
.tapa { position: relative; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: var(--olivaOscuro);
        box-shadow: 5px 5px 0 var(--carbon); border: 2px solid var(--carbon); container-type: inline-size; }
.tapa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tapa.con-imagen { aspect-ratio: auto; }
.tapa.con-imagen img { height: auto; }
.tapa .t-in { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 8cqw 8cqw 0; }
.tapa .t-etq { font-family: var(--titulo); font-size: 4cqw; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--amarillo); }
.tapa .t-tit { font-family: var(--titulo); font-weight: 700; text-transform: uppercase; color: var(--crema); font-size: 14.5cqw; line-height: 1; margin-top: 4cqw; }
.tapa .t-tit b { color: var(--amarillo); font-weight: 700; display: block; font-size: 22cqw; line-height: 1; }
.tapa .t-sub { font-size: 5cqw; line-height: 1.3; margin-top: 4cqw; color: var(--crema); font-weight: 600; }
.tapa .t-ilu { margin-top: auto; height: 34%; position: relative; }
.tapa .t-ilu svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tapa.mini { width: 76px; flex: none; border-radius: 3px; border-width: 1px; box-shadow: 2px 2px 0 var(--carbon); }

/* inicio */
.inicio .tapa { width: 62%; margin: 8px auto 24px; }
.inicio h1 { font-size: 30px; }
.privacidad { display: flex; gap: 12px; align-items: flex-start; background: var(--crema); border: 1px solid var(--oliva);
              border-radius: var(--radio); padding: 12px 14px; margin: 18px 0 0; font-size: 16px; color: var(--carbon); }
.privacidad svg { width: 24px; height: 24px; flex: none; color: var(--olivaOscuro); margin-top: 1px; }

/* preguntas */
.paso { font-family: var(--titulo); font-size: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--olivaOscuro); margin: 4px 0 6px; }
.progreso { height: 8px; background: var(--crema); border: 1px solid var(--oliva); border-radius: 2px; overflow: hidden; margin-bottom: 20px; }
.progreso i { display: block; height: 100%; background: var(--oliva); }
.fila { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--oliva); }
.fila:last-of-type { border-bottom: 0; }
.fila .txt { flex: 1; min-width: 0; }
.fila .txt b { display: block; font-size: 19px; }
.fila .txt span { font-size: 16px; color: var(--olivaOscuro); }
.contador { display: flex; align-items: center; gap: 6px; }
.contador button { width: 52px; height: 52px; border-radius: var(--radio); border: 2px solid var(--carbon); background: var(--crema); color: var(--carbon);
                   font-family: var(--titulo); font-size: 28px; line-height: 1; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.contador button:disabled { border: 2px dashed var(--oliva); color: var(--oliva); background: var(--arena); cursor: default; }
.contador output { min-width: 34px; text-align: center; font-family: var(--titulo); font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tarjeta { background: var(--crema); border: 1px solid var(--oliva); border-radius: var(--radio); padding: 4px 16px; }
.opcion { display: block; width: 100%; text-align: left; background: var(--crema); border: 2px solid var(--oliva); border-radius: var(--radio);
          padding: 16px 18px; margin: 0 0 12px; font: inherit; color: var(--carbon); cursor: pointer; min-height: 72px; }
.opcion b { display: block; font-family: var(--titulo); font-weight: 600; font-size: 21px; color: var(--carbon); }
.opcion span { display: block; font-size: 16px; color: var(--olivaOscuro); margin-top: 2px; }
.opcion .precio { display: inline-block; margin-top: 8px; font-size: 17px; font-weight: 600; color: var(--carbon); background: var(--arena);
                  border-radius: 3px; padding: 2px 10px; }
.opcion[aria-pressed="true"] { border-color: var(--carbon); box-shadow: inset 6px 0 0 var(--amarillo), 3px 3px 0 var(--carbon); }
.opcion[aria-pressed="true"] .precio { background: var(--amarillo); }
.error { color: var(--carbon); font-weight: 600; font-size: 16px; margin-top: 10px; min-height: 24px; }
.error:not(:empty) { background: var(--amarillo); border: 2px solid var(--carbon); border-radius: 3px; padding: 6px 10px; }

/* resultado */
.cab { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.cab h1 { font-size: 28px; margin: 0 0 4px; }
.resumen { font-size: 16px; color: var(--olivaOscuro); margin: 0; }
.bloque { background: var(--crema); border: 1px solid var(--oliva); border-radius: var(--radio); padding: 18px 16px; margin: 0 0 16px; }
.bloque h2 { display: flex; align-items: center; gap: 10px; }
.bloque h2 svg { width: 28px; height: 28px; flex: none; color: var(--olivaOscuro); }
.cifra { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }
.cifra b { font-family: var(--titulo); font-size: 50px; line-height: 1; color: var(--carbon); font-weight: 700; background: var(--amarillo); border-radius: 3px; padding: 2px 10px 4px; }
.cifra span { font-size: 18px; font-weight: 600; }
.cuenta { font-variant-numeric: tabular-nums; background: var(--arena); border-radius: 3px; padding: 8px 12px; font-size: 17px; margin: 0 0 10px; }
.aviso { border-left: 5px solid var(--amarillo); background: var(--arena); border-radius: 0 3px 3px 0; padding: 10px 12px; font-size: 17px; margin: 10px 0 0; }
.luz { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.luz li { background: var(--arena); border-radius: 3px; padding: 10px 12px; font-size: 16px; }
.luz li b { display: block; font-family: var(--titulo); font-size: 32px; color: var(--carbon); font-weight: 700; line-height: 1.1; }

.ronda { margin: 14px 0 6px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-bottom: 2px solid var(--carbon); padding-bottom: 4px; }
.ronda h3 { margin: 0; color: var(--carbon); font-family: var(--titulo); font-weight: 600; font-size: 22px; }
.ronda span { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pasillo { font-family: var(--titulo); font-size: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--olivaOscuro); margin: 14px 0 2px; }
.item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--oliva); cursor: pointer; }
/* casilla propia (la del sistema es blanca y azul): crema con borde carbon; marcada = amarillo con tilde carbon */
.item input { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin: 2px 0 0; flex: none; background: var(--crema);
              border: 2px solid var(--carbon); border-radius: 3px; display: grid; place-content: center; cursor: pointer; }
.item input::before { content: ""; width: 16px; height: 16px; background: var(--carbon); transform: scale(0);
                      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.item input:checked { background: var(--amarillo); }
.item input:checked::before { transform: scale(1); }
.item .nom { flex: 1; font-size: 17px; }
.item .nom em { font-style: normal; font-weight: 600; }
.item .pre { font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--olivaOscuro); text-align: right; }
.item.hecho .nom { text-decoration: line-through; color: var(--oliva); }
.total { display: flex; justify-content: space-between; font-weight: 600; padding: 10px 0 0; font-size: 18px; }

label.campo { display: block; font-weight: 600; font-size: 17px; margin: 14px 0 6px; }
input[type="text"], input[type="tel"], select { width: 100%; min-height: 52px; font: inherit; font-size: 18px; padding: 10px 12px;
     border: 2px solid var(--oliva); border-radius: 4px; background: var(--crema); color: var(--carbon); }
input[type="text"]:focus, input[type="tel"]:focus, select:focus { border-color: var(--carbon); outline: none; box-shadow: 0 0 0 3px var(--amarillo); }
.nombres { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rol { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; padding: 6px 0; }
.rol span { font-size: 17px; }
ol.hora { margin: 6px 0 0; padding-left: 24px; }
ol.hora li { margin-bottom: 6px; }
.acciones .btn { margin-top: 10px; }
.pie { font-size: 16px; color: var(--olivaOscuro); margin-top: 22px; border-top: 1px solid var(--oliva); padding-top: 14px; }

/* ===================== impresion A4 ===================== */
/* margen 0 y el margen de 14 mm adentro de la hoja. Papel BLANCO (#FFFFFF) solo en la hoja de impresion: no gasta tinta al imprimir en casa (decision 10-11 22:58); la pantalla sigue con los 6 tokens */
@page { size: A4; margin: 0; }
@media print {
  html, body { background: #FFFFFF; font-size: 11pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #app { display: none !important; }
  #impresion { display: block !important; color: var(--carbon); }
  .hoja { break-after: page; page-break-after: always; padding: 14mm; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .hoja:last-child { break-after: auto; page-break-after: auto; }
}
.i-cab { display: flex; gap: 7mm; align-items: stretch; margin-bottom: 6mm; }
.i-cab .tapa { width: 46mm; flex: none; box-shadow: none; border-radius: 1mm; border-width: .35mm; }
.i-cab .t-der { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.i-cab h1 { font-size: 24pt; margin: 0 0 2mm; }
.i-cab p { margin: 0 0 1.5mm; font-size: 11pt; color: var(--carbon); }
#impresion .etiqueta { font-size: 9pt; }
.i-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm; margin-bottom: 5mm; }
.i-cifras div { border: .35mm solid var(--oliva); border-radius: 1.2mm; padding: 3mm; background: var(--arena); }
.i-cifras b { display: block; font-family: var(--titulo); font-size: 20pt; color: var(--carbon); font-weight: 700; line-height: 1.1; }
.i-cifras span { font-size: 9.5pt; display: block; }
.i-cifras small { display: block; font-size: 8.5pt; color: var(--olivaOscuro); margin-top: 1mm; }
#impresion h2 { font-size: 15pt; margin: 4mm 0 2mm; }
#impresion h3 { font-size: 11.5pt; margin: 3mm 0 1mm; }
.i-lista { column-count: 2; column-gap: 7mm; font-size: 10pt; }
.i-lista .i-pas { font-family: var(--titulo); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 8.5pt; color: var(--olivaOscuro); margin: 2.5mm 0 .8mm; break-after: avoid; }
.i-lista .i-it { display: flex; gap: 2mm; padding: .9mm 0; border-bottom: .2mm dashed var(--oliva); break-inside: avoid; }
.i-lista .i-it i { width: 3.6mm; height: 3.6mm; border: .4mm solid var(--carbon); border-radius: .6mm; flex: none; margin-top: .4mm; }
.i-lista .i-it span { flex: 1; }
.i-lista .i-it em { font-style: normal; white-space: nowrap; color: var(--carbon); }
.i-ronda { display: flex; justify-content: space-between; border-bottom: .5mm solid var(--carbon); margin: 4mm 0 1mm; padding-bottom: 1mm; font-weight: 600; break-after: avoid; }
.i-ronda b { font-family: var(--titulo); color: var(--carbon); font-size: 13pt; font-weight: 600; }
.i-nota { font-size: 8.5pt; color: var(--olivaOscuro); margin-top: 2mm; }
.i-pie { font-size: 8pt; color: var(--olivaOscuro); border-top: .3mm solid var(--oliva); padding-top: 2mm; margin-top: 5mm; }
.nevera { border: .7mm solid var(--carbon); border-radius: 1.6mm; padding: 8mm 9mm; height: 264mm; overflow: hidden; display: flex; flex-direction: column; }
.nevera h1 { font-size: 26pt; margin: 0 0 1mm; }
.nevera .sub { font-size: 11pt; color: var(--carbon); margin-bottom: 3mm; }
.nevera ol { font-size: 12pt; padding-left: 7mm; margin: 0 0 2mm; }
.nevera ol li { margin-bottom: 1mm; }
.nevera table { width: 100%; border-collapse: collapse; font-size: 12pt; margin-bottom: 2mm; }
.nevera td { border-bottom: .3mm solid var(--oliva); padding: 1.7mm 1mm; vertical-align: bottom; }
.nevera td:first-child { width: 48%; font-weight: 600; }
.nevera .linea { display: inline-block; min-width: 60mm; border-bottom: .3mm solid var(--carbon); }
.nevera .grande { font-size: 15pt; font-weight: 600; }
.nevera p.grande { margin: 0 0 2.2mm; }
.nevera .abajo { margin-top: auto; display: flex; justify-content: space-between; font-size: 9pt; color: var(--olivaOscuro); }
/* hoja de la heladera: que entre en una A4 con 6 roles */
#impresion .nevera h2 { font-size: 13pt; margin: 3.2mm 0 1.4mm; }