/* Constante · estilos de Mi caja, el acceso, «Tu cuenta», el panel, las páginas legales y la 404. Va después de fuentes.css,
   que define las tres letras de la web (--f-titulo, --f-texto y --f-cifra), y de tema.css, que define los colores en claro
   y en oscuro: los mismos de la portada. Aquí no se escribe ningún color a mano. La cabecera está aparte, en cabecera.css
   (la comparte la calculadora, que no carga este archivo). Casi al final van los estados de todo lo que se pulsa (pasar el
   ratón, pulsar, foco con el teclado y desactivado) y, lo último, el PDF (@media print), que manda sobre lo de pantalla. */
:root{--r-sm:8px;--r-md:12px;--r-lg:16px}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
body{background:var(--papel);color:var(--tinta);font-family:var(--f-texto);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2{font-family:var(--f-titulo);text-wrap:balance}
p{text-wrap:pretty}
/* Enlaces de texto, como en la portada: --tinta con subrayado --verde de 1,5 px. Al pasar el ratón, --verde (al final, en «Estados»). */
a{color:var(--tinta);text-decoration-color:var(--verde);text-decoration-thickness:1.5px;text-underline-offset:3px}
.wrap{max-width:880px;margin:0 auto;padding:0 24px 80px}
:focus-visible{outline:2.5px solid var(--verde);outline-offset:3px}
a:focus-visible,.enlace:focus-visible,summary:focus-visible{border-radius:4px}
/* La cabecera (marca, pestañas, botón «Modo oscuro» y menú de usuario) está en css/cabecera.css: la comparte la calculadora. */
h1{font-weight:800;font-size:clamp(32px,5vw,46px);line-height:1.05;letter-spacing:-.03em;margin:8px 0 12px}
.lead{font-size:17px;color:var(--tinta-2);max-width:60ch;margin-bottom:24px}
/* Tarjeta: el papel blanco donde se trabaja (cada paso de Mi caja, la devolución, el historial). Sin sombra, como en la portada. */
.card{background:var(--hoja);border:1px solid var(--linea);border-radius:var(--r-lg);padding:32px;margin-bottom:24px}
h2{font-weight:700;font-size:22px;line-height:1.25;letter-spacing:-.015em;margin-bottom:6px}
h3{font-size:16px;font-weight:650;margin:20px 0 4px}
.hint{font-size:13.5px;color:var(--tinta-2);margin-bottom:14px}
.small{font-size:14.5px;color:var(--tinta-2)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.row.r3{grid-template-columns:repeat(3,minmax(0,1fr))}
label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
input,textarea,select{width:100%;background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-sm);padding:10px 12px;font-family:var(--f-texto);font-size:15px;color:var(--tinta);transition:border-color .15s,box-shadow .15s}
select{cursor:pointer}
input::placeholder,textarea::placeholder{color:var(--tinta-3);opacity:1}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px color-mix(in srgb,var(--verde) 20%,transparent)}
textarea{font-family:var(--f-cifra);font-size:13.5px;min-height:150px;resize:vertical;white-space:pre}
.campo{margin-bottom:14px}
.campo .msg{font-size:13px;margin-top:4px}
.campo .msg:empty{display:none}
.campo.err input,.campo.err textarea{border-color:var(--rojo);background:var(--rojo-suave)}
.campo.err input::placeholder,.campo.err textarea::placeholder{color:var(--tinta-2)}   /* sobre el fondo rojizo, el gris de los ejemplos (--tinta-3) no llega a AA */
.campo.err .msg{color:var(--rojo);font-weight:600}
.campo.aviso .msg{color:var(--ambar);font-weight:600}
.campo.bien .msg{color:var(--verde);font-weight:600}
.fijos{display:grid;grid-template-columns:1.4fr 1fr .7fr;gap:10px;align-items:start}
.fijos .lab{font-size:14.5px;font-weight:600;padding-top:10px}
.lbl{font-size:13.5px;font-weight:600}
/* Asistente */
.progreso{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:0 0 18px}
.progreso button{width:100%;text-align:left;background:none;border:none;border-top:3px solid var(--linea);padding:8px 2px 0;font-family:var(--f-texto);font-size:13px;color:var(--tinta-3);transition:color .2s,border-color .2s,transform .15s}
.progreso .num{font-variant-numeric:tabular-nums;font-weight:700;margin-right:5px}
.progreso .hecho button{border-top-color:var(--verde);color:var(--tinta-2);cursor:pointer}
.progreso .actual button{border-top-color:var(--tinta);color:var(--tinta);font-weight:600}
.nav-pasos{display:flex;justify-content:space-between;gap:12px;margin:0 0 8px}
.nav-pasos .der{display:flex;gap:10px;margin-left:auto}
.btn{display:inline-block;background:var(--tinta);color:var(--sobre-tinta);border:none;border-radius:var(--r-sm);font-family:var(--f-texto);font-weight:650;font-size:15px;padding:13px 24px;cursor:pointer;text-decoration:none;transition:transform .15s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease}
.btn.sec{background:var(--hoja);color:var(--tinta);border:1px solid var(--linea)}
.btn.mini{padding:9px 16px;font-size:14px}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
/* Cuestionario del piloto (al final del resultado de Mi caja) */
.encuesta fieldset{border:none;margin:0 0 18px;padding:0;min-width:0}
.encuesta legend{font-weight:600;font-size:15px;margin-bottom:10px;padding:0}
.encuesta .opciones{display:flex;flex-wrap:wrap;gap:8px}
.encuesta .opcion{position:relative;cursor:pointer}
.encuesta .opcion input{position:absolute;opacity:0;width:1px;height:1px}
.encuesta .opcion span{display:inline-block;border:1px solid var(--linea);border-radius:999px;padding:8px 14px;font-size:14.5px;background:var(--hoja);transition:border-color .2s,background .2s}
.encuesta .opcion input:checked + span{border-color:var(--verde);background:var(--verde-suave);color:var(--verde);font-weight:600}
.encuesta .opcion input:focus-visible + span{outline:2px solid var(--verde);outline-offset:2px}
.encuesta .pregunta.err .opcion span{border-color:var(--rojo)}
.encuesta textarea.libre{font-family:inherit;font-size:15px;min-height:96px;white-space:pre-wrap}
.enlace{background:none;border:none;color:var(--tinta);font-weight:600;text-decoration:underline;text-decoration-color:var(--verde);text-decoration-thickness:1.5px;text-underline-offset:3px;cursor:pointer;font-size:inherit;padding:0;font-family:inherit;transition:color .2s}
.privacy{font-size:13px;color:var(--tinta-3);margin-top:12px}
.cfgnota{font-size:13.5px;color:var(--tinta-2);background:var(--papel-2);border-radius:var(--r-sm);padding:10px 14px;margin-bottom:16px}
/* Carga de archivos */
.drop{display:block;width:100%;border:2px dashed var(--linea);border-radius:var(--r-md);background:var(--papel);padding:18px;text-align:center;cursor:pointer;margin-bottom:12px;font-family:var(--f-texto);font-size:14.5px;color:var(--tinta-2);transition:border-color .2s,background-color .2s,transform .15s}
.drop.over{border-color:var(--verde);background:var(--hoja)}   /* arrastrando un archivo encima */
.drop b{color:var(--tinta)}
.drop .fmt{display:block;font-size:13px}
/* Gastos fijos y pagos puntuales desde un Excel: la misma zona, más baja, para no tapar los campos de debajo */
.drop .fmt-g{display:block;font-size:13px}
.drop-mini{padding:12px;margin-bottom:6px}
.carga-gastos{margin-bottom:14px}
.carga-gastos .small{margin-top:0}
.carga-gastos textarea{min-height:90px}
.resumen{font-size:13.5px;margin-top:6px}
.resumen .ok{color:var(--verde);font-weight:600}
.resumen .mal{color:var(--rojo)}
.resumen .mal ul{margin:4px 0 0 18px}
.resumen .av{color:var(--ambar);font-weight:600;margin-top:4px}
.nota-imp{color:var(--tinta-2);margin-bottom:4px;overflow-wrap:anywhere}   /* el nombre del archivo puede ser una palabra muy larga */
.err-txt{color:var(--rojo);font-weight:600}
.mapeo{border:1px solid var(--linea);border-radius:var(--r-md);padding:18px;margin-bottom:12px;background:var(--hoja)}
.mapeo h3{margin-top:0;overflow-wrap:anywhere}
.mapgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0}
.mapgrid select{font-size:14px;padding:8px}
/* La muestra de las primeras filas (en .scroll): si no cabe en el móvil, se desliza dentro del recuadro, no la página.
   El margen va en el recuadro, no en la tabla: así se junta con el de los botones, como antes. */
.mapeo .scroll{margin-bottom:12px}
.prev{width:100%;border-collapse:collapse;font-size:13.5px}
.prev th{text-align:left;color:var(--tinta-2);padding:6px 8px;border-bottom:1px solid var(--linea)}
.prev td{padding:6px 8px;border-bottom:1px solid var(--linea-2)}
.prev .q{color:var(--rojo);font-weight:600}
/* Préstamos y pagos puntuales. Cada uno, separado del anterior por una línea (sin recuadro). «Quitar» va arriba a la
   derecha de su fila, en la línea de las etiquetas: así los campos usan todo el ancho y el anillo del foco rodea solo el botón.
   Las piezas se colocan a mano (fila y columna) porque «Quitar» comparte casilla con la última etiqueta. */
.item,.punt-row,.otro-row{border-top:1px solid var(--linea-2);padding-top:16px;margin-bottom:4px}
.item textarea{min-height:110px}
.item-top,.g4,.g3p{display:grid;gap:10px;align-items:start}
.item-top{grid-template-columns:1.6fr 1.2fr}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3p{grid-template-columns:1.4fr 1fr 1fr}
.item-top > .campo:first-child,.g3p > .campo:first-child{grid-row:1;grid-column:1}
.item-top > .campo:nth-child(2),.g3p > .campo:nth-child(2){grid-row:1;grid-column:2}
.g3p > .campo:nth-child(3){grid-row:1;grid-column:3}
.lb{display:block;font-size:13px;font-weight:600;margin:0}
.lb input,.lb select,.lb textarea{margin-top:4px}
/* «Quitar»: alto de línea de las etiquetas (13 px × 1,6) para quedar a su altura */
.quitar{grid-row:1;grid-column:-2;justify-self:end;align-self:start;position:relative;background:none;border:none;color:var(--rojo);font-family:var(--f-texto);font-weight:600;cursor:pointer;font-size:13.5px;line-height:20.8px;padding:0 2px;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1.5px;text-underline-offset:3px;transition:text-decoration-color .2s,transform .15s}
/* Resultado */
.barra-res{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px;margin:4px 0 18px}
.h-res{font-size:clamp(28px,4vw,38px);margin:0 0 6px}
.acciones{display:flex;gap:10px 16px;flex-wrap:wrap;align-items:center}
/* «Editar datos» (o «Volver a mi caja») es un enlace; «Guardar PDF» y «Exportar a Excel», botones */
.acciones .enlace{font-size:14.5px}
.demo{display:inline-block;background:var(--papel-2);color:var(--tinta-2);font-size:12px;font-weight:600;line-height:1.5;border-radius:4px;padding:1px 7px}   /* chip rectangular, como los de la portada */
.headline{font-family:var(--f-titulo);font-weight:700;font-size:clamp(24px,3.4vw,30px);line-height:1.18;letter-spacing:-.02em;margin-bottom:10px;text-wrap:balance}
.headline b{font-weight:800}
.headline-sub{font-size:17px;color:var(--tinta);margin:-4px 0 12px;line-height:1.5}
.headline.ok b{color:var(--verde)} .headline.warn b{color:var(--ambar)} .headline.crit b{color:var(--rojo)}
/* Cifras dentro de una frase: la misma letra del texto, con números de ancho fijo. La de máquina de escribir (--f-cifra)
   queda para las tablas, los recuadros de cifras y los gráficos, como en la portada. */
.n{font-variant-numeric:tabular-nums;font-weight:650;white-space:nowrap}
.chart{width:100%;height:auto;display:block;margin-top:6px}
/* Gráfico de Mi caja, como el de la portada (css/portada.css): ui.js pone las clases y aquí van los colores de tema.css (en
   oscuro y en el PDF, los de cada modo), los grosores y las letras. Las etiquetas llevan detrás el color de la hoja (.g-fondo)
   y van donde no las cruza ninguna línea. En el móvil (.g-movil) el gráfico es más estrecho y la letra, algo mayor. */
.chart .g-rejilla{stroke:var(--linea-2);stroke-width:1}
.chart .g-cero{stroke:var(--tinta-3);stroke-width:1.2}
.chart .g-txt,.chart .g-eje-y{fill:var(--tinta-3);font-family:var(--f-cifra);font-size:11px}   /* fechas y cifras del eje */
.chart .g-zona{fill:var(--zona)}
.chart .g-zona-txt{fill:var(--tinta-3);font-size:12px;font-weight:600}
.chart .g-colchon{stroke:var(--ambar);stroke-width:1.6;stroke-dasharray:6 5;fill:none}
.chart .g-colchon-txt{fill:var(--ambar);font-size:12px;font-weight:700;stroke:var(--hoja);stroke-width:4;paint-order:stroke}
.chart .g-linea{fill:none;stroke:var(--tinta);stroke-width:2.6;stroke-linejoin:round}
.chart .g-resto{fill:none;stroke:var(--tinta-3);stroke-width:1.8;stroke-dasharray:2 4;stroke-linecap:round}
.chart .g-cobro{fill:none;stroke:var(--verde);stroke-width:2;stroke-dasharray:5 4;stroke-linejoin:round}
.chart .g-rojo{fill:var(--rojo);opacity:.17}
.chart .g-punto{stroke:var(--hoja);stroke-width:2.5}
.chart .g-punto.crit{fill:var(--rojo)} .chart .g-punto.warn{fill:var(--ambar)} .chart .g-punto.ok{fill:var(--verde)}
.chart .g-fondo{fill:var(--hoja);opacity:.92}
.chart .g-txt-min{font-family:var(--f-cifra);font-size:12.5px;font-weight:600}
.chart .g-txt-min.crit{fill:var(--rojo)} .chart .g-txt-min.warn{fill:var(--ambar)} .chart .g-txt-min.ok{fill:var(--verde)}
.chart .g-hoy{fill:var(--tinta);stroke:var(--hoja);stroke-width:2.5}
.chart .g-ley{fill:var(--tinta-2);font-size:12px}
.chart.g-movil .g-txt,.chart.g-movil .g-eje-y,.chart.g-movil .g-ley{font-size:12.5px}
.chart.g-movil .g-zona-txt,.chart.g-movil .g-colchon-txt{font-size:13px}
.chart.g-movil .g-txt-min{font-size:13.5px}
/* Un punto en cada día en que el saldo sube o baja (hueco, como el de hoy pero más pequeño) y, al señalarlo, un aro y el recuadro
   con lo que entra y sale ese día (.g-tip). La zona que se señala es algo mayor que el punto, para acertar con el dedo. */
.chart .g-mov{fill:var(--hoja);stroke:var(--tinta);stroke-width:2}
.chart .g-mov-resto{stroke:var(--tinta-3)}
.chart .g-mov-zona{fill:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.chart .g-mov-zona.activo{stroke:var(--tinta);stroke-width:1.5}
.g-tip{position:fixed;z-index:20;width:max-content;max-width:min(300px,calc(100vw - 16px));background:var(--hoja);border:1px solid var(--linea);border-radius:var(--r-sm);box-shadow:var(--sombra);padding:10px 12px;font-size:13px;line-height:1.45;pointer-events:none}
.g-tip-f{font-weight:600;color:var(--tinta);margin-bottom:4px}
.g-tip ul{list-style:none;margin:0;padding:0}
.g-tip li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:1px 0;color:var(--tinta-2)}
.g-tip b{font-family:var(--f-cifra);font-weight:600;color:var(--tinta);white-space:nowrap}
.g-tip b.sube{color:var(--verde)}
.g-tip-s{margin-top:6px;padding-top:6px;border-top:1px solid var(--linea-2);color:var(--tinta-2)}
/* Gráficos guardados en el historial antes de octubre de 2026: llevan las letras y los colores escritos en el SVG.
   En SVG el CSS gana a esos atributos, así que aquí se cambian por los de ahora y también siguen al modo oscuro. */
.chart [font-family^="PT Sans"]{font-family:var(--f-texto)}
.chart [font-family^="PT Mono"]{font-family:var(--f-cifra)}
.chart [fill="#EDE6D6"]{fill:var(--zona);opacity:1}
.chart [stroke="#EDE6D6"]{stroke:var(--linea-2)}
.chart [fill="#4A4640"]{fill:var(--tinta-2)}
.chart [fill="#2B2A28"]{fill:var(--tinta)}
.chart [stroke="#6B655A"]{stroke:var(--tinta-3)}
.chart [stroke="#A9812E"]{stroke:var(--ambar)}
.chart [fill="#A9812E"],.chart [fill="#7F611E"]{fill:var(--ambar)}
.chart [stroke="#1F3352"]{stroke:var(--tinta)}
.chart [stroke="#3B6E4F"]{stroke:var(--verde)}
.chart [stroke="#8B98AE"]{stroke:var(--tinta-3)}
.chart [fill="#7A2E2E"]{fill:var(--rojo)}
.chart [stroke="#fff"]{stroke:var(--hoja)}
.nota{font-size:13px;color:var(--tinta-2);margin-top:10px}
.lever{background:var(--papel);border-radius:var(--r-sm);padding:14px 18px;margin-top:12px}   /* solo en chequeos guardados con versiones antiguas */
.lever.comb{background:var(--verde-suave)}
ul.cli{list-style:none;margin-top:6px}
ul.cli li{padding:12px 0;border-bottom:1px solid var(--linea-2)}
ul.cli li:last-child{border-bottom:none}
.cn{font-weight:600;font-size:16px}
.cd{font-size:14.5px;color:var(--tinta-2)}
.flag{color:var(--rojo);font-weight:600}
.cambios{margin-bottom:6px}
.cambios p{margin-bottom:10px}
.cambios p:last-child{margin-bottom:0}
.hallazgo{border-top:1px solid var(--linea-2);padding:14px 0 2px}
.hallazgo:not(.hallazgo + .hallazgo){margin-top:14px}
/* Cada hallazgo, separado por una línea; su estado, en un chip rectangular a la derecha del título, como los de la portada */
.hallazgo h3{margin:0 0 4px;font-size:15.5px;display:flex;justify-content:space-between;align-items:baseline;gap:4px 14px}
.hallazgo .est{flex:none;font-family:var(--f-texto);font-size:12px;font-weight:600;line-height:1.5;padding:1px 7px;border-radius:4px;background:var(--papel-2);color:var(--tinta-2);white-space:nowrap}
.h-crit .est{background:var(--rojo-suave);color:var(--rojo)}
.h-warn .est{background:var(--ambar-suave);color:var(--ambar)}
.h-ok .est{background:var(--verde-suave);color:var(--verde)}
.hallazgo .acc{font-size:14.5px;margin-top:8px}
.hallazgo .nota{margin-top:6px}
.tabla-h{width:100%;border-collapse:collapse;font-size:14.5px}
.tabla-h th{text-align:left;font-size:13px;color:var(--tinta-2);padding:8px;border-bottom:1px solid var(--linea);white-space:nowrap}
.tabla-h td{padding:10px 8px;border-bottom:1px solid var(--linea-2)}
.tabla-h td.n{white-space:nowrap;font-family:var(--f-cifra);font-weight:400;font-size:14px}
.scroll{overflow-x:auto}
/* La previsión semana a semana, plegada bajo el gráfico: se abre con un enlace como los de la web y una flecha --verde */
.semanas-res{margin-top:14px;padding-top:12px;border-top:1px solid var(--linea-2)}
.semanas-res summary{display:inline-flex;align-items:center;gap:10px;cursor:pointer;list-style:none;font-weight:600;font-size:14.5px;text-decoration:underline;text-decoration-color:var(--verde);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color .2s}
.semanas-res summary::-webkit-details-marker{display:none}
.semanas-res summary::before{content:'';width:6px;height:6px;border-right:2px solid var(--verde);border-bottom:2px solid var(--verde);transform:rotate(-45deg);transition:transform .2s}
.semanas-res[open] summary::before{transform:rotate(45deg) translate(-2px,-2px)}
.semanas-res .scroll{margin-top:10px}
.semanas-res th{white-space:normal;vertical-align:bottom}
.semanas-res th:not(:first-child),.semanas-res td.n{text-align:right}
.semanas-res td:first-child{white-space:nowrap}
.semanas-res .gris td{color:var(--tinta-3)}
.semanas-res td.warn{color:var(--ambar);font-weight:600} .semanas-res td.crit{color:var(--rojo);font-weight:600}
@media(max-width:620px){
  .row,.row.r3{grid-template-columns:1fr;gap:0}
  .mapgrid,.g4,.g3p{grid-template-columns:repeat(2,minmax(0,1fr))}
  .progreso .txt{display:none}
  .fijos{grid-template-columns:1fr 1fr .7fr}
  /* Préstamo: nombre y tipo de cuota uno debajo del otro. Pago puntual: el concepto a todo el ancho (cabe el ejemplo
     «ej. IVA 3T (modelo 303)») y debajo importe y fecha. «Quitar», en la línea de la primera etiqueta. */
  .item-top{grid-template-columns:minmax(0,1fr)}
  .item-top > .campo:nth-child(2){grid-row:2;grid-column:1}
  .g3p > .campo:first-child{grid-column:1 / -1}
  .g3p > .campo:nth-child(2){grid-row:2;grid-column:1}
  .g3p > .campo:nth-child(3){grid-row:2;grid-column:2}
}
/* Pantallas de menos de 375 px: los campos de préstamos y pagos puntuales, uno debajo de otro, para que las fechas no se corten */
@media(max-width:374px){
  .g4,.g3p{grid-template-columns:minmax(0,1fr)}
  .g3p > .campo:nth-child(2){grid-row:2;grid-column:1}
  .g3p > .campo:nth-child(3){grid-row:3;grid-column:1}
}
html.boot body{visibility:hidden}
.sub-lab{display:block;font-size:12.5px;font-weight:400;color:var(--tinta-3)}
/* Calculadora dentro de Mi caja: el marco sobresale 6 px por cada lado y la calculadora deja 6 px dentro, para que el anillo
   del foco no se corte en el borde. El contenido queda exactamente donde estaba. */
#marco-calc{display:block;width:calc(100% + 12px);margin:-6px -6px 0;border:0;min-height:600px}
.pie-res{font-size:12.5px;color:var(--tinta-3);margin:6px 2px 0}
.aviso-res{background:var(--ambar-suave);border:1px solid color-mix(in srgb,var(--ambar) 22%,var(--ambar-suave));border-radius:var(--r-sm);padding:10px 14px;font-size:14.5px;margin:0 0 14px}
.aviso-version{margin:-4px 0 10px}
/* Una sola hoja (.una-hoja: la devolución y «Tu cuenta»): sus tarjetas seguidas se juntan en una, con cada parte separada
   de la anterior por una línea, como la devolución de la portada. En la devolución vale también para los chequeos guardados. */
.una-hoja > .card{margin:0;border-radius:0;border-width:0 1px;padding:32px 36px}
.una-hoja > .card:not(.card + .card){border-top-width:1px;border-radius:var(--r-lg) var(--r-lg) 0 0}
.una-hoja > .card + .card{border-top:1px solid var(--linea)}
.una-hoja > .card:not(:has(+ .card)){border-bottom-width:1px;border-bottom-left-radius:var(--r-lg);border-bottom-right-radius:var(--r-lg);margin-bottom:20px}
.una-hoja > .card > h2{margin-bottom:10px}
/* Devolución: resumen, qué pasó, qué va a pasar, qué hacer. El resumen va arriba, sobre un fondo apenas más oscuro, como la
   cabecera de la tarjeta de la portada. */
.resumen-card{background:color-mix(in srgb,var(--papel) 55%,var(--hoja))}
.rs{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--linea-2)}
.rs:last-child{border-bottom:none}
.rs-l{font-size:13px;font-weight:600;color:var(--tinta-2);padding-top:2px}
@media(max-width:620px){.rs{grid-template-columns:1fr;gap:2px}}
/* Recuadro de cifras: una rejilla separada por líneas, como el de la portada (sin cajas dentro de la hoja) */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--linea-2);border-radius:var(--r-md);margin:12px 0 20px}
.tile{padding:12px 16px;min-width:0;border-top:1px solid var(--linea-2);border-left:1px solid var(--linea-2)}
.tile:nth-child(3n+1){border-left:0}
.tile:nth-child(-n+3){border-top:0}
@media(max-width:620px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile:nth-child(3n+1){border-left:1px solid var(--linea-2)}
  .tile:nth-child(2n+1){border-left:0}
  .tile:nth-child(3){border-top:1px solid var(--linea-2)}
  .tile{padding:10px 12px}
}
.tile-l{font-size:12.5px;font-weight:600;color:var(--tinta-2)}
.tile-v{font-family:var(--f-cifra);font-variant-numeric:tabular-nums;font-weight:600;font-size:19px;letter-spacing:-.02em;white-space:nowrap;margin:2px 0}
.tile-s{font-size:12.5px;color:var(--tinta-3)}
.rec{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--linea-2)}
.rec:last-child{border-bottom:none}
.rec-n{width:30px;height:30px;border-radius:50%;background:var(--tinta);color:var(--sobre-tinta);font-size:14.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.rec-c h3{margin:3px 0 6px;font-size:17px}
.rec-c p{margin-bottom:6px}
.rec-l{font-weight:600}
.rec ul.cli li{padding:8px 0}
.ayuda{font-size:12.5px;color:var(--tinta-3);margin-top:4px}
.paso-movil,.solo-movil{display:none}
/* Móvil */
@media(max-width:620px){
  .wrap{padding:0 18px 40px}
  input,select,textarea{font-size:16px}              /* evita que el iPhone amplíe la pantalla al tocar un campo */
  h1{font-size:34px}
  .card{padding:22px 18px;margin-bottom:20px}
  .una-hoja > .card{padding:24px 18px}
  .progreso{margin-bottom:6px}
  .paso-movil{display:block;font-size:14px;font-weight:600;color:var(--tinta);margin-bottom:14px}
  .solo-escritorio{display:none}
  .solo-movil{display:inline}
  .drop{padding:16px}
  .fijos-cab{display:none}
  .fijos{grid-template-columns:1fr .55fr;gap:8px}
  .fijos .lab{grid-column:1/-1;padding-top:6px}
  .nav-pasos{position:sticky;bottom:0;z-index:5;background:var(--papel);margin:0 -18px;padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--linea)}
  .nav-pasos .btn{padding:13px 20px}
  .nav-pasos .der{flex:1;justify-content:flex-end}
  .nav-pasos .der .btn{flex:1}
  .barra-res{flex-direction:column}
  /* «Editar datos» arriba; «Guardar PDF» y «Exportar a Excel», debajo, mitad y mitad y cada uno en una línea */
  .acciones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px;width:100%}
  .acciones .enlace{grid-column:1 / -1;justify-self:start}
  .acciones .btn{padding-inline:10px;white-space:nowrap;text-align:center}
  .headline{font-size:25px}
  .headline-sub{font-size:16px}
  .rec{grid-template-columns:28px 1fr;gap:10px}
  .rec-n{width:26px;height:26px;font-size:14px}
  #asistente.avanzado > h1,#asistente.avanzado > .lead{display:none}
}
/* Modo invitado (el ejemplo sin cuenta) */
.banner-invitado{background:var(--ambar-suave);border:1px solid color-mix(in srgb,var(--ambar) 22%,var(--ambar-suave));border-radius:var(--r-sm);padding:10px 14px;font-size:14.5px;margin:0 0 16px}
.banner-invitado a{color:var(--tinta);font-weight:600;text-decoration-color:var(--verde);text-decoration-thickness:1.5px;text-underline-offset:3px}
body.invitado .solo-cuenta,body.invitado .tabs{display:none!important}

/* Estados de todo lo que se pulsa, en el lenguaje de la portada (css/portada.css).
   Al pasar el ratón: solo con ratón, porque en el móvil el efecto se quedaría pegado tras tocar. Al pulsar: se hunde un poco
   (.98 los botones; .96 las pestañas y los botones pequeños; casi nada las zonas grandes). Con el teclado: el anillo
   --verde de :focus-visible (arriba); los campos se marcan con su borde y su halo --verde. */
.btn,.drop,.quitar,.progreso button{-webkit-tap-highlight-color:transparent}   /* las pestañas, en css/cabecera.css */
@media (hover:hover){
  .btn:hover:not(:disabled){box-shadow:0 8px 22px -10px var(--tinta);transform:translateY(-1px)}
  .btn.sec:hover:not(:disabled){background:var(--papel-2);border-color:var(--tinta-3);box-shadow:none}   /* en oscuro --hoja y --papel-2 casi no se distinguen: el borde también cambia */
  a:not(.btn,.tab,.brand):hover,.enlace:hover:not(:disabled){color:var(--verde)}
  .drop:hover{border-color:var(--verde);background:var(--hoja)}
  .progreso .hecho button:hover{color:var(--tinta)}
  .progreso .hecho button:hover .txt{text-decoration:underline;text-decoration-color:var(--verde);text-decoration-thickness:1.5px;text-underline-offset:3px}
  .quitar:hover{text-decoration-color:var(--rojo)}
  .semanas-res summary:hover{color:var(--verde)}
}
.btn:active:not(:disabled){transform:translateY(0) scale(.98)}
.btn.mini:active:not(:disabled),.quitar:active,.progreso .hecho button:active{transform:scale(.96)}
.drop:active{transform:scale(.995)}
/* Casillas: su color y el mismo anillo que el resto (el halo de los campos no se ve bien en una casilla) */
input[type="checkbox"]{accent-color:var(--verde);cursor:pointer}
input[type="checkbox"]:focus{box-shadow:none}
input[type="checkbox"]:focus-visible{outline:2.5px solid var(--verde);outline-offset:3px}
label:has(> input[type="checkbox"]){cursor:pointer}
/* «Tengo inventario»: la casilla y su texto en una línea (el paso 5 solo pide el stock a quien lo tiene) */
.chk{display:flex;align-items:center;gap:10px;font-weight:600;margin:6px 0 10px}
.chk input{width:auto;margin:0}
/* Desactivado. En esta web un botón solo se desactiva mientras trabaja («Exportar a Excel» preparando el archivo, «Crear mi cuenta»
   creándola…). Los pasos de Mi caja que aún no tocan van en gris y no se pueden pulsar. */
.btn:disabled,.btn.sec:disabled,.btn.rojo:disabled{background:transparent;color:var(--tinta-3);box-shadow:inset 0 0 0 1px var(--linea);cursor:progress}   /* el borde, por dentro: no cambia de tamaño */
.btn.sec:disabled{box-shadow:none;border-color:var(--linea)}
.enlace:disabled{color:var(--tinta-3);text-decoration-color:var(--linea);cursor:progress}
.progreso button:disabled{cursor:not-allowed}
.progreso .actual button{cursor:default}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .btn,.drop,.quitar,.progreso button{transform:none!important}
}
/* PDF (Guardar PDF = imprimir): siempre en colores claros, aunque esté puesto el modo oscuro (tema.css solo lo aplica en pantalla).
   Va al final para mandar sobre las reglas de pantalla.
   Solo los bloques pequeños no se parten; las tarjetas grandes sí, para no dejar páginas casi en blanco. */
@media print{
  body{background:var(--hoja)} #asistente,.acciones,.no-print,.banner-invitado{display:none!important}
  .card{border-color:var(--linea);padding:18px 20px;margin-bottom:12px} .wrap{max-width:none;padding:0}
  /* La devolución, sin marco: solo las líneas entre sus partes */
  .una-hoja > .card,.una-hoja > .card:not(.card + .card),.una-hoja > .card:not(:has(+ .card)){border-width:0;border-radius:0;background:none;padding:16px 0;margin:0}
  .una-hoja > .card + .card{border-top-width:1px}
  /* El navegador quita los fondos al imprimir. Los chips, el resumen y los números de «Qué hacer» los conservan, para que el
     PDF se lea como la pantalla; el resto de la página sigue en blanco. */
  .hallazgo .est,.demo,.rec-n,.resumen-card{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .una-hoja > .card.resumen-card:not(.card + .card){background:color-mix(in srgb,var(--papel) 55%,var(--hoja));border-radius:var(--r-md);padding:14px 18px 6px;margin-bottom:14px}
  .una-hoja > .resumen-card + .card{border-top-width:0}
  .rs,.tiles,.hallazgo,.rec,.chart,.headline,.headline-sub,ul.cli li,.cambios p{break-inside:avoid}
  h2,h3,.card > .hint{break-after:avoid}
}