/* ==========================================================================
   Laboratorio Multimodal — tema ROJO para las páginas de autenticación
   (se carga después de zentic.css; el color predominante es el del sitio)
   ========================================================================== */

:root {
    --zc-primary: #df0a0a;
    --zc-primary-dark: #b00909;
    --zc-primary-light: #e8433f;
    --zc-primary-xlight: #fdeaea;
    --zc-primary-xxlight: rgba(223, 10, 10, .08);
    --zc-primary-middle: #ec6a67;
    --zc-shadow-ai: 0 4px 20px rgba(223, 10, 10, .22);
}

/* --------------------------------------------------------------------------
   Panel de marca (izquierda) — fondo rojo
   -------------------------------------------------------------------------- */

.auth-left {
    background:
        radial-gradient(circle, rgba(255, 255, 255, .08) 1px, transparent 1px),
        linear-gradient(150deg, #7a0606 0%, #c00909 45%, #df0a0a 100%);
    background-size: 22px 22px, 100% 100%;
}

.auth-left-orb-1,
.auth-left-orb-2,
.auth-left-orb-3 {
    background: rgba(255, 255, 255, .12);
}

/* Logo del colegio sobre una tarjeta blanca para que resalte en el rojo */
.auth-left-logo {
    background: #fff;
    padding: 12px 18px;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}

.auth-left-logo img {
    height: 40px;
    width: auto;
    display: block;
}

.auth-tagline span {
    background: none;
    -webkit-text-fill-color: #ffe0e0;
    color: #ffe0e0;
}

.auth-feature-icon {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Formulario (derecha) — acentos en rojo
   -------------------------------------------------------------------------- */

.btn-ai:hover {
    box-shadow: 0 6px 20px rgba(223, 10, 10, .42);
}

.auth-page .form-check-input:checked {
    background-color: #df0a0a;
    border-color: #df0a0a;
}

.auth-page .form-check-input:focus {
    border-color: #e8433f;
    box-shadow: 0 0 0 .2rem rgba(223, 10, 10, .18);
}

.auth-page a,
.auth-page .text-primary-c {
    color: #df0a0a;
}

.auth-page .required {
    color: #df0a0a;
}

/* --------------------------------------------------------------------------
   Logo de Fe y Alegría sobre el formulario (arriba de "Iniciar sesión")
   -------------------------------------------------------------------------- */

.lm-auth-logo {
    display: block;
    margin-bottom: 26px;
}

.lm-auth-logo img {
    height: 52px;
    width: auto;
}

/* El panel izquierdo ahora solo lleva el nombre del laboratorio, centrado */
.auth-left .auth-tagline {
    margin: 0;
    text-align: center;
}

/* ==========================================================================
   Panel de administración (layout admin) — tema rojo del sitio
   ========================================================================== */

:root {
    --zc-sidebar-hover: rgba(223, 10, 10, .06);
    --zc-sidebar-active-bg: rgba(223, 10, 10, .12);
    --zc-sidebar-active-border: #df0a0a;
}

/* Logo (rectangular) en la marca del sidebar/topbar, sin el círculo de Zentic */
.sidebar-brand .brand-icon,
.topbar-left .brand-icon {
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
}

.sidebar-brand .brand-icon img,
.topbar-left .brand-icon img {
    height: 34px;
    width: auto;
    border-radius: 0;
}

.topbar-page-title {
    margin: 0 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: var(--zc-text-primary);
}

@media (max-width: 575px) {
    .topbar-page-title {
        display: none;
    }
}

/* Avatar con iniciales (no hay fotos de perfil) */
.lm-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #df0a0a 0%, #b00909 100%);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    flex-shrink: 0;
}