/* =========================================================
   CASA HOME — CODIGO POR WHATSAPP
   (recuperar_whatsapp.php y verificar.php, sobre recuperar-acceso.css)
   Seis casillas, una por digito; separadas por espacio, sin rayas.
========================================================= */

.vc-icono{
    width:52px;height:52px;margin:0 auto 12px;
    display:grid;place-items:center;
    border-radius:50%;background:#ecfdf3;color:#16a34a;font-size:24px;
}
.vc-icono.neutro{background:#f1f5f9;color:#0b1535;font-size:20px}

.rd-cabeza p strong{color:#0f172a;font-weight:600}

.vc-info{
    display:flex;align-items:flex-start;gap:9px;
    margin-bottom:16px;padding:11px 13px;
    border-radius:12px;background:#ecfdf3;
    color:#15803d;font-size:13px;line-height:1.45;
}
.vc-info i{margin-top:2px}

.vc-casillas{
    display:grid;grid-template-columns:repeat(6, 1fr);gap:8px;
    margin:4px 0 10px;
}
.vc-casilla{
    width:100%;height:58px;min-width:0;
    border:1px solid #e2e8f0;border-radius:12px;background:#fff;
    color:#0f172a;font-family:inherit;font-size:24px;font-weight:600;text-align:center;
    font-variant-numeric:tabular-nums;outline:0;
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.vc-casilla:focus{border-color:#0f172a;box-shadow:0 0 0 3px rgba(15,23,42,.08)}
.vc-casilla.lleno{background:#f8fafc}
.vc-casillas.mal .vc-casilla{border-color:#e5484d;animation:vcSacudir .32s ease}
.vc-casillas.bien .vc-casilla{border-color:#16a34a;background:#f0fdf4}
@keyframes vcSacudir{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* Separacion visual entre los tres primeros y los tres ultimos. */
.vc-casilla:nth-child(3){margin-right:6px}

.vc-reenviar{display:flex;justify-content:center;margin-top:12px}
.vc-reenviar button,
.vc-enlace{
    border:0;background:none;padding:4px 6px;
    color:#0f172a;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
}
.vc-reenviar button:disabled{color:#94a3b8;font-weight:500;cursor:default}
.vc-enlace{color:#64748b;font-weight:400}
.vc-enlace:hover{color:#0f172a}

/* Codigo de respaldo (verificar.php). */
.vc-respaldo-campo input{letter-spacing:.12em;text-transform:uppercase}
.vc-alterna{margin-top:6px;text-align:center}

@media (max-width:380px){
    .vc-casillas{gap:5px}
    .vc-casilla{height:50px;font-size:20px}
    .vc-casilla:nth-child(3){margin-right:3px}
}