:root {
    /* Paleta de colores extraída del sitio original */
    --font-heading: "Montserrat", sans-serif;
    --font-body: "Open Sans", sans-serif;
    --color-dark: #1b263b; /* Color de títulos */
    --color-blue: #0969da; /* Azul del botón (aproximado al original) */
    --color-border: #d3ced2; /* Gris suave para inputs */
}

body {
    font-family: var(--font-body);
    color: #555;
    background-color: #ffffff; /* Fondo blanco limpio */
}

/* Títulos */
h1,
h2,
h3,
.h-title {
    font-family: var(--font-heading);
    color: var(--color-dark);
    font-weight: 700;
}

/* Contenedor principal sin altura forzada */
.login-wrapper {
    padding: 60px 0;
    max-width: 500px; /* Ancho controlado para el formulario */
    margin: 0 auto;
}

/* Estilos de los Inputs para igualar la captura */
.form-label {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-dark);
}

.required-asterisk {
    color: #dc3545;
    margin-left: 2px;
}

.form-control {
    border-radius: 3px; /* Bordes menos redondeados */
    border: 1px solid var(--color-border);
    padding: 10px 15px;
    font-size: 1rem;
    background-color: #fff;
}

.form-control:focus {
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
    border-color: var(--color-blue);
}

/* Botón personalizado */
.btn-chesquis {
    background-color: var(--color-blue);
    border-color: var(--color-blue);
    color: white;
    font-weight: 600;
    padding: 12px 30px;
    border-radius: 4px;
    transition: all 0.3s;
}

.btn-chesquis:hover {
    background-color: #0b5ed7;
    transform: translateY(-2px);
}

/* Enlaces */
a {
    color: var(--color-blue);
}

/* Ajuste del Logo para que se vea integrado */
.brand-header {
    text-align: center;
    margin-bottom: 3rem;
}
.brand-header img {
    width: 120px; /* Un poco más grande para presencia de marca */
    height: auto;
}


/*
 */
 /* =========================================
   FIX VISUAL: Botón Toggle Password vs Validación
   ========================================= */

/* 1. Cuando el input es INVÁLIDO (Rojo) */
/* El selector '+' busca el botón inmediatamente después del input */
.form-control.is-invalid + .btn,
.form-control.is-invalid + .input-group-text {
    border-color: #dc3545 !important; /* Rojo Bootstrap (danger) */
    color: #dc3545 !important;
}

/* Estado Focus/Hover cuando es inválido */
.form-control.is-invalid + .btn:hover,
.form-control.is-invalid + .btn:focus {
    background-color: #dc3545 !important;
    color: white !important;
}


/* 2. Cuando el input es VÁLIDO (Verde) */
.form-control.is-valid + .btn,
.form-control.is-valid + .input-group-text {
    border-color: #198754 !important; /* Verde Bootstrap (success) */
    color: #198754 !important;
}

/* Estado Focus/Hover cuando es válido */
.form-control.is-valid + .btn:hover,
.form-control.is-valid + .btn:focus {
    background-color: #198754 !important;
    color: white !important;
}

/* 3. Corrección de bordes superpuestos (Z-Index) */
/* Esto evita que el borde de uno tape al otro incorrectamente */
.input-group > .form-control:focus {
    z-index: 3;
}
.input-group > .btn:focus {
    z-index: 3;
}