/**======================================================================
 * P&V HEALTH - TEMA PERSONALIZADO
 * Paleta de colores basada en el logo (Verde Esmeralda/Turquesa)
 * ====================================================================== */

:root {
    /* Colores Primarios - Verde Esmeralda */
    --primary: #2E8B57;
    --primary-dark: #1F6B42;
    --primary-darker: #1A5C38;
    --primary-light: #3DA169;
    --primary-lighter: #6BBF8A;
    --primary-pale: #D4EDE0;

    /* Colores Secundarios */
    --secondary: #1A5C38;
    --secondary-light: #065F46;

    /* Colores de Acento */
    --accent: #10B981;
    --accent-light: #34D399;
    --accent-dark: #059669;

    /* Colores de Estado */
    --success: #059669;
    --info: #2E8B57;
    --warning: #F59E0B;
    --danger: #EF4444;

    /* Gradientes */
    --gradient-primary: linear-gradient(135deg, #2E8B57 0%, #3DA169 100%);
    --gradient-dark: linear-gradient(135deg, #1A5C38 0%, #2E8B57 100%);
    --gradient-accent: linear-gradient(135deg, #10B981 0%, #6BBF8A 100%);
}

/* ============================================
   NAVEGACION HORIZONTAL — theme-horizontal override
   ============================================ */

/* Fondo blanco para el nav horizontal */
.pcoded-navbar.theme-horizontal,
.pcoded-navbar.theme-horizontal .navbar-wrapper,
.pcoded-navbar.theme-horizontal .navbar-content {
    background: #ffffff !important;
    border-bottom: 1px solid #DDD5B8 !important;
    border-right: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important;
}

/* Ocultar panel de usuario en todas las vistas (reemplazado por dropdown del header) */
.pcoded-navbar .main-menu-header,
.pcoded-navbar #nav-user-link,
.pcoded-navbar .main-menu-header + .collapse,
.pcoded-navbar.theme-horizontal .header-logo,
.pcoded-navbar > .navbar-wrapper > .navbar-content > div:first-child {
    display: none !important;
}

/* Item activo — línea verde inferior */
.pcoded-navbar.theme-horizontal .pcoded-inner-navbar > li.active > a,
.pcoded-navbar.theme-horizontal .pcoded-inner-navbar > li.pcoded-trigger > a,
.pcoded-navbar.theme-horizontal .pcoded-inner-navbar > li > a:hover {
    color: #2E8B57 !important;
    background: #F0FAF5 !important;
    border-bottom: 2px solid #2E8B57 !important;
}

/* Color de texto de items */
.pcoded-navbar.theme-horizontal .pcoded-inner-navbar > li > a {
    color: #5C5852 !important;
}

/* Dropdown submenus */
.pcoded-navbar.theme-horizontal .pcoded-inner-navbar .pcoded-submenu {
    background: #ffffff !important;
    border: 1px solid #DDD5B8 !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1) !important;
}

.pcoded-navbar.theme-horizontal .pcoded-inner-navbar .pcoded-submenu li > a {
    color: #5C5852 !important;
}

.pcoded-navbar.theme-horizontal .pcoded-inner-navbar .pcoded-submenu li > a:hover,
.pcoded-navbar.theme-horizontal .pcoded-inner-navbar .pcoded-submenu li.active > a {
    color: #2E8B57 !important;
    background: #F0FAF5 !important;
}

/* Botones prev/next de navegación horizontal */
.sidenav-horizontal-prev,
.sidenav-horizontal-next {
    background: #ffffff !important;
    color: #2E8B57 !important;
    border-color: #DDD5B8 !important;
}

/* ============================================
   NAVEGACION Y SIDEBAR — mc- Light (vertical fallback)
   ============================================ */

/* Sidebar blanco/crema — fondo claro */
.pcoded-navbar,
.pcoded-navbar.menu-light {
    background: #ffffff !important;
    border-right: 1px solid #DDD5B8 !important;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.06) !important;
}

.pcoded-navbar .navbar-wrapper,
.pcoded-navbar.menu-light .navbar-wrapper {
    background: #ffffff !important;
}

.pcoded-navbar .navbar-content,
.pcoded-navbar.menu-light .navbar-content {
    background: #ffffff !important;
    border-right: none !important;
}

/* Header del sidebar (sección usuario collapse) */
.pcoded-navbar .main-menu-header {
    background: linear-gradient(135deg, #F7F3E3 0%, #EDE7CF 100%) !important;
    border-bottom: 1px solid #DDD5B8 !important;
    padding: 14px !important;
}

.pcoded-navbar .main-menu-header .user-details > span {
    color: #5C5852 !important;
}

.pcoded-navbar #more-details {
    color: #1E1E1E !important;
    cursor: pointer;
}

/* Links del collapse de usuario */
.pcoded-navbar #nav-user-link .list-group-item {
    background: #F8FAF8 !important;
    border-color: #EDE7CF !important;
}

.pcoded-navbar #nav-user-link .list-group-item a {
    color: #5C5852 !important;
}

.pcoded-navbar #nav-user-link .list-group-item:hover a {
    color: #2E8B57 !important;
}

/* Items principales */
.pcoded-navbar .pcoded-inner-navbar > li > a,
.pcoded-navbar.menu-light .pcoded-inner-navbar > li > a {
    color: #5C5852 !important;
    background: transparent !important;
}

.pcoded-navbar .pcoded-inner-navbar > li > a:hover,
.pcoded-navbar.menu-light .pcoded-inner-navbar > li > a:hover {
    color: #2E8B57 !important;
    background: #F0FAF5 !important;
}

/* Item activo — borde izquierdo verde */
.pcoded-navbar .pcoded-inner-navbar > li.active > a,
.pcoded-navbar.menu-light .pcoded-inner-navbar > li.active > a,
.pcoded-navbar .pcoded-inner-navbar > li.pcoded-trigger > a,
.pcoded-navbar.menu-light .pcoded-inner-navbar > li.pcoded-trigger > a {
    color: #2E8B57 !important;
    background: #EAF5EE !important;
    border-left: 3px solid #2E8B57 !important;
}

/* Submenu background */
.pcoded-navbar .pcoded-submenu,
.pcoded-navbar.menu-light .pcoded-submenu {
    background: #F8FAF8 !important;
}

/* Submenu items */
.pcoded-navbar.menu-light .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li > a {
    color: #7A7268 !important;
}

.pcoded-navbar.menu-light .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li:hover > a,
.pcoded-navbar.menu-light .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li.active > a {
    color: #2E8B57 !important;
    background: #EAF5EE !important;
}

/* Quitar bordes internos del submenu */
.pcoded-navbar.menu-light .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li + li a,
.pcoded-navbar.menu-light .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li + li > a {
    border-top: none !important;
}

/* ============================================
   HEADER — full width (sin offset de sidebar)
   ============================================ */

.pcoded-header.header-blue {
    background: #2E8B57 !important;
    box-shadow: 0 2px 10px rgba(46, 139, 87, 0.3) !important;
}

/* Header textos e iconos blancos */
.pcoded-header .dropdown-toggle,
.pcoded-header .nav-link,
.pcoded-header a,
.pcoded-header i,
.pcoded-header .feather,
.pcoded-header .m-header a,
.pcoded-header .navbar-nav .nav-link {
    color: #ffffff !important;
}

.pcoded-header .dropdown-toggle:hover,
.pcoded-header .nav-link:hover,
.pcoded-header a:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

.pcoded-header .dropdown-menu {
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.pcoded-header .dropdown-menu .dropdown-item,
.pcoded-header .dropdown-menu a {
    color: #3A3530 !important;
}

.pcoded-header .dropdown-item:hover,
.pcoded-header .dropdown-item:focus {
    background: #D4EDE0 !important;
    color: #2E8B57 !important;
}

/* ============================================
   BOTONES
   ============================================ */

.btn-primary {
    background: var(--gradient-primary) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(46, 139, 87, 0.35) !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #1F6B42 0%, #2E8B57 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(46, 139, 87, 0.45) !important;
}

.btn-outline-primary {
    color: #2E8B57 !important;
    border-color: #2E8B57 !important;
}

.btn-outline-primary:hover {
    background: #2E8B57 !important;
    color: #fff !important;
}

.btn-success {
    background: linear-gradient(135deg, #059669 0%, #10B981 100%) !important;
    border: none !important;
}

.btn-info {
    background: linear-gradient(135deg, #2E8B57 0%, #6BBF8A 100%) !important;
    border: none !important;
}

/* ============================================
   CARDS
   ============================================ */

.card {
    border: none !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}

.card:hover {
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.12) !important;
}

.card .card-header {
    background: transparent !important;
    border-bottom: 1px solid #DDD5B8 !important;
}

.card .card-header h5,
.card .card-header .card-title,
.card-header h5 {
    color: #1F6B42 !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

/* Cards de estadisticas */
.card.bg-primary,
.bg-primary {
    background: var(--gradient-primary) !important;
}

.card.bg-success,
.bg-success {
    background: linear-gradient(135deg, #059669 0%, #10B981 100%) !important;
}

.card.bg-info,
.bg-info {
    background: linear-gradient(135deg, #2E8B57 0%, #6BBF8A 100%) !important;
}

.card.bg-warning,
.bg-warning {
    background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%) !important;
}

.card.bg-danger,
.bg-danger {
    background: linear-gradient(135deg, #EF4444 0%, #F87171 100%) !important;
}

/* ============================================
   BADGES
   ============================================ */

.badge-primary,
.badge.bg-primary {
    background: var(--gradient-primary) !important;
}

.badge-success,
.badge.bg-success {
    background: linear-gradient(135deg, #059669 0%, #10B981 100%) !important;
}

.badge-info,
.badge.bg-info {
    background: linear-gradient(135deg, #2E8B57 0%, #6BBF8A 100%) !important;
}

.badge-warning,
.badge.bg-warning {
    background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%) !important;
    color: #fff !important;
}

.badge-danger,
.badge.bg-danger {
    background: linear-gradient(135deg, #EF4444 0%, #F87171 100%) !important;
}

/* ============================================
   TABLAS
   ============================================ */

.table thead th {
    background: linear-gradient(135deg, #F7F3E3 0%, #EDE7CF 100%) !important;
    border-bottom: 2px solid #2E8B57 !important;
    color: #1F6B42 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.5px !important;
}

.table-hover tbody tr:hover {
    background: #D4EDE0 !important;
}

.table tbody td {
    vertical-align: middle !important;
}

/* ============================================
   FORMULARIOS
   ============================================ */

.form-control:focus {
    border-color: #3DA169 !important;
    box-shadow: 0 0 0 0.2rem rgba(46, 139, 87, 0.15) !important;
}

.form-control:hover {
    border-color: #A3D4B5 !important;
}

/* Select */
select.form-control:focus {
    border-color: #3DA169 !important;
}

/* Checkbox y Radio custom */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #2E8B57 !important;
    border-color: #2E8B57 !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(46, 139, 87, 0.25) !important;
}

/* ============================================
   NAVEGACION TABS
   ============================================ */

.nav-tabs .nav-link.active {
    color: #2E8B57 !important;
    border-bottom: 2px solid #2E8B57 !important;
}

.nav-tabs .nav-link:hover {
    color: #3DA169 !important;
}

.nav-pills .nav-link.active {
    background: var(--gradient-primary) !important;
}

/* ============================================
   PAGINACION
   ============================================ */

.page-item.active .page-link {
    background: var(--gradient-primary) !important;
    border-color: #2E8B57 !important;
}

.page-link {
    color: #2E8B57 !important;
}

.page-link:hover {
    color: #1F6B42 !important;
    background: #D4EDE0 !important;
}

/* ============================================
   ALERTAS
   ============================================ */

.alert-primary {
    background: linear-gradient(135deg, rgba(46, 139, 87, 0.1) 0%, rgba(61, 161, 105, 0.1) 100%) !important;
    border-color: #3DA169 !important;
    color: #1F6B42 !important;
}

.alert-success {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%) !important;
    border-color: #10B981 !important;
    color: #065F46 !important;
}

.alert-info {
    background: linear-gradient(135deg, rgba(46, 139, 87, 0.1) 0%, rgba(107, 191, 138, 0.1) 100%) !important;
    border-color: #6BBF8A !important;
    color: #1F6B42 !important;
}

/* ============================================
   ENLACES
   ============================================ */

a {
    color: #2E8B57;
    transition: color 0.2s ease;
}

a:hover {
    color: #1F6B42;
}

/* ============================================
   BREADCRUMB
   ============================================ */

.breadcrumb-item.active {
    color: #2E8B57 !important;
}

.breadcrumb-item a {
    color: #5C5852 !important;
}

.breadcrumb-item a:hover {
    color: #2E8B57 !important;
}

/* ============================================
   DROPDOWN
   ============================================ */

.dropdown-item.active,
.dropdown-item:active {
    background: #2E8B57 !important;
}

/* ============================================
   LOADER/PRELOADER
   ============================================ */

.loader-fill {
    background: linear-gradient(135deg, #2E8B57 0%, #6BBF8A 100%) !important;
}

.loader-track {
    background: #D4EDE0 !important;
}

/* ============================================
   PROGRESS BAR
   ============================================ */

.progress-bar {
    background: var(--gradient-primary) !important;
}

/* ============================================
   SCROLLBAR PERSONALIZADO
   ============================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #EDE7CF;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #2E8B57 0%, #3DA169 100%);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #1F6B42 0%, #2E8B57 100%);
}

/* ============================================
   ICONOS Y TEXTOS
   ============================================ */

.text-primary {
    color: #2E8B57 !important;
}

.text-success {
    color: #059669 !important;
}

.text-info {
    color: #2E8B57 !important;
}

.border-primary {
    border-color: #2E8B57 !important;
}

/* ============================================
   MODALES
   ============================================ */

.modal-header {
    background: var(--gradient-primary);
    color: white;
    border-radius: 0.3rem 0.3rem 0 0;
}

.modal-header .close,
.modal-header .btn-close {
    color: white;
    opacity: 0.8;
}

.modal-header .close:hover,
.modal-header .btn-close:hover {
    opacity: 1;
}

.modal-content {
    border: none;
    border-radius: 12px;
    overflow: hidden;
}

/* ============================================
   TOOLTIPS
   ============================================ */

.tooltip .tooltip-inner {
    background: #1A5C38;
}

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: #1A5C38;
}

/* ============================================
   PAGINA DE LOGIN/REGISTRO
   ============================================ */

.auth-wrapper {
    background: linear-gradient(135deg, #1A5C38 0%, #2E8B57 50%, #D4AF37 100%) !important;
}

.auth-wrapper .card {
    border-radius: 16px !important;
}

.auth-wrapper .btn-primary {
    background: linear-gradient(135deg, #2E8B57 0%, #10B981 100%) !important;
}

/* ============================================
   DASHBOARD WIDGETS
   ============================================ */

.widget-primary-card {
    background: var(--gradient-primary);
}

/* ============================================
   ANIMACIONES HOVER GLOBALES
   ============================================ */

.card,
.btn,
.nav-link,
.page-link,
.dropdown-item {
    transition: all 0.3s ease !important;
}

/* ============================================
   SOMBRAS PERSONALIZADAS
   ============================================ */

.shadow-primary {
    box-shadow: 0 4px 20px rgba(46, 139, 87, 0.3) !important;
}

.shadow-hover:hover {
    box-shadow: 0 8px 30px rgba(46, 139, 87, 0.25) !important;
}

/* ============================================
   MEDIA QUERIES - RESPONSIVE
   ============================================ */

@media (max-width: 992px) {
    .pcoded-navbar {
        background: #ffffff !important;
        border-right: 1px solid #DDD5B8 !important;
    }

    .pcoded-header.header-blue {
        background: #2E8B57 !important;
    }

}

/* ============================================
   SOBRESCRITURAS ADICIONALES - COLORES AZULES
   Template original usa #4680ff
   ============================================ */

/* Variables CSS del template */
:root {
    --blue: #2E8B57 !important;
    --primary: #2E8B57 !important;
}

/* Enlaces y textos con color azul original */
a:not(.btn),
.text-c-blue,
.text-primary,
.text-blue {
    color: #2E8B57 !important;
}

a:not(.btn):hover {
    color: #1F6B42 !important;
}

/* Botones con clase especifica */
.btn-primary,
.btn.btn-primary,
button.btn-primary {
    background: linear-gradient(135deg, #2E8B57 0%, #3DA169 100%) !important;
    border-color: #2E8B57 !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background: linear-gradient(135deg, #1F6B42 0%, #2E8B57 100%) !important;
    border-color: #1F6B42 !important;
}

/* Checkbox checked state */
.checkbox input[type="checkbox"]:checked + .cr,
.radio input[type="radio"]:checked + .cr {
    border-color: #2E8B57 !important;
}

.checkbox input[type="checkbox"]:checked + .cr > .cr-icon {
    color: #2E8B57 !important;
}

/* Switch toggle */
.switch input[type="checkbox"]:checked + .cr {
    background: #2E8B57 !important;
}

/* Focus states */
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    border-color: #3DA169 !important;
    box-shadow: 0 0 0 0.2rem rgba(46, 139, 87, 0.15) !important;
}

/* Data tables */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, #2E8B57 0%, #3DA169 100%) !important;
    border-color: #2E8B57 !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #D4EDE0 !important;
    border-color: #3DA169 !important;
    color: #2E8B57 !important;
}

/* Select2 */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #2E8B57 !important;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:focus {
    border-color: #3DA169 !important;
}

/* Card borders */
.card.border-primary {
    border-color: #2E8B57 !important;
}

.border-primary {
    border-color: #2E8B57 !important;
}

/* Icon colors */
.feather.text-primary,
.icon-primary,
i.text-primary {
    color: #2E8B57 !important;
}

/* ============================================
   MEJORA DE TEXTOS GRISES/PLOMOS
   ============================================ */

/* Textos principales mas oscuros y legibles */
body {
    color: #1E1E1E !important;
    background: #F7F3E3 !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: #1E1E1E !important;
}

/* Textos secundarios con mejor contraste */
.text-muted {
    color: #5C5852 !important;
}

p {
    color: #3A3530;
}

/* Labels de formularios */
label,
.form-label {
    color: #3A3530 !important;
    font-weight: 500 !important;
}

/* Placeholders */
::placeholder {
    color: #9B9488 !important;
    opacity: 1 !important;
}

/* Textos en tablas */
.table td,
.table th {
    color: #3A3530 !important;
}

.table thead th {
    color: #1F6B42 !important;
}

/* Breadcrumb */
.breadcrumb-item {
    color: #5C5852 !important;
}

/* Card titles y headers */
.card-title,
.card-header h5,
.card-header .card-title {
    color: #1E1E1E !important;
    font-weight: 600 !important;
}

/* Sidebar menu texto */
.pcoded-navbar .pcoded-inner-navbar > li > a .pcoded-mtext {
    color: #5C5852 !important;
}

.pcoded-navbar .pcoded-inner-navbar > li.active > a .pcoded-mtext,
.pcoded-navbar .pcoded-inner-navbar > li.pcoded-trigger > a .pcoded-mtext {
    color: #2E8B57 !important;
}

/* Dropdown items */
.dropdown-item {
    color: #3A3530 !important;
}

.dropdown-item:hover {
    color: #2E8B57 !important;
}

/* Stats cards text */
.card .card-body h2,
.card .card-body h3,
.card .card-body .h2,
.card .card-body .h3 {
    color: inherit !important;
}

/* Small text improvement */
small,
.small {
    color: #5C5852 !important;
}

/* Page header title */
.page-header .page-header-title h5,
.pcoded-content .page-header h5 {
    color: #1E1E1E !important;
    font-weight: 600 !important;
}

/* Page header background - TRANSPARENTE */
.page-header {
    background: transparent !important;
}

.page-header .page-header-title h5 {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.page-header .breadcrumb {
    background: transparent !important;
}

.page-header .breadcrumb-item,
.page-header .breadcrumb-item a,
.page-header .breadcrumb-item a i {
    color: rgba(255, 255, 255, 0.8) !important;
}

.page-header .breadcrumb-item.active {
    color: #ffffff !important;
}

.page-header .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ============================================
   ABLE PRO SPECIFIC OVERRIDES
   ============================================ */

/* Main content */
.pcoded-main-container {
    background: #F7F3E3 !important;
    margin-top: 105px !important;
    padding-top: 0 !important;
}

.pcoded-content {
    margin-top: 0 !important;
    padding: 0 !important;
}

/* Sidebar caption — etiquetas de sección */
.pcoded-navbar .pcoded-inner-navbar li.pcoded-menu-caption > label {
    color: #B0A898 !important;
    text-transform: uppercase !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
}

/* Nav icons in sidebar */
.pcoded-navbar .pcoded-inner-navbar > li > a > .pcoded-micon {
    color: #A3997E !important;
}

.pcoded-navbar .pcoded-inner-navbar > li.active > a > .pcoded-micon,
.pcoded-navbar .pcoded-inner-navbar > li:hover > a > .pcoded-micon {
    color: #2E8B57 !important;
}

/* Flechitas del menu y submenu — gris cálido */
.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu > a:after {
    color: #C8BFA8 !important;
    border-color: #C8BFA8 !important;
}

.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu.pcoded-trigger > a:after {
    color: #2E8B57 !important;
    border-color: #2E8B57 !important;
}

.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li > a:before {
    border-color: #C8BFA8 !important;
}

.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li.active > a:before,
.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li:hover > a:before {
    border-color: #2E8B57 !important;
}

/* Badge in menu */
.pcoded-navbar .pcoded-badge {
    background: #D4AF37 !important;
    color: #1A5C38 !important;
}

/* Separador entre secciones */
.pcoded-navbar .pcoded-inner-navbar > li.nav-item.pcoded-menu-caption {
    border-bottom-color: #EDE7CF !important;
}

/* Nombre del usuario en el header del sidebar */
.pcoded-navbar .main-menu-header .user-details,
.pcoded-navbar .main-menu-header .user-details span,
.pcoded-navbar .main-menu-header .user-details div,
.pcoded-navbar .main-menu-header #more-details,
.pcoded-navbar #more-details {
    color: #1E1E1E !important;
}

/* Viñetas/flechas del submenu — gris cálido */
.pcoded-navbar .pcoded-submenu > li > a:before,
.pcoded-navbar .pcoded-inner-navbar .pcoded-submenu > li > a:before,
.pcoded-submenu > li > a:before,
.pcoded-navbar.menu-light .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li > a:before,
.pcoded-navbar.menu-light .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li.active > a:before,
.pcoded-navbar.menu-light .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li.pcoded-trigger > a:before,
.pcoded-navbar.menu-light .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li:hover > a:before {
    color: #C8BFA8 !important;
    border-color: #C8BFA8 !important;
}

/* Mobile menu toggle — verde */
.mobile-menu span,
.mobile-menu span::before,
.mobile-menu span::after {
    background: #ffffff !important;
}

/* Notification badge */
.header-notification .badge {
    background: #EF4444 !important;
}

/* Profile dropdown */
.drp-user .dropdown-toggle::after {
    display: none;
}

/* Dropdown escritorio — alineación y tamaño del trigger */
.drp-user {
    display: flex !important;
    align-items: center !important;
}

.drp-user .mob-user-btn {
    margin: 0 6px;
    width: 34px;
    height: 34px;
}

.drp-user .mob-user-menu {
    min-width: 235px;
    margin-top: 6px !important;
}

/* List group */
.list-group-item.active {
    background: #2E8B57 !important;
    border-color: #2E8B57 !important;
}

/* ============================================
   SPINNER/LOADING COLORS
   ============================================ */

.spinner-border.text-primary {
    color: #2E8B57 !important;
}

.spinner-grow.text-primary {
    color: #2E8B57 !important;
}

/* ============================================
   FOOTER
   ============================================ */

footer a {
    color: #2E8B57 !important;
}

footer a:hover {
    color: #1F6B42 !important;
}

/* ============================================
   SWEETALERT2 CUSTOMIZATION
   ============================================ */

.swal2-styled.swal2-confirm {
    background: linear-gradient(135deg, #2E8B57 0%, #3DA169 100%) !important;
    border: none !important;
}

.swal2-styled.swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(46, 139, 87, 0.3) !important;
}

/* ============================================
   VUE COMPONENTS GENERAL STYLES
   ============================================ */

/* Ensure Vue components inherit the theme */
[class*="Component"] .btn-primary,
[class*="-component"] .btn-primary {
    background: linear-gradient(135deg, #2E8B57 0%, #3DA169 100%) !important;
    border: none !important;
}

/* Toast notifications */
.toast-success {
    background: #059669 !important;
}

.toast-info {
    background: #2E8B57 !important;
}

/* ---- SCROLLBAR del sidebar ---- */
.pcoded-navbar ::-webkit-scrollbar {
    width: 4px;
}

.pcoded-navbar ::-webkit-scrollbar-track {
    background: #F7F3E3 !important;
}

.pcoded-navbar ::-webkit-scrollbar-thumb {
    background: #DDD5B8 !important;
    border-radius: 4px;
}

.pcoded-navbar ::-webkit-scrollbar-thumb:hover {
    background: #C8BFA8 !important;
}

/* ---- MENU ITEMS — bordes redondeados y padding limpio ---- */
.pcoded-navbar .pcoded-inner-navbar > li > a {
    border-radius: 8px !important;
    margin: 1px 8px !important;
    padding: 10px 14px !important;
    transition: all 0.2s ease !important;
}

.pcoded-navbar .pcoded-inner-navbar > li.active > a,
.pcoded-navbar .pcoded-inner-navbar > li.pcoded-trigger > a {
    border-radius: 8px !important;
    margin: 1px 8px !important;
}

/* ---- CAPTION labels con separador ---- */
.pcoded-navbar .pcoded-inner-navbar li.pcoded-menu-caption {
    padding: 16px 16px 4px !important;
}

.pcoded-navbar .pcoded-inner-navbar li.pcoded-menu-caption > label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.pcoded-navbar .pcoded-inner-navbar li.pcoded-menu-caption > label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #EDE7CF;
}

/* ---- SUBMENU items ---- */
.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li > a {
    padding: 8px 14px 8px 48px !important;
    border-radius: 6px !important;
    margin: 1px 8px !important;
    font-size: 0.8rem !important;
    transition: all 0.2s ease !important;
}

.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li.active > a,
.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li:hover > a {
    background: #EAF5EE !important;
    padding-left: 52px !important;
}

/* ============================================
   MOB-USER-DROPDOWN — Dropdown usuario móvil
   ============================================ */

#mob-user-dropdown {
    display: none !important;
    align-items: center;
}

/* Botón disparador */
.mob-user-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    border-radius: 50% !important;
    background: #D4AF37 !important;
    border: 2px solid rgba(255,255,255,0.5) !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.2s ease;
    overflow: hidden;
    flex-shrink: 0;
    align-self: center;
    padding: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

.mob-user-btn:hover {
    background: #E2C150 !important;
}

.mob-user-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.mob-user-initials {
    display: block;
    color: #1E1E1E;
    font-size: 16px;
    font-weight: 800;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Panel dropdown */
.mob-user-menu {
    min-width: 235px;
    border: 1px solid #DDD5B8 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 32px rgba(30,30,30,0.14) !important;
    padding: 0 !important;
    overflow: hidden;
    margin-top: 8px !important;
    right: 0 !important;
    left: auto !important;
    background: #F7F3E3 !important;
}

/* Cabecera verde con borde dorado */
.mob-user-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px;
    background: #2E8B57;
    padding: 14px 16px;
    border-bottom: 3px solid #D4AF37;
    overflow: hidden;
}

.mob-user-header-avatar {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 50% !important;
    background: #D4AF37 !important;
    border: 2px solid rgba(255,255,255,0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

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

.mob-user-header-avatar span {
    color: #1E1E1E !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.mob-user-header-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.mob-user-header-info strong {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.mob-user-header-info small {
    color: rgba(255,255,255,0.85) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* Items del menú — fondo crema */
.mob-user-item {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 12px 16px !important;
    color: #1E1E1E !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
    background: #F7F3E3;
    border-bottom: 1px solid #EDE7CF;
}

.mob-user-item:last-child {
    border-bottom: none;
}

.mob-user-item:hover {
    background: #EDE7CF !important;
    color: #2E8B57 !important;
}

.mob-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #D4AF37;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #1E1E1E;
    font-size: 14px;
}

/* Divider */
.mob-user-divider {
    height: 1px;
    background: #DDD5B8;
    margin: 2px 0;
}

/* Item cerrar sesión */
.mob-item-logout {
    color: #1E1E1E !important;
}

.mob-item-logout:hover {
    background: #EDE7CF !important;
    color: #1A5C38 !important;
}

.logout-icon {
    background: #1E1E1E !important;
    color: #F7F3E3 !important;
}

/* Elementos exclusivos del sidebar móvil — ocultos en escritorio */
#mob-sidebar-header { display: none !important; }

/* ============================================
   RESPONSIVE — mobile override (debe ir al final)
   ============================================ */
@media (max-width: 992px) {

    /* ── Dropdown de usuario móvil ── */
    #mob-user-dropdown {
        display: flex !important;
    }

    /* ── SIDEBAR MÓVIL — rediseño completo
       Ignoramos la conversión de PCODED (menuhrres/theme-horizontal-dis)
       y construimos un panel slide-in propio.
    ── */

    /* Panel: slide desde la izquierda, ancho fijo, scroll propio */
    .pcoded-navbar,
    .pcoded-navbar.theme-horizontal,
    .pcoded-navbar.theme-horizontal-dis {
        position: fixed !important;
        left: -290px !important;
        top: 0 !important;
        width: 270px !important;
        height: 100vh !important;
        margin: 0 !important;
        background: #ffffff !important;
        border-right: 1px solid rgba(46, 139, 87, 0.2) !important;
        box-shadow: none !important;
        z-index: 1200 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
        display: block !important;
    }

    /* Abierto: desliza a la vista */
    .pcoded-navbar.mob-open {
        left: 0 !important;
        box-shadow: 4px 0 24px rgba(30,30,30,0.18) !important;
    }

    /* Overlay oscuro al abrir el sidebar (div real, no ::before) */
    #mob-sidebar-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0;
        width: 100vw; height: 100vh;
        background: rgba(30,30,30,0.35);
        z-index: 1199;
    }
    #mob-sidebar-overlay.active {
        display: block;
    }

    /* Estructura interna: todo bloque, altura automática */
    .pcoded-navbar .navbar-wrapper,
    .pcoded-navbar .navbar-content,
    .pcoded-navbar .sidenav-horizontal-wrapper,
    .pcoded-navbar .sidenav-horizontal-wrapper-dis {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        position: static !important;
    }

    /* Ocultar botones prev/next que PCODED agrega por JS */
    .pcoded-navbar .sidenav-horizontal-prev,
    .pcoded-navbar .sidenav-horizontal-next {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        visibility: hidden !important;
    }

    /* Lista de items: columna vertical */
    .pcoded-navbar .sidenav-inner {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 8px 0 24px !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    /* Submenús inline (no flotantes) */
    .pcoded-navbar .pcoded-submenu {
        position: static !important;
        box-shadow: none !important;
        border: none !important;
        background: #F7F3E3 !important;
        padding: 4px 0 !important;
    }

    /* Caption de sección */
    .pcoded-navbar .pcoded-menu-caption {
        padding: 14px 20px 4px !important;
        margin-top: 4px !important;
    }
    .pcoded-navbar .pcoded-menu-caption:first-child {
        padding-top: 10px !important;
        margin-top: 0 !important;
    }

    /* Links del menú */
    .pcoded-navbar .pcoded-inner-navbar > li > a {
        display: flex !important;
        align-items: center !important;
        padding: 10px 20px !important;
        margin: 2px 8px !important;
        border-radius: 8px !important;
        width: calc(100% - 16px) !important;
    }

    /* Submenú links */
    .pcoded-navbar .pcoded-submenu > li > a {
        padding: 8px 20px 8px 44px !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* Flecha del hasmenu */
    .pcoded-navbar .pcoded-hasmenu > a::after {
        position: absolute !important;
        right: 20px !important;
    }

    /* ── Header del sidebar (generado por JS: #mob-sidebar-header) ── */
    .pcoded-navbar .navbar-wrapper::before {
        display: none !important;
    }

    #mob-sidebar-header {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        height: 58px;
        padding: 0 16px 0 20px;
        background: linear-gradient(135deg, #1a5c38 0%, #2E8B57 70%, #37a367 100%);
        border-bottom: 2px solid rgba(212, 175, 55, 0.55);
        flex-shrink: 0;
    }
    .mob-sidebar-logo {
        height: 30px;
        width: auto;
        max-width: 150px;
        object-fit: contain;
        filter: brightness(0) invert(1);
    }
    /* ── Overlay: fade animado ── */
    #mob-sidebar-overlay { transition: opacity 0.22s ease; }
    #mob-sidebar-overlay.active { display: block; animation: mob-overlay-fade 0.22s ease forwards; }

    /* ── Keyframes ── */
    @keyframes mob-overlay-fade {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
    @keyframes mob-item-in {
        from { opacity: 0; transform: translateX(-16px); }
        to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes mob-submenu-drop {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* ── Caption de sección ── */
    .pcoded-navbar .pcoded-menu-caption label {
        color: #D4AF37 !important;
        font-size: 9.5px !important;
        font-weight: 700 !important;
        letter-spacing: 2px !important;
        text-transform: uppercase !important;
        opacity: 1 !important;
    }

    /* ── Stagger de items al abrir ── */
    .pcoded-navbar.mob-open .pcoded-inner-navbar > li {
        animation: mob-item-in 0.26s ease both;
    }
    .pcoded-navbar.mob-open .pcoded-inner-navbar > li:nth-child(1)  { animation-delay: 0.04s; }
    .pcoded-navbar.mob-open .pcoded-inner-navbar > li:nth-child(2)  { animation-delay: 0.08s; }
    .pcoded-navbar.mob-open .pcoded-inner-navbar > li:nth-child(3)  { animation-delay: 0.12s; }
    .pcoded-navbar.mob-open .pcoded-inner-navbar > li:nth-child(4)  { animation-delay: 0.16s; }
    .pcoded-navbar.mob-open .pcoded-inner-navbar > li:nth-child(5)  { animation-delay: 0.20s; }
    .pcoded-navbar.mob-open .pcoded-inner-navbar > li:nth-child(6)  { animation-delay: 0.24s; }
    .pcoded-navbar.mob-open .pcoded-inner-navbar > li:nth-child(7)  { animation-delay: 0.27s; }
    .pcoded-navbar.mob-open .pcoded-inner-navbar > li:nth-child(8)  { animation-delay: 0.30s; }
    .pcoded-navbar.mob-open .pcoded-inner-navbar > li:nth-child(n+9){ animation-delay: 0.33s; }

    /* ── Iconos ── */
    .pcoded-navbar .pcoded-micon {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        margin-right: 12px !important;
        color: #2E8B57 !important;
        background: rgba(46, 139, 87, 0.1) !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        transition: color 0.2s ease, transform 0.18s ease, background 0.2s ease !important;
    }
    .pcoded-navbar .pcoded-micon i { font-size: 17px !important; }

    /* ── Texto del item ── */
    .pcoded-navbar .pcoded-mtext {
        font-size: 13.5px !important;
        font-weight: 500 !important;
        color: #2c2c2c !important;
        transition: color 0.18s ease !important;
    }

    /* ── Hover ── */
    .pcoded-navbar .pcoded-inner-navbar > li > a:hover {
        background: rgba(46, 139, 87, 0.08) !important;
    }
    .pcoded-navbar .pcoded-inner-navbar > li > a:hover .pcoded-micon {
        color: #1a7a44 !important;
        background: rgba(46, 139, 87, 0.18) !important;
        transform: translateX(3px) !important;
    }
    .pcoded-navbar .pcoded-inner-navbar > li > a:hover .pcoded-mtext {
        color: #2E8B57 !important;
    }

    /* ── Item activo ── */
    .pcoded-navbar .pcoded-inner-navbar > li.active > a,
    .pcoded-navbar .pcoded-inner-navbar > li > a.active {
        background: rgba(46, 139, 87, 0.1) !important;
        border-left: 3px solid #2E8B57 !important;
        padding-left: 17px !important;
    }
    .pcoded-navbar .pcoded-inner-navbar > li.active > a .pcoded-micon,
    .pcoded-navbar .pcoded-inner-navbar > li > a.active .pcoded-micon {
        color: #2E8B57 !important;
        background: rgba(46, 139, 87, 0.18) !important;
    }
    .pcoded-navbar .pcoded-inner-navbar > li.active > a .pcoded-mtext,
    .pcoded-navbar .pcoded-inner-navbar > li > a.active .pcoded-mtext {
        color: #2E8B57 !important;
        font-weight: 600 !important;
    }

    /* ── Hasmenu abierto ── */
    .pcoded-navbar .pcoded-inner-navbar > li.pcoded-trigger > a {
        background: rgba(46, 139, 87, 0.06) !important;
    }
    .pcoded-navbar .pcoded-hasmenu > a::after {
        transition: transform 0.22s ease !important;
    }
    .pcoded-navbar .pcoded-hasmenu.pcoded-trigger > a::after {
        transform: rotate(90deg) !important;
    }

    /* ── Submenú ── */
    .pcoded-navbar .pcoded-submenu {
        animation: mob-submenu-drop 0.2s ease both !important;
        background: #f5f1e4 !important;
        border-left: 3px solid rgba(212, 175, 55, 0.45) !important;
        margin-left: 20px !important;
        margin-right: 8px !important;
        border-radius: 0 0 8px 8px !important;
    }
    .pcoded-navbar .pcoded-submenu > li > a {
        color: #4a4a4a !important;
        font-size: 13px !important;
        transition: color 0.15s ease, padding-left 0.15s ease !important;
    }
    .pcoded-navbar .pcoded-submenu > li > a:hover {
        color: #2E8B57 !important;
        padding-left: 50px !important;
    }
    .pcoded-navbar .pcoded-submenu > li.active > a {
        color: #2E8B57 !important;
        font-weight: 600 !important;
    }

    /* ── Scrollbar del sidebar ── */
    .pcoded-navbar::-webkit-scrollbar { width: 3px; }
    .pcoded-navbar::-webkit-scrollbar-track { background: transparent; }
    .pcoded-navbar::-webkit-scrollbar-thumb { background: rgba(46,139,87,0.25); border-radius: 4px; }
    .pcoded-navbar::-webkit-scrollbar-thumb:hover { background: rgba(46,139,87,0.5); }

    /* ── Icono al final (derecha) del texto ── */
    .pcoded-navbar .pcoded-inner-navbar > li > a {
        justify-content: space-between !important;
    }
    .pcoded-navbar .pcoded-micon {
        order: 2 !important;
        margin-right: 0 !important;
        margin-left: 10px !important;
    }
    .pcoded-navbar .pcoded-mtext {
        order: 1 !important;
        flex: 1 !important;
    }

    /* ── Ocultar sección Marketing en móvil ── */
    .pcoded-navbar .nav-marketing {
        display: none !important;
    }

    /* Contenedor principal: sin margen extra */
    .pcoded-main-container {
        margin-top: 57px !important;
        margin-left: 0 !important;
        padding-top: 0 !important;
    }

    .pcoded-content {
        padding: 0 !important;
    }

    /* Header fijo */
    .pcoded-header {
        position: fixed !important;
        top: 0 !important;
        width: 100% !important;
        z-index: 1100 !important;
    }
}

/* Estilo C ventas — nombre producto blanco */
.estilo-3 .mc-product-name {
    color: #fff !important;
}

/* ── Logo dorado en header móvil ── */
.b-brand .logo,
.b-brand .logo-thumb,
.mob-sidebar-logo {
    filter: brightness(0) saturate(100%) invert(68%) sepia(62%) saturate(750%) hue-rotate(8deg) brightness(0.85);
}