/*
 * Estos estilos están diseñados para centrar un formulario de login y sus controles
 * utilizando Flexbox para el contenedor principal y un diseño estructurado para los elementos internos.
 * Se asume que este CSS se colocará en '~/Styles/Site.css' y que los bloques <style>
 * directamente en el HTML serán eliminados para evitar conflictos de especificidad.
 */

/* DISEÑO GENERAL DEL BODY */
body {
    /* Fondo original o el que desees */
    background: #171616 url('../images/Background.gif');
    font-size: 13px;
    font-family: Arial, sans-serif; /* Agrega sans-serif como fallback */
    margin: 0;
    padding: 0;
    color: #696969;
    /* ******** CLAVE PARA CENTRAR EL loginWrapper VERTICAL Y HORIZONTALMENTE EN LA PÁGINA ******** */
    display: flex; /* Habilita Flexbox en el body */
    justify-content: center; /* Centra horizontalmente el contenido del body */
    align-items: center; /* Centra verticalmente el contenido del body */
    min-height: 100vh; /* Asegura que el body ocupe el 100% del alto de la ventana (viewport height) */
    box-sizing: border-box; /* Incluye padding y border en el tamaño total del elemento */
}
.red-title {
    color: #FF0000; /* Rojo vibrante */
    text-align: center; /* Centrado horizontal */
    display: block; /* Asegura que ocupe su propia línea */
    margin-top: 20px; /* Espacio superior para separarlo del formulario */
    font-size: 0.7em; /* Un poco más grande para destacarse */
    font-weight: bold; /* Negrita */
}
/* ESTILOS GENERALES (MANTENIDOS DE TU CÓDIGO ORIGINAL) */
a:hover {
    text-decoration: none;
}

p {
    margin-bottom: 10px;
    line-height: 1.6em;
}

/* HEADINGS - Asegúrate de que estas reglas no afecten a los elementos que quieres centrar */
h1, h2, h3, h4, h5, h6 {
    font-size: 1.5em;
    font-variant: small-caps;
    text-transform: none;
    font-weight: 200;
    margin-bottom: 0px;
}

h1 {
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

h2 {
    font-size: 1.5em;
    font-weight: 600;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2 {
    margin-top: 0px;
}

/* CONTENEDOR PRINCIPAL DEL FORMULARIO */
.loginWrapper {
    /* El 'body' ya está centrando este elemento usando flexbox. */
    /* Este contenedor define el ancho máximo de la tarjeta de login. */
    width: 100%; /* Ocupa todo el ancho disponible del body */
    max-width: 400px; /* Limita el ancho del formulario a 400px como en tu diseño */
    margin: 0 auto; /* Permite que se centre si el body no tiene display:flex (fallback) */
    padding: 20px; /* Un poco de padding para que no se pegue a los bordes en pantallas pequeñas */
    box-sizing: border-box; /* Incluye padding en el ancho total */
}

/* CUERPO DEL FORMULARIO (LA TARJETA BLANCA) */
.loginBody {
    background-color: White;
    height: auto; /* La altura se ajusta al contenido */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 0 15px rgba(0,0,0,0.1); /* Sombra suave */
    overflow: hidden; /* Asegura que los bordes redondeados del header sean respetados */
}

/* ENCABEZADO DEL FORMULARIO (SECCIÓN ROJA CON LOGO Y TÍTULO) */
.loginHeader {
    /* Degradado de fondo */
    background: linear-gradient(to bottom, #e20a17, #a51d1d);
    height: 75px; /* Altura fija del encabezado */
    color: white; /* Color del texto */
    font-weight: bold;
    display: flex; /* Habilita Flexbox para alinear el logo y el texto */
    align-items: center; /* Centra verticalmente el logo y el texto */
    padding-left: 20px; /* Espacio a la izquierda del logo y texto */
    border-top-left-radius: 10px; /* Mantiene el redondeo superior izquierdo */
    border-top-right-radius: 10px; /* Mantiene el redondeo superior derecho */
}

/* ESTILO DEL LOGO DENTRO DEL ENCABEZADO */
.logo { /* Clase 'logo' aplicada al <a> que contiene la imagen de fondo */
    float: none; /* Elimina flotación heredada si la hubiera */
    display: block; /* Asegura que sea un bloque para que width/height funcionen */
    margin: 0; /* Elimina márgenes extra */
    position: static; /* Elimina posicionamiento relativo si existiera */
    width: 70px; /* Ancho del logo */
    height: 70px; /* Alto del logo */
    /* Fondo para la imagen del logo DaltonWeb.png */
    background: #FFFFFF url('../images/DaltonWeb.png') no-repeat center center;
    background-size: contain; /* Ajusta la imagen dentro del contenedor sin recortar */
    flex-shrink: 0; /* Evita que el logo se encoja en pantallas pequeñas */
    margin-right: 15px; /* Espacio entre el logo y el texto del encabezado */
}

/* ESTILO DEL TÍTULO EN EL ENCABEZADO */
.loginHeader span {
    font-size: 1.5em; /* Tamaño del título */
    margin: 0; /* Elimina márgenes extra */
    padding: 0; /* Elimina paddings extra */
    line-height: normal; /* Asegura el espaciado correcto de la línea */
}

/* CONTENEDOR DE TODOS LOS CONTROLES DEL FORMULARIO (INPUTS, BOTONES, ENLACES) */
.form-controls-container {
    padding: 20px 40px; /* Padding interno para separar los controles de los bordes de la tarjeta */
    text-align: center; /* Centra horizontalmente los elementos hijos que sean 'inline-block' o 'inline' */
}

/* GRUPOS DE FORMULARIO (LABEL + INPUT) */
.form-group {
    margin-bottom: 15px; /* Espacio entre cada grupo de input (Usuario, Contraseña) */
    text-align: left; /* Alinea el texto de las etiquetas y los inputs a la izquierda dentro del grupo */
}

    .form-group label {
        display: block; /* La etiqueta ocupa su propia línea */
        margin-bottom: 5px; /* Espacio entre la etiqueta y el campo de entrada */
        color: #696969;
        font-weight: bold; /* Hace la etiqueta negrita para mejorar la legibilidad */
    }

    /* ESTILO DE LOS INPUTS DE TEXTO Y CONTRASEÑA, Y OTROS CONTROLES '.form-control' */
    .form-group input[type="text"],
    .form-group input[type="password"],
    .form-group .form-control { /* Aplica a todos los elementos con la clase 'form-control' */
        width: 100%; /* El input ocupa todo el ancho disponible de su contenedor padre */
        padding: 10px 15px; /* Espacio interno para el texto dentro del input */
        border: 1px solid #ccc; /* Borde suave */
        border-radius: 5px; /* Bordes redondeados */
        box-sizing: border-box; /* MUY IMPORTANTE: Asegura que el padding y el borde se incluyan en el ancho total,
                                de lo contrario el input se desbordaría del 100% de ancho */
        font-family: Arial, sans-serif;
        font-size: 1em; /* Tamaño de fuente normal */
    }

/* ESTILO DEL BOTÓN DE INGRESAR */
.btn-dalton { /* Esta es la clase asignada a tu <asp:Button ID="btnLogin"> */
    background-color: #C8102E; /* Rojo Dalton */
    color: white;
    font-weight: bold;
    border: none; /* Elimina cualquier borde predeterminado */
    border-radius: 30px; /* Bordes muy redondeados, como en tu imagen */
    padding: 12px 30px; /* Ajusta el padding para un tamaño visual adecuado */
    cursor: pointer; /* Muestra el cursor de mano al pasar por encima */
    width: 100%; /* El botón ocupa el 100% del ancho del contenedor */
    margin-top: 25px; /* Espacio superior al botón */
    margin-bottom: 15px; /* Espacio inferior al botón */
    font-size: 1.1em; /* Tamaño de fuente del botón */
    transition: background-color 0.3s ease; /* Transición suave para el efecto hover */
    display: block; /* Asegura que el botón se comporte como un bloque y respete el 100% de ancho */
}

    .btn-dalton:hover {
        background-color: #a30e24; /* Tono de rojo más oscuro al pasar el ratón */
        color: white; /* Asegura que el texto permanezca blanco */
    }

/* ESTILOS PARA EL CONTENEDOR DEL CAPTCHA */
.captcha-container {
    margin-top: 15px;
    /* Puedes controlar la visibilidad del captcha con JavaScript o el atributo 'Visible' de ASP.NET */
}

/* ESTILO DE LOS MENSAJES DE ERROR */
.error-message {
    color: red;
    margin-bottom: 15px;
    text-align: center; /* Centra el texto del mensaje de error */
    display: block; /* Asegura que ocupe su propia línea */
    font-size: 0.9em;
}

/* ESTILOS PARA LOS ENLACES DE ACCIÓN (Registro, ¿Olvidaste tu contraseña?) */
.links-container {
    text-align: center; /* Centra los enlaces dentro de este contenedor */
    margin-top: 15px; /* Espacio superior para separar de otros elementos */
}

    .links-container .link-registro,
    .links-container .link-olvidaste {
        color: #007bff; /* Color azul estándar para enlaces */
        text-decoration: none; /* Sin subrayado por defecto */
        font-size: 0.9em; /* Tamaño de fuente de los enlaces */
        display: block; /* Cada enlace ocupa su propia línea */
        margin-bottom: 8px; /* Espacio entre los enlaces */
    }

        .links-container .link-registro:hover,
        .links-container .link-olvidaste:hover {
            text-decoration: underline; /* Subrayado al pasar el ratón */
        }