/* pareja.css — Compatibilidad de Parejas
   Dos fotos → la red de reconocimiento (face-api faceRecognitionNet)
   genera "huellas faciales" y calcula una distancia matemática REAL
   → compatibilidad %. El veredicto final (aniversario) lo envías tú.
   Tema noche/rojo-rosa. */

.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 ===================== */
.pa-screen { min-height:100svh; min-height:100vh; background:linear-gradient(180deg,#1a0a12 0%, #260c18 55%, #120509 100%); color:#ffe0e8; }
.pa-screen .exit-btn { background:rgba(48,18,30,.88); color:#ff9db4; border-color:#5e2438; }
.pa-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; }
.pa-title { font-size:17px; font-weight:800; letter-spacing:4px; margin:0; color:#ff4d6d; text-transform:uppercase; text-shadow:0 0 16px rgba(255,77,109,.45); font-family:"Segoe UI", Arial, sans-serif; }
.pa-conn { margin:0; min-height:18px; font-size:12.5px; color:#c07689; font-style:italic; }
.pa-conn.is-error { color:#f36; }

/* Dos zonas de subida */
.pa-pair { width:100%; display:flex; gap:12px; justify-content:center; }
.pa-slot { flex:1 1 0; max-width:180px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.pa-drop { width:100%; aspect-ratio:3/4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:2px dashed #5e2438; border-radius:16px; color:#ff4d6d; cursor:pointer; background:rgba(38,12,24,.45); overflow:hidden; position:relative; }
.pa-drop:active { transform:translateY(1px); }
.pa-drop .who { font-size:13px; font-weight:700; color:#ffe0e8; }
.pa-drop .hint { font-size:11px; color:#c07689; }
.pa-drop img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pa-drop canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

.pa-heart { font-size:26px; align-self:center; color:#ff4d6d; }

.pa-startbtn { margin-top:6px; font-size:14px; font-weight:800; letter-spacing:2px; padding:13px 40px; border-radius:14px; border:1.5px solid #ff4d6d; background:rgba(255,77,109,.12); color:#ff9db4; cursor:pointer; }
.pa-startbtn:disabled { opacity:.4; }
.pa-startbtn:active { transform:translateY(1px); }

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

/* Resultado */
.pa-result { width:100%; display:flex; flex-direction:column; align-items:center; gap:6px; padding-bottom:20px; }
.pa-score-tag { margin:14px 0 0; font-size:11px; font-weight:800; letter-spacing:2.5px; color:#ff9db4; }
.pa-score { margin:0; font-size:70px; font-weight:800; line-height:1; color:#ff4d6d; text-shadow:0 0 34px rgba(255,77,109,.65); font-variant-numeric:tabular-nums; }
.pa-score small { font-size:26px; color:#c07689; }
.pa-dist { font-size:11.5px; color:#a86e7e; margin-top:2px; font-variant-numeric:tabular-nums; }
.pa-verdict-tag { margin:14px 0 0; font-size:11px; font-weight:800; letter-spacing:2.5px; color:#ffcad6; }
.pa-verdict { margin:0; font-size:19px; line-height:1.5; color:#ffe0e8; min-height:22px; }
.pa-cursor { animation:paBlink 1s steps(1) infinite; color:#ff4d6d; }
@keyframes paBlink { 50% { opacity:0; } }

/* ===================== CONTROL ===================== */
.pac-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,#ff3d63,#c22348); }
.pac-send:active { transform:translateY(1px); }
.pac-note { margin:0; font-size:12px; color:var(--muted); text-align:left; width:100%; }
.pac-reset { width:100%; padding:12px; border-radius:13px; border:none; cursor:pointer; color:#e6e9f2; font-weight:800; letter-spacing:.5px; background:#3a4150; }
.pac-reset:active { transform:translateY(1px); }