/* ===== ESTILO GLOBAL DEL SITIO (layout responsive) ===== */
/* Hace que header + main + footer ocupen el alto del monitor */
/*body {
    margin: 0;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    background-color: #f5f6f7;
    color: #333;
    display: flex;*/ /* Layout vertical */
    /*flex-direction: column;
    min-height: 100vh;*/ /* Ocupa todo el alto del monitor */
/*}*/

/* ===== HEADER / ENCABEZADO ===== */

/*header {
    width: 100%;
    background-color: #003b5c;
    color: #fff;
    padding: 10px 20px;
    box-sizing: border-box;
}*/


/* Contenedor flexible del header (logo + texto lado a lado) */

/*.header-content {
    display: flex;
    align-items: center;
    width: 100%;
}*/


/* Imagen del logo (aumentado a ~100 y adaptable) */

/*.header-logo {
    height: 70px;
    width: auto;
    margin-right: 10px;
}*/


/* Texto del header */
/*.header-text {
    display: flex;
    flex-direction: column;*/ /* Título arriba, subtítulo debajo */
/*}*/

/* Título principal del header */
/*header .title {
    font-size: clamp(1.1rem, 2.2vw, 1.5rem);
    font-weight: 600;
    line-height: 1.2;
}*/

/* Subtítulo del header */
/*header .subtitle {
    font-size: clamp(0.85rem, 1.6vw, 1rem);
    opacity: 0.9;
}*/

/* ===== CONTENIDO PRINCIPAL ===== */
/*main {
    background-color: white;*/ /* Fondo blanco tipo tarjeta */
/*margin: clamp(12px, 2vh, 24px) auto;*/ /* Margen vertical responsive */
/*padding: clamp(16px, 3vh, 32px);*/ /* Padding responsive */
/*max-width: 1200px;
    flex: 1;*/ /* 👈 CLAVE: empuja el footer al final */
/*box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    border-radius: 4px;
}*/

/*main {
    background-color: white;*/
    /* Centrado dinámico */
    /*margin: 0 auto;*/
    /* Padding reducido para que no empuje el contenido hacia abajo en laptops */
    /*padding: 10px;*/
    /* El ancho máximo ahora es flexible */
    /*width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;*/ /* Centra verticalmente lo que haya dentro */
    /*flex: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    box-sizing: border-box;
}*/

/* REGLA DE ORO: Si el monitor es pequeño, quitamos márgenes extra */
/*@media screen and (max-width: 768px) {
    main {
        margin: 5px auto;
        padding: 5px;
        box-shadow: none;*/ /* En móviles/laptops pequeñas se ve mejor limpio */
    /*}
}*/

/* ===== FOOTER / PIE DE PÁGINA ===== */

/*footer {
    width: 100%;
    background-color: #003b5c;
    color: white;
    padding: 15px 25px;
    box-sizing: border-box;
}*/


    /* Contenedor interno del footer */

/*.footer-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}*/


    /* Enlaces del footer */
    /*footer a {
        color: #cce6f2;*/ /* Celeste institucional */
        /*text-decoration: none;*/ /* Sin subrayado */
    /*}

        footer a:hover {
            text-decoration: underline;*/ /* Subrayado al pasar el mouse */
        /*}*/

/* ===== RESPONSIVE EXTRA (móviles y tablets) ===== */
/*@media (max-width: 768px) {
    footer .footer-content {
        flex-direction: column;*/ /* Apila los elementos */
        /*text-align: center;*/ /* Centra el texto */
        /*gap: 8px;*/ /* Espacio entre filas */
    /*}
}*/


/* NAV compacto */
/*.navbar {
    background: #ffffff;
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
}*/

/* asp:Menu base */
/*.mnu {
    background: transparent;
}*/

/* Nivel raíz (estático) */
/*.mnuStaticMenuStyle {
    border: 0;
}

.mnuStaticMenuItemStyle {
    padding: 6px 10px;
    margin: 4px 6px 4px 0;
    border-radius: 6px;
    color: #00457c;
}

.mnuStaticHoverStyle {
    background: #f1f6fb;
    color: #0061a8;
}

.mnuStaticSelectedStyle {
    background: #e9f2fb;
    color: #0061a8;
    font-weight: 600;
}*/

/* Submenús (dinámicos) */
/*.mnuDynamicMenuStyle {
    background: #ffffff;
    border: 1px solid #e3e7ee;
    box-shadow: 0 6px 14px rgba(0,0,0,.08);
    padding: 6px;
}

.mnuDynamicMenuItemStyle {
    padding: 6px 10px;
    border-radius: 6px;
    color: #00457c;
    white-space: nowrap;
}

.mnuDynamicHoverStyle {
    background: #f1f6fb;
    color: #0061a8;
}

.mnuDynamicSelectedStyle {
    background: #e9f2fb;
    color: #0061a8;
    font-weight: 600;
}*/

/* Accesibilidad */
/*.mnu a:focus {
    outline: 3px solid #99c9f3;
    outline-offset: 2px;
    border-radius: 6px;
}


html,
body,
form,
.site-form {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 100% !important;
    box-sizing: border-box;
}

header,
footer,
main,
.navbar,
.pnl,
.menurow,
.barra {
    width: 100% !important;
    box-sizing: border-box;
}

.header-content,
.footer-content {
    width: 100% !important;
    max-width: none !important;
}

header {
    display: block;
}

footer {
    display: block;
}*/








/* ===== FOOTER NUEVO ===== */

/*footer {
    background: #003b5c;
    color: #fff;
    padding: 28px 30px 12px;
    margin-top: auto;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
}

.footer-col {
    flex: 1;
    min-width: 220px;
}

    .footer-col h4 {
        margin: 0 0 12px;
        padding-bottom: 8px;
        font-size: 15px;
        font-weight: 600;
        border-bottom: 1px solid rgba(255,255,255,.20);
    }

    .footer-col p {
        margin: 0;
        line-height: 1.7;
        font-size: 13px;
        color: #e4eef5;
    }

    .footer-col a {
        color: #d9eff9;
        text-decoration: none;
        line-height: 1.8;
    }

        .footer-col a:hover {
            text-decoration: underline;
        }

.footer-bottom {
    width: 100%;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
    text-align: left;
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,.20);
}

.footer-left {
    text-align: left;
}

.footer-right {
    text-align: right;
}

    .footer-right a {
        color: #d9eff9;
        text-decoration: none;
    }*/


 /*Responsive*/ 

/*@media screen and (max-width: 768px) {

    .footer-content {
        flex-direction: column;
        gap: 20px;
    }

    .footer-col {
        width: 100%;
    }
}*/


/* ===== ESTILO GLOBAL DEL SITIO (Layout responsive) ===== */
html,
body,
form,
.site-form {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 100% !important;
    box-sizing: border-box;
}

body {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    background-color: #f5f6f7;
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header,
footer,
main,
.navbar,
.pnl,
.menurow,
.barra {
    width: 100% !important;
    box-sizing: border-box;
}

/* ===== HEADER / ENCABEZADO ===== */
header {
    display: block;
    width: 100%;
    background-color: #003b5c;
    color: #fff;
    padding: 10px 20px;
}

.header-content {
    display: flex;
    align-items: center;
    width: 100% !important;
    max-width: none !important;
}

.header-logo {
    height: 70px;
    width: auto;
    margin-right: 10px;
}

.header-text {
    display: flex;
    flex-direction: column;
}

header .title {
    font-size: clamp(1.1rem, 2.2vw, 1.5rem);
    font-weight: 600;
    line-height: 1.2;
}

header .subtitle {
    font-size: clamp(0.85rem, 1.6vw, 1rem);
    opacity: 0.9;
}

/* ===== BARRA DE USUARIO Y FECHA (CORREGIDO Y ALINEADO) ===== */
.barra {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 15px !important;
    background-color: #e9ecef;
    width: 100% !important;
    box-sizing: border-box !important;
}

    .barra table {
        width: 100% !important;
    }

.h2left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    justify-content: flex-start !important;
}

.h2center {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    justify-content: center !important;
}

.h2right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important; /* Empuja el usuario y el botón Salir a la derecha */
    justify-content: flex-end !important;
}

/* ===== NAVBAR Y MENÚ ASP.NET ===== */
.navbar {
    background: #ffffff;
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
}

.mnu {
    background: transparent;
}

.mnuStaticMenuStyle {
    border: 0;
}

.mnuStaticMenuItemStyle {
    padding: 6px 10px;
    margin: 4px 6px 4px 0;
    border-radius: 6px;
    color: #00457c;
}

.mnuStaticHoverStyle {
    background: #f1f6fb;
    color: #0061a8;
}

.mnuStaticSelectedStyle {
    background: #e9f2fb;
    color: #0061a8;
    font-weight: 600;
}

/* Submenús dinámicos */
.mnuDynamicMenuStyle {
    background: #ffffff;
    border: 1px solid #e3e7ee;
    box-shadow: 0 6px 14px rgba(0,0,0,.08);
    padding: 6px;
}

.mnuDynamicMenuItemStyle {
    padding: 6px 10px;
    border-radius: 6px;
    color: #00457c;
    white-space: nowrap;
}

.mnuDynamicHoverStyle {
    background: #f1f6fb;
    color: #0061a8;
}

.mnuDynamicSelectedStyle {
    background: #e9f2fb;
    color: #0061a8;
    font-weight: 600;
}

.mnu a:focus {
    outline: 3px solid #99c9f3;
    outline-offset: 2px;
    border-radius: 6px;
}

/* ===== CONTENIDO PRINCIPAL ===== */
main {
    background-color: white;
    margin: 0 auto;
    padding: 15px;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

/* ===== FIX PESTAÑAS (TAB CONTAINER AJAX) ===== */
.ajax__tab_header,
.ajax__tab_outer,
.ajax__tab_inner,
.ajax__tab_tab {
    max-width: none !important;
    box-sizing: content-box !important;
    white-space: nowrap !important;
}

.ajax__tab_header {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* ===== FIX BOTONES ===== */
main input[type="submit"],
main input[type="button"],
main .button {
    max-width: 100% !important;
    white-space: normal !important;
    height: auto !important;
    box-sizing: border-box !important;
}

.btn-login {
    height: 46px !important;
    margin-top: 15px !important;
}

/* ===== FOOTER / PIE DE PÁGINA ===== */
footer {
    display: block;
    background: #003b5c;
    color: #fff;
    padding: 28px 30px 12px;
    margin-top: auto;
}

.footer-content {
    width: 100% !important;
    max-width: none !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
}

.footer-col {
    flex: 1;
    min-width: 220px;
}

    .footer-col h4 {
        margin: 0 0 12px;
        padding-bottom: 8px;
        font-size: 15px;
        font-weight: 600;
        border-bottom: 1px solid rgba(255,255,255,.20);
    }

    .footer-col p {
        margin: 0;
        line-height: 1.7;
        font-size: 13px;
        color: #e4eef5;
    }

    .footer-col a, footer a {
        color: #d9eff9;
        text-decoration: none;
        line-height: 1.8;
    }

        .footer-col a:hover, footer a:hover {
            text-decoration: underline;
        }

.footer-bottom {
    width: 100%;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
    text-align: left;
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,.20);
}

.footer-left {
    text-align: left;
}

.footer-right {
    text-align: right;
}

/* ===== MEDIA QUERIES (MÓVILES) ===== */
@media screen and (max-width: 768px) {
    main {
        margin: 5px auto;
        padding: 8px;
        box-shadow: none;
    }

    .barra {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        height: auto;
        padding: 10px;
    }

    .h2left, .h2center, .h2right {
        width: 100%;
        justify-content: center;
        text-align: center;
        margin-left: 0 !important;
    }

    .navbar {
        overflow-x: auto;
        white-space: nowrap;
    }

    .mnuStaticMenuItemStyle {
        padding: 4px 8px;
        margin: 2px 4px 2px 0;
        font-size: 14px;
    }

    .footer-content {
        flex-direction: column;
        gap: 20px;
    }

    .footer-col {
        width: 100%;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .footer-left, .footer-right {
        text-align: center;
    }
}