/* =========================
   DARK MODE (Refinado)
========================= */

body.dark-mode {
    background-color: #121212;
    color: #e4e6eb;
}

/* Links */
body.dark-mode a {
    color: #9cc3ff;
}

/* Navbar */
body.dark-mode .navbar {
    background-color: #1e1e1e !important;
}

/* Cards */
body.dark-mode .card {
    background-color: #1e1e1e;
    color: #e4e6eb;
    border-color: #2c2c2c;
}
body.dark-mode .card-header {
    background-color: #222;
    color: #e4e6eb;
    border-color: #2c2c2c;
}

/* Tables */
body.dark-mode .table {
    color: #e4e6eb;
}
body.dark-mode .table thead,
body.dark-mode .table-dark {
    background-color: #2a2a2a !important;
    color: #e4e6eb !important;
}
body.dark-mode .table-bordered,
body.dark-mode .table-bordered td,
body.dark-mode .table-bordered th {
    border-color: #333 !important;
}
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
    color: #e4e6eb;
    background-color: rgba(255, 255, 255, 0.03);
}

/* Background helpers (los “blancos” que quieres tipo Clientes/Planes) */
body.dark-mode .bg-white {
    background-color: #1e1e1e !important;
}
body.dark-mode .bg-light {
    background-color: #1e1e1e !important;
}

/* Text helpers: AQUÍ se arregla lo de "6 de 6..." y textos apagados */
body.dark-mode .text-muted {
    color: #b0b3b8 !important;
}
body.dark-mode .text-white-50 {
    color: #b0b3b8 !important;
}
body.dark-mode .text-dark {
    color: #e4e6eb !important;
}

/* Inputs / selects */
body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: #232323;
    color: #e4e6eb;
    border-color: #444;
}
body.dark-mode .form-control::placeholder {
    color: #9aa0a6;
}
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    border-color: #666;
    box-shadow: 0 0 0 .25rem rgba(255,255,255,0.08);
}

/* Opciones del select (mejora en algunos navegadores) */
body.dark-mode select option {
    background-color: #232323;
    color: #e4e6eb;
}

/* Alerts (aquí se arregla lo de pagar: nombre/cédula que no se aprecia) */
body.dark-mode .alert {
    color: #e4e6eb;
    border-color: #3a3a3a;
}
body.dark-mode .alert-secondary {
    background-color: #1f1f1f;
}
body.dark-mode .alert-success {
    background-color: #12311f;
}
body.dark-mode .alert-danger {
    background-color: #3a1414;
}
body.dark-mode .alert-warning {
    background-color: #3a2b12;
}
body.dark-mode .alert-info {
    background-color: #102a3a;
}

/* Buttons: arregla filtros "Hoy / Mes" que se ven pero no se distinguen */
body.dark-mode .btn {
    border-color: #444;
}
body.dark-mode .btn-outline-secondary,
body.dark-mode .btn-outline-primary,
body.dark-mode .btn-outline-success,
body.dark-mode .btn-outline-danger,
body.dark-mode .btn-outline-warning,
body.dark-mode .btn-outline-info,
body.dark-mode .btn-outline-dark,
body.dark-mode .btn-outline-light {
    color: #e4e6eb !important;
    border-color: #666 !important;
}
body.dark-mode .btn-outline-secondary:hover,
body.dark-mode .btn-outline-primary:hover,
body.dark-mode .btn-outline-success:hover,
body.dark-mode .btn-outline-danger:hover,
body.dark-mode .btn-outline-warning:hover,
body.dark-mode .btn-outline-info:hover,
body.dark-mode .btn-outline-dark:hover,
body.dark-mode .btn-outline-light:hover {
    background-color: #2a2a2a !important;
}

/* Botón activo (para grupos tipo Hoy/Mes) */
body.dark-mode .btn.active,
body.dark-mode .btn-check:checked + .btn {
    background-color: #2a2a2a !important;
    border-color: #888 !important;
    color: #fff !important;
}

/* Badges */
body.dark-mode .badge {
    border: 1px solid rgba(255,255,255,0.08);
}

/* “Total mostrado: monto” o textos dentro de contenedores */
body.dark-mode .border,
body.dark-mode .border-top,
body.dark-mode .border-bottom {
    border-color: #333 !important;
}

/* Dropdowns / menús */
body.dark-mode .dropdown-menu {
    background-color: #1e1e1e;
    color: #e4e6eb;
    border-color: #333;
}
body.dark-mode .dropdown-item {
    color: #e4e6eb;
}
body.dark-mode .dropdown-item:hover {
    background-color: #2a2a2a;
}

/* Modals */
body.dark-mode .modal-content {
    background-color: #1e1e1e;
    color: #e4e6eb;
}

/* HR */
body.dark-mode hr {
    border-color: #333;
}