/*
 * Grandes Empleados — estilos propios sobre Bootstrap 5.3.
 *
 * IDENTIDAD VISUAL: limpia y elegante, con ligeros tonos verdes.
 * Mucho blanco, verdes suaves en fondos y detalles, un solo verde intenso para las acciones.
 * Para ajustar la paleta basta con editar las variables --ge-* de abajo; el resto del archivo solo
 * las aplica a los componentes de Bootstrap. Los PDF, correos y páginas de error repiten estos valores.
 *
 * Contraste (WCAG AA, texto normal ≥ 4.5:1):
 *   blanco sobre --ge-verde             6.4:1  (botones)
 *   --ge-verde sobre --ge-fondo         6.1:1  (enlaces)
 *   --ge-texto sobre --ge-fondo        13.9:1
 *   --ge-texto-suave sobre blanco       5.3:1
 */

@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../vendor/fuentes/jakarta-400.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../vendor/fuentes/jakarta-500.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../vendor/fuentes/jakarta-600.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../vendor/fuentes/jakarta-700.woff2') format('woff2'); }

:root {
    --ge-verde: #2d6a4f;           /* principal: botones, marca, enlaces */
    --ge-verde-rgb: 45, 106, 79;
    --ge-verde-hover: #245a42;
    --ge-verde-oscuro: #1b4332;    /* títulos destacados, indicadores */
    --ge-verde-medio: #52b788;     /* detalles decorativos (nunca texto sobre blanco) */
    --ge-verde-suave: #d8f3dc;     /* insignias, iconos */
    --ge-verde-claro: #eef7f1;     /* fondos suaves, elemento activo */
    --ge-fondo: #f6faf7;           /* fondo de página */
    --ge-borde: #dfe9e3;
    --ge-texto: #1f2d27;
    --ge-texto-suave: #5f6f67;
    --ge-sombra: 0 1px 2px rgba(27, 67, 50, .05), 0 4px 16px rgba(27, 67, 50, .06);

    --ge-sidebar-ancho: 260px;
    --ge-radio: .75rem;

    /* Compatibilidad con estilos anteriores */
    --ge-primario: var(--ge-verde);
    --ge-primario-oscuro: var(--ge-verde-oscuro);

    /* Variables de Bootstrap */
    --bs-font-sans-serif: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bs-primary: var(--ge-verde);
    --bs-primary-rgb: var(--ge-verde-rgb);
    --bs-primary-text-emphasis: var(--ge-verde-oscuro);
    --bs-primary-bg-subtle: var(--ge-verde-claro);
    --bs-primary-border-subtle: var(--ge-borde);
    --bs-success: var(--ge-verde);
    --bs-success-rgb: var(--ge-verde-rgb);
    --bs-success-text-emphasis: var(--ge-verde-oscuro);
    --bs-success-bg-subtle: var(--ge-verde-claro);
    --bs-success-border-subtle: #b7e4c7;
    --bs-link-color: var(--ge-verde);
    --bs-link-color-rgb: var(--ge-verde-rgb);
    --bs-link-hover-color: var(--ge-verde-oscuro);
    --bs-link-hover-color-rgb: 27, 67, 50;
    --bs-body-bg: #fff;
    --bs-body-color: var(--ge-texto);
    --bs-emphasis-color: var(--ge-texto);
    --bs-secondary-color: var(--ge-texto-suave);
    --bs-heading-color: var(--ge-texto);
    --bs-code-color: var(--ge-verde-oscuro);
    --bs-border-color: var(--ge-borde);
    --bs-border-radius: .5rem;
    --bs-border-radius-lg: var(--ge-radio);
    --bs-focus-ring-color: rgba(var(--ge-verde-rgb), .25);
}

body {
    background-color: var(--ge-fondo);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    letter-spacing: -.01em;
}

.text-muted,
.text-body-secondary {
    color: var(--ge-texto-suave) !important;
}

/* ---- Botones ---------------------------------------------------------- */

.btn {
    font-weight: 500;
    border-radius: .5rem;
}

.btn-primary,
.btn-success,
.btn-acento {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ge-verde);
    --bs-btn-border-color: var(--ge-verde);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ge-verde-hover);
    --bs-btn-hover-border-color: var(--ge-verde-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ge-verde-oscuro);
    --bs-btn-active-border-color: var(--ge-verde-oscuro);
    --bs-btn-disabled-bg: var(--ge-verde);
    --bs-btn-disabled-border-color: var(--ge-verde);
    --bs-btn-focus-shadow-rgb: var(--ge-verde-rgb);
}

.btn-outline-primary,
.btn-outline-success {
    --bs-btn-color: var(--ge-verde);
    --bs-btn-border-color: #b7d4c3;
    --bs-btn-hover-color: var(--ge-verde-oscuro);
    --bs-btn-hover-bg: var(--ge-verde-claro);
    --bs-btn-hover-border-color: var(--ge-verde);
    --bs-btn-active-color: var(--ge-verde-oscuro);
    --bs-btn-active-bg: var(--ge-verde-suave);
    --bs-btn-active-border-color: var(--ge-verde);
    --bs-btn-focus-shadow-rgb: var(--ge-verde-rgb);
}

/* ---- Tarjetas, tablas y formularios ------------------------------------ */

.card {
    --bs-card-border-color: var(--ge-borde);
    --bs-card-border-radius: var(--ge-radio);
    --bs-card-cap-bg: #fff;
}

.card.shadow-sm {
    box-shadow: var(--ge-sombra) !important;
}

.card-header.bg-white {
    border-bottom-color: var(--ge-borde);
}

.table {
    --bs-table-border-color: var(--ge-borde);
}

.table > thead th {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ge-texto-suave);
}

.table-light {
    --bs-table-bg: var(--ge-verde-claro);
    --bs-table-border-color: var(--ge-borde);
}

.form-label {
    font-weight: 500;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--ge-verde-medio);
    box-shadow: 0 0 0 .25rem rgba(var(--ge-verde-rgb), .15);
}

.form-check-input:checked {
    background-color: var(--ge-verde);
    border-color: var(--ge-verde);
}

.badge.text-bg-success {
    background-color: var(--ge-verde-suave) !important;
    color: var(--ge-verde-oscuro) !important;
}

/* ---- Navegación, paginación y otros ----------------------------------- */

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--ge-verde);
    --bs-nav-link-color: var(--ge-verde);
    --bs-nav-link-hover-color: var(--ge-verde-oscuro);
}

.pagination {
    --bs-pagination-color: var(--ge-verde);
    --bs-pagination-hover-color: var(--ge-verde-oscuro);
    --bs-pagination-hover-bg: var(--ge-verde-claro);
    --bs-pagination-active-bg: var(--ge-verde);
    --bs-pagination-active-border-color: var(--ge-verde);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--ge-verde-rgb), .2);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--ge-verde);
    --bs-dropdown-link-hover-bg: var(--ge-verde-claro);
    --bs-dropdown-border-color: var(--ge-borde);
    box-shadow: var(--ge-sombra);
}

.progress {
    --bs-progress-bg: var(--ge-verde-claro);
    --bs-progress-bar-bg: var(--ge-verde);
}

.alert-success {
    --bs-alert-bg: var(--ge-verde-claro);
    --bs-alert-border-color: #b7e4c7;
    --bs-alert-color: var(--ge-verde-oscuro);
}

/* ---- Marca ------------------------------------------------------------ */

.ge-marca {
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--ge-verde-oscuro);
    text-decoration: none;
}

.ge-marca::before {
    content: '';
    display: inline-block;
    width: .7rem;
    height: .7rem;
    margin-right: .5rem;
    border-radius: 50% 50% 50% 0; /* hoja */
    background: linear-gradient(135deg, var(--ge-verde-medio), var(--ge-verde));
    vertical-align: .05em;
}

.ge-marca:hover {
    color: var(--ge-verde);
}

/* ---- Barra lateral (clara) -------------------------------------------- */

.ge-sidebar {
    width: var(--ge-sidebar-ancho);
    flex-shrink: 0; /* no se encoge cuando el contenido es ancho */
    min-height: 100vh;
    background-color: #fff;
    border-right: 1px solid var(--ge-borde);
}

.ge-sidebar .ge-empresa {
    color: var(--ge-texto-suave);
    font-size: .8rem;
}

.ge-sidebar .nav-link {
    color: var(--ge-texto);
    font-size: .925rem;
    border-radius: .5rem;
    padding: .5rem .75rem;
}

.ge-sidebar .nav-link .bi {
    color: var(--ge-texto-suave);
}

.ge-sidebar .nav-link:hover {
    color: var(--ge-verde-oscuro);
    background-color: var(--ge-fondo);
}

.ge-sidebar .nav-link.active {
    color: var(--ge-verde-oscuro);
    font-weight: 600;
    background-color: var(--ge-verde-claro);
    box-shadow: inset 3px 0 0 var(--ge-verde);
}

.ge-sidebar .nav-link.active .bi {
    color: var(--ge-verde);
}

.ge-sidebar .nav-seccion {
    color: var(--ge-texto-suave);
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding-left: .75rem;
}

.ge-encabezado {
    background: rgba(255, 255, 255, .9);
    border-bottom: 1px solid var(--ge-borde);
}

/* ---- Tarjetas de indicadores ------------------------------------------ */

.ge-tarjeta-indicador .valor {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ge-verde-oscuro);
}

.ge-tarjeta-indicador .bi {
    color: var(--ge-verde);
    background: var(--ge-verde-claro);
    border-radius: .6rem;
    padding: .35rem .5rem;
}

/* Gráfica de barras del dashboard */
.ge-barra {
    background: var(--ge-verde-suave);
    border-radius: .25rem .25rem 0 0;
}

.ge-barra.hoy {
    background: var(--ge-verde);
}

/* ---- Portada ---------------------------------------------------------- */

.ge-hero {
    background:
        radial-gradient(circle at 85% 15%, rgba(82, 183, 136, .18), transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(216, 243, 220, .9), transparent 50%),
        #fff;
    border: 1px solid var(--ge-borde);
    border-radius: 1.25rem;
    color: var(--ge-texto);
}

.ge-hero .lead {
    color: var(--ge-verde-oscuro);
    font-weight: 500;
}

.ge-hero .ge-lema {
    color: var(--ge-texto-suave);
}

.ge-icono-seccion {
    color: var(--ge-verde);
}

@media (max-width: 991.98px) {
    .ge-sidebar {
        width: 100%;
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--ge-borde);
    }
}

/* Preguntas frecuentes */
.accordion {
    --bs-accordion-border-color: var(--ge-borde);
    --bs-accordion-active-bg: var(--ge-verde-claro);
    --bs-accordion-active-color: var(--ge-verde-oscuro);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--ge-verde-rgb), .15);
    --bs-accordion-border-radius: var(--ge-radio);
    --bs-accordion-inner-border-radius: calc(var(--ge-radio) - 1px);
}

/* ---- Barra y pie de las páginas públicas ------------------------------- */

.ge-nav {
    background: rgba(248, 252, 249, .78);
    border-bottom: 1px solid rgba(27, 67, 50, .07);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    min-height: 74px;
}

.ge-nav .ge-marca {
    display: inline-flex;
    align-items: center;
}

.ge-nav .ge-marca::before {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 45% 60% 60% 18%;
    background: linear-gradient(145deg, #57bb89, #348f68);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 18px rgba(52, 143, 104, .22);
}

.ge-nav-toggler {
    border: 1px solid var(--ge-borde);
    border-radius: .75rem;
    color: var(--ge-verde-oscuro);
    font-size: 1.5rem;
    line-height: 1;
    padding: .3rem .55rem;
}

.ge-nav-toggler:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--ge-verde-rgb), .15);
}

.ge-nav-publica .nav-link {
    position: relative;
    color: #526d64;
    font-size: .9rem;
    font-weight: 500;
    padding-left: .9rem !important;
    padding-right: .9rem !important;
    transition: color .25s ease;
}

.ge-nav-publica .nav-link:hover,
.ge-nav-publica .nav-link:focus-visible {
    color: var(--ge-verde);
}

@media (min-width: 1200px) {
    .ge-nav-publica .nav-link {
        white-space: nowrap;
        padding-left: .7rem !important;
        padding-right: .7rem !important;
    }

    .ge-nav-acciones {
        flex-wrap: nowrap !important;
    }

    .ge-nav-publica .nav-link::after {
        content: '';
        position: absolute;
        left: .7rem;
        right: .7rem;
        bottom: .2rem;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--ge-verde), var(--ge-verde-medio));
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .25s ease;
    }

    .ge-nav-publica .nav-link:hover::after {
        transform: scaleX(1);
    }
}

@media (max-width: 1199.98px) {
    .ge-nav .navbar-collapse {
        margin-top: .75rem;
        padding: .75rem;
        border-radius: 1rem;
        background: rgba(255, 255, 255, .9);
        border: 1px solid var(--ge-borde);
        box-shadow: var(--ge-sombra);
    }

    .ge-nav-publica .nav-link {
        border-radius: .5rem;
    }

    .ge-nav-publica .nav-link:hover {
        background: var(--ge-verde-claro);
    }

    .ge-nav-acciones {
        padding: .75rem .5rem .25rem;
        border-top: 1px solid var(--ge-borde);
        margin-top: .5rem;
    }
}

/* Botón principal con destello al pasar el cursor */
.ge-btn-brillo {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(135deg, #1b6b4a, #2e8d65);
    border: 0;
    box-shadow: 0 10px 24px rgba(22, 102, 71, .18);
    transition: transform .25s ease, box-shadow .25s ease;
}

.ge-btn-brillo::before {
    content: '';
    position: absolute;
    top: -45%;
    left: -70%;
    width: 42%;
    height: 190%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .32), transparent);
    transition: left .65s ease;
}

.ge-btn-brillo:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(22, 102, 71, .26);
}

.ge-btn-brillo:hover::before {
    left: 130%;
}

.ge-pie {
    background: rgba(255, 255, 255, .7);
    border-top: 1px solid var(--ge-borde);
    padding: 2rem 0;
}

.ge-pie-enlaces {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.25rem;
}

.ge-pie-enlaces a {
    color: var(--ge-texto-suave);
    text-decoration: none;
}

.ge-pie-enlaces a:hover {
    color: var(--ge-verde);
    text-decoration: underline;
}

.ge-alertas-flotantes:has(.alert) {
    padding-top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    .ge-btn-brillo,
    .ge-btn-brillo::before {
        transition: none;
    }
}

html {
    scroll-behavior: smooth;
}

/* Botón para mostrar la contraseña (lo agrega public/js/app.js) */
.ge-ver-clave {
    position: relative;
}

.ge-ver-clave > input {
    padding-right: 2.75rem;
}

.ge-ver-clave-boton {
    position: absolute;
    top: 50%;
    right: .35rem;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--ge-texto-suave);
    padding: .25rem .5rem;
    border-radius: .375rem;
    line-height: 1;
}

.ge-ver-clave-boton:hover,
.ge-ver-clave-boton:focus-visible {
    color: var(--ge-verde);
    background: var(--ge-verde-claro);
}

/* El mensaje de error sigue visible aunque el campo quede dentro de la envoltura. */
.ge-ver-clave:has(.is-invalid) ~ .invalid-feedback {
    display: block;
}

/* Con el error, Bootstrap pone su ícono a la derecha: se recorre para no encimarse con el ojo. */
.ge-ver-clave > input.is-invalid {
    background-position: right 2.6rem center;
    padding-right: 4.5rem;
}