/* =========================================
   PALETA CORPORATIVA - VERDE IPG
   ========================================= */
:root {
    --color-primario: #077f4a; /* Verde corporativo principal */
    --color-primario-oscuro: #008b4c;
    --color-secundario: #17a673;
    --color-claro: #e6f4ec;
    --color-texto: #1f2937;
    --color-fondo: #f6f7fb;
    --shadow-soft: 0 10px 30px rgba(0,0,0,.06);
    --radius: .6rem;
}


body {
    background-image: url("http://10.172.30.16/Recursos_Web/Fondo/cana4.png");
    background-size: cover; /* Se ajusta a toda la pantalla */
    background-repeat: no-repeat; /* No se repite */
    background-position: center; /* Centrada */
    background-attachment: fixed; /* Efecto tipo 'hero' pegado */
    padding-top: 90px; /* ajusta según altura real del header */
}


    /* Capa de oscurecimiento + blur */
    body::before {
        content: "";
        position: fixed; /* debe ser fixed para que cubra la pantalla */
        inset: 0; /* top:0, right:0, bottom:0, left:0 */
        background: rgba(255, 255, 255, 0.45); /* opacidad (ajusta 0.1–0.7) */
        backdrop-filter: blur(7px); /* el difuminado real */
        -webkit-backdrop-filter: blur(8px); /* soporte Safari */
        z-index: -1; /* detrás del contenido */
    }

/* Footer */
footer {
    margin-top: auto; /* por si el main no tiene flex-fill */
    background: #fff;
    border-top: 1px solid #d9e2d9;
    padding: 15px 0;
}

    footer .text-muted {
        color: #5f6f5f;
    }


/* =========================================
   LAYOUT: HEADER CORPORATIVO
   ========================================= */

/* Header gris con sombra y separación visual */
.corporate-header {
    background-color: #f2f2f2;
    padding: 10px 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2000; /* subimos para evitar conflictos */
    border-bottom: 1px solid #e2e2e2;
}

    /* Forzar una sola línea en el header: [logo] | [enlaces/usuario/salir] */
    .corporate-header .container {
        display: flex; /* ¡Flex garantizado incluso sin Bootstrap! */
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: nowrap; /* evita que el bloque derecho salte abajo */
        min-width: 0;
    }

        /* Bloque derecho (usuario, enlaces, salir) */
.header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: nowrap;
}

/* El item con dropdown será el ancla para posicionar el submenú */
.corporate-header .nav-item.dropdown {
    position: relative;
}

/* Menú flotante (absolute) para no empujar el header */
.corporate-header .dropdown-menu {
    position: absolute; /* clave: flotante */
    top: 100%; /* bajo el enlace */
    left: 0;
    display: none; /* oculto por defecto en desktop */
    min-width: 16rem;
    border-radius: .5rem;
    border: 1px solid #e5e7eb;
}

/* Hover/focus en desktop: mostrar */
@media (min-width: 992px) {
    .corporate-header .nav-item.dropdown:hover > .dropdown-menu,
    .corporate-header .nav-item.dropdown:focus-within > .dropdown-menu {
        display: block;
        margin-top: .25rem;
    }
}

/* Estilo de items del submenú */
.corporate-header .dropdown-item {
    padding: .5rem .75rem;
    border-radius: .375rem;
}

    .corporate-header .dropdown-item:hover,
    .corporate-header .dropdown-item:focus {
        background: rgba(21,172,49,.10);
        color: var(--color-primario);
    }

/* Opcional: ocultar el caret del toggle si no lo quieres */
.corporate-header .dropdown-toggle::after {
    display: none;
}

/* Logo: tamaño controlado y sin desbordes */
.empresa-logo {
    max-height: 55px;
    width: auto;
    object-fit: contain;
    display: block;
    flex: 0 0 auto;
}

.logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none; /* sin subrayado */
    cursor: pointer; /* mano al pasar */
}



/* Enlaces dentro del header (texto negro, hover verde corporativo) */
.header-nav {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: 0 1 auto; /* puede encogerse si no cabe */
    min-width: 0;
}

    .header-nav .header-link {
        color: #000; /* negro legible sobre gris */
        text-decoration: none;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: .5rem;
    }

        .header-nav .header-link:hover,
        .header-nav .header-link:focus {
            background: rgba(21, 172, 49, 0.10); /* #15ac31 con transparencia */
            color: var(--color-primario); /* #15ac31 */
        }

/* Usuario (texto a la derecha del header) */
.usuario-nombre {
    font-weight: 600;
    color: #000; /* negro legible */
    display: inline-flex;
    align-items: center;
    gap: 6px;
}


/* =========================================
   COMPONENTES
   ========================================= */

/* Tarjetas reutilizables */
.bg-card {
    background: #fff;
    padding: 1.4rem;
    border-radius: .75rem;
    box-shadow: var(--shadow-soft);
    margin-bottom: 1.5rem;
}

/* Botón Salir tipo “nav button” (ligero) SIN !important */
.corporate-header .btn.btn-salir {
    background: transparent;
    color: #000;
    padding: 6px 10px;
    border-radius: .5rem;
    font-weight: 600;
    border: 1px solid transparent; /* sutil */
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .corporate-header .btn.btn-salir:hover,
    .corporate-header .btn.btn-salir:focus {
        background: rgba(198,40,40,.10);
        color: #b71c1c;
        border-color: transparent;
    }


/* Tablas */
    .table thead {
    background: var(--color-claro);
    color: var(--color-primario-oscuro);
    font-weight: 700;
}

.table-hover tbody tr:hover {
    background: #eef8f1;
}


/* =========================================
   RESPONSIVE
   ========================================= */

/* Header: ajustes en móvil */
@media (max-width: 575.98px) {
    .empresa-logo {
        max-height: 44px;
    }

    .corporate-header .container {
        gap: .75rem;
    }
}

/* Oculta los enlaces del header en tablets/phones si no caben */
@media (max-width: 767.98px) {
    .header-nav {
        display: none ;
    }
}