/* alma.css — La Edad del Alma
   Estima la edad REAL de la foto (face-api ageGenderNet) y luego revela
   la "edad del alma" que envías tú desde el control. Lo verdadero vende
   lo falso. Tema violeta/índigo. */

/* Barra de salida (igual que el resto de efectos) */
.exit-bar { position:fixed; top:10px; right:10px; display:flex; gap:8px; z-index:60; }
.exit-btn { font-size:12px; font-weight:600; padding:6px 11px; border-radius:9px; border:1px solid var(--line); background:rgba(255,255,255,.92); color:var(--muted); cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.08); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.exit-btn:active { transform:translateY(1px); }
.exit-btn.danger { color:var(--danger); border-color:#f3c9d2; }
#logout-btn { display:none; }

/* ===================== JUEGO ===================== */
.al-screen { min-height:100svh; min-height:100vh; background:linear-gradient(180deg,#0e0a1e 0%, #150e2c 55%, #0a0716 100%); color:#e7dcff; }
.al-screen .exit-btn { background:rgba(28,20,52,.88); color:#b7a6e6; border-color:#3a2c66; }
.al-inner { width:100%; max-width:520px; margin:0 auto; min-height:100svh; min-height:100vh; padding:20px 14px 40px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.al-title { font-size:17px; font-weight:800; letter-spacing:4px; margin:0; color:#b18cff; text-transform:uppercase; text-shadow:0 0 16px rgba(177,140,255,.5); font-family:"Segoe UI", Arial, sans-serif; }
.al-conn { margin:0; min-height:18px; font-size:12.5px; color:#8878b8; font-style:italic; }
.al-conn.is-error { color:#e08; }

/* FASE 1: subir foto */
.al-upload { width:100%; flex:1; display:flex; align-items:center; justify-content:center; }
.al-drop { width:100%; max-width:340px; display:flex; flex-direction:column; align-items:center; gap:12px; padding:44px 22px; border:2px dashed #3a2c66; border-radius:18px; color:#b18cff; cursor:pointer; background:rgba(22,14,44,.45); }
.al-drop:active { transform:translateY(1px); }
.al-drop .big { font-size:16px; font-weight:700; color:#e7dcff; }
.al-drop .dim { font-size:12px; color:#8878b8; line-height:1.5; }

/* FASE 2: laboratorio */
.al-lab { width:100%; display:flex; flex-direction:column; align-items:center; gap:14px; }
.al-photobox { position:relative; width:min(300px, 82vw); border-radius:14px; overflow:hidden; border:1.5px solid #3a2c66; box-shadow:0 14px 40px rgba(0,0,0,.55), 0 0 24px rgba(177,140,255,.15); }
.al-photo { width:100%; display:block; }
.al-overlay { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

.al-startbtn { font-size:14px; font-weight:800; letter-spacing:2px; padding:13px 38px; border-radius:14px; border:1.5px solid #b18cff; background:rgba(177,140,255,.12); color:#d7c6ff; cursor:pointer; }
.al-startbtn:active { transform:translateY(1px); }

/* Tarjeta de edad biológica (REAL) */
.al-bio { width:100%; padding:16px 14px; border-radius:14px; background:rgba(24,16,48,.8); border:1px solid #2c2050; opacity:0; transform:translateY(10px); transition:opacity .5s, transform .5s; }
.al-bio.in { opacity:1; transform:none; }
.al-bio-tag { font-size:10.5px; font-weight:800; letter-spacing:2.5px; color:#8878b8; }
.al-bio-num { font-size:52px; font-weight:800; line-height:1; margin-top:6px; color:#e7dcff; font-variant-numeric:tabular-nums; }
.al-bio-sub { font-size:12px; color:#8878b8; margin-top:6px; }
.al-bio-conf { font-size:11px; color:#7c6bb0; margin-top:2px; }

/* Barras de proceso */
.al-steps { width:100%; display:flex; flex-direction:column; gap:9px; }
.al-bar { display:grid; grid-template-columns:1fr auto; gap:3px 10px; align-items:center; text-align:left; }
.al-bar .lbl { font-size:12px; color:#b7a6e6; }
.al-bar .pct { font-size:12px; font-weight:700; color:#e7dcff; font-variant-numeric:tabular-nums; }
.al-bar .track { grid-column:1 / -1; height:5px; border-radius:3px; background:#221845; overflow:hidden; }
.al-bar .fill { height:100%; width:0; border-radius:3px; background:linear-gradient(90deg,#5a3fb0,#b18cff); transition:width 1.4s cubic-bezier(.2,.8,.3,1); }

/* Revelación del alma */
.al-soul { width:100%; display:flex; flex-direction:column; align-items:center; gap:6px; padding-bottom:20px; }
.al-soul-tag { margin:14px 0 0; font-size:11px; font-weight:800; letter-spacing:2.5px; color:#c9a6ff; }
.al-soul-label { margin:0; font-size:15px; color:#b7a6e6; }
.al-soul-num { margin:2px 0 0; font-size:74px; font-weight:800; letter-spacing:2px; line-height:1; color:#b18cff; text-shadow:0 0 34px rgba(177,140,255,.7); font-variant-numeric:tabular-nums; }
.al-soul-unit { font-size:22px; color:#8878b8; letter-spacing:2px; }
.al-soul-era { margin:8px 0 0; font-size:15px; color:#e7dcff; min-height:20px; }
.al-cursor { animation:alBlink 1s steps(1) infinite; color:#b18cff; }
@keyframes alBlink { 50% { opacity:0; } }

/* ===================== CONTROL ===================== */
.alc-row { width:100%; display:flex; gap:8px; }
.alc-send { width:100%; padding:14px; border-radius:13px; border:none; cursor:pointer; color:#fff; font-weight:800; font-size:15px; letter-spacing:1px; background:linear-gradient(135deg,#7c5cff,#5a3fb0); }
.alc-send:active { transform:translateY(1px); }
.alc-note { margin:0; font-size:12px; color:var(--muted); text-align:left; width:100%; }
.alc-reset { width:100%; padding:12px; border-radius:13px; border:none; cursor:pointer; color:#e6e9f2; font-weight:800; letter-spacing:.5px; background:#3a4150; }
.alc-reset:active { transform:translateY(1px); }
.alc-chips { width:100%; display:flex; flex-wrap:wrap; gap:7px; }
.alc-chip { flex:1 1 auto; padding:9px 4px; border-radius:10px; border:1px solid var(--line); background:#f4f1ff; color:#5a3fb0; font-weight:700; font-size:14px; cursor:pointer; }
.alc-chip:active { transform:translateY(1px); }