/* ============================================================
   Contenido: artículos, hubs de sección y herramientas.
   Extiende el sistema "Panel de mando" (estilos.css).
   ============================================================ */

/* ---------- Migas de pan ---------- */

.migas {
  margin-top: var(--hueco);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.migas ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.migas li::after { content: " /"; color: var(--borde-vivo); }
.migas li:last-child::after { content: ""; }
.migas a { text-decoration: none; }
.migas a:hover { color: var(--acento); }

/* ---------- Cabecera de artículo ---------- */

.articulo-cab {
  margin-top: var(--hueco);
  padding: clamp(1.5rem, 4vw, 2.8rem);
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.articulo-cab h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
  margin-top: 0.9rem;
  text-wrap: balance;
}
.articulo-resumen {
  margin-top: 1rem;
  max-width: 44rem;
  color: var(--texto-2);
  font-size: clamp(1.02rem, 1rem + 0.3vw, 1.15rem);
  text-wrap: pretty;
}
.articulo-meta {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-2);
}

/* ---------- Cuerpo del artículo ---------- */

.articulo-cuerpo {
  margin-top: var(--hueco);
  display: grid;
  gap: var(--hueco);
  align-items: start;
}
@media (min-width: 62rem) {
  .articulo-cuerpo { grid-template-columns: minmax(0, 1fr) 17rem; }
  .sumario { position: sticky; top: var(--hueco); }
}

.prosa {
  padding: clamp(1.4rem, 3.5vw, 2.6rem);
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  max-width: 46rem;
}
.prosa > * + * { margin-top: 1.1rem; }
.prosa p { color: #dfe3e7; }
.prosa h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.35rem, 1.15rem + 1vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-top: 2.4rem;
  scroll-margin-top: 1.5rem;
}
.prosa h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.12rem;
  line-height: 1.3;
  margin-top: 1.7rem;
}
.prosa ul, .prosa ol { padding-left: 1.2rem; display: grid; gap: 0.55rem; }
.prosa li { color: #dfe3e7; }
.prosa li::marker { color: var(--acento); }
.prosa strong { color: var(--texto); font-weight: 600; }
.prosa a { color: var(--acento); text-underline-offset: 3px; }
.prosa a:hover { color: var(--acento-suave); }

.prosa blockquote {
  border-left: 3px solid var(--acento);
  background: var(--panel-2);
  border-radius: var(--radio-2);
  padding: 1rem 1.2rem;
}
.prosa blockquote p {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--texto);
}

/* ---------- Sumario lateral ---------- */

.sumario {
  padding: 1.2rem 1.3rem;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.sumario h2 {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.sumario ol { list-style: none; padding: 0; margin-top: 0.9rem; display: grid; gap: 0.5rem; }
.sumario a {
  text-decoration: none;
  color: var(--texto-2);
  font-size: 0.9rem;
  line-height: 1.35;
  display: block;
  transition: color 0.2s var(--suave);
}
.sumario a:hover { color: var(--acento); }

/* ---------- Bloque "Ponlo en práctica" ---------- */

.practica {
  background: var(--panel-2);
  border: 1px solid var(--acento);
  border-radius: var(--radio);
  padding: 1.4rem 1.5rem;
}
.practica h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
  margin-top: 0;
  color: var(--acento);
}
.practica p, .practica li { color: #dfe3e7; }

/* ---------- Preguntas frecuentes ---------- */

.faq { margin-top: 2.4rem; display: grid; gap: 0.55rem; }
.faq-item {
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 0.95rem 1.1rem;
  font-family: var(--display);
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  color: var(--acento);
  font-size: 1.2rem;
  line-height: 1;
  flex: none;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover { background: var(--panel); }
.faq-item div { padding: 0 1.1rem 1.1rem; color: var(--texto-2); }

/* ---------- Aviso YMYL ---------- */

.aviso-ymyl {
  margin-top: 1.6rem;
  font-size: 0.85rem;
  color: var(--texto-2);
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--borde-vivo);
  border-radius: var(--radio-2);
  padding: 0.85rem 1.1rem;
}

/* ---------- Siguiente paso / relacionados ---------- */

.siguiente {
  margin-top: var(--espacio-seccion);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.siguiente h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--texto-seccion);
  letter-spacing: -0.022em;
  line-height: 1.15;
  margin-top: 0.8rem;
  text-wrap: balance;
}
.relacionados {
  margin-top: 1.4rem;
  display: grid;
  gap: 0.55rem;
  list-style: none;
  padding: 0;
}
.relacionado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  padding: 0.9rem 1.1rem;
  text-decoration: none;
  transition: border-color 0.22s var(--suave);
}
.relacionado:hover { border-color: var(--acento); }
.relacionado span:last-child {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--texto-2);
}

/* ---------- Hub de sección ---------- */

.temas {
  margin-top: 1.6rem;
  display: grid;
  gap: var(--hueco);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  list-style: none;
  padding: 0;
}
.tema {
  display: block;
  padding: 1.3rem 1.3rem 1.4rem;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  text-decoration: none;
  transition: border-color 0.22s var(--suave), transform 0.22s var(--suave);
}
.tema:hover { border-color: var(--acento); transform: translateY(-2px); }
.tema h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--texto-titulo);
  letter-spacing: -0.015em;
  margin-top: 0.55rem;
}
.tema p { margin-top: 0.4rem; color: var(--texto-2); font-size: 0.93rem; }
.tema-vacio { opacity: 0.62; }
.tema-vacio:hover { border-color: var(--borde); transform: none; }

/* ============================================================
   HERRAMIENTA: rastreador de hábitos
   ============================================================ */

.herramienta {
  margin-top: var(--hueco);
  padding: clamp(1.3rem, 3.5vw, 2.2rem);
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.hab-alta { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; }
.hab-campo { flex: 1 1 16rem; display: grid; gap: 0.4rem; }
.hab-campo label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.hab-campo input {
  min-height: 46px;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0.6rem 0.9rem;
}
.hab-campo input:focus-visible { border-color: var(--acento); }

.hab-error {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: #ffb3b3;
}
.hab-error:empty { display: none; }

.hab-lista { margin-top: 1.4rem; display: grid; gap: 0.6rem; list-style: none; padding: 0; }

.hab-fila {
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  padding: 0.9rem 1rem;
  display: grid;
  gap: 0.8rem;
}
.hab-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
}
.hab-nombre { font-family: var(--display); font-weight: 500; font-size: 1.02rem; }
.hab-racha {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--acento);
  background: var(--acento-tenue);
  border-radius: 99px;
  padding: 0.28rem 0.65rem;
}
.hab-quitar {
  background: none;
  border: 1px solid var(--borde);
  border-radius: 99px;
  color: var(--texto-2);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  min-height: 32px;
  padding: 0 0.7rem;
}
.hab-quitar:hover { border-color: #ff8a8a; color: #ff8a8a; }

.hab-dias { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.hab-dia {
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  gap: 1px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  color: var(--texto-2);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.1;
  padding: 0.3rem;
  transition: background-color 0.18s var(--suave), border-color 0.18s var(--suave), color 0.18s var(--suave);
}
.hab-dia b { font-size: 0.82rem; font-weight: 700; }
.hab-dia:hover { border-color: var(--borde-vivo); }
.hab-dia[aria-pressed="true"] {
  background: var(--acento);
  border-color: var(--acento);
  color: #101010;
}
.hab-dia-hoy { box-shadow: inset 0 0 0 1px var(--borde-vivo); }

.hab-vacio {
  margin-top: 1.3rem;
  color: var(--texto-2);
  font-size: 0.95rem;
}

.hab-resumen {
  margin-top: 1.3rem;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.hab-dato {
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  padding: 0.9rem 1rem;
}
.hab-dato b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
}
.hab-dato span {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-2);
}

.hab-pie {
  margin-top: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: center;
  justify-content: space-between;
}
.hab-nota { font-size: 0.82rem; color: var(--texto-2); }

/* ============================================================
   HERRAMIENTA: calculadora 50/30/20
   ============================================================ */

.calc-campos {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.calc-campo { display: grid; gap: 0.4rem; }
.calc-campo label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.calc-campo .pista {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--texto-2);
}
.calc-envoltura { position: relative; display: flex; align-items: center; }
.calc-envoltura span {
  position: absolute;
  left: 0.9rem;
  color: var(--texto-2);
  font-family: var(--mono);
  font-size: 0.9rem;
  pointer-events: none;
}
.calc-campo input {
  width: 100%;
  min-height: 48px;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 1.05rem;
  padding: 0.6rem 0.9rem 0.6rem 2.1rem;
}
.calc-campo input:focus-visible { border-color: var(--acento); }

.calc-acciones { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: 0.7rem; }

.calc-error {
  margin-top: 0.8rem;
  font-size: 0.88rem;
  color: #ffb3b3;
}
.calc-error:empty { display: none; }

.calc-resultado { margin-top: 1.6rem; }
.calc-resultado[hidden] { display: none; }

.calc-cubetas {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.cubeta {
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  padding: 1.1rem 1.2rem;
}
.cubeta-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}
.cubeta-nombre { font-family: var(--display); font-weight: 700; font-size: 1.02rem; }
.cubeta-pct {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--acento);
}
.cubeta-monto {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.cubeta-detalle { margin-top: 0.5rem; font-size: 0.86rem; color: var(--texto-2); }
.cubeta-comparacion {
  margin-top: 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--borde);
  font-size: 0.86rem;
}
.dif-bien { color: var(--acento); }
.dif-mal { color: #ffb3b3; }

.calc-diagnostico {
  margin-top: 1rem;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio-2);
  padding: 1rem 1.2rem;
}
.calc-diagnostico h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}
.calc-diagnostico p { color: #dfe3e7; font-size: 0.94rem; }
.calc-diagnostico p + p { margin-top: 0.5rem; }

/* ============================================================
   HERRAMIENTA: reto de 30 días
   ============================================================ */

.reto-arranque[hidden], .reto-panel[hidden] { display: none; }

.reto-arranque p { color: var(--texto-2); max-width: 46ch; }
.reto-arranque .btn { margin-top: 1.2rem; }

/* Barra de avance: el ancho vive en --avance, que pinta el JS. */
.reto-barra {
  margin-top: 1.2rem;
  height: 8px;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: 99px;
  overflow: hidden;
}
.reto-barra::after {
  content: "";
  display: block;
  height: 100%;
  width: var(--avance, 0%);
  background: var(--acento);
  transition: width 0.35s var(--suave);
}

.reto-rejilla {
  margin-top: 1.4rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(3.1rem, 1fr));
  gap: 0.45rem;
}
.reto-semana {
  grid-column: 1 / -1;
  margin-top: 0.7rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.reto-semana:first-child { margin-top: 0; }

.reto-dia {
  min-height: 52px;
  display: grid;
  place-items: center;
  gap: 1px;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  color: var(--texto-2);
  cursor: pointer;
  font-family: var(--mono);
  line-height: 1.1;
  transition: background-color 0.18s var(--suave), border-color 0.18s var(--suave), color 0.18s var(--suave);
}
.reto-dia b { font-size: 0.95rem; font-weight: 700; }
.reto-dia span { font-size: 0.68rem; min-height: 0.8em; }
.reto-dia:hover { border-color: var(--borde-vivo); color: var(--texto); }
.reto-dia-futuro { opacity: 0.7; }
.reto-dia-hoy { border-color: var(--acento); color: var(--texto); }
.reto-dia-hecho {
  background: var(--acento);
  border-color: var(--acento);
  color: #101010;
}
.reto-dia[aria-current="true"] { box-shadow: 0 0 0 2px var(--borde-vivo); }
.reto-dia-hecho[aria-current="true"] { box-shadow: 0 0 0 2px var(--texto); }

.reto-detalle {
  margin-top: 1.3rem;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio-2);
  padding: 1.2rem 1.3rem;
}
.reto-detalle h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  margin-top: 0.5rem;
}
.reto-texto { margin-top: 0.6rem; color: #dfe3e7; font-size: 0.97rem; line-height: 1.65; }

.reto-acciones {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.reto-reiniciar {
  background: none;
  border: 1px solid var(--borde);
  border-radius: 99px;
  color: var(--texto-2);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  min-height: 34px;
  padding: 0 0.8rem;
}
.reto-reiniciar:hover { border-color: #ff8a8a; color: #ff8a8a; }

/* ============================================================
   IMPRESIÓN — reglas comunes a todas las hojas imprimibles
   No pertenecen a ninguna herramienta concreta: cualquier página con
   .herramienta que se imprima depende de este bloque. Mantenerlo aparte
   evita que se borre junto con la herramienta que lo estrenó.
   ============================================================ */

@media print {
  @page { margin: 12mm; }

  /* El sistema es oscuro; en papel eso gastaría tinta y se leería peor.
     Al imprimir se invierte todo a negro sobre blanco. */
  html, body, .frame, .herramienta, .articulo-cab,
  .plan-dia, .tabla-plantilla {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }
  .frame { max-width: none !important; padding: 0 !important; margin: 0 !important; }

  /* Fuera todo lo que no es la hoja. */
  .nav, .migas, .footer, .siguiente, .articulo-cuerpo,
  .hab-pie, .saltar, .aviso-ymyl,
  .articulo-cab .ceja, .articulo-resumen, .herramienta > .ceja {
    display: none !important;
  }

  .articulo-cab {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 0.4rem !important;
  }
  .articulo-cab h1 { font-size: 18pt !important; margin: 0 !important; }

  .herramienta {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Los campos vacíos se imprimen como renglones para escribir a mano. */
  input::placeholder, select::placeholder { color: transparent !important; }
}

/* ============================================================
   PLANTILLA: plan de deudas
   ============================================================ */

.deudas-col-tasa, .deudas-col-monto { width: 8rem; }

.deudas-minimos {
  margin-top: 0.9rem;
  font-size: 0.88rem;
  color: var(--texto-2);
  line-height: 1.5;
}

.deudas-metodos {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.deudas-metodo {
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  padding: 1.1rem 1.2rem 1.2rem;
}
.deudas-metodo-alto { border-color: var(--acento); }
.deudas-metodo h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
}
.deudas-metodo-alto h3 { color: var(--acento); }
.deudas-nota { margin-top: 0.3rem; font-size: 0.86rem; color: var(--texto-2); line-height: 1.5; }
.deudas-metodo .fondo-marcadores { margin-top: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.deudas-metodo .hab-dato b { font-size: 1.15rem; }

.deudas-orden {
  margin-top: 0.9rem;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.4rem;
}
.deudas-orden li { color: #dfe3e7; font-size: 0.88rem; line-height: 1.45; }
.deudas-orden li::marker { color: var(--acento); font-family: var(--mono); }

@media print {
  .deudas-metodos { grid-template-columns: 1fr 1fr !important; gap: 6pt !important; }
  .deudas-metodo {
    background: none !important;
    border: 1px solid #999 !important;
    padding: 6pt 7pt !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .deudas-metodo h3, .deudas-orden li, .deudas-nota { color: #000 !important; }
  .deudas-metodo .hab-dato { background: none !important; border: 1px solid #bbb !important; }
  .deudas-metodo .hab-dato b { color: #000 !important; }
  .deudas-acciones, .deudas-pago { display: none !important; }
}

/* ============================================================
   PLANTILLA: registro de gastos
   ============================================================ */

.tabla-envoltura { margin-top: 1.3rem; overflow-x: auto; }

.tabla-plantilla {
  width: 100%;
  border-collapse: collapse;
  min-width: 30rem;
}
.tabla-plantilla th {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-2);
  font-weight: 400;
  padding: 0 0.4rem 0.5rem;
  border-bottom: 1px solid var(--borde);
}
.tabla-plantilla th:last-child, .tabla-plantilla td:last-child { text-align: right; }
.tabla-plantilla td { padding: 0; border-bottom: 1px solid var(--borde); }

.tabla-plantilla input, .tabla-plantilla select {
  width: 100%;
  min-height: 44px;
  background: none;
  border: 0;
  color: var(--texto);
  font-family: var(--sans);
  font-size: 0.92rem;
  padding: 0.3rem 0.4rem;
}
.tabla-plantilla select {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--texto-2);
}
.tabla-plantilla .g-monto { text-align: right; font-family: var(--mono); }
.tabla-plantilla input:focus-visible, .tabla-plantilla select:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: -2px;
}
.tabla-plantilla .g-dia { text-align: center; font-family: var(--mono); }
.g-monto-malo { color: #ffb3b3 !important; text-decoration: underline wavy #ffb3b3; }

.gastos-col-dia { width: 3.2rem; }
.gastos-col-cat { width: 9rem; }
.gastos-col-monto { width: 7rem; }

/* ---------- Impresión de la plantilla ---------- */

@media print {
  .tabla-envoltura { overflow: visible !important; }
  .tabla-plantilla { min-width: 0 !important; }
  /* Con varias hojas, la cabecera se repite arriba de cada una. */
  .tabla-plantilla thead { display: table-header-group; }
  .tabla-plantilla tr { break-inside: avoid; page-break-inside: avoid; }
  .tabla-plantilla th { color: #000 !important; border-bottom: 1.5px solid #000 !important; padding-bottom: 3pt !important; }
  .tabla-plantilla td { border-bottom: 1px solid #bbb !important; }
  .tabla-plantilla input, .tabla-plantilla select {
    color: #000 !important;
    background: none !important;
    min-height: 0 !important;
    padding: 3pt 3pt !important;
    font-size: 9pt !important;
    /* El desplegable se imprime como texto: sin flecha ni recuadro. */
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 0 !important;
  }
  .gastos-barra { margin: 0 0 6pt !important; }
  .gastos-mes { font-size: 11pt !important; color: #000 !important; }
  .gastos-nav, .gastos-acciones { display: none !important; }

  /* Los totales sí se imprimen: si llenaste la hoja en pantalla, son lo que
     te llevas a la calculadora. En blanco salen en cero, que no estorba. */
  .gastos-totales {
    margin-top: 8pt !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4pt !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .gastos-totales .hab-dato {
    background: none !important;
    border: 1px solid #999 !important;
    border-radius: 3pt !important;
    padding: 4pt 5pt !important;
  }
  .gastos-totales .hab-dato b { color: #000 !important; font-size: 11pt !important; }
  .gastos-totales .hab-dato span { color: #333 !important; font-size: 6.5pt !important; }
  .gastos-totales .fondo-detalle { color: #555 !important; font-size: 6pt !important; }
}

/* ============================================================
   HERRAMIENTA: planificador semanal imprimible
   ============================================================ */

.plan-barra {
  margin-top: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: center;
  justify-content: space-between;
}
.plan-semana {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.02rem;
}
.plan-nav { display: flex; gap: 0.4rem; }
.plan-nav button {
  min-height: 44px;
  min-width: 44px;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  color: var(--texto-2);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  padding: 0 0.7rem;
}
.plan-nav button:hover { border-color: var(--acento); color: var(--texto); }

.plan-encabezado {
  margin-top: 1.3rem;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.plan-no-negociable { margin-top: 0.6rem; }

.plan-campo { display: grid; gap: 0.35rem; }
.plan-campo label {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.plan-campo input {
  min-height: 44px;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 0.5rem 0.8rem;
  width: 100%;
}
.plan-campo input:focus-visible { border-color: var(--acento); }
.plan-campo-ancho input { border-left: 3px solid var(--acento); }

.plan-dias {
  margin-top: 1.3rem;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.plan-dia {
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  padding: 0.85rem 0.9rem 0.95rem;
}
.plan-dia-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.plan-dia-nombre { font-family: var(--display); font-weight: 500; font-size: 0.98rem; }
.plan-dia-fecha {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.plan-campo-principal input { border-left: 3px solid var(--acento); }

.plan-otras { margin-top: 0.5rem; display: grid; gap: 0.35rem; }
.plan-linea { display: flex; align-items: center; gap: 0.5rem; }
.plan-caja {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border: 1px solid var(--borde-vivo);
  border-radius: 3px;
}
.plan-linea input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 34px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--borde);
  border-radius: 0;
  color: var(--texto);
  font-family: var(--sans);
  font-size: 0.88rem;
  padding: 0.2rem 0.1rem;
}
.plan-linea input:focus-visible { border-bottom-color: var(--acento); outline: none; }

.plan-revision {
  margin-top: 1rem;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio-2);
  padding: 0.95rem 1.1rem 1.1rem;
}
.plan-revision-titulo {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 0.8rem;
}
.plan-revision-campos {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.plan-acciones {
  margin-top: 1.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}
.plan-vaciar {
  background: none;
  border: 1px solid var(--borde);
  border-radius: 99px;
  color: var(--texto-2);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  min-height: 34px;
  padding: 0 0.8rem;
}
.plan-vaciar:hover { border-color: #ff8a8a; color: #ff8a8a; }

/* ---------- Impresión del planificador ---------- */

@media print {
  .plan-barra { margin: 0 0 6pt !important; }
  .plan-semana { font-size: 10pt !important; color: #000 !important; }

  .plan-encabezado, .plan-no-negociable { margin-top: 6pt !important; }
  .plan-campo label { color: #444 !important; font-size: 6.5pt !important; }
  .plan-campo input, .plan-linea input {
    background: none !important;
    border: 0 !important;
    border-bottom: 1px solid #999 !important;
    border-radius: 0 !important;
    color: #000 !important;
    min-height: 0 !important;
    padding: 1pt 2pt !important;
    font-size: 9pt !important;
  }
  .plan-campo-ancho input, .plan-campo-principal input { border-bottom: 1.5px solid #000 !important; }

  .plan-dias {
    margin-top: 8pt !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 5pt !important;
  }
  .plan-dia {
    border: 1px solid #bbb !important;
    border-radius: 3pt !important;
    padding: 5pt 6pt 6pt !important;
    /* Un día partido entre dos hojas no sirve de nada. */
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .plan-dia-nombre { font-size: 9.5pt !important; }
  .plan-dia-fecha { font-size: 6.5pt !important; color: #555 !important; }
  .plan-caja { border-color: #666 !important; }
  .plan-acciones, .plan-nav { display: none !important; }

  .plan-revision {
    margin-top: 7pt !important;
    background: none !important;
    border: 1px solid #999 !important;
    border-left: 2px solid #000 !important;
    border-radius: 3pt !important;
    padding: 5pt 6pt 6pt !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .plan-revision-titulo { color: #000 !important; font-size: 7pt !important; margin-bottom: 4pt !important; }
  .plan-revision-campos { gap: 5pt !important; grid-template-columns: repeat(3, 1fr) !important; }
}

/* ============================================================
   HERRAMIENTA: calculadora de fondo de emergencia
   ============================================================ */

.fondo-marcadores {
  margin-top: 1.3rem;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.fondo-dato-alto { border-color: var(--acento); }
.fondo-dato-alto b { color: var(--acento); }
.fondo-detalle {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  font-style: normal;
  color: var(--texto-2);
  line-height: 1.35;
}

.fondo-select {
  min-height: 46px;
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0.6rem 0.9rem;
}
.fondo-select:focus-visible { border-color: var(--acento); }

/* ============================================================
   HERRAMIENTA: test de mentalidad
   ============================================================ */

.test-avance {
  margin-top: 1.2rem;
  height: 8px;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: 99px;
  overflow: hidden;
}
.test-avance::after {
  content: "";
  display: block;
  height: 100%;
  width: var(--avance, 0%);
  background: var(--acento);
  transition: width 0.3s var(--suave);
}
.test-avance-texto {
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-2);
}

.test-preguntas { margin-top: 1.5rem; display: grid; gap: 0.6rem; }

.test-pregunta {
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  padding: 1rem 1.1rem 1.1rem;
  min-width: 0;
}
.test-enunciado {
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.45;
  padding: 0;
  margin-bottom: 0.9rem;
}

.test-escala { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* El radio real se mantiene en el flujo para que el foco del teclado funcione;
   lo que se ve es la etiqueta. Nada de display:none, que lo saca del foco. */
.test-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.test-opcion {
  flex: 1 1 5.5rem;
  min-height: 46px;
  display: grid;
  place-items: center;
  gap: 1px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  color: var(--texto-2);
  cursor: pointer;
  padding: 0.35rem 0.4rem;
  text-align: center;
  transition: background-color 0.18s var(--suave), border-color 0.18s var(--suave), color 0.18s var(--suave);
}
.test-opcion b { font-family: var(--mono); font-size: 0.9rem; font-weight: 700; }
.test-opcion span {
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}
.test-opcion:hover { border-color: var(--borde-vivo); color: var(--texto); }
.test-radio:checked + .test-opcion {
  background: var(--acento);
  border-color: var(--acento);
  color: #101010;
}
.test-radio:focus-visible + .test-opcion { box-shadow: 0 0 0 2px var(--texto); }

.test-acciones {
  margin-top: 1.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.test-resultado {
  margin-top: 1.5rem;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio-2);
  padding: 1.3rem 1.4rem;
}
.test-resultado[hidden] { display: none; }
.test-resultado h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.6rem);
  margin-top: 0.5rem;
}
.test-diagnostico { margin-top: 0.7rem; color: #dfe3e7; font-size: 0.97rem; line-height: 1.65; }
.test-subtitulo {
  margin-top: 1.5rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.test-pasos { margin-top: 0.7rem; padding-left: 1.1rem; display: grid; gap: 0.5rem; }
.test-pasos li { color: #dfe3e7; font-size: 0.95rem; line-height: 1.6; }
.test-resultado .relacionados { margin-top: 0.7rem; }

.test-barras { margin-top: 1.3rem; display: grid; gap: 0.55rem; }
.test-barra-fila {
  display: grid;
  grid-template-columns: minmax(5.5rem, auto) 1fr auto;
  gap: 0.7rem;
  align-items: center;
}
.test-barra-nombre { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-2); }
.test-barra {
  height: 10px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 99px;
  overflow: hidden;
}
.test-barra::after {
  content: "";
  display: block;
  height: 100%;
  width: var(--valor, 0%);
  background: var(--borde-vivo);
}
.test-barra-cifra { font-family: var(--mono); font-size: 0.72rem; color: var(--texto-2); }
.test-barra-alta .test-barra-nombre,
.test-barra-alta .test-barra-cifra { color: var(--acento); }
.test-barra-alta .test-barra::after { background: var(--acento); }
.test-nota-orden { margin-top: 0.8rem; font-size: 0.85rem; color: var(--texto-2); line-height: 1.55; }

.test-aviso {
  margin-top: 1.2rem;
  font-size: 0.82rem;
  color: var(--texto-2);
  line-height: 1.55;
}

@media (max-width: 520px) {
  .test-opcion { flex-basis: 100%; grid-auto-flow: column; place-items: center start; gap: 0.6rem; padding-left: 0.9rem; }
  .test-opcion span { font-size: 0.58rem; }
}

.compartir {
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  color: var(--texto);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  min-height: 44px;
  padding: 0 1.1rem;
}
.compartir:hover { border-color: var(--acento); }