/* ═══════════════════════════════════════════
   GLOBAL — SafaCar Design System
═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --brand-blue:    #1a73e8;
    --brand-blue-dk: #1557b0;
    --brand-green:   #1abc9c;
    --surface:       #f4f6fb;
    --card-bg:       #ffffff;
    --text-main:     #1c2340;
    --text-muted:    #6c757d;
    --radius-lg:     16px;
    --radius-md:     10px;
    --shadow-sm:     0 2px 12px rgba(0,0,0,0.06);
    --shadow-md:     0 6px 24px rgba(0,0,0,0.10);
    --shadow-hover:  0 12px 32px rgba(26,115,232,0.15);
    --transition:    0.22s ease;
}

/* ─── Base ─────────────────────────────── */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--surface);
    color: var(--text-main);
}

/* ─── Navbar ────────────────────────────── */
.navbar-custom {
    background: #ffffff;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
    padding: 0.65rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.navbar-custom .navbar-brand {
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--text-main);
    display: flex;
    align-items: center;
    letter-spacing: -0.3px;
}

.navbar-custom .navbar-brand img {
    height: 42px;
    margin-right: 10px;
    border-radius: 8px;
}

.navbar-custom .nav-link {
    font-weight: 500;
    font-size: 0.92rem;
    color: var(--text-muted);
    margin: 0 4px;
    transition: color var(--transition), background-color var(--transition);
    border-radius: 8px;
    padding: 7px 14px !important;
}

.navbar-custom .nav-link:hover,
.navbar-custom .nav-link.active {
    color: var(--brand-blue);
    background-color: #eef3fd;
}

/* ─── Buttons ───────────────────────────── */
.custom-btn {
    background: linear-gradient(135deg, var(--brand-blue), #3c8ef3);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    border-radius: 10px;
    transition: all var(--transition);
    box-shadow: 0 4px 12px rgba(26,115,232,0.25);
}

.custom-btn:hover {
    background: linear-gradient(135deg, var(--brand-blue-dk), var(--brand-blue));
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(26,115,232,0.35);
}

.custom-btn-outline {
    border: 2px solid var(--brand-blue);
    color: var(--brand-blue);
    font-weight: 600;
    background: transparent;
    border-radius: 10px;
    transition: all var(--transition);
}

.custom-btn-outline:hover {
    background: var(--brand-blue);
    color: #fff;
}

/* ─── Main container ───────────────────── */
.main-container {
    min-height: 80vh;
    background: transparent;
    padding: 2rem 1rem;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

/* ─── Cards (viajes) ────────────────────── */
.card {
    border: none;
    border-radius: var(--radius-lg);
    background: var(--card-bg);
}

.card-viaje {
    border: none !important;
    border-left: 4px solid var(--brand-blue) !important;
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
    overflow: hidden;
}

.card-viaje:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

/* ─── Search / Filter card ─────────────── */
.filter-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(26,115,232,0.08);
}

.filter-card .form-control,
.filter-card .form-select {
    border-radius: 10px;
    border: 1.5px solid #dee2e6;
    font-size: 0.9rem;
    padding: 0.55rem 0.85rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.filter-card .form-control:focus,
.filter-card .form-select:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(26,115,232,0.12);
    outline: none;
}

/* ─── Badges (paradas) ──────────────────── */
.badge-parada {
    background-color: #fff8e1;
    color: #7c5c00;
    border: 1px solid #ffe082;
    font-size: 0.72rem;
    border-radius: 20px;
    padding: 3px 10px;
    font-weight: 500;
}

/* ─── Section headings ──────────────────── */
.section-heading {
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: -0.5px;
    color: var(--text-main);
}

.section-sub {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* ─── Alerts ─────────────────────────────── */
.alert {
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
}

/* ─── Dropdown menu ─────────────────────── */
.dropdown-menu {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    border: none;
    font-size: 0.9rem;
    min-width: 170px;
}

.dropdown-item:hover {
    background-color: #eef3fd;
    color: var(--brand-blue);
    border-radius: 6px;
}

/* ─── Tables ─────────────────────────────── */
.table th {
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

/* ─── Empty state ───────────────────────── */
.empty-state {
    padding: 4rem 1rem;
    text-align: center;
}

.empty-state i {
    color: #c8d3e8;
}

.empty-state h4 {
    font-weight: 700;
    color: var(--text-main);
}