/*
 * Skin visual inspirado en TailAdmin (paleta, tipografía "Outfit", radios
 * y sombras extraídos de su archivo de tema Tailwind), aplicado como capa
 * de estilo sobre Bootstrap 5 -- no reemplaza el framework ni requiere
 * un pipeline de build, solo re-tiñe los componentes ya existentes
 * (.navbar, .sidebar, .card, .btn, badges) reutilizando las variables
 * CSS de Bootstrap 5 para no tocar el marcado de las vistas.
 */

:root {
    --bs-font-sans-serif: 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    --bs-primary: #465fff;
    --bs-primary-rgb: 70, 95, 255;
    --bs-success: #12b76a;
    --bs-success-rgb: 18, 183, 106;
    --bs-danger: #f04438;
    --bs-danger-rgb: 240, 68, 56;
    --bs-warning: #f79009;
    --bs-warning-rgb: 247, 144, 9;
    --bs-info: #0ba5ec;
    --bs-info-rgb: 11, 165, 236;
    --bs-secondary: #667085;
    --bs-secondary-rgb: 102, 112, 133;

    --bs-border-radius: .625rem;
    --bs-border-radius-sm: .5rem;
    --bs-border-radius-lg: .75rem;

    --ta-gray-50: #f9fafb;
    --ta-gray-100: #f2f4f7;
    --ta-gray-200: #e4e7ec;
    --ta-gray-400: #98a2b3;
    --ta-gray-500: #667085;
    --ta-gray-700: #344054;
    --ta-gray-800: #1d2939;
    --ta-brand-50: #ecf3ff;
    --ta-brand-500: #465fff;
    --ta-shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, .05);
    --ta-shadow-sm: 0 1px 3px 0 rgba(16, 24, 40, .1), 0 1px 2px 0 rgba(16, 24, 40, .06);
}

body {
    font-family: var(--bs-font-sans-serif);
    background: var(--ta-gray-50);
    color: var(--ta-gray-700);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ta-gray-800);
}

/* ---------- Cabecera ---------- */
.navbar {
    background-color: #fff !important;
    border-bottom: 1px solid var(--ta-gray-200);
    box-shadow: var(--ta-shadow-xs);
}
.navbar .navbar-brand,
.navbar .text-light,
.navbar .small {
    color: var(--ta-gray-800) !important;
}
.navbar-brand {
    font-weight: 600;
}
.navbar .btn-outline-light {
    color: var(--ta-gray-700) !important;
    border-color: var(--ta-gray-200) !important;
}
.navbar .btn-outline-light:hover {
    background: var(--ta-gray-100) !important;
    color: var(--ta-gray-800) !important;
}
.navbar svg { vertical-align: -3px; }

/* ---------- Sidebar ---------- */
.sidebar {
    background: #fff;
    border-right: 1px solid var(--ta-gray-200);
}
.sidebar .nav-link {
    color: var(--ta-gray-700);
    border-radius: var(--bs-border-radius);
    padding: .65rem .85rem;
    font-weight: 500;
}
.sidebar .nav-link svg {
    margin-right: .4rem;
    vertical-align: -5px;
}
.sidebar .nav-link:hover:not(.disabled) {
    background: var(--ta-gray-100);
    color: var(--ta-gray-800);
}
.sidebar .nav-link.active {
    background: var(--ta-brand-50);
    color: var(--ta-brand-500);
    font-weight: 600;
}
.sidebar .nav-link.disabled {
    color: var(--ta-gray-400);
}

/* ---------- Tarjetas ---------- */
.card {
    border: 1px solid var(--ta-gray-200);
    border-radius: 1rem;
    box-shadow: var(--ta-shadow-xs);
}
.card-header {
    background: #fff;
    border-bottom: 1px solid var(--ta-gray-200);
    font-weight: 600;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

/* ---------- Login ---------- */
body.auth-body {
    background: #fff;
}
.auth-card {
    border: 1px solid var(--ta-gray-200);
    border-radius: 1rem;
    box-shadow: var(--ta-shadow-sm);
}
.login-logo {
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--ta-gray-800);
}

/* ---------- Tarjetas de métricas (dashboard) ---------- */
.metric-card {
    border: 1px solid var(--ta-gray-200);
    border-radius: 1rem;
    background: #fff;
    box-shadow: var(--ta-shadow-xs);
    padding: 1.25rem;
}
.metric-card .metric-icon {
    width: 3rem;
    height: 3rem;
    border-radius: .75rem;
    background: var(--ta-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ta-gray-800);
    margin-bottom: 1rem;
}
.metric-card .metric-label {
    color: var(--ta-gray-500);
    font-size: .875rem;
}
.metric-card .metric-value {
    color: var(--ta-gray-800);
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
}