@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
    --bg1:#e6f7ff; /* fondo claro celeste */
    --bg2:#d9f0ff; /* degradado celeste suave */

    --card:#f6fbff; /* tarjeta muy clara */
    --card-soft:#eaf9ff; /* tarjeta suave celeste */

    --text:#06263a; /* texto oscuro para contraste */
    --muted:#6fb7da; /* texto secundario celeste */

    --primary:#38bdf8; /* celeste principal */
    --primary-hover:#0ea5e9; /* celeste oscuro */

    --border:rgba(56,189,248,0.12);

    --radius:16px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Inter',sans-serif;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background: radial-gradient(circle at top, var(--bg2), var(--bg1));
    color:var(--text);
}

/* CONTENEDOR */
.cajafuera{
    width:100%;
    display:flex;
    justify-content:center;
    padding:20px;
}

/* CARD */
.formulariocaja{
    width:100%;
    max-width:420px;
    background:rgba(17,24,39,0.85);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:2rem;
    box-shadow:0 25px 70px rgba(0,0,0,0.6);
    backdrop-filter:blur(10px);
    height:580px;
    position:relative;
    overflow:hidden;
}

/* TABS */
.botondeintercambiar{
    display:flex;
    background:var(--card-soft);
    border:1px solid var(--border);
    border-radius:999px;
    padding:4px;
    margin-bottom:1.5rem;
    position:relative;
}

#btnvai{
    position:absolute;
    top:4px;
    left:4px;
    height:calc(100% - 8px);
    width:calc(50% - 4px);
    background:linear-gradient(135deg,var(--primary),var(--primary-hover));
    border-radius:999px;
    transition:.35s ease;
    box-shadow:0 8px 20px rgba(56,189,248,.18);
}

.botoncambiarcaja{
    flex:1;
    background:none;
    border:none;
    color:var(--muted);
    font-weight:600;
    cursor:pointer;
    z-index:1;
    padding:.7rem;
    transition:.2s;
}

.botoncambiarcaja:hover{
    color:var(--text);
}

/* LOGO */
.logovai{
    text-align:center;
    margin-bottom:18px;
}

.logovai img{
    max-height:54px;
    filter:drop-shadow(0 10px 20px rgba(6,38,58,.12));
}

/* FORMS */
.grupo-entradas{
    display:flex;
    flex-direction:column;
    position:absolute;
    width:calc(100% - 4rem);
    transition:.4s ease;
}

#frmlogin{ left:2rem; }
#frmregistrar{ left:120%; }

.grupo-entradas b{
    font-size:12px;
    margin-top:10px;
    margin-bottom:6px;
    color:var(--muted);
    letter-spacing:.04em;
}

/* INPUTS */
.cajaentradatexto,
.cajaentradarecaptcha{
    width:100%;
    padding:.8rem 1rem;
    border-radius:10px;
    border:1px solid var(--border);
    background:var(--card-soft);
    color:var(--text);
    outline:none;
    transition:.2s;
    font-size:14px;
}

.cajaentradatexto:focus,
.cajaentradarecaptcha:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(56,189,248,.12);
}

/* CAPTCHA */
.fondorecaptcha{
    height:48px;
    border-radius:10px;
    border:1px dashed var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--muted);
    cursor:pointer;
    background:rgba(11,18,32,.6);
    transition:.2s;
}

.fondorecaptcha:hover{
    border-color:var(--primary);
    color:var(--text);
}

/* BOTÓN */
.botonenviar{
    margin-top:1.3rem;
    padding:.85rem;
    border:none;
    border-radius:10px;
    background:linear-gradient(135deg,var(--primary),var(--primary-hover));
    color:white;
    font-weight:600;
    cursor:pointer;
    transition:.2s;
    box-shadow:0 10px 25px rgba(56,189,248,.18);
}

.botonenviar:hover{
    transform:translateY(-1px);
    box-shadow:0 14px 30px rgba(56,189,248,.22);
}

.botonenviar:active{
    transform:translateY(0);
}