/* Estilos específicos del panel de administración */

/* ── Campos OTP ── */
.otp-digit {
    width: 44px; height: 54px;
    text-align: center; font-size: 1.5rem; font-weight: 700;
    border: 2px solid #dde1e7; border-radius: 10px;
    font-family: 'Outfit', sans-serif; color: #0d699e;
    background: #f7f9fc; transition: border-color .2s, background .2s;
    outline: none;
}
.otp-digit:focus { border-color: #0d699e; background: #eef4ff; }
.otp-digit.filled { border-color: #1a9e8a; background: #edfaf5; }

/* ── Botones biométricos ── */
.bio-btn {
    width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
    padding:13px 18px;border-radius:13px;
    border:1.5px solid rgba(77,145,255,.4);
    background:rgba(77,145,255,.07);
    color:#0d699e;font-family:"Outfit",sans-serif;font-size:.95rem;font-weight:600;
    cursor:pointer;transition:background .2s,transform .15s;
}
.bio-btn:hover:not(:disabled){ background:rgba(77,145,255,.14);transform:translateY(-1px); }
.bio-btn:disabled{ opacity:.4;cursor:not-allowed; }
.bio-btn.green{ border-color:rgba(32,160,100,.4);background:rgba(32,160,100,.07);color:#1a7a50; }
.bio-btn.green:hover:not(:disabled){ background:rgba(32,160,100,.14); }

.bio-divider{display:flex;align-items:center;gap:12px;margin:10px 0;color:#8a9ba8;font-size:.8rem;font-weight:500;letter-spacing:.06em;}
.bio-divider::before,.bio-divider::after{content:"";flex:1;height:1px;background:rgba(100,140,180,.2);}

/* ── Capa del modal ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(10,25,47,.6);backdrop-filter:blur(7px);z-index:1000;align-items:center;justify-content:center;}
.modal-overlay.active{display:flex;}
.modal-box{background:#fff;border-radius:26px;padding:36px 30px 28px;max-width:420px;width:calc(100% - 40px);box-shadow:0 32px 80px rgba(10,30,60,.24);text-align:center;animation:fadeUp .35s ease;}
.modal-box h3{margin:0 0 8px;font-size:1.18rem;color:#18211e;}
.modal-box p{margin:0 0 14px;font-size:.88rem;color:#5d6964;line-height:1.55;}

/* ── Visor cámara ── */
.cam-wrap{position:relative;display:none;border-radius:16px;overflow:hidden;background:#0a0f1a;margin-bottom:14px;}
.cam-wrap.active{display:block;}
#faceVideo{width:100%;display:block;border-radius:16px;transform:scaleX(-1);}
.cam-overlay{position:absolute;inset:0;pointer-events:none;}

/* Marco ovalado animado */
.cam-oval{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:150px;height:190px;border:2.5px solid rgba(77,200,140,.75);border-radius:50% / 45%;animation:oval-pulse 1.8s ease-in-out infinite;}
@keyframes oval-pulse{0%,100%{opacity:.6;box-shadow:0 0 0 0 rgba(77,200,140,.15);}50%{opacity:1;box-shadow:0 0 0 8px rgba(77,200,140,.08);}}

/* Instrucción de movimiento de cabeza */
.move-hint{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.55);color:#fff;font-size:.78rem;font-weight:600;padding:5px 14px;border-radius:20px;white-space:nowrap;}

/* Barra progreso */
.prog-wrap{height:6px;background:rgba(77,145,255,.12);border-radius:99px;margin-bottom:12px;overflow:hidden;}
.prog-bar{height:100%;background:linear-gradient(90deg,#4d91ff,#5fc8a0);border-radius:99px;width:0%;transition:width .3s;}

/* Status */
.bio-status{font-size:.88rem;min-height:22px;margin-bottom:10px;font-weight:500;}
.bio-status.success{color:#207a57;} .bio-status.error{color:#c63f3f;} .bio-status.loading{color:#0d699e;}

/* ── Indicadores de auto-llenado XML ── */
.xml-auto-tag {
    display: inline-block;
    background: #d0eaff;
    color: #1a5a9a;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 1px 7px;
    border-radius: 20px;
    vertical-align: middle;
    margin-left: 4px;
}
.xml-auto-fill {
    border-color: #4a9fd4 !important;
    background: #f0f8ff !important;
}

.modal-actions{display:flex;flex-direction:column;gap:10px;}
.tab-row{display:flex;gap:8px;margin-bottom:18px;}
.tab-btn{flex:1;padding:9px;border-radius:10px;border:1.5px solid #e0e6ef;background:#f7f9fc;color:#5d6964;font-family:"Outfit",sans-serif;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s;}
.tab-btn.active{background:#0d699e;color:#fff;border-color:#0d699e;}

/* Insignia */
.bio-badge{display:inline-flex;align-items:center;gap:5px;font-size:.73rem;font-weight:600;color:#207a57;background:rgba(32,122,87,.1);border:1px solid rgba(32,122,87,.22);border-radius:20px;padding:3px 10px;}
.bio-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#207a57;}
.manage-link{font-size:.8rem;color:#0d699e;cursor:pointer;text-decoration:underline;text-underline-offset:3px;background:none;border:none;font-family:"Outfit",sans-serif;padding:0;}

/* ── Aviso límite ── */
.limite-aviso { text-align:right;font-size:.85rem;color:#7f8c8d;margin-bottom:10px;font-style:italic;width:100%; }

/* ── Dark mode overrides para modales ── */
html.dark-mode .modal-box {
    background: #1e293b !important;
    border-color: rgba(255,255,255,0.09) !important;
    color: #e2e8f0 !important;
}
html.dark-mode .modal-box h3 { color: #f1f5f9 !important; }
html.dark-mode .modal-box p  { color: #94a3b8 !important; }
html.dark-mode .tab-btn {
    background: #1e293b !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #94a3b8 !important;
}
html.dark-mode .tab-btn.active {
    background: #0d699e !important;
    color: #fff !important;
}