/*
 * Detalle de un test (/test/:id), sobre la superficie de marca (brand-theme.css). Encabezado de
 * marca (components.css), círculo con su aro de marca, título y tarjetas de acción (cuadro con aro
 * degradado, título y chevron). La clase base .test-detail__action sigue siendo la píldora que usan
 * Consulta, Para tu conocimiento y los participantes de her. Detrás, la decoración compartida
 * (variante 'detail'): la cinta en la franja reservada al final.
 */
.test-detail {
  --decor-ribbon-zone: 170px;
  --detail-gutter: 24px;

  display: flex;
}

/* En pantallas anchas la cinta es más plana: necesita menos franja. */
@media (min-width: 768px) {
  .test-detail {
    --decor-ribbon-zone: 132px;
  }
}

.test-detail__column {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--detail-gutter));
  min-height: 100dvh;
  margin-inline: auto;
  /* El encabezado queda debajo de los arcos de las esquinas (120 px), sin tocarlos. */
  padding-top: max(84px, calc(env(safe-area-inset-top) + var(--space-4)));
  padding-inline:
    max(var(--detail-gutter), env(safe-area-inset-left))
    max(var(--detail-gutter), env(safe-area-inset-right));
}

/* Volver: discreto, alineado con el borde de la columna (el área táctil sobresale). */
.test-detail__back {
  flex: none;
  color: var(--brand-text-muted);
}

.test-detail__back .icon {
  width: 22px;
  height: 22px;
  stroke-width: 1.75;
}

@media (hover: hover) {
  .test-detail__back:hover {
    color: var(--brand-text);
  }
}

/* Bloque central: se centra en el alto libre; en pantallas bajas baja y la vista hace scroll. */
.test-detail__main {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: clamp(var(--space-4), 5dvh, var(--space-12)) var(--space-4);
  text-align: center;
}

/* ------------------------------------------------------------------
 * Círculo del test: aro gris fijo alrededor del ícono.
 * ------------------------------------------------------------------ */
.test-detail__badge {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 120px;
  height: 120px;
  border-radius: var(--radius-pill);
  color: var(--brand-text);
}

.test-detail__badge .brand-ring {
  inset: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  /* base.css limita los svg a max-width: 100%; sin esto el aro se recorta y queda descentrado. */
  max-width: none;
  max-height: none;
}

.test-detail__badge .brand-ring circle {
  stroke-width: 3;
}

.test-detail__icon {
  position: relative;
  width: 54px;
  height: 54px;
  /* Sin el ajuste, el escalado del ícono (--icon-fit) engrosaría el trazo. */
  stroke-width: calc(1.25px * var(--icon-fit, 1));
}

/* ------------------------------------------------------------------
 * Título (h1): máximo dos líneas en el ancho de la columna.
 * ------------------------------------------------------------------ */
.test-detail__title {
  max-width: 20ch;
  margin-top: var(--space-8);
  font-size: clamp(1.625rem, 7.2vw, 2rem);
  font-weight: var(--weight-bold);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.test-detail__text {
  max-width: 34ch;
  margin-top: var(--space-3);
  color: var(--brand-text-muted);
  font-size: var(--text-body);
  line-height: 1.5;
}

/* ------------------------------------------------------------------
 * Tarjetas de acción: cuadro con el aro degradado de marca, título y chevron. Fuera de esta lista
 * (404) la clase base conserva la píldora centrada de siempre.
 * ------------------------------------------------------------------ */
.test-detail__actions {
  display: grid;
  /* Todas las tarjetas con la misma altura, aunque un título ocupe dos líneas. */
  grid-auto-rows: 1fr;
  gap: 14px;
  width: 100%;
  margin-top: var(--space-10);
}

.test-detail__actions li {
  display: flex;
}

.test-detail__action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  width: 100%;
  min-height: 60px;
  padding: var(--space-3) var(--space-6);
  border: 2px solid var(--brand-icon-ring);
  border-radius: var(--radius-pill);
  background: var(--brand-action-bg);
  color: var(--brand-text);
  /* También es <button> (acciones con diálogo): misma tipografía que el enlace. */
  font-family: inherit;
  font-size: var(--text-button);
  font-weight: var(--weight-regular);
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    border-color 200ms var(--vt-ease),
    background-color 200ms var(--vt-ease),
    transform 160ms var(--vt-ease);
}

/* Fuera de la lista del detalle el cuadro no existe: el ícono sigue siendo un hijo más. */
.test-detail__action-icon {
  display: contents;
}

.test-detail__action-glyph {
  flex: none;
  width: 24px;
  height: 24px;
  stroke-width: 1.75;
}

/* Solo se ven dentro de las tarjetas del detalle. */
.test-detail__action-chevron,
.test-detail__action-ring {
  display: none;
}

.test-detail__actions .test-detail__action {
  flex: 1;
  justify-content: flex-start;
  gap: var(--space-4);
  min-height: 84px;
  padding: 12px 16px;
  border: 1px solid var(--brand-glass-border);
  border-radius: 18px;
  font-size: clamp(1rem, 4.4vw, 1.0625rem);
  font-weight: var(--weight-bold);
  text-align: left;
}

.test-detail__actions .test-detail__action-label {
  min-width: 0;
}

.test-detail__actions .test-detail__action-icon {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  /* Cuadro gris claro (sin aro degradado). */
  background: #F2F2F7;
}

/* El mismo aro degradado del ícono del inicio, cuadrado; gira en afterEnter. */
.test-detail__actions .test-detail__action-ring {
  display: block;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  max-width: none;
  max-height: none;
}

.test-detail__actions .test-detail__action-ring rect {
  stroke-width: 2;
}

.test-detail__actions .test-detail__action-glyph {
  position: relative;
  width: 26px;
  height: 26px;
}

.test-detail__actions .test-detail__action-chevron {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  margin-left: auto;
  color: var(--brand-text-muted);
  transition: transform 160ms var(--vt-ease);
}

@media (hover: hover) {
  .test-detail__actions .test-detail__action:hover .test-detail__action-chevron {
    transform: translateX(2px);
  }
}

@media (hover: hover) {
  .test-detail__action:hover {
    border-color: var(--brand-glass-border-strong);
    background: var(--brand-action-bg-hover);
  }
}

.test-detail__action:active {
  transform: scale(0.98);
}

.test-detail__action:focus-visible {
  outline: var(--focus-ring) solid var(--brand-sky);
  outline-offset: var(--focus-offset);
}

/* Entrada: ocultos hasta que arranca su animación (js/views/test-detail.js, afterEnter). */
.test-detail--entering .test-detail__action {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .test-detail__action,
  .test-detail__action:active {
    transform: none;
    transition:
      border-color 200ms var(--vt-ease),
      background-color 200ms var(--vt-ease);
  }
}

/* 404 del test: mismo bloque central, con un solo botón de vuelta. */
.test-detail__not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.test-detail__not-found .test-detail__title {
  margin-top: 0;
}

.test-detail__not-found .test-detail__action {
  margin-top: var(--space-8);
}

/* Franja reservada para la cinta: el contenido nunca queda debajo de ella. */
.test-detail__ribbon-space {
  flex: 0 0 var(--decor-ribbon-zone);
}