/*
 * Identidad visual del Gimnasio Los Almendros (GLA Brand Center, marca.gimnasiolosalmendros.edu.co)
 * aplicada sobre Bootstrap 5.3. Colores, degradados y tipografías oficiales; no agregar colores
 * ajenos a la paleta salvo los de estado (falla/advertencia), que son funcionales.
 */

@font-face {
    font-family: "Figtree";
    src: url("fonts/figtree-variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
}
@font-face {
    font-family: "Lumios Marker";
    src: url("fonts/lumios-marker.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

:root {
    /* Paleta oficial */
    --gla-verde: #167D49;        /* Verde Almendro · color director */
    --gla-verde-oscuro: #07502F;
    --gla-brote: #81CC00;        /* Verde Brote · acento */
    --gla-campus: #35B774;       /* Verde Campus · contorno y apoyo */
    --gla-blanco: #F8FAF6;       /* Blanco Almendro · fondo */
    --gla-tinta: #102019;        /* texto base */
    --gla-lima: #DBE64C;         /* Lima Almendro · acento */
    --gla-azul: #1E498F;         /* Azul Horizonte · soporte */
    --gla-profundo: #011F3F;     /* Azul Profundo · contraste */

    /* Tintes suaves derivados para superficies */
    --gla-verde-10: #E6F2EB;
    --gla-verde-20: #CFE7D9;
    --gla-azul-10: #E8EEF7;
    --gla-linea: #DDE5DE;
    --gla-texto-suave: #52615A;

    /* Degradados oficiales */
    --gla-bosque-vivo: linear-gradient(135deg, #167D49 0%, #239B62 48%, #35B774 72%, #81CC00 115%);
    --gla-horizonte: linear-gradient(128deg, #011F3F 0%, #1E498F 34%, #167D49 72%, #35B774 100%);
    --gla-verde-azul: linear-gradient(132deg, #1E498F 0%, #116776 48%, #167D49 100%);
    --gla-velo-claro: linear-gradient(145deg, #F8FAF6 0%, #E7EEE8 100%);

    /* Estados (funcionales) */
    --gla-falla: #C62828;
    --gla-falla-bg: #FDECEA;
    --gla-adv: #8A6100;
    --gla-adv-bg: #FFF4D6;

    /* Bootstrap */
    --bs-font-sans-serif: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-color: var(--gla-tinta);
    --bs-body-color-rgb: 16, 32, 25;
    --bs-body-bg: var(--gla-blanco);
    --bs-emphasis-color: var(--gla-tinta);
    --bs-secondary-color: var(--gla-texto-suave);
    --bs-primary: var(--gla-verde);
    --bs-primary-rgb: 22, 125, 73;
    --bs-primary-text-emphasis: var(--gla-verde-oscuro);
    --bs-primary-bg-subtle: var(--gla-verde-10);
    --bs-primary-border-subtle: var(--gla-verde-20);
    --bs-success: var(--gla-verde);
    --bs-success-rgb: 22, 125, 73;
    --bs-info: var(--gla-azul);
    --bs-info-rgb: 30, 73, 143;
    --bs-link-color: var(--gla-verde);
    --bs-link-color-rgb: 22, 125, 73;
    --bs-link-hover-color: var(--gla-verde-oscuro);
    --bs-link-hover-color-rgb: 7, 80, 47;
    --bs-border-color: var(--gla-linea);
    --bs-focus-ring-color: rgba(22, 125, 73, .25);
}

body {
    font-family: var(--bs-body-font-family);
    background: var(--gla-blanco);
    color: var(--gla-tinta);
    -webkit-font-smoothing: antialiased;
}
h1, .h1, h2, .h2, h3, .h3 { font-weight: 800; letter-spacing: -.015em; }
h4, .h4, h5, .h5, h6, .h6 { font-weight: 700; }
.text-muted { color: var(--gla-texto-suave) !important; }
.acento-gla { font-family: "Lumios Marker", cursive; font-weight: 400; letter-spacing: 0; }

/* Botones */
.btn { font-weight: 600; }
.btn-primary {
    --bs-btn-bg: var(--gla-verde); --bs-btn-border-color: var(--gla-verde);
    --bs-btn-hover-bg: var(--gla-verde-oscuro); --bs-btn-hover-border-color: var(--gla-verde-oscuro);
    --bs-btn-active-bg: var(--gla-verde-oscuro); --bs-btn-active-border-color: var(--gla-verde-oscuro);
    --bs-btn-disabled-bg: var(--gla-verde); --bs-btn-disabled-border-color: var(--gla-verde);
    --bs-btn-focus-shadow-rgb: 22, 125, 73;
}
.btn-outline-primary {
    --bs-btn-color: var(--gla-verde); --bs-btn-border-color: var(--gla-verde);
    --bs-btn-hover-bg: var(--gla-verde); --bs-btn-hover-border-color: var(--gla-verde); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--gla-verde-oscuro); --bs-btn-active-border-color: var(--gla-verde-oscuro);
    --bs-btn-focus-shadow-rgb: 22, 125, 73;
}
.btn-link { --bs-btn-color: var(--gla-verde); --bs-btn-hover-color: var(--gla-verde-oscuro); }
.form-control:focus, .form-select:focus { border-color: var(--gla-campus); box-shadow: 0 0 0 .25rem rgba(22, 125, 73, .18); }
.form-check-input:checked { background-color: var(--gla-verde); border-color: var(--gla-verde); }
.progress-bar { background-color: var(--gla-campus); }
.text-bg-primary { background-color: var(--gla-verde) !important; }
.text-bg-success { background-color: var(--gla-verde) !important; }
.text-success { color: var(--gla-verde) !important; }
.text-primary { color: var(--gla-verde) !important; }
.dropdown-item:active { background-color: var(--gla-verde); }
.spinner-border.text-primary { color: var(--gla-verde) !important; }

/* Barra superior */
.navbar-gla { background: #fff; border-bottom: 1px solid var(--gla-linea); }
.navbar-gla .navbar-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--gla-tinta); }
.navbar-gla .navbar-brand img { height: 34px; width: auto; }
.navbar-gla .navbar-brand small { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gla-verde); line-height: 1; }
.navbar-gla .nav-link { font-weight: 600; color: var(--gla-texto-suave); border-radius: 10px; padding: .45rem .8rem !important; }
.navbar-gla .nav-link:hover { color: var(--gla-verde); background: var(--gla-verde-10); }
.navbar-gla .nav-link.active { color: var(--gla-verde) !important; background: var(--gla-verde-10); }
.navbar-gla .badge-sync { background: var(--gla-verde); }

/* Superficies de marca */
.hero-gla { background: var(--gla-horizonte); color: #fff; }
.hero-verde { background: var(--gla-bosque-vivo); color: #fff; }
.tarjeta-gla { background: #fff; border: 1.5px solid var(--gla-linea); border-radius: 18px; }

/* Submenú Configuración */
.menu-config { border: 1px solid var(--gla-linea); border-radius: 14px; padding: 6px; min-width: 250px; }
.menu-config .dropdown-item { display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 8px 10px; font-weight: 600; }
.menu-config .dropdown-item .bi { font-size: 1.15rem; color: var(--gla-verde); width: 22px; text-align: center; }
.menu-config .dropdown-item small { display: block; font-weight: 400; font-size: .76rem; color: var(--gla-texto-suave); }
.menu-config .dropdown-item:hover { background: var(--gla-verde-10); }
.menu-config .dropdown-item.active { background: var(--gla-verde-10); color: var(--gla-verde); }

/* Barra superior en pantallas medianas: nada se parte en dos líneas; sin íconos para ganar espacio. */
.navbar-gla .nav-link, .navbar-gla .navbar-text, .navbar-gla .badge-sync { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1399.98px) {
    .navbar-gla .navbar-nav .nav-link > .bi { display: none; }
    .navbar-gla .nav-link { padding: .45rem .6rem !important; }
}

/* Utilidad: permite que un hijo flex se encoja (Bootstrap 5.3 no la trae). */
.min-w-0 { min-width: 0; }