/* ==========================================================================================================
   CardioTeca · ESPACIO Salud Cardiovascular · calculadora «Pulsaciones al hacer ejercicio: frecuencia máxima,
   zonas de entrenamiento y por qué el reloj manda poco» (pieza P50 del lote 1, 24/10/2026). Va en
   /files/calculadoras/salud/pulsaciones-ejercicio.css y la enlaza el artículo. Todo cuelga de .pex (el recuadro
   de la calculadora dentro de la píldora). Colores: los de la hoja de la web (--ct-…) con su valor de reserva.
   Letra: la de la web. Sin emojis. Cajas con esquinas redondeadas, nunca píldoras. Cabe en 360 px.
   Mismo esquema que la herramienta «Ejercicio en casa» (herramientas/ejercicio-en-casa/web/).
   ========================================================================================================== */
.pex {
  --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-suave-2: var(--ct-suave-2, #e6edf5);
  --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-verde: var(--ct-acierto, #2e7d32);
  --p-verde-s: var(--ct-acierto-suave, #f0f7f1);
  --p-ambar: var(--ct-aviso, #c2630a);
  --p-ambar-s: var(--ct-aviso-suave, #fdf3e7);
  --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 18px 20px;
  margin: 24px 0 28px;
  line-height: 1.45;
  font-size: 16px;
}
.pex *, .pex *::before, .pex *::after { box-sizing: border-box; }
.pex p { margin: 0 0 10px; font-size: 16px; line-height: 1.45; }
.pex b { color: inherit; }
.pex a { color: var(--p-azul); }

/* Cabecera */
.pex .pex-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; border-bottom: 1px solid var(--p-linea); padding-bottom: 12px; margin-bottom: 6px; }
.pex .pex-sello { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--p-granate); background: var(--p-granate-s); border-radius: 6px; padding: 4px 8px; }
.pex .pex-titulo { flex: 1 1 100%; 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; }
.pex .pex-sub { flex: 1 1 100%; color: var(--p-gris); font-size: 15px; margin: 0; }

/* Pasos */
.pex .pex-paso { margin: 16px 0 0; }
.pex .pex-rotulo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; color: var(--p-marino); margin: 0 0 10px; }
.pex .pex-rotulo label { margin: 0; font-weight: 700; cursor: pointer; }
.pex .pex-num { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: var(--p-marino); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; }
.pex .pex-nota { font-size: 14px; color: var(--p-gris); margin: 6px 0 0; }
.pex .pex-campo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pex .pex-campo input { width: 120px; max-width: 100%; font: inherit; font-size: 20px; font-weight: 700; color: var(--p-tinta); border: 2px solid var(--p-linea-f); border-radius: 8px; padding: 8px 10px; background: #fff; }
.pex .pex-campo input:focus { outline: none; border-color: var(--p-marino); box-shadow: 0 0 0 3px rgba(22, 58, 99, .15); }
.pex .pex-unidad { font-size: 15px; color: var(--p-gris); }
.pex .pex-error { font-size: 14.5px; color: var(--p-granate); background: var(--p-granate-s); border-radius: 8px; padding: 8px 10px; margin: 8px 0 0; }

/* Situaciones: casillas en cajas con borde */
.pex .pex-opciones { display: grid; grid-template-columns: 1fr; gap: 8px; }
.pex .pex-opcion { display: flex; align-items: flex-start; gap: 10px; border: 1.5px solid var(--p-linea-f); border-radius: var(--p-r); background: #fff; padding: 10px 12px; font-size: 15.5px; line-height: 1.4; cursor: pointer; margin: 0; font-weight: 400; color: var(--p-tinta); }
.pex .pex-opcion:hover { border-color: var(--p-marino); }
.pex .pex-opcion input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--p-granate); cursor: pointer; }
.pex .pex-opcion.marcada { border-color: var(--p-granate); box-shadow: 0 0 0 1px var(--p-granate); }
.pex .pex-opcion span { display: block; }

/* Resultado */
.pex .pex-resultado { margin-top: 18px; }
.pex .pex-resultado:empty { display: none; }
.pex .pex-cifra { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; background: var(--p-suave-2); border-left: 5px solid var(--p-marino); border-radius: var(--p-r); padding: 12px 14px; margin: 0 0 12px; }
.pex .pex-cifra-t { flex: 1 1 100%; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--p-marino); }
.pex .pex-cifra-n { font-size: 44px; font-weight: 800; line-height: 1; color: var(--p-marino); }
.pex .pex-cifra-u { font-size: 16px; color: var(--p-tinta); }
.pex .pex-margen, .pex .pex-antigua { font-size: 15.5px; }
.pex .pex-sub2 { font-weight: 700; font-size: 17px; color: var(--p-marino); margin: 16px 0 8px; }

/* Zonas: cuatro tarjetas (una debajo de otra en el móvil, dos y dos en el ordenador) */
.pex .pex-zonas { display: grid; grid-template-columns: 1fr; gap: 10px; }
.pex .pex-zona { border: 1px solid var(--p-linea); border-left: 6px solid var(--p-gris); border-radius: var(--p-r); background: #fff; padding: 10px 12px; }
.pex .pex-zona p { margin: 0 0 4px; font-size: 15px; }
.pex .pex-zona .pex-z-nom { font-weight: 800; font-size: 13px; letter-spacing: .07em; text-transform: uppercase; }
.pex .pex-zona .pex-z-n { font-weight: 800; font-size: 21px; color: var(--p-tinta); line-height: 1.2; }
.pex .pex-zona .pex-z-pct { font-size: 13.5px; color: var(--p-gris); }
.pex .pex-zona .pex-z-r { font-size: 14.5px; color: var(--p-tinta); background: var(--p-suave); border-radius: 6px; padding: 4px 8px; margin: 6px 0; }
.pex .pex-zona .pex-z-txt { font-size: 15px; }
.pex .pex-zona .pex-z-borg { font-size: 13.5px; color: var(--p-gris); margin: 0; }
.pex .pex-zona.z1 { border-left-color: var(--p-verde); }
.pex .pex-zona.z1 .pex-z-nom { color: var(--p-verde); }
.pex .pex-zona.z2 { border-left-color: var(--p-azul); }
.pex .pex-zona.z2 .pex-z-nom { color: var(--p-azul); }
.pex .pex-zona.z3 { border-left-color: var(--p-ambar); }
.pex .pex-zona.z3 .pex-z-nom { color: var(--p-ambar); }
.pex .pex-zona.z4 { border-left-color: var(--p-granate); }
.pex .pex-zona.z4 .pex-z-nom { color: var(--p-granate); }

/* Mensajes debajo de las zonas */
.pex .pex-mensaje { font-size: 15.5px; border-radius: var(--p-r); background: var(--p-suave); padding: 10px 12px; margin: 12px 0 0; }
.pex .pex-mensaje.ambar { background: var(--p-ambar-s); border-left: 4px solid var(--p-ambar); }

/* Si ya tienes un diagnóstico: sin cifras */
.pex .pex-diag { border-radius: var(--p-r); background: var(--p-granate-s); border-left: 5px solid var(--p-granate); padding: 12px 14px; }
.pex .pex-diag-tit { font-weight: 800; font-size: 18px; color: var(--p-granate); margin: 0 0 8px; }
.pex .pex-lista { margin: 0 0 10px; padding-left: 20px; }
.pex .pex-lista li { margin: 0 0 6px; font-size: 15.5px; line-height: 1.4; }
.pex .pex-diag .pex-hacer { font-size: 15.5px; margin: 0 0 8px; }

/* Pie */
.pex .pex-aviso { margin: 16px 0 0; font-size: 13px; color: var(--p-gris); border-top: 1px solid var(--p-linea); padding-top: 10px; }
.pex .pex-sinjs { font-size: 15px; color: var(--p-gris); margin: 12px 0 0; }

@media (min-width: 640px) {
  .pex { padding: 20px 22px 22px; }
  .pex .pex-zonas { grid-template-columns: 1fr 1fr; }
  .pex .pex-opciones { grid-template-columns: 1fr 1fr; }
}
@media print {
  .pex { box-shadow: none; break-inside: avoid; }
  .pex .pex-paso { display: none; }
}
/* Lo que el programa esconde con el atributo hidden: [hidden] dos veces para que gane a las reglas de arriba (sin !important) */
.pex [hidden][hidden] { display: none; }