/* Login v2 (estudiante, docente/admin, familias): 3 columnas en pantallas anchas. */
/*
 * LOGIN DEL ESTUDIANTE · v2 (rediseño visual en 3 columnas)
 * ─────────────────────────────────────────────────────────────────
 * Pantallas anchas:  [ mascota y saludo ] [ código + PIN ] [ ¿quién sos? ]
 * Pantallas angostas: una sola columna, compacta (sin imagen enorme).
 * Mismo formulario, mismos ids, misma lógica y mismas rutas que la
 * versión anterior (POST /acceso, guard 'estudiante', PIN de 4 números).
 */
.lg2 {
    --azul:#1B3361; --teal:#0E6B7D; --verde:#177040; --verde-o:#0F5130; --sol:#FFC94D; --gris-t:#44546F;
    --f-titulo:'Baloo 2','Nunito','Trebuchet MS',system-ui,sans-serif;
    --f-texto:'Nunito','Trebuchet MS',system-ui,sans-serif;
    font-family: var(--f-texto); color: var(--azul);
}
body.lg2 {
    margin: 0; min-height: 100vh; min-height: 100dvh;
    display: grid; place-items: center; padding: 16px; overflow-x: hidden;
    background: linear-gradient(180deg, #8FD3FF 0%, #CDEEFF 55%, #FFF3C4 100%);
    font-size: 1rem;
}
.lg2 *, .lg2 *::before, .lg2 *::after { box-sizing: border-box; }

/* Decoración (solo adorno) */
.lg2-deco { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.lg2-deco span { position: absolute; font-size: 2.4rem; animation: lg2-flota 6s ease-in-out infinite; }
.lg2-deco .d1 { top: 4%; left: 4%; font-size: 3.4rem; } .lg2-deco .d2 { top: 8%; right: 5%; animation-delay: 1s; }
.lg2-deco .d3 { top: 46%; left: 1.5%; animation-delay: 2s; } .lg2-deco .d4 { top: 52%; right: 2%; animation-delay: 3s; }
.lg2-deco .d5 { bottom: 5%; left: 6%; animation-delay: 1.5s; } .lg2-deco .d6 { bottom: 4%; right: 6%; font-size: 3rem; animation-delay: .5s; }
@keyframes lg2-flota { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }

/* Tablero principal */
.lg2-tablero {
    position: relative; z-index: 1; width: min(1040px, 100%);
    display: grid; grid-template-columns: 1fr; gap: 0;
    background: #fff; border: 5px solid var(--azul); border-radius: 32px;
    box-shadow: 0 10px 0 var(--azul), 0 22px 40px rgba(27,51,97,.25); overflow: hidden;
}
@media (min-width: 900px) {
    .lg2-tablero { grid-template-columns: minmax(0, 1fr) minmax(340px, 1.05fr) minmax(0, .9fr); }
}

/* ── Columna izquierda: mascota ───────────────────────────────── */
.lg2-bienvenida {
    display: flex; align-items: center; gap: 12px; padding: 14px 18px;
    background: linear-gradient(135deg, #FFE08A, var(--sol)); border-bottom: 5px dashed var(--azul);
}
.lg2-mascota { flex: none; width: 84px; height: 96px; display: flex; align-items: flex-end; justify-content: center; }
.lg2-mascota img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: bottom center; transform-origin: 50% 100%; animation: lg2-respira 3s ease-in-out infinite; }
.lg2-mascota img.salta { animation: lg2-salta .7s cubic-bezier(.3,1.6,.5,1); }
.lg2-mascota img.uy { animation: lg2-uy .5s ease; }
@keyframes lg2-respira { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }
@keyframes lg2-salta { 0% { transform: translateY(0) } 40% { transform: translateY(-16px) rotate(-3deg) } 100% { transform: translateY(0) } }
@keyframes lg2-uy { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-6px) } 75% { transform: translateX(6px) } }
.lg2-saludo h1 { margin: 0; font: 800 clamp(1.7rem, 5vw, 2.3rem)/1 var(--f-titulo); }
.lg2-saludo p { margin: 4px 0 0; font-weight: 700; font-size: 1.02rem; line-height: 1.25; }
.lg2-saludo .gn { color: var(--teal); }
.lg2-burbuja {
    position: relative; margin-top: 10px; padding: 8px 12px; background: #fff; border: 3px solid var(--azul);
    border-radius: 16px; box-shadow: 0 4px 0 var(--azul); font-weight: 800; font-size: 1.02rem; line-height: 1.2; display: none;
}
.lg2-burbuja::before {
    content: ""; position: absolute; left: 50%; top: -11px; width: 16px; height: 16px; background: #fff;
    border-left: 3px solid var(--azul); border-top: 3px solid var(--azul); transform: translateX(-50%) rotate(45deg);
}
@media (min-width: 900px) {
    .lg2-izq { display: flex; flex-direction: column; background: linear-gradient(180deg, #FFE9A8 0%, #FFD86B 100%); border-right: 5px dashed var(--azul); }
    .lg2-bienvenida { flex-direction: column; text-align: center; border: 0; background: none; padding: 22px 18px 6px; gap: 6px; flex: 1; justify-content: center; }
    .lg2-mascota { width: min(100%, 230px); height: clamp(190px, 38vh, 330px); }
    .lg2-burbuja { display: block; }
}

/* ── Columna central: código + PIN ─────────────────────────────── */
.lg2-centro { padding: 18px 20px 18px; }
.lg2-centro label.titulo { font: 800 1.15rem var(--f-titulo); display: block; margin-bottom: 4px; }
.lg2-codigo {
    width: 100%; font: 800 1.5rem var(--f-texto); letter-spacing: 4px; text-transform: uppercase; color: var(--azul);
    background: #FFFDF2; border: 3px solid var(--azul); border-radius: 18px; padding: 10px 14px;
}
.lg2-codigo::placeholder { color: #5A6785; letter-spacing: 2px; }
.lg2-codigo:focus { outline: 0; border-color: var(--verde); background: #fff; box-shadow: 0 0 0 5px rgba(23,112,64,.25); }
.lg2-ayuda { margin: 4px 0 0; color: var(--gris-t); font-size: .95rem; font-weight: 600; }
.lg2-pin { display: flex; gap: 10px; justify-content: center; margin: 4px 0 12px; }
.lg2-pin .d {
    width: 58px; height: 62px; font-size: 1.8rem; line-height: 1; display: grid; place-items: center; color: var(--gris-t);
    border: 3px solid var(--azul); border-radius: 18px; background: #FFF8E1; transition: all .15s;
}
.lg2-pin .d.lleno { background: #D5F5DC; border-color: var(--verde); transform: scale(1.06); }
.lg2-teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 270px; margin: 0 auto; }
.btn-num {
    height: 58px; font: 800 1.6rem var(--f-titulo); color: var(--azul); border-radius: 18px; border: 3px solid var(--c, #3B8FD6);
    background: var(--bg, #D5ECFF); box-shadow: 0 5px 0 var(--c, #3B8FD6); cursor: pointer; transition: transform .08s, box-shadow .08s;
    -webkit-tap-highlight-color: transparent;
}
.btn-num:active, .btn-num.activo { transform: translateY(4px); box-shadow: 0 1px 0 var(--c); }
.btn-num:focus-visible { outline: 4px solid var(--azul); outline-offset: 3px; }
.lg2-teclado .btn-num:nth-child(5n+1) { --c:#D9534F; --bg:#FFE0E0; }
.lg2-teclado .btn-num:nth-child(5n+2) { --c:#B38600; --bg:#FFF1C2; }
.lg2-teclado .btn-num:nth-child(5n+3) { --c:#2E9B5A; --bg:#D6F5DD; }
.lg2-teclado .btn-num:nth-child(5n+4) { --c:#3B8FD6; --bg:#D5ECFF; }
.lg2-teclado .btn-num:nth-child(5n+5) { --c:#8E6BD1; --bg:#E8DEFF; }
.lg2-teclado .btn-borrar { --c:#44546F; --bg:#EEF1F6; font-size: 1.4rem; }
.btn-jugar {
    width: 100%; margin-top: 16px; background: var(--verde); color: #fff; font: 800 1.45rem var(--f-titulo); padding: 8px 14px;
    border-radius: 22px; border: 4px solid var(--verde-o); box-shadow: 0 7px 0 var(--verde-o); transition: transform .1s, box-shadow .1s;
}
.btn-jugar:hover:not(:disabled) { filter: brightness(1.08); }
.btn-jugar:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 2px 0 var(--verde-o); }
.btn-jugar:focus-visible { outline: 4px solid var(--azul); outline-offset: 3px; }
.btn-jugar:disabled { background: #E3E9F4; color: #44546F; border: 4px dashed #8896B3; box-shadow: none; cursor: not-allowed; }
.lg2-error { margin-bottom: 12px; padding: 8px 12px; text-align: center; background: #FFF2CC; border: 3px solid #8A5A00; color: #5C3B00; border-radius: 18px; font-weight: 800; }
.lg2-aviso { min-height: 1.3em; margin: 8px 0 0; text-align: center; font-weight: 800; font-size: .98rem; color: #8A5A00; }

/* ── Columna derecha: ¿quién sos? ──────────────────────────────── */
.lg2-roles { padding: 14px 18px 18px; background: #EAF4FF; border-top: 5px dashed var(--azul); }
@media (min-width: 900px) { .lg2-roles { border-top: 0; border-left: 5px dashed var(--azul); display: flex; flex-direction: column; justify-content: center; padding: 22px 20px; } }
.lg2-roles h2 { margin: 0 0 8px; font: 800 1.25rem var(--f-titulo); text-align: center; }
.lg2-roles ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
@media (min-width: 900px) { .lg2-roles ul { grid-template-columns: 1fr; gap: 12px; } }
.lg2-rol {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; text-decoration: none;
    min-height: 78px; padding: 8px 6px; background: #fff; color: var(--azul); border: 3px solid var(--azul); border-radius: 20px;
    box-shadow: 0 5px 0 var(--azul); font: 800 .95rem/1.15 var(--f-texto); transition: transform .1s, box-shadow .1s;
}
.lg2-rol .ico { font-size: 1.9rem; line-height: 1; }
.lg2-rol small { font-weight: 700; font-size: .82rem; color: var(--gris-t); }
a.lg2-rol:hover { color: var(--azul); background: #FFF8E1; }
a.lg2-rol:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--azul); }
a.lg2-rol:focus-visible { outline: 4px solid var(--sol); outline-offset: 3px; }
.lg2-rol.actual { background: #D5F5DC; border-color: var(--verde); box-shadow: 0 5px 0 var(--verde); }
.lg2-rol.actual small { color: var(--verde-o); }
@media (min-width: 900px) { .lg2-rol { flex-direction: row; justify-content: flex-start; gap: 12px; text-align: left; min-height: 74px; padding: 8px 14px; font-size: 1.05rem; } }
@media (max-width: 420px) { .lg2-rol small { display: none; } .lg2-rol { min-height: 70px; font-size: .88rem; } }
.lg2-pie { margin: 12px 0 0; text-align: center; }
.lg2-pie a { display: inline-block; padding: 6px 12px; border-radius: 12px; color: var(--azul); font-weight: 700; text-decoration: underline; }
.lg2-pie a:hover { background: #fff; }

/* Pantallas bajas (laptops, celular horizontal): se compacta todo */
@media (max-height: 720px) and (min-width: 900px) {
    .lg2-tablero { border-radius: 26px; }
    .lg2-mascota { height: clamp(150px, 30vh, 240px); }
    .btn-num { height: 50px; font-size: 1.4rem; } .lg2-pin .d { width: 52px; height: 54px; }
    .lg2-centro { padding-block: 12px; } .btn-jugar { margin-top: 12px; }
}
@media (max-width: 899px) and (orientation: landscape) and (max-height: 520px) { body.lg2 { place-items: start center; } }
@media (prefers-reduced-motion: reduce) { .lg2-deco span, .lg2-mascota img { animation: none !important; } }

/* ── Formularios de adultos (docentes / familias) ─────────────────────── */
.lg2-adulto .lg2-saludo h1 { font-size: clamp(1.5rem, 4.4vw, 2rem); }
.lg2-adulto .lg2-saludo small { display: block; margin-top: 6px; font-weight: 700; font-size: .9rem; line-height: 1.25; }
@media (min-width: 900px) { .lg2-adulto .lg2-bienvenida { padding-inline: 22px; } }
.lg2-campo { margin-bottom: 14px; }
.lg2-campo label { display: block; margin-bottom: 4px; font: 800 1.1rem var(--f-titulo); }
.lg2-input {
    width: 100%; font: 700 1.2rem var(--f-texto); color: var(--azul); background: #FFFDF2;
    border: 3px solid var(--azul); border-radius: 16px; padding: 10px 14px;
}
.lg2-input:focus { outline: 0; border-color: var(--verde); background: #fff; box-shadow: 0 0 0 5px rgba(23,112,64,.25); }
.lg2-input.codigo { font-family: var(--f-texto); letter-spacing: 3px; text-transform: uppercase; }
.lg2-input.is-invalid { border-color: #B3261E; }
.lg2-pass { display: flex; gap: 8px; }
.lg2-pass .lg2-input { flex: 1; min-width: 0; }
.lg2-ojo { flex: none; width: 54px; border: 3px solid var(--azul); border-radius: 16px; background: #fff; color: var(--azul); font-size: 1.3rem; cursor: pointer; box-shadow: 0 4px 0 var(--azul); }
.lg2-ojo:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--azul); }
.lg2-check { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-weight: 700; }
.lg2-check input { width: 22px; height: 22px; accent-color: var(--azul); }
.btn-ingresar {
    width: 100%; background: var(--azul); color: #fff; font: 800 1.35rem var(--f-titulo); padding: 8px 14px; border-radius: 20px;
    border: 4px solid #10224A; box-shadow: 0 6px 0 #10224A; transition: transform .1s, box-shadow .1s;
}
.btn-ingresar:hover { filter: brightness(1.15); }
.btn-ingresar:active { transform: translateY(4px); box-shadow: 0 2px 0 #10224A; }
.btn-ingresar:focus-visible { outline: 4px solid var(--sol); outline-offset: 3px; }
.lg2-exito { margin-bottom: 12px; padding: 8px 12px; background: #D5F5DC; border: 3px solid var(--verde); color: var(--verde-o); border-radius: 18px; font-weight: 800; }
.lg2-nota { margin: 12px 0 0; padding: 10px 14px; background: #FFF6D6; border: 3px solid var(--azul); border-radius: 18px; font-weight: 600; font-size: 1rem; line-height: 1.35; }
.lg2-chico { margin: 12px 0 0; text-align: center; color: var(--gris-t); font-weight: 600; font-size: .98rem; line-height: 1.35; }