@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root {
    /* Grises */
    --gray-50: #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #e5e5e5;
    --gray-300: #d4d4d4;
    --gray-400: #a3a3a3;
    --gray-500: #737373;
    --gray-600: #525252;
    --gray-700: #404040;
    --gray-800: #262626;
    --gray-900: #171717;
    --gray-950: #0a0a0a;

    /* Colores base */
    --orange: #E66239;
    --red: #FB2C36;
    --green: #00C951;
    --cyan: #00B8DB;
    --yellow: #F0B100;

    /* Colores del sistema */
    --primary: var(--orange);
    --secondary: var(--gray-600);
    --success: var(--green);
    --info: var(--cyan);
    --warning: var(--yellow);
    --danger: var(--red);

    --light: var(--gray-100);
    --border-color: var(--gray-200);
    --border-color-translucent: var(--gray-200);

    /* Tipografía */
    --font-family-base: 'Poppins', sans-serif;
    --font-size-base: 0.875rem;
    --font-size-sm: 0.74375rem;
    --font-size-lg: 1.09375rem;
    --font-xs: 0.75rem;

    --h1-font-size: 2.1875rem;
    --h2-font-size: 1.75rem;
    --h3-font-size: 1.53125rem;
    --h4-font-size: 1.3125rem;
    --h5-font-size: 1.09375rem;
    --h6-font-size: 0.875rem;

    /* Espaciado */
    --spacer: 1rem;
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 2.5rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 5rem;
    --space-10: 6rem;
    --space-11: 8rem;

    /* Inputs / botones */
    --input-btn-padding-y: 0.5rem;
    --input-btn-padding-x: 0.875rem;

    /* Grid */
    --grid-gutter-width: 2.5rem;

    /* Iconos */
    --icon-size-xxs: 1rem;
    --icon-size-xs: 1.5rem;
    --icon-size-sm: 2rem;
    --icon-size-md: 2.5rem;
    --icon-size-lg: 3rem;
    --icon-size-xl: 3.5rem;
    --icon-size-xxl: 4rem;
    --icon-size-xxxl: 7rem;

    /* Avatares */
    --avatar-size-xs: 1.5rem;
    --avatar-size-sm: 2rem;
    --avatar-size-md: 2.5rem;
    --avatar-size-lg: 3.5rem;
    --avatar-size-xl: 5rem;
    --avatar-size-xxl: 7.5rem;

    /* Enlaces */
    --link-color: var(--gray-700);
    --link-hover-color: var(--primary);
}

/* Base global recomendada */
body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    color: var(--gray-700);
    background-color: #f8f9fb;
}

a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

h1 {
    font-size: var(--h1-font-size);
}

h2 {
    font-size: var(--h2-font-size);
}

h3 {
    font-size: var(--h3-font-size);
}

h4 {
    font-size: var(--h4-font-size);
}

h5 {
    font-size: var(--h5-font-size);
}

h6 {
    font-size: var(--h6-font-size);
}

/* Utilidades rápidas de color */
.text-primary {
    color: var(--primary) !important;
}

.text-secondary {
    color: var(--secondary) !important;
}

.text-success {
    color: var(--success) !important;
}

.text-info {
    color: var(--info) !important;
}

.text-warning {
    color: var(--warning) !important;
}

.text-danger {
    color: var(--danger) !important;
}

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

.bg-secondary {
    background-color: var(--secondary) !important;
}

.bg-success {
    background-color: var(--success) !important;
}

.bg-info {
    background-color: var(--info) !important;
}

.bg-warning {
    background-color: var(--warning) !important;
}

.bg-danger {
    background-color: var(--danger) !important;
}

.border-color {
    border-color: var(--border-color) !important;
}
/* =========================
   Avatar
========================= */

.avatar {
    position: relative;
    display: inline-block;
    width: 3rem;
    height: 3rem;
}

/* Avatar sizes */

.avatar-xs {
    width: var(--avatar-size-xs);
    height: var(--avatar-size-xs);
}

.avatar-sm {
    width: var(--avatar-size-sm);
    height: var(--avatar-size-sm);
}

.avatar-md {
    width: var(--avatar-size-md);
    height: var(--avatar-size-md);
}

.avatar-lg {
    width: var(--avatar-size-lg);
    height: var(--avatar-size-lg);
}

.avatar-xl {
    width: var(--avatar-size-xl);
    height: var(--avatar-size-xl);
}

.avatar-xxl {
    width: var(--avatar-size-xxl);
    height: var(--avatar-size-xxl);
}

/* Avatar image */

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Avatar indicators */

.avatar-indicators {
    position: relative;
}

.avatar-indicators::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 5%;
    width: 30%;
    height: 30%;
    border-radius: 50%;
    border: 2px solid #ffffff;
    display: block;
}

.avatar-xxl.avatar-indicators::before {
    bottom: 5px;
    right: 17%;
    width: 16%;
    height: 16%;
}

/* Status indicators */

.avatar-offline::before {
    background-color: var(--gray-400);
}

.avatar-online::before {
    background-color: var(--success);
}

.avatar-away::before {
    background-color: var(--warning);
}

.avatar-busy::before {
    background-color: var(--danger);
}

.avatar-info::before {
    background-color: var(--info);
}

/* Avatar initials */

.avatar-initials {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
    text-transform: uppercase;
    font-weight: 500;
}

/* Color variants */

.avatar-primary .avatar-initials {
    color: #ffffff;
    background-color: var(--primary);
}

.avatar-secondary .avatar-initials {
    color: #ffffff;
    background-color: var(--secondary);
}

.avatar-success .avatar-initials {
    color: #ffffff;
    background-color: var(--success);
}

.avatar-warning .avatar-initials {
    color: #ffffff;
    background-color: var(--warning);
}

.avatar-info .avatar-initials {
    color: #ffffff;
    background-color: var(--info);
}

.avatar-danger .avatar-initials {
    color: #ffffff;
    background-color: var(--danger);
}

.avatar-light .avatar-initials {
    color: #ffffff;
    background-color: var(--light);
}

.avatar-dark .avatar-initials {
    color: #ffffff;
    background-color: var(--gray-900);
}

/* Avatar group */

.avatar-group .avatar+.avatar {
    margin-left: -1.2rem;
}

.avatar-group .avatar:hover {
    z-index: 2;
}

.avatar-group img,
.avatar-group .avatar .avatar-initials {
    border: 2px solid #ffffff;
}
/* =========================
   Border utilities
========================= */

/* Border dashed */

.border-dashed {
    border-style: dashed !important;
}

/* =========================
   Timeline vertical
========================= */

.timeline-vertical {
    position: relative;
}

.timeline-vertical .timeline-item .timeline-bar {
    position: absolute;
    height: 100px;
    left: 5px;
    top: 24px;
}

/* Timeline auto height */

.timeline-vertical-height .timeline-item .timeline-bar {
    height: calc(100% - 1rem) !important;
}

/* =========================
   Vertical divider
========================= */

.vr {
    display: inline-block;
    align-self: stretch;
    width: 1px;
    min-height: 1em;
    background-color: var(--border-color) !important;
    opacity: 0.25;
}
/* =========================
   Button Icon
========================= */

.btn-icon {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    font-size: 0.92969rem;
    font-weight: 400;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
}

/* Extra small */

.btn-icon.btn-xs {
    font-size: 0.75rem;
    width: 1.75rem;
    height: 1.75rem;
}

/* Small */

.btn-icon.btn-sm {
    font-size: 0.875rem;
    width: 2.1875rem;
    height: 2.1875rem;
}

/* Large */

.btn-icon.btn-lg {
    font-size: 1rem;
    width: 3.36875rem;
    height: 3.36875rem;
}
/* =========================
   Icon Shapes
========================= */

.icon-xxs {
    width: var(--icon-size-xxs);
    height: var(--icon-size-xxs);
    line-height: var(--icon-size-xxs);
}

.icon-xs {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    line-height: var(--icon-size-xs);
}

.icon-sm {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    line-height: var(--icon-size-sm);
}

.icon-md {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    line-height: var(--icon-size-md);
}

.icon-lg {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    line-height: var(--icon-size-lg);
}

.icon-xl {
    width: var(--icon-size-xl);
    height: var(--icon-size-xl);
    line-height: var(--icon-size-xl);
}

.icon-xxl {
    width: var(--icon-size-xxl);
    height: var(--icon-size-xxl);
    line-height: var(--icon-size-xxl);
}

.icon-xxxl {
    width: var(--icon-size-xxxl);
    height: var(--icon-size-xxxl);
    line-height: var(--icon-size-xxxl);
}

/* Icon container */

.icon-shape {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    vertical-align: middle;
}
/* =========================
   Overlay
========================= */

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(1px);
    display: none;
    z-index: 1030;
}

.overlay.show {
    display: block;
}


/* =========================
   Sidebar
========================= */

.sidebar {
    width: 240px;
    background: #ffffff;
    transition: width .3s, left .3s;
    border-right: 1px solid var(--gray-200);
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    padding-top: 60px;
    z-index: 1030;
}

/* Sidebar links */

.sidebar .nav-link {
    color: var(--gray-800);
    padding: 8px 10px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    gap: 12px;
    white-space: nowrap;
    margin: 1px 12px;
    border-radius: 8px;
}

.sidebar .nav-link:hover {
    color: var(--primary);
    background-color: rgba(230, 98, 57, 0.095);
}

.sidebar .nav-link.active {
    color: var(--primary);
    background-color: rgba(230, 98, 57, 0.095);
}

.sidebar .nav-link .ti {
    font-size: 18px;
}

.sidebar .nav-text {
    transition: opacity .2s;
}

/* Sidebar logo */

.sidebar .logo-area {
    position: absolute;
    top: 0;
    left: 0;
    height: 60px;
    width: 100%;
    background: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 17px;
    color: var(--gray-800);
    border-bottom: 1px solid var(--gray-200);
}


/* =========================
   Sidebar collapsed
========================= */

.sidebar.collapsed {
    width: 60px;
}

.sidebar.collapsed .nav-link {
    margin: 0;
    background-color: transparent;
    padding: 8px 18px;
}

.sidebar.collapsed .nav-text {
    display: none;
}

.sidebar.collapsed .logo-text {
    display: none;
}


/* =========================
   Topbar
========================= */

.topbar {
    height: 60px;
    margin-left: 240px;
}

.topbar.full {
    margin-left: 60px;
}


/* =========================
   Content
========================= */

.content {
    margin-left: 240px;
}

.content.full {
    margin-left: 60px;
}


/* =========================
   Responsive
========================= */

@media (max-width: 992px) {

    .sidebar {
        left: -240px;
    }

    .sidebar.mobile-show {
        left: 0;
    }

    .topbar {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .content {
        margin-left: 0 !important;
    }

}
/* =========================
   Extra utilities del template
========================= */

/* Espaciados extra usados en el dashboard */
.py-10 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
}

.mt-6 {
    margin-top: 2.5rem !important;
}

.mb-6 {
    margin-bottom: 2.5rem !important;
}

/* Dropdown ancho mediano personalizado */
.dropdown-menu-md {
    min-width: 320px;
}

/* Badge extra pequeño */
.badge-xs {
    font-size: 0.65rem;
    padding: 0.35em 0.5em;
    border-radius: 999px;
}

/* Texto de navegación del sidebar */
.nav-text {
    display: inline-block;
}

/* Ajuste logo del sidebar */
.logo-text img {
    max-height: 28px;
    width: auto;
}

/* Ajuste del contenido principal */
.content .container-fluid {
    max-width: 100%;
}

/* Cards */
.card {
    overflow: hidden;
}

/* Imágenes de productos */
.list-group-item img.rounded {
    object-fit: cover;
}

/* Soporte para badge sutil si tu Bootstrap CDN no lo pinta igual */
.bg-danger-subtle {
    background-color: rgba(251, 44, 54, 0.12) !important;
}

.bg-primary-subtle {
    background-color: rgba(230, 98, 57, 0.12) !important;
}

.bg-success-subtle {
    background-color: rgba(0, 201, 81, 0.12) !important;
}

.bg-warning-subtle {
    background-color: rgba(240, 177, 0, 0.12) !important;
}

.text-danger {
    color: var(--danger) !important;
}

.text-primary {
    color: var(--primary) !important;
}

.text-success {
    color: var(--success) !important;
}

.text-warning {
    color: var(--warning) !important;
}