/* Paleta y tipografías: cambia estas variables para personalizar la aplicación. */
:root {
  color-scheme: dark;
  --noche: #0b1720;
  --panel-oscuro: #112431;
  --marfil: #f5efdf;
  --tinta: #243e4b;
  --oro: #d8bd7d;
  --oro-oscuro: #826237;
  font-family: "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; }
body { background: var(--noche); color: var(--marfil); }
button { font: inherit; cursor: pointer; touch-action: manipulation; }
button, img { -webkit-user-select: none; user-select: none; }
button:disabled { opacity: .36; cursor: default; }
button:focus-visible { outline: 3px solid #fcdb8c; outline-offset: 5px; }
[hidden] { display: none !important; }
h1, p { margin: 0; }

#aplicacion { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
#visor { position: relative; flex: 1; min-height: 0; overflow: hidden; }
#lienzo { position: absolute; inset: 0; }
#lienzo canvas { display: block; }
.etiqueta { font-size: 11px; letter-spacing: 2.2px; line-height: 1.5; font-weight: 600; text-transform: uppercase; }

/* Oración: las barras ocupan su propio espacio, sin superponerse a la pintura. */
.cabecera { display: grid; grid-template-columns: 1fr minmax(0, 2.8fr) 1fr; gap: 18px; align-items: center; padding: 17px 30px 18px; background: var(--panel-oscuro); border-bottom: 1px solid #ddc69323; }
.titulo-escena { text-align: center; }
.titulo-escena .etiqueta { color: #cbb98e; font-size: 10px; letter-spacing: 1.6px; }
.titulo-escena h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(19px, 2.1vw, 28px); line-height: 1.2; margin-top: 5px; }
.titulo-escena h1:focus { outline: none; }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 17px; border: 1px solid #ddc69345; border-radius: 9px; color: #f5efdf; background: #ffffff06; line-height: 1.2; }
.boton:hover:not(:disabled) { background: #ffffff10; border-color: #ddc6939c; }
.boton-discreto { width: max-content; font-size: 13px; border-color: transparent; background: none; color: #d1d7d7; padding: 9px 10px; }
#pantalla-completa { justify-self: end; }
.texto-pantalla { max-width: 125px; font-size: 12px; }
.navegacion { background: var(--panel-oscuro); border-top: 1px solid #ddc69323; padding: 16px 28px 14px; }
.fila-navegacion { max-width: 850px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 25px; }
.boton-paso { font-size: 14px; min-width: 154px; }
#anterior { justify-self: start; }
#siguiente { justify-self: end; }
.boton-dorado { color: #293740; background: #dfc58a; border-color: #dfc58a; }
.boton-dorado:hover:not(:disabled) { background: #f1d99e; border-color: #f1d99e; }
.pasos { display: flex; gap: 12px; align-items: center; }
.paso { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #c7b78f59; background: transparent; color: #c7cfd1; font-size: 14px; }
.paso:hover { background: #ffffff0a; border-color: #ddc693; }
.paso[aria-current] { background: #dac28a; border-color: #dac28a; color: #203747; font-weight: 700; box-shadow: 0 0 0 4px #dac28a12; }
.orientacion { margin-top: 11px; text-align: center; font-size: 12px; line-height: 1.55; color: #aebcc3; }

.estado, .error-imagen { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, 85%); padding: 25px; text-align: center; color: var(--marfil); border: 1px solid #b6a47470; border-radius: 12px; background: #142a37f5; font-size: 15px; line-height: 1.7; }
.error-imagen p + p { margin-top: 5px; color: #c5cdd0; }
.error-imagen button { margin-top: 18px; }
.aviso-inicial { position: fixed; inset: 40% 15% auto; z-index: 4; text-align: center; padding: 25px; background: var(--panel-oscuro); }
.solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 760px) {
  .cabecera { padding: 12px 12px 13px; grid-template-columns: 74px minmax(0, 1fr) 74px; gap: 8px; }
  .texto-pantalla { display: none; }
  .titulo-escena .etiqueta { font-size: 9px; letter-spacing: 1px; }
  .navegacion { padding: 13px 16px 12px; }
  .fila-navegacion { gap: 14px; }
  .pasos { gap: 8px; }
  .paso { width: 35px; height: 35px; }
  .boton-paso { min-width: 128px; padding: 10px 12px; font-size: 13px; }
}

@media (max-width: 560px) {
  .titulo-escena h1 { font-size: 18px; }
  .titulo-escena .etiqueta { font-size: 8px; letter-spacing: .7px; }
  .cabecera { grid-template-columns: 57px minmax(0, 1fr) 38px; padding: 11px 10px; gap: 7px; }
  .boton-discreto { font-size: 12px; padding: 8px 4px; }
  .fila-navegacion { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pasos { grid-column: 1 / -1; grid-row: 1; justify-content: center; gap: 16px; }
  .paso { width: 38px; height: 38px; }
  .boton-paso { min-width: 0; width: 100%; font-size: 13px; min-height: 43px; }
  .orientacion { font-size: 11px; max-width: 320px; margin: 10px auto 0; }
}

@media (max-height: 650px) and (min-width: 561px) {
  .cabecera { padding-top: 8px; padding-bottom: 9px; }
  .titulo-escena h1 { font-size: 20px; }
  .navegacion { padding-top: 10px; padding-bottom: 9px; }
  .orientacion { margin-top: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}