/* Estilos para el modo oscuro */
body.dark-mode {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

.dark-mode .navbar-custom {
    background-color: #1f1f1f !important;
}

.dark-mode .navbar-toggler-icon {
    filter: invert(1);
}

.dark-mode .navbar-nav .nav-link {
    color: #e0e0e0 !important;
}

.dark-mode .card {
    background-color: #1f1f1f !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

.dark-mode h2,
.dark-mode h5 {
    color: #fff !important;
}

.dark-mode .form-label,
.dark-mode .form-check-label {
    color: #e0e0e0 !important;
}

.dark-mode .form-control {
    background-color: #333 !important;
    color: #e0e0e0 !important;
    border-color: #949393 !important;
}

.dark-mode .form-control::placeholder {
    color: #999 !important;
    opacity: 1;
}

.dark-mode .form-control:focus {
    background-color: #444 !important;
    color: #fff !important;
    border-color: #6c757d !important;
    box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.25) !important;
}

.dark-mode .text-muted {
    color: #999 !important;
}

.dark-mode .alert {
    background-color: #1f1f1f !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

.dark-mode .btn-secondary {
    background-color: #444 !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

.dark-mode .table .btn-info {
    color: #fff !important;
    background-color: #17a2b8 !important;
    border-color: #17a2b8 !important;
}

.dark-mode .table .btn-primary {
    color: #fff !important;
    background-color: #007bff !important;
    border-color: #007bff !important;
}

.dark-mode .autocomplete-list {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    color: white !important;
}

.dark-mode .autocomplete-list-item:hover {
    background-color: #495057 !important;
}

/* Estilo para resaltar campos de "Porte Debido" en modo oscuro */
.dark-mode .highlight-fields {
    background-color: rgba(255, 82, 82, 0.3) !important; /* Un rojo más visible en fondos oscuros */
    border-color: #ff5252 !important;
}

/* Estilos para el modo claro y generales */
.navbar-custom {
    background-color: #f8f9fa;
    padding: 1rem 2rem;
}

.navbar-custom .logo {
    max-width: 150px;
}

.navbar-custom .nav-link {
    font-weight: 500;
}

.form-check.form-switch {
    display: flex;
    align-items: center;
    margin-right: 1rem;
}

.autocomplete-container {
    position: relative;
}

.autocomplete-list {
    position: absolute;
    z-index: 1000;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-top: none;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 5px 5px;
}

.autocomplete-list-item {
    padding: 8px 12px;
    cursor: pointer;
}

.autocomplete-list-item:hover {
    background-color: #f1f1f1;
}

.highlight-fields {
    background-color: rgba(255, 192, 203, 0.2) !important;
    border-color: #ff69b4 !important;
    transition: all 0.3s ease-in-out;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

.form-compact .row-spaced {
    margin-bottom: 0.5rem;
}

.provincia-input {
    width: 80px;
    text-align: center;
    background-color: #e9ecef;
    border-color: #ced4da;
    color: #6c757d;
    font-weight: bold;
}

.cp-input {
    width: 90px;
}

.card-border-blue {
    border: 1px solid #007bff;
}

.checkbox-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* --- SOLUCIÓN: Regla específica para el borde azul en modo oscuro --- */
body.dark-mode .card-border-blue {
    border-color: #007bff !important;
}


/* --- Estilos para la página de Clientes (clientes.php) --- */

.tabla-clientes {
    font-size: 0.85rem;
}

.sortable-header {
    cursor: pointer;
    user-select: none;
}

/* Iconos de ordenación en la cabecera de la tabla oscura */
.table-dark .sortable-header .fa-sort {
    color: #a0a0a0; /* Color atenuado para el icono de ordenación inactivo */
}

.table-dark .sortable-header:hover .fa-sort,
.table-dark .sortable-header .fa-sort-up,
.table-dark .sortable-header .fa-sort-down {
    color: #fff; /* Color blanco para iconos activos o al pasar el ratón */
}


/* --- ESTILOS UNIFICADOS PARA TABLAS EN MODO OSCURO (Usando CSS Variables) --- */

/* Al activar el modo oscuro, redefinimos las variables de color que usa Bootstrap para las tablas */
body.dark-mode .table {
    /* Variables principales */
    --bs-table-color: #e0e0e0;
    --bs-table-bg: #212529;
    --bs-table-border-color: #373b3e;

    /* Variables para tablas rayadas (striped) - aunque no la uses ahora, es bueno tenerlo */
    --bs-table-striped-color: #e0e0e0;
    --bs-table-striped-bg: #2c3034;
    
    /* Variables para el efecto hover */
    --bs-table-hover-color: #fff;
    --bs-table-hover-bg: #32383e;
}

/* Estilo adicional para la cabecera, para asegurar consistencia */
body.dark-mode .table > thead {
    color: #fff;
    background-color: #343a40;
}

/* --- Correcciones para otros componentes de Bootstrap en Modo Oscuro --- */

/* 1. Barra de Navegación (Navbar) */
body.dark-mode .navbar.bg-light {
    background-color: #1f1f1f !important; /* Fondo oscuro */
}

/* Cambiar color del texto y enlaces de la navbar */
body.dark-mode .navbar.navbar-light .navbar-nav .nav-link,
body.dark-mode .navbar.navbar-light .navbar-brand,
body.dark-mode .navbar.navbar-light .form-check-label {
    color: #e0e0e0 !important; /* Texto claro */
}

/* Cambiar color del icono del menú hamburguesa (toggler) */
body.dark-mode .navbar.navbar-light .navbar-toggler-icon {
    filter: invert(1) grayscale(100%) brightness(200%);
}