/* Materiales y proporciones comunes; se conservan las ilustraciones aprobadas. */
:root {
  --control-oro: #d8bd7d;
  --control-borde: #b99857;
  --control-radio: 9px;
  --control-respuesta: 180ms ease;
}
.acciones-cabecera { gap: 9px; }
.acciones-cabecera :is(.boton-sonido, .boton-herramienta, .boton-guia, #pantalla-completa) {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  border: 0;
  border-radius: var(--control-radio);
  color: #f0d89f;
  background: #102630 url('../assets/interfaz/pantalla-marco.png') center / 100% 100% no-repeat;
  box-shadow: 0 2px 5px #0003;
  transition: filter var(--control-respuesta), box-shadow var(--control-respuesta), transform var(--control-respuesta);
}
.acciones-cabecera :is(.boton-sonido, .boton-herramienta, #pantalla-completa) { padding: 11px; }
.acciones-cabecera .boton-guia { padding: 6px; }
.acciones-cabecera .guia-icono { flex-basis: 30px; width: 30px; height: 30px; }
.acciones-cabecera :is(.boton-sonido, .boton-herramienta, .boton-guia, #pantalla-completa):hover {
  filter: brightness(1.12);
  box-shadow: 0 3px 10px #d8bd7d24;
}
.acciones-cabecera :is(.boton-guia, #pantalla-completa)[aria-pressed="true"] {
  box-shadow: 0 0 0 2px #e7c57955, 0 2px 5px #0003;
}
.acciones-cabecera button:active { transform: translateY(1px); }
.boton, .narracion-boton, .narracion-selector, .guia-tamano button { border-radius: var(--control-radio); }
.narracion-boton, .narracion-selector { border-color: var(--control-borde); }
.narracion-fila { gap: 8px; }
.boton-paso { min-height: 46px; }
.paso { width: 44px; height: 44px; }
.guia-tamano button { width: 36px; height: 36px; min-height: 36px; }
#guia-oracion :is(button, summary):focus-visible,
#ajustes-rosario :is(button, select, input):focus-visible {
  outline: 2px solid #755222;
  outline-offset: 3px;
}
.guia-marco ::selection { background: #d3ad6260; color: #30281e; }
.titulo-escena h1, #oracion-titulo { text-wrap: balance; }
.boton-enlace, .guia-jaculatorias > summary { transition: background-color var(--control-respuesta), color var(--control-respuesta); }
@media (prefers-reduced-motion: reduce) {
  .acciones-cabecera button:active { transform: none; }
}
body[data-movimiento="quieto"] .acciones-cabecera button:active { transform: none; }

/* Acompañamiento por párrafo: sin remaquetar ni añadir rayas laterales. */
#oracion-texto > p, #jaculatorias-texto section > p {
  border-radius: 5px;
  transition: background-color 350ms ease, color 350ms ease;
}
#oracion-texto .texto-en-voz, #jaculatorias-texto .texto-en-voz {
  color: #4f391c;
  background: #dabb702e;
}
.ajuste-casilla { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-bottom: 8px; font-size: 14px; cursor: pointer; }
.ajuste-casilla input { width: 19px; height: 19px; margin: 0; accent-color: #8a682c; flex-shrink: 0; }
@media (forced-colors: active) {
  #oracion-texto .texto-en-voz, #jaculatorias-texto .texto-en-voz { color: HighlightText; background: Highlight; }
}

/* En móvil, la pintura ocupa su proporción natural, sin un visor vacío alto. */
@media (max-width: 850px) {
  body.guia-visible #visor {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  .acciones-cabecera { justify-content: center; }
  #oracion-titulo, .titulo-escena { min-width: 0; }
  #guia-oracion { scroll-margin-block: 12px; }
}
@media (pointer: coarse) {
  .guia-tamano button { width: 44px; height: 44px; min-height: 44px; }
}
#oracion-texto:focus-visible, #jaculatorias-texto:focus-visible {
  outline: 2px solid #755222;
  outline-offset: 3px;
}
@media (max-width: 380px) {
  .acciones-cabecera { gap: 11px; }
  .pasos { gap: 11px; }
  #guia-oracion[data-etapa="lectura"] .boton-oracion { font-size: 17px; }
}