/* ============================================================================
   AGRO-ALIMENTARIAS CUSTOM STYLES
   Metronic Design System Overrides
   
   Organización:
   1. Variables CSS (Custom Properties)
   2. Elementos Base (Typography, Selection)
   3. Componentes Bootstrap (Buttons, Badges, Forms, Cards, Pagination)
   4. Componentes Custom (QuickGrid)
   5. Layout (Sidebar, Header, Content)
   6. Utilities (Helper Classes)
   7. Responsive & Others (Steppers, Mobile)
   ============================================================================ */

/* ============================================================================
   1. VARIABLES CSS - Custom Properties
   ============================================================================ */

:root {
    /* Brand Colors - Primary: Lime Yellow #cccc00 */
    --brand-primary: #cccc00;
    --brand-primary-rgb: 204, 204, 0;
    --brand-primary-dark: #717100;
    --brand-primary-darker: #555500;
    --brand-primary-inverse: #000000;
    /* Bootstrap overrides */
    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: var(--brand-primary-rgb);
    --bs-danger-inverse: #fff;
    --bs-text-muted: var(--bs-gray-700);
    --bs-text-danger: #cc0736;
    --bs-light-primary-inverse: #000;
    --bs-text-success: #0f7e35;
    --bs-success: var(--bs-text-success);
    --bs-danger: var(--bs-text-danger);
    --bs-warning: #8d6e00;
    /* Metronic specific overrides */
    --kt-primary: var(--brand-primary);
    --kt-primary-rgb: var(--brand-primary-rgb);
    --kt-primary-active: var(--brand-primary-dark);
    --kt-primary-inverse: var(--brand-primary-inverse);
    /* Border Radius */
    --brand-border-radius: 5px;
    /* Sidebar Colors */
    --sidebar-bg: #000000;
    --sidebar-text: #ffffff;
    --sidebar-text-muted: #6c757d;
    --bs-app-sidebar-light-menu-link-color: #000;
    /*link colors*/
    --bs-link-color-rgb: var(--brand-primary);
    --bs-link-hover-color: var(--brand-primary-dark);
    --bs-primary-active: color-mix(in srgb, var(--brand-primary), black 12%);
    --bs-primary-light: rgba(var(--brand-primary-rgb), 0.1);
    --bs-primary-light-hover: color-mix(in srgb, var(--bs-primary-light), var(--brand-primary) 20%);
    --bs-text-primary: var(--brand-primary-dark);
    --bs-component-hover-color: var(--brand-primary-dark);
    /* Header */
    --header-bg: #ffffff;
    --header-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    --header-border-width: 3px;
    /* Spacing */
    --content-top-margin: 1.5rem;
}

/* ============================================================================
   2. ELEMENTOS BASE
   ============================================================================ */

.app-default, body {
    /*overflow: hidden;*/
    background-color: var(--bs-light);
}


/* ============================================================================
   3. COMPONENTES BOOTSTRAP - Buttons
   ============================================================================ */

    /* Primary Button - Base */
    .btn-primary {
        --bs-btn-bg: var(--brand-primary);
        --bs-btn-border-color: var(--brand-primary);
        --bs-btn-color: var(--brand-primary-inverse);
        --bs-btn-hover-bg: var(--brand-primary-dark);
        --bs-btn-hover-border-color: var(--brand-primary-dark);
        --bs-btn-hover-color: var(--brand-primary-inverse);
        --bs-btn-active-bg: var(--brand-primary-darker);
        --bs-btn-active-border-color: var(--brand-primary-darker);
        --bs-btn-active-color: var(--brand-primary-inverse);
        --bs-btn-disabled-bg: var(--brand-primary);
        --bs-btn-disabled-border-color: var(--brand-primary);
        --bs-btn-disabled-color: var(--brand-primary-inverse);
    }

    /* Fallback para versiones antiguas de Bootstrap/Metronic */
    .btn-primary:not([class*="--bs-btn"]) {
        background-color: var(--brand-primary);
        border-color: var(--brand-primary);
        color: var(--brand-primary-inverse);
        i{
            color: var(--brand-primary-inverse) !important;
        }
    }

    .btn-primary:hover:not([class*="--bs-btn"]),
    .btn-primary:focus:not([class*="--bs-btn"]),
    .btn-primary:active:not([class*="--bs-btn"]),
    .btn-primary.active:not([class*="--bs-btn"]) {
        background-color: var(--bs-primary-active) !important;
        border-color: var(--brand-primary-dark) !important;
        color: var(--brand-primary-inverse) !important;
    }

    .show > .btn-primary.dropdown-toggle {
        background-color: var(--brand-primary-dark);
        border-color: var(--brand-primary-dark);
        color: var(--brand-primary-inverse);
    }

.btn-outline {
    background:#fff ;
}

.btn-outline:hover:not([class*="--bs-btn"]),
.btn-outline:focus:not([class*="--bs-btn"]),
.btn-outline:active:not([class*="--bs-btn"]),
.btn-outline.active:not([class*="--bs-btn"]) {
    background-color: var(--bs-gray-200) !important;
    color: var(--brand-primary-inverse) !important;
}

    .btn-light:hover:not([class*="--bs-btn"]),
    .btn-light:focus:not([class*="--bs-btn"]),
    .btn-light:active:not([class*="--bs-btn"]),
    .btn-light.active:not([class*="--bs-btn"]) {
        color: var(--bs-light-inverse) !important;
    }

    .btn-active-light-primary:hover:not([class*="--bs-btn"]),
    .btn-active-light-primary:focus:not([class*="--bs-btn"]),
    .btn-active-light-primary:not([class*="--bs-btn"]),
    .btn-active-light-primary:not([class*="--bs-btn"]),
    .btn-light-primary:hover:not([class*="--bs-btn"]),
    .btn-light-primary:focus:not([class*="--bs-btn"]),
    .btn-light-primary:not([class*="--bs-btn"]),
    .btn-light-primary:not([class*="--bs-btn"]),
    .btn-active-light-primary:hover:not([class*="--bs-btn"]) i,
    .btn-active-light-primary:focus:not([class*="--bs-btn"]) i,
    .btn-active-light-primary:not([class*="--bs-btn"]) i,
    .btn-active-light-primary:not([class*="--bs-btn"]) i,
    .btn-light-primary:hover:not([class*="--bs-btn"]) i,
    .btn-light-primary:focus:not([class*="--bs-btn"]) i,
    .btn-light-primary:not([class*="--bs-btn"]) i,
    .btn-light-primary:not([class*="--bs-btn"]) i{
        color: var(--bs-light-primary-inverse) !important;
    }

    .btn-check:active + .btn.btn-light-primary, 
    .btn-check:checked + .btn.btn-light-primary, 
    .btn.btn-light-primary.active, 
    .btn.btn-light-primary.show, 
    .btn.btn-light-primary:active:not(.btn-active), 
    .btn.btn-light-primary:focus:not(.btn-active), 
    .btn.btn-light-primary:hover:not(.btn-active), 
    .show > .btn.btn-light-primary {
        background-color: var(--bs-primary-light-hover) !important;
    }

    .btn.btn-secondary:not(.btn-active) i{
        color: var(--bs-secondary-inverse) !important;
    }

    /* Border Radius - Todos los botones */
    .btn {
        border-radius: var(--brand-border-radius);
    }

    /* links */
    a {
        color: var(--brand-primary-dark); 
    }

    a:hover,
    a:focus {
        color: var(--brand-primary-darker) !important;
        text-decoration: underline; /* Ayuda visual adicional para accesibilidad */
    }

    /* Link Primary */
    .link-primary {
        color: var(--brand-primary-dark) !important;
    }

    .link-primary:hover,
    .link-primary:focus {
        color: var(--brand-primary-darker) !important;
    }

    .border-hover {
        transition:.3s border !important;
    }
/* ============================================================================
   3.1 COMPONENTES BOOTSTRAP - Badges
   ============================================================================ */

    .badge-light-primary {
        color: var(--bs-light-primary-inverse) !important;
    }

    .badge-primary.badge-outline {
        color: var(--brand-primary-dark);
    }
/* ============================================================================
   3.2 COMPONENTES BOOTSTRAP - Forms
   ============================================================================ */

/* Form Controls */
.form-control,
.form-select {
    border-radius: var(--brand-border-radius);
}

.form-text,
.form-check-label {
    color: var(--bs-gray-700)
}

.form-check-input:checked {
    background-color: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
}

.validation-errors {
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
    padding: 10px 30px;
    border: solid 1px var(--bs-danger-border-subtle);
    border-radius: var(--bs-border-radius);
}
.validation-errors .validation-message {
    padding: 2px 0;
}
.validation-message {
    color: var(--bs-danger-text-emphasis);
}

.form-check-input:disabled ~ .form-check-label, 
.form-check-input[disabled] ~ .form-check-label {
    opacity:1 !important;
}

/* ============================================================================
   3.3 COMPONENTES BOOTSTRAP - Links & Text
   ============================================================================ */

/* Primary Text Color */
.text-primary {
    color: var(--brand-primary-dark) !important;
}

/* Links - Solo sobrescribir si es necesario */
a.text-primary:hover,
a.text-primary:focus {
    /*color: var(--brand-primary-dark) !important;*/
}


/* ============================================================================
   3.4 COMPONENTES BOOTSTRAP - Pagination
   ============================================================================ */

    .pagination {
        --bs-pagination-disabled-color: var(--bs-gray-700);
    }

    .page-item.active .page-link {
        background-color: var(--bs-light);
        border-color: var(--bs-light);
        color: var(--brand-primary-inverse);
    }

    .page-link:hover,
    .page-link:focus {
        color: var(--brand-primary-dark);
    }


/* ============================================================================
   3.5 COMPONENTES BOOTSTRAP - Cards
   ============================================================================ */

.card {
    border-radius: var(--brand-border-radius);
}

.card-header:first-child {
    border-radius: var(--brand-border-radius) var(--brand-border-radius) 0 0;
}

.card-footer:last-child {
    border-radius: 0 0 var(--brand-border-radius) var(--brand-border-radius);
}

.card .card-header .card-toolbar {
    margin: 0 !important;
    gap: .75rem !important;
}

/* Restaurar el borde en headers y footers de las tarjetas .card-flush (Metronic Override) */
.card.card-flush > .card-header {
    border-bottom: 1px solid var(--bs-card-border-color) !important;
}
.card.card-flush > .card-footer{
    border-top: 1px solid var(--bs-card-border-color) !important;
}


/* ============================================================================
   3.6 COMPONENTES BOOTSTRAP - Collapse / Accordion
   ============================================================================ */

/* Transición suave para todos los iconos de colapso */
[data-bs-toggle="collapse"] .rotate-chevron {
    transition: transform 0.3s ease-in-out;
}

/* Girar el icono cuando la sección esté contraída */
[data-bs-toggle="collapse"][aria-expanded="false"] .rotate-chevron {
    transform: rotate(-180deg); /* Apunta hacia la derecha cuando está cerrado */
    /* Nota: Usa rotate(180deg) si prefieres que apunte hacia arriba al cerrarse */
}


/* ============================================================================
   4. COMPONENTES CUSTOM - QuickGrid
   ============================================================================ */

/* QuickGrid - Sort Indicator Base */
.quickgrid-sort-indicator {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 0.5rem;
    opacity: 0.5;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3e%3cpath fill='%23a1a5b7' d='M41 288h238c21.4 0 32.1 2 9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* QuickGrid - Ascending Sort */
th[aria-sort="ascending"] .quickgrid-sort-indicator {
    opacity: 1;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3e%3cpath fill='%23009ef7' d='M177 64L296 183c15.1 15.1 4.4 41-17 41H41c-21.4 0-32.1-25.9-17-41L143 64c9.4-9.4 24.6-9.4 33.9 0z'/%3e%3c/svg%3e");
}

/* QuickGrid - Descending Sort */
th[aria-sort="descending"] .quickgrid-sort-indicator {
    opacity: 1;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3e%3cpath fill='%23009ef7' d='M143 448L24 329c-15.1-15.1-4.4-41 17-41h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0z'/%3e%3c/svg%3e");
}

/* QuickGrid - Table borders */
.table th {
    border-bottom-color: var(--bs-gray-400);
}

.table:not(.table-bordered).table-row-dashed tr:last-child {
    border-bottom-width: 1px !important;
    border-bottom-style: dashed !important;
    border-bottom-color: var(--bs-border-color) !important;
}

.table th .col-title-text {
    font-weight: bold;
    text-transform: uppercase;
}

/* QuickGrid - Table Header Buttons */
.table th button {
    background: none;
    border: none;
    color: inherit;
    font-weight: bold;
    font-size: inherit;
    font-family: inherit;
    padding: 0;
    margin: 0;
    text-transform: uppercase;
    text-align: left;
    display: flex;
    align-items: center;
    cursor: pointer;
    width: 100%;
}

    .table th button:hover {
        color: var(--bs-text-primary);
    }

    .table th button:focus {
        outline: none;
        color: var(--bs-text-primary);
    }
/* ============================================================================
   5. LAYOUT - GLOBAL
   ============================================================================ */

.app-main {
    min-height: calc(100dvh - var(--bs-app-header-height));
}
.app-content .app-container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}
.app-content .app-container.container-fluid .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ============================================================================
   5.1 LAYOUT - Sidebar (Metronic Specific)
   ============================================================================ */

[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-sub .menu-item .menu-link.active .menu-title {
    color: var(--bs-black) !important;
}

[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link.active {
    background: rgba(var(--brand-primary-rgb), 0.1);
}

#kt_app_sidebar .menu-item.show > .menu-link .menu-icon i,
#kt_app_sidebar .menu-item.here > .menu-link .menu-icon i,
#kt_app_sidebar .menu-item.active > .menu-link .menu-icon i,
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-icon i {
    color: var(--bs-text-muted) !important;
}

[data-kt-app-sidebar-minimize=on] .menu-sub-indention .menu-sub:not([data-popper-placement]) {
    margin-left:0;
}
[data-kt-app-sidebar-minimize=on] .app-sidebar .menu .menu-item .menu-link {
    padding-left: 1.6rem;
}

    [data-kt-app-sidebar-minimize=on] .app-sidebar .menu .menu-item > .menu-link > .menu-icon > i {
        font-size: 1.25rem;
    }

/* ============================================================================
    5.2 LAYOUT - Sidebar Nav (Bootstrap)
    ============================================================================ */
    .nav-pills {
    --bs-nav-pills-border-radius: var(--bs-border-radius);
    --bs-nav-pills-link-active-color: var(--bs-black);
    --bs-link-hover-color: var(--bs-black);
    --bs-nav-link-color: var(--bs-gray-700);
    --bs-nav-pills-link-active-bg: rgba(var(--brand-primary-rgb), 0.1);
    --brand-primary-darker: #000;
}
/* ============================================================================
   5.3 LAYOUT - Nav Line Tabs
   ============================================================================ */
/*.nav-line-tabs.nav-line-tabs-2x .nav-item .nav-link.active, .nav-line-tabs.nav-line-tabs-2x .nav-item .nav-link:hover:not(.disabled), .nav-line-tabs.nav-line-tabs-2x .nav-item.show .nav-link {
        color: var(--bs-black) !important;
        border-color: var(--bs-black);
    } */
.nav-line-tabs .nav-item .nav-link.active, .nav-line-tabs .nav-item .nav-link:hover:not(.disabled), .nav-line-tabs .nav-item.show .nav-link {
        color: var(--bs-text-dark) !important;
    }
/* ============================================================================
   5.4 LAYOUT - Header/Topbar (Metronic Specific)
   ============================================================================ */
#kt_app_header {
    background-color: var(--header-bg);
    box-shadow: var(--header-shadow);
    z-index: 110;
    border-bottom: var(--header-border-width) solid var(--brand-primary);
}
/* ============================================================================
   5.5 LAYOUT - Content Area
   ============================================================================ */
#kt_app_content {
    margin-top: var(--content-top-margin);
}
/* ============================================================================
   6. UTILITIES - Helper Classes
   ============================================================================ */
/* Brand Background */
.bg-brand-primary {
    background-color: var(--brand-primary) !important;
    color: var(--brand-primary-inverse) !important;
}
/* Brand Border */
.border-brand-primary {
    border-color: var(--brand-primary) !important;
}
/* Brand Text */
.text-brand-primary {
    color: var(--brand-primary) !important;
}
/* ============================================================================
   7. RESPONSIVE ADJUSTMENTS & OTHERS
   ============================================================================ */
/* Ejemplo: Ajustar header border en móviles */
@media (max-width: 767.98px) {
    #kt_app_header {
        border-bottom-width: 2px;
    }

    #kt_app_content {
        margin-top: 1rem;
    }
}
/* ============================================================================
   7.1 STEP NUMBERS (Bootstrap)
   ============================================================================ */
.stepper.stepper-pills {
    --bs-stepper-icon-number-color: #000;
    --bs-stepper-icon-number-color-current: #000;
    --bs-stepper-icon-check-color-completed: #000;
    --bs-stepper-label-title-color-current: var(--bs-gray-700);
    --bs-stepper-label-desc-color-current: var(--bs-gray-700);
    --bs-stepper-label-desc-color-completed: var(--bs-gray-700);
}