/* Oro mate y luz contenida: los controles acompañan a la ilustración. */
.cabecera, .navegacion {
  background: linear-gradient(120deg, #132a36, #10232f 65%, #132934);
}
.cabecera { box-shadow: 0 2px 18px #00000014; }
.navegacion { box-shadow: 0 -2px 18px #00000014; }
.boton, .paso {
  transition: background-color 180ms ease, border-color 180ms ease,
    box-shadow 180ms ease, transform 180ms ease;
}
.boton:active:not(:disabled), .paso:active { transform: translateY(1px); }
.boton-dorado {
  background: linear-gradient(150deg, #efdaa4, #d9bc78);
  border-color: #f0dca066;
  box-shadow: inset 0 1px 0 #fff5d95c, 0 2px 6px #0000001a;
}
.boton-dorado:hover:not(:disabled) {
  background: linear-gradient(150deg, #f5e4b5, #e4c989);
  box-shadow: inset 0 1px 0 #fff5d970, 0 3px 12px #00000024;
}
.paso { position: relative; }
.paso[data-completo="true"] { border-color: #d9bb75; color: #ebd396; }
.paso[data-completo="true"]::after {
  content: '✓';
  position: absolute;
  top: -5px;
  right: -4px;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border: 1px solid #c5a663;
  border-radius: 50%;
  color: #f3e2b6;
  background: #1a3038;
  font-size: 10px;
  line-height: 1;
}
.paso[aria-current="step"] {
  color: #293740;
  box-shadow: 0 0 0 4px #ddc58d1f, inset 0 1px 0 #fff1c577;
}
#estado {
  max-width: min(85vw, 420px);
  border: 1px solid #d6bc7850;
  background: #10222eef;
  border-radius: 14px;
  box-shadow: 0 8px 32px #00000024;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .boton, .paso { transition: none; }
  .boton:active:not(:disabled), .paso:active { transform: none; }
}
body[data-movimiento="quieto"] .boton,
body[data-movimiento="quieto"] .paso { transition: none; }
body[data-movimiento="quieto"] .boton:active:not(:disabled),
body[data-movimiento="quieto"] .paso:active { transform: none; }

/* Marco ilustrado, a juego con el libro y los metales del rosario. */
.acciones-cabecera #pantalla-completa {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 11px;
  border: 0;
  border-radius: 9px;
  color: #fff0c9;
  background: transparent url('../assets/interfaz/pantalla-marco.png') center / 100% 100% no-repeat;
  box-shadow: 0 2px 5px #0003;
  transition: filter 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.acciones-cabecera #pantalla-completa:hover {
  filter: brightness(1.18);
  box-shadow: 0 2px 10px #d8b77524;
}
.acciones-cabecera #pantalla-completa:focus-visible {
  outline: 2px solid #f3d798;
  outline-offset: 3px;
}
.acciones-cabecera #pantalla-completa[aria-pressed="true"] {
  color: #fff8df;
  box-shadow: 0 0 0 2px #e7c57966, 0 2px 5px #0003;
}
#pantalla-completa svg { display: block; width: 22px; height: 22px; flex-shrink: 0; filter: drop-shadow(0 1px 1px #0008); }
#pantalla-completa .pantalla-contraer,
#pantalla-completa[aria-pressed="true"] .pantalla-ampliar { display: none; }
#pantalla-completa[aria-pressed="true"] .pantalla-contraer { display: block; }
@media (prefers-reduced-motion: reduce) {
  .acciones-cabecera #pantalla-completa { transition: none; }
}
body[data-movimiento="quieto"] .acciones-cabecera #pantalla-completa { transition: none; }