/*
 * Prevencionapp — estilos del sitio y del prototipo.
 * Neubrutalismo suave en pastel (docs/2-diseno.md): contorno fuerte solo en lo
 * que se toca, canto inferior en el botón principal, colores planos.
 * Solo variables de tokens.css: ningún color ni tamaño suelto.
 * Primero el teléfono (360 px); las pantallas anchas se agregan al final.
 */

@font-face {
  font-family: "Fredoka";
  src: url("../fuentes/fredoka.9591efe1be62.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fuentes/atkinson-hyperlegible-next.825fabef695f.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fuentes/atkinson-hyperlegible-next-italica.740db8084ae9.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

/* --- Base ------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--space-8);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-surface-app);
  color: var(--color-ink);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--font-line-height-body);
  overflow-wrap: break-word;
}

h1, h2, h3 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--font-line-height-heading);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
  /* Con letra muy grande, una palabra larga se corta con guion antes que desbordar. */
  hyphens: auto;
  overflow-wrap: anywhere;
}
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
p { margin: 0 0 var(--space-4); text-wrap: pretty; }
a { color: var(--color-action-primary); text-underline-offset: 0.2em; }
a:hover { color: var(--color-action-primary-edge); }
strong { font-weight: var(--font-weight-bold); }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }

:focus-visible {
  outline: var(--size-focus) solid var(--color-focus);
  outline-offset: var(--size-focus);
  border-radius: var(--radius-control);
}

main:focus, h1[tabindex="-1"]:focus { outline: none; }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.saltar {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  transform: translateY(calc(-100% - var(--space-5)));
  z-index: 10;
  background: var(--color-ink);
  color: var(--color-surface-card);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  font-weight: var(--font-weight-bold);
}
.saltar:focus { transform: none; color: var(--color-surface-card); }

.icono {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  display: inline-block;
  vertical-align: -0.2em;
}
.icono--grande { width: var(--size-mark); height: var(--size-mark); }

.muted { color: var(--color-ink-muted); }
.pequeno { font-size: var(--font-size-small); }
.centro { text-align: center; }

/* --- Estructura ------------------------------------------------------------- */

.contenedor {
  width: 100%;
  max-width: var(--size-page);
  margin: 0 auto;
  padding: 0 var(--space-4);
}
.contenedor--angosto { max-width: var(--size-content); }

.cinta-prototipo {
  background: var(--color-status-warning-bg);
  color: var(--color-status-warning);
  border-bottom: var(--border-card) solid var(--color-border-soft);
  font-size: var(--font-size-small);
  padding: var(--space-2) var(--space-4);
  text-align: center;
}

.cabecera {
  padding: var(--space-4) 0;
}
.cabecera__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.cabecera__acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-2); }

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-ink);
  text-decoration: none;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h3);
  min-height: var(--size-touch);
}
.marca:hover { color: var(--color-ink); }
.marca__logo { width: var(--size-step); height: auto; }
.marca__logo .logo-fondo { fill: var(--color-pastel-peach); }
.marca__logo .logo-borde { stroke: var(--color-action-primary); }
.marca__logo .logo-cara { stroke: var(--color-action-primary); fill: none; }
.marca__logo .logo-ojo { fill: var(--color-action-primary); }

.pie {
  margin-top: var(--space-8);
  padding: var(--space-6) 0 var(--space-7);
  border-top: var(--border-card) solid var(--color-border-soft);
  color: var(--color-ink-muted);
  font-size: var(--font-size-small);
}
.pie__enlaces { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-bottom: var(--space-3); }
.pie a { color: var(--color-ink-muted); }

/* --- Botones ---------------------------------------------------------------- */

.boton {
  --canto: var(--size-edge);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--size-button);
  padding: var(--space-3) var(--space-5);
  border: var(--border-control) solid var(--color-action-primary-edge);
  border-radius: var(--radius-control);
  background: var(--color-action-primary);
  color: var(--color-action-on-primary);
  font: inherit;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  font-size: var(--font-size-h3);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 var(--canto) 0 var(--color-action-primary-edge);
  margin-bottom: var(--canto);
  transition: transform var(--motion-press) ease-out, box-shadow var(--motion-press) ease-out;
  -webkit-tap-highlight-color: transparent;
  /* Con el texto al 200 %, el ícono, el texto y el peso bajan de línea en vez
     de salirse de la pantalla (WCAG 1.4.10). */
  max-width: 100%;
  flex-wrap: wrap;
}
.boton:hover { color: var(--color-action-on-primary); filter: brightness(1.05); }
.boton:active { transform: translateY(var(--canto)); box-shadow: 0 0 0 var(--color-action-primary-edge); }
.boton[aria-busy="true"] { cursor: progress; opacity: 0.85; }
.boton__texto { min-width: 0; }
.boton:has(> .boton__texto) { flex-wrap: nowrap; }
.boton--ancho { width: 100%; }

.boton--secundario {
  background: var(--color-surface-card);
  color: var(--color-ink);
  border-color: var(--color-border-strong);
  box-shadow: 0 var(--canto) 0 var(--color-border-strong);
}
.boton--secundario:hover { color: var(--color-ink); background: var(--color-pastel-peach); filter: none; }
.boton--secundario:active { box-shadow: 0 0 0 var(--color-border-strong); }

.boton--chico {
  --canto: var(--size-edge-small);
  min-height: var(--size-touch);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-body);
}

.boton--texto {
  background: none;
  border: 0;
  box-shadow: none;
  margin: 0;
  padding: var(--space-2) var(--space-1);
  min-height: var(--size-touch);
  color: var(--color-action-primary);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-body);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.boton--texto:hover { color: var(--color-action-primary-edge); filter: none; }
.boton--texto:active { transform: none; }

.boton:disabled, .boton[aria-disabled="true"] {
  background: var(--color-action-disabled);
  color: var(--color-action-on-disabled);
  border-color: var(--color-action-disabled);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
  filter: none;
}


.volver {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--size-touch);
  min-width: var(--size-touch);
  color: var(--color-ink);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}
.volver:hover { color: var(--color-ink); text-decoration: underline; }

.boton-google { font-family: var(--font-family-body); font-weight: var(--font-weight-bold); font-size: var(--font-size-body); }
.boton-google img { width: var(--size-icon); height: var(--size-icon); }

/* «o» entre dos caminos, con una línea a cada lado. */
.separador {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
}
.separador::before, .separador::after {
  content: "";
  flex: 1;
  border-top: var(--border-card) solid var(--color-border-soft);
}

/* --- Tarjetas y piezas ---------------------------------------------------------- */

.tarjeta {
  background: var(--color-surface-card);
  border: var(--border-card) solid var(--color-border-soft);
  border-radius: var(--radius-card);
  padding: var(--space-5);
}
.tarjeta--durazno { background: var(--color-pastel-peach); border-color: transparent; }
.tarjeta--menta { background: var(--color-pastel-mint); border-color: transparent; }
.tarjeta--celeste { background: var(--color-pastel-sky); border-color: transparent; }
.tarjeta--mantequilla { background: var(--color-pastel-butter); border-color: transparent; }
.tarjeta--sin-relleno { padding: 0; overflow: hidden; }

.pastilla {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-pastel-peach);
  color: var(--color-action-primary-edge);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-small);
}

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.chip {
  padding: var(--space-1) var(--space-3);
  border: var(--border-card) solid var(--color-border-soft);
  border-radius: var(--radius-pill);
  background: var(--color-surface-app);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
}

.insignia {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
  max-width: 100%;
}
/* Con el texto grande, una insignia larga («Firmó el 6 de octubre») baja a
   otra línea en vez de salirse de la pantalla (WCAG 1.4.10). */
@media (max-width: 30rem) {
  .insignia { white-space: normal; }
}
.insignia--ok { background: var(--color-status-ok-bg); color: var(--color-status-ok); }
.insignia--pendiente { background: var(--color-status-warning-bg); color: var(--color-status-warning); }
.insignia--info { background: var(--color-status-info-bg); color: var(--color-status-info); }

.cuadro-icono {
  display: inline-grid;
  place-items: center;
  width: var(--size-touch);
  height: var(--size-touch);
  border-radius: var(--radius-control);
  flex: none;
}
.cuadro-icono--mint { background: var(--color-pastel-mint); color: var(--color-status-ok); }
.cuadro-icono--sky { background: var(--color-pastel-sky); color: var(--color-status-info); }
.cuadro-icono--peach { background: var(--color-pastel-peach); color: var(--color-action-primary); }
.cuadro-icono--butter { background: var(--color-pastel-butter); color: var(--color-status-warning); }
.cuadro-icono--blush { background: var(--color-pastel-blush); color: var(--color-status-danger); }
.cuadro-icono--sand { background: var(--color-pastel-sand); color: var(--color-ink); }

.aviso {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border-radius: var(--radius-control);
  background: var(--color-status-info-bg);
  color: var(--color-status-info);
}
.aviso p:last-child { margin: 0; }
/* Con letra muy grande, una palabra larga («Semiadministrador») se corta con guion. */
.aviso > p, .aviso > div { min-width: 0; hyphens: auto; overflow-wrap: anywhere; }
.aviso--pendiente { background: var(--color-status-warning-bg); color: var(--color-status-warning); }
.aviso--ok { background: var(--color-status-ok-bg); color: var(--color-status-ok); }
.aviso--error { background: var(--color-status-danger-bg); color: var(--color-status-danger); }
.aviso .icono { margin-top: 0.15em; }

.aviso-dev {
  border: var(--border-control) dashed var(--color-status-warning);
  background: var(--color-status-warning-bg);
  color: var(--color-status-warning);
  border-radius: var(--radius-control);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-small);
}
.aviso-dev strong { font-size: var(--font-size-h3); letter-spacing: 0.15em; }
.aviso-dev--lista p { margin: 0 0 var(--space-2); }
.aviso-dev--lista ul { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-1); }

/* --- Formularios ------------------------------------------------------------ */

.formulario { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.campo { display: grid; gap: var(--space-2); }
.etiqueta { font-weight: var(--font-weight-bold); font-size: var(--font-size-body); }
.ayuda { color: var(--color-ink-muted); font-size: var(--font-size-small); margin: 0; }

.entrada {
  width: 100%;
  min-height: var(--size-button);
  padding: var(--space-3) var(--space-4);
  border: var(--border-control) solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--font-size-lead);
}
.entrada::placeholder { color: var(--color-ink-muted); }
.entrada[aria-invalid="true"] {
  border-color: var(--color-status-danger);
  background: var(--color-status-danger-bg);
}

/* El código y el PIN: un solo campo (se puede pegar y autocompletar), dibujado
   como casillas. */
.entrada--digitos {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-heading);
  letter-spacing: 0.5em;
  text-align: center;
  padding-left: calc(var(--space-4) + 0.5em);
}

.error-campo {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  color: var(--color-status-danger);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-small);
  margin: 0;
}

.resumen-errores {
  border: var(--border-control) solid var(--color-status-danger);
  background: var(--color-status-danger-bg);
  color: var(--color-status-danger);
  border-radius: var(--radius-control);
  padding: var(--space-4);
}
.resumen-errores h2 { font-size: var(--font-size-h3); margin-bottom: var(--space-2); }
.resumen-errores ul { margin: 0; padding-left: var(--space-5); }
.resumen-errores a { color: var(--color-status-danger); font-weight: var(--font-weight-bold); }

.casilla {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  border: var(--border-control) solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
  cursor: pointer;
}
.casilla input {
  width: var(--size-mark);
  height: var(--size-mark);
  margin: 0;
  accent-color: var(--color-status-ok);
}
.casilla p { margin: var(--space-1) 0 0; }

.con-boton { position: relative; }
.con-boton .entrada { padding-right: calc(var(--size-touch) + var(--space-3)); }
.con-boton__boton {
  position: absolute;
  right: var(--space-1);
  top: 50%;
  transform: translateY(-50%);
  width: var(--size-touch);
  height: var(--size-touch);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
}

/* --- Opciones que se marcan (oficios, canal) -------------------------------- */

.opciones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
  gap: var(--space-3);
}
.opcion { position: relative; }
.opcion input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.opcion__cara {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  height: 100%;
  min-height: var(--size-option);
  padding: var(--space-4);
  border: var(--border-control) solid var(--color-border-soft);
  border-radius: var(--radius-card);
  background: var(--color-surface-card);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  font-size: var(--font-size-body);
  line-height: 1.2;
  transition: border-color var(--motion-press), background var(--motion-press);
}
.opcion__marca {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: var(--size-mark);
  height: var(--size-mark);
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  border: var(--border-control) solid var(--color-border-soft);
  background: var(--color-surface-card);
  color: transparent;
}
.opcion input:hover + .opcion__cara { border-color: var(--color-border-strong); }
.opcion input:focus-visible + .opcion__cara { outline: var(--size-focus) solid var(--color-focus); outline-offset: var(--size-focus); }
.opcion input:checked + .opcion__cara {
  border-color: var(--color-action-primary);
  background: var(--color-pastel-peach);
}
.opcion input:checked ~ .opcion__marca {
  background: var(--color-action-primary);
  border-color: var(--color-action-primary);
  color: var(--color-action-on-primary);
}

.opciones--lista { grid-template-columns: 1fr; }
.opciones--lista .opcion__cara {
  min-height: auto;
  grid-template-columns: auto 1fr;
  align-items: center;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-bold);
}

/* --- El contador (− número +) ------------------------------------------------- */

.contador {
  display: grid;
  grid-template-columns: var(--size-button) minmax(0, 1fr) var(--size-button);
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  background: var(--color-surface-card);
  border: var(--border-card) solid var(--color-border-soft);
  border-radius: var(--radius-card);
}
.contador__boton {
  width: var(--size-button);
  height: var(--size-button);
  display: grid;
  place-items: center;
  border: var(--border-control) solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
  color: var(--color-ink);
  cursor: pointer;
}
.contador__boton:active { background: var(--color-pastel-peach); }
.contador__valor { text-align: center; }
.contador__valor input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-display);
  color: var(--color-ink);
  appearance: textfield;
  -moz-appearance: textfield;
}
.contador__valor input::-webkit-outer-spin-button,
.contador__valor input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.contador__valor span { display: block; color: var(--color-ink-muted); font-weight: var(--font-weight-bold); }

/* --- Pantallas de un paso (el flujo) ------------------------------------------- */

.flujo { padding-bottom: var(--space-7); }
.flujo__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}
.flujo__paso { margin-top: var(--space-2); }
.flujo__titulo { margin-top: var(--space-3); }
.flujo__titulo p { color: var(--color-ink-muted); font-size: var(--font-size-lead); }
/* La acción va al final del contenido, no fija abajo: con letra grande, una
   barra fija tapa un tercio de la pantalla. */
.flujo__accion { padding-top: var(--space-4); }
.flujo__accion .boton { width: 100%; }
.flujo__secundario { text-align: center; margin-top: var(--space-2); }

.pasos {
  display: flex;
  white-space: nowrap;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink-muted);
}
.pasos__barra { display: flex; gap: var(--space-1); }
.pasos__barra span {
  width: var(--size-mark);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
}
.pasos__barra span.hecho { background: var(--color-status-ok); }
.pasos__barra span.actual { background: var(--color-action-primary); }

.seccion-titulo { margin: var(--space-6) 0 var(--space-3); }

.vista-previa { margin-top: var(--space-5); }
.vista-previa h2 { font-family: var(--font-family-body); font-size: var(--font-size-body); font-weight: var(--font-weight-bold); }

/* --- Lista de requisitos -------------------------------------------------------- */

.lista { list-style: none; margin: 0; padding: 0; }
.lista > li + li { border-top: var(--border-card) solid var(--color-border-soft); }
.item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  align-items: start;
}
.item h3 { font-family: var(--font-family-body); font-size: var(--font-size-body); font-weight: var(--font-weight-bold); margin: 0; }
.item p { margin: var(--space-1) 0 0; color: var(--color-ink-muted); }
.item__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }

.plegable summary {
  cursor: pointer;
  min-height: var(--size-touch);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-bold);
  list-style: none;
}
.plegable summary::-webkit-details-marker { display: none; }
.plegable summary .icono { transition: transform var(--motion-press); }
.plegable[open] summary .icono--giro { transform: rotate(90deg); }

/* El chequeo de normas de «tu plan»: dos segundos que hacen creíble la lista. */
.revisando {
  display: none;
  gap: var(--space-4);
  justify-items: center;
  text-align: center;
  padding: var(--space-7) var(--space-4);
}
.revisando ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
/* Lo pendiente se lee igual (gris con contraste AA, no transparente): lo que
   cambia al revisarse es el color del texto y del ícono. */
.revisando li { display: flex; gap: var(--space-2); align-items: center; color: var(--color-ink-muted); transition: color var(--motion-fade); }
.revisando li.listo { color: var(--color-ink); }
.revisando li.listo .icono { color: var(--color-status-ok); }
/* Solo con JavaScript: sin él, el plan se ve directo. */
html.js .revisando--activa { display: grid; }
html.js .plan--espera { display: none; }
html.js .anillo--animar .anillo__trazo { stroke-dashoffset: 326.73px; }

/* --- Portada ------------------------------------------------------------------- */

.portada-hero { padding: var(--space-5) 0 var(--space-7); }
.portada-hero__grid { display: grid; gap: var(--space-6); align-items: center; }
.portada-hero h1 { font-size: var(--font-size-h1); max-inline-size: 20ch; }
.portada-hero__bajada { font-size: var(--font-size-lead); color: var(--color-ink-muted); max-inline-size: 36ch; }
.portada-hero__acciones { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.portada-hero__nota { display: flex; gap: var(--space-2); align-items: center; color: var(--color-ink-muted); font-size: var(--font-size-small); margin: 0; }

.escena {
  position: relative;
  background: var(--color-pastel-peach);
  border-radius: var(--radius-card);
  padding: var(--space-6) var(--space-4) 0;
  overflow: hidden;
}
.escena__globo {
  position: relative;
  display: inline-block;
  background: var(--color-surface-card);
  border: var(--border-control) solid var(--color-border-strong);
  border-radius: var(--radius-control);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  margin-left: var(--space-2);
}
.escena__personajes { width: 100%; max-width: var(--size-illustration-large); margin: var(--space-3) auto 0; }
.escena__ficha {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface-card);
  border: var(--border-card) solid var(--color-border-soft);
  border-radius: var(--radius-control);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
}
.escena__ficha--1 { right: var(--space-3); top: 42%; }
.escena__ficha--2 { left: var(--space-3); bottom: var(--space-5); }

.bloque { padding: var(--space-7) 0; }
.bloque--suave { background: var(--color-surface-card); border-block: var(--border-card) solid var(--color-border-soft); }
.bloque__titulo { max-inline-size: 26ch; margin-bottom: var(--space-5); }
.rejilla { display: grid; gap: var(--space-4); }

.momento { display: grid; gap: var(--space-3); align-content: start; }
.momento h3 { margin: 0; }
.momento .cuadro-icono { background: var(--color-surface-card); }
.momento p { margin: 0; }

.paso-numero {
  display: grid;
  place-items: center;
  width: var(--size-touch);
  height: var(--size-touch);
  border: var(--border-control) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface-card);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h3);
  flex: none;
}

.honesto { display: grid; gap: var(--space-3); }

.preguntas details {
  background: var(--color-surface-card);
  border: var(--border-card) solid var(--color-border-soft);
  border-radius: var(--radius-control);
  padding: var(--space-2) var(--space-4);
}
.preguntas details + details { margin-top: var(--space-3); }
.preguntas summary { justify-content: space-between; }
.preguntas details p { margin-top: var(--space-2); }

.llamado {
  background: var(--color-pastel-mint);
  border-radius: var(--radius-card);
  padding: var(--space-6) var(--space-5);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  justify-items: start;
}

/* --- Descarga la app (portada) --------------------------------------------------- */

.app-descarga {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
}
.app-descarga__texto { display: grid; gap: var(--space-4); justify-items: start; }
.app-descarga__texto .bloque__titulo { margin-bottom: 0; }
/* En el teléfono basta el botón: el código QR es para quien mira en el computador. */
.app-descarga__qr { display: none; margin: 0; text-align: center; }
.app-descarga__qr svg {
  inline-size: 12rem;
  block-size: auto;
  border: var(--border-control) solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
}
.app-descarga__qr figcaption { margin-top: var(--space-2); font-size: var(--font-size-small); color: var(--color-ink-muted); max-inline-size: 16rem; }
@media (min-width: 720px) {
  .app-descarga { grid-template-columns: minmax(0, 1fr) auto; }
  .app-descarga__qr { display: block; }
}

/* --- Inicio (el centro de todo) ---------------------------------------------------- */

.app-barra {
  background: var(--color-surface-card);
  border-bottom: var(--border-card) solid var(--color-border-soft);
}
.app-barra__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--space-8);
}

.inicio { display: grid; gap: var(--space-4); padding-block: var(--space-5) var(--space-7); }

.saludo {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  align-items: center;
}
.saludo h1 { margin-bottom: var(--space-1); }
.saludo p { margin: 0; color: var(--color-ink-muted); }
.saludo__dibujo { width: var(--size-illustration-small); }

.avance { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: center; }
.anillo { position: relative; width: var(--size-ring); height: var(--size-ring); }
.anillo svg { width: var(--size-ring); height: var(--size-ring); transform: rotate(-90deg); }
.anillo__fondo { stroke: var(--color-surface-sunken); }
.anillo__trazo { stroke: var(--color-status-ok); transition: stroke-dashoffset var(--motion-change) ease-out; }
.anillo__texto {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}
.anillo__numero { font-family: var(--font-family-heading); font-weight: var(--font-weight-bold); font-size: var(--font-size-h1); line-height: 1; }
.anillo__pie { font-size: var(--font-size-small); color: var(--color-ink-muted); font-weight: var(--font-weight-bold); }
.avance h2 { margin-bottom: var(--space-2); }
.avance p { margin: 0; }

.siguiente { display: grid; gap: var(--space-4); border: var(--border-control) solid var(--color-border-strong); }
.siguiente__cabeza { display: flex; gap: var(--space-3); align-items: center; }
.siguiente__cabeza h2 { margin: 0; }
.siguiente p { margin: 0; color: var(--color-ink-muted); }

.camino { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.camino__parte {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
  border: var(--border-card) solid var(--color-border-soft);
}
.camino__parte--actual { border: var(--border-control) solid var(--color-action-primary); background: var(--color-pastel-peach); }
.camino__parte .paso-numero { width: var(--size-step); height: var(--size-step); font-size: var(--font-size-body); }
.camino__parte--hecha .paso-numero { background: var(--color-status-ok); border-color: var(--color-status-ok); color: var(--color-action-on-primary); }
.camino__nombre { font-weight: var(--font-weight-bold); }

.empresa-fila {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4);
  text-decoration: none;
  color: var(--color-ink);
}
.empresa-fila:hover { color: var(--color-ink); background: var(--color-pastel-peach); }
.avatar {
  display: grid;
  place-items: center;
  width: var(--size-touch);
  height: var(--size-touch);
  border-radius: var(--radius-pill);
  background: var(--color-pastel-sky);
  color: var(--color-status-info);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
}

.celebracion { display: flex; gap: var(--space-3); align-items: center; }

/* --- Piezas sueltas ------------------------------------------------------------ */

.sin-marco { border: 0; margin: 0; padding: 0; min-width: 0; }
.sin-marco > legend { padding: 0; max-width: 100%; }
.bloque__nota { margin-top: var(--space-5); }
.pasos-portada { list-style: none; margin: 0; padding: 0; }
.casilla__resumen { display: block; margin-top: var(--space-1); color: var(--color-ink-muted); font-size: var(--font-size-small); }
.bienvenida { text-align: center; margin-bottom: var(--space-4); }
.bienvenida__dibujo { width: min(70%, var(--size-illustration)); margin: var(--space-3) auto 0; }
.bienvenida__nota { margin-top: var(--space-5); }
.inicio__camino h2 { margin-bottom: var(--space-3); }
.inicio__camino .camino { margin-top: var(--space-2); }

@media (max-width: 479px) {
  .app-barra .marca span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* --- Navegación de la app ---------------------------------------------------------- */

.app-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  padding-bottom: var(--space-2);
}
.app-nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--size-touch);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}
.app-nav a:hover { background: var(--color-surface-sunken); color: var(--color-ink); }
.app-nav a[aria-current="page"] { background: var(--color-pastel-peach); color: var(--color-action-primary-edge); }

/* --- Equipo, historial y cuenta ---------------------------------------------------- */

/* Con letra grande, la acción baja a su propia línea en vez de desbordar. */
.item--accion { display: flex; flex-wrap: wrap; align-items: center; }
.item--accion > div { flex: 1 1 10rem; min-width: 0; }
.avatar--apagado { background: var(--color-surface-sunken); color: var(--color-ink-muted); }

.persona { padding: var(--space-4) var(--space-5); display: grid; gap: var(--space-3); }
.persona__fila { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.persona__fila > div { flex: 1 1 10rem; min-width: 0; }
.persona__fila h3 { font-family: var(--font-family-body); font-size: var(--font-size-body); font-weight: var(--font-weight-bold); margin: 0; }
.persona__fila p { margin: 0; }
.persona__acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.persona__rol { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.entrada--chica { width: auto; max-width: 100%; min-height: var(--size-touch); padding: var(--space-2) var(--space-3); font-size: var(--font-size-body); }

.boton--whatsapp {
  background: var(--color-whatsapp);
  border-color: var(--color-whatsapp);
  box-shadow: 0 var(--canto) 0 var(--color-ink);
}

.historial { list-style: none; margin: 0; padding: 0; border-left: var(--border-control) solid var(--color-border-soft); }
.historial__registro { position: relative; padding: 0 0 var(--space-4) var(--space-5); }
.historial__registro::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-2) + -1px);
  top: var(--space-2);
  width: var(--space-3);
  height: var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-action-primary);
}
.historial__registro time { color: var(--color-ink-muted); font-size: var(--font-size-small); font-weight: var(--font-weight-bold); }
.historial__registro p { margin: var(--space-1) 0 0; }
.paginas { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; margin-top: var(--space-4); }

.lista-simple { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-3); }
.lista-simple li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2); }
.lista-simple .icono { color: var(--color-status-ok); margin-top: 0.2em; }

/* Cada dato con su nombre arriba: un correo largo nunca empuja la pantalla. */
.datos { margin: 0; display: grid; gap: var(--space-1); }
.datos dt { font-weight: var(--font-weight-bold); margin-top: var(--space-2); }
.datos dd { margin: 0; overflow-wrap: anywhere; }

.zona-delicada {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--border-card) solid var(--color-border-soft);
}

/* --- Soporte (equipo interno) ----------------------------------------------------- */

/* La banda del modo soporte: siempre visible arriba, con texto (no solo color). */
.banda-soporte {
  background: var(--color-status-warning-bg);
  color: var(--color-status-warning);
  border-bottom: var(--border-control) solid var(--color-status-warning);
  padding: var(--space-3) 0;
}
.banda-soporte__fila { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; }
.banda-soporte p { margin: 0; flex: 1 1 18rem; min-width: 0; }
.banda-soporte__acciones { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.banda-soporte a { color: var(--color-status-warning); font-weight: var(--font-weight-bold); }

.cifras {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
}
.cifra { display: grid; gap: var(--space-1); padding: var(--space-4); }
.cifra__numero { font-family: var(--font-family-heading); font-weight: var(--font-weight-bold); font-size: var(--font-size-h1); line-height: 1; }
.cifra__nombre { color: var(--color-ink-muted); font-weight: var(--font-weight-bold); }

.buscador { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.buscador__fila { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.buscador__fila .entrada { flex: 1 1 16rem; min-width: 0; }
.filtros { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.filtros a {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-touch);
  padding: var(--space-2) var(--space-4);
  border: var(--border-control) solid var(--color-border-soft);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}
.filtros a[aria-current] { border-color: var(--color-action-primary); background: var(--color-pastel-peach); color: var(--color-action-primary-edge); }
.resultado { color: var(--color-ink-muted); font-weight: var(--font-weight-bold); }
.empresa-fila__datos { display: grid; gap: var(--space-1); min-width: 0; }

/* --- Pantallas anchas ------------------------------------------------------------ */

@media (min-width: 720px) {
  .portada-hero { padding: var(--space-7) 0 var(--space-8); }
  .portada-hero__grid { grid-template-columns: 1.05fr 1fr; gap: var(--space-7); }
  .portada-hero h1 { font-size: var(--font-size-display); }
  .portada-hero__acciones { grid-template-columns: auto auto; justify-content: start; }
  .portada-hero__acciones .boton { white-space: nowrap; }
  .rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .llamado { grid-template-columns: 1fr auto; align-items: center; padding: var(--space-7); }
  .inicio { grid-template-columns: 1fr 1fr; align-items: start; grid-auto-flow: row dense; }
  .inicio__ancho { grid-column: 1 / -1; }
  .inicio__avance { grid-column: 1; }
  .inicio__siguiente { grid-column: 2; }
  .inicio__papeles { grid-column: 1; grid-row: span 2; }
  .inicio__camino { grid-column: 2; }
  .saludo__dibujo { width: var(--size-ring); }
}

@media (min-width: 1024px) {
  .inicio { grid-template-columns: 5fr 7fr; }
}

/* --- Reducir movimiento ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .boton:active { transform: none; }
}

/* --- Planes (portada, tu plan, elige tu plan) ------------------------------ */
.bloque__bajada { max-width: 40rem; margin: 0 0 var(--space-5); color: var(--color-ink-muted); }
.planes {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.plan { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.plan--recomendado { border: var(--border-control) solid var(--color-action-primary-edge); }
.plan__marca { align-self: flex-start; }
.plan__nombre { margin: 0; font-size: var(--font-size-h3); }
.plan__para { margin: 0; display: flex; gap: var(--space-2); align-items: center; color: var(--color-ink-muted); font-weight: var(--font-weight-bold); }
.plan__precio { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.plan__monto { font-family: var(--font-family-heading); font-weight: var(--font-weight-bold); font-size: var(--font-size-h1); line-height: 1; }
.plan__periodo { color: var(--color-ink-muted); font-weight: var(--font-weight-bold); }
.plan__incluye { margin-bottom: 0; flex: 1; }
.plan .boton, .plan > p:last-child { margin-top: auto; }

/* --- Logo de la empresa ---------------------------------------------------- */
.logo-actual { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-2); }
.logo-actual img {
  width: 6rem;
  height: 6rem;
  object-fit: contain;
  background: var(--color-surface-card);
  border: var(--border-card) solid var(--color-border-soft);
  border-radius: var(--radius-control);
}
.entrada--archivo { padding-block: var(--space-3); max-width: 100%; }

/* --- Trabajadores ---------------------------------------------------------- */
.persona--nueva { background: var(--color-status-ok-bg); }

/* --- Papeles ----------------------------------------------------------------
   Una tarjeta por papel: qué es, su estado (ícono y texto) y una acción
   principal. En un teléfono de 360 dp las acciones bajan a su propia fila. */
.papeles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.papel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4); }
.papel p { margin: 0; }
.papel__fila { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.papel__datos { flex: 1 1 10rem; min-width: 0; }
.papel__datos h3 {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  overflow-wrap: anywhere;
}
.papel__acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.papel__acciones form { margin: 0; }
.papel__peso { font-size: var(--font-size-small); font-weight: var(--font-weight-regular); }
/* El papel recién generado se marca con el verde de «listo», y se dice en texto. */
.papel--nuevo { border-color: var(--color-status-ok); background: var(--color-status-ok-bg); }

.nota-segura {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-small);
  color: var(--color-ink-muted);
}
.nota-segura .icono { color: var(--color-status-ok); margin-top: 0.15em; }

/* Un dato que no se puede cambiar aquí: se lee como texto, no como un campo
   deshabilitado (que los lectores de pantalla a veces saltan). */
.dato-fijo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--size-button);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: var(--border-card) dashed var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface-sunken);
  font-size: var(--font-size-lead);
}

.papeles__todas { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.papel-abrir { margin: 0 0 var(--space-5); }
.huella { font-size: var(--font-size-small); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* El campo de fecha trae un ancho mínimo propio del navegador: con el texto al
   200 % se salía de la pantalla. */
.entrada[type="date"] { display: block; min-width: 0; max-width: 100%; }

/* --- Firmar ---------------------------------------------------------------------
   El papel se lee por secciones cortas en el teléfono, y al final se firma. */
.papel-lectura { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }
.papel-lectura__cabeza h2 { margin: var(--space-1) 0 var(--space-3); }
.papel-lectura p { margin: 0; }
.datos--en-linea { grid-template-columns: auto 1fr; column-gap: var(--space-3); }
.datos--en-linea dt { margin-top: 0; color: var(--color-ink-muted); font-weight: var(--font-weight-regular); }
.riesgos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.riesgo { display: grid; gap: var(--space-2); padding: var(--space-4); border-color: var(--color-border-strong); }
.riesgo h4 { margin: 0; font-size: var(--font-size-lead); }
.riesgo .lista-simple { margin: 0; }
.riesgo__titulo { font-weight: var(--font-weight-bold); }
.riesgo__epp {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  background: var(--color-pastel-mint);
}
.riesgo__epp .icono { color: var(--color-status-ok); margin-top: 0.15em; }

.firmar { display: grid; gap: var(--space-4); border: var(--border-control) solid var(--color-border-strong); }
.firmar h2 { margin: 0; }
.firmar__formas { display: grid; gap: var(--space-3); }
.firmar__clave { display: grid; gap: var(--space-3); }

.firmado { display: grid; justify-items: center; gap: var(--space-3); text-align: center; padding-block: var(--space-6); }
.firmado h1 { margin: 0; outline: none; }
.firmado p { margin: 0; }
.firmado__marca { color: var(--color-status-ok); }
.firmado__marca .icono { width: calc(var(--size-touch) * 1.5); height: calc(var(--size-touch) * 1.5); }

.carnet { margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); justify-items: center; }
.carnet img { width: min(100%, 20rem); height: auto; }

.llave { grid-template-columns: auto 1fr; }
.llave > div { display: grid; gap: var(--space-1); }
.llave form { margin: 0; }

/* La firma con el dedo: el lienzo no desplaza la pantalla mientras se dibuja. */
.trazo { display: grid; gap: var(--space-2); }
.trazo__lienzo {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 2;
  touch-action: none;
  background: var(--color-surface-card);
  border: var(--border-control) dashed var(--color-border-strong);
  border-radius: var(--radius-control);
  cursor: crosshair;
}
.trazo__borrar { justify-self: start; }

.firma-estado { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* --- Términos y datos ---------------------------------------------------------
   Texto largo para leer: líneas cómodas, títulos claros y un índice arriba. */
.legal { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); margin-top: var(--space-4); }
/* Con el texto al 200 %, una palabra larga («Semiadministrador») o un correo
   se salían de la pantalla: se cortan, con guion donde el navegador sabe. */
.legal { overflow-wrap: break-word; hyphens: auto; }
.legal a, .flujo__titulo a { overflow-wrap: anywhere; }
.legal section { scroll-margin-top: var(--space-5); }
.legal h2 { font-size: var(--font-size-h3); margin: 0 0 var(--space-3); }
.legal p, .legal li, .legal dd { line-height: var(--font-line-height-body); }
.legal ul { padding-left: var(--space-5); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); margin: 0 0 var(--space-3); }
.legal ul ul { margin-top: var(--space-2); }
.legal__indice {
  padding: var(--space-4);
  border: var(--border-card) solid var(--color-border-soft);
  border-radius: var(--radius-card);
  background: var(--color-surface-card);
}
.legal__indice ol { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-1); }

/* --- Al día: el semáforo, lo que vence, el EPP y los avisos (D12, D21, D25) -------- */

/* El estado se dice con ícono y palabra: el color solo nunca (docs/2-diseno.md). */
.insignia--peligro { background: var(--color-status-danger-bg); color: var(--color-status-danger); }

.semaforo {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: var(--border-control) solid var(--color-border-strong);
  border-radius: var(--radius-card);
  box-shadow: 0 var(--size-edge-small) 0 var(--color-border-strong);
}
.semaforo--verde { background: var(--color-status-ok-bg); }
.semaforo--amarillo { background: var(--color-status-warning-bg); }
.semaforo--rojo { background: var(--color-status-danger-bg); }
.semaforo__luz {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--size-touch);
  height: var(--size-touch);
  border-radius: var(--radius-pill);
  background: var(--color-surface-card);
  border: var(--border-control) solid var(--color-border-strong);
}
.semaforo--verde .semaforo__luz { color: var(--color-status-ok); }
.semaforo--amarillo .semaforo__luz { color: var(--color-status-warning); }
.semaforo--rojo .semaforo__luz { color: var(--color-status-danger); }
.semaforo__estado {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-heading);
  line-height: var(--font-line-height-heading);
}
.semaforo__cuenta { margin: var(--space-1) 0 0; font-size: var(--font-size-small); }

.aldia-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.semaforo + .aldia-lista { margin-top: var(--space-2); }
.aldia-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-card);
  border: var(--border-card) solid var(--color-border-soft);
  border-left-width: var(--space-2);
  border-radius: var(--radius-control);
}
.aldia-item--rojo { border-left-color: var(--color-status-danger); }
.aldia-item--amarillo { border-left-color: var(--color-status-warning); }
.aldia-item--verde { border-left-color: var(--color-status-ok); }
.aldia-item__datos { flex: 1 1 12rem; min-width: 0; }
.aldia-item__datos h3 {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
}
.aldia-item__datos p { margin: var(--space-1) 0 0; }
.aldia-item form { margin: 0; }

.inicio__al-dia { display: grid; gap: var(--space-4); }
.inicio__al-dia h2, .inicio__al-dia h3 { margin: 0; }

.persona__enlace { color: inherit; text-decoration: none; }
.persona__enlace:hover h3 { text-decoration: underline; }

.ficha-cabeza { display: flex; align-items: center; gap: var(--space-4); }
.ficha-cabeza h1 { margin: 0; }
.ficha-cabeza p { margin: var(--space-1) 0 0; }
.avatar--grande { width: var(--size-avatar-large); height: var(--size-avatar-large); font-size: var(--font-size-h3); flex: none; }

.epp-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.epp-fila {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-card);
  border: var(--border-card) solid var(--color-border-soft);
  border-radius: var(--radius-control);
}
.epp-fila__numeros { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; }
.epp-fila__numeros label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-small); }
.epp-fila__numeros .entrada--chica { width: 5.5em; }

.app-barra__acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-2); }
.campana {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--size-touch);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}
.campana:hover, .campana[aria-current="page"] { background: var(--color-pastel-peach); color: var(--color-action-primary-edge); }
/* «Tuve un accidente»: el rojo de lo urgente, siempre con su ícono y su nombre. */
.campana--peligro { background: var(--color-status-danger-bg); color: var(--color-status-danger); }
.campana--peligro:hover { background: var(--color-pastel-blush); color: var(--color-status-danger); }
.campana__cuenta {
  display: inline-grid;
  place-items: center;
  min-width: 1.6em;
  height: 1.6em;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-status-danger);
  color: var(--color-action-on-primary);
  font-size: var(--font-size-small);
}
.campana__corto { display: none; }
/* En un teléfono angosto, la campana muestra solo el ícono y su número, y
   «Tuve un accidente» se acorta a «Accidente»: nunca queda el ícono solo. */
@media (max-width: 26rem) {
  .campana > span:not(.campana__cuenta) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .campana.campana--peligro > span.campana__largo { display: none; }
  .campana.campana--peligro > span.campana__corto { display: inline; position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .campana { padding-inline: var(--space-2); }
  /* El número va como globo sobre la campana, y «Salir» con menos relleno:
     así la barra cabe en una línea en 360 px. */
  .campana__cuenta { position: absolute; top: 0; right: 0; min-width: 1.4em; height: 1.4em; font-size: var(--font-size-small); line-height: 1; }
  .app-barra__acciones { gap: var(--space-1); }
  .app-barra__acciones .boton--texto { padding-inline: var(--space-2); }
}

.avisos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.aviso-novedad { display: grid; gap: var(--space-3); }
.aviso-novedad h2 { margin: 0; font-size: var(--font-size-h3); }
.aviso-novedad p { margin: 0; }
.aviso-novedad--nueva { border-color: var(--color-border-strong); }

/* --- «Tuve un accidente» (D24) ------------------------------------------- */
/* El rojo aquí significa lo mismo que en el semáforo: algo urgente. */
.boton--peligro {
  background: var(--color-status-danger-bg);
  color: var(--color-status-danger);
  border-color: var(--color-border-strong);
  box-shadow: 0 var(--canto) 0 var(--color-border-strong);
}
.boton--peligro:hover { color: var(--color-status-danger); background: var(--color-pastel-blush); filter: none; }
.boton--peligro:active { box-shadow: 0 0 0 var(--color-border-strong); }
.urgente { border-color: var(--color-status-danger); background: var(--color-status-danger-bg); }
.urgente h2, .paso-accidente h2 { display: flex; align-items: center; gap: var(--space-2); }
.pasos-accidente { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.paso-accidente { display: grid; gap: var(--space-3); border-left: var(--space-2) solid var(--color-status-warning); }
.paso-accidente--hecho { border-left-color: var(--color-status-ok); }
.paso-accidente--hecho h2 .icono { color: var(--color-status-ok); }
.paso-accidente--peligro { border-left-color: var(--color-status-danger); }
.paso-accidente ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.cuenta-regresiva { font-size: var(--font-size-lead); }
/* La fecha y hora tiene un ancho mínimo propio: con el texto al 200 % no
   debe empujar la pantalla hacia el lado. */
input[type="datetime-local"].entrada { min-width: 0; max-width: 100%; font-size: var(--font-size-small); }

/* El bloque de acciones de una pantalla (debajo del semáforo, o «Agregar
   trabajador»): con aire arriba y abajo, para que no quede pegado a lo que
   lo rodea. */
.acciones-bloque { display: grid; gap: var(--space-3); justify-items: center; margin-block: var(--space-5) var(--space-6); }
.acciones-bloque > .boton--ancho { justify-self: stretch; }

/* El buscador del historial. */
.buscador { display: grid; gap: var(--space-2); margin-block: var(--space-4) var(--space-5); }
.buscador .ayuda { margin: 0; }
.buscador__resultado { margin: 0 0 var(--space-4); color: var(--color-ink-muted); }

/* --- Pagar el plan: el pago, la espera y tu suscripción ------------------------ */

/* Los pasos para empezar: plan, pago y tu empresa. */
.etapas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink-muted);
}
.etapas__paso { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.etapas__paso + .etapas__paso::before {
  content: "";
  width: var(--space-3);
  border-top: var(--border-control) solid var(--color-border-soft);
}
.etapas__marca {
  display: inline-grid;
  place-items: center;
  width: var(--size-mark);
  height: var(--size-mark);
  border-radius: var(--radius-pill);
  border: var(--border-control) solid var(--color-border-soft);
  background: var(--color-surface-card);
  font-family: var(--font-family-heading);
}
.etapas__marca .icono { width: 1em; height: 1em; }
.etapas__paso--hecho { color: var(--color-status-ok); }
.etapas__paso--hecho .etapas__marca {
  background: var(--color-status-ok);
  border-color: var(--color-status-ok);
  color: var(--color-action-on-primary);
}
.etapas__paso--actual { color: var(--color-ink); }
.etapas__paso--actual .etapas__marca {
  background: var(--color-action-primary);
  border-color: var(--color-action-primary-edge);
  color: var(--color-action-on-primary);
}

/* El pago: en el teléfono, el resumen arriba; en pantalla ancha, al lado. */
.checkout__columnas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; margin-top: var(--space-5); }
@media (min-width: 1024px) {
  .checkout__columnas { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .checkout__resumen { grid-column: 2; grid-row: 1; position: sticky; top: var(--space-5); }
  .checkout__formulario { grid-column: 1; grid-row: 1; }
}
.checkout__resumen { display: grid; gap: var(--space-4); }
.checkout__resumen > * { margin: 0; }
.checkout__subtitulo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--font-size-h3);
}
.checkout__numero {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--size-mark);
  height: var(--size-mark);
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-surface-card);
  font-size: var(--font-size-body);
}
.checkout__despues { display: flex; gap: var(--space-2); align-items: flex-start; color: var(--color-ink-muted); }
.checkout__despues .icono { margin-top: 0.15em; }
.checkout__puntos, .checkout__incluye { margin: 0; }
.checkout__incluye {
  padding-top: var(--space-4);
  border-top: var(--border-card) dashed var(--color-border-soft);
  font-size: var(--font-size-small);
}
.checkout__formulario .plegable p { margin: var(--space-2) 0 0; color: var(--color-ink-muted); }
.checkout__pagar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.checkout__legal { margin: 0; text-align: center; }

/* El plan que se compra, con su precio a la derecha. */
.linea-plan { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.linea-plan > div { flex: 1 1 8rem; min-width: 0; }
.linea-plan p { margin: 0; }
.linea-plan__nombre { font-family: var(--font-family-heading); font-weight: var(--font-weight-heading); font-size: var(--font-size-h3); }
.linea-plan__precio { font-weight: var(--font-weight-bold); }

/* La cuenta: cada línea con su monto a la derecha; el total, grande. */
.cuenta { margin: 0; display: grid; gap: var(--space-2); }
.cuenta > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.cuenta dt { flex: 1 1 auto; min-width: 0; color: var(--color-ink-muted); }
.cuenta dd { flex: none; margin: 0; font-variant-numeric: tabular-nums; font-weight: var(--font-weight-bold); }
.cuenta--impuestos { font-size: var(--font-size-small); padding-top: var(--space-3); border-top: var(--border-card) dashed var(--color-border-soft); }
.cuenta--total { padding-top: var(--space-3); border-top: var(--border-control) solid var(--color-ink); }
.cuenta--total dt { color: var(--color-ink); font-weight: var(--font-weight-bold); font-size: var(--font-size-lead); }
.cuenta--total dd { font-family: var(--font-family-heading); font-size: var(--font-size-h1); line-height: 1; }

/* Boleta o factura: dos tarjetas que se marcan, con su explicación. */
.opciones--dos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.opcion__cara--texto {
  min-height: auto;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  padding-right: calc(var(--size-mark) + var(--space-4));
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
}
.opcion__cara--texto strong { display: block; font-family: var(--font-family-heading); font-weight: var(--font-weight-heading); font-size: var(--font-size-lead); }
.opcion__ayuda { display: block; color: var(--color-ink-muted); font-size: var(--font-size-small); }
.facturacion__campos { display: grid; gap: var(--space-4); }

/* Los logos de las marcas, pintados con sus tokens. */
.marca {
  display: inline-grid;
  place-items: center;
  font-size: var(--font-size-small);
  padding: var(--space-1) var(--space-2);
  border: var(--border-card) solid var(--color-border-soft);
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
  vertical-align: middle;
}
.marca svg { height: 1.25em; width: auto; max-width: none; }
.marca--mercadopago svg { fill: var(--color-brand-mercadopago); }
.marca--visa svg { fill: var(--color-brand-visa); }
.marca__rojo { fill: var(--color-brand-mastercard-red); }
.marca__amarillo { fill: var(--color-brand-mastercard-yellow); }
.marca__cruce { fill: var(--color-brand-mastercard-overlap); }

/* El sello de confianza junto al botón de pagar. */
.pago-seguro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-control);
  background: var(--color-surface-sunken);
}
.pago-seguro p { margin: 0; overflow-wrap: anywhere; }
.pago-seguro__logo .marca { padding: var(--space-2); }
.pago-seguro__logo .marca svg { height: 2em; }
.pago-seguro__titulo { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--font-weight-bold); }
.pago-seguro__texto { color: var(--color-ink-muted); font-size: var(--font-size-small); }
.pago-seguro__tarjetas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* La espera mientras Mercado Pago confirma. */
.espera { display: grid; justify-items: center; text-align: center; gap: var(--space-3); padding-top: var(--space-7); }
.espera h1 { margin: 0; }
.espera__icono {
  display: grid;
  place-items: center;
  width: var(--size-illustration-small);
  height: var(--size-illustration-small);
  border-radius: var(--radius-pill);
  background: var(--color-pastel-sky);
  color: var(--color-status-info);
}
.espera__icono .icono { width: var(--size-mark); height: var(--size-mark); }
.espera__icono--error { background: var(--color-pastel-blush); color: var(--color-status-danger); }
.espera__barra {
  width: 100%;
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  overflow: hidden;
}
.espera__barra span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-status-info);
  animation: espera-barra 1.6s ease-in-out infinite;
}
@keyframes espera-barra {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
  .espera__barra span { animation: none; width: 100%; opacity: 0.4; }
}

/* Tu suscripción. */
/* Las piezas de una pantalla de pago, una debajo de otra con aire. */
.pila { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.pila > * { margin: 0; }
.pila .tarjeta > :last-child { margin-bottom: 0; }
.pila > .pila__titulo { margin-top: var(--space-4); }
.suscripcion__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.suscripcion__cabeza h2 { margin: 0; font-size: var(--font-size-h3); }
.suscripcion__cabeza p { margin: 0; }
.con-marca { display: flex; align-items: center; gap: var(--space-2); }
.cobro h3 { font-variant-numeric: tabular-nums; }