/*
theme.css
definicion variables css etc para colores corporativos etc
*/
:root {
    /* =========================
       Brand / corporate palette
       ========================= */
    --brand-dark: #2F3A40;
    --brand-dark-elevated: #3A464D;
    --brand-dark-soft: #4B5961;
    --brand-lime: #FFDE00;
    --brand-lime-hover: #E6C800;
    --brand-lime-active: #CCB200;
    --brand-lime-dark: #997F00;
    --brand-lime-soft: #FFF7BF;
    --brand-coral: #04968B;
    --brand-coral-hover: #037F76;
    --brand-coral-soft: #CCFBF1;
    /* =========================
       App semantic colors
       ========================= */
    --app-bg: #F8F9FA;
    --app-surface: #FFFFFF;
    --app-surface-alt: #F4F6F8;
    --app-text: #212529;
    --app-text-muted: #6C757D;
    --app-border: #DDE3E7;
    /* =========================
       Bootstrap bridge
       ========================= */
    --bs-primary: var(--brand-lime);
    --bs-primary-rgb: 255, 222, 0;
    --bs-link-color: var(--brand-lime-dark);
    --bs-link-hover-color: var(--brand-lime);
    --bs-body-bg: var(--app-bg);
    --bs-body-color: var(--app-text);
    --bs-border-color: var(--app-border);
}

/* =========================
   Global base
   ========================= */
body {
    background-color: var(--app-bg);
    color: var(--app-text);
    /*font-family: "Nunito", sans-serif;*/
    font-family: "Baloo Bhaina 2", "Nunito", sans-serif;    /* Baloo Bhaina 2 es la fuente del logo, de momento la aplicamos a toda la app (hay q tener un <link> en el <head> para cargarla desde google fonts) */
}

a {
    color: var(--brand-lime-dark);
}

a:hover {
    color: var(--brand-lime);
}

/* =========================
   Header / footer helpers
   ========================= */
.app-header {
    background-color: var(--brand-dark);
    color: #fff;
}

.app-header a,
.app-header .nav-link,
.app-header .navbar-brand {
    color: #fff;
}

.app-header a:hover,
.app-header .nav-link:hover,
.app-header .navbar-brand:hover {
    color: var(--brand-lime);
}

.app-footer {
    background-color: var(--brand-dark);
    color: #fff;
}

.app-footer a {
    color: var(--brand-lime);
}

.app-footer a:hover {
    color: #fff;
}



/* Headings con personalidad (usando la fuente del logo) */
/* ojo, estos en ppio no los estamos usando pq estamos usando la fuente del logo para toda la app... */
h1, h2, h3, .heading-brand {
    font-family: "Baloo Bhaina 2", "Nunito", sans-serif;
    letter-spacing: 0.5px;
}



/* =========================
   Bootstrap component overrides
   ========================= */

/* Buttons */
.btn-primary {
    background-color: var(--brand-lime) !important;
    border-color: var(--brand-lime) !important;
    color: #1f2328 !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--brand-lime-hover) !important;
    border-color: var(--brand-lime-hover) !important;
    color: #1f2328 !important;
}

.btn-primary:active,
.btn-primary.active,
.btn-primary.dropdown-toggle.show {
    background-color: var(--brand-lime-active) !important;
    border-color: var(--brand-lime-active) !important;
    color: #1f2328 !important;
}

.btn-outline-primary {
    color: var(--brand-lime-dark) !important;
    border-color: var(--brand-lime-dark) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--brand-lime-dark) !important;
    border-color: var(--brand-lime-dark) !important;
    color: #fff !important;
}

.btn:focus,
.btn:active,
.btn:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Opcional: aņadir focus personalizado (recomendado) */
.btn:focus-visible {
    box-shadow: 0 0 0 2px var(--brand-lime-soft);
}

.btn.disabled, 
.btn:disabled, 
fieldset:disabled .btn {
    opacity: .35;
}





/* Links / text helpers */
.text-primary {
    color: var(--brand-lime-dark) !important;
}

.bg-primary {
    background-color: var(--brand-lime) !important;
    color: #1f2328 !important;
}

/* Forms */
.form-check-input:checked {
    background-color: var(--brand-lime-dark) !important;
    border-color: var(--brand-lime-dark) !important;
}

.form-check-input:focus {
    border-color: var(--brand-lime-dark) !important;
    box-shadow: 0 0 0 0.25rem rgba(77, 124, 15, 0.25) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-lime-dark) !important;
    box-shadow: 0 0 0 0.25rem rgba(77, 124, 15, 0.18) !important;
}

/* Pagination */
.page-link {
    color: var(--brand-lime-dark) !important;
}

.page-link:hover {
    color: var(--brand-lime) !important;
}

.page-item.active .page-link {
    background-color: var(--brand-lime) !important;
    border-color: var(--brand-lime) !important;
    color: #1f2328 !important;
}

/* Badges */
.badge.bg-primary {
    background-color: var(--brand-lime) !important;
    color: #1f2328 !important;
}

/* Alerts / soft highlight helpers */
.bg-brand-soft {
    background-color: var(--brand-lime-soft) !important;
}

.border-brand {
    border-color: var(--brand-lime-dark) !important;
}

.text-brand-dark {
    color: var(--brand-lime-dark) !important;
}

.text-brand-coral {
    color: var(--brand-coral) !important;
}

/* Cards / panels */
.card,
.modal-content,
.list-group-item {
    border-color: var(--app-border);
}

/* Tables */
.table {
    --bs-table-striped-bg: #FFFBE5;
    --bs-table-hover-bg: #FFF7BF;
}

/* Navbar toggler on dark headers */
.app-header .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.25);
}

.app-header .navbar-toggler-icon {
    filter: invert(1);
}









/* =========================
   Global control style
   ========================= 
    estilos globales para todos los controles de la app (bordes rectos, transiciones suaves...)
*/


/* Quitar bordes redondeados en toda la app */
.btn,
.form-control,
.form-select,
.form-check-input,
.input-group-text {
    border-radius: 0 !important;
}

/* Transiciones suaves globales */
.btn,
.form-control,
.form-select,
.form-check-input {
    transition: all 0.15s ease-in-out;
}

/* Inputs base */
.form-control,
.form-select {
    border: 1px solid var(--app-border);
    background-color: #fff;
}

    /* Focus elegante (muy importante para UX) */
    .form-control:focus,
    .form-select:focus {
        border-color: var(--brand-lime-dark);
        box-shadow: 0 0 0 0.2rem rgba(77, 124, 15, 0.15);
    }

/* Botones base */
.btn {
    font-weight: 500;
    letter-spacing: 0.2px;
}