/* detector.css — El Detector Emocional (análisis biométrico falso sobre foto) */

/* 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 ===================== */
.dt-screen { min-height:100svh; min-height:100vh; background:linear-gradient(180deg,#0a1420 0%, #0c1a2a 55%, #081018 100%); color:#cfe4de; }
.dt-screen .exit-btn { background:rgba(16,32,44,.88); color:#8fb5a8; border-color:#23483e; }
.dt-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; }
.dt-title { font-size:17px; font-weight:800; letter-spacing:4px; margin:0; color:#31e0a3; text-transform:uppercase; text-shadow:0 0 16px rgba(49,224,163,.45); font-family:"Segoe UI", Arial, sans-serif; }
.dt-conn { margin:0; min-height:18px; font-size:12.5px; color:#5f8a7c; font-style:italic; }
.dt-conn.is-error { color:#d66; }

/* FASE 1: subir foto */
.dt-upload { width:100%; flex:1; display:flex; align-items:center; justify-content:center; }
.dt-drop { width:100%; max-width:340px; display:flex; flex-direction:column; align-items:center; gap:12px; padding:44px 22px; border:2px dashed #23483e; border-radius:18px; color:#31e0a3; cursor:pointer; background:rgba(10,26,22,.4); }
.dt-drop:active { transform:translateY(1px); }
.dt-drop .big { font-size:16px; font-weight:700; color:#cfe4de; }
.dt-drop .dim { font-size:12px; color:#5f8a7c; line-height:1.5; }

/* FASE 2: laboratorio */
.dt-lab { width:100%; display:flex; flex-direction:column; align-items:center; gap:14px; }
.dt-photobox { position:relative; width:min(320px, 84vw); border-radius:14px; overflow:hidden; border:1.5px solid #23483e; box-shadow:0 14px 40px rgba(0,0,0,.5), 0 0 24px rgba(49,224,163,.12); }
.dt-photo { width:100%; display:block; }
.dt-overlay { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

.dt-startbtn { font-size:14px; font-weight:800; letter-spacing:2px; padding:13px 38px; border-radius:14px; border:1.5px solid #31e0a3; background:rgba(49,224,163,.1); color:#31e0a3; cursor:pointer; }
.dt-startbtn:active { transform:translateY(1px); }

/* Tarjetas de métricas */
.dt-readouts { width:100%; display:flex; flex-direction:column; gap:9px; }
.dt-card { width:100%; text-align:left; padding:11px 14px; border-radius:12px; background:rgba(12,30,26,.75); border:1px solid #1c3a32; opacity:0; transform:translateY(10px); transition:opacity .5s, transform .5s; }
.dt-card.in { opacity:1; transform:none; }
.dt-cardtitle { font-size:10.5px; font-weight:800; letter-spacing:2.5px; color:#31e0a3; }
.dt-cardbody { display:flex; flex-direction:column; gap:8px; margin-top:8px; }

.dt-bar { display:grid; grid-template-columns:1fr auto; gap:3px 10px; align-items:center; }
.dt-bar .lbl { font-size:12.5px; color:#9fc4b8; }
.dt-bar .pct { font-size:12.5px; font-weight:700; color:#cfe4de; font-variant-numeric:tabular-nums; }
.dt-bar .track { grid-column:1 / -1; height:5px; border-radius:3px; background:#122a24; overflow:hidden; }
.dt-bar .fill { height:100%; width:0; border-radius:3px; background:linear-gradient(90deg,#1c8a68,#31e0a3); transition:width 1.4s cubic-bezier(.2,.8,.3,1); }
.dt-bar.hot .fill { background:linear-gradient(90deg,#c2554d,#ff8a3d); }

.dt-ecg { width:100%; height:56px; display:block; }
.dt-bpm { font-size:15px; font-weight:800; color:#31e0a3; font-variant-numeric:tabular-nums; }
.dt-temp { font-size:14px; font-weight:700; color:#ffb56b; font-variant-numeric:tabular-nums; }

/* Veredicto */
.dt-verdict { width:100%; display:flex; flex-direction:column; gap:8px; padding-bottom:20px; }
.dt-verdict-tag { margin:10px 0 0; font-size:11px; font-weight:800; letter-spacing:2.5px; color:#ffb56b; }
.dt-verdict-line { margin:0; font-size:17px; color:#cfe4de; }
.dt-cursor { animation:dtBlink 1s steps(1) infinite; color:#31e0a3; }
@keyframes dtBlink { 50% { opacity:0; } }
.dt-name { margin:4px 0 0; font-size:38px; font-weight:800; letter-spacing:4px; color:#31e0a3; text-shadow:0 0 26px rgba(49,224,163,.6); }

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