/* ============================================================
   Kumbai — Design tokens & Sneat overrides
   Todos los valores de marca están declarados como CSS custom
   properties (variables) para poder cambiarlos en un único sitio.
   ============================================================ */

:root {
    /* ========== Tipografía ========== */
    --kumbai-font-family:      'Lexend', 'Segoe UI', system-ui, -apple-system,
                                BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, sans-serif;

    /* ========== Logotipo sidebar ========== */
    --kumbai-sidebar-logo-height: 90px;   /* altura del logo en la cabecera del sidebar */
    --kumbai-sidebar-brand-padding-y: 1rem;

    /* ========== Paleta de marca ========== */
    --kumbai-primary:          #008082;
    --kumbai-primary-hover:    #006668;
    --kumbai-primary-active:   #00595b;
    --kumbai-primary-rgb:      0, 128, 130;
    --kumbai-primary-soft:     rgba(0, 128, 130, 0.16);
    --kumbai-primary-ring:     rgba(0, 128, 130, 0.25);
    --kumbai-primary-shadow:   rgba(0, 128, 130, 0.30);

    --kumbai-on-primary:       #ffffff;   /* texto sobre fondo primario */
    --kumbai-black:            #000000;
    --kumbai-white:            #ffffff;

    /* ========== Enlaces ========== */
    --kumbai-link:             var(--kumbai-primary);
    --kumbai-link-hover:       var(--kumbai-primary-hover);

    /* ========== Menú lateral (ítem activo) ========== */
    --kumbai-menu-active-bg:   linear-gradient(
                                  72.47deg,
                                  var(--kumbai-primary) 22.16%,
                                  rgba(var(--kumbai-primary-rgb), 0.7) 76.47%
                               );
    --kumbai-menu-active-color:     var(--kumbai-on-primary);
    --kumbai-menu-active-shadow:    0 2px 6px 0 var(--kumbai-primary-shadow);

    /* ========== Bootstrap bridge (mapea a --bs-*) ========== */
    --bs-primary:              var(--kumbai-primary);
    --bs-primary-rgb:          var(--kumbai-primary-rgb);
    --bs-link-color:           var(--kumbai-link);
    --bs-link-hover-color:     var(--kumbai-link-hover);
    --bs-link-color-rgb:       var(--kumbai-primary-rgb);
}

/* Mismos tokens para light y dark (Sneat usa data-bs-theme) */
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-primary:          var(--kumbai-primary);
    --bs-primary-rgb:      var(--kumbai-primary-rgb);
    --bs-link-color:       var(--kumbai-link);
    --bs-link-hover-color: var(--kumbai-link-hover);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn-primary {
    --bs-btn-bg:                  var(--kumbai-primary);
    --bs-btn-border-color:        var(--kumbai-primary);
    --bs-btn-hover-bg:            var(--kumbai-primary-hover);
    --bs-btn-hover-border-color:  var(--kumbai-primary-hover);
    --bs-btn-active-bg:           var(--kumbai-primary-active);
    --bs-btn-active-border-color: var(--kumbai-primary-active);
    --bs-btn-disabled-bg:         var(--kumbai-primary);
    --bs-btn-disabled-border-color: var(--kumbai-primary);
    background-color: var(--kumbai-primary);
    border-color: var(--kumbai-primary);
    color: var(--kumbai-on-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--kumbai-primary-hover) !important;
    border-color: var(--kumbai-primary-hover) !important;
    color: var(--kumbai-on-primary) !important;
}

.btn-outline-primary {
    --bs-btn-color:               var(--kumbai-primary);
    --bs-btn-border-color:        var(--kumbai-primary);
    --bs-btn-hover-bg:            var(--kumbai-primary);
    --bs-btn-hover-border-color:  var(--kumbai-primary);
    --bs-btn-active-bg:           var(--kumbai-primary);
    --bs-btn-active-border-color: var(--kumbai-primary);
    color: var(--kumbai-primary);
    border-color: var(--kumbai-primary);
}
.btn-outline-primary:hover {
    background-color: var(--kumbai-primary) !important;
    color: var(--kumbai-on-primary) !important;
}

/* ============================================================
   Text / bg / border utilities
   ============================================================ */
.text-primary   { color: var(--kumbai-primary) !important; }
.bg-primary     { background-color: var(--kumbai-primary) !important; }
.border-primary { border-color: var(--kumbai-primary) !important; }

.bg-label-primary {
    background-color: var(--kumbai-primary-soft) !important;
    color: var(--kumbai-primary) !important;
}

/* ============================================================
   Links
   ============================================================ */
a:not(.btn):not(.menu-link):not(.page-link):not(.dropdown-item) {
    color: var(--kumbai-link);
}
a:not(.btn):not(.menu-link):not(.page-link):not(.dropdown-item):hover {
    color: var(--kumbai-link-hover);
}

/* ============================================================
   Vertical menu — ítem activo (texto blanco forzado)
   ============================================================ */
.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
    background: var(--kumbai-menu-active-bg);
    box-shadow: var(--kumbai-menu-active-shadow);
    color: var(--kumbai-menu-active-color) !important;
}
.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) > div,
.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) > span,
.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) > i,
.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) .menu-icon {
    color: var(--kumbai-menu-active-color) !important;
}

/* Sub-menú activo (si llegamos a tener) */
.menu-vertical .menu-sub .menu-item.active > .menu-link {
    color: var(--kumbai-primary) !important;
}

/* ============================================================
   Formularios
   ============================================================ */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--kumbai-primary);
    box-shadow: 0 0 0 0.15rem var(--kumbai-primary-ring);
}
.form-check-input:checked {
    background-color: var(--kumbai-primary);
    border-color: var(--kumbai-primary);
}

/* ============================================================
   Paginación
   ============================================================ */
.page-item.active .page-link {
    background-color: var(--kumbai-primary);
    border-color: var(--kumbai-primary);
    color: var(--kumbai-on-primary);
}
.page-link        { color: var(--kumbai-primary); }
.page-link:hover  { color: var(--kumbai-link-hover); }

/* ============================================================
   Tipografía — aplica Lexend a todo el documento
   ============================================================ */
body,
.menu,
.layout-navbar,
.modal,
.dropdown-menu,
.table,
input, select, textarea, button {
    font-family: var(--kumbai-font-family) !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--kumbai-font-family) !important;
    font-weight: 600;
}

/* ============================================================
   Navbar superior — ocultarla en desktop (movida al sidebar)
   ============================================================ */
@media (min-width: 1200px) {
    #layout-navbar {
        display: none !important;
    }
    .layout-page .content-wrapper {
        margin-top: 0;
    }
}

/* ============================================================
   Sidebar user footer (nombre + menú logout en la base)
   ============================================================ */
.sidebar-user {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.sidebar-user-btn {
    background: transparent;
    border: 0;
    color: inherit;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease;
}
.sidebar-user-btn::after { display: none; } /* quita caret default del dropdown */
.sidebar-user-btn:hover,
.sidebar-user-btn[aria-expanded="true"] {
    background-color: var(--kumbai-primary-soft);
}
.sidebar-user .dropdown-menu {
    margin-bottom: 0.25rem !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}

/* ============================================================
   Logo sidebar — tamaño controlado por variable
   ============================================================ */
.layout-menu .app-brand {
    padding-top: var(--kumbai-sidebar-brand-padding-y);
    padding-bottom: var(--kumbai-sidebar-brand-padding-y);
    min-height: calc(var(--kumbai-sidebar-logo-height) + var(--kumbai-sidebar-brand-padding-y) * 2);
}
.layout-menu .app-brand .app-brand-link img.kumbai-logo {
    max-height: var(--kumbai-sidebar-logo-height) !important;
    height: var(--kumbai-sidebar-logo-height);
    width: auto;
    display: block;
}

/* ============================================================
   Varios
   ============================================================ */
.app-brand-link img { display: block; }