/* ── Suscriptor Acceso (Login + Registro unificado) ── */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Poppins',sans-serif; background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem; }

.acceso-container { width:100%; max-width:900px; }

.acceso-header { text-align:center; margin-bottom:1.5rem;}
.plan-badge { display:inline-block; margin-top:8px; background:rgba(255,255,255,0.2); color:#fff; padding:4px 14px; border-radius:20px; font-size:12px; font-weight:600; }

.acceso-panels { display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:20px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,0.3); }

.acceso-panel { background:#fff; padding:2rem; }
.registro-panel { border-right:1px solid #eee; }

.acceso-panel h2 { font-size:1.1rem; margin-bottom:4px; display:flex; align-items:center; gap:8px; color:#333; }
.panel-desc { font-size:12px; color:#999; margin-bottom:1.2rem; }

.form-group { margin-bottom:1rem; }
.form-group label { display:block; font-size:12px; font-weight:600; color:#555; margin-bottom:4px; }
.form-group input { width:100%; padding:11px 14px; border:1.5px solid #e0e0e0; border-radius:10px; font-size:13px; outline:none; transition:border 0.2s; }
.form-group input:focus { border-color:#7380ec; }
.form-group small { font-size:11px; color:#999; margin-top:3px; display:block; }

.pin-input { text-align:center; font-size:22px; letter-spacing:10px; font-weight:700; }

.btn-primary { width:100%; padding:12px; background:#7380ec; color:#fff; border:none; border-radius:10px; font-size:14px; font-weight:600; cursor:pointer; transition:opacity 0.2s; }
.btn-primary:hover { opacity:0.9; }

.bio-divider { display:flex; align-items:center; gap:10px; margin:1.2rem 0; }
.bio-divider span { font-size:11px; color:#bbb; white-space:nowrap; }
.bio-divider::before, .bio-divider::after { content:''; flex:1; height:1px; background:#eee; }

.btn-biometric { width:100%; padding:12px; background:#f8f9ff; color:#7380ec; border:1.5px solid #7380ec; border-radius:10px; font-size:13px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:all 0.2s; }
.btn-biometric:hover { background:#7380ec; color:#fff; }

.msg { padding:10px 14px; border-radius:8px; font-size:12px; margin-bottom:1rem; }
.msg-error { background:#fff0f0; color:#c0392b; border-left:4px solid #e94560; }
.msg-success { background:#d4f8ee; color:#155724; border-left:4px solid #41f1b6; }

.acceso-footer { text-align:center; margin-top:1.5rem; }
.acceso-footer a { color:rgba(255,255,255,0.8); font-size:13px; text-decoration:none; }
.acceso-footer a:hover { color:#fff; }

@media (max-width:768px) {
    .acceso-panels { grid-template-columns:1fr; }
    .registro-panel { border-right:none; border-bottom:1px solid #eee; }
}

/* ── Dark Theme ── */
.dark-theme body { background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%); }
.dark-theme .acceso-panel { background:#1e1e2f; }
.dark-theme .registro-panel { border-right-color:#2d2d44; }
.dark-theme .acceso-panel h2 { color:#edeffd; }
.dark-theme .panel-desc { color:#7d8da1; }
.dark-theme .form-group label { color:#a3bdcc; }
.dark-theme .form-group input { background:#2a2a3e; border-color:#3d3d55; color:#edeffd; }
.dark-theme .form-group input:focus { border-color:#7380ec; }
.dark-theme .form-group small { color:#7d8da1; }
.dark-theme .btn-primary { background:#7380ec; }
.dark-theme .bio-divider span { color:#555; }
.dark-theme .bio-divider::before, .dark-theme .bio-divider::after { background:#3d3d55; }
.dark-theme .btn-biometric { background:#2a2a3e; color:#7380ec; border-color:#7380ec; }
.dark-theme .btn-biometric:hover { background:#7380ec; color:#fff; }
.dark-theme .msg-error { background:#3a1a1a; color:#ff7782; border-color:#ff7782; }
.dark-theme .msg-success { background:#1a3a2a; color:#41f1b6; border-color:#41f1b6; }
.dark-theme .plan-badge { background:rgba(115,128,236,0.3); }

.theme-toggle { position:absolute; top:1rem; right:1rem; background:none; border:none; color:rgba(255,255,255,0.8); cursor:pointer; font-size:24px; }
.theme-toggle .material-symbols-outlined { font-size:28px; }
.acceso-header { position:relative; }