/* ===== Navbar theme variables (easy to tweak) ===== */
:root {
    --nav-bg-start: #1e3c72; /* deep indigo */
    --nav-bg-end: #2a5298;   /* rich sky blue */
    --nav-accent: #0ea5e9;   /* cyan accent */
    --nav-active-bg: #eaf3ff;
}
.sidebar {
    min-height: calc(100vh - 56px);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

.sidebar .nav-link {
    font-weight: 500;
    color: #333;
}

.sidebar .nav-link.active {
    color: #007bff;
    background-color: rgba(255,255,255,0.1);
    border-radius: 4px;
}

.login-container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#loginError {
    margin-top: 10px;
}

.navbar {
    margin-bottom: 20px;
}

.card {
    margin-bottom: 20px;
}

.visit-item {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 10px;
}

.badge {
    font-size: 0.9em;
    padding: 5px 10px;
}

.module {
    display: none;
}

.module.active {
    display: block;
}

/* Dashboard: mejoras tipográficas ligeramente más grandes y legibles */
#dashboard { line-height: 1.45; }
#dashboard .card-header { font-size: 1.06rem; }
#dashboard .list-group-item { font-size: 1rem; }
#dashboard .small { font-size: 0.925rem; }
#dashboard .display-4 { font-size: 3.9rem; }
#dashboard table thead th { font-size: 0.98rem; }
#dashboard table tbody td { font-size: 0.98rem; }
#dashboard .badge { font-size: 0.95rem; }

/* Imágenes e iframes responsive */
img, iframe { max-width: 100%; height: auto; }

/* Compensar navbar fija en móvil/desktop */
body { padding-top: 56px; }
@media (max-width: 575.98px) { body { padding-top: 60px; } }

/* Mapas responsivos en modales */
#clientMap, #visitMap { height: 350px; width: 100%; }
@media (max-width: 576.98px) {
    #clientMap, #visitMap { height: 45vh !important; }
}
@media (min-width: 577px) and (max-width: 991.98px) {
    #clientMap, #visitMap { height: 50vh !important; }
}

/* Tipografía responsive del dashboard en pantallas pequeñas */
@media (max-width: 768.98px) {
    #dashboard .display-4 { font-size: 2.6rem; }
    #dashboard .card-header { font-size: 1rem; }
    #dashboard table thead th, #dashboard table tbody td { font-size: 0.95rem; }
}
@media (max-width: 575.98px) {
    #dashboard .display-4 { font-size: 2.2rem; }
    #dashboard .small { font-size: 0.88rem; }
}

/* Tablas: en móvil mantener columnas en una sola línea y permitir scroll horizontal */
@media (max-width: 575.98px) {
    .table-responsive { -webkit-overflow-scrolling: touch; overflow-x: auto; }
    table.table td, table.table th { white-space: nowrap; word-break: normal; }
    table.table td, table.table th { padding: .5rem .5rem; }
    /* Ocultar columnas de baja prioridad en Clientes (Email y Coordenadas) para caber en móvil */
    #clientsModule table thead th:nth-child(5),
    #clientsModule table tbody td:nth-child(5),
    #clientsModule table thead th:nth-child(6),
    #clientsModule table tbody td:nth-child(6) { display: none; }
}

/* Encabezados de módulo: apilar controles en móviles */
@media (max-width: 575.98px) {
    #visitsModule .d-flex.justify-content-between,
    #usersModule .d-flex.justify-content-between {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    #visitsModule .d-flex.justify-content-between > h2,
    #visitsModule .d-flex.justify-content-between > div,
    #usersModule .d-flex.justify-content-between > h2,
    #usersModule .d-flex.justify-content-between > div {
        margin-bottom: .5rem;
    }
    /* Encabezado de Clientes (botones a la derecha) */
    #clientsModule .row.align-items-center { margin-bottom: .5rem; }
}

/* Modales a pantalla completa (mejor lectura en móvil) */
@media (max-width: 575.98px) {
    .modal-dialog { max-width: 100% !important; margin: .5rem; }
    .modal-body { padding: .75rem; }
}

/* Evitar scroll horizontal global accidental en móvil */
@media (max-width: 575.98px) {
    html, body { overflow-x: hidden; }
}

/* ===== Navbar mejorada ===== */
.navbar.navbar-dark.bg-dark {
    /* Fondo más elegante con degradado sutil y un poco de glass */
    background: linear-gradient(135deg, var(--nav-bg-start) 0%, var(--nav-bg-end) 100%) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
    border-bottom: 1px solid rgba(255,255,255,.06);
    -webkit-backdrop-filter: saturate(140%) blur(6px);
    backdrop-filter: saturate(140%) blur(6px);
}
.navbar .navbar-brand {
    font-weight: 700;
    letter-spacing: .3px;
    color: #ffffff;
}
.navbar .navbar-brand::after {
    content: '';
    display: inline-block;
    width: 8px; height: 8px;
    background: var(--nav-accent);
    border-radius: 50%;
    margin-left: 8px;
    box-shadow: 0 0 0 3px rgba(14,165,233,.22);
    transform: translateY(-2px);
}
.navbar .navbar-nav .nav-link {
    color: rgba(255,255,255,.78);
    padding: .45rem .9rem;
    margin: 0 .15rem;
    border-radius: 999px;
    font-weight: 500;
    transition: all .18s ease;
}
.navbar .navbar-nav .nav-link:hover {
    color: #fff;
    background: rgba(255,255,255,.10);
}
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link:focus.active {
    background: var(--nav-active-bg);
    color: #0b5ed7;
    border: 1px solid rgba(13,110,253,.22);
    box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 0 0 4px rgba(13,110,253,.12) inset;
}
.navbar .navbar-text { color: #e9ecef !important; }

/* Botón/menú de usuario más elegante */
.navbar .dropdown .btn-outline-light {
    color: #e9ecef;
    border-color: rgba(255,255,255,.28);
    background: rgba(255,255,255,.06);
    border-radius: 14px;
    padding: .4rem .8rem;
}
.navbar .dropdown .btn-outline-light:hover,
.navbar .dropdown .btn-outline-light:focus {
    color: #fff;
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.35);
    box-shadow: 0 0 0 3px rgba(255,255,255,.12) inset;
}
.navbar .dropdown-menu {
    border-radius: .6rem;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 12px 28px rgba(0,0,0,.28);
    padding: .35rem;
}
.navbar .dropdown-item {
    border-radius: .45rem;
}
.navbar .dropdown-item:hover {
    background: #f5f7fb;
}

/* Cerrar sesión (si existiera como botón suelto) */
.navbar #btnLogout.btn { border-radius: .6rem; padding: .38rem .8rem; }

/* Toggler más visible en móvil */
.navbar .navbar-toggler { border-color: rgba(255,255,255,.35); }
.navbar .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255,255,255,.25); }

/* Espaciado y colapso agradable en móvil */
@media (max-width: 991.98px) {
    .navbar .navbar-nav .nav-link { margin: .15rem 0; }
}