/* Seda azul y oro: una imagen continua une el visor, las cuentas y los controles. */
:root {
  --fondo-rosario: url('../assets/interfaz/fondo-seda-azul.webp');
  --fondo-rosario-movil: url('../assets/interfaz/fondo-seda-movil.webp');
  --velo-seda: rgba(3, 17, 34, .20);
  --velo-seda-sencilla: rgba(3, 17, 34, .28);
}

body.en-oracion { background-color: #142d3f; }
body.en-oracion #aplicacion {
  background: linear-gradient(var(--velo-seda), var(--velo-seda)),
    var(--fondo-rosario) center / cover no-repeat, #142d3f;
}

body.en-oracion :is(#contenido-oracion, #zona-imagen, #visor, #lienzo) {
  background: transparent;
}
body.en-oracion #contenido-oracion { background: rgba(12, 30, 39, .05); }

body.en-oracion #cabecera {
  background: linear-gradient(90deg, rgba(6,24,33,.37), rgba(10,29,39,.30), rgba(6,24,33,.37));
  border-bottom-color: #e6c78155;
}
body.en-oracion #rosario-cuentas {
  background: rgba(7, 26, 36, .16);
  border-top-color: #e6c78155;
}
body.en-oracion #navegacion {
  background: linear-gradient(90deg, rgba(6,24,33,.32), rgba(10,29,39,.23), rgba(6,24,33,.32));
  border-top-color: #e6c78155;
}

body.en-oracion :is(.titulo-escena, .cuentas-cabecera, .cuentas-etiquetas, .orientacion) {
  text-shadow: 0 1px 3px #06131d;
}
body.en-oracion .cuentas-etiquetas { color: #eee6d7; }
body.en-oracion #cuentas-contexto { color: #f3d99e; }
body.en-oracion .orientacion { color: #e0e8e8; }

/* El dibujo vertical conserva los adornos laterales en la vista ilustrada móvil. */
@media (max-width: 850px) and (orientation: portrait) {
  body.en-oracion #aplicacion {
    background-image: linear-gradient(var(--velo-seda), var(--velo-seda)), var(--fondo-rosario-movil);
  }
}

@media (forced-colors: active) {
  body.en-oracion #aplicacion { background-image: none; }
  body.en-oracion :is(.titulo-escena, .cuentas-cabecera, .cuentas-etiquetas, .orientacion) {
    text-shadow: none;
  }
}