/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   CASA DIAMANTE 144 ÔÇö Backend Modern UI v1.0
   Fecha: 18 Mar 2026
   Alcance: Admin + User panels (~235 páginas + todos los modales)
   Inspiraci├│n: Monday.com ÔÇö limpio, minimalista, elegante, espacioso
   Inyectar al final de includes_top.php (despu├®s de main.css)
   NO BORRAR MAIN.CSS ÔÇö este archivo extiende y refina los overrides existentes
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */

/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   0. VARIABLES EXTENDIDAS
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */
:root {
    /* Paleta Casa Diamante (heredada) */
    --cd-wine-dark: #3b7ddd;
    --cd-wine-light: #5f9aea;
    --cd-gold: #c5a55a;
    --cd-gold-light: #d4bc7c;
    --cd-cream: #fdf8f0;
    --cd-cream-dark: #f5efe3;
    --cd-text: #3a2a2a;
    --cd-text-light: #6b5b5b;

    /* Oxford gray para sidebar */
    --cd-oxford: #374151;
    --cd-oxford-light: #6b7280;
    --cd-oxford-muted: #9ca3af;

    /* Nuevas variables UI modernas */
    --cd-bg: #ffffff;
    --cd-surface: #ffffff;
    --cd-border: #e5e7eb;
    --cd-border-light: #f3f4f6;
    --cd-shadow-sm: 0 1px 2px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.04);
    --cd-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.06);
    --cd-shadow-lg: 0 10px 25px -3px rgba(0,0,0,0.1), 0 4px 10px -4px rgba(0,0,0,0.06);
    --cd-shadow-hover: 0 20px 40px -4px rgba(0,0,0,0.12), 0 8px 16px -4px rgba(0,0,0,0.08);
    --cd-shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --cd-shadow-card-hover: 0 14px 35px -5px rgba(90,26,50,0.12), 0 6px 12px -2px rgba(0,0,0,0.08);
    --cd-radius-sm: 8px;
    --cd-radius: 12px;
    --cd-radius-lg: 16px;
    --cd-radius-xl: 24px;
    --cd-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --cd-transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    --cd-font: 'Inter', 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Status colors (suaves, modernos) */
    --cd-success: #1a8a6a;
    --cd-success-bg: #e8f5f0;
    --cd-warning: #d4a017;
    --cd-warning-bg: #fef9e7;
    --cd-danger: #c0392b;
    --cd-danger-bg: #fdecea;
    --cd-info: #2c7be5;
    --cd-info-bg: #e8f0fd;
}


/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   1. GLOBAL ÔÇö FONDO, TIPOGRAF├ìA
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */
body {
    background-color: #ffffff !important;
    color: var(--cd-text) !important;
    font-family: var(--cd-font) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}
.content-page {
    background-color: #ffffff !important;
    position: relative !important;
    z-index: 1 !important;
}
.content {
    padding: 28px 32px !important;
    background-color: #ffffff !important;
}
@media (max-width: 767px) {
    .content { padding: 16px !important; }
}

/* Headings premium */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600 !important;
    color: var(--cd-text) !important;
    letter-spacing: -0.02em !important;
}
.page-title {
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: var(--cd-wine-dark) !important;
    letter-spacing: -0.03em !important;
}
.header-title {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: var(--cd-text) !important;
    letter-spacing: -0.02em !important;
}


/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   2. TOPBAR ÔÇö Moderno y limpio
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */
.navbar-custom {
    background: #e8f0fe !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04) !important;
    border-bottom: 1px solid #d0ddf0 !important;
    min-height: 64px !important;
    backdrop-filter: saturate(180%) !important;
    position: relative !important;
    z-index: 1030 !important;
}
.navbar-custom .topnav-menu .nav-link {
    color: #3a4a5c !important;
    transition: color var(--cd-transition) !important;
}
.navbar-custom .topnav-menu .nav-link:hover {
    color: #1a2a3c !important;
}
/* Logo en topbar */
.topnav-logo {
    background: transparent !important;
    height: 64px !important;
}
.topnav-logo-lg img,
.topnav-logo-sm img {
    max-height: 40px !important;
    width: auto !important;
}
/* Bot├│n hamburger */
.button-menu-mobile .lines span {
    background-color: #3a4a5c !important;
    transition: var(--cd-transition) !important;
}
.button-menu-mobile:hover .lines span {
    background-color: #1a2a3c !important;
}
/* Visit website button */
.visit_website .btn-outline-light {
    border-radius: var(--cd-radius-sm) !important;
    font-size: 0.8rem !important;
    padding: 6px 16px !important;
    transition: all var(--cd-transition) !important;
}
.visit_website h4 {
    font-weight: 500 !important;
    font-size: 1.05rem !important;
    letter-spacing: 0 !important;
    color: #3a4a5c !important;
}
/* Topbar dropdowns */
.topbar-dropdown-menu {
    border-radius: var(--cd-radius) !important;
    border: 1px solid var(--cd-border) !important;
    box-shadow: var(--cd-shadow-lg) !important;
    padding: 8px !important;
    margin-top: 8px !important;
    z-index: 1035 !important;
}
.topbar-dropdown-menu .dropdown-item {
    border-radius: var(--cd-radius-sm) !important;
    padding: 8px 14px !important;
    font-size: 0.875rem !important;
    transition: background var(--cd-transition) !important;
}
/* Notification icon */
.noti-icon-badge {
    background: var(--cd-gold) !important;
}
/* Topbar icons/text dark on light bg */
.navbar-custom .noti-icon,
.navbar-custom .nav-link,
.navbar-custom .topbar-right-menu .nav-link,
.navbar-custom .topbar-right-menu .nav-link i {
    color: #3a4a5c !important;
}
.navbar-custom .nav-user {
    background-color: rgba(59,125,221,0.06) !important;
    border-color: #d0ddf0 !important;
}
.navbar-custom .nav-user .account-user-name,
.navbar-custom .nav-user .account-position {
    color: #3a4a5c !important;
}


/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   3. SIDEBAR ÔÇö Elegante y espacioso
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */
.left-side-menu {
    background: #ffffff !important;
    box-shadow: 1px 0 0 var(--cd-border) !important;
    border-right: none !important;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}
/* User card en sidebar */
.leftbar-user {
    padding: 24px 20px !important;
    border-bottom: 1px solid var(--cd-border-light) !important;
    background: transparent !important;
}
.leftbar-user img {
    border: 2px solid var(--cd-border) !important;
    width: 48px !important;
    height: 48px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    transition: border-color var(--cd-transition) !important;
}
.leftbar-user img:hover {
    border-color: var(--cd-wine-light) !important;
}
.leftbar-user-name {
    color: var(--cd-oxford) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
}
.leftbar-user .text-muted {
    color: var(--cd-oxford-light) !important;
    font-size: 0.78rem !important;
}
/* Navigation items — HIGH SPECIFICITY to override main.css */
.left-side-menu .side-nav .side-nav-title {
    color: var(--cd-oxford-muted) !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    padding: 24px 20px 8px !important;
    margin: 0 !important;
}
.left-side-menu .side-nav .side-nav-link {
    color: #374151 !important;
    padding: 10px 16px !important;
    font-size: 0.855rem !important;
    font-weight: 450 !important;
    transition: all var(--cd-transition) !important;
    border-radius: var(--cd-radius-sm) !important;
    margin: 2px 10px !important;
    position: relative !important;
    background: transparent !important;
}
.left-side-menu .side-nav .side-nav-link span {
    color: #374151 !important;
}
.left-side-menu .side-nav .side-nav-link i {
    font-size: 1.15rem !important;
    width: 28px !important;
    vertical-align: middle !important;
    color: #6b7280 !important;
    opacity: 1 !important;
    transition: all var(--cd-transition) !important;
}
.left-side-menu .side-nav .side-nav-link:hover,
.left-side-menu .side-nav .side-nav-link:focus {
    color: #3b7ddd !important;
    background: rgba(90,26,50,0.04) !important;
}
.left-side-menu .side-nav .side-nav-link:hover span {
    color: #3b7ddd !important;
}
.left-side-menu .side-nav .side-nav-link:hover i {
    color: #3b7ddd !important;
    transform: scale(1.05) !important;
}
.left-side-menu .side-nav .side-nav-link.active,
.left-side-menu .side-nav .menuitem-active > a,
.left-side-menu .side-nav .mm-active > a {
    color: #3b7ddd !important;
    background: rgba(90,26,50,0.06) !important;
    font-weight: 600 !important;
    border-left: 3px solid #3b7ddd !important;
}
.left-side-menu .side-nav .side-nav-link.active span,
.left-side-menu .side-nav .menuitem-active > a span,
.left-side-menu .side-nav .mm-active > a span {
    color: #3b7ddd !important;
}
.left-side-menu .side-nav .side-nav-link.active i,
.left-side-menu .side-nav .menuitem-active > a i,
.left-side-menu .side-nav .mm-active > a i {
    color: #3b7ddd !important;
}
/* Sub-menu items — HIGH SPECIFICITY */
.left-side-menu .side-nav-second-level,
.left-side-menu .side-nav-third-level {
    padding-left: 8px !important;
}
.left-side-menu .side-nav-second-level li a,
.left-side-menu .side-nav-third-level li a {
    color: #6b7280 !important;
    font-size: 0.82rem !important;
    padding: 7px 16px 7px 44px !important;
    transition: all var(--cd-transition) !important;
    display: block !important;
    border-radius: var(--cd-radius-sm) !important;
    margin: 1px 10px !important;
    background: transparent !important;
}
.left-side-menu .side-nav-second-level li a:hover,
.left-side-menu .side-nav-third-level li a:hover {
    color: #3b7ddd !important;
    background: rgba(90,26,50,0.04) !important;
}
.left-side-menu .side-nav-second-level li.active > a,
.left-side-menu .side-nav-third-level li.active > a,
.left-side-menu .side-nav-second-level li.mm-active > a,
.left-side-menu .side-nav-third-level li.mm-active > a {
    color: #3b7ddd !important;
    font-weight: 600 !important;
}
/* Menu arrow */
.left-side-menu .side-nav .menu-arrow {
    transition: transform var(--cd-transition) !important;
    color: #9ca3af !important;
}
/* Sidebar text - ensure full visibility */
.left-side-menu .side-nav .side-nav-link {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.4 !important;
}
.left-side-menu .side-nav .side-nav-link span {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    display: inline !important;
}
.left-side-menu .side-nav .side-nav-item {
    overflow: visible !important;
}
.left-side-menu .side-nav .side-nav-title {
    white-space: normal !important;
    overflow: visible !important;
}
/* Scrollbar sidebar */
.left-side-menu::-webkit-scrollbar {
    width: 4px !important;
}
.left-side-menu::-webkit-scrollbar-track {
    background: transparent !important;
}
.left-side-menu::-webkit-scrollbar-thumb {
    background: #d1d5db !important;
    border-radius: 2px !important;
}
.left-side-menu::-webkit-scrollbar-thumb:hover {
    background: #9ca3af !important;
}
/* Social icons in sidebar */
.left-side-menu .btn-outline-primary,
.left-side-menu .btn-outline-success {
    border-color: var(--cd-border) !important;
    color: var(--cd-oxford) !important;
    border-radius: 50% !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all var(--cd-transition) !important;
}
.left-side-menu .btn-outline-primary:hover {
    background: var(--cd-wine-dark) !important;
    border-color: var(--cd-wine-dark) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(90,26,50,0.2) !important;
}
.left-side-menu .btn-outline-success:hover {
    background: #25D366 !important;
    border-color: #25D366 !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(37,211,102,0.3) !important;
}
.left-side-menu .btn-outline-primary .fab,
.left-side-menu .btn-outline-success .fab {
    color: inherit !important;
    font-size: 0.9rem !important;
}


/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   4. CARDS ÔÇö Modernas, limpias, aireadas
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */
/* Card entrance animation */
@keyframes cdCardIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
.card {
    background: var(--cd-surface) !important;
    border: 1px solid var(--cd-border-light) !important;
    border-radius: var(--cd-radius) !important;
    box-shadow: var(--cd-shadow-card) !important;
    transition: box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.35s ease !important;
    margin-bottom: 24px !important;
    overflow: hidden !important;
    animation: cdCardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}
/* Staggered entrance for cards in rows */
.row > [class*="col"]:nth-child(1) > .card { animation-delay: 0s !important; }
.row > [class*="col"]:nth-child(2) > .card { animation-delay: 0.06s !important; }
.row > [class*="col"]:nth-child(3) > .card { animation-delay: 0.12s !important; }
.row > [class*="col"]:nth-child(4) > .card { animation-delay: 0.18s !important; }
.row > [class*="col"]:nth-child(5) > .card { animation-delay: 0.24s !important; }
.row > [class*="col"]:nth-child(6) > .card { animation-delay: 0.30s !important; }
.card:hover {
    box-shadow: var(--cd-shadow-card-hover) !important;
    transform: translateY(-4px) !important;
    border-color: rgba(90,26,50,0.12) !important;
}
.card-body {
    padding: 24px !important;
}
.card-header {
    background: var(--cd-surface) !important;
    border-bottom: 1px solid var(--cd-border-light) !important;
    padding: 18px 24px !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    letter-spacing: -0.01em !important;
}
.card-footer {
    background: var(--cd-surface) !important;
    border-top: 1px solid var(--cd-border-light) !important;
    padding: 16px 24px !important;
}
/* Dashboard stat widgets */
.widget-inline .card {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    animation: none !important;
}
.widget-inline {
    border-radius: var(--cd-radius) !important;
    overflow: hidden !important;
    animation: cdCardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}
.widget-inline .card-body {
    padding: 24px 20px !important;
    transition: all var(--cd-transition) !important;
    position: relative !important;
}
.widget-inline .card-body::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) scaleX(0) !important;
    width: 40px !important;
    height: 3px !important;
    background: var(--cd-wine-dark) !important;
    border-radius: 3px !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.widget-inline .card-body:hover::after {
    transform: translateX(-50%) scaleX(1) !important;
}
.widget-inline .card-body:hover {
    background: rgba(90,26,50,0.02) !important;
}
.widget-inline .card-body h3 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: var(--cd-wine-dark) !important;
    margin-bottom: 4px !important;
    letter-spacing: -0.03em !important;
}
.widget-inline .card-body .text-muted {
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--cd-oxford-light) !important;
}
.widget-inline .border-left {
    border-left: 1px solid var(--cd-border-light) !important;
}
/* Card icon section */
.card-body .page-title,
.card-body > h4:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.card-body .page-title .title_icon,
.card-body > h4:first-child > i:first-child {
    color: var(--cd-wine-light) !important;
    font-size: 1.25rem !important;
}


/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   5. BOTONES ÔÇö Modernos y consistentes
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */
.btn {
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    border-radius: var(--cd-radius-sm) !important;
    padding: 9px 20px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    letter-spacing: 0.01em !important;
    border-width: 1.5px !important;
    line-height: 1.5 !important;
    position: relative !important;
    overflow: hidden !important;
}
.btn:focus {
    box-shadow: none !important;
}
.btn::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 100%) !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: opacity 0.2s !important;
}
.btn:hover::after {
    opacity: 1 !important;
}
.btn-sm {
    padding: 5px 12px !important;
    font-size: 0.8rem !important;
    border-radius: 6px !important;
}
.btn-lg {
    padding: 12px 28px !important;
    font-size: 1rem !important;
    border-radius: var(--cd-radius) !important;
}
/* Primary */
.btn-primary {
    background: var(--cd-wine-dark) !important;
    border-color: var(--cd-wine-dark) !important;
    color: #fff !important;
}
.btn-primary:hover {
    background: var(--cd-wine-light) !important;
    border-color: var(--cd-wine-light) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(90,26,50,0.2) !important;
}
.btn-primary:active {
    transform: translateY(0) !important;
    background: #4a1528 !important;
}
/* Outline Primary */
.btn-outline-primary {
    color: var(--cd-wine-dark) !important;
    border-color: var(--cd-wine-dark) !important;
    background: transparent !important;
}
.btn-outline-primary:hover {
    background: var(--cd-wine-dark) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}
/* Success */
.btn-success {
    background: var(--cd-success) !important;
    border-color: var(--cd-success) !important;
}
.btn-success:hover {
    background: #158c6b !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(26,138,106,0.2) !important;
}
/* Danger */
.btn-danger {
    background: var(--cd-danger) !important;
    border-color: var(--cd-danger) !important;
}
.btn-danger:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(192,57,43,0.2) !important;
}
/* Warning */
.btn-warning {
    background: var(--cd-warning) !important;
    border-color: var(--cd-warning) !important;
    color: #fff !important;
}
/* Info */
.btn-info {
    background: var(--cd-info) !important;
    border-color: var(--cd-info) !important;
    color: #fff !important;
}
/* Secondary / Light */
.btn-secondary,
.btn-light {
    background: #f0ebe4 !important;
    border-color: var(--cd-border) !important;
    color: var(--cd-text) !important;
}
.btn-secondary:hover,
.btn-light:hover {
    background: var(--cd-cream-dark) !important;
    color: var(--cd-text) !important;
    transform: translateY(-1px) !important;
}
/* Bot\u00f3n FAB flotante */
.float {
    background: linear-gradient(135deg, var(--cd-wine-dark), var(--cd-wine-light)) !important;
    border-color: var(--cd-wine-dark) !important;
    border-radius: var(--cd-radius-sm) !important;
    box-shadow: var(--cd-shadow-md) !important;
    transition: all var(--cd-transition) !important;
}
.float:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--cd-shadow-lg) !important;
}
/* Icon-only buttons (action icons en tablas) */
.action-icon {
    color: var(--cd-text-light) !important;
    font-size: 1.15rem !important;
    padding: 4px !important;
    border-radius: 6px !important;
    transition: all var(--cd-transition) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
}
.action-icon:hover {
    background: var(--cd-cream) !important;
    color: var(--cd-wine-dark) !important;
}


/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   6. TABLAS ÔÇö Limpias y modernas
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */
.table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
.table thead th {
    background: var(--cd-cream) !important;
    color: var(--cd-text) !important;
    font-weight: 600 !important;
    font-size: 0.78rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 16px !important;
    border-bottom: 2px solid var(--cd-border) !important;
    border-top: none !important;
    white-space: nowrap !important;
}
.table tbody td {
    padding: 12px 16px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid var(--cd-border-light) !important;
    border-top: none !important;
    font-size: 0.875rem !important;
    color: var(--cd-text) !important;
    transition: background var(--cd-transition) !important;
}
.table tbody tr:hover td {
    background: rgba(253,248,240,0.6) !important;
}
.table tbody tr:last-child td {
    border-bottom: none !important;
}
/* DataTables specifics */
.dataTables_wrapper {
    padding: 0 !important;
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1.5px solid var(--cd-border) !important;
    border-radius: var(--cd-radius-sm) !important;
    padding: 6px 12px !important;
    font-size: 0.85rem !important;
    transition: border-color var(--cd-transition), box-shadow var(--cd-transition) !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--cd-gold) !important;
    box-shadow: 0 0 0 3px rgba(197,165,90,0.1) !important;
    outline: none !important;
}
.dataTables_wrapper .dataTables_info {
    font-size: 0.82rem !important;
    color: var(--cd-text-light) !important;
    padding-top: 16px !important;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 16px !important;
}
table.dataTable tbody tr.selected {
    background-color: rgba(197,165,90,0.08) !important;
}


/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   7. FORMULARIOS ÔÇö Grandes, respirados
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */
.form-control {
    border: 1.5px solid var(--cd-border) !important;
    border-radius: var(--cd-radius-sm) !important;
    padding: 10px 14px !important;
    font-size: 0.875rem !important;
    color: var(--cd-text) !important;
    background: var(--cd-surface) !important;
    transition: border-color var(--cd-transition), box-shadow var(--cd-transition) !important;
    height: auto !important;
}
.form-control:focus {
    border-color: var(--cd-gold) !important;
    box-shadow: 0 0 0 3px rgba(197,165,90,0.12) !important;
    background: var(--cd-surface) !important;
}
.form-control::placeholder {
    color: #b3a89a !important;
    font-weight: 400 !important;
}
.form-control:disabled,
.form-control[readonly] {
    background-color: var(--cd-cream) !important;
    opacity: 0.8 !important;
}
/* Labels */
label,
.form-label,
.col-form-label {
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    color: var(--cd-text) !important;
    margin-bottom: 6px !important;
}
/* Select */
.custom-select,
select.form-control {
    border: 1.5px solid var(--cd-border) !important;
    border-radius: var(--cd-radius-sm) !important;
    padding: 10px 14px !important;
    background-color: var(--cd-surface) !important;
    appearance: auto !important;
}
.custom-select:focus,
select.form-control:focus {
    border-color: var(--cd-gold) !important;
    box-shadow: 0 0 0 3px rgba(197,165,90,0.12) !important;
}
/* Checkbox and radio */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--cd-wine-dark) !important;
    border-color: var(--cd-wine-dark) !important;
}
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px rgba(90,26,50,0.15) !important;
}
/* Form groups spacing */
.form-group {
    margin-bottom: 20px !important;
}
/* Required asterisk */
.required {
    color: var(--cd-danger) !important;
}
/* Input groups */
.input-group-text {
    background: var(--cd-cream) !important;
    border: 1.5px solid var(--cd-border) !important;
    border-radius: var(--cd-radius-sm) !important;
    color: var(--cd-text-light) !important;
    font-size: 0.85rem !important;
}
/* Tags input */
.bootstrap-tagsinput {
    border: 1.5px solid var(--cd-border) !important;
    border-radius: var(--cd-radius-sm) !important;
    padding: 6px 10px !important;
    box-shadow: none !important;
    min-height: 42px !important;
}
.bootstrap-tagsinput .tag {
    background-color: var(--cd-wine-light) !important;
    border-radius: 6px !important;
    padding: 2px 8px !important;
    font-size: 0.8rem !important;
    color: #fff !important;
}
/* Summernote editor */
.note-editor.note-frame {
    border: 1.5px solid var(--cd-border) !important;
    border-radius: var(--cd-radius-sm) !important;
    overflow: hidden !important;
}
.note-editor .note-toolbar {
    background: var(--cd-cream) !important;
    border-bottom: 1px solid var(--cd-border) !important;
}
/* Dropzone */
.dropzone {
    border: 2px dashed var(--cd-border) !important;
    border-radius: var(--cd-radius) !important;
    background: var(--cd-cream) !important;
    transition: border-color var(--cd-transition) !important;
    min-height: 120px !important;
}
.dropzone:hover,
.dropzone.dz-drag-hover {
    border-color: var(--cd-gold) !important;
    background: rgba(197,165,90,0.05) !important;
}


/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   8. MODALES ÔÇö Totalmente renovados
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */
.modal-content {
    border: none !important;
    border-radius: var(--cd-radius-lg) !important;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25) !important;
    overflow: hidden !important;
    animation: cdModalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
@keyframes cdModalIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-header {
    background: linear-gradient(135deg, var(--cd-wine-dark) 0%, #5f9aea 100%) !important;
    border-bottom: none !important;
    padding: 20px 24px !important;
    color: #fff !important;
}
.modal-header .modal-title,
.modal-header h4,
.modal-header h5 {
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 1.05rem !important;
}
.modal-header .close,
.modal-header .btn-close,
.modal-header button[data-dismiss="modal"],
.modal-header button[data-bs-dismiss="modal"] {
    color: #fff !important;
    opacity: 0.7 !important;
    text-shadow: none !important;
    font-size: 1.25rem !important;
    transition: opacity var(--cd-transition) !important;
    filter: brightness(0) invert(1) !important;
}
.modal-header .close:hover,
.modal-header .btn-close:hover,
.modal-header button[data-dismiss="modal"]:hover,
.modal-header button[data-bs-dismiss="modal"]:hover {
    opacity: 1 !important;
}
.modal-body {
    padding: 24px !important;
    background: var(--cd-surface) !important;
}
.modal-footer {
    padding: 16px 24px !important;
    border-top: 1px solid var(--cd-border-light) !important;
    background: var(--cd-surface) !important;
}
/* Right-side modal */
.modal-right,
.modal-dialog.modal-right {
    border-radius: var(--cd-radius-lg) 0 0 var(--cd-radius-lg) !important;
}
.modal-right .modal-content {
    border-radius: var(--cd-radius-lg) 0 0 var(--cd-radius-lg) !important;
}
/* Modal backdrop */
.modal-backdrop.show {
    background-color: rgba(30,15,20,0.5) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
}
/* SweetAlert tambi├®n */
.swal2-popup {
    border-radius: var(--cd-radius-lg) !important;
    font-family: var(--cd-font) !important;
}
.swal2-confirm.swal2-styled {
    background-color: var(--cd-wine-dark) !important;
    border-radius: var(--cd-radius-sm) !important;
}
.swal2-cancel.swal2-styled {
    border-radius: var(--cd-radius-sm) !important;
}


/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   9. TABS / PILLS ÔÇö Limpios
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */
.nav-pills .nav-link {
    border-radius: var(--cd-radius-sm) !important;
    color: var(--cd-text-light) !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    padding: 8px 16px !important;
    transition: all var(--cd-transition) !important;
}
.nav-pills .nav-link:hover {
    background: var(--cd-cream) !important;
    color: var(--cd-wine-dark) !important;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: var(--cd-wine-dark) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(90,26,50,0.2) !important;
}
/* Nav tabs (underline style) */
.nav-tabs {
    border-bottom: 2px solid var(--cd-border-light) !important;
}
.nav-tabs .nav-link {
    border: none !important;
    border-bottom: 2px solid transparent !important;
    color: var(--cd-text-light) !important;
    font-weight: 500 !important;
    padding: 10px 16px !important;
    margin-bottom: -2px !important;
    transition: all var(--cd-transition) !important;
    border-radius: 0 !important;
}
.nav-tabs .nav-link:hover {
    border-bottom-color: var(--cd-gold-light) !important;
    color: var(--cd-wine-dark) !important;
    background: transparent !important;
}
.nav-tabs .nav-link.active {
    border-bottom-color: var(--cd-wine-dark) !important;
    color: var(--cd-wine-dark) !important;
    font-weight: 600 !important;
    background: transparent !important;
}
/* Scrollable tabs */
.scrollable-tab {
    border-radius: var(--cd-radius-sm) !important;
    background: var(--cd-surface) !important;
}
.scrollable-tab-btn-left,
.scrollable-tab-btn-right {
    background: var(--cd-surface) !important;
    border: 1.5px solid var(--cd-border) !important;
    color: var(--cd-text-light) !important;
    box-shadow: var(--cd-shadow-sm) !important;
    transition: all var(--cd-transition) !important;
}
.scrollable-tab-btn-left:hover,
.scrollable-tab-btn-right:hover {
    border-color: var(--cd-wine-dark) !important;
    color: var(--cd-wine-dark) !important;
}
/* Form wizard headers */
.nav.form-wizard-header .nav-link {
    border-radius: 0 !important;
}
.nav.form-wizard-header .nav-link.active {
    background: var(--cd-wine-dark) !important;
    color: #fff !important;
}


/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   10. BADGES ÔÇö Modernos y suaves
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */
.badge {
    font-weight: 500 !important;
    font-size: 0.75rem !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    letter-spacing: 0.3px !important;
}
.badge-primary,
.badge.bg-primary {
    background-color: var(--cd-wine-dark) !important;
    color: #fff !important;
}
.badge-success,
.badge.bg-success {
    background-color: var(--cd-success-bg) !important;
    color: var(--cd-success) !important;
}
.badge-warning,
.badge.bg-warning {
    background-color: var(--cd-warning-bg) !important;
    color: var(--cd-warning) !important;
}
.badge-danger,
.badge.bg-danger {
    background-color: var(--cd-danger-bg) !important;
    color: var(--cd-danger) !important;
}
.badge-info,
.badge.bg-info {
    background-color: var(--cd-info-bg) !important;
    color: var(--cd-info) !important;
}
.badge-secondary,
.badge.bg-secondary {
    background-color: var(--cd-cream-dark) !important;
    color: var(--cd-text-light) !important;
}


/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   11. ALERTS ÔÇö Suaves y modernos
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */
.alert {
    border-radius: var(--cd-radius) !important;
    border: none !important;
    padding: 16px 20px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}
.alert-success {
    background-color: var(--cd-success-bg) !important;
    color: var(--cd-success) !important;
    border-left: 4px solid var(--cd-success) !important;
}
.alert-danger {
    background-color: var(--cd-danger-bg) !important;
    color: var(--cd-danger) !important;
    border-left: 4px solid var(--cd-danger) !important;
}
.alert-warning {
    background-color: var(--cd-warning-bg) !important;
    color: var(--cd-warning) !important;
    border-left: 4px solid var(--cd-warning) !important;
}
.alert-info {
    background-color: var(--cd-info-bg) !important;
    color: var(--cd-info) !important;
    border-left: 4px solid var(--cd-info) !important;
}
.alert-primary {
    background-color: rgba(90,26,50,0.08) !important;
    color: var(--cd-wine-dark) !important;
    border-left: 4px solid var(--cd-wine-dark) !important;
}


/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   12. PAGINATION ÔÇö Moderna
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */
.pagination {
    gap: 4px !important;
}
.page-item .page-link {
    border: 1.5px solid var(--cd-border) !important;
    border-radius: var(--cd-radius-sm) !important;
    color: var(--cd-text) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    padding: 6px 12px !important;
    transition: all var(--cd-transition) !important;
    min-width: 36px !important;
    text-align: center !important;
}
.page-item .page-link:hover {
    background: var(--cd-cream) !important;
    color: var(--cd-wine-dark) !important;
    border-color: var(--cd-wine-dark) !important;
    transform: translateY(-1px) !important;
}
.page-item.active .page-link {
    background: var(--cd-wine-dark) !important;
    border-color: var(--cd-wine-dark) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(90,26,50,0.2) !important;
}
.page-item.disabled .page-link {
    background: var(--cd-cream) !important;
    color: #c0b8ad !important;
    border-color: var(--cd-border-light) !important;
}


/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   13. BREADCRUMBS / PAGE TITLE
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */
.page-title-box {
    padding: 16px 0 !important;
    margin-bottom: 8px !important;
}
.page-title-box .page-title {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: var(--cd-wine-dark) !important;
}
.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.82rem !important;
}
.breadcrumb-item a {
    color: var(--cd-wine-light) !important;
    text-decoration: none !important;
    transition: color var(--cd-transition) !important;
}
.breadcrumb-item a:hover {
    color: var(--cd-wine-dark) !important;
}
.breadcrumb-item.active {
    color: var(--cd-gold) !important;
}
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--cd-text-light) !important;
}


/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   14. DROPDOWNS ÔÇö Limpios
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */
.dropdown-menu {
    border: 1px solid var(--cd-border-light) !important;
    border-radius: var(--cd-radius) !important;
    box-shadow: var(--cd-shadow-lg) !important;
    padding: 6px !important;
    animation: cdDropIn 0.15s ease-out !important;
}
@keyframes cdDropIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.dropdown-item {
    font-size: 0.875rem !important;
    padding: 8px 14px !important;
    border-radius: var(--cd-radius-sm) !important;
    color: var(--cd-text) !important;
    transition: background var(--cd-transition) !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--cd-cream) !important;
    color: var(--cd-wine-dark) !important;
}
.dropdown-item.active,
.dropdown-item:active {
    background: var(--cd-wine-dark) !important;
    color: #fff !important;
}
.dropdown-item i {
    width: 20px !important;
    text-align: center !important;
    margin-right: 8px !important;
    color: var(--cd-text-light) !important;
}
.dropdown-item:hover i {
    color: var(--cd-wine-dark) !important;
}
.dropdown-divider {
    border-color: var(--cd-border-light) !important;
    margin: 4px 0 !important;
}


/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   15. PROGRESS BARS
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */
.progress {
    height: 6px !important;
    border-radius: 3px !important;
    background: var(--cd-border-light) !important;
    overflow: hidden !important;
}
.progress-bar {
    background: linear-gradient(90deg, var(--cd-wine-dark), var(--cd-wine-light)) !important;
    border-radius: 3px !important;
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1) !important;
    position: relative !important;
}
.progress-bar::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important;
    animation: cdShimmer 2s infinite !important;
}
@keyframes cdShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}


/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   16. SCROLLBARS GLOBALES
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #d0c7bb;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #b5a99a;
}
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #d0c7bb transparent;
}


/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   17. TOOLTIPS
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */
.tooltip-inner {
    background-color: var(--cd-wine-dark) !important;
    border-radius: 6px !important;
    font-size: 0.78rem !important;
    padding: 6px 12px !important;
    font-weight: 500 !important;
}
.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
    border-top-color: var(--cd-wine-dark) !important;
}
.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
    border-bottom-color: var(--cd-wine-dark) !important;
}


/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   18. CHARTS CONTAINERS
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */
.chartjs-chart {
    padding: 8px 0 !important;
}


/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   19. IMAGES & AVATARS
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */
.rounded-circle {
    border: 2px solid var(--cd-border-light) !important;
    transition: border-color var(--cd-transition) !important;
}
.rounded-circle:hover {
    border-color: var(--cd-gold-light) !important;
}
/* Thumbnails / image previews */
.js--image-preview {
    border-radius: var(--cd-radius) !important;
}
.box {
    border-radius: var(--cd-radius) !important;
    box-shadow: var(--cd-shadow-sm) !important;
    border: 1px solid var(--cd-border-light) !important;
}


/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   20. UTILITY OVERRIDES
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */
/* Text muted softer */
.text-muted {
    color: var(--cd-oxford-light) !important;
}
/* Background primary */
.bg-primary {
    background-color: var(--cd-wine-dark) !important;
}
.bg-success { background-color: var(--cd-success) !important; }
.bg-warning { background-color: var(--cd-warning) !important; }
.bg-danger { background-color: var(--cd-danger) !important; }
.bg-info { background-color: var(--cd-info) !important; }
/* Link colors */
a {
    color: var(--cd-wine-light) !important;
    text-decoration: none !important;
    transition: color var(--cd-transition) !important;
}
a:hover {
    color: var(--cd-wine-dark) !important;
    text-decoration: none !important;
}
/* Selection */
::selection {
    background: rgba(90,26,50,0.15) !important;
    color: var(--cd-wine-dark) !important;
}


/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   21. QR CODE & REFERRAL WIDGETS
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */
.left-side-menu .bg-light {
    background: var(--cd-border-light) !important;
    border-radius: var(--cd-radius-sm) !important;
    border: 1px solid var(--cd-border) !important;
}
.left-side-menu .bg-light .text-muted {
    color: var(--cd-oxford-light) !important;
}
.left-side-menu .bg-light strong {
    color: var(--cd-oxford) !important;
}


/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   22. DASHBOARD-SPECIFIC WIDGETS
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */
/* Revenue / stats icons */
.card-body [style*="font-size: 24px"] {
    color: var(--cd-wine-light) !important;
}
/* Chart legends */
.chart-legend-item {
    font-size: 0.82rem !important;
}


/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   23. CRM BOARD (Kanban)
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */
.card .card {
    /* Nested cards in kanban columns */
    border: 1px solid var(--cd-border-light) !important;
    border-radius: var(--cd-radius-sm) !important;
    transition: transform var(--cd-transition), box-shadow var(--cd-transition) !important;
}
.card .card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--cd-shadow-hover) !important;
}


/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   24. CALENDAR (FullCalendar)
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */
.fc .fc-toolbar-title {
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    color: var(--cd-text) !important;
}
.fc .fc-button-primary {
    background: var(--cd-wine-dark) !important;
    border-color: var(--cd-wine-dark) !important;
    border-radius: var(--cd-radius-sm) !important;
    font-weight: 500 !important;
    font-size: 0.82rem !important;
    transition: all var(--cd-transition) !important;
}
.fc .fc-button-primary:hover {
    background: var(--cd-wine-light) !important;
}
.fc .fc-button-primary:not(:disabled).fc-button-active {
    background: #4a1528 !important;
}
.fc .fc-daygrid-day:hover {
    background: var(--cd-cream) !important;
}
.fc .fc-event {
    border-radius: 4px !important;
    border: none !important;
    padding: 2px 6px !important;
    font-size: 0.78rem !important;
}
.fc .fc-col-header-cell {
    background: var(--cd-cream) !important;
    font-weight: 600 !important;
    font-size: 0.78rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}
.fc .fc-daygrid-day-number {
    color: var(--cd-text) !important;
    font-weight: 500 !important;
}
.fc .fc-day-today {
    background: rgba(197,165,90,0.08) !important;
}


/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   25. MLM / GENEALOGY TREE
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */
.mlm-tree-node,
.orgchart .node {
    border-radius: var(--cd-radius) !important;
    box-shadow: var(--cd-shadow-sm) !important;
    border: 1px solid var(--cd-border-light) !important;
    transition: transform var(--cd-transition) !important;
}
.mlm-tree-node:hover,
.orgchart .node:hover {
    transform: scale(1.02) !important;
    box-shadow: var(--cd-shadow-md) !important;
}


/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   26. INVOICE
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */
.card .table.table-bordered {
    border: 1px solid var(--cd-border) !important;
    border-radius: 0 !important;
}


/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   27. SELECT2
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */
.select2-container--default .select2-selection--single {
    border: 1.5px solid var(--cd-border) !important;
    border-radius: var(--cd-radius-sm) !important;
    height: 40px !important;
    padding: 5px 10px !important;
}
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--cd-gold) !important;
    box-shadow: 0 0 0 3px rgba(197,165,90,0.12) !important;
}
.select2-container--default .select2-selection--multiple {
    border: 1.5px solid var(--cd-border) !important;
    border-radius: var(--cd-radius-sm) !important;
    min-height: 40px !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--cd-wine-dark) !important;
}
.select2-dropdown {
    border: 1px solid var(--cd-border) !important;
    border-radius: var(--cd-radius-sm) !important;
    box-shadow: var(--cd-shadow-md) !important;
}


/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   28. ANIMATION ÔÇö Suave carga
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */
.content-page .content > .row {
    animation: cdFadeIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes cdFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Animate individual cols for stagger */
.content-page .content > .row > [class*="col"] {
    animation: cdSlideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes cdSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.content-page .content > .row > [class*="col"]:nth-child(1) { animation-delay: 0.04s; }
.content-page .content > .row > [class*="col"]:nth-child(2) { animation-delay: 0.08s; }
.content-page .content > .row > [class*="col"]:nth-child(3) { animation-delay: 0.12s; }
.content-page .content > .row > [class*="col"]:nth-child(4) { animation-delay: 0.16s; }
.content-page .content > .row > [class*="col"]:nth-child(5) { animation-delay: 0.20s; }
.content-page .content > .row > [class*="col"]:nth-child(6) { animation-delay: 0.24s; }


/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   29. RESPONSIVE TWEAKS
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */
@media (max-width: 991px) {
    .card-body { padding: 16px !important; }
    .table thead th { font-size: 0.72rem !important; padding: 10px 12px !important; }
    .table tbody td { padding: 10px 12px !important; font-size: 0.82rem !important; }
    .modal-lg { max-width: 95% !important; }
}
@media (max-width: 576px) {
    .content { padding: 12px !important; }
    .card-body { padding: 14px !important; }
    .btn { padding: 7px 14px !important; font-size: 0.82rem !important; }
    .page-title { font-size: 1.15rem !important; }
    .widget-inline .card-body h3 { font-size: 1.25rem !important; }
}

/* ══════════════════════════════════════
   MOBILE RESPONSIVE MEGA-FIX
   ══════════════════════════════════════ */

/* ── TABLET (max 991px) ── */
@media (max-width: 991px) {
    /* Sidebar overlay when open on mobile */
    .left-side-menu {
        z-index: 1050 !important;
        transition: transform 0.3s ease !important;
    }
    body:not(.sidebar-enable) .left-side-menu {
        transform: translateX(-260px) !important;
    }
    body.sidebar-enable .left-side-menu {
        transform: translateX(0) !important;
        box-shadow: 4px 0 25px rgba(0,0,0,0.15) !important;
    }
    /* Content full width on mobile */
    .content-page {
        margin-left: 0 !important;
    }
    /* Topbar adjustments */
    .navbar-custom {
        min-height: 56px !important;
        padding: 0 12px !important;
    }
    /* Logo on tablet */
    .topnav-navbar .topnav-logo {
        display: flex !important;
        align-items: center !important;
        height: 56px !important;
        line-height: 56px !important;
        min-width: 45px !important;
    }
    .topnav-navbar .topnav-logo-lg img,
    .topnav-navbar .topnav-logo-sm img {
        max-height: 38px !important;
    }
    .navbar-custom .topnav-menu .nav-link {
        padding: 0 8px !important;
    }
    /* Fix content area */
    .content-page .content {
        padding: 16px !important;
    }
    /* Tables scroll horizontal */
    .table-responsive {
        -webkit-overflow-scrolling: touch !important;
    }
    /* Modal full-width */
    .modal-dialog {
        margin: 10px !important;
        max-width: calc(100% - 20px) !important;
    }
    .modal-lg, .modal-xl {
        max-width: calc(100% - 20px) !important;
    }
    /* Cards spacing */
    .card {
        margin-bottom: 16px !important;
    }
    .card-body {
        padding: 16px !important;
    }
    /* User profile sidebar card */
    .left-side-menu .text-center img.rounded-circle {
        width: 70px !important;
        height: 70px !important;
    }
    /* Hide "Visitar sitio web" button on tablet */
    .visit_website .btn {
        font-size: 0.75rem !important;
        padding: 4px 10px !important;
    }
}

/* ── MOBILE (max 767px) ── */
@media (max-width: 767px) {
    /* Topbar compact */
    .navbar-custom {
        min-height: 50px !important;
        padding: 0 8px !important;
    }
    .navbar-custom .topnav-logo {
        height: 50px !important;
        width: auto !important;
    }
    .navbar-custom .topnav-logo-lg img {
        max-height: 36px !important;
    }
    /* Hamburger menu */
    .button-menu-mobile {
        font-size: 1.3rem !important;
        padding: 0 10px !important;
    }
    .button-menu-mobile .lines span {
        background-color: #fff !important;
    }
    /* Hide system name on mobile */
    .visit_website h4 {
        display: none !important;
    }
    .visit_website .btn {
        display: none !important;
    }
    /* Dropdown menus */
    .dropdown-menu {
        min-width: auto !important;
        max-width: 280px !important;
    }
    .notification-list .noti-icon-badge {
        top: 14px !important;
    }
    /* Content area */
    .content-page .content {
        padding: 12px !important;
    }
    /* Page title area */
    .page-title-box {
        padding: 10px 0 !important;
    }
    .page-title-box .page-title {
        font-size: 1.1rem !important;
        margin-bottom: 4px !important;
    }
    .page-title-box .breadcrumb {
        font-size: 0.75rem !important;
    }
    /* Card adjustments */
    .card-body {
        padding: 14px !important;
    }
    .card-header {
        padding: 12px 14px !important;
    }
    /* Buttons */
    .btn {
        padding: 7px 14px !important;
        font-size: 0.82rem !important;
    }
    .btn-lg {
        padding: 10px 20px !important;
        font-size: 0.92rem !important;
    }
    .btn-sm {
        padding: 4px 10px !important;
        font-size: 0.75rem !important;
    }
    /* Widget stat cards */
    .widget-inline .card-body {
        padding: 12px !important;
    }
    .widget-inline .card-body h3 {
        font-size: 1.2rem !important;
    }
    .widget-inline .card-body p {
        font-size: 0.75rem !important;
    }
    /* Tables */
    .table thead th {
        font-size: 0.72rem !important;
        padding: 8px 10px !important;
        white-space: nowrap !important;
    }
    .table tbody td {
        padding: 8px 10px !important;
        font-size: 0.8rem !important;
    }
    /* Forms */
    .form-group label, .form-label {
        font-size: 0.82rem !important;
    }
    .form-control, .custom-select {
        font-size: 0.88rem !important;
        height: 40px !important;
    }
    textarea.form-control {
        height: auto !important;
    }
    /* Row columns stack properly */
    .row > [class*="col-lg-"],
    .row > [class*="col-md-"] {
        margin-bottom: 12px !important;
    }
    /* Badge */
    .badge {
        font-size: 0.7rem !important;
        padding: 4px 8px !important;
    }
    /* Alert */
    .alert {
        padding: 10px 14px !important;
        font-size: 0.85rem !important;
    }
    /* Pagination */
    .pagination .page-link {
        padding: 6px 10px !important;
        font-size: 0.8rem !important;
    }
    /* Tab navigation */
    .nav-tabs .nav-link {
        padding: 8px 12px !important;
        font-size: 0.82rem !important;
    }
    /* Calendar view */
    .fc .fc-toolbar {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .fc .fc-toolbar-title {
        font-size: 1rem !important;
    }
    .fc .fc-button {
        padding: 4px 8px !important;
        font-size: 0.75rem !important;
    }
    /* User navigation QR card */
    .left-side-menu .card {
        margin: 8px !important;
    }
    .left-side-menu .card-body {
        padding: 10px !important;
    }
    /* Headings */
    h1, .h1 { font-size: 1.4rem !important; }
    h2, .h2 { font-size: 1.2rem !important; }
    h3, .h3 { font-size: 1.1rem !important; }
    h4, .h4 { font-size: 1rem !important; }
    h5, .h5 { font-size: 0.9rem !important; }
    /* Display headings */
    .display-4 { font-size: 1.5rem !important; }
    .display-5 { font-size: 1.3rem !important; }
    /* Trip details/registration */
    .trip-description img {
        max-width: 100% !important;
        height: auto !important;
    }
    /* Sticky sidebar card on trip pages — remove sticky on mobile */
    .sticky-top {
        position: relative !important;
        top: auto !important;
    }
}

/* ── SMALL MOBILE (max 480px) ── */
@media (max-width: 480px) {
    /* Even more compact */
    .content-page .content {
        padding: 8px !important;
    }
    .card-body {
        padding: 12px !important;
    }
    .card-header {
        padding: 10px 12px !important;
    }
    .card-header h4, .card-header h5, .card-header h6 {
        font-size: 0.88rem !important;
    }
    /* Buttons stack on very small screens */
    .btn-group {
        flex-wrap: wrap !important;
    }
    .btn-group .btn {
        margin-bottom: 4px !important;
    }
    /* Full-width buttons */
    .d-flex.gap-2 {
        flex-wrap: wrap !important;
    }
    /* QR code smaller */
    .left-side-menu img[alt*="QR"],
    .left-side-menu canvas {
        max-width: 100px !important;
        max-height: 100px !important;
    }
    /* Tables - force horizontal scroll */
    .table-responsive {
        border: none !important;
    }
    .table {
        min-width: 500px !important;
    }
    /* Profile image */
    .rounded-circle[width="120"],
    img.rounded-circle {
        width: 60px !important;
        height: 60px !important;
    }
    /* Trip card grid */
    .col-md-6.col-lg-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    /* Gallery images */
    .gallery-thumb {
        width: 60px !important;
        height: 45px !important;
    }
    /* Multi-step checkout */
    .cd-step .cd-step-number {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.75rem !important;
    }
    .page-title {
        font-size: 1rem !important;
    }
    /* Form buttons full-width */
    .form-group .btn,
    .card-footer .btn {
        width: 100% !important;
        margin-bottom: 6px !important;
    }
}

/* ── FRONTEND LOGIN MOBILE FIXES ── */
@media (max-width: 576px) {
    .cd-auth-section {
        padding: 15px 0 !important;
    }
    .cd-auth-card {
        border-radius: 12px !important;
        margin: 0 8px !important;
    }
    .cd-auth-form {
        padding: 25px 20px !important;
    }
    .cd-auth-form h3 {
        font-size: 1.4rem !important;
    }
    .cd-auth-form .cd-subtitle {
        font-size: 0.85rem !important;
        margin-bottom: 20px !important;
    }
    .cd-auth-form .cd-input-group .form-control {
        height: 44px !important;
        font-size: 0.9rem !important;
    }
    .cd-auth-form .cd-btn-submit {
        height: 46px !important;
        font-size: 0.9rem !important;
    }
}

/* ── LANDSCAPE MOBILE ── */
@media (max-height: 500px) and (orientation: landscape) {
    .cd-auth-section {
        min-height: auto !important;
        padding: 10px 0 !important;
    }
    .cd-auth-banner {
        padding: 20px !important;
    }
    .cd-auth-form {
        padding: 20px !important;
    }
    .navbar-custom {
        min-height: 44px !important;
    }
}

/* ── TOUCH TARGETS ── */
@media (pointer: coarse) {
    /* Minimum 44px touch targets for mobile */
    .side-nav-link {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }
    .btn {
        min-height: 38px !important;
    }
    .nav-link {
        min-height: 44px !important;
    }
    .form-control, .custom-select {
        min-height: 42px !important;
    }
    /* Increase tap area for dropdown items */
    .dropdown-item {
        padding: 10px 16px !important;
    }
    /* Notification area */
    .noti-icon {
        padding: 8px !important;
    }
}



/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   30. ENLARGED / COLLAPSED SIDEBAR
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */
body.enlarged .left-side-menu {
    background: #ffffff !important;
    border-right: none !important;
    box-shadow: 1px 0 0 var(--cd-border) !important;
}
body.enlarged .side-nav .side-nav-link {
    padding: 12px 0 !important;
    text-align: center !important;
    margin: 2px 4px !important;
    color: var(--cd-oxford) !important;
}
body.enlarged .side-nav .side-nav-link i {
    font-size: 1.3rem !important;
    display: block !important;
    width: auto !important;
    margin: 0 auto !important;
    color: var(--cd-oxford-light) !important;
}
body.enlarged .side-nav .side-nav-item:hover > .side-nav-second-level {
    background: #ffffff !important;
    border: 1px solid var(--cd-border) !important;
    border-radius: 0 var(--cd-radius-sm) var(--cd-radius-sm) 0 !important;
    box-shadow: var(--cd-shadow-lg) !important;
}


/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   31. LOADER / SPINNER
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */
.spinner-border {
    color: var(--cd-wine-dark) !important;
}
.spinner-border.text-secondary {
    color: var(--cd-gold) !important;
}
.ajax_loader .ajax_loaderBar {
    background-color: var(--cd-gold) !important;
}
.start_ajax_loading {
    background-color: rgba(197,165,90,0.2) !important;
}
.start_ajax_loading .ajax_loaderBar {
    background-color: var(--cd-gold) !important;
}
.loader-modal {
    background-color: rgba(247,245,242,0.85) !important;
    backdrop-filter: blur(4px) !important;
    color: var(--cd-wine-dark) !important;
}


/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   32. MISC ÔÇö PRINT, ACCORDION, LIST-GROUP
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */
/* List groups */
.list-group-item {
    border-color: var(--cd-border-light) !important;
    padding: 12px 16px !important;
    transition: background var(--cd-transition) !important;
}
.list-group-item:hover {
    background: var(--cd-cream) !important;
}
.list-group-item.active {
    background: var(--cd-wine-dark) !important;
    border-color: var(--cd-wine-dark) !important;
}
/* Accordions */
.accordion-button:not(.collapsed) {
    background: var(--cd-cream) !important;
    color: var(--cd-wine-dark) !important;
    box-shadow: none !important;
}
.accordion-button:focus {
    box-shadow: 0 0 0 3px rgba(197,165,90,0.12) !important;
    border-color: var(--cd-gold) !important;
}
/* Messages */
.message_sending_time {
    color: var(--cd-text-light) !important;
    font-size: 0.72rem !important;
}
.unread {
    background-color: rgba(197,165,90,0.06) !important;
    border-left: 3px solid var(--cd-gold) !important;
}
/* Print */
@media print {
    body { background: #fff !important; }
    .left-side-menu,
    .navbar-custom,
    .float,
    #cdHelpBtn { display: none !important; }
    .card { box-shadow: none !important; border: 1px solid #ddd !important; animation: none !important; }
    .content-page { margin-left: 0 !important; }
    * { animation: none !important; transition: none !important; }
}


/* ============================================
   33. PREMIUM MICRO-INTERACTIONS
   ============================================ */
/* Membership card premium glow */
.card .badge-success,
.card .badge.bg-success {
    position: relative !important;
}
/* Table rows subtle entrance */
.table tbody tr {
    animation: cdRowIn 0.3s ease both !important;
}
@keyframes cdRowIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.table tbody tr:nth-child(1) { animation-delay: 0.02s; }
.table tbody tr:nth-child(2) { animation-delay: 0.04s; }
.table tbody tr:nth-child(3) { animation-delay: 0.06s; }
.table tbody tr:nth-child(4) { animation-delay: 0.08s; }
.table tbody tr:nth-child(5) { animation-delay: 0.10s; }
/* Smooth focus rings */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid rgba(90,26,50,0.2) !important;
    outline-offset: 2px !important;
}
/* Calendar card premium styling */
.fc {
    animation: cdCardIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
/* Premium empty states */
.card-body .text-center .text-muted {
    font-size: 0.9rem !important;
    color: var(--cd-oxford-muted) !important;
}
/* Sidebar transition on page load */
.left-side-menu {
    animation: cdSidebarIn 0.4s ease both !important;
}
@keyframes cdSidebarIn {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}
/* Topbar entrance */
.navbar-custom {
    animation: cdTopbarIn 0.35s ease both !important;
}
@keyframes cdTopbarIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ── LOGO MOBILE GLOBAL FIX ── */
/* Ensure logo is always visible regardless of breakpoint */
.topnav-navbar .topnav-logo {
    display: flex !important;
    align-items: center !important;
}
.topnav-navbar .topnav-logo img {
    display: block !important;
    max-height: 40px !important;
}
@media (max-width: 991.98px) {
    .topnav-navbar .topnav-logo {
        min-width: 40px !important;
        line-height: normal !important;
        float: left !important;
    }
    .topnav-navbar .topnav-logo-lg {
        display: none !important;
    }
    .topnav-navbar .topnav-logo-sm {
        display: inline-block !important;
    }
    .topnav-navbar .topnav-logo-sm img {
        max-height: 36px !important;
        height: 36px !important;
        width: auto !important;
        display: block !important;
    }
}
@media (max-width: 767.98px) {
    .topnav-navbar .topnav-logo {
        height: 50px !important;
        line-height: 50px !important;
    }
    .topnav-navbar .topnav-logo-sm img {
        max-height: 32px !important;
        height: 32px !important;
    }
}
@media (max-width: 480px) {
    .topnav-navbar .topnav-logo {
        height: 50px !important;
        padding-right: 5px !important;
    }
    .topnav-navbar .topnav-logo-sm img {
        max-height: 28px !important;
        height: 28px !important;
    }
}

/* ── Botones de cerrar bonitos (modal / sidebar) ── */
.modal-header .close,
.modal-header .btn-close {
    background: none;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #6c757d;
    transition: all .2s ease;
    opacity: 1;
    padding: 0;
    line-height: 1;
    cursor: pointer;
}
.modal-header .close:hover,
.modal-header .btn-close:hover {
    background: rgba(0,0,0,.08);
    color: #333;
    transform: scale(1.15);
}
.modal-header .close .fa-times,
.modal-header .btn-close .fa-times {
    font-size: 14px;
}
/* Versión oscura (headers con fondo oscuro) */
.modal-header.bg-dark .close,
.modal-header.bg-gradient-dark .close,
.btn-close-white {
    color: rgba(255,255,255,.8) !important;
}
.modal-header.bg-dark .close:hover,
.modal-header.bg-gradient-dark .close:hover,
.btn-close-white:hover {
    background: rgba(255,255,255,.15) !important;
    color: #fff !important;
}
/* ============================================================
   CASA DIAMANTE 144 - Frontend Responsive Enhancement
   Scope: All frontend pages (profile, courses, wishlist, etc.)
   Loaded via cd_backend_modern.css (appended at end)
   ============================================================ */

/* ---- FRONTEND PROFILE PAGES: Full-width layout ---- */
.wish-list-body .container {
    max-width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* ---- FRONTEND SIDEBAR: Sticky on desktop ---- */
@media (min-width: 992px) {
    .wish-list-body .wish-list-search {
        position: sticky;
        top: 90px;
    }
}

/* ---- FRONTEND FORMS: Better at wide screens ---- */
.profile-ful-body .input-group,
.profile-ful-body .form-control {
    border-radius: 8px !important;
}
.profile-ful-body .input-group-text {
    border-radius: 8px 0 0 8px !important;
    background: var(--cd-cream, #faf8f4) !important;
    border-color: var(--cd-cream-dark, #e8dfd0) !important;
    color: var(--cd-gold, #c5a55a) !important;
}
.profile-ful-body .form-control {
    border-color: var(--cd-cream-dark, #e8dfd0) !important;
}
.profile-ful-body .form-control:focus {
    border-color: var(--cd-gold, #c5a55a) !important;
    box-shadow: 0 0 0 3px rgba(197,165,90,0.15) !important;
}

/* ---- TABLET (max 991px) ---- */
@media (max-width: 991px) {
    /* Frontend container full width on tablet */
    .wish-list-body .container,
    .wish-list-body .container-fluid {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    /* Profile card more compact */
    .profile-ful-body {
        border-radius: 12px !important;
    }
    /* Social link inputs stack better */
    .profile-input-section .input-group {
        margin-bottom: 8px !important;
    }
    /* Frontend nav header compact */
    .header-area .container {
        max-width: 100% !important;
        padding: 0 12px !important;
    }
    /* Course cards auto-fit */
    .courses-card-body img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ---- MOBILE (max 767px) ---- */
@media (max-width: 767px) {
    /* Frontend container */
    .wish-list-body .container,
    .wish-list-body .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    /* Profile sidebar collapses cleanly */
    .wish-list-body .wish-list-search {
        margin-top: 20px !important;
        margin-bottom: 16px !important;
    }
    /* Profile menus horizontal scroll on mobile */
    .wish-list-course {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }
    .wish-list-course .menu-section {
        width: 100%;
    }
    .btn-profile-menu {
        font-size: 12.5px !important;
        padding: 8px 14px !important;
    }
    /* Profile form areas */
    .profile-ful-body {
        margin-top: 0 !important;
    }
    .profile-parrent {
        flex-direction: column !important;
        text-align: center !important;
        gap: 12px;
    }
    .profile-child {
        flex-direction: column !important;
        text-align: center !important;
    }
    .profile-child-btn {
        width: 100% !important;
        text-align: center !important;
    }
    /* Input groups stack */
    .profile-input-section .col-md-6 {
        margin-bottom: 12px !important;
    }
    /* QR widget smaller */
    .referral-qr-widget {
        padding: 12px !important;
    }
    .referral-qr-widget #qrcode-container img,
    .referral-qr-widget #qrcode-container canvas {
        max-width: 100px !important;
        max-height: 100px !important;
    }
    /* Student profile info compact */
    .student-profile-info {
        margin: 20px 0 !important;
    }
    .student-profile-info .profile-image {
        width: 80px !important;
        height: 80px !important;
    }
    .student-profile-info h4 {
        font-size: 15px !important;
    }
    /* All images responsive */
    img {
        max-width: 100%;
        height: auto;
    }
    /* Common card padding */
    .common-card {
        border-radius: 10px !important;
    }
    /* Login/Register forms */
    .sign-up-page .container,
    .login-page .container {
        padding: 0 12px !important;
    }
    /* Course listing */
    .course-list-body .container,
    .courses-page .container {
        max-width: 100% !important;
        padding: 0 12px !important;
    }
}

/* ---- SMALL MOBILE (max 480px) ---- */
@media (max-width: 480px) {
    .wish-list-body .container,
    .wish-list-body .container-fluid {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .wish-list-body {
        padding-bottom: 30px !important;
    }
    /* Sidebar menu even more compact */
    .btn-profile-menu {
        font-size: 12px !important;
        padding: 7px 12px !important;
    }
    .btn-profile-menu i {
        font-size: 11px !important;
    }
    .student-profile-info .profile-image {
        width: 65px !important;
        height: 65px !important;
    }
    .student-profile-info h4 {
        font-size: 14px !important;
    }
    /* Form controls */
    .profile-ful-body .form-control,
    .profile-ful-body .input-group-text {
        font-size: 13px !important;
    }
    .profile-ful-body .btn {
        width: 100% !important;
    }
    /* Breadcrumb smaller */
    .bread-crumb h1 {
        font-size: 22px !important;
    }
    .breadcrumb-item,
    .breadcrumb-item a {
        font-size: 12px !important;
    }
    /* Course cards full width */
    .courses-card-body {
        margin-bottom: 12px !important;
    }
    /* Frontend header */
    .header-area .navbar-brand img {
        max-height: 32px !important;
    }
}

/* ---- LANDSCAPE MOBILE ---- */
@media (max-height: 500px) and (orientation: landscape) {
    .wish-list-body .wish-list-search {
        margin-top: 10px !important;
    }
    .student-profile-info {
        margin: 10px 0 !important;
    }
}