/*
 * Pitflow — refresco visual (se carga DESPUÉS de custom-theme(-light).css y solo en Pitflow).
 * Idea: paleta neutra, botón principal negro en píldora, rojo #FF3B30 solo como acento
 * (estado activo, enlaces, badges), tarjetas blancas con borde fino y sombra suave.
 * El modo oscuro se distingue por html[data-ct-theme="dark"] (lo pone theme-toggle.js).
 */

:root {
    --pf-accent: #FF3B30;
    --pf-accent-rgb: 255, 59, 48;
    --pf-ink: #0F172A;
    --pf-ink-hover: #1E293B;
    --pf-on-ink: #ffffff;
    --pf-bg: #F7F7F8;
    --pf-surface: #ffffff;
    --pf-surface-muted: #F8FAFC;
    --pf-border: rgba(15, 23, 42, 0.08);
    --pf-border-strong: rgba(15, 23, 42, 0.18);
    --pf-text: #0F172A;
    --pf-text-muted: #64748B;
    --pf-radius: 16px;
    --pf-radius-sm: 10px;
    --pf-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.04);
}

html[data-ct-theme="dark"] {
    --pf-ink: #F1F5F9;
    --pf-ink-hover: #ffffff;
    --pf-on-ink: #0F172A;
    --pf-bg: #0F1117;
    --pf-surface: #171C27;
    --pf-surface-muted: #1C2230;
    --pf-border: rgba(255, 255, 255, 0.07);
    --pf-border-strong: rgba(255, 255, 255, 0.2);
    --pf-text: #E2E8F0;
    --pf-text-muted: #94A3B8;
    --pf-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ── Fondo ─────────────────────────────────────── */
body,
.page,
.wrapper,
#kt_wrapper,
#kt_content,
#kt_content_container,
.content,
.d-flex.flex-column.flex-root,
.d-flex.flex-row.flex-column-fluid {
    background-color: var(--pf-bg) !important;
}

#kt_toolbar,
.toolbar {
    background-color: transparent !important;
    border-bottom: 0 !important;
}

#kt_header,
.header,
.header-fixed .header {
    box-shadow: none !important;
}

/* ── Tarjetas y paneles ────────────────────────── */
.card,
.card.shadow-sm,
.card.border-0 {
    background-color: var(--pf-surface) !important;
    border: 1px solid var(--pf-border) !important;
    border-radius: var(--pf-radius) !important;
    box-shadow: var(--pf-shadow) !important;
}

.card-header,
.card-footer {
    background-color: transparent !important;
    border-color: var(--pf-border) !important;
}

.card > .card-header:first-child {
    border-top-left-radius: var(--pf-radius) !important;
    border-top-right-radius: var(--pf-radius) !important;
}

.aside {
    border-radius: var(--pf-radius) !important;
    border: 1px solid var(--pf-border) !important;
    box-shadow: var(--pf-shadow) !important;
}

/* ── Botones ───────────────────────────────────── */
.btn:not(.btn-icon):not(.btn-link):not(.btn-group > .btn):not(.input-group > .btn) {
    border-radius: 999px !important;
}

.btn {
    font-weight: 600;
}

/* Principal: negro (blanco en oscuro), sin degradado ni sombra de color */
.btn.btn-primary,
.btn-primary {
    background: var(--pf-ink) !important;
    border: 1px solid var(--pf-ink) !important;
    color: var(--pf-on-ink) !important;
    box-shadow: none !important;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--pf-ink-hover) !important;
    border-color: var(--pf-ink-hover) !important;
    color: var(--pf-on-ink) !important;
    box-shadow: none !important;
}

.btn-primary .svg-icon svg path,
.btn-primary i {
    color: var(--pf-on-ink) !important;
}

/* Secundarios: blanco con borde oscuro */
.btn-light,
.btn-secondary,
.btn-outline-secondary,
.btn-outline-primary,
.btn-light-primary,
.btn-light-info,
.btn-outline-info {
    background: var(--pf-surface) !important;
    border: 1px solid var(--pf-border-strong) !important;
    color: var(--pf-text) !important;
    box-shadow: none !important;
}

.btn-light:hover,
.btn-secondary:hover,
.btn-outline-secondary:hover,
.btn-outline-primary:hover,
.btn-light-primary:hover,
.btn-light-info:hover,
.btn-outline-info:hover {
    background: var(--pf-surface-muted) !important;
    border-color: var(--pf-text) !important;
    color: var(--pf-text) !important;
}

.btn-light i,
.btn-secondary i,
.btn-outline-secondary i,
.btn-outline-primary i,
.btn-light-primary i,
.btn-light-info i,
.btn-outline-info i {
    color: inherit !important;
}

/* Éxito / aviso / info sólidos: planos, sin degradado */
.btn-success {
    background: #16A34A !important;
    border-color: #16A34A !important;
    color: #fff !important;
    box-shadow: none !important;
}

.btn-success:hover {
    background: #15803D !important;
    border-color: #15803D !important;
}

.btn-info {
    background: var(--pf-surface) !important;
    border: 1px solid var(--pf-border-strong) !important;
    color: var(--pf-text) !important;
}

.btn-warning {
    background: var(--pf-surface) !important;
    border: 1px solid rgba(217, 119, 6, 0.45) !important;
    color: #B45309 !important;
}

/* Destructivas: contorno rojo */
.btn-danger,
.btn-light-danger,
.btn-outline-danger {
    background: transparent !important;
    border: 1px solid rgba(var(--pf-accent-rgb), 0.45) !important;
    color: #DC2626 !important;
    box-shadow: none !important;
}

.btn-danger:hover,
.btn-light-danger:hover,
.btn-outline-danger:hover {
    background: rgba(var(--pf-accent-rgb), 0.08) !important;
    color: #B91C1C !important;
}

.btn-danger i,
.btn-light-danger i,
.btn-outline-danger i {
    color: inherit !important;
}

/* Grupo de filtros: activo en negro (segmented control) */
.btn-group .btn-outline-secondary.active,
.btn-outline-secondary.active,
.btn-outline-primary.active,
.btn-check:checked + .btn-outline-secondary,
.btn-check:checked + .btn-outline-primary {
    background: var(--pf-ink) !important;
    border-color: var(--pf-ink) !important;
    color: var(--pf-on-ink) !important;
}

.btn-group > .btn:first-child {
    border-top-left-radius: 999px !important;
    border-bottom-left-radius: 999px !important;
}

.btn-group > .btn:last-child,
.btn-group > .btn.dropdown-toggle {
    border-top-right-radius: 999px !important;
    border-bottom-right-radius: 999px !important;
}

/* ── Acento rojo: solo activo, enlaces y badges ── */
.aside .menu .menu-item .menu-link.active,
.menu-item .menu-link.active {
    background-color: rgba(var(--pf-accent-rgb), 0.07) !important;
}

.badge-primary,
.badge.bg-primary {
    background-color: var(--pf-accent) !important;
    color: #fff !important;
}

.badge-light-primary {
    background-color: rgba(var(--pf-accent-rgb), 0.1) !important;
    color: var(--pf-accent) !important;
}

/* ── Formularios ───────────────────────────────── */
.form-control,
.form-select {
    border-radius: var(--pf-radius-sm) !important;
    background-color: var(--pf-surface) !important;
    border-color: var(--pf-border-strong) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--pf-text) !important;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08) !important;
    background-color: var(--pf-surface) !important;
}

/* Input + botón unidos: el radio con !important de arriba rompía las esquinas
   que Bootstrap aplana dentro de .input-group. */
.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child),
.input-group > .btn:not(:last-child),
.input-group > .input-group-text:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child),
.input-group > .btn:not(:first-child),
.input-group > .input-group-text:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.input-group > .btn:first-child,
.input-group > .input-group-text:first-child {
    border-top-left-radius: var(--pf-radius-sm) !important;
    border-bottom-left-radius: var(--pf-radius-sm) !important;
}

.input-group > .btn:last-child,
.input-group > .input-group-text:last-child {
    border-top-right-radius: var(--pf-radius-sm) !important;
    border-bottom-right-radius: var(--pf-radius-sm) !important;
}

.input-group > .input-group-text {
    background-color: var(--pf-surface-muted) !important;
    border-color: var(--pf-border-strong) !important;
}

.form-label,
label {
    font-weight: 600;
}

/* ── Tablas ────────────────────────────────────── */
.table thead th {
    background-color: transparent !important;
    color: var(--pf-text-muted) !important;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--pf-surface-muted) !important;
}

/* ── Modales ───────────────────────────────────── */
.modal-content {
    border-radius: 20px !important;
    border: 1px solid var(--pf-border) !important;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18) !important;
    overflow: hidden;
}

.modal-header,
.modal-footer {
    background-color: var(--pf-surface) !important;
    border-color: var(--pf-border) !important;
}

.modal-title {
    font-weight: 700;
}

/* SweetAlert2 con el mismo lenguaje */
.swal2-popup {
    border-radius: 20px !important;
}

.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel,
.swal2-styled.swal2-deny {
    border-radius: 999px !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}

.swal2-styled.swal2-confirm {
    background: var(--pf-ink) !important;
    color: var(--pf-on-ink) !important;
}

.swal2-styled.swal2-cancel {
    background: var(--pf-surface) !important;
    border: 1px solid var(--pf-border-strong) !important;
    color: var(--pf-text) !important;
}


/* ── Scroll-top ────────────────────────────────── */
#kt_scrolltop {
    background-color: var(--pf-ink) !important;
    box-shadow: none !important;
}

/* ── Dashboards (estilos propios de la página, alineados a los tokens) ── */
.dashboard-kpi,
.dashboard-panel,
.admin-card,
.admin-panel {
    background: var(--pf-surface) !important;
    border: 1px solid var(--pf-border) !important;
    border-radius: var(--pf-radius) !important;
    box-shadow: var(--pf-shadow) !important;
}

.dashboard-kpi__value,
.admin-card__value {
    color: var(--pf-text) !important;
    letter-spacing: -0.02em;
}

/* ── Calendario (FullCalendar) ─────────────────── */
.fc .fc-button,
.fc .fc-button-primary,
.fc .fc-statsButton-button,
.fc .fc-printMenuButton-button {
    background: var(--pf-surface) !important;
    border: 1px solid var(--pf-border-strong) !important;
    color: var(--pf-text) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    text-transform: none !important;
}

.fc .fc-button:hover,
.fc .fc-button:focus {
    background: var(--pf-surface-muted) !important;
    border-color: var(--pf-text) !important;
    color: var(--pf-text) !important;
}

.fc .fc-button-group > .fc-button {
    border-radius: 0 !important;
}

.fc .fc-button-group > .fc-button:first-child {
    border-top-left-radius: 999px !important;
    border-bottom-left-radius: 999px !important;
}

.fc .fc-button-group > .fc-button:last-child {
    border-top-right-radius: 999px !important;
    border-bottom-right-radius: 999px !important;
}

.fc .fc-createButton-button,
.fc .fc-button-primary:not(:disabled).fc-button-active {
    background: var(--pf-ink) !important;
    border-color: var(--pf-ink) !important;
    color: var(--pf-on-ink) !important;
}

.fc .fc-createButton-button:hover,
.fc .fc-createButton-button:focus {
    background: var(--pf-ink-hover) !important;
    color: var(--pf-on-ink) !important;
}

.fc .fc-toolbar-title {
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    color: var(--pf-text) !important;
}

.fc .fc-timegrid-now-indicator-line {
    border-color: var(--pf-accent) !important;
}

.fc .fc-timegrid-now-indicator-arrow {
    border-color: var(--pf-accent) !important;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
}

.fc .fc-day-today {
    background: rgba(var(--pf-accent-rgb), 0.03) !important;
}

.fc .fc-event {
    border-radius: 8px !important;
}

/* Semáforo Groupon: píldora sobria con punto de color */
.groupon-traffic-light {
    background: var(--pf-surface) !important;
    border: 1px solid var(--pf-border-strong) !important;
    color: var(--pf-text) !important;
    box-shadow: none !important;
}

.groupon-traffic-light .traffic-icon {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    font-size: 0 !important;
    background: #16A34A;
}

.groupon-traffic-light.yellow .traffic-icon { background: #F59E0B; }
.groupon-traffic-light.red .traffic-icon { background: #DC2626; }

.groupon-traffic-light.black {
    background: #DC2626 !important;
    border-color: #DC2626 !important;
    color: #fff !important;
}

.groupon-traffic-light.black .traffic-icon { background: #fff; }

/* Azules sueltos de la página → tinta / acento */
.stats-card h6 {
    border-bottom-color: var(--pf-border-strong) !important;
}

.badge-count.normal {
    background-color: var(--pf-ink) !important;
    color: var(--pf-on-ink) !important;
}

html:not([data-ct-theme="dark"]) .form-check-input:checked {
    background-color: var(--pf-ink) !important;
    border-color: var(--pf-ink) !important;
}

/* ── Menú lateral auto-plegable (solo escritorio) ──
   Plegado ocupa 76px con iconos; al pasar el ratón (o tabular dentro) se despliega
   POR ENCIMA del contenido: el margen negativo compensa el ancho extra y el contenido no se mueve. */
@media (min-width: 992px) {
    .aside.pf-aside-auto {
        --pf-aside-collapsed: 76px;
        --pf-aside-expanded: 265px;
        width: var(--pf-aside-collapsed) !important;
        position: sticky;
        top: 100px;
        align-self: flex-start;
        max-height: calc(100vh - 120px);
        z-index: 96;
        overflow: hidden;
        transition: width 0.18s ease, margin-right 0.18s ease, box-shadow 0.18s ease;
    }

    .aside.pf-aside-auto:hover,
    .aside.pf-aside-auto:focus-within {
        width: var(--pf-aside-expanded) !important;
        margin-right: calc(var(--pf-aside-collapsed) - var(--pf-aside-expanded));
        box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16) !important;
    }

    .aside.pf-aside-auto .aside-menu .menu .menu-item .menu-link,
    .aside.pf-aside-auto .aside-menu .menu .menu-item .menu-content {
        padding-left: 22px;
        padding-right: 16px;
    }

    .aside.pf-aside-auto .menu-link {
        border-radius: 10px;
        margin: 1px 8px;
    }

    .aside.pf-aside-auto .menu-title,
    .aside.pf-aside-auto .menu-arrow,
    .aside.pf-aside-auto .menu-badge,
    .aside.pf-aside-auto .menu-section {
        white-space: nowrap;
        opacity: 0;
        transition: opacity 0.12s ease;
    }

    .aside.pf-aside-auto:hover .menu-title,
    .aside.pf-aside-auto:hover .menu-arrow,
    .aside.pf-aside-auto:hover .menu-badge,
    .aside.pf-aside-auto:hover .menu-section,
    .aside.pf-aside-auto:focus-within .menu-title,
    .aside.pf-aside-auto:focus-within .menu-arrow,
    .aside.pf-aside-auto:focus-within .menu-badge,
    .aside.pf-aside-auto:focus-within .menu-section {
        opacity: 1;
        transition-delay: 0.06s;
    }

    /* Plegado: el título de sección se convierte en una rayita separadora */
    .aside.pf-aside-auto .menu-item > .menu-content {
        position: relative;
    }

    .aside.pf-aside-auto:not(:hover):not(:focus-within) .menu-item > .menu-content::before {
        content: '';
        position: absolute;
        left: 26px;
        right: 26px;
        top: 50%;
        border-top: 1px solid var(--pf-border-strong);
    }

    .aside.pf-aside-auto .menu-item:first-child > .menu-content::before {
        display: none;
    }
    /* Sin barra de scroll: el menú usa toda la altura y, si no cabe, se desplaza
       con la rueda sin mostrar la barra (Metronic le ponía una altura fija). */
    .aside.pf-aside-auto {
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: none;
    }

    .aside.pf-aside-auto::-webkit-scrollbar {
        display: none;
    }

    .aside.pf-aside-auto #kt_aside_menu_wrapper {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        margin-top: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }

    .aside.pf-aside-auto .aside-menu .menu .menu-item .menu-link {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .aside.pf-aside-auto .aside-menu .menu .menu-item .menu-content {
        padding-top: 0.6rem !important;
        padding-bottom: 0.3rem !important;
    }
}

/* Menú lateral: icono y texto con el mismo tono; activo en rojo suave */
.aside .menu .menu-item .menu-link .menu-icon i {
    color: var(--pf-text-muted) !important;
}

.aside .menu .menu-item .menu-link.active .menu-icon i,
.aside .menu .menu-item .menu-link:hover .menu-icon i {
    color: var(--pf-accent) !important;
}

.aside .menu .menu-item .menu-link.active .menu-title {
    font-weight: 700 !important;
}

.aside .menu-section {
    font-size: 0.68rem !important;
    letter-spacing: 0.08em;
}

/* Citas como tarjetas: fondo suave del color del box y borde izquierdo marcado */
.fc .fc-event.cal-ev-card {
    background: color-mix(in srgb, var(--ev-color) 16%, var(--pf-surface)) !important;
    border: 0 !important;
    border-left: 4px solid var(--ev-color) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.fc .fc-event.cal-ev-card,
.fc .fc-event.cal-ev-card .fc-event-main,
.fc .fc-event.cal-ev-card .fc-event-main * {
    color: var(--pf-text) !important;
}

.fc .fc-event.cal-ev-card:hover {
    background: color-mix(in srgb, var(--ev-color) 26%, var(--pf-surface)) !important;
}

.fc .fc-event.cal-ev-card .fa-clipboard-check {
    color: #16A34A !important;
}

/* ── Estados (badges): píldora suave, texto del mismo color ── */
.badge {
    border-radius: 999px !important;
    font-weight: 600 !important;
    padding: 0.35em 0.7em;
}

.badge.badge-success, .badge.bg-success, .badge.badge-light-success {
    background-color: rgba(22, 163, 74, 0.12) !important; color: #15803D !important;
}
.badge.badge-warning, .badge.bg-warning, .badge.badge-light-warning {
    background-color: rgba(245, 158, 11, 0.15) !important; color: #B45309 !important;
}
.badge.badge-danger, .badge.bg-danger, .badge.badge-light-danger {
    background-color: rgba(220, 38, 38, 0.1) !important; color: #B91C1C !important;
}
.badge.badge-info, .badge.bg-info, .badge.badge-light-info {
    background-color: rgba(37, 99, 235, 0.1) !important; color: #1D4ED8 !important;
}
.badge.badge-secondary, .badge.bg-secondary, .badge.badge-light, .badge.bg-light,
.badge.badge-light-secondary, .badge.badge-light-dark {
    background-color: rgba(100, 116, 139, 0.12) !important; color: var(--pf-text-muted) !important;
}
.badge.badge-dark, .badge.bg-dark {
    background-color: var(--pf-ink) !important; color: var(--pf-on-ink) !important;
}

html[data-ct-theme="dark"] .badge.badge-success, html[data-ct-theme="dark"] .badge.bg-success, html[data-ct-theme="dark"] .badge.badge-light-success { color: #4ADE80 !important; }
html[data-ct-theme="dark"] .badge.badge-warning, html[data-ct-theme="dark"] .badge.bg-warning, html[data-ct-theme="dark"] .badge.badge-light-warning { color: #FBBF24 !important; }
html[data-ct-theme="dark"] .badge.badge-danger, html[data-ct-theme="dark"] .badge.bg-danger, html[data-ct-theme="dark"] .badge.badge-light-danger { color: #F87171 !important; }
html[data-ct-theme="dark"] .badge.badge-info, html[data-ct-theme="dark"] .badge.bg-info, html[data-ct-theme="dark"] .badge.badge-light-info { color: #60A5FA !important; }

.btn-dark {
    background: var(--pf-ink) !important;
    border-color: var(--pf-ink) !important;
    color: var(--pf-on-ink) !important;
}

html[data-ct-theme="dark"] .form-check-input:checked {
    background-color: var(--pf-accent) !important;
    border-color: var(--pf-accent) !important;
}