.espejo-optico { max-width: 960px; margin: 0 auto; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; }
.eo-topbar, .eo-toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.eo-select label { margin-right: .5rem; font-weight: 600; }
.eo-stage-wrap { width: 100%; background: #111; border-radius: 12px; overflow: hidden; }
.eo-stage { position: relative; width: 100%; aspect-ratio: var(--eo-w) / var(--eo-h); background: #000; touch-action: none; }
#eo-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); /* espejo */ }
.eo-overlay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
/* IMG del marco controla tamaño por variable CSS */
.eo-overlay img { display: block; width: var(--eo-base-width-px, 200px); transform-origin: center center; filter: drop-shadow(0 4px 16px rgba(0,0,0,.5)); pointer-events: auto; }
.eo-note { color: #666; font-size: .9rem; margin-top: .5rem; }

.eo-controls button, #eo-btn-capture, #eo-btn-front, #eo-btn-back, #eo-btn-reset { padding: .5rem .8rem; border: 1px solid #ddd; background: #fff; border-radius: 8px; cursor: pointer; }
.eo-controls button:hover, #eo-btn-capture:hover, #eo-btn-front:hover, #eo-btn-back:hover, #eo-btn-reset:hover { background: #f5f5f5; }

.eo-switch { display: inline-flex; gap:.4rem; align-items: center; font-weight: 600; }
.eo-toolbar label { display:inline-flex; align-items:center; gap:.4rem; }

/* Bloquear slider de tamaño cuando Auto‑escala está activado */
.espejo-optico.scale-auto-on #eo-size { opacity:.4; pointer-events:none; }

/* Desactivar interacción directa cuando auto‑ajuste está activo */
.espejo-optico.auto-on .eo-overlay img { pointer-events: none; }
.espejo-optico.auto-on #eo-rotate { opacity: .4; pointer-events: none; }

/* =========================
   Guía de rostro (indicador)
   ========================= */
.eo-guide { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.eo-guide.hidden { opacity: 0; transform: scale(.98); }
.eo-guide-ring { width: min(62%, 420px); aspect-ratio: 1 / 1.25; border: 2px dashed var(--eo-guide-color, #00e0ff); border-radius: 50% / 56%; box-shadow: 0 0 0 6px rgba(0, 224, 255, .08) inset; animation: eoPulse 1.8s ease-in-out infinite; opacity: .9; }
.eo-guide-hint { margin-top: .6rem; color: #e9f9ff; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.65); font-size: .95rem; }
@keyframes eoPulse { 0%{opacity:.6} 50%{opacity:1} 100%{opacity:.6} }