/* ═══════════════════════════════════════════════════════════════
   DIXITPREFIN — SISTEMA DE DISEÑO v1.0
   Paleta corporativa: #198754 (verde)
   Capa superior a Bootstrap 5.3 (no recompila, usa variables)
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens de diseño ──────────────────────────────────────── */
:root {
    /* Paleta corporativa — verde institucional con mejor contraste */
    --dp-primary: #198754;
    --dp-primary-700: #146c43;
    --dp-primary-800: #0f5132;
    --dp-primary-900: #0a3624;
    --dp-accent: #2ba763;
    --dp-accent-600: #1f8a52;

    /* Semánticos */
    --dp-success: #1a7f4b;
    --dp-warning: #b26a00;
    --dp-danger: #c0392b;
    --dp-info: #2c7da0;

    /* Superficies */
    --dp-bg: #f3f5f8;
    --dp-surface: #ffffff;
    --dp-border: #e3e8ef;
    --dp-border-strong: #c8d2dd;

    /* Texto — contraste reforzado para lectura en paneles claros */
    --dp-text: #1f3248;
    --dp-text-muted: #5c6e82;
    --dp-text-inverse: #ffffff;

    /* Radios y sombras */
    --dp-radius-sm: 6px;
    --dp-radius: 10px;
    --dp-radius-lg: 16px;
    --dp-shadow-sm: 0 1px 2px rgba(16, 35, 56, .06);
    --dp-shadow: 0 4px 16px rgba(16, 35, 56, .08);
    --dp-shadow-lg: 0 12px 32px rgba(16, 35, 56, .14);

    /* Tipografía */
    --dp-font: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

    /* Sobrescribe Bootstrap por el verde corporativo */
    --bs-primary: var(--dp-primary);
    --bs-primary-rgb: 25, 135, 84;
    --bs-primary-bg-subtle: #d1e7dd;
    --bs-primary-border-subtle: #a3cfbb;
    --bs-link-color: var(--dp-accent-600);
    --bs-link-hover-color: var(--dp-primary);
	
	       --sidebar-width: 250px;
            --sidebar-bg: #144d29; /* Color verde institucional completamente sólido */
            --sidebar-hover: rgba(255, 255, 255, 0.08); 
            --sidebar-text: #e2e8f0;
            --app-bg: #f4f6f9;
}

/* ── Base ──────────────────────────────────────────────────── */
html {
    font-size: 15px;
}

body { 
   
	background-color: var(--app-bg);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow-x: hidden;
			
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--dp-text);
    letter-spacing: -.01em;
}

.text-primary { color: var(--dp-primary) !important; }
.text-muted { color: var(--dp-text-muted) !important; }
.bg-primary { background-color: var(--dp-primary) !important; }
.border-primary { border-color: var(--dp-primary) !important; }
.bg-primary-subtle { background-color: var(--bs-primary-bg-subtle) !important; }

/* ==== CONTRASTE (regla UX) ====
   Sobre fondos oscuros o de color el texto va en BLANCO.
   Sobre fondos claros el texto va en OSCURO.
   El verde corporativo NUNCA se usa como color de letras encima de un
   panel de color, para que el texto nunca se pierda. */
.bg-primary:not(.bg-opacity-10):not(.bg-opacity-25):not(.bg-opacity-50):not(.bg-opacity-75),
.bg-gradient-primary,
.bg-success, .bg-danger, .bg-info, .bg-secondary, .bg-dark,
.card.bg-primary, .card.bg-success, .card.bg-danger,
.card.bg-info, .card.bg-secondary, .card.bg-dark,
.card.bg-gradient-primary {
    color: #ffffff !important;
}

.bg-primary:not(.bg-opacity-10):not(.bg-opacity-25):not(.bg-opacity-50):not(.bg-opacity-75) .card-title,
.bg-primary:not(.bg-opacity-10):not(.bg-opacity-25):not(.bg-opacity-50):not(.bg-opacity-75) h1,
.bg-primary:not(.bg-opacity-10):not(.bg-opacity-25):not(.bg-opacity-50):not(.bg-opacity-75) h2,
.bg-primary:not(.bg-opacity-10):not(.bg-opacity-25):not(.bg-opacity-50):not(.bg-opacity-75) h3,
.bg-primary:not(.bg-opacity-10):not(.bg-opacity-25):not(.bg-opacity-50):not(.bg-opacity-75) h4,
.bg-primary:not(.bg-opacity-10):not(.bg-opacity-25):not(.bg-opacity-50):not(.bg-opacity-75) h5,
.bg-primary:not(.bg-opacity-10):not(.bg-opacity-25):not(.bg-opacity-50):not(.bg-opacity-75) h6,
.bg-primary:not(.bg-opacity-10):not(.bg-opacity-25):not(.bg-opacity-50):not(.bg-opacity-75) label,
.bg-primary:not(.bg-opacity-10):not(.bg-opacity-25):not(.bg-opacity-50):not(.bg-opacity-75) small,
.bg-primary:not(.bg-opacity-10):not(.bg-opacity-25):not(.bg-opacity-50):not(.bg-opacity-75) i,
.bg-primary:not(.bg-opacity-10):not(.bg-opacity-25):not(.bg-opacity-50):not(.bg-opacity-75) a,
.bg-gradient-primary .card-title,
.bg-gradient-primary h1, .bg-gradient-primary h2, .bg-gradient-primary h3,
.bg-gradient-primary h4, .bg-gradient-primary h5, .bg-gradient-primary h6,
.bg-gradient-primary label, .bg-gradient-primary small,
.bg-gradient-primary i, .bg-gradient-primary a,
.bg-success .card-title,
.bg-success h1, .bg-success h2, .bg-success h3,
.bg-success h4, .bg-success h5, .bg-success h6,
.bg-success label, .bg-success small, .bg-success i, .bg-success a,
.bg-danger .card-title,
.bg-danger h1, .bg-danger h2, .bg-danger h3,
.bg-danger h4, .bg-danger h5, .bg-danger h6,
.bg-danger label, .bg-danger small, .bg-danger i, .bg-danger a,
.bg-info .card-title,
.bg-info h1, .bg-info h2, .bg-info h3,
.bg-info h4, .bg-info h5, .bg-info h6,
.bg-info label, .bg-info small, .bg-info i, .bg-info a,
.bg-secondary .card-title,
.bg-secondary h1, .bg-secondary h2, .bg-secondary h3,
.bg-secondary h4, .bg-secondary h5, .bg-secondary h6,
.bg-secondary label, .bg-secondary small, .bg-secondary i, .bg-secondary a,
.bg-dark .card-title,
.bg-dark h1, .bg-dark h2, .bg-dark h3,
.bg-dark h4, .bg-dark h5, .bg-dark h6,
.bg-dark label, .bg-dark small, .bg-dark i, .bg-dark a {
    color: #ffffff !important;
}

/* Paneles claros: el texto va oscuro (nunca verde ni blanco) */
.card-header,
.card-header.bg-light,
.card-header.bg-white,
.bg-light, .bg-white {
    color: var(--dp-text) !important;
}

.card-header.bg-light h1, .card-header.bg-light h2,
.card-header.bg-light h3, .card-header.bg-light h4,
.card-header.bg-light h5, .card-header.bg-light h6,
.card-header.bg-white h1, .card-header.bg-white h2,
.card-header.bg-white h3, .card-header.bg-white h4,
.card-header.bg-white h5, .card-header.bg-white h6 {
    color: var(--dp-text) !important;
}

/* Fondo verde suave (subtle): el verde se oscurece para seguir legible */
.bg-primary-subtle .text-primary,
.bg-primary-subtle h1, .bg-primary-subtle h2, .bg-primary-subtle h3,
.bg-primary-subtle h4, .bg-primary-subtle h5, .bg-primary-subtle h6 {
    color: var(--dp-primary-800) !important;
}

/* Los títulos que viven en secciones de fondo oscuro reciben sombra sutil */
.bg-primary h1, .bg-primary h2, .bg-primary h3,
.bg-primary h4, .bg-primary h5, .bg-primary h6,
.bg-primary .card-title,
.bg-gradient-primary h1, .bg-gradient-primary h2, .bg-gradient-primary h3,
.bg-gradient-primary h4, .bg-gradient-primary h5, .bg-gradient-primary h6 {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}

/* ── Botones ───────────────────────────────────────────────── */
.btn {
    border-radius: var(--dp-radius-sm);
    font-weight: 500;
    transition: all .18s ease;
}

.btn-primary {
    --bs-btn-bg: var(--dp-primary);
    --bs-btn-border-color: var(--dp-primary);
    --bs-btn-hover-bg: var(--dp-primary-700);
    --bs-btn-hover-border-color: var(--dp-primary-700);
    --bs-btn-active-bg: var(--dp-primary-800);
    --bs-btn-active-border-color: var(--dp-primary-800);
    --bs-btn-disabled-bg: var(--dp-primary);
    --bs-btn-disabled-border-color: var(--dp-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--dp-primary);
    --bs-btn-border-color: var(--dp-primary);
    --bs-btn-hover-bg: var(--dp-primary);
    --bs-btn-hover-border-color: var(--dp-primary);
    --bs-btn-active-bg: var(--dp-primary);
    --bs-btn-active-border-color: var(--dp-primary);
}

.btn-outline-primary:hover { color: #fff; }

.btn-sm { border-radius: var(--dp-radius-sm); }

/* ── Tarjetas ──────────────────────────────────────────────── */
.card {
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius);
    box-shadow: var(--dp-shadow-sm);
}

.card-header {
    background-color: #f8fafc;
    border-bottom: 1px solid var(--dp-border);
    font-weight: 600;
    color: var(--dp-primary);
}

/* Headers con fondo del color corporativo: texto blanco a máximo contraste */
.card-header.bg-primary,
.card-header.bg-success,
.card-header.bg-info,
.card-header.bg-warning,
.card-header.bg-danger {
    color: #ffffff !important;
}

.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6 {
    margin: 0;
}

/* Paneles con fondo verde sólido: fondo ligeramente más oscuro y
   sombra de texto para que las letras no se pierdan sobre el color. */
.card-header.bg-primary,
.card-header.bg-gradient-primary {
    background-color: var(--dp-primary-700) !important;
    background-image: linear-gradient(90deg, var(--dp-primary-700) 0%, var(--dp-primary) 100%) !important;
}

.card-header.bg-primary h1, .card-header.bg-primary h2,
.card-header.bg-primary h3, .card-header.bg-primary h4,
.card-header.bg-primary h5, .card-header.bg-primary h6,
.card-header.bg-primary .card-title {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}

/* Texto sobre cual cualquier panel verde: legibilidad reforzada */
.bg-primary h1, .bg-primary h2, .bg-primary h3,
.bg-primary h4, .bg-primary h5, .bg-primary h6,
.bg-primary .card-title {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}

.card.card-accent {
    border-top: 3px solid var(--dp-primary);
}

/* ── Tablas ────────────────────────────────────────────────── */
.table thead th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--dp-primary-700);
    border-bottom: 2px solid var(--dp-border-strong);
    background-color: #f8fafc;
    white-space: nowrap;
}

.table td {
    vertical-align: middle;
}

.table-hover > tbody > tr:hover {
    background-color: var(--bs-primary-bg-subtle);
}

/* Cabeceras oscuras dentro de tablas (título con fondo primario) */
.table thead.thead-dark,
.tbl thead.thead-dark th {
    background-color: var(--dp-primary-700) !important;
    color: #ffffff !important;
}

/* Pie de tabla con totales resaltado legible */
.table tfoot.table-info {
    background-color: #d1e7dd;
}

.table tfoot.table-info th,
.table tfoot.table-info td {
    color: var(--dp-primary-700);
    font-weight: 700;
}

/* ── Formularios ───────────────────────────────────────────── */
.form-control,
.form-select {
    color: var(--dp-text);
    background-color: #ffffff;
    border: 1px solid var(--dp-border-strong);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--dp-accent);
    box-shadow: 0 0 0 .25rem rgba(25, 135, 84, .15);
}

.form-control[readonly],
.form-control[disabled] {
    background-color: #f1f5f9;
    color: var(--dp-text-muted);
}

.form-label {
    font-weight: 600;
    font-size: .82rem;
    color: var(--dp-text);
    margin-bottom: .35rem;
}

.input-group-text {
    color: var(--dp-text);
    background-color: #f8fafc;
}

/* ── Badges ────────────────────────────────────────────────── */
.badge {
    font-weight: 600;
    letter-spacing: .02em;
}

.badge.bg-success { background-color: var(--dp-success) !important; }
.badge.bg-warning { background-color: var(--dp-warning) !important; color: #fff !important; }
.badge.bg-danger { background-color: var(--dp-danger) !important; }
.badge.bg-info { background-color: var(--dp-info) !important; }
.badge.bg-primary { background-color: var(--dp-primary) !important; color: #fff !important; }
.badge.bg-secondary { color: #fff !important; }

/* Badges con variante suave para no quebrar el contraste sobre paneles claros */
.badge.bg-light.text-primary,
.badge.bg-white.text-primary {
    color: var(--dp-primary) !important;
    border: 1px solid var(--dp-border-strong);
}

/* ── Enlaces / Navbar ──────────────────────────────────────── */
a { color: var(--bs-link-color); }
a:hover { color: var(--bs-link-hover-color); }

.navbar {
    background-color: var(--dp-surface) !important;
    border-bottom: 1px solid var(--dp-border);
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT — Sidebar oscuro corporativo
   ═══════════════════════════════════════════════════════════════ */
#wrapper {
display: flex; width: 100%; align-items: stretch; 
}

#sidebar-wrapper {
 min-width: var(--sidebar-width);
            max-width: var(--sidebar-width);
            background-color: var(--sidebar-bg) !important;
            background-image: none !important;
            color: var(--sidebar-text);
            min-height: 100vh;
            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}

#page-content-wrapper {
width: 100%; min-width: 0;
}

#wrapper.toggled #sidebar-wrapper {
    margin-left: -250px;
}

/* Marca / logo */
 .sidebar-brand { padding: 20px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.05); }
        .sidebar-brand h5 { margin-top: 10px; font-weight: 700; color: #ffffff; letter-spacing: 1px;}
        .sidebar-brand small { color: rgba(255,255,255,0.6); font-size: 0.75rem; }
        .sidebar-nav { display: flex; flex-direction: column; padding: 10px 0; }
        .sidebar-link { padding: 12px 20px; color: var(--sidebar-text); text-decoration: none; display: flex; align-items: center; font-size: 0.85rem; font-weight: 500;}
        .sidebar-link i:first-child { width: 25px; font-size: 1rem; margin-right: 10px; color: rgba(255,255,255,0.5); }
        .sidebar-link:hover, .sidebar-link.active { background-color: var(--sidebar-hover); color: #ffffff; border-left: 4px solid #28a745; padding-left: 16px; }
        .sidebar-link.active i:first-child, .sidebar-link:hover i:first-child { color: #ffffff; }
 .sidebar-section { display: flex;align-items: center;  justify-content: space-between; cursor: pointer;padding: 15px 20px 5px; font-size: 0.7rem; text-transform: uppercase; color: rgba(255,255,255,0.5); font-weight: 700; letter-spacing: 1px;}
  

.sidebar-footer {
    margin-top: auto;
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: .72rem;
    color: rgba(255, 255, 255, .5);
    text-align: center;
}
.top-navbar { background-color: #ffffff; border-bottom: 1px solid rgba(0,0,0,0.05); }

/* ═══════════════════════════════════════════════════════════════
   ENCABEZADO DE PÁGINA (componente _PageHeader)
   ═══════════════════════════════════════════════════════════════ */
.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.page-header-title {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.page-header-icon {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--dp-radius);
    background: linear-gradient(135deg, var(--dp-primary) 0%, var(--dp-accent) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    box-shadow: var(--dp-shadow);
    flex-shrink: 0;
}

.page-header-title h1 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.1;
}

.page-header-title p {
    margin: .2rem 0 0;
    color: var(--dp-text-muted);
    font-size: .86rem;
}

.page-header-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD — KPIs
   ═══════════════════════════════════════════════════════════════ */
.top-navbar { background-color: #ffffff; border-bottom: 1px solid rgba(0,0,0,0.05); }
.kpi-card {
            background-color: #ffffff;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
            border: 1px solid rgba(0,0,0,0.04);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            height: 100%;
        }
        .kpi-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
        }
        .kpi-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: #6c757d; margin-bottom: 0.3rem; letter-spacing: 0.5px;}
        .kpi-value { font-size: 1.8rem; font-weight: 800; color: #212529; margin-bottom: 0; line-height: 1;}
        
        .icon-circle {
            width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
        }
        .bg-light-success { background-color: rgba(25, 135, 84, 0.12); color: #198754; }
        .bg-light-secondary { background-color: rgba(108, 117, 125, 0.12); color: #6c757d; }
        .bg-light-warning { background-color: rgba(255, 193, 7, 0.15); color: #d39e00; }
        .bg-light-info { background-color: rgba(13, 202, 240, 0.12); color: #0dcaf0; }

        .border-left-success { border-left: 4px solid #198754 !important; }
        .border-left-secondary { border-left: 4px solid #6c757d !important; }
        .border-left-warning { border-left: 4px solid #ffc107 !important; }
        .border-left-info { border-left: 4px solid #0dcaf0 !important; }

        .chart-placeholder { background-color: #fff; border-radius: 12px; border: 1px solid rgba(0,0,0,0.04); box-shadow: 0 4px 15px rgba(0,0,0,0.02); padding: 20px;}
    
/* ── Notificaciones / toasts ───────────────────────────────── */
.alert {
    border-radius: var(--dp-radius);
    border: 0;
}

/* ── Footer ─────────────────────────────────────────────────── */
.footer {
    background: transparent;
    color: var(--dp-text-muted);
    border-top: 1px solid var(--dp-border);
}

/* ── Animaciones ────────────────────────────────────────────── */
.fade-in {
    opacity: 0;
}

.fade-in.show {
    opacity: 1;
    transition: opacity .3s ease;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    #sidebar-wrapper {
        margin-left: -250px;
        position: fixed;
        box-shadow: var(--dp-shadow-lg);
    }

    #wrapper.toggled #sidebar-wrapper {
        margin-left: 0;
    }

    .page-header-title h1 {
        font-size: 1.15rem;
    }
}

/* Sem�foro de riesgo (Bootstrap 5.3 no trae bg-orange) */
.bg-semaforo-naranja {
    background-color: #fd7e14 !important;
    color: #fff !important;
}