/* Lucide icons — global (reemplaza Font Awesome)
 * Un solo archivo: cambiar --lucide-* ajusta toda la app.
 */

:root {
    --lucide-stroke: 1.85;
    --lucide-size: 1.15rem;          /* base en contenido */
    --lucide-size-label: 1.1rem;     /* labels de formularios */
    --lucide-size-title: 1.25rem;    /* card-title / headers */
    --lucide-size-h1: 1.5rem;        /* h1 de página */
    --lucide-size-btn: 1.2rem;       /* .btn */
    --lucide-size-btn-sm: 1.15rem;   /* .btn-sm */
    --lucide-size-btn-xs: 1.1rem;    /* .btn-xs */
    --lucide-size-btn-lg: 1.35rem;
    --lucide-gap: 0.4rem;            /* espacio icono → texto */
}

/* ========== Base global ========== */
.lucide,
.lucide-icon,
i[data-lucide],
svg.lucide {
    display: inline-block !important;
    width: var(--lucide-size) !important;
    height: var(--lucide-size) !important;
    min-width: var(--lucide-size) !important;
    max-width: none !important;
    vertical-align: -0.22em;
    stroke-width: var(--lucide-stroke);
    flex-shrink: 0;
    pointer-events: none;
    overflow: visible;
    box-sizing: content-box;
}

/* Utilidades de tamaño explícitas */
.lucide-fw { width: 1.35rem !important; min-width: 1.35rem !important; text-align: center; }
.lucide-xs { width: 1.05rem !important; height: 1.05rem !important; min-width: 1.05rem !important; }
.lucide-sm { width: 1.1rem !important; height: 1.1rem !important; min-width: 1.1rem !important; }
.lucide-lg { width: 1.4rem !important; height: 1.4rem !important; min-width: 1.4rem !important; }
.lucide-2x { width: 2.15rem !important; height: 2.15rem !important; min-width: 2.15rem !important; }
.lucide-3x { width: 3.15rem !important; height: 3.15rem !important; min-width: 3.15rem !important; }
.lucide-4x { width: 4.15rem !important; height: 4.15rem !important; min-width: 4.15rem !important; }
.lucide-5x { width: 5.15rem !important; height: 5.15rem !important; min-width: 5.15rem !important; }

@keyframes lucide-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.lucide-spin,
svg.lucide.lucide-spin {
    animation: lucide-spin 1s linear infinite;
}

/* Espaciado: mr/ml y también pr/pl (muchas vistas usan pr-2 en el icono) */
svg.lucide.mr-1, .lucide.mr-1, i[data-lucide].mr-1,
svg.lucide.pr-1, .lucide.pr-1 { margin-right: 0.25rem !important; padding-right: 0 !important; }
svg.lucide.mr-2, .lucide.mr-2, i[data-lucide].mr-2,
svg.lucide.pr-2, .lucide.pr-2 { margin-right: 0.5rem !important; padding-right: 0 !important; }
svg.lucide.mr-3, .lucide.mr-3, i[data-lucide].mr-3,
svg.lucide.pr-3, .lucide.pr-3 { margin-right: 1rem !important; padding-right: 0 !important; }
svg.lucide.ml-1, .lucide.ml-1,
svg.lucide.pl-1, .lucide.pl-1 { margin-left: 0.25rem !important; padding-left: 0 !important; }
svg.lucide.ml-2, .lucide.ml-2,
svg.lucide.pl-2, .lucide.pl-2 { margin-left: 0.5rem !important; padding-left: 0 !important; }

/* ========== Contenido / vistas ========== */
.content-wrapper svg.lucide,
.content-wrapper .lucide-icon,
.content-wrapper i[data-lucide] {
    width: var(--lucide-size) !important;
    height: var(--lucide-size) !important;
    min-width: var(--lucide-size) !important;
}

.content-header h1 svg.lucide,
.content-header h1 .lucide-icon,
.content-header h2 svg.lucide,
.content-header h2 .lucide-icon,
.content-header h3 svg.lucide,
.content-header h3 .lucide-icon,
.content-header h4 svg.lucide,
.content-header h4 .lucide-icon {
    width: var(--lucide-size-h1) !important;
    height: var(--lucide-size-h1) !important;
    min-width: var(--lucide-size-h1) !important;
    margin-right: var(--lucide-gap) !important;
}

.card-title svg.lucide,
.card-title .lucide-icon,
.card-header svg.lucide,
.card-header .lucide-icon {
    width: var(--lucide-size-title) !important;
    height: var(--lucide-size-title) !important;
    min-width: var(--lucide-size-title) !important;
    margin-right: var(--lucide-gap) !important;
}

label svg.lucide,
label .lucide-icon,
.col-form-label svg.lucide,
.form-group > label svg.lucide {
    width: var(--lucide-size-label) !important;
    height: var(--lucide-size-label) !important;
    min-width: var(--lucide-size-label) !important;
    margin-right: 0.35rem !important;
}

/* ========== Botones (global, incluye sm/xs) ========== */
.btn svg.lucide,
.btn .lucide-icon,
a.btn svg.lucide,
button.btn svg.lucide {
    width: var(--lucide-size-btn) !important;
    height: var(--lucide-size-btn) !important;
    min-width: var(--lucide-size-btn) !important;
    margin-right: var(--lucide-gap) !important;
    vertical-align: -0.2em;
}

.btn-sm svg.lucide,
.btn-sm .lucide-icon,
a.btn-sm svg.lucide,
.btn.btn-sm svg.lucide {
    width: var(--lucide-size-btn-sm) !important;
    height: var(--lucide-size-btn-sm) !important;
    min-width: var(--lucide-size-btn-sm) !important;
    margin-right: var(--lucide-gap) !important;
}

.btn-xs svg.lucide,
.btn-xs .lucide-icon,
a.btn-xs svg.lucide,
.btn.btn-xs svg.lucide {
    width: var(--lucide-size-btn-xs) !important;
    height: var(--lucide-size-btn-xs) !important;
    min-width: var(--lucide-size-btn-xs) !important;
    margin-right: 0.35rem !important;
}

.btn-lg svg.lucide,
.btn-lg .lucide-icon {
    width: var(--lucide-size-btn-lg) !important;
    height: var(--lucide-size-btn-lg) !important;
    min-width: var(--lucide-size-btn-lg) !important;
}

/* Icono solo (sin texto) — sin margen extra */
.btn svg.lucide:only-child,
.btn .lucide-icon:only-child,
.btn-sm svg.lucide:only-child,
.btn-xs svg.lucide:only-child {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.input-group-text svg.lucide {
    width: var(--lucide-size-label) !important;
    height: var(--lucide-size-label) !important;
    min-width: var(--lucide-size-label) !important;
}

.table svg.lucide,
.dropdown-item svg.lucide {
    width: var(--lucide-size) !important;
    height: var(--lucide-size) !important;
    min-width: var(--lucide-size) !important;
}

.alert svg.lucide,
.badge svg.lucide {
    width: var(--lucide-size) !important;
    height: var(--lucide-size) !important;
    min-width: var(--lucide-size) !important;
    margin-right: 0.35rem !important;
}

.info-box svg.lucide,
.small-box svg.lucide,
.kpi-icon svg.lucide {
    width: 1.85rem !important;
    height: 1.85rem !important;
    min-width: 1.85rem !important;
}

/* Iconos dentro de círculos KPI (dashboard, analíticas, cajas, etc.) */
.kpi-icon-wrap svg.lucide,
.kpi-icon-wrap .lucide-icon,
.kpi-icon-wrap i[data-lucide],
.dash-caja-chip svg.lucide,
.dash-caja-chip .lucide-icon {
    width: 1.45rem !important;
    height: 1.45rem !important;
    min-width: 1.45rem !important;
    margin: 0 !important;
}

.main-header .navbar-nav .nav-link > svg.lucide {
    width: 1.35rem !important;
    height: 1.35rem !important;
    min-width: 1.35rem !important;
}

/* ========== Sidebar ========== */
.nav-sidebar .nav-link > svg.lucide-nav-icon,
.nav-sidebar .nav-link > i.lucide-nav-icon,
.nav-sidebar .nav-link > svg.lucide,
.nav-sidebar .nav-link > .nav-icon {
    flex-shrink: 0;
    width: 1.5rem !important;
    height: 1.5rem !important;
    min-width: 1.5rem !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    stroke-width: var(--lucide-stroke);
    color: inherit;
    opacity: 0.92;
    vertical-align: middle;
    text-align: center;
}

.nav-sidebar > .nav-item > .nav-link > svg.lucide,
.nav-sidebar > .nav-item > .nav-link > .nav-icon {
    width: 1.5rem !important;
    height: 1.5rem !important;
    min-width: 1.5rem !important;
}

.nav-sidebar .nav-treeview > .nav-item > .nav-link > svg.lucide,
.nav-sidebar .nav-treeview > .nav-item > .nav-link > .nav-icon {
    width: 1.1rem !important;
    height: 1.1rem !important;
    min-width: 1.1rem !important;
    stroke-width: 1.75;
}

.nav-sidebar .nav-link:hover > svg.lucide,
.nav-sidebar .nav-link.active > svg.lucide {
    opacity: 1;
}

.nav-sidebar .nav-link > .right,
.nav-sidebar .nav-link > p > .right,
.nav-sidebar .nav-link p > svg.lucide.right,
.nav-sidebar .nav-link p > .right {
    position: absolute;
    right: 1rem;
    top: 0.85rem;
    width: 0.9rem !important;
    height: 0.9rem !important;
    min-width: 0.9rem !important;
    margin: 0 !important;
}

.menu-open > .nav-link p > svg.lucide.right,
.menu-open > .nav-link p > .right {
    transform: rotate(-90deg);
}