/* ==========================================================================================================
   CardioTeca · ESPACIO Salud Cardiovascular · herramienta «Tu plan en 2 minutos» (pieza P100 del lote 2, 24/10/2026).
   Va en /files/calculadoras/salud/plan-2-minutos.css y la enlaza el artículo «Test del corazón en 2 minutos: cinco
   preguntas y qué leer primero». Todo cuelga de .plan2 (el recuadro de la herramienta dentro de la píldora). Colores: los
   de la hoja de la web (--ct-…) con su valor de reserva, como el test del infarto (test-infarto.css); los de cada
   situación, los de sus círculos en la portada de Salud. Letra: la de la web. Cajas con esquinas redondeadas, nunca
   píldoras. Cabe en 260 px. Sin !important.
   ========================================================================================================== */
.plan2 {
  --p-tinta: var(--ct-tinta, #13233b);
  --p-gris: var(--ct-gris, #5f6b7a);
  --p-linea: var(--ct-linea, #dbe3ec);
  --p-linea-f: var(--ct-linea-fuerte, #b5c7da);
  --p-suave: var(--ct-suave, #f2f5f9);
  --p-marino: var(--ct-azul, #163a63);
  --p-azul: var(--ct-enlace, #1d5a9e);
  --p-granate: var(--ct-acento, #97112a);
  --p-granate-s: var(--ct-error-suave, #faecee);
  --p-sit: #163a63;
  --p-r: 10px;
  font-family: var(--ct-letra, "Barlow", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  font-variant-numeric: lining-nums;
  color: var(--p-tinta);
  border: 1px solid var(--p-linea-f);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--ct-sombra-1, 0 1px 2px rgba(19, 35, 59, .05), 0 6px 18px rgba(19, 35, 59, .07));
  padding: 18px 16px 20px;
  margin: 24px 0 28px;
  line-height: 1.45;
  font-size: 16px;
}
.plan2 *, .plan2 *::before, .plan2 *::after { box-sizing: border-box; }
.plan2 p { margin: 0 0 10px; font-size: 16px; line-height: 1.45; }
.plan2 a { color: var(--p-azul); }

/* Cabecera */
.plan2 .plan2-cab { border-bottom: 1px solid var(--p-linea); padding-bottom: 12px; margin-bottom: 12px; }
.plan2 .plan2-sello { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--p-marino); background: var(--p-suave); border-radius: 6px; padding: 4px 8px; margin: 0 0 8px; }
.plan2 .plan2-titulo { font-family: var(--ct-letra-titulares, "Faustina", Georgia, serif); font-weight: 600; font-size: 24px; line-height: 1.15; color: var(--p-marino); margin: 0 0 6px; }
.plan2 .plan2-sub { color: var(--p-gris); font-size: 15px; margin: 0; }
.plan2 .plan2-sinjs { font-size: 15px; color: var(--p-gris); }

/* Barra de avance (la pinta el programa) */
.plan2 .plan2-progreso { font-size: 15px; font-weight: 600; color: var(--p-marino); margin: 0 0 6px; }
.plan2 .plan2-barra { height: 8px; border-radius: 4px; background: var(--p-suave); border: 1px solid var(--p-linea); overflow: hidden; margin: 0 0 14px; }
.plan2 .plan2-barra-r { height: 100%; width: 0; background: var(--p-marino); border-radius: 4px; transition: width .2s ease; }

/* Cada pregunta: sin el programa se leen todas, con sus respuestas y lo que conviene leer debajo de cada una */
.plan2 .plan2-p { border: 1px solid var(--p-linea); border-radius: var(--p-r); background: #fff; padding: 14px 14px 12px; margin: 0 0 14px; outline: none; }
.plan2 .plan2-num { font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--p-granate); margin: 0 0 6px; }
/* Con el programa, el número de la pregunta ya lo dice la barra de avance */
.plan2.plan2-activo .plan2-num { display: none; }
.plan2 .plan2-enun { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--p-marino); margin: 0 0 6px; outline: none; }
.plan2 .plan2-ayudita { font-size: 14.5px; color: var(--p-gris); margin: 0 0 12px; }
.plan2 .plan2-ops { margin: 6px 0 4px; padding-left: 20px; }
.plan2 .plan2-ops > li { margin: 0 0 10px; font-size: 16px; line-height: 1.4; }
.plan2 .plan2-op-t { font-weight: 600; }
.plan2 .plan2-lee { margin: 4px 0 0; padding-left: 18px; }
.plan2 .plan2-lee li { margin: 0 0 4px; font-size: 15px; line-height: 1.4; }

/* Los botones de respuesta: uno debajo de otro, a todo el ancho */
.plan2 .plan2-botones { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 6px 0 4px; }
.plan2 .plan2-boton { display: block; width: 100%; min-height: 46px; text-align: left; font: inherit; font-size: 15.5px; line-height: 1.35; color: var(--p-tinta); background: #fff; border: 1.5px solid var(--p-linea-f); border-radius: var(--p-r); padding: 10px 12px 10px 42px; cursor: pointer; position: relative; -webkit-appearance: none; appearance: none; }
.plan2 .plan2-boton::before { content: ""; position: absolute; left: 13px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border: 2px solid var(--p-linea-f); border-radius: 50%; background: #fff; }
.plan2 .plan2-botones.plan2-varias .plan2-boton::before { border-radius: 4px; }
.plan2 .plan2-boton:hover { border-color: var(--p-marino); }
.plan2 .plan2-boton:focus { outline: none; box-shadow: 0 0 0 3px rgba(22, 58, 99, .2); border-color: var(--p-marino); }
.plan2 .plan2-boton.plan2-marcada { border-color: var(--p-marino); background: var(--p-suave); font-weight: 600; }
.plan2 .plan2-boton.plan2-marcada::before { content: "✓"; border-color: var(--p-marino); background: var(--p-marino); color: #fff; font-size: 12px; font-weight: 800; line-height: 14px; text-align: center; }

/* Atrás y Siguiente */
.plan2 .plan2-nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; margin: 12px 0 0; }
.plan2 .plan2-atras, .plan2 .plan2-sig, .plan2 .plan2-repetir { font: inherit; font-size: 15.5px; font-weight: 700; border-radius: 8px; padding: 10px 16px; min-height: 44px; cursor: pointer; }
.plan2 .plan2-atras { color: var(--p-marino); background: #fff; border: 1.5px solid var(--p-linea-f); }
.plan2 .plan2-sig, .plan2 .plan2-repetir { color: #fff; background: var(--p-marino); border: 0; margin-left: auto; }
.plan2 .plan2-sig:disabled { background: var(--p-linea-f); cursor: default; }
.plan2 .plan2-atras:focus, .plan2 .plan2-sig:focus, .plan2 .plan2-repetir:focus { outline: none; box-shadow: 0 0 0 3px rgba(22, 58, 99, .3); }

/* Por dónde empezar en cada situación (sin el programa, se lee; con él, son los datos del resultado) */
.plan2 .plan2-sits { border-top: 1px solid var(--p-linea); padding-top: 12px; margin: 4px 0 14px; }
.plan2 .plan2-sits-tit { font-weight: 700; font-size: 17px; color: var(--p-marino); margin: 0 0 10px; }
.plan2 .plan2-sit { border-left: 5px solid var(--p-sit); background: var(--p-suave); border-radius: 0 var(--p-r) var(--p-r) 0; padding: 10px 12px 6px; margin: 0 0 10px; }
.plan2 .plan2-sit-t { margin: 0 0 4px; }
.plan2 .plan2-sit-dice { font-size: 15px; color: var(--p-gris); margin: 0 0 6px; }
.plan2 .plan2-usa-t { font-size: 14px; font-weight: 700; color: var(--p-gris); margin: 6px 0 2px; }

/* El color de cada situación (los de los círculos de la portada) */
.plan2 [data-k="sano"] { --p-sit: #1f7a4d; }
.plan2 [data-k="riesgo"] { --p-sit: #a15c07; }
.plan2 [data-k="enfermedad"] { --p-sit: #97112a; }
.plan2 [data-k="tratado"] { --p-sit: #5b3fa0; }
.plan2 [data-k="cuido"] { --p-sit: #163a63; }

/* El resultado (lo pinta el programa) */
.plan2 .plan2-res { border: 1px solid var(--p-linea); border-top: 6px solid var(--p-sit); border-radius: var(--p-r); background: #fff; padding: 14px 14px 12px; margin: 0 0 14px; outline: none; }
.plan2 .plan2-res-sello { font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--p-gris); margin: 0 0 6px; }
.plan2 .plan2-res-tit { font-family: var(--ct-letra-titulares, "Faustina", Georgia, serif); font-weight: 600; font-size: 22px; line-height: 1.25; color: var(--p-marino); margin: 0 0 8px; outline: none; }
.plan2 .plan2-pastilla { display: inline-block; color: #fff; background: var(--p-sit); border-radius: 6px; padding: 1px 9px 2px; font-family: var(--ct-letra, "Barlow", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); font-weight: 700; font-size: .85em; }
.plan2 .plan2-res-frase { font-size: 15.5px; margin: 0 0 6px; }
.plan2 .plan2-res-quien { font-size: 15px; color: var(--p-gris); margin: 0 0 10px; }
.plan2 .plan2-res-h { font-weight: 800; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--p-sit); margin: 14px 0 6px; }
.plan2 .plan2-res-lista { margin: 0 0 6px; padding-left: 22px; }
.plan2 .plan2-res-lista li { margin: 0 0 9px; font-size: 16px; line-height: 1.38; }
.plan2 .plan2-res-lista li a { font-weight: 600; }
.plan2 .plan2-pq { display: block; font-size: 14px; color: var(--p-gris); margin-top: 1px; }
.plan2 .plan2-res-nota { font-size: 14.5px; color: var(--p-gris); border-top: 1px solid var(--p-linea); padding-top: 10px; margin: 12px 0 10px; }
.plan2 .plan2-portada { font-weight: 700; }
.plan2 .plan2-res .plan2-nav { margin-top: 6px; }

/* La caja de pedir ayuda va dentro del recuadro, al final: que no se pegue al borde */
.plan2 .box { margin: 10px 0 0; }

@media (min-width: 640px) {
  .plan2 { padding: 20px 22px 22px; }
  .plan2 .plan2-p, .plan2 .plan2-res { padding: 16px 18px 14px; }
  .plan2 .plan2-botones.plan2-varias { grid-template-columns: 1fr 1fr; }
}
/* Lo que el programa esconde con el atributo hidden: [hidden] dos veces para que gane a las reglas de arriba (sin !important) */
.plan2 [hidden][hidden] { display: none; }
/* Al imprimir: el resultado si lo hay; si no, las preguntas con lo que conviene leer. Sin botones */
@media print {
  .plan2 { box-shadow: none; }
  .plan2 .plan2-botones, .plan2 .plan2-nav, .plan2 .plan2-progreso, .plan2 .plan2-barra { display: none; }
  .plan2 .plan2-p, .plan2 .plan2-res, .plan2 .plan2-sit { break-inside: avoid; }
}