/* Variables de Marca Blanca */
:root {
    --azul-principal: #2563eb;
    --azul-oscuro: #1e40af;
    --celeste-claro: #eff6ff;
    --texto-gris: #64748b;
    --blanco: #ffffff;
    --fuente: 'Poppins', sans-serif;
}

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

body {
    font-family: var(--fuente);
    background-color: var(--blanco);
    overflow-x: hidden;
}

/* Contenedor Flex para el Layout 2 Columnas */
.main-container {
    display: flex;
    min-height: 100vh;
}

/* --- COLUMNA IZQUIERDA --- */
.banner-side {
    background-color: var(--azul-principal);
    width: 60%;
    color: var(--blanco);
    padding: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tag-proceso {
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    opacity: 0.8;
}

.banner-side h1 {
    font-size: 5rem;
    font-weight: 900;
    line-height: 0.9;
    margin-bottom: 1.5rem;
}

.text-ia {
    color: #ffd700; /* Dorado para resaltar la IA */
}

.descripcion {
    font-size: 1.2rem;
    max-width: 450px;
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

.card-preview {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 2.5rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    max-width: 550px;
}

.img-placeholder img {
    width: 100%;
    border-radius: 1.5rem;
}

.branding-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.logo-carip { width: 45px; border-radius: 8px; }

/* --- COLUMNA DERECHA --- */
.login-side {
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.login-box {
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.mascot-img {
    width: 200px;
    margin-bottom: 1.5rem;
}

.login-side h2 {
    font-size: 2.5rem;
    font-weight: 900;
    color: #1e293b;
}

.sub-texto {
    color: var(--texto-gris);
    margin-bottom: 2.5rem;
}

/* Botones de Acceso */
.nav-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.btn-acceso {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.2rem;
    border-radius: 1.8rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-circle {
    background: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

.soy-estudiante {
    background-color: var(--azul-principal);
    color: var(--blanco);
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.2);
}

.soy-estudiante:hover { transform: translateY(-5px); background-color: var(--azul-oscuro); }

.soy-admin {
    background-color: var(--blanco);
    color: var(--azul-oscuro);
    border: 2px solid #e2e8f0;
}

.soy-admin:hover { background-color: var(--celeste-claro); }

.text-btn { text-align: left; }
.label { display: block; font-weight: 900; font-size: 1.1rem; }
.sub-label { font-size: 0.8rem; opacity: 0.8; }

.footer-copy {
    margin-top: 3rem;
    font-size: 0.7rem;
    color: #94a3b8;
    text-transform: uppercase;
}

/* --- RESPONSIVE NATIVO --- */

/* Tablets (iPad/Android) */
@media (max-width: 1024px) {
    .main-container { flex-direction: column; }
    .banner-side, .login-side { width: 100%; text-align: center; }
    .banner-side { padding: 3rem 2rem; }
    .banner-side h1 { font-size: 3.5rem; }
    .descripcion { margin: 0 auto 2rem auto; }
    .card-preview { margin: 0 auto; }
}

/* Celulares */
@media (max-width: 640px) {
    .banner-side h1 { font-size: 2.8rem; }
    .mascot-img { width: 160px; }
    .login-side h2 { font-size: 2rem; }
    .btn-acceso { padding: 1rem; }
}