/* ==========================================================================================================
   CardioTeca · ESPACIO Salud Cardiovascular · test «Cómo saber si es un infarto: ponte a prueba con diez situaciones»
   (pieza P80 del lote 2, 24/10/2026). Va en /files/calculadoras/salud/test-infarto.css y la enlaza el artículo. Todo
   cuelga de .tinf (el recuadro del test dentro de la píldora). Colores: los de la hoja de la web (--ct-…) con su valor
   de reserva, como la calculadora de pulsaciones (pulsaciones-ejercicio.css). Letra: la de la web. Sin emojis. Cajas
   con esquinas redondeadas, nunca píldoras. Cabe en 260 px. Sin !important.
   ========================================================================================================== */
.tinf {
  --t-tinta: var(--ct-tinta, #13233b);
  --t-gris: var(--ct-gris, #5f6b7a);
  --t-linea: var(--ct-linea, #dbe3ec);
  --t-linea-f: var(--ct-linea-fuerte, #b5c7da);
  --t-suave: var(--ct-suave, #f2f5f9);
  --t-marino: var(--ct-azul, #163a63);
  --t-azul: var(--ct-enlace, #1d5a9e);
  --t-granate: var(--ct-acento, #97112a);
  --t-granate-s: var(--ct-error-suave, #faecee);
  --t-verde: var(--ct-acierto, #2e7d32);
  --t-verde-s: var(--ct-acierto-suave, #f0f7f1);
  --t-r: 10px;
  font-family: var(--ct-letra, "Barlow", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  font-variant-numeric: lining-nums;
  color: var(--t-tinta);
  border: 1px solid var(--t-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;
}
.tinf *, .tinf *::before, .tinf *::after { box-sizing: border-box; }
.tinf p { margin: 0 0 10px; font-size: 16px; line-height: 1.45; }
.tinf a { color: var(--t-azul); }

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

/* Cada situación */
.tinf .tinf-sit { border: 1px solid var(--t-linea); border-radius: var(--t-r); background: #fff; padding: 14px 14px 12px; margin: 0 0 14px; scroll-margin-top: 16px; outline: none; }
.tinf .tinf-num { font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--t-granate); margin: 0 0 6px; }
.tinf .tinf-caso { font-size: 16.5px; margin: 0 0 12px; }
.tinf .tinf-ops { margin: 0 0 10px; padding-left: 22px; }
.tinf .tinf-ops li { margin: 0 0 6px; font-size: 15.5px; line-height: 1.4; }

/* Los botones de respuesta: uno debajo de otro, a todo el ancho */
.tinf .tinf-botones { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0 0 4px; }
.tinf .tinf-boton { display: block; width: 100%; min-height: 46px; text-align: left; font: inherit; font-size: 15.5px; line-height: 1.35; color: var(--t-tinta); background: #fff; border: 1.5px solid var(--t-linea-f); border-radius: var(--t-r); padding: 10px 12px 10px 40px; cursor: pointer; position: relative; -webkit-appearance: none; appearance: none; }
.tinf .tinf-boton::before { content: ""; position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border: 2px solid var(--t-linea-f); border-radius: 50%; background: #fff; }
.tinf .tinf-boton:hover { border-color: var(--t-marino); }
.tinf .tinf-boton:focus { outline: none; box-shadow: 0 0 0 3px rgba(22, 58, 99, .2); border-color: var(--t-marino); }
.tinf .tinf-boton:disabled { cursor: default; color: var(--t-gris); }
.tinf .tinf-boton:disabled:hover { border-color: var(--t-linea-f); }
.tinf .tinf-boton.tinf-correcta { color: var(--t-tinta); border-color: var(--t-verde); background: var(--t-verde-s); }
.tinf .tinf-boton.tinf-correcta::before { content: "✓"; border-color: var(--t-verde); background: var(--t-verde); color: #fff; font-size: 12px; font-weight: 800; line-height: 12px; text-align: center; }
.tinf .tinf-boton.tinf-mal { color: var(--t-tinta); border-color: var(--t-granate); background: var(--t-granate-s); }
.tinf .tinf-boton.tinf-mal::before { content: "✕"; border-color: var(--t-granate); background: var(--t-granate); color: #fff; font-size: 11px; font-weight: 800; line-height: 12px; text-align: center; }
.tinf .tinf-boton.tinf-elegida { font-weight: 600; }

/* Después de responder */
.tinf .tinf-veredicto { font-weight: 800; font-size: 17px; margin: 12px 0 6px; outline: none; }
.tinf .tinf-veredicto.tinf-v-bien { color: var(--t-verde); }
.tinf .tinf-veredicto.tinf-v-mal { color: var(--t-granate); }
.tinf .tinf-resp { border-left: 4px solid var(--t-marino); background: var(--t-suave); border-radius: 0 var(--t-r) var(--t-r) 0; padding: 10px 12px 2px; margin: 4px 0 0; }
.tinf .tinf-resp p { font-size: 15.5px; }
.tinf .tinf-conviene { font-weight: 700; color: var(--t-marino); }

/* Al final */
.tinf .tinf-fin { border-radius: var(--t-r); background: var(--t-suave); border: 1px solid var(--t-linea); padding: 14px 14px 12px; margin: 6px 0 0; outline: none; }
.tinf .tinf-cifra { font-family: var(--ct-letra-titulares, "Faustina", Georgia, serif); font-weight: 600; font-size: 24px; line-height: 1.2; color: var(--t-marino); margin: 0 0 8px; }
.tinf .tinf-fallos { font-size: 15.5px; }
.tinf .tinf-fin-tit { font-weight: 700; font-size: 16px; color: var(--t-marino); margin: 0 0 8px; }
.tinf .tinf-fin ul { margin: 0 0 12px; padding-left: 20px; }
.tinf .tinf-fin li { margin: 0 0 6px; font-size: 15.5px; line-height: 1.4; }
.tinf .tinf-repetir { font: inherit; font-size: 15.5px; font-weight: 700; color: #fff; background: var(--t-marino); border: 0; border-radius: 8px; padding: 10px 16px; min-height: 44px; cursor: pointer; margin: 4px 0 2px; }
.tinf .tinf-repetir:focus { outline: none; box-shadow: 0 0 0 3px rgba(22, 58, 99, .3); }

@media (min-width: 640px) {
  .tinf { padding: 20px 22px 22px; }
  .tinf .tinf-sit { padding: 16px 18px 14px; }
}
/* Lo que el programa esconde con el atributo hidden: [hidden] dos veces para que gane a las reglas de arriba (sin !important) */
.tinf [hidden][hidden] { display: none; }
/* Al imprimir: las respuestas y su porqué, sin botones */
@media print {
  .tinf { box-shadow: none; }
  .tinf .tinf-sit { break-inside: avoid; }
  .tinf .tinf-botones, .tinf .tinf-progreso, .tinf .tinf-veredicto, .tinf .tinf-repetir { display: none; }
  .tinf .tinf-sit .tinf-ops[hidden][hidden], .tinf .tinf-sit .tinf-resp[hidden][hidden] { display: block; }
}