/* ============================================================
   Herramientas: calculadoras, plantillas, tests y planificadores.
   Extiende el sistema "Panel de mando" (estilos.css).

   Vive aparte de contenido.css porque solo la cargan las 13 paginas de
   herramienta. Estaba dentro, y las otras 110 paginas se descargaban 46 KB
   de CSS bloqueante que no aplicaba a ningun elemento suyo.

   Aqui dentro va tambien el bloque @media print comun: esconde .nav,
   .footer y .articulo-cuerpo para que la hoja imprimible salga limpia.
   Mientras vivio en contenido.css, imprimir CUALQUIER articulo escondia su
   propio texto y salia una pagina en blanco con el titulo.
   ============================================================ */
/* ============================================================
   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); }



/* El padding izquierdo de .calc-campo input deja sitio al simbolo de moneda.
   Cuando el campo no lleva simbolo —texto libre, una fecha, una unidad que no
   es dinero— ese hueco se ve como un texto descolocado. */
.calc-campo-simple input { padding-left: 0.9rem; }

.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); }

/* ---------- Temporizador de respiración ---------- */

/* El círculo es un apoyo, nunca la única señal: la fase va escrita y la cuenta
   en números. Con prefers-reduced-motion la regla global de estilos.css mata la
   transición y el ejercicio sigue siendo perfectamente usable. */

.resp-opciones {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-top: 1.1rem;
}
.resp-grupo {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.resp-grupo legend {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-2);
  padding: 0;
  margin-bottom: 0.55rem;
}
.resp-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.resp-opcion,
.pom-opcion,
.cla-marca,
.horm-elegir,
.ent-pregunta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.88rem;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  text-align: left;
  transition: border-color 0.22s var(--suave);
}
.resp-opcion:hover,
.pom-opcion:hover,
.cla-marca:hover,
.horm-elegir:hover,
.ent-pregunta:hover { border-color: var(--acento); }
.resp-opcion[aria-pressed='true'],
.pom-opcion[aria-pressed='true'],
.cla-marca[aria-pressed='true'],
.horm-elegir[aria-pressed='true'],
.ent-pregunta[aria-pressed='true'] {
  border-color: var(--acento);
  box-shadow: inset 0 0 0 1px var(--acento);
}
.resp-opcion-corta {
  flex-direction: row;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}
.resp-ritmo,
.pom-reparto {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: var(--texto-2);
}
.resp-descripcion {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--texto-2);
  max-width: 44rem;
}

.resp-escena {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  margin: 1.8rem 0 0.4rem;
}
.resp-marco {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(9rem, 38vw, 13rem);
  aspect-ratio: 1;
}
.resp-circulo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--acento);
  background: var(--panel-2);
  scale: 0.6;
  transition: scale var(--resp-seg, 4s) linear;
}
.resp-circulo.resp-inhala { scale: 1; }
.resp-circulo.resp-exhala { scale: 0.6; }
/* En la retención el círculo se queda donde esté: no se toca la escala. */
.resp-cuenta {
  position: relative;
  font-family: var(--mono);
  font-size: 2rem;
  font-weight: 700;
  color: var(--acento);
}
.resp-fase {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: -0.015em;
}
.resp-restante {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-2);
  min-height: 1rem;
}
.resp-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: center;
  margin-top: 1.1rem;
}
.resp-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: 44px;
  padding: 0 1.1rem;
}
.resp-vaciar:hover { border-color: #ff8a8a; color: #ff8a8a; }

/* ---------- Registro de emociones ---------- */

/* Los tonos por familia son apoyo visual, nunca la única información: cada
   entrada lleva siempre la palabra escrita al lado del punto de color. */

.emo-grupo {
  border: 0;
  margin: 0 0 1.4rem;
  padding: 0;
  min-width: 0;
}
.emo-grupo legend {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-2);
  padding: 0;
  margin-bottom: 0.6rem;
}
.emo-botones { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.emo-opcion {
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: 99px;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  min-height: 44px;
  padding: 0 1rem;
  transition: border-color 0.22s var(--suave);
}
.emo-opcion:hover { border-color: var(--acento); }
.emo-opcion[aria-pressed='true'] {
  border-color: var(--acento);
  box-shadow: inset 0 0 0 1px var(--acento);
}

.emo-intensidad { display: grid; gap: 0.5rem; max-width: 30rem; }
.emo-intensidad input[type='range'] { width: 100%; accent-color: var(--acento); min-height: 44px; }
.emo-nivel-texto {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-2);
}

.emo-campo { display: grid; gap: 0.4rem; margin-top: 1.1rem; max-width: 34rem; }
.emo-campo label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.emo-campo label span { text-transform: none; letter-spacing: 0; opacity: 0.7; }
.emo-campo textarea {
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  color: var(--texto);
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.7rem 0.9rem;
  resize: vertical;
}
.emo-campo textarea:focus-visible { border-color: var(--acento); outline: none; }

.emo-acciones { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.emo-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: 44px;
  padding: 0 1.1rem;
}
.emo-vaciar:hover { border-color: #ff8a8a; color: #ff8a8a; }
.emo-estado { margin-top: 0.7rem; font-size: 0.86rem; color: var(--texto-2); min-height: 1.2rem; }
.emo-estado-error { color: #ff8a8a; }

.emo-historial { margin-top: 1.8rem; }
.emo-historial-titulo {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.emo-resumen { margin-top: 0.6rem; font-size: 0.92rem; color: var(--texto-2); }
.emo-resumen strong { color: var(--texto); }
.emo-vacio { font-size: 0.92rem; color: var(--texto-2); max-width: 40rem; }
.emo-lista { list-style: none; padding: 0; margin-top: 0.9rem; display: grid; gap: 0.4rem; }
.emo-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.7rem;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  padding: 0.7rem 0.9rem;
}
.emo-fecha {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--texto-2);
  min-width: 3rem;
}
.emo-punto { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--texto-2); }
.emo-palabra { font-weight: 500; }
.emo-nivel-chip {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--acento);
}
.emo-contexto { flex: 1 1 100%; font-size: 0.86rem; color: var(--texto-2); }

/* Tonos por familia. Se aplican al punto del historial y al borde de la
   opción elegida; el texto nunca depende del color para entenderse. */
[data-tono='enojo'].emo-punto { background: #ff7a5c; }
[data-tono='miedo'].emo-punto { background: #b08cff; }
[data-tono='tristeza'].emo-punto { background: #6ea8ff; }
[data-tono='verguenza'].emo-punto { background: #ff8ac0; }
[data-tono='cansancio'].emo-punto { background: #8b929c; }
[data-tono='calma'].emo-punto { background: #5ad1b0; }
[data-tono='alegria'].emo-punto { background: var(--acento); }

/* ---------- Preparador de conversaciones difíciles ---------- */

.conv-campo { display: grid; gap: 0.35rem; margin-bottom: 1.5rem; max-width: 40rem; }
.conv-campo label {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.conv-campo label strong { color: var(--acento); }
.conv-campo label span { text-transform: none; letter-spacing: 0; opacity: 0.7; }
.conv-pista { font-size: 0.86rem; color: var(--texto-2); }
.conv-campo input[type='text'],
.conv-campo textarea {
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  color: var(--texto);
  font-family: inherit;
  font-size: 0.95rem;
  min-height: 44px;
  padding: 0.7rem 0.9rem;
  resize: vertical;
}
.conv-campo input:focus-visible,
.conv-campo textarea:focus-visible { border-color: var(--acento); outline: none; }

/* El aviso no bloquea nada: las palabras que detecta a veces son legítimas. */
.conv-alerta { font-size: 0.84rem; color: #ffc46b; min-height: 1.1rem; }

.conv-acciones { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.conv-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: 44px;
  padding: 0 1.1rem;
}
.conv-vaciar:hover { border-color: #ff8a8a; color: #ff8a8a; }

.conv-guion { margin-top: 1.6rem; }
.conv-guion:empty { margin-top: 0; }
.conv-guion-titulo {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.conv-contexto { margin-top: 0.4rem; font-size: 0.88rem; color: var(--texto-2); }
.conv-apertura {
  margin-top: 0.8rem;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio-2);
  padding: 1.1rem 1.2rem;
}
.conv-apertura p {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--texto);
}
.conv-nota { margin-top: 0.8rem; font-size: 0.86rem; color: var(--texto-2); max-width: 40rem; }
.conv-recordatorios {
  margin-top: 1.1rem;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.5rem;
  font-size: 0.92rem;
  color: var(--texto-2);
  max-width: 40rem;
}
.conv-recordatorios li::marker { color: var(--acento); }
.conv-recordatorios strong { color: var(--texto); }
.conv-falta { font-size: 0.92rem; color: #ffc46b; max-width: 40rem; }

.conv-guion-acciones { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }
.conv-copiar {
  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: 44px;
  padding: 0 1.1rem;
}
.conv-copiar:hover { border-color: var(--acento); color: var(--acento); }

/* ---------- Generador de rutina de mañana ---------- */

.rut-grupo { border: 0; margin: 0 0 1.6rem; padding: 0; max-width: 44rem; }
.rut-grupo legend {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-2);
  padding: 0;
  margin-bottom: 0.35rem;
}
.rut-grupo legend span { text-transform: none; letter-spacing: 0; opacity: 0.7; }
.rut-grupo .conv-pista { margin-bottom: 0.7rem; }

/* Las opciones de objetivo llevan una descripción larga, así que no caben en la
   pastilla estrecha que usan las escalas del test. Y hay que repetir
   grid-auto-flow y place-items porque a ≤520px la regla base los cambia a
   columna para el test, donde las etiquetas son de una palabra. */
.rut-objetivos .test-opcion {
  flex-basis: 12rem;
  grid-auto-flow: row;
  place-items: center start;
  gap: 0.15rem;
  padding: 0.7rem 1rem;
}
.rut-objetivos .test-opcion span { text-align: left; }

@media (max-width: 520px) {
  .rut-objetivos .test-opcion { grid-auto-flow: row; place-items: center start; }
  /* "15 / 30 / 45 / 60" no necesita una línea entera cada uno: la regla base
     de las escalas está pensada para etiquetas largas, no para dos dígitos. */
  .rut-duracion .test-opcion { flex-basis: 40%; grid-auto-flow: column; place-items: center; gap: 0.4rem; }
}

.rut-hora-campo {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-2);
  margin-bottom: 0.35rem;
}
#rut-hora {
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  color: var(--texto);
  font-family: var(--mono);
  font-size: 1.05rem;
  min-height: 46px;
  padding: 0 0.9rem;
}
#rut-hora:focus-visible { border-color: var(--acento); outline: none; }

.rut-limites { display: grid; gap: 0.5rem; }
.rut-limite {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  font-size: 0.94rem;
  color: var(--texto);
  cursor: pointer;
}
.rut-limite input { width: 20px; height: 20px; accent-color: var(--acento); flex: none; }

.rut-resumen { margin-top: 0.5rem; font-size: 0.92rem; color: var(--texto-2); max-width: 44rem; }
.rut-resumen strong { color: var(--texto); font-family: var(--mono); }

/* Cuando los límites impiden llenar el tiempo pedido. Va en ámbar y no en el
   amarillo de marca: no es un dato, es una advertencia. */
.rut-aviso {
  margin-top: 0.9rem;
  max-width: 44rem;
  padding: 0.85rem 1rem;
  background: var(--panel-2);
  border: 1px solid rgba(255, 196, 107, 0.35);
  border-left: 3px solid #ffc46b;
  border-radius: var(--radio-2);
  font-size: 0.9rem;
  line-height: 1.6;
  color: #dfe3e7;
}
.rut-aviso strong { color: #ffc46b; }

/* Sobra tiempo, pero por granularidad y no por un límite: es información, no
   advertencia, y no debe gritar como si algo estuviera mal. */
.rut-nota {
  margin-top: 0.9rem;
  max-width: 44rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--texto-2);
}

.rut-plan { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.rut-paso {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr);
  gap: 0.9rem;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  padding: 0.9rem 1rem;
}
.rut-hora {
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--acento);
  line-height: 1.5;
}
.rut-paso h4 { font-size: 1rem; line-height: 1.4; margin: 0 0 0.3rem; }
.rut-paso h4 a { color: inherit; }
.rut-min {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-2);
  white-space: nowrap;
}
.rut-paso p { font-size: 0.9rem; line-height: 1.6; color: var(--texto-2); margin: 0; }

@media (max-width: 30rem) {
  .rut-paso { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
}

/* ---------- Hoja de hábitos para imprimir ---------- */

.hoja-form { max-width: 44rem; }
.hoja-fila { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.hoja-campo { display: grid; gap: 0.35rem; flex: 1 1 10rem; }
.hoja-campo-ancho { margin-top: 1.5rem; flex-basis: 100%; }
.hoja-campo label,
.hoja-grupo legend {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-2);
  padding: 0;
}
.hoja-campo label span,
.hoja-grupo legend span { text-transform: none; letter-spacing: 0; opacity: 0.7; }

.hoja-campo select,
.hoja-campo input,
.hoja-habitos input {
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  color: var(--texto);
  font-family: inherit;
  font-size: 0.95rem;
  min-height: 46px;
  padding: 0 0.9rem;
  width: 100%;
}
.hoja-campo select:focus-visible,
.hoja-campo input:focus-visible,
.hoja-habitos input:focus-visible { border-color: var(--acento); outline: none; }

.hoja-grupo { border: 0; margin: 1.5rem 0 0; padding: 0; }
.hoja-grupo .conv-pista { margin: 0.35rem 0 0.7rem; }
.hoja-habitos { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.hoja-alerta { font-size: 0.84rem; color: #ffc46b; min-height: 1.1rem; margin-top: 0.4rem; }

.hoja-previa { margin-top: 1.6rem; }
.hoja-previa-ceja {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-2);
  margin-bottom: 0.6rem;
}

/* En pantalla la hoja se enseña ya en blanco: es lo que va a salir por la
   impresora, y verla en oscuro haría creer que gastará tinta negra. */
.hoja {
  background: #fff;
  color: #111;
  border-radius: var(--radio-2);
  padding: 1.4rem 1.2rem;
  overflow-x: auto;
}
.hoja-cab { border-bottom: 2px solid #111; padding-bottom: 0.5rem; margin-bottom: 0.7rem; }
.hoja-mes {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
  text-transform: capitalize;
  color: #111;
}
.hoja-regla { font-size: 0.9rem; color: #333; margin-top: 0.2rem; }
.hoja-regla-vacia { color: #777; }

.hoja-tabla { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.hoja-tabla th, .hoja-tabla td { border: 1px solid #999; padding: 0; }
.hoja-tabla thead th {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.78rem;
  color: #111;
  padding: 0.35rem 0.4rem;
  text-align: left;
  vertical-align: bottom;
  word-break: break-word;
}
.hoja-esquina { width: 3.4rem; }
.hoja-tabla tbody th {
  font-family: var(--mono);
  font-weight: 400;
  color: #111;
  padding: 0 0.4rem;
  text-align: left;
  white-space: nowrap;
}
.hoja-num { font-weight: 700; }
.hoja-ini { color: #777; margin-left: 0.35rem; }
/* La casilla tiene que dar para un bolígrafo: 22px en pantalla, 6mm en papel. */
.hoja-marca { height: 22px; }
.hoja-finde th, .hoja-finde td { background: #ededed; }
.hoja-tabla tfoot th {
  font-family: var(--sans);
  font-weight: 600;
  color: #111;
  padding: 0.3rem 0.4rem;
  text-align: left;
}
.hoja-en-blanco .hoja-tabla thead th { min-height: 2.2rem; }
.hoja-pie { margin-top: 0.6rem; font-size: 0.7rem; color: #666; }

@media (max-width: 34rem) {
  .hoja { padding: 1rem 0.7rem; }
  .hoja-tabla { font-size: 0.76rem; }
}

@media print {
  /* Fuera el formulario: en papel solo va la hoja. El resto de lo que se
     esconde ya lo cubre el bloque común de impresión de más arriba. */
  .hoja-form, .conv-acciones, .hoja-previa-ceja { display: none !important; }

  .hoja-previa { margin: 0 !important; }
  .hoja { padding: 0 !important; border-radius: 0 !important; overflow: visible !important; }
  .hoja-cab { border-bottom: 1.5pt solid #000 !important; }
  .hoja-mes { font-size: 16pt !important; }
  .hoja-regla { font-size: 10pt !important; }

  .hoja-tabla { font-size: 9pt !important; }
  .hoja-tabla th, .hoja-tabla td { border: 0.5pt solid #000 !important; }
  .hoja-marca { height: 6mm !important; }
  /* Los fines de semana se distinguen con trama gris; muchas impresoras
     domésticas descartan los fondos, así que no puede ser la única señal:
     para eso está la inicial del día en cada fila. */
  .hoja-finde th, .hoja-finde td { background: #e8e8e8 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .hoja-tabla tr { page-break-inside: avoid; }
  .hoja-pie { font-size: 7pt !important; }
}

/* ============================================================
   HERRAMIENTA: temporizador Pomodoro
   ============================================================ */

/* Los botones de ritmo reutilizan .resp-opcion, que ya tenía la forma exacta:
   se añadió .pom-opcion a aquellos selectores en vez de repetir aquí fondo,
   borde y radio. La guía manda: todo componente nuevo entra en la lista que ya
   existe. */

.pom-cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 1.1rem;
}

.pom-reloj {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  margin: 1.6rem 0 0.2rem;
  text-align: center;
}
/* La cuenta lleva tabular-nums: sin ellas, cada cifra tiene su ancho y el
   número entero da un salto lateral en cada segundo. */
.pom-cuenta {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(3rem, 14vw, 5rem);
  line-height: 1;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.pom-fase {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.05rem, 3.4vw, 1.35rem);
  letter-spacing: -0.015em;
  max-width: 34rem;
  text-wrap: balance;
}
.pom-detalle {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-2);
  min-height: 1rem;
}

/* En reposo la cuenta enseña apagada lo que dura el bloque que vas a firmar,
   y cambia si cambias de ritmo. */
.pom-cuenta-espera { color: var(--texto-2); }

/* .btn trae su propio display, y eso le gana al display:none que el navegador
   aplica por el atributo hidden: los botones que solo salen a mitad de bloque
   se veían todos a la vez. Se corrige donde ocurre, no en global. */
.pom-acciones [hidden] { display: none; }

.pom-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: center;
  margin-top: 1.2rem;
}
/* Anular no es parar: es tirar el bloque. Va en rojo al pasar por encima
   porque destruye un dato, igual que el resto de botones destructivos del
   sitio, pero no lleva el color puesto de salida para no gritar mientras
   trabajas. */
.pom-anular {
  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: 44px;
  padding: 0 1.1rem;
}
.pom-anular:hover { border-color: #ff8a8a; color: #ff8a8a; }

.pom-sonido {
  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: 44px;
  padding: 0 1.1rem;
}
.pom-sonido[aria-pressed='true'] { border-color: var(--acento); color: var(--texto); }

.pom-sin-pausa {
  margin-top: 0.9rem;
  font-size: 0.82rem;
  color: var(--texto-2);
  max-width: 44rem;
}

/* La hoja de al lado: el campo de interrupción vive dentro del bloque y no lo
   detiene. Es el gesto entero de la guía —anotar en cuatro palabras y seguir—
   así que tiene que costar un clic, no dos pantallas. */
.pom-corte {
  margin-top: 1.4rem;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  padding: 1rem 1.05rem;
}
.pom-corte[hidden], .pom-descanso[hidden] { display: none; }
.pom-corte-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.55rem;
}
.pom-corte-fila input {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: 44px;
  background: var(--panel);
  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.9rem;
}
.pom-corte-fila input:focus-visible { border-color: var(--acento); }
.pom-corte-fila button {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  color: var(--texto);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.9rem;
  min-height: 44px;
  padding: 0 1.1rem;
}
.pom-corte-fila button:hover { border-color: var(--acento); }

.pom-descanso {
  margin-top: 1.4rem;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  padding: 1rem 1.05rem;
}
.pom-descanso ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.pom-descanso li { font-size: 0.9rem; color: var(--texto-2); margin-bottom: 0.2rem; }

.pom-hoja { margin-top: 1.8rem; border-top: 1px solid var(--borde); padding-top: 1.3rem; }

/* Las rayas son rayas de verdad, no un número: cinco palotes se leen de un
   vistazo y ese vistazo es el que la guía quiere conservar del papel. */
.pom-rayas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.9rem;
}
.pom-rayas[hidden] { display: none; }
.pom-raya {
  display: block;
  width: 4px;
  height: 34px;
  border-radius: 2px;
  background: var(--acento);
}
/* Cada cuarto palote se separa: así se cuentan de cuatro en cuatro sin
   contarlos, que es para lo que sirven los grupos en el papel. */
.pom-raya:nth-child(4n) { margin-right: 0.75rem; }

.pom-resumen {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.pom-resumen li { display: grid; gap: 0.15rem; }
.pom-dato-et {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.pom-resumen strong { font-family: var(--mono); font-size: 1.15rem; }

.pom-sub {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-2);
  margin: 1.1rem 0 0.45rem;
}
/* Con el ancho entero de la tarjeta, "25 min" se iba al otro extremo de la
   pantalla y dejaba de leerse junto a su tarea. Medida de lectura y ya. */
.pom-bloques, .pom-cortes-lista, .pom-historial-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  max-width: 46rem;
}
.pom-bloques li, .pom-cortes-lista li, .pom-historial-lista li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.7rem;
  align-items: baseline;
  font-size: 0.92rem;
  border-bottom: 1px solid var(--borde);
  padding-bottom: 0.35rem;
}
.pom-bloques li span:nth-child(2) { flex: 1 1 10rem; min-width: 0; }
.pom-hora {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--texto-2);
  flex: 0 0 auto;
}
.pom-min { font-family: var(--mono); font-size: 0.68rem; color: var(--texto-2); }
.pom-vacio { font-size: 0.88rem; color: var(--texto-2); }

@media (max-width: 34rem) {
  .pom-cabecera { align-items: flex-start; }
  .pom-raya { height: 28px; }
}

/* ============================================================
   HERRAMIENTA: clasificador de pendientes
   ============================================================ */

/* Los botones de marca reutilizan .resp-opcion, igual que hizo el Pomodoro:
   se añade .cla-marca a aquella lista en vez de repetir fondo, borde y radio. */

.cla-pasos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  margin: 1.1rem 0 1.4rem;
  padding: 0;
}
.cla-pasos li {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-2);
  border: 1px solid var(--borde);
  border-radius: 99px;
  padding: 0.4rem 0.8rem;
}
.cla-pasos li[aria-current='step'] { border-color: var(--acento); color: var(--texto); }
/* Los pasos ya hechos se pueden pulsar para volver; los de delante, no, así
   que solo estos llevan cursor de mano. */
.cla-paso-hecho { cursor: pointer; }
.cla-paso-hecho:hover { border-color: var(--acento); }

.cla-caja[hidden] { display: none; }
.cla-intro { font-size: 0.92rem; color: var(--texto-2); max-width: 44rem; margin-bottom: 1rem; }

.cla-alta { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cla-alta input {
  flex: 1 1 14rem;
  min-width: 0;
  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: 1rem;
  padding: 0.6rem 0.9rem;
}
.cla-alta input:focus-visible { border-color: var(--acento); }

.cla-lista { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.35rem; max-width: 46rem; }
.cla-lista li {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--borde);
  padding-bottom: 0.4rem;
  font-size: 0.95rem;
}
.cla-quitar {
  background: none;
  border: 1px solid var(--borde);
  border-radius: 99px;
  color: var(--texto-2);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  min-height: 44px;
  padding: 0 0.9rem;
  flex: 0 0 auto;
}
.cla-quitar:hover { border-color: #ff8a8a; color: #ff8a8a; }
.cla-cuenta {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-2);
  margin-top: 0.9rem;
}

.cla-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--borde);
  padding: 0.55rem 0;
  max-width: 46rem;
}
.cla-fila-texto { flex: 1 1 12rem; min-width: 0; font-size: 0.95rem; }
.cla-marcas-botones { display: flex; gap: 0.4rem; flex: 0 0 auto; }

.cla-prueba {
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  padding: 1rem 1.05rem;
  margin-bottom: 0.8rem;
  max-width: 46rem;
  display: grid;
  gap: 0.8rem;
}
.cla-prueba-titulo {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.05rem;
  margin: 0;
}
.cla-decision { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.cla-decision .cla-dato-et { flex: 1 1 100%; }

.cla-dato-et {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.cla-sub {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-2);
  margin: 1.4rem 0 0.5rem;
}
.cla-vacio { font-size: 0.88rem; color: var(--texto-2); }

/* Dos columnas exactas, no auto-fit: con auto-fit los cuatro se ponen en una
   sola fila en pantalla ancha y se pierde la forma de la matriz. En 2x2 la
   fila de arriba es lo importante y la de abajo lo que no, que es como lo
   dibuja la guía. Por debajo se apila, y ahí no pasa nada: cada cuadrante
   lleva su regla escrita ("Urgente e importante"), así que no depende de la
   posición para entenderse. */
.cla-rejilla {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: 1fr;
  max-width: 58rem;
  margin-top: 1.1rem;
}
@media (min-width: 40rem) {
  .cla-rejilla { grid-template-columns: 1fr 1fr; }
}
.cla-cuadrante {
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  padding: 1rem 1.05rem;
}
.cla-cuadrante h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.15rem;
  margin: 0.2rem 0 0.6rem;
}
/* El 2 lleva el acento porque es el que la guía defiende: nunca te va a
   interrumpir para recordarte que existe. */
.cla-q2 { border-color: var(--acento); }
.cla-cuadrante ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.25rem; }
.cla-cuadrante li { font-size: 0.95rem; }
.cla-cuadrante-pie { font-size: 0.82rem; color: var(--texto-2); margin-top: 0.7rem; }

.cla-diagnostico { margin-top: 1.3rem; display: grid; gap: 0.6rem; max-width: 46rem; }
.cla-diagnostico p { font-size: 0.92rem; }
.cla-alerta { color: var(--ojo); }

.cla-agenda { margin-top: 0.6rem; max-width: 46rem; display: grid; gap: 0.6rem; }
.cla-agenda p { font-size: 0.92rem; color: var(--texto-2); }
.cla-select, .cla-agenda-fila input {
  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;
  min-height: 48px;
  padding: 0.5rem 0.9rem;
  max-width: 100%;
}
.cla-agenda-fila { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cla-agenda-fila input { flex: 1 1 9rem; min-width: 0; }
.cla-agendada {
  background: var(--panel-2);
  border: 1px solid var(--acento);
  border-radius: var(--radio-2);
  padding: 1rem 1.05rem;
  display: grid;
  gap: 0.5rem;
  justify-items: start;
}
.cla-agendada-texto {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--texto) !important;
  margin: 0;
}
.cla-agendada-cuando {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--acento) !important;
}

.cla-acciones { margin-top: 1.3rem; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.cla-acciones [hidden] { display: none; }
/* Un .btn-primario deshabilitado con opacity queda color oliva: el amarillo
   de marca al 45 % sobre el panel oscuro no se lee como "todavía no", se lee
   como un color roto. Se apaga cambiando el relleno, y el borde va por
   box-shadow porque .btn no tiene borde y añadirle uno movería 2 px. */
.cla-acciones .btn:disabled {
  background: none;
  color: var(--texto-2);
  box-shadow: inset 0 0 0 1px var(--borde);
  cursor: not-allowed;
}
.cla-acciones .btn:disabled:hover { filter: none; transform: none; }

/* ============================================================
   HERRAMIENTA: calculadora de gastos hormiga
   ============================================================ */

.horm-alta {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin-top: 1.1rem;
}
/* Los campos del destino viven fuera de .horm-alta y se quedaron sin estilo:
   21 px de alto y aspecto de formulario del navegador en medio del diseño. */
.horm-alta input, .horm-alta select, .horm-destino-campos 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: 1rem;
  padding: 0.6rem 0.9rem;
}
.horm-alta input:focus-visible, .horm-alta select:focus-visible,
.horm-destino-campos input:focus-visible { border-color: var(--acento); }
.horm-campo { display: grid; gap: 0.35rem; }
.horm-campo label {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-2);
}

/* Las dos marcas son el corazón del método: separan lo que se cancela una vez
   de lo que hay que decidir cada día. Van juntas y con su explicación al lado,
   porque de nada sirve la casilla si no se entiende qué está preguntando. */
.horm-marcas-alta {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.9rem;
  max-width: 46rem;
}
.horm-check {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  min-height: 44px;
}
.horm-check:hover { border-color: var(--acento); }
.horm-check input { margin-top: 0.2rem; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--acento); }
.horm-check span { font-size: 0.92rem; }
.horm-check small { display: block; color: var(--texto-2); font-size: 0.8rem; margin-top: 0.15rem; }

.horm-filas { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.4rem; max-width: 52rem; }
.horm-filas li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.7rem;
  align-items: baseline;
  border-bottom: 1px solid var(--borde);
  padding-bottom: 0.45rem;
}
.horm-concepto { font-size: 0.98rem; flex: 1 1 9rem; min-width: 0; }
.horm-detalle { font-family: var(--mono); font-size: 0.68rem; color: var(--texto-2); }
.horm-marcas { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.horm-tag {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 99px;
  padding: 0.2rem 0.5rem;
  font-style: normal;
  border: 1px solid var(--borde);
  color: var(--texto-2);
}
.horm-tag-auto { border-color: var(--acento); color: var(--acento); }
.horm-anual { font-family: var(--mono); font-size: 0.82rem; }
.horm-quitar {
  background: none;
  border: 1px solid var(--borde);
  border-radius: 99px;
  color: var(--texto-2);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  min-height: 44px;
  padding: 0 0.85rem;
  flex: 0 0 auto;
}
.horm-quitar:hover { border-color: #ff8a8a; color: #ff8a8a; }

.horm-resultado[hidden] { display: none; }
.horm-resultado { margin-top: 1.8rem; border-top: 1px solid var(--borde); padding-top: 1.4rem; }

.horm-cifra-grande {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1.8rem, 7vw, 2.8rem);
  color: var(--acento);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.horm-submes { font-family: var(--mono); font-size: 0.72rem; color: var(--texto-2); margin-top: 0.2rem; }

/* Tres montones, no un total: es la tesis de la guía. En pantalla ancha van en
   fila para poder compararlos de un vistazo, que es justo lo que hace ver que
   el montón fácil rinde más que el difícil. */
.horm-montones {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-top: 1.4rem;
}
.horm-monton {
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  padding: 1rem 1.05rem;
}
.horm-monton-acento { border-color: var(--acento); }
.horm-monton h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.05rem;
  margin: 0.2rem 0 0.6rem;
  text-wrap: balance;
}
.horm-cifra {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.horm-monton ul { margin: 0.7rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; }
.horm-monton li { font-size: 0.9rem; }
.horm-monton-pie { font-size: 0.82rem; color: var(--texto-2); margin-top: 0.8rem; }
.horm-dato-et {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-2);
}
/* El botón de elegir se sale de la lista con viñeta: es un control, no un dato. */
.horm-monton li:has(> .horm-elegir) { list-style: none; margin-left: -1.1rem; }
.horm-elegir { width: 100%; font-size: 0.9rem; }

.horm-sub {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-2);
  margin: 1.6rem 0 0.4rem;
}
.horm-recuperado {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1.3rem, 5vw, 1.8rem);
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.horm-plan, .horm-destino { max-width: 48rem; }
.horm-destino-campos { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin-top: 0.6rem; }
.horm-vacio { font-size: 0.88rem; color: var(--texto-2); }

@media (max-width: 34rem) {
  .horm-filas li { align-items: flex-start; }
  .horm-anual { width: 100%; }
}

/* ============================================================
   HERRAMIENTA: redactor de metas
   ============================================================ */

/* Los cinco campos van en columna y no en rejilla: se rellenan en orden y cada
   uno depende del anterior. Una rejilla de dos columnas invita a saltar, y el
   orden es justamente el método. */
.meta-campos { display: grid; gap: 0.9rem; max-width: 44rem; margin-top: 1.1rem; }
.meta-campo { display: grid; gap: 0.35rem; }
.meta-campo label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.meta-campo .pista {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--texto-2);
}
.meta-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: 1rem;
  padding: 0.6rem 0.9rem;
}
.meta-campo input:focus-visible { border-color: var(--acento); }

.meta-resultado[hidden] { display: none; }
.meta-resultado { margin-top: 1.8rem; border-top: 1px solid var(--borde); padding-top: 1.4rem; }

/* La frase es el producto entero de esta herramienta, así que se trata como
   una cita y no como un dato: se lee, se dice en voz alta y se copia. */
.meta-frase {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.15rem, 3.6vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  background: var(--panel-2);
  border: 1px solid var(--acento);
  border-radius: var(--radio-2);
  padding: 1.1rem 1.2rem;
  max-width: 46rem;
  text-wrap: pretty;
}
.meta-proceso { margin-top: 1.4rem; max-width: 46rem; }
.meta-proceso-frase {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.1rem;
  margin: 0.3rem 0 0.6rem;
}
.meta-dato-et {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.meta-nota { font-size: 0.86rem; color: var(--texto-2); }

.meta-avisos { margin-top: 1.6rem; max-width: 46rem; }
/* Color de "ojo", no de error: la guía dice que se lea en voz alta y se decida,
   no que la herramienta prohíba. Rojo aquí sería mentir sobre la gravedad. */
.meta-avisos-lista {
  list-style: none;
  margin: 0.5rem 0 0.8rem;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.meta-avisos-lista li {
  border-left: 2px solid var(--ojo);
  padding-left: 0.9rem;
  font-size: 0.92rem;
}
.meta-avisos-lista strong { color: var(--ojo); }
.meta-limpia {
  border-left: 2px solid var(--bien);
  padding-left: 0.9rem;
  font-size: 0.92rem;
}

.meta-acciones { margin-top: 1.3rem; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.meta-copiar, .meta-limpiar {
  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: 44px;
  padding: 0 1.1rem;
}
.meta-copiar:hover { border-color: var(--acento); color: var(--texto); }
.meta-limpiar:hover { border-color: #ff8a8a; color: #ff8a8a; }

/* ============================================================
   HERRAMIENTA: preparador de entrevista
   ============================================================ */

/* Las cuatro historias van en columna: se escriben en orden y cada una es un
   trabajo en sí misma. Una rejilla las convertiría en un formulario, y esto es
   una hoja de ensayo. */
.ent-historias { display: grid; gap: 1rem; margin-top: 1.1rem; max-width: 48rem; }
.ent-historia {
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  padding: 1.1rem 1.15rem;
}
.ent-historia h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.15rem;
  margin: 0.2rem 0 0.2rem;
}
.ent-dato-et {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.ent-pista { font-size: 0.82rem; color: var(--texto-2); }

.ent-campo { display: grid; gap: 0.3rem; margin-top: 0.9rem; }
.ent-campo label {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.ent-campo textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 0.98rem;
  line-height: 1.5;
  padding: 0.6rem 0.9rem;
}
.ent-campo textarea:focus-visible { border-color: var(--acento); }

.ent-historia-pie {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 1rem;
}
.ent-avisos { flex: 1 1 16rem; display: grid; gap: 0.4rem; }
.ent-aviso {
  border-left: 2px solid var(--ojo);
  padding-left: 0.8rem;
  font-size: 0.84rem;
  color: var(--texto-2);
}

/* El cronómetro es un botón porque el ejercicio es tuyo, no de la página: la
   guía dice que decirla en voz alta —no leerla— es lo que la deja lista. */
.ent-crono {
  background: none;
  border: 1px solid var(--borde);
  border-radius: 99px;
  color: var(--texto);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  min-height: 44px;
  padding: 0 1.1rem;
  flex: 0 0 auto;
}
.ent-crono:hover { border-color: var(--acento); }

.ent-preguntas { display: grid; gap: 0.5rem; margin-top: 0.9rem; max-width: 48rem; }
.ent-pregunta { width: 100%; font-size: 0.92rem; text-align: left; }

.ent-checklist { display: grid; gap: 0.5rem; margin-top: 0.9rem; max-width: 48rem; }

.ent-hoja {
  margin-top: 1.8rem;
  border-top: 1px solid var(--borde);
  padding-top: 1.3rem;
  max-width: 48rem;
}
.ent-resumen {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.1rem;
  margin: 0.3rem 0 0.5rem;
}
.ent-acciones { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ent-copiar, .ent-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: 44px;
  padding: 0 1.1rem;
}
.ent-copiar { color: var(--texto); }
.ent-copiar:hover { border-color: var(--acento); }
.ent-copiar[hidden] { display: none; }
.ent-vaciar:hover { border-color: #ff8a8a; color: #ff8a8a; }