/* ==========================================================================
   Arquetipo de marca
   Estética de las láminas: negro y blanco, tipografía condensada.
   ========================================================================== */

:root {
  --am-negro: #000;
  --am-blanco: #fff;
  --am-tinta: #111;
  --am-tinta-2: #444;
  --am-tinta-3: #6e6e6e;
  --am-gris-1: #f4f4f4;
  --am-gris-2: #e3e3e3;
  --am-gris-3: #cfcfcf;
  --am-error: #b00020;
  --am-display: 'Anton', Impact, 'Arial Narrow Bold', sans-serif;
  --am-cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --am-texto: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --am-renglon: 2.25rem;
  --am-renglon-sm: 2rem;

  --bs-body-font-family: var(--am-texto);
  --bs-body-color: var(--am-tinta);
  --bs-body-bg: var(--am-blanco);
  --bs-link-color-rgb: 0, 0, 0;
  --bs-link-hover-color-rgb: 68, 68, 68;
  --bs-border-radius: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--am-blanco);
  color: var(--am-tinta);
}

::selection { background: var(--am-negro); color: var(--am-blanco); }

/* Margen lateral del contenedor acorde al espaciado de las filas (evita scroll horizontal). */
.container-xl { --bs-gutter-x: 2rem; }

@media (min-width: 992px) {
  .container-xl { --bs-gutter-x: 3rem; }
}

.am-saltar {
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 100;
  background: var(--am-blanco);
  color: var(--am-negro);
  padding: .5rem 1rem;
}

h1:focus, h2:focus { outline: none; }

/* ---------- Cabecera ---------- */

.am-header { background: var(--am-negro); color: var(--am-blanco); }

.am-header__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 5.5rem;
  padding-block: 1rem;
}

.am-header__titulo {
  margin: 0;
  font-family: var(--am-display);
  font-size: clamp(1.3rem, 3.2vw, 2.6rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .01em;
}

.am-header__cliente {
  display: flex;
  align-items: center;
  gap: .6rem;
  font: 700 .95rem/1 var(--am-cond);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}

.am-header__nombre {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.am-hex {
  display: inline-block;
  flex: none;
  width: 2.1rem;
  aspect-ratio: 1 / 1.1547;
  background: var(--am-blanco);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* ---------- Firma de Jorge Calderón (provisional hasta tener logo) ---------- */

.am-mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.5rem;
  aspect-ratio: 1 / 1.1547;
  padding-top: .06em;
  font: 1rem/1 var(--am-display);
  letter-spacing: .02em;
  color: var(--am-negro);
  background: var(--am-blanco);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.am-mono--negro { color: var(--am-blanco); background: var(--am-negro); }
.am-mono--grande { width: 4.25rem; margin-bottom: 1.5rem; font-size: 1.7rem; }

.am-firma {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  color: var(--am-blanco);
  text-align: left;
}

.am-firma__texto { display: flex; flex-direction: column; gap: .35rem; }

.am-firma__nombre {
  font: 1.2rem/1 var(--am-display);
  text-transform: uppercase;
  letter-spacing: .015em;
}

.am-firma__cargo {
  font: 500 .74rem/1 var(--am-cond);
  text-transform: uppercase;
  letter-spacing: .18em;
}

.am-firma__logo { display: block; max-height: 2.6rem; width: auto; }

.am-firma--clara { color: var(--am-negro); }
.am-firma--clara .am-mono { color: var(--am-blanco); background: var(--am-negro); }

.am-firma--sm { gap: .6rem; }
.am-firma--sm .am-mono { width: 1.85rem; font-size: .74rem; }
.am-firma--sm .am-firma__nombre { font-size: .95rem; }
.am-firma--sm .am-firma__cargo { font-size: .62rem; }
.am-firma--sm .am-firma__logo { max-height: 1.9rem; }

.am-kicker {
  margin: 0 0 1.1rem;
  font: 600 1rem/1.2 var(--am-cond);
  text-transform: uppercase;
  letter-spacing: .16em;
}

@media (max-width: 575.98px) {
  .am-header__etiqueta, .am-header__nombre { display: none; }
  .am-hex { width: 1.6rem; }
}

/* ---------- Progreso ---------- */

.am-progreso {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--am-blanco);
  border-bottom: 1px solid var(--am-gris-2);
}

.am-progreso__fila {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-block: .9rem;
}

.am-progreso__texto {
  font: 700 1rem/1 var(--am-cond);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}

.am-progreso__barra {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}

.am-progreso__seg { height: 6px; background: var(--am-gris-2); transition: background-color .3s; }
.am-progreso__seg.is-activo { background: var(--am-negro); }

/* ---------- Contenido ---------- */

.am-main { flex: 1; padding-block: clamp(2rem, 5vw, 3.75rem); }

.am-paso { animation: am-entrar .35s ease both; }

@keyframes am-entrar {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.am-display {
  margin: 0 0 1.5rem;
  font-family: var(--am-display);
  font-size: clamp(3rem, 8.5vw, 6.5rem);
  line-height: .95;
  text-transform: uppercase;
}

.am-titulo {
  margin: 0;
  font-family: var(--am-display);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.02;
  text-transform: uppercase;
}

.am-subtitulo {
  margin: 0 0 1.5rem;
  font-family: var(--am-display);
  font-size: 1.85rem;
  line-height: 1.05;
  text-transform: uppercase;
}

.am-ayuda {
  margin: 0;
  font: 700 .95rem/1.15 var(--am-cond);
  text-transform: uppercase;
  letter-spacing: .01em;
}

.am-etiqueta {
  display: block;
  margin-bottom: .3rem;
  font: 700 1.05rem/1.2 var(--am-cond);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.am-lead { max-width: 34rem; font-size: 1.2rem; line-height: 1.55; }

.am-texto { font: 400 1.2rem/1.4 var(--am-cond); }
.am-texto p { margin-bottom: .8rem; }

.am-nota { margin: 1rem 0 0; font-size: .875rem; line-height: 1.5; color: var(--am-tinta-2); }

.am-opcional { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--am-tinta-3); }

/* ---------- Bienvenida ---------- */

.am-indice {
  max-width: 30rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--am-negro);
}

.am-indice li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--am-gris-3);
  font: 600 1.15rem/1.2 var(--am-cond);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.am-indice b { min-width: 1.25rem; font-family: var(--am-display); font-weight: 400; }

.am-tarjeta {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--am-blanco);
  border: 2px solid var(--am-negro);
}

.am-campo { margin-bottom: 1.6rem; }

.am-campo > label {
  display: block;
  margin-bottom: .2rem;
  font: 700 .95rem/1.2 var(--am-cond);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.am-input.form-control {
  padding: .5rem .25rem;
  font-size: 1.2rem;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--am-negro);
  border-radius: 0;
  box-shadow: none;
}

.am-input.form-control:focus {
  background: var(--am-gris-1);
  border-bottom-width: 3px;
  padding-bottom: calc(.5rem - 1px);
  box-shadow: none;
}

.was-validated .am-input.form-control:invalid,
.was-validated .am-input.form-control:valid {
  padding-right: .25rem;
  background-image: none;
  border-color: var(--am-negro);
}

.was-validated .am-input.form-control:invalid { border-bottom-color: var(--am-error); }
.invalid-feedback { color: var(--am-error); font-weight: 500; }

.am-trampa {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

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

.am-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem 1.75rem;
  font: 700 1.15rem/1 var(--am-cond);
  text-transform: uppercase;
  letter-spacing: .08em;
  text-decoration: none;
  color: var(--am-blanco);
  background: var(--am-negro);
  border: 2px solid var(--am-negro);
  border-radius: 0;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}

.am-btn:hover { color: var(--am-blanco); background: #2b2b2b; }
.am-btn:focus-visible { outline: 3px solid var(--am-negro); outline-offset: 3px; }
.am-btn:disabled { opacity: .6; cursor: progress; }

.am-btn--linea { color: var(--am-negro); background: var(--am-blanco); }
.am-btn--linea:hover { color: var(--am-blanco); background: var(--am-negro); }

.am-btn--bloque { width: 100%; }
.am-btn--sm { padding: .55rem 1rem; font-size: .95rem; }

.am-aviso {
  margin-bottom: 1rem;
  padding: .75rem 1rem;
  font-weight: 500;
  color: #6b0014;
  background: #fdf0f2;
  border-left: 4px solid var(--am-error);
}

.am-aviso--ok { color: var(--am-tinta); background: var(--am-gris-1); border-left-color: var(--am-negro); }

/* ---------- Navegación de pasos ---------- */

.am-nav {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--am-negro);
}

.am-nav__botones { display: flex; justify-content: space-between; gap: 1rem; }
.am-nav__botones #btnSiguiente { margin-left: auto; }

@media (max-width: 575.98px) {
  .am-nav__botones .am-btn { padding-inline: 1.1rem; }
}

/* ---------- Paso 1: elegidas ---------- */

.am-slots { margin: 2rem 0 0; padding: 0; list-style: none; }

.am-slot {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  min-height: 4.75rem;
  padding: 1rem 0 .55rem;
  border-bottom: 1.5px solid var(--am-negro);
}

.am-slot__num {
  flex: none;
  width: 2.6rem;
  font: 2.6rem/.9 var(--am-display);
  color: var(--am-gris-3);
}

.am-slot.is-lleno .am-slot__num { color: var(--am-negro); }

.am-slot__cuerpo { flex: 1; min-width: 0; }

.am-slot__nombre {
  display: block;
  font: 600 1.05rem/1.1 var(--am-cond);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--am-tinta-3);
}

.am-slot.is-lleno .am-slot__nombre {
  font: 1.75rem/1 var(--am-display);
  letter-spacing: .01em;
  color: var(--am-negro);
}

.am-slot__rasgos {
  display: block;
  margin-top: .3rem;
  font: 600 .82rem/1.2 var(--am-cond);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--am-tinta-2);
}

.am-slot__rasgos:empty { display: none; }

.am-slot__acciones { display: flex; gap: .25rem; }

.am-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  color: var(--am-negro);
  background: var(--am-blanco);
  border: 1.5px solid var(--am-negro);
}

.am-icono svg { width: 1rem; height: 1rem; fill: currentColor; }
.am-icono:hover { color: var(--am-blanco); background: var(--am-negro); }
.am-icono:focus-visible { outline: 3px solid var(--am-negro); outline-offset: 2px; }
.am-icono:disabled { opacity: .25; pointer-events: none; }

/* ---------- Rueda ---------- */

.rueda {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 11rem);
  margin-inline: auto;
  overflow: visible;
  font-family: var(--am-cond);
  user-select: none;
}

.rueda-txt { font-weight: 500; letter-spacing: .01em; fill: var(--am-negro); }
.rueda-nombre { font-family: var(--am-display); letter-spacing: .01em; fill: var(--am-negro); }

.rueda-arq { outline: none; }
.rueda-arq__fondo { fill: var(--am-blanco); transition: fill .15s ease; }

.rueda:not(.rueda--lectura) .rueda-arq { cursor: pointer; }
.rueda:not(.rueda--lectura) .rueda-arq:hover .rueda-arq__fondo { fill: #ececec; }
.rueda-arq:focus-visible .rueda-arq__fondo { fill: #ececec; stroke: var(--am-negro); stroke-width: 6; }

.rueda-arq.is-sel .rueda-arq__fondo,
.rueda:not(.rueda--lectura) .rueda-arq.is-sel:hover .rueda-arq__fondo { fill: var(--am-negro); }
.rueda-arq.is-sel .rueda-txt,
.rueda-arq.is-sel .rueda-nombre { fill: var(--am-blanco); }
.rueda-arq.is-sel:focus-visible .rueda-arq__fondo { stroke: #8a8a8a; }

.rueda-arq__puesto { opacity: 0; transition: opacity .15s; }
.rueda-arq.is-sel .rueda-arq__puesto { opacity: 1; }
.rueda-arq__puesto circle { fill: var(--am-negro); stroke: var(--am-blanco); stroke-width: 3; }
.rueda-arq__puesto text { font-family: var(--am-display); font-size: 22px; fill: var(--am-blanco); }

.rueda--llena .rueda-arq:not(.is-sel) { opacity: .4; }

.rueda-lineas { fill: none; stroke: var(--am-negro); stroke-width: 1.5; pointer-events: none; }

.rueda-marcas { font-size: 17px; letter-spacing: .02em; fill: var(--am-negro); pointer-events: none; }
.rueda-marcas__titulo { font-weight: 700; font-size: 13px; letter-spacing: .06em; }

/* Paso 1: la rueda usa todo el ancho de su columna (sin límite de alto) para que se lea bien. */
.am-rueda .rueda { max-width: 1040px; max-height: none; }

.am-titulo--paso1 { font-size: clamp(2rem, 3.6vw, 3rem); }
.am-texto--paso1 p:last-child { margin-bottom: 0; }

/* En la columna angosta, los botones de cada puesto bajan a una segunda línea si no caben. */
.am-slots--lateral { margin-top: .5rem; }
.am-slots--lateral .am-slot { flex-wrap: wrap; row-gap: .5rem; }
.am-slots--lateral .am-slot__cuerpo { flex: 1 1 8rem; }
.am-slots--lateral .am-slot__acciones { margin-left: auto; }

@media (min-width: 992px) {
  .am-paso1__lateral { position: sticky; top: 5rem; }
}

.rueda-centro { pointer-events: none; }
.rueda-centro__num { font-family: var(--am-display); font-size: 64px; fill: var(--am-negro); }
.rueda-centro__cap { font-weight: 700; font-size: 15px; letter-spacing: .14em; fill: var(--am-negro); }

/* ---------- Paso 1: tarjetas (móvil) ---------- */

.am-cartas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
}

.am-carta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-height: 8.75rem;
  padding: .85rem .8rem;
  text-align: left;
  color: var(--am-negro);
  background: var(--am-blanco);
  border: 2px solid var(--am-negro);
}

.am-carta[aria-pressed="true"] { color: var(--am-blanco); background: var(--am-negro); }
.am-cartas.is-llena .am-carta[aria-pressed="false"] { opacity: .45; }
.am-carta:focus-visible { outline: 3px solid var(--am-negro); outline-offset: 2px; }

.am-carta__nombre {
  padding-right: 1.8rem;
  font: 1.35rem/1 var(--am-display);
  text-transform: uppercase;
}

.am-carta__rasgos {
  font: 600 .8rem/1.25 var(--am-cond);
  text-transform: uppercase;
  letter-spacing: .02em;
}

.am-carta__marcas {
  margin-top: auto;
  font: 500 .78rem/1.25 var(--am-cond);
  text-transform: uppercase;
  opacity: .75;
}

.am-carta__puesto {
  position: absolute;
  top: .6rem;
  right: .6rem;
  width: 1.65rem;
  height: 1.65rem;
  font: 1rem/1.65rem var(--am-display);
  text-align: center;
  color: var(--am-negro);
  background: var(--am-blanco);
  border-radius: 50%;
}

.am-carta__puesto:empty { display: none; }

/* ---------- Pasos 2 a 5 ---------- */

.am-pregunta { max-width: 64rem; }

.am-pregunta__cab {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .6rem 1.4rem;
  margin-bottom: 2rem;
}

.am-pregunta__cab .am-ayuda { max-width: 21rem; padding-bottom: .4rem; }

.am-campo-texto + .am-campo-texto { margin-top: 2.5rem; }

.am-ayuda--campo {
  margin-bottom: .75rem;
  font-weight: 600;
  text-transform: none;
  font-size: 1.05rem;
  color: var(--am-tinta-2);
}

/* Área de texto con renglones, como las líneas de la lámina. */
.am-lineas {
  display: block;
  width: 100%;
  min-height: calc(var(--am-renglon) * 7);
  padding: 0 .25rem 0 .9rem;
  overflow: hidden;
  resize: none;
  font: 400 1.15rem/var(--am-renglon) var(--am-texto);
  color: var(--am-tinta);
  background-color: transparent;
  background-image: linear-gradient(to bottom, transparent calc(var(--am-renglon) - 1px), var(--am-negro) calc(var(--am-renglon) - 1px));
  background-size: 100% var(--am-renglon);
  background-position: 0 -6px;
  background-attachment: local;
  border: 0;
  border-left: 4px solid transparent;
  border-radius: 0;
}

.am-lineas:focus { outline: none; border-left-color: var(--am-negro); }
.am-lineas::placeholder { color: var(--am-tinta-3); }
.am-lineas.is-invalido { border-left-color: var(--am-error); }

/* ---------- Final ---------- */

.am-fin { max-width: 54rem; margin-inline: auto; padding-block: 1rem 2rem; text-align: center; }
.am-fin .am-display { font-size: clamp(2.6rem, 7vw, 5rem); }

.am-podio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.am-podio li { padding: 1.25rem 1.1rem; text-align: left; color: var(--am-blanco); background: var(--am-negro); }
.am-podio__n { display: block; font: 2rem/1 var(--am-display); color: #9a9a9a; }
.am-podio__nombre { display: block; margin-top: .4rem; font: 1.7rem/1.05 var(--am-display); text-transform: uppercase; }

@media (max-width: 575.98px) {
  .am-podio { grid-template-columns: 1fr; }
}

/* ---------- Pie ---------- */

.am-footer { margin-top: auto; color: var(--am-blanco); background: var(--am-negro); }

.am-footer__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  min-height: 5rem;
  padding-block: 1rem;
}

.am-footer__app {
  font: 700 .85rem/1 var(--am-cond);
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .75;
}

/* ==========================================================================
   Panel administrativo
   ========================================================================== */

.am-admin { background: var(--am-gris-1); }
.am-admin .am-header__fila { min-height: 4.5rem; }
.am-admin .am-header__titulo { font-size: clamp(1.2rem, 2.4vw, 1.8rem); }
.am-admin .am-header__titulo small { font: 700 .85rem var(--am-cond); letter-spacing: .1em; opacity: .7; margin-left: .6rem; }

.am-admin-nav { display: flex; align-items: center; gap: 1.5rem; white-space: nowrap; }

@media (max-width: 575.98px) {
  .am-admin .am-header__fila { flex-wrap: wrap; gap: .5rem 1rem; }
  .am-admin-nav { gap: 1rem; }
}

.am-admin-nav a,
.am-admin-nav button {
  padding: .25rem 0;
  font: 700 .95rem/1 var(--am-cond);
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
  color: var(--am-blanco);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
}

.am-admin-nav a:hover,
.am-admin-nav button:hover,
.am-admin-nav .is-activo { border-bottom-color: var(--am-blanco); }
.am-admin-nav a:focus-visible,
.am-admin-nav button:focus-visible { outline: 2px solid var(--am-blanco); outline-offset: 4px; }

.am-panel { padding: 1.5rem; background: var(--am-blanco); border: 1px solid var(--am-gris-2); }

.am-panel__cab {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.am-panel__titulo { margin: 0; font: 1.6rem/1.1 var(--am-display); text-transform: uppercase; }

.am-panel__sub {
  margin: .25rem 0 0;
  font: 600 .9rem/1.3 var(--am-cond);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--am-tinta-3);
}

.am-stat { height: 100%; padding: 1.25rem 1.5rem; background: var(--am-blanco); border: 1px solid var(--am-gris-2); }

.am-stat__etq {
  font: 700 .85rem/1.2 var(--am-cond);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--am-tinta-2);
}

.am-stat__valor { margin-top: .35rem; font: 600 2.6rem/1.1 var(--am-cond); }
.am-stat__valor--sm { font-size: 1.6rem; line-height: 1.35; }

.am-link { display: flex; gap: .5rem; }

.am-link input {
  flex: 1;
  min-width: 0;
  padding: .55rem .75rem;
  font: 500 1rem var(--am-texto);
  background: var(--am-gris-1);
  border: 1px solid var(--am-gris-3);
}

/* Gráfico de barras apiladas: personalidades más elegidas. */
.am-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 600 .9rem/1 var(--am-cond);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--am-tinta-2);
}

.am-leyenda li::before {
  content: '';
  display: inline-block;
  width: .75rem;
  height: .75rem;
  margin-right: .4rem;
  vertical-align: -1px;
  border-radius: 2px;
  background: var(--c);
}

.am-c1 { --c: #111; }
.am-c2 { --c: #6b6b6b; }
.am-c3 { --c: #a8a8a8; }

.am-grafico__fila {
  display: grid;
  grid-template-columns: 7rem 1fr;
  align-items: center;
  gap: .9rem;
}

.am-grafico__etq {
  font: 600 .95rem/1 var(--am-cond);
  text-transform: uppercase;
  letter-spacing: .03em;
  text-align: right;
  color: var(--am-tinta);
}

.am-grafico__pista {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 2rem;
  border-left: 1px solid var(--am-gris-3);
}

.am-grafico__barra { display: flex; gap: 2px; height: 18px; }

.am-grafico__seg {
  position: relative;
  min-width: 3px;
  background: var(--c);
}

.am-grafico__seg::after { content: ''; position: absolute; inset: -4px 0; }
.am-grafico__seg:last-child { border-radius: 0 4px 4px 0; }
.am-grafico__seg:hover,
.am-grafico__seg:focus-visible { outline: 2px solid var(--am-negro); outline-offset: 2px; }

.am-grafico__total {
  font: 600 .95rem/1 var(--am-cond);
  font-variant-numeric: tabular-nums;
  color: var(--am-tinta-2);
}

.am-tooltip {
  position: fixed;
  z-index: 60;
  padding: .45rem .65rem;
  font: 600 .9rem/1.2 var(--am-cond);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--am-blanco);
  background: var(--am-negro);
  pointer-events: none;
}

/* Tabla de respuestas */
.am-tabla { margin: 0; font-size: .95rem; }
.am-tabla > :not(caption) > * > * { padding: .8rem .6rem; vertical-align: middle; }

.am-tabla thead th {
  font: 700 .8rem/1.2 var(--am-cond);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  color: var(--am-tinta-2);
  border-bottom: 2px solid var(--am-negro);
}

.am-tabla td small { display: block; color: var(--am-tinta-3); }
.am-tabla--filas { --bs-table-hover-bg: var(--am-gris-1); }
.am-tabla--filas tbody tr { cursor: pointer; }
.am-tabla .am-btn { color: var(--am-blanco); }
.am-tabla .am-btn:hover { text-decoration: none; }
.am-tabla a { font-weight: 600; text-decoration: none; }
.am-tabla a:hover { text-decoration: underline; }
.am-num { font-variant-numeric: tabular-nums; }

.am-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin: .1rem .15rem .1rem 0;
  padding: .15rem .45rem;
  font: 600 .8rem/1.2 var(--am-cond);
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
  border: 1px solid var(--am-negro);
}

.am-chip b { font-family: var(--am-display); font-weight: 400; }

.am-estado {
  display: inline-block;
  padding: .25rem .5rem;
  font: 700 .78rem/1 var(--am-cond);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}

.am-estado--ok { color: var(--am-blanco); background: var(--am-negro); }
.am-estado--pend { color: var(--am-negro); border: 1px dashed var(--am-negro); }

.am-filtros { display: flex; flex-wrap: wrap; gap: .5rem; }
.am-filtros input[type="search"] { width: 17rem; max-width: 100%; }
.am-filtros .form-control, .am-filtros .form-select { border-color: var(--am-gris-3); }
.am-filtros .form-control:focus, .am-filtros .form-select:focus { border-color: var(--am-negro); box-shadow: 0 0 0 2px rgba(0, 0, 0, .15); }

.pagination { --bs-pagination-color: var(--am-negro); --bs-pagination-active-bg: var(--am-negro); --bs-pagination-active-border-color: var(--am-negro); --bs-pagination-focus-box-shadow: 0 0 0 2px rgba(0, 0, 0, .25); }

/* Acceso */
.am-acceso { background: var(--am-negro); }
.am-acceso .am-main { display: flex; align-items: center; justify-content: center; }
.am-acceso .am-tarjeta { width: 100%; max-width: 27rem; margin-inline: auto; border: 0; }

/* ---------- Detalle de una respuesta (láminas) ---------- */

.am-barra-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1.5rem;
}

.am-lamina {
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
  background: var(--am-blanco);
  box-shadow: 0 2px 18px rgba(0, 0, 0, .08);
}

.am-lamina__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 2rem;
  color: var(--am-blanco);
  background: var(--am-negro);
}

.am-lamina__titulo { margin: 0; font: 2rem/1.05 var(--am-display); text-transform: uppercase; }
.am-lamina .am-titulo { font-size: 2.6rem; }
.am-lamina__cuerpo { flex: 1; padding: 2rem; }
.am-lamina__pie {
  display: flex;
  align-items: center;
  min-height: 3rem;
  margin: 0 1rem 1rem;
  padding: .45rem 1rem;
  background: var(--am-negro);
}

.am-hoja1 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 2rem 3rem; align-items: center; }

.am-datos { margin: 1.25rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; }
.am-datos dt { font: 700 .85rem/1.5 var(--am-cond); text-transform: uppercase; letter-spacing: .05em; color: var(--am-tinta-2); }
.am-datos dd { margin: 0; overflow-wrap: anywhere; }

.am-hoja2 {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 4rem;
}

.am-hoja2::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 1.5px solid var(--am-negro);
}

.am-bloque__cab {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .25rem 1rem;
  margin-bottom: .75rem;
}

.am-bloque__titulo { margin: 0; font: 1.8rem/1 var(--am-display); text-transform: uppercase; }
.am-bloque .am-ayuda { max-width: 16rem; font-size: .8rem; }
.am-bloque__sub { margin: 1rem 0 0; font: 700 .9rem/1.2 var(--am-cond); text-transform: uppercase; letter-spacing: .04em; }

.am-respuesta {
  min-height: calc(var(--am-renglon-sm) * 4);
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 400 1rem/var(--am-renglon-sm) var(--am-texto);
  background-image: linear-gradient(to bottom, transparent calc(var(--am-renglon-sm) - 1px), var(--am-negro) calc(var(--am-renglon-sm) - 1px));
  background-size: 100% var(--am-renglon-sm);
  background-position: 0 -5px;
}

.am-respuesta--vacia { font-style: italic; color: var(--am-tinta-3); }

/* La pregunta 5 tiene dos campos: cada uno reserva menos renglones vacíos. */
.am-bloque__sub + .am-respuesta { min-height: calc(var(--am-renglon-sm) * 2); }

.am-lamina .rueda { max-height: 470px; }

@media (max-width: 991.98px) {
  .am-hoja1, .am-hoja2 { grid-template-columns: 1fr; }
  .am-hoja2::before { display: none; }
  .am-lamina__cuerpo { padding: 1.25rem; }
  .am-lamina__cab { padding: 1rem 1.25rem; }
  .am-lamina__titulo { font-size: 1.4rem; }
  .am-lamina .am-titulo { font-size: 2rem; }
  .am-bloque__titulo { font-size: 1.5rem; }
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  .am-paso { animation: none; }
  *, *::before, *::after { transition: none !important; }
}

/* ---------- Impresión (guardar como PDF): una lámina por hoja A4 horizontal ---------- */

@media print {
  @page { size: A4 landscape; margin: 8mm; }

  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { display: block; background: var(--am-blanco) !important; }
  .no-print, .modal, .am-admin > .am-header, .am-admin > .am-footer { display: none !important; }
  .am-main { padding: 0; }
  .container-xl { max-width: none; padding: 0; }

  .am-lamina { margin: 0; box-shadow: none; break-inside: avoid; }
  .am-lamina + .am-lamina { break-before: page; }

  /* Al imprimir, Chrome evalúa las media queries como si la hoja fuera angosta:
     se fuerza el diseño de escritorio (el mismo que admin.js mide para ajustar). */
  .am-hoja1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) !important; }
  .am-hoja2 { grid-template-columns: 1fr 1fr !important; }
  .am-hoja2::before { display: block !important; }
  .am-lamina__cab { padding: 1.25rem 2rem !important; }
  .am-lamina__titulo { font-size: 2rem !important; }
  .am-lamina .am-titulo { font-size: 2.6rem !important; }
  .am-bloque__titulo { font-size: 1.8rem !important; }

  /* Con respuestas muy largas, admin.js calcula cuánto reducir el contenido para que quepa en la hoja. */
  .am-lamina__cuerpo { padding: 2rem !important; zoom: var(--escala-impresion, 1); }
}