/* Mapa del Dinero · Money Coach — diagnóstico previo
   Identidad sobria: tinta casi negra, dorado como acento, papel cálido. */

:root {
  --tinta: #0a0a0a;
  --tinta-suave: #4a4742;
  --tinta-tenue: #6f6a62;
  --papel: #faf8f4;
  --tarjeta: #ffffff;
  --linea: #e4dfd5;
  --dorado: #c9a84c;
  --dorado-texto: #7a5c12;
  --dorado-fondo: #fbf4e2;
  --negativo: #9a2d1f;
  --negativo-fondo: #fbeeec;
  --ok: #2f6b45;
  --radio: 10px;
  --fuente-titulo: Georgia, 'Times New Roman', serif;
  --fuente-cuerpo: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente-cuerpo);
  font-size: 17px;
  line-height: 1.55;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.salto {
  position: absolute; left: -9999px; top: 0;
  background: var(--tinta); color: #fff; padding: .75rem 1rem; z-index: 10;
}
.salto:focus { left: 0; }

/* ------------------------------ estructura ------------------------------ */

.encabezado {
  background: var(--tinta);
  color: #fff;
  padding: 1.1rem 1rem;
  text-align: center;
}
.logotipo {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: 1.05rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.logotipo span { color: var(--dorado); }
.subtitulo {
  margin: .2rem 0 0;
  font-size: .82rem;
  color: #c9c4ba;
  letter-spacing: .04em;
}

.contenedor {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.75rem 1.5rem;
  box-shadow: 0 1px 2px rgba(10, 10, 10, .04);
}

h2 {
  font-family: var(--fuente-titulo);
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 0 0 .75rem;
}
h2:focus { outline: none; }
h3 {
  font-family: var(--fuente-titulo);
  font-size: 1.15rem;
  margin: 0 0 .5rem;
}
h4 {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tinta-tenue);
  margin: 0 0 .35rem;
}

.marca-superior {
  margin: 0 0 .35rem;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dorado-texto);
  font-weight: 600;
}

.pie {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1rem 2.5rem;
  font-size: .8rem;
  color: var(--tinta-tenue);
}
.pie p { margin: .2rem 0; }

/* ------------------------------ bienvenida ------------------------------ */

.bienvenida-texto {
  font-size: 1.05rem;
  border-left: 3px solid var(--dorado);
  padding-left: 1rem;
  margin: 1rem 0 1.25rem;
}
.lista-datos {
  margin: 0 0 1.5rem;
  padding-left: 1.1rem;
  font-size: .92rem;
  color: var(--tinta-suave);
}
.lista-datos li { margin-bottom: .45rem; }

/* -------------------------------- avance -------------------------------- */

.avance { margin-bottom: 1.25rem; }
.avance-texto {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tinta-tenue);
  margin-bottom: .4rem;
}
.barra {
  height: 4px;
  background: var(--linea);
  border-radius: 2px;
  overflow: hidden;
}
.barra-relleno {
  height: 100%;
  background: var(--dorado);
  transition: width .2s ease;
}

.nota-paso {
  margin: 0 0 1rem;
  font-size: .92rem;
  color: var(--tinta-suave);
  background: var(--dorado-fondo);
  border-radius: var(--radio);
  padding: .65rem .85rem;
}
.ayuda-paso { margin-bottom: 1.25rem; }

/* -------------------------------- campos -------------------------------- */

.campo {
  border: 0;
  padding: 0;
  margin: 0 0 1.75rem;
}
.campo legend,
.campo > label {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  padding: 0;
  margin-bottom: .35rem;
}
.campo.con-error legend,
.campo.con-error > label { color: var(--negativo); }

.numero-pregunta {
  display: inline-block;
  min-width: 1.5rem;
  margin-right: .45rem;
  padding: .05rem .35rem;
  font-size: .72rem;
  font-weight: 700;
  text-align: center;
  color: var(--dorado-texto);
  background: var(--dorado-fondo);
  border-radius: 4px;
  vertical-align: .12em;
}
.opcional { font-weight: 400; color: var(--tinta-tenue); font-size: .85rem; }

.ayuda {
  margin: 0 0 .6rem;
  font-size: .86rem;
  color: var(--tinta-tenue);
}

.error {
  margin: .45rem 0 0;
  font-size: .86rem;
  color: var(--negativo);
  font-weight: 600;
}

.opciones { display: flex; flex-direction: column; gap: .45rem; }

.opcion {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .7rem .85rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  cursor: pointer;
  background: #fff;
  transition: border-color .12s ease, background .12s ease;
}
.opcion:hover { border-color: var(--dorado); }
.opcion.activa {
  border-color: var(--dorado);
  background: var(--dorado-fondo);
}
.opcion.deshabilitada { opacity: .45; cursor: not-allowed; }
.opcion input { margin-top: .25rem; accent-color: var(--dorado-texto); flex: none; }
.opcion:focus-within { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* escala 0–10 */
.escala {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: .25rem;
  margin-bottom: .75rem;
}
.escala-opcion {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--linea);
  border-radius: 6px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  font-size: .9rem;
  background: #fff;
}
.escala-opcion.activa {
  background: var(--tinta);
  color: #fff;
  border-color: var(--tinta);
  font-weight: 700;
}
.escala-opcion input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.escala-opcion:focus-within { outline: 2px solid var(--dorado-texto); outline-offset: 2px; }

.referencias {
  margin: 0;
  padding-left: 1.1rem;
  font-size: .82rem;
  color: var(--tinta-tenue);
}

/* montos */
.entrada-dinero {
  display: flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: .55rem .75rem;
  background: #fff;
  max-width: 22rem;
}
.entrada-dinero:focus-within { border-color: var(--dorado); outline: 2px solid var(--dorado-texto); outline-offset: 1px; }
.entrada-dinero .prefijo { color: var(--tinta-tenue); }
.entrada-dinero .sufijo { font-size: .78rem; color: var(--tinta-tenue); white-space: nowrap; }
.entrada-dinero input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  font: inherit;
  font-variant-numeric: tabular-nums;
  background: transparent;
}
.entrada-dinero input:disabled { color: #b4aea4; }

.pastillas { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.pastilla {
  position: relative;
  padding: .35rem .7rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  font-size: .82rem;
  cursor: pointer;
  background: #fff;
}
.pastilla.activa { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.pastilla input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pastilla:focus-within { outline: 2px solid var(--dorado-texto); outline-offset: 2px; }

input[type="text"], textarea {
  width: 100%;
  font: inherit;
  padding: .6rem .75rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: #fff;
  resize: vertical;
}
input[type="text"]:focus, textarea:focus {
  border-color: var(--dorado);
  outline: 2px solid var(--dorado-texto);
  outline-offset: 1px;
}

/* ------------------------------- botones -------------------------------- */

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.5rem;
}
.boton {
  font: inherit;
  font-weight: 600;
  padding: .75rem 1.4rem;
  border-radius: var(--radio);
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 44px;
}
.boton:focus-visible { outline: 3px solid var(--dorado-texto); outline-offset: 2px; }
.principal { background: var(--tinta); color: #fff; order: 2; flex: 1 1 12rem; }
.principal:hover { background: #262421; }
.secundario { background: #fff; color: var(--tinta); border-color: var(--linea); order: 1; }
.secundario:hover { border-color: var(--tinta); }
.peligro { background: #fff; color: var(--negativo); border-color: #e2c9c4; order: 3; }
.peligro:hover { background: var(--negativo-fondo); }

.pie-paso {
  margin: .9rem 0 0;
  font-size: .8rem;
  color: var(--tinta-tenue);
}

/* ------------------------------ resultados ------------------------------ */

.resultado-encabezado { margin-bottom: 1.5rem; }
.meta-doc { margin: .15rem 0 0; font-size: .82rem; color: var(--tinta-tenue); }

.resultado-bloque {
  border-top: 1px solid var(--linea);
  padding-top: 1.35rem;
  margin-top: 1.35rem;
  break-inside: avoid;
}
.resultado-bloque .sub {
  margin: -.2rem 0 .9rem;
  font-size: .86rem;
  color: var(--tinta-tenue);
}

.tabla-cifras {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  break-inside: avoid;
}
.tabla-cifras th, .tabla-cifras td {
  text-align: left;
  padding: .5rem .25rem;
  border-bottom: 1px solid var(--linea);
  vertical-align: baseline;
}
.tabla-cifras th { font-weight: 500; color: var(--tinta-suave); }
.tabla-cifras td.monto {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
.tabla-cifras .fila-calculo th,
.tabla-cifras .fila-calculo td {
  background: var(--dorado-fondo);
  font-weight: 700;
  color: var(--tinta);
}
.tabla-cifras .fila-aparte th,
.tabla-cifras .fila-aparte td { color: var(--tinta-tenue); border-bottom: 0; }
.tabla-cifras .negativo { color: var(--negativo); }
.tabla-cifras .pendiente { color: var(--tinta-tenue); font-weight: 500; }
.marca {
  display: inline-block;
  margin-left: .35rem;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tinta-tenue);
  background: #f2efe8;
  border-radius: 4px;
  padding: .05rem .3rem;
}

.aviso {
  margin: .8rem 0 0;
  font-size: .85rem;
  color: var(--tinta-suave);
  background: #f5f2ec;
  border-left: 3px solid var(--dorado);
  padding: .55rem .75rem;
  border-radius: 0 6px 6px 0;
}

details {
  margin-top: .9rem;
  font-size: .88rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: .55rem .8rem;
  background: #fdfcfa;
}
details summary { cursor: pointer; font-weight: 600; }
details p { margin: .5rem 0; color: var(--tinta-suave); }

.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.tarjeta-persona {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: .85rem;
  background: #fdfcfa;
  break-inside: avoid;
}
.escala-valor {
  font-family: var(--fuente-titulo);
  font-size: 1.7rem;
  margin: 0;
  line-height: 1.1;
}
.escala-valor span { font-size: .82rem; font-family: var(--fuente-cuerpo); color: var(--tinta-tenue); }
.escala-nota { margin: .4rem 0 0; font-size: .84rem; color: var(--tinta-suave); }

.lista-conceptos { list-style: none; margin: .6rem 0 0; padding: 0; font-size: .84rem; }
.lista-conceptos li {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  padding: .3rem 0;
  border-top: 1px solid var(--linea);
}
.lista-conceptos .concepto-estado { color: var(--tinta-tenue); white-space: nowrap; font-size: .78rem; }
.lista-conceptos li.ok .concepto-estado { color: var(--ok); }

.prioridad-elegida { margin: 0 0 .8rem; }
.lista-acciones { margin: 0; padding-left: 1.2rem; }
.lista-acciones li { margin-bottom: .8rem; break-inside: avoid; }
.accion-titulo { margin: 0; font-weight: 600; }
.accion-motivo { margin: .15rem 0 0; font-size: .86rem; color: var(--tinta-tenue); }
.lista-alertas { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .86rem; color: var(--tinta-suave); }
.lista-alertas li { margin-bottom: .3rem; }

.lista-resumen { list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.lista-resumen li {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: .75rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--linea);
  break-inside: avoid;
}
.lista-resumen .etiqueta { color: var(--tinta-tenue); }
.lista-resumen .valor { font-weight: 600; }

#res-compartir p { font-size: .88rem; color: var(--tinta-suave); margin: 0; }

/* -------------------------------- celular ------------------------------- */

@media (max-width: 640px) {
  body { font-size: 16px; }
  .contenedor { padding: 1rem .85rem 2.5rem; }
  .tarjeta { padding: 1.25rem 1rem; border-radius: 8px; }
  h2 { font-size: 1.3rem; }
  .escala { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dos-columnas { grid-template-columns: 1fr; }
  .lista-resumen li { grid-template-columns: 1fr; gap: .1rem; }
  .acciones { flex-direction: column; }
  .principal, .secundario, .peligro { order: initial; width: 100%; }
  .entrada-dinero { max-width: none; }
}

/* ------------------------------- impresión ------------------------------ */

@media print {
  .no-imprimir, .encabezado, .pie, .salto { display: none !important; }
  body { background: #fff; font-size: 11pt; color: #000; }
  .contenedor { max-width: none; padding: 0; }
  .tarjeta { border: 0; box-shadow: none; padding: 0; }
  /* Los bloques largos pueden partirse entre páginas; lo que no debe
     partirse son las tablas, tarjetas e hitos, que sí se protegen abajo. */
  .resultado-bloque { page-break-inside: auto; break-inside: auto; }
  .tabla-cifras, .tarjeta-persona, .lista-acciones li, .lista-resumen li {
    page-break-inside: avoid; break-inside: avoid;
  }
  details { border: 0; padding: 0; background: none; }
  details summary { list-style: none; font-weight: 700; margin-top: .4rem; }
  details summary::-webkit-details-marker { display: none; }
  details[open] > summary { margin-bottom: .2rem; }
  h3 { page-break-after: avoid; break-after: avoid; }
  a[href]::after { content: ''; }
}

@page {
  size: letter;
  margin: 16mm 14mm;
}

/* ======================================================================
   Versión con perfil familiar, indicadores y línea de tiempo
   ====================================================================== */

/* --------------------------- campos nuevos --------------------------- */

.entrada-numero {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: .5rem .7rem;
  background: #fff;
}
.entrada-numero:focus-within {
  border-color: var(--dorado);
  outline: 2px solid var(--dorado-texto);
  outline-offset: 1px;
}
.entrada-numero input {
  width: 5.5rem;
  border: 0;
  outline: none;
  font: inherit;
  font-variant-numeric: tabular-nums;
  background: transparent;
}
.entrada-numero .sufijo { font-size: .78rem; color: var(--tinta-tenue); white-space: nowrap; }

.edad-en-linea {
  width: 5rem;
  margin-left: .5rem;
  padding: .2rem .45rem;
  border: 1px solid var(--linea);
  border-radius: 6px;
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.opciones-en-linea { flex-direction: row; flex-wrap: wrap; }
.opciones-en-linea .opcion { flex: 0 0 auto; min-width: 6rem; justify-content: center; }

.fila-repetidor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .55rem;
}
.fila-repetidor input[type="text"] { flex: 1 1 10rem; width: auto; }

.boton-quitar {
  font: inherit;
  font-size: .82rem;
  padding: .45rem .7rem;
  min-height: 40px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: #fff;
  color: var(--tinta-suave);
  cursor: pointer;
}
.boton-quitar:hover { border-color: var(--negativo); color: var(--negativo); }
.boton.chico { padding: .5rem 1rem; min-height: 40px; font-size: .88rem; margin-top: .6rem; }

.entrada-fecha { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.entrada-fecha select {
  font: inherit;
  padding: .5rem .6rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: #fff;
  min-height: 44px;
}
.entrada-fecha select:disabled { color: #b4aea4; background: #f7f5f1; }

/* ------------------------------ metas -------------------------------- */

.tarjeta-meta {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1rem;
  margin-bottom: 1rem;
  background: #fdfcfa;
}
.tarjeta-meta header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
}
.tarjeta-meta h3 {
  margin: 0;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dorado-texto);
  font-family: var(--fuente-cuerpo);
}
.sub-campo { margin-bottom: .9rem; }
.sub-etiqueta {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  margin-bottom: .35rem;
}
.tarjeta-meta .campo { margin-bottom: .9rem; }
.tarjeta-meta .campo legend { font-size: .9rem; }

/* --------------------------- resultados ------------------------------ */

.lista-hallazgos {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 1rem;
}
.lista-hallazgos li { margin-bottom: .8rem; break-inside: avoid; }

.rejilla-indicadores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
}
.tarjeta-indicador {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: .9rem;
  background: #fdfcfa;
  break-inside: avoid;
}
.tarjeta-indicador h4 {
  font-size: .74rem;
  letter-spacing: .07em;
  margin-bottom: .3rem;
}
.indicador-valor {
  font-family: var(--fuente-titulo);
  font-size: 1.9rem;
  line-height: 1.05;
  margin: 0;
}
.indicador-valor.negativo { color: var(--negativo); }
.indicador-pesos {
  margin: .1rem 0 .5rem;
  font-size: .86rem;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-suave);
}
.indicador-muestra { margin: 0; font-size: .84rem; color: var(--tinta-tenue); }
.tarjeta-indicador details { margin-top: .6rem; border: 0; padding: 0; background: none; }
.tarjeta-indicador details summary { font-size: .82rem; color: var(--dorado-texto); }
.tarjeta-indicador details p { font-size: .84rem; }

.cobertura-valor {
  font-family: var(--fuente-titulo);
  font-size: 2rem;
  margin: 0 0 .4rem;
  line-height: 1.1;
}

/* ------------------------ línea de tiempo ----------------------------- */

.linea-tiempo {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0 0 0 1.1rem;
  border-left: 2px solid var(--linea);
}
.hito {
  position: relative;
  padding: 0 0 1.1rem 1rem;
  break-inside: avoid;
}
.hito::before {
  content: '';
  position: absolute;
  left: -1.42rem;
  top: .35rem;
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--dorado);
  border: 2px solid var(--papel);
}
.hito-hoy::before { background: var(--tinta); }
.hito-retiro::before { background: #fff; border-color: var(--dorado); }
.hito-marca {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tinta-tenue);
  margin-bottom: .15rem;
}
.hito-titulo { margin: 0; font-weight: 600; }
.hito-detalle { margin: .1rem 0 0; font-size: .86rem; color: var(--tinta-suave); }
.hito-edades { margin: .25rem 0 0; font-size: .82rem; color: var(--tinta-tenue); }

/* ------------------------------ metas --------------------------------- */

.resumen-metas { margin: 0 0 .8rem; }
.tabla-metas th[scope="row"] { font-weight: 600; color: var(--tinta); }
.tabla-metas thead th {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tinta-tenue);
  font-weight: 600;
  text-align: right;
}
.tabla-metas thead th:first-child { text-align: left; }
.meta-sub {
  display: block;
  font-size: .78rem;
  font-weight: 400;
  color: var(--tinta-tenue);
}

.escala-valor.pequeno { font-size: 1.15rem; margin-top: .6rem; }
.explicaciones { margin-top: .9rem; font-size: .88rem; }
.explicaciones p { margin: .5rem 0; color: var(--tinta-suave); }

/* ------------------------------ celular ------------------------------- */

@media (max-width: 640px) {
  .rejilla-indicadores { grid-template-columns: 1fr; }
  .indicador-valor { font-size: 1.7rem; }
  .fila-repetidor { flex-direction: column; align-items: stretch; }
  .fila-repetidor .entrada-numero { justify-content: space-between; }
  .fila-repetidor input[type="text"] { flex: 1 1 auto; }
  .boton-quitar { width: 100%; }
  .entrada-fecha select { flex: 1 1 7rem; }
  .tabla-metas, .tabla-metas tbody, .tabla-metas tr, .tabla-metas th, .tabla-metas td {
    display: block;
    width: 100%;
  }
  .tabla-metas thead { display: none; }
  .tabla-metas tr {
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: .7rem;
    margin-bottom: .7rem;
  }
  .tabla-metas td {
    text-align: left !important;
    border: 0;
    padding: .2rem 0;
  }
  .tabla-metas td::before {
    content: attr(data-etiqueta);
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tinta-tenue);
  }
}

/* ----------------------------- impresión ------------------------------ */

@media print {
  .rejilla-indicadores { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .tarjeta-indicador { background: none; border: 1px solid #ccc; }
  .tarjeta-meta { background: none; }
  /* En el PDF la línea de tiempo se lee como lista cronológica. */
  .linea-tiempo { border-left: 0; padding-left: 0; }
  .hito { padding-left: 0; }
  .hito::before { display: none; }
  .hito-marca { font-weight: 700; color: #000; }
  .lista-hallazgos li, .hito, .tarjeta-indicador { page-break-inside: avoid; }
}

/* ======================================================================
   Gráficas del resultado
   Paleta validada para visión con deficiencia de color sobre papel claro.
   ====================================================================== */

.grafica { margin: 0 0 1rem; }
.grafica-titulo {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tinta-tenue);
  font-weight: 600;
  margin-bottom: .55rem;
}

.resultado-bloque.destacado {
  border-top: 0;
  padding-top: 0;
  margin-top: .5rem;
}

/* --------------------- de cada $100 que reciben ---------------------- */

.barra-composicion {
  position: relative;
  display: flex;
  gap: 2px;
  height: 30px;
  margin-bottom: .9rem;
}
.barra-composicion .segmento {
  height: 100%;
  border-radius: 3px;
  min-width: 3px;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.barra-composicion .segmento:first-child { border-radius: 5px 3px 3px 5px; }
.barra-composicion .segmento:last-of-type { border-radius: 3px 5px 5px 3px; }

.marca-ingreso {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 2px;
  background: var(--tinta);
}
.marca-ingreso span {
  position: absolute;
  top: -1.15rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tinta);
  white-space: nowrap;
  font-weight: 700;
}
.con-brecha { margin-top: 1.4rem; }

.leyenda {
  list-style: none;
  margin: 0 0 .7rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .3rem .9rem;
  font-size: .86rem;
}
.leyenda li { display: flex; align-items: baseline; gap: .45rem; }
.muestra {
  flex: none;
  width: .7rem;
  height: .7rem;
  border-radius: 3px;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.leyenda-nombre { color: var(--tinta-suave); }
.leyenda-cifra {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

/* ------------------------ bloques de cobertura ----------------------- */

.bloques {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: .3rem 0 .5rem;
}
.bloque-mes {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  background: var(--dorado);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.bloque-mes.parcial {
  background: var(--linea);
  overflow: hidden;
  display: flex;
}
.bloque-mes.parcial span {
  display: block;
  height: 100%;
  background: var(--dorado);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.bloque-mas {
  font-size: .82rem;
  font-weight: 600;
  color: var(--tinta-tenue);
  margin-left: .2rem;
}

/* --------------------------- avance de metas ------------------------- */

.rejilla-metas { display: grid; gap: .8rem; margin: .5rem 0 1rem; }
.tarjeta-meta-resultado {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: .9rem;
  background: #fdfcfa;
  break-inside: avoid;
}
.tarjeta-meta-resultado header { margin-bottom: .6rem; }
.tarjeta-meta-resultado h4 {
  font-family: var(--fuente-titulo);
  font-size: 1.05rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tinta);
  margin: 0;
}

.avance-meta { margin-bottom: .7rem; }
.avance-pista {
  height: 10px;
  border-radius: 5px;
  background: var(--linea);
  overflow: hidden;
}
.avance-relleno {
  height: 100%;
  border-radius: 5px;
  background: var(--dorado-texto);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.avance-texto-meta { margin: .35rem 0 0; font-size: .86rem; color: var(--tinta-suave); }
.meta-sin-barra { margin: .2rem 0 .6rem; }

.meta-cifras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  margin: 0;
}
.meta-cifras dt {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tinta-tenue);
}
.meta-cifras dd {
  margin: .1rem 0 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ------------------------- línea de tiempo --------------------------- */

.hito-anio {
  display: inline-block;
  font-family: var(--fuente-titulo);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tinta);
  margin-right: .5rem;
  vertical-align: baseline;
}
.hito-hoy .hito-anio { display: none; }

/* ------------------------------ celular ------------------------------ */

@media (max-width: 640px) {
  .leyenda { grid-template-columns: 1fr; }
  .meta-cifras { grid-template-columns: 1fr 1fr; }
  .bloque-mes { width: 22px; height: 22px; }
  .barra-composicion { height: 26px; }
}

/* ----------------------------- impresión ----------------------------- */

@media print {
  .barra-composicion, .bloques, .avance-meta, .leyenda { page-break-inside: avoid; }
  .tarjeta-meta-resultado { background: none; break-inside: avoid; }
  .rejilla-metas { gap: .5rem; }
}

/* ----------------- Esto trabajaremos con sus respuestas --------------- */

.hoja {
  border: 1px solid var(--linea);
  border-left: 3px solid var(--dorado);
  border-radius: 0 var(--radio) var(--radio) 0;
  padding: .9rem 1rem;
  margin-bottom: .8rem;
  background: #fdfcfa;
  break-inside: avoid;
}
.hoja h4 {
  font-family: var(--fuente-titulo);
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tinta);
  margin: 0 0 .5rem;
}
.hoja ul { margin: 0; padding-left: 1.1rem; font-size: .92rem; }
.hoja li { margin-bottom: .4rem; }
.hoja .lista-acciones { padding-left: 1.2rem; }

.linea-llenado {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin: .25rem 0 .2rem;
  font-size: .84rem;
  color: var(--tinta-tenue);
  font-variant-numeric: tabular-nums;
}

.meta-motivo {
  margin: .3rem 0 0;
  font-size: .86rem;
  color: var(--tinta-suave);
  font-style: italic;
}

.lista-declarada { margin: 0; font-size: .92rem; }
.lista-declarada > div {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: .75rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--linea);
}
.lista-declarada dt { color: var(--tinta-tenue); }
.lista-declarada dd { margin: 0; font-weight: 600; }

@media (max-width: 640px) {
  .lista-declarada > div { grid-template-columns: 1fr; gap: .1rem; }
  .linea-llenado { flex-direction: column; gap: .2rem; }
}

@media print {
  .hoja { background: none; page-break-inside: avoid; }
}