/* =============================================================
 * refresh-light.css
 * Refresco visual modo claro. Capa de OVERRIDE aditiva sobre
 * Metronic + Bootstrap 4.3.1. No reescribe blades ni el bundle
 * compilado. Selectores Metronic existentes + tokens declarados
 * en refresh-tokens.css.
 *
 * IMPORTANTE: se carga después de style.bundle.css y de las skins
 * → gana por orden en empates de especificidad. Donde un selector
 * Metronic se sobrepone, se usa !important localizado.
 * ============================================================= */

/* -------------------------------------------------------------
 * Tipografía base
 * ------------------------------------------------------------- */
body {
    font-family: 'Inter', 'Poppins', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--mv-bg);
    color: var(--mv-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.kt-portlet__head-title {
    font-family: 'Inter', 'Poppins', sans-serif;
    color: var(--mv-text);
    letter-spacing: -0.01em;
}

a {
    transition: color var(--mv-trans);
}

/* -------------------------------------------------------------
 * Portlets (cards de Metronic)
 * ------------------------------------------------------------- */
.kt-portlet {
    border: 0;
    border-radius: var(--mv-r-md);
    box-shadow: var(--mv-shadow-sm);
    background-color: var(--mv-surface);
    transition: box-shadow var(--mv-trans);
}

.kt-portlet:hover {
    box-shadow: var(--mv-shadow-md);
}

.kt-portlet__head {
    border-bottom: 1px solid var(--mv-border-soft);
    min-height: 60px;
}

.kt-portlet__head-title {
    font-weight: 600;
    color: var(--mv-text);
}

/* -------------------------------------------------------------
 * Botones
 * ------------------------------------------------------------- */
.btn {
    border-radius: var(--mv-r-sm);
    font-weight: 500;
    transition: background-color var(--mv-trans), box-shadow var(--mv-trans), transform var(--mv-trans), border-color var(--mv-trans);
}

.btn-brand,
.btn-primary {
    background-color: var(--mv-primary) !important;
    border-color: var(--mv-primary) !important;
    color: #fff !important;
    box-shadow: var(--mv-shadow-xs);
}

.btn-brand:hover,
.btn-primary:hover,
.btn-brand:focus,
.btn-primary:focus {
    background-color: var(--mv-primary-600) !important;
    border-color: var(--mv-primary-600) !important;
    box-shadow: var(--mv-shadow-sm);
}

.btn-outline-brand,
.btn-outline-primary {
    color: var(--mv-primary) !important;
    border-color: var(--mv-primary) !important;
    background-color: transparent !important;
}

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

.btn-danger {
    background-color: var(--mv-danger) !important;
    border-color: var(--mv-danger) !important;
}

.btn-success {
    background-color: var(--mv-success) !important;
    border-color: var(--mv-success) !important;
}

.btn-clean {
    color: var(--mv-text-soft);
}

.btn-clean:hover {
    background-color: var(--mv-surface-alt);
    color: var(--mv-primary);
}

/* -------------------------------------------------------------
 * Header (topbar superior)
 * ------------------------------------------------------------- */
.kt-header {
    background-color: var(--mv-surface) !important;
    border-bottom: 1px solid var(--mv-border-soft);
    box-shadow: none !important;
}

.kt-header__topbar .kt-header__topbar-item .kt-header__topbar-wrapper > .kt-header__topbar-icon,
.kt-header__topbar .kt-header__topbar-item .kt-header__topbar-wrapper .kt-header__topbar-user {
    transition: background-color var(--mv-trans);
}

/* -------------------------------------------------------------
 * Sidebar (aside)
 * ------------------------------------------------------------- */
.kt-aside {
    background-color: var(--mv-surface) !important;
    border-right: 1px solid var(--mv-border-soft);
}

.kt-aside__brand {
    background-color: var(--mv-surface) !important;
    border-bottom: 1px solid var(--mv-border-soft);
}

.kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link {
    border-radius: 0;
    transition: background-color var(--mv-trans), color var(--mv-trans);
}

.kt-aside-menu .kt-menu__nav > .kt-menu__item:hover > .kt-menu__link,
.kt-aside-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--hover > .kt-menu__link {
    background-color: var(--mv-surface-alt) !important;
}

.kt-aside-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--active > .kt-menu__link {
    background-color: var(--mv-primary-soft) !important;
    border-left: 3px solid var(--mv-primary);
    padding-left: calc(30px - 3px);
}

.kt-aside-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--active > .kt-menu__link .kt-menu__link-text {
    color: var(--mv-primary) !important;
    font-weight: 600;
}

.kt-aside-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--active > .kt-menu__link .kt-menu__link-icon svg [fill] {
    fill: var(--mv-primary) !important;
}

.kt-menu__section .kt-menu__section-text {
    color: var(--mv-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    font-size: 11px;
}

/* -------------------------------------------------------------
 * Form controls + Select2
 * ------------------------------------------------------------- */
.form-control {
    border-radius: var(--mv-r-sm);
    border-color: var(--mv-border);
    transition: border-color var(--mv-trans), box-shadow var(--mv-trans);
}

.form-control:focus {
    border-color: var(--mv-primary);
    box-shadow: 0 0 0 3px var(--mv-primary-soft);
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: var(--mv-r-sm) !important;
    border-color: var(--mv-border) !important;
    min-height: 38px;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--mv-primary) !important;
    box-shadow: 0 0 0 3px var(--mv-primary-soft);
}

.select2-dropdown {
    border-radius: var(--mv-r-sm);
    border-color: var(--mv-border);
    box-shadow: var(--mv-shadow-md);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--mv-primary) !important;
    color: #fff;
}

/* -------------------------------------------------------------
 * Tablas + DataTables
 * ------------------------------------------------------------- */
.table {
    color: var(--mv-text);
}

.table thead th {
    background-color: var(--mv-surface-alt);
    color: var(--mv-muted);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid var(--mv-border);
    border-top: 0;
}

.table tbody tr {
    transition: background-color var(--mv-trans);
}

.table tbody tr:hover {
    background-color: var(--mv-surface-alt);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(241, 243, 248, 0.4);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: var(--mv-r-sm);
    border-color: var(--mv-border);
}

/* -------------------------------------------------------------
 * Modales
 * ------------------------------------------------------------- */
.modal-content {
    border: 0;
    border-radius: var(--mv-r-md);
    box-shadow: var(--mv-shadow-lg);
    background-color: var(--mv-surface);
}

.modal-header {
    border-bottom: 1px solid var(--mv-border-soft);
    padding: 18px 24px;
}

.modal-footer {
    border-top: 1px solid var(--mv-border-soft);
    padding: 16px 24px;
}

/* -------------------------------------------------------------
 * Kanban (portada y proyecto.show-kanban)
 * ------------------------------------------------------------- */
.task-board {
    gap: 16px !important;
}

.task-board .column {
    background-color: var(--mv-surface-alt) !important;
    border-radius: var(--mv-r-md) !important;
    box-shadow: none !important;
    padding: 12px !important;
}

.task-board .column h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--mv-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding: 4px 6px;
}

.task-board .task {
    background-color: var(--mv-surface) !important;
    border-radius: var(--mv-r-sm) !important;
    box-shadow: var(--mv-shadow-xs) !important;
    border-left: 4px solid var(--mv-primary);
    padding: 12px !important;
    transition: transform var(--mv-trans), box-shadow var(--mv-trans);
}

.task-board .task:hover {
    transform: translateY(-2px);
    box-shadow: var(--mv-shadow-sm) !important;
}

.task-board .task a {
    color: var(--mv-text);
    font-weight: 600;
    text-decoration: none;
}

.task-board .task a:hover {
    color: var(--mv-primary);
}

.task-board .task .label {
    border-radius: var(--mv-r-pill);
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
}

.task-board .task .text-muted {
    color: var(--mv-muted) !important;
    font-size: 12px;
    margin-top: 6px;
    margin-bottom: 0;
}

/* -------------------------------------------------------------
 * KPI widgets (.kt-widget4)
 * ------------------------------------------------------------- */
.kt-widget4 .kt-widget4__item {
    border-bottom: 1px solid var(--mv-border-soft);
    padding: 12px 0;
}

.kt-widget4 .kt-widget4__item:last-child {
    border-bottom: 0;
}

.kt-widget4 .kt-widget4__title,
.kt-widget4 .kt-widget4__number {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mv-text);
}

.kt-widget4 .kt-widget4__number {
    font-size: 1.5rem;
}

/* -------------------------------------------------------------
 * Badges + chips
 * ------------------------------------------------------------- */
.kt-badge {
    border-radius: var(--mv-r-sm);
}

.kt-badge--rounded,
.kt-badge--pill {
    border-radius: var(--mv-r-pill);
}

.kt-badge--username {
    border: 2px solid var(--mv-surface);
}

.label {
    border-radius: var(--mv-r-pill);
    font-weight: 600;
}

/* -------------------------------------------------------------
 * Nav pills (pestañas)
 * ------------------------------------------------------------- */
.nav.nav-pills .nav-link {
    border-radius: var(--mv-r-sm);
    color: var(--mv-text-soft);
    font-weight: 500;
    transition: background-color var(--mv-trans), color var(--mv-trans);
}

.nav.nav-pills .nav-link:hover {
    background-color: var(--mv-surface-alt);
    color: var(--mv-primary);
}

.nav.nav-pills .nav-link.active {
    background-color: var(--mv-primary);
    color: #fff;
}

/* -------------------------------------------------------------
 * Progress bars
 * ------------------------------------------------------------- */
.progress {
    background-color: var(--mv-border-soft);
    border-radius: var(--mv-r-pill);
    height: 8px;
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(90deg, var(--mv-primary) 0%, var(--mv-primary-400) 100%);
    border-radius: var(--mv-r-pill);
}

/* -------------------------------------------------------------
 * Toggle de tema (botón inyectado por theme-toggle.js)
 * ------------------------------------------------------------- */
.mv-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--mv-r-pill);
    border: 1px solid var(--mv-border);
    background-color: var(--mv-surface);
    color: var(--mv-text-soft);
    margin-right: 6px;
    cursor: pointer;
    transition: background-color var(--mv-trans), color var(--mv-trans), border-color var(--mv-trans);
    font-size: 16px;
    line-height: 1;
}

.mv-theme-toggle:hover {
    background-color: var(--mv-primary-soft);
    border-color: var(--mv-primary);
    color: var(--mv-primary);
}

.mv-theme-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--mv-primary-soft);
}

/* -------------------------------------------------------------
 * Login (auth/login.blade.php) — refuerzo del fondo
 * ------------------------------------------------------------- */
.kt-login.kt-login--v2 {
    background-color: var(--mv-bg);
}

.kt-login.kt-login--v2 .kt-login__container {
    background: linear-gradient(135deg, var(--mv-primary-soft) 0%, var(--mv-surface) 60%) !important;
}

.kt-login.kt-login--v2 .card {
    border-radius: var(--mv-r-lg);
    box-shadow: var(--mv-shadow-lg);
    border: 0;
}

.kt-login.kt-login--v2 .btn-pill.kt-login__btn-primary {
    background-color: var(--mv-primary) !important;
    border-color: var(--mv-primary) !important;
    box-shadow: var(--mv-shadow-sm);
}

.kt-login.kt-login--v2 .btn-pill.kt-login__btn-primary:hover {
    background-color: var(--mv-primary-600) !important;
}

/* -------------------------------------------------------------
 * Scrollbars (suaves, no Metronic)
 * ------------------------------------------------------------- */
.task-board::-webkit-scrollbar,
.kt-aside-menu::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.task-board::-webkit-scrollbar-thumb,
.kt-aside-menu::-webkit-scrollbar-thumb {
    background-color: var(--mv-border);
    border-radius: var(--mv-r-pill);
}

.task-board::-webkit-scrollbar-thumb:hover,
.kt-aside-menu::-webkit-scrollbar-thumb:hover {
    background-color: var(--mv-muted);
}

/* -------------------------------------------------------------
 * Dropdown menus
 * ------------------------------------------------------------- */
.dropdown-menu {
    border-radius: var(--mv-r-md);
    border: 0;
    box-shadow: var(--mv-shadow-md);
    padding: 6px;
}

.dropdown-menu .dropdown-item {
    border-radius: var(--mv-r-sm);
    padding: 8px 12px;
    color: var(--mv-text-soft);
    transition: background-color var(--mv-trans), color var(--mv-trans);
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: var(--mv-primary-soft);
    color: var(--mv-primary);
}