/* =========================================================
    VARIABLES – COLORES DEL DISEÑO DE REFERENCIA
    ========================================================= */
:root {
    --primary-color: #C70039;
    --primary-hover: #A30031;

    --background-white: #ffffff;
    --background-light: #F4F6F8;

    --text-dark: #34495E;
    --text-muted: #6c757d;

    --border-color: #34495E22;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 10px 36px rgba(0, 0, 0, 0.16);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================
    FIX CRÍTICO – ROMPER EL CONTAINER DE BOOTSTRAP
    ========================================================= */
#content-container.signinpage.container {
    max-width: none !important;
    width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* =========================================================
    LAYOUT GENERAL – PANTALLA COMPLETA
    ========================================================= */
#content-container.signinpage {
    min-height: 91vh;
    display: grid;
    grid-template-columns: 50% 50%;
    background: var(--background-light);
    position: relative;
}

/* =========================================================
    PANEL IZQUIERDO – TÍTULO GRANDE Y NEGRILLA (CORREGIDO)
   ========================================================= */

#content-container.signinpage::before {
    content: "";
    background: linear-gradient(160deg, #C70039 0%, #A30031 100%);
}

#content-container.signinpage::after {
    content: 
        "Portal de Novedades de Nómina\A\A"
        "✓ Gestión integral de colaboradores\A"
        "✓ Control de vacaciones y licencias\A"
        "✓ Reportes de pagos y descuentos\A"
        "✓ Administración tributaria";
    white-space: pre;
    position: absolute;
    left: 25%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 500px;
    text-align: center;
    
    /* --- EL TRUCO DE LA NEGRILLA SELECTIVA --- */
    color: #ffffff;
    font-family: sans-serif;
    font-size: 1.1rem;      /* Tamaño base para los checks */
    font-weight: 400;      /* Peso normal para los checks */
    
    /* Aplicamos una sombra fuerte que solo resalta el inicio del texto visualmente */
    /* Nota: El soporte de negrilla real en una sola línea de 'content' es limitado, 
       pero aumentamos el tamaño general y ajustamos el interlineado. */
    line-height: 1.7;

    /* --- LOGO APP (CUADRADO REDONDEADO) --- */
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='20' fill='rgba(255,255,255,0.15)'/%3E%3C/svg%3E");
    
    background-repeat: no-repeat;
    background-position: top 22px center, top center;
    background-size: 45px 45px, 90px 90px;
    padding-top: 130px;
}

/* --- REGLA PARA RESALTAR EL TÍTULO (PORTÁTIL Y MONITOR) --- */
/* Usamos ::first-line para cambiar el tamaño y grosor SOLO de la primera línea */
#content-container.signinpage::after::first-line {
    font-weight: 800 !important;
    font-size: 1.7rem !important; /* Aquí haces el título más grande */
    text-transform: capitalize;
}

/* =========================================================
    RESPONSIVE PORTÁTIL (COMPACTO Y SIN RECORTES)
   ========================================================= */
@media (max-height: 850px), (max-width: 1366px) {
    #content-container.signinpage::after {
        top: 52% !important; /* Bajamos un poco para alejarlo del logo BDO */
        padding-top: 110px !important;
        background-size: 35px 35px, 75px 75px !important;
        background-position: top 20px center, top center !important;
    }

    #content-container.signinpage::after::first-line {
        font-size: 1.4rem !important; /* Título un poco más pequeño en portátil pero sigue siendo líder */
    }
    
    #content-container.signinpage::after {
        font-size: 0.95rem !important; /* Los checks más pequeños */
        line-height: 1.4 !important;
    }
}

/* =========================================================
    CARD LOGIN – MÁS ANCHA Y PREMIUM
    ========================================================= */
#content-container.signinpage #content {
    max-width: 620px !important;
    width: 100%;
    margin: auto;
    background: var(--background-white);
    padding: 1.5rem 2.5rem !important;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

#content-container.signinpage #content:hover {
    box-shadow: var(--shadow-lg);
}

/* =========================================================
   TITULOS – CENTRADOS
   ========================================================= */
#content-container.signinpage .login-heading-section,
#content-container.signinpage h2,
#content-container.signinpage h3 {
    text-align: center !important; /* <--- CAMBIA 'left' POR 'center' */
    font-weight: 600;
    font-size: 1.35rem;
    color: var(--text-dark);
    margin-bottom: 1rem !important; /* Bajamos de 2rem a 1rem */
    margin-top: 0.5rem !important;
    width: 100%; /* Asegura que ocupe todo el ancho para poder centrarse */
    display: block;
}

/* =========================================================
    CORRECCIÓN DE ALINEACIÓN (ANTI-BOOTSTRAP)
    ========================================================= */

/* Eliminar floats y anchos parciales que mueven textos a la derecha */
#content-container.signinpage .row,
#content-container.signinpage .form-group {
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#content-container.signinpage .col-md-10, 
#content-container.signinpage .col-md-offset-2,
#content-container.signinpage .col-md-8,
#content-container.signinpage .col-md-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    left: 0 !important;
    text-align: left !important;
}

/* Forzar que los contenedores sean siempre verticales */
#content-container.signinpage .form-group {
    display: flex !important;
    flex-direction: column !important;
}

/* =========================================================
    LABELS
    ========================================================= */
#content-container.signinpage label.col-form-label,
#content-container.signinpage label {
    font-weight: 600 !important; /* Más énfasis para claridad */
    font-size: 0.9rem;
    color: var(--text-dark);
    margin-bottom: 0.6rem !important;
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    float: none !important;
    padding: 0 !important;
}

/* Ocultar asteriscos rojos y elementos residuales de Bootstrap */
#content-container.signinpage label .text-danger,
#content-container.signinpage label span[style*="color"],
#content-container.signinpage label::before {
    display: none !important;
}

/* =========================================================
    INPUTS
    ========================================================= */
#content-container.signinpage input.form-control,
#content-container.signinpage input[type="text"],
#content-container.signinpage input[type="email"],
#content-container.signinpage input[type="password"] {
    width: 100% !important;
    height: 40px !important;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-color) !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.95rem;
    color: var(--text-dark);
    transition: var(--transition);
    box-sizing: border-box !important;
}

#content-container.signinpage input.form-control::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

#content-container.signinpage input.form-control:focus {
    outline: none;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(199, 0, 57, 0.15) !important;
}

/* =========================================================
   CHECKBOX – AJUSTE DE ALINEACIÓN FINAL
   ========================================================= */
#content-container.signinpage .form-check,
#content-container.signinpage .checkbox {
    padding-left: 0 !important;      /* ELIMINA EL DESPLAZAMIENTO IZQUIERDO */
    margin: 0.8rem 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
}

#content-container.signinpage .form-check-input,
#content-container.signinpage input[type="checkbox"] {
    position: relative !important;   /* ANULA EL POSITION ABSOLUTE DE BOOTSTRAP */
    margin: 0 12px 0 0 !important;   /* SEPARACIÓN EXACTA DEL TEXTO */
    width: 18px !important;
    height: 18px !important;
    cursor: pointer;
    flex-shrink: 0;
    top: 0 !important;               /* EVITA QUE EL CUADRO SE SUBA O BAJE */
}

#content-container.signinpage .form-check-label,
#content-container.signinpage .checkbox label {
    padding-left: 0 !important;      /* RESETEA PADDING DE BOOTSTRAP */
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    font-weight: 400 !important;
    cursor: pointer;
    line-height: 1 !important;
}

/* =========================================================
    BOTÓN PRINCIPAL
    ========================================================= */
#content-container.signinpage button.btn-primary,
#content-container.signinpage input[type="submit"].btn-primary,
#content-container.signinpage .btn-external-login {
    width: 100% !important;
    height: 42px !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600;
    font-size: 1rem;
    background-color: var(--primary-color) !important;
    border: none !important;
    color: #ffffff !important;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
    margin-top: 0.5rem;
    display: block;
}

#content-container.signinpage button.btn-primary:hover,
#content-container.signinpage input[type="submit"].btn-primary:hover {
    background-color: var(--primary-hover) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* =========================================================
    LINK OLVIDÓ CONTRASEÑA (CORREGIDO CONTRASTE)
    ========================================================= */
#content-container.signinpage a.btn-default,
#content-container.signinpage button.btn-secondary,
#content-container.signinpage a[href*="forgot"],
#content-container.signinpage a[href*="password"] {
    width: 100% !important;
    height: 48px !important;
    margin-top: 0.75rem !important;
    padding: 0.75rem !important;
    text-align: center;
    border-radius: var(--radius-sm) !important;
    color: #ffffff !important; /* Cambiado a Blanco para legibilidad sobre fondo oscuro */
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    transition: var(--transition);
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: #34495E !important;
    border: none !important;
}

#content-container.signinpage a.btn-default:hover {
    background-color: #2C3E50 !important;
}

/* =========================================================
    NAVEGACIÓN DE PESTAÑAS (TABS)
    ========================================================= */
#content-container.signinpage .nav-tabs {
    border-bottom: 2px solid #eee !important;
    margin-bottom: 20px !important;
}

#content-container.signinpage .nav-tabs > li.active > a {
    border: none !important;
    border-bottom: 3px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
    background: transparent !important;
}

/* =========================================================
    RESPONSIVE
    ========================================================= */
@media (max-width: 992px) {
    #content-container.signinpage {
        grid-template-columns: 1fr;
    }

    #content-container.signinpage::before,
    #content-container.signinpage::after {
        display: none;
    }

    #content-container.signinpage #content {
        margin: 2rem;
        max-width: none !important;
    }
}

@media (max-width: 576px) {
    #content-container.signinpage #content {
        padding: 1.75rem 1.25rem;
        border-radius: var(--radius-md);
    }
}

/* =========================================================
    ACCESIBILIDAD
    ========================================================= */
#content-container.signinpage *:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* =========================================================
    ADAPTACIÓN PARA PANTALLAS DE PORTÁTIL Y TABLETS HORIZONTALES
   ========================================================= */
@media (max-height: 850px), (max-width: 1366px) {
    
    /* 1. Reducimos el alto mínimo para que no fuerce scroll */
    #content-container.signinpage {
        min-height: 87vh;
    }

    /* 2. Card de Login: Menos padding arriba y abajo */
    #content-container.signinpage #content {
        max-width: 450px !important;    /* Un poco más estrecho también */
        padding: 0.8rem 1.8rem !important; /* Reducción agresiva de padding vertical */
        margin: auto !important;
    }

    /* 3. Títulos: Muy compactos */
    #content-container.signinpage .login-heading-section,
    #content-container.signinpage h2,
    #content-container.signinpage h3 {
        margin-bottom: 0.4rem !important;
        margin-top: 0.2rem !important;
        font-size: 1.05rem !important;
    }

    /* 4. Navegación (Tabs): Menos espacio */
    #content-container.signinpage .nav-tabs {
        margin-bottom: 10px !important;
    }
    #content-container.signinpage .nav-tabs > li > a {
        padding: 5px 10px !important; /* Pestañas más bajas */
        font-size: 0.8rem !important;
    }

    /* 5. Grupos de Formulario: El cambio más importante */
    #content-container.signinpage .form-group {
        margin-bottom: 0.4rem !important; /* Espacio mínimo entre filas */
    }

    #content-container.signinpage label {
        font-size: 0.8rem !important;
        margin-bottom: 2px !important; /* Label casi pegado al input */
    }

    /* 6. Inputs más delgados */
    #content-container.signinpage input.form-control {
        height: 32px !important; 
        padding: 4px 10px !important;
        font-size: 0.85rem !important;
    }

    /* 7. Botones: Menos altura */
    #content-container.signinpage button.btn-primary,
    #content-container.signinpage .btn-external-login {
        height: 34px !important;
        font-size: 0.85rem !important;
        margin-top: 0.2rem !important;
    }

    #content-container.signinpage a.btn-default {
        height: 36px !important;
        margin-top: 0.4rem !important;
        font-size: 0.8rem !important;
    }

    /* 8. Checkbox: Compacto */
    #content-container.signinpage .form-check, 
    #content-container.signinpage .checkbox {
        margin: 0.3rem 0 !important;
    }

    /* 9. Texto del panel izquierdo (opcional: reducir interlineado) */
    #content-container.signinpage::after {
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
        max-width: 300px !important;
    }
}