/**
 * KME Dashboard - Tabler + paleta KME (navy, blue, gold)
 */

:root {
    --kme-blue: #101faf;
    --kme-navy: #0A192F;
    --kme-gold: #FFD700;
    --kme-gray: #f4f6f8;
    --kme-success: #2fb344;
    --kme-sidebar: #f4f6f8;  /* Igual que el panel (fondo claro) */
    --kme-bar-bg: #e8eef7;   /* Fondo barra rastreo/tarifas */
}

/* Override Tabler primary con KME blue */
body {
    --tblr-primary: var(--kme-blue);
    --tblr-primary-rgb: 16, 31, 175;
}

/* Sidebar: logo en blanco; zona de menú con navy más claro (no tan oscuro) */
.navbar-vertical.navbar {
    background-color: var(--kme-sidebar) !important;
    width: 15rem;
}

.navbar-vertical .navbar-brand {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background-color: #fff !important;
    width: 100%;
    max-width: 100%;
}

.sidebar-logo {
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.sidebar-logo-img {
    height: 52px;
    width: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
}

.sidebar-logo-text {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--kme-navy);
}

.sidebar-logo-text small {
    font-size: 0.65rem;
    font-weight: 500;
    color: #666;
}

.sidebar-logo-text .text-warning {
    color: var(--kme-gold) !important;
}

.navbar-vertical .nav-link {
    color: var(--kme-navy);
    opacity: 0.85;
}

.navbar-vertical .nav-link:hover {
    color: var(--kme-blue);
    background-color: rgba(16, 31, 175, 0.06);
    opacity: 1;
}

.navbar-vertical .nav-link.active {
    color: var(--kme-blue);
    background-color: rgba(16, 31, 175, 0.08);
    border-left: 3px solid var(--kme-gold);
    opacity: 1;
}

.navbar-vertical .nav-link-icon {
    color: var(--kme-navy);
    opacity: 0.7;
}

.navbar-vertical .nav-link.active .nav-link-icon {
    color: var(--kme-gold);
    opacity: 1;
}

.navbar-vertical .nav-link.text-danger {
    color: #dc3545 !important;
}

.navbar-vertical .nav-link.text-danger .nav-link-icon {
    color: #dc3545 !important;
}

.navbar-vertical .border-secondary {
    border-color: rgba(10, 25, 47, 0.12) !important;
}

/* Page wrapper margin cuando sidebar está visible */
@media (min-width: 992px) {
    .page-wrapper {
        margin-left: 15rem;
    }
}

/* Barra rastreo/tarifas: fondo suave para que no sea tan clara */
.dashboard-tracking-bar {
    background-color: var(--kme-bar-bg);
    border: 1px solid rgba(16, 31, 175, 0.12);
    box-shadow: 0 1px 3px rgba(10, 25, 47, 0.06);
}

.dashboard-tracking-bar .dashboard-tab.active {
    color: var(--kme-blue) !important;
    border-bottom: 2px solid var(--kme-blue);
}

.dashboard-tracking-bar .form-control.bg-light {
    border-radius: 0.5rem;
    background-color: #fff !important;
}

.btn-kme-gold {
    background-color: var(--kme-gold);
    color: var(--kme-navy);
    border: none;
    border-radius: 0.5rem;
}

.btn-kme-gold:hover {
    background-color: #e6c200;
    color: var(--kme-navy);
}

/* Cards y enlaces primary = KME blue */
.card .text-primary,
.table .text-primary,
a.text-primary {
    color: var(--kme-blue) !important;
}

.btn-primary {
    background-color: var(--kme-blue);
    border-color: var(--kme-blue);
}

.btn-primary:hover {
    background-color: #0a1a8a;
    border-color: #0a1a8a;
}

.btn-ghost-primary:hover {
    background-color: rgba(16, 31, 175, 0.1);
    color: var(--kme-blue);
}

/* Avatar usuario en header */
.avatar-title.bg-primary-lt {
    background-color: rgba(16, 31, 175, 0.15);
    color: var(--kme-blue);
}

/* Badges de estado */
.bg-primary-lt { background-color: rgba(16, 31, 175, 0.12); color: var(--kme-blue); }
.bg-success-lt { background-color: rgba(47, 179, 68, 0.15); color: var(--kme-success); }
.bg-warning-lt { background-color: rgba(245, 159, 0, 0.15); color: var(--kme-gold); }

/* Notificación */
.bg-red { background-color: #dc3545; }

/* Chart container (admin) */
.chart-lg {
    position: relative;
    height: 220px;
}

.card-body .chart-lg[style*="max-width"] {
    height: 210px;
    margin: 0 auto;
}

.legend-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    margin-right: 0.25rem;
    vertical-align: middle;
}