/* Demo pública del kiosco (?demo=1): cinta, ayuda y reconocimiento facial simulado. Solo se usa desde demo.js. */
.demo-cinta { position: fixed; z-index: 80; left: 12px; bottom: 12px; display: grid; gap: 4px; max-width: min(92vw, 300px); padding: 10px 14px; border-radius: 14px; background: var(--color-secondary-container); color: var(--color-primary); font: 600 13px/1.3 system-ui, sans-serif; box-shadow: 0 6px 20px rgba(0, 29, 65, .25); }
.demo-cinta a { color: var(--color-primary); text-decoration: underline; font-weight: 700; white-space: nowrap; }
.demo-pistas { position: fixed; z-index: 70; right: 12px; bottom: 12px; width: min(92vw, 340px); font: 14px/1.4 system-ui, sans-serif; }
.demo-pistas-cab { display: flex; align-items: center; gap: 8px; margin-left: auto; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--color-primary-container); color: #fff; font-weight: 700; box-shadow: 0 6px 20px rgba(0, 29, 65, .3); cursor: pointer; }
.demo-pistas-cuerpo { margin-bottom: 8px; padding: 14px 16px 12px; border-radius: 16px; background: #fff; color: var(--color-primary); box-shadow: 0 10px 30px rgba(0, 29, 65, .25); border: 1px solid var(--color-primary-fixed-dim); }
.demo-pistas-cuerpo ol { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.demo-pistas-cuerpo.hidden { display: none; }
.demo-rostro { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: rgba(0, 29, 65, .86); }
.demo-rostro.hidden { display: none; }
.demo-rostro-caja { display: grid; justify-items: center; gap: 18px; color: #fff; font: 600 20px/1.3 system-ui, sans-serif; }
.demo-rostro-marco { position: relative; width: 220px; height: 280px; border-radius: 110px / 140px; border: 4px solid var(--color-secondary-container); overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .06); }
.demo-rostro-icono { font-size: 120px; color: rgba(255, 255, 255, .75); }
.demo-rostro-linea { position: absolute; left: 0; right: 0; height: 4px; background: var(--color-tertiary-fixed); box-shadow: 0 0 14px var(--color-tertiary-fixed); animation: demo-barrido 1.4s ease-in-out infinite alternate; }
@keyframes demo-barrido { from { top: 6%; } to { top: 92%; } }
.demo-rostro-cerrar { padding: 8px 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .5); background: transparent; color: #fff; font: 600 14px system-ui, sans-serif; cursor: pointer; }