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

:root {
    /* Colores Primarios - Verde Esmeralda */
    --primary: #0D9488;
    --primary-dark: #0F766E;
    --primary-darker: #115E59;
    --primary-light: #14B8A6;
    --primary-lighter: #2DD4BF;
    --primary-pale: #CCFBF1;

    /* Colores Secundarios */
    --secondary: #064E3B;
    --secondary-light: #065F46;

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

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

    /* Gradientes */
    --gradient-primary: linear-gradient(135deg, #0D9488 0%, #14B8A6 100%);
    --gradient-dark: linear-gradient(135deg, #064E3B 0%, #0D9488 100%);
    --gradient-accent: linear-gradient(135deg, #10B981 0%, #2DD4BF 100%);
}

/* ============================================
   NAVEGACION Y SIDEBAR
   ============================================ */

/* Sidebar */
.pcoded-navbar {
    background: linear-gradient(180deg, #064E3B 0%, #0D9488 100%) !important;
}

.pcoded-navbar .pcoded-inner-navbar > li > a {
    color: rgba(255, 255, 255, 0.85) !important;
}

.pcoded-navbar .pcoded-inner-navbar > li > a:hover,
.pcoded-navbar .pcoded-inner-navbar > li.active > a,
.pcoded-navbar .pcoded-inner-navbar > li:focus > a {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

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

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

.pcoded-navbar .pcoded-submenu,
.pcoded-navbar.menu-light .pcoded-submenu {
    background: rgba(0, 0, 0, 0.2) !important;
}

/* Texto del submenu en blanco */
.pcoded-navbar.menu-light .pcoded-submenu a,
.pcoded-navbar.menu-light .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li > a {
    color: rgba(255, 255, 255, 0.85) !important;
}

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

/* Quitar bordes del submenu en menu-light */
.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;
}

.pcoded-navbar .header-logo {
    background: #064E3B !important;
}

.pcoded-navbar .header-logo .logo-thumb {
    background: transparent !important;
}

/* Navegacion activa */
.pcoded-navbar .pcoded-inner-navbar > li.active > a,
.pcoded-navbar .pcoded-inner-navbar > li.pcoded-trigger > a {
    background: rgba(20, 184, 166, 0.2) !important;
    border-left: 3px solid #2DD4BF !important;
}

/* ============================================
   HEADER
   ============================================ */

.pcoded-header.header-blue {
    background: #0D9488 !important;
    box-shadow: 0 2px 10px rgba(13, 148, 136, 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: #334155 !important;
}

.pcoded-header .dropdown-item:hover,
.pcoded-header .dropdown-item:focus {
    background: #CCFBF1 !important;
    color: #0D9488 !important;
}

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

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

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #0F766E 0%, #0D9488 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(13, 148, 136, 0.45) !important;
}

.btn-outline-primary {
    color: #0D9488 !important;
    border-color: #0D9488 !important;
}

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

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

.btn-info {
    background: linear-gradient(135deg, #0891B2 0%, #22D3EE 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 #e2e8f0 !important;
}

.card .card-header h5,
.card .card-header .card-title,
.card-header h5 {
    color: #0F766E !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, #0891B2 0%, #22D3EE 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, #0891B2 0%, #22D3EE 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, #f8fafc 0%, #f1f5f9 100%) !important;
    border-bottom: 2px solid #0D9488 !important;
    color: #0F766E !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: #CCFBF1 !important;
}

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

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

.form-control:focus {
    border-color: #14B8A6 !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 148, 136, 0.15) !important;
}

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

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

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

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

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

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

.nav-tabs .nav-link:hover {
    color: #14B8A6 !important;
}

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

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

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

.page-link {
    color: #0D9488 !important;
}

.page-link:hover {
    color: #0F766E !important;
    background: #CCFBF1 !important;
}

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

.alert-primary {
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.1) 0%, rgba(20, 184, 166, 0.1) 100%) !important;
    border-color: #14B8A6 !important;
    color: #0F766E !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(8, 145, 178, 0.1) 0%, rgba(34, 211, 238, 0.1) 100%) !important;
    border-color: #22D3EE !important;
    color: #155E75 !important;
}

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

a {
    color: #0D9488;
    transition: color 0.2s ease;
}

a:hover {
    color: #0F766E;
}

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

.breadcrumb-item.active {
    color: #0D9488 !important;
}

.breadcrumb-item a {
    color: #64748b !important;
}

.breadcrumb-item a:hover {
    color: #0D9488 !important;
}

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

.dropdown-item.active,
.dropdown-item:active {
    background: #0D9488 !important;
}

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

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

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

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

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

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

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

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

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #0D9488 0%, #14B8A6 100%);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #0F766E 0%, #0D9488 100%);
}

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

.text-primary {
    color: #0D9488 !important;
}

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

.text-info {
    color: #0891B2 !important;
}

.border-primary {
    border-color: #0D9488 !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: #064E3B;
}

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

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

.auth-wrapper {
    background: linear-gradient(135deg, #064E3B 0%, #0D9488 50%, #14B8A6 100%) !important;
}

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

.auth-wrapper .btn-primary {
    background: linear-gradient(135deg, #0D9488 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(13, 148, 136, 0.3) !important;
}

.shadow-hover:hover {
    box-shadow: 0 8px 30px rgba(13, 148, 136, 0.25) !important;
}

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

@media (max-width: 992px) {
    .pcoded-navbar {
        background: linear-gradient(180deg, #064E3B 0%, #0D9488 100%) !important;
    }

    .pcoded-header.header-blue {
        background: #0D9488 !important;
    }
}

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

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

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

a:not(.btn):hover {
    color: #0F766E !important;
}

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

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

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

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

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

/* Focus states */
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    border-color: #14B8A6 !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 148, 136, 0.15) !important;
}

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

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #CCFBF1 !important;
    border-color: #14B8A6 !important;
    color: #0D9488 !important;
}

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

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

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

.border-primary {
    border-color: #0D9488 !important;
}

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

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

/* Textos principales mas oscuros y legibles */
body {
    color: #1e293b !important;
    background: #0D9488 !important;
}

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

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

p {
    color: #334155;
}

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

/* Placeholders */
::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}

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

.table thead th {
    color: #0F766E !important;
}

/* Breadcrumb */
.breadcrumb-item {
    color: #64748b !important;
}

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

/* Sidebar menu texto */
.pcoded-navbar .pcoded-inner-navbar > li > a .pcoded-mtext {
    color: rgba(255, 255, 255, 0.9) !important;
}

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

.dropdown-item:hover {
    color: #0D9488 !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: #64748b !important;
}

/* Page header title */
.page-header .page-header-title h5,
.pcoded-content .page-header h5 {
    color: #0f172a !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 background */
.pcoded-main-container {
    background: #f8fafc !important;
}

/* Sidebar caption */
.pcoded-navbar .pcoded-inner-navbar li.pcoded-menu-caption > label {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Nav icons in sidebar */
.pcoded-navbar .pcoded-inner-navbar > li > a > .pcoded-micon {
    color: rgba(255, 255, 255, 0.85) !important;
}

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

/* Flechitas del menu y submenu - BLANCAS */
.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu > a:after {
    color: rgba(255, 255, 255, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
}

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

.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li > a:before {
    border-color: #ffffff !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: #ffffff !important;
}

/* Badge in menu */
.pcoded-navbar .pcoded-badge {
    background: #2DD4BF !important;
    color: #064E3B !important;
}

/* User profile section */
.pcoded-navbar .pcoded-inner-navbar > li.nav-item.pcoded-menu-caption {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

/* Nombre del usuario y rol (Administrador) en blanco */
.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: #ffffff !important;
}

/* Viñetas/flechas del submenu en blanco */
.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: #ffffff !important;
    border-color: #ffffff !important;
}

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

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

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

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

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

.spinner-border.text-primary {
    color: #0D9488 !important;
}

.spinner-grow.text-primary {
    color: #0D9488 !important;
}

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

footer a {
    color: #0D9488 !important;
}

footer a:hover {
    color: #0F766E !important;
}

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

.swal2-styled.swal2-confirm {
    background: linear-gradient(135deg, #0D9488 0%, #14B8A6 100%) !important;
    border: none !important;
}

.swal2-styled.swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 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, #0D9488 0%, #14B8A6 100%) !important;
    border: none !important;
}

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

.toast-info {
    background: #0891B2 !important;
}