:root {
    --bg-color: #f4f6f9;        /* Fundo cinza/azul claro */
    --header-bg: #002B49;       /* Azul marinho corporativo */
    --text-color: #1e293b;
    --text-muted: #5a738e;
    --card-bg: #ffffff;
    --panel-border: rgba(0, 43, 73, 0.08);
    
    --primary: #002B49;
    --primary-hover: #001d32;
    --primary-glow: rgba(0, 43, 73, 0.08);
    
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #f43f5e;
    
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05);
    --shadow-card: 0 15px 35px rgba(0, 43, 73, 0.04);
    --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}

/* SCRRENS E MODALS */
.view-section {
    display: none;
    width: 100%;
    animation: fadeIn 0.35s ease-out forwards;
}
.view-section.active {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.modal.active {
    display: flex !important;
}
.modal-content {
    background: var(--card-bg);
    padding: 2.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 90%;
    animation: fadeUp 0.3s ease;
}

/* LOGIN */
#view-login {
    justify-content: center;
    align-items: center;
    background: var(--bg-color);
}
.login-box {
    background: var(--card-bg);
    padding: 3rem;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 400px;
    border: 1px solid var(--border-color);
    text-align: center;
    transform: translateY(20px);
    animation: fadeUp 0.6s ease forwards;
}
@keyframes fadeUp {
    to { transform: translateY(0); opacity: 1; }
    from { transform: translateY(20px); opacity: 0; }
}
.login-box h2 { margin-bottom: 0.5rem; font-size: 2rem; color: var(--header-bg); }
.login-box p { color: var(--text-muted); margin-bottom: 2rem; }
.google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 1rem;
    background: #ffffff;
    color: #3c4043;
    border: 1px solid #dadce0;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-decoration: none;
}
.google-btn:hover {
    background: #f8f9fa;
    box-shadow: 0 1px 3px rgba(60,64,67,0.3);
}
.google-icon {
    width: 24px;
    height: 24px;
}
.error-text { color: var(--danger); margin-top: 1rem; font-size: 0.875rem; }

/* NAVBAR APP */
.top-navbar {
    background: var(--header-bg);
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    color: #fff;
    flex-shrink: 0;
}
.navbar-left {
    display: flex;
    align-items: center;
}
.nav-logo {
    height: 35px;
}
.navbar-center {
    display: flex;
    gap: 0.5rem;
}
.nav-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid transparent;
    color: #a0aec0;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s;
}
.nav-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}
.nav-btn.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255,255,255,0.2);
}

.navbar-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.avatar {
    width: 36px;
    height: 36px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #fff;
}
.user-details {
    display: flex;
    flex-direction: column;
}
.user-name {
    font-weight: 600;
    font-size: 0.9rem;
}
.user-role {
    font-size: 0.75rem;
    color: #a0aec0;
}
.logout-btn {
    background: transparent;
    border: none;
    color: #a0aec0;
    cursor: pointer;
    transition: color 0.3s;
    display: flex;
    align-items: center;
}
.logout-btn:hover {
    color: #fff;
}

.content {
    flex: 1;
    width: 100%;
    max-width: 1510px;
    margin: 0 auto;
    padding: 3rem 1rem;
}

.sub-view-section { 
    display: none; 
    animation: fadeIn 0.35s ease-out forwards; 
}
.sub-view-section.active { display: block; }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

header {
    margin-bottom: 2rem;
}
header h1 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--header-bg);
}

.dashboard-hero {
    text-align: center;
    margin-bottom: 3rem;
    margin-top: 1rem;
}
.dashboard-hero img {
    height: 60px;
    margin-bottom: 1rem;
}
.dashboard-hero h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--header-bg);
    margin-bottom: 0.5rem;
}
.dashboard-hero p {
    color: var(--text-muted);
}

/* STATS */
.stats-container {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.stat-box {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.stat-box h4 {
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--header-bg);
}
#stat-disponiveis .stat-value { color: var(--success); }
#stat-indisponiveis .stat-value { color: var(--warning); }

/* CARDS E GRIDS */
.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}
.card, .department-card, .dashboard-card {
    position: relative;
    background: var(--card-bg);
    border: 1px solid #cbd5e1; /* Forçando cor de borda visível */
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
    overflow: visible;
}
.card:hover, .department-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.department-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(
        600px circle at var(--mouse-x) var(--mouse-y),
        rgba(0, 43, 73, 0.04),
        transparent 40%
    );
    z-index: 1;
    pointer-events: none;
}
.department-card > * {
    position: relative;
    z-index: 2;
}

/* FORMS */
.inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}
.form-group {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 150px;
}
.form-group label {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    font-weight: 500;
}
input, select, textarea {
    padding: 0.5rem 0.75rem;
    min-height: 42px;
    background: #fff;
    border: 1px solid #cbd5e1; /* Bordas mais visíveis */
    border-radius: 6px;
    color: var(--text-main);
    outline: none;
    transition: border 0.3s;
    font-family: inherit;
    font-size: 0.9rem;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0, 123, 181, 0.2);
}
.btn-primary {
    padding: 0.75rem 1.5rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.3s;
    height: 42px;
}
.btn-primary:hover {
    background: var(--primary-hover);
}
.btn-secondary {
    padding: 0.75rem 1.5rem;
    background: #f8fafc;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-secondary:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
}

/* AUTOCOMPLETE */
.autocomplete-group {
    position: relative;
}
.autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    /* 10 era baixo demais: a lista de placas saía atrás do cartão e da tabela que vêm logo
       abaixo no fluxo, e a sugestão aparecia cortada pela metade, repetida no meio da página.
       Um seletor aberto tem que ficar acima de tudo que é conteúdo da página. */
    z-index: 1000;
    /* 150px cortava a terceira sugestão pela metade e a lista já abria com a barra de rolagem
       no meio, o que fazia parecer que o primeiro item estava escondido. */
    max-height: 240px;
    overflow-y: auto;
    display: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.autocomplete-list.active {
    display: block;
}
.autocomplete-item {
    padding: 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
}
.autocomplete-item:hover {
    background: var(--bg-color);
}

/* TABLES */
.table-card { margin-top: 2rem; overflow-x: auto; padding: 1rem 1.25rem !important; }
.data-table {
    width: 100%;
    border-collapse: collapse;
}
.data-table th, .data-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}
.data-table th {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.875rem;
    background: #f8fafc;
}
.data-table tr:hover {
    background: #f8fafc;
}

/* BADGES */
.badge {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.badge.disponivel { background: rgba(16, 185, 129, 0.1); color: var(--success); }
.badge.manutencao { background: rgba(239, 68, 68, 0.1); color: var(--danger); }
.badge.viagem { background: rgba(245, 158, 11, 0.1); color: var(--warning); }

/* ACTION BUTTONS & ICONS */
.action-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.2s ease;
    margin-right: 4px;
}
.action-btn:hover {
    background: var(--border-color);
}
.action-btn.edit-btn:hover {
    color: var(--primary);
}
.action-btn.delete-btn:hover {
    color: var(--danger);
}
.action-btn.save-btn {
    color: var(--success);
}
.action-btn.save-btn:hover {
    background: rgba(16, 185, 129, 0.1);
}
.action-btn.cancel-btn {
    color: var(--danger);
}
.action-btn.cancel-btn:hover {
    background: rgba(239, 68, 68, 0.1);
}
.action-icon {
    width: 18px;
    height: 18px;
}

/* INLINE EDIT INPUTS */
.inline-edit-input, .inline-edit-select {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--text-main);
    background: #fff;
    outline: none;
    transition: border-color 0.2s;
}
.inline-edit-input:focus, .inline-edit-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0, 123, 181, 0.15);
}

/* MONTH FILTERS */
.month-filter-container {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0 0.5rem 0;
    flex-wrap: wrap;
}
.month-filter-btn {
    padding: 0.5rem 1rem;
    background: #e2e8f0;
    color: var(--text-main);
    border: none;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.month-filter-btn:hover {
    background: #cbd5e1;
}
.month-filter-btn.active {
    background: var(--primary);
    color: #fff;
}

/* Ensure column headers wrap cleanly and show full text */
.tabulator-col-title {
    white-space: normal !important;
    text-overflow: clip !important;
    word-wrap: break-word !important;
}

/* Modal Styles */
.modal {
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    animation: fadeInModal 0.3s ease-out;
}

.modal-content {
    background: #ffffff;
    padding: 2.5rem;
    border-radius: 16px;
    width: 100%;
    max-width: 600px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    position: relative;
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.close-modal-btn {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 1.75rem;
    font-weight: bold;
    color: #64748b;
    cursor: pointer;
    transition: color 0.2s;
}
.close-modal-btn:hover {
    color: #0f172a;
}

@keyframes fadeInModal {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Editing Highlight Row */
.tabulator-row.editing-row {
    background-color: rgba(245, 158, 11, 0.15) !important; /* soft amber tint */
    border: 2px solid #f59e0b !important;
    box-shadow: inset 0 0 10px rgba(245, 158, 11, 0.2);
    transition: background-color 0.3s, border 0.3s;
}

/* Popover Menu */
.action-popover {
    position: absolute;
    z-index: 1000;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    padding: 4px;
    gap: 2px;
}

.popover-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #334155;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background-color 0.2s;
}
.popover-btn:hover {
    background-color: #f1f5f9;
}
.popover-btn.delete {
    color: #ef4444;
}
.popover-btn.delete:hover {
    background-color: #fef2f2;
}

/* REVISION DASHBOARD FILTER BUTTONS */
.btn-filter {
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 30px;
    border: 1px solid #cbd5e1;
    background-color: #f8fafc;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    outline: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-filter:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn-filter:active {
    transform: translateY(0);
}

/* Specific button styles (inactive state) */
.btn-filter.filter-todos {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
    color: #334155;
}
.btn-filter.filter-preto {
    background-color: #f3f4f6;
    border-color: #e4e4e7;
    color: #27272a;
}
.btn-filter.filter-vermelho {
    background-color: #fef2f2;
    border-color: #fca5a5;
    color: #991b1b;
}
.btn-filter.filter-amarelo {
    background-color: #fffbeb;
    border-color: #fde047;
    color: #854d0e;
}
.btn-filter.filter-verde {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

/* Filtro de frota (locada x própria) — eixo diferente do filtro de urgência,
   por isso tem cor própria e fica numa linha separada. */
.btn-filter.filter-frota {
    background-color: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}

.btn-filter.filter-frota.active {
    background-color: #2196F3;
    border-color: #2196F3;
    color: #ffffff;
}

.filtro-eixo-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    min-width: 62px;
}

/* Active states (selected) */
.btn-filter.active {
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
    transform: scale(1.02);
}

.btn-filter.filter-todos.active {
    background-color: #334155;
    border-color: #334155;
    color: #ffffff;
}

.btn-filter.filter-preto.active {
    background-color: #09090b;
    border-color: #09090b;
    color: #ffffff;
}

.btn-filter.filter-vermelho.active {
    background-color: #ef4444;
    border-color: #ef4444;
    color: #ffffff;
}

.btn-filter.filter-amarelo.active {
    background-color: #eab308;
    border-color: #eab308;
    color: #ffffff;
}

.btn-filter.filter-verde.active {
    background-color: #22c55e;
    border-color: #22c55e;
    color: #ffffff;
}

/* ============================================================================
   MOBILE  (adicionado em 11/08)
   ----------------------------------------------------------------------------
   O site foi construído só para desktop: tinha a meta viewport, mas nenhuma
   media query. Numa tela de celular a navbar de 8 botões estourava para o lado,
   os modais de 500/600/900px saíam da tela e os formulários em linha ficavam
   com campos de 2 cm.

   Muitas larguras estão em `style=` direto no HTML, e regra de folha de estilo
   não vence atributo inline. Por isso o `!important` aqui: é retrofit, não
   descuido — a alternativa seria reescrever centenas de atributos inline no
   HTML, com risco muito maior de quebrar tela que já funciona.

   Só afeta telas estreitas. No desktop nada muda.
   ========================================================================== */

@media (max-width: 900px) {

    /* --- Navbar: 8 botões não cabem lado a lado. Vira faixa rolável. --- */
    .top-navbar {
        height: auto;
        padding: 0.6rem 0.9rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .navbar-center {
        order: 3;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        /* Esconde a barra de rolagem: a faixa se explica sozinha ao arrastar */
        scrollbar-width: none;
    }
    .navbar-center::-webkit-scrollbar { display: none; }
    .nav-btn {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 0.85rem;
        padding: 0.45rem 0.75rem;
    }
    .nav-logo { height: 28px; }

    /* --- Respiro: 3rem de padding come metade de uma tela de 360px --- */
    .content { padding: 1.2rem 0.75rem; }

    /* --- Modais: os fixos em 500/600/900px saíam da tela --- */
    .modal-content {
        max-width: 95vw !important;
        width: 95vw !important;
        padding: 1.4rem !important;
        max-height: 88vh;
        overflow-y: auto;
    }

    /* --- Formulários: campo lado a lado vira campo empilhado --- */
    .form-row,
    .inline-form {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .form-group {
        min-width: 0 !important;
        width: 100% !important;
    }
    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* --- Cards do dashboard: 300px não cabe, então uma coluna --- */
    .grid-cards { grid-template-columns: 1fr; gap: 1rem; }
    .card, .department-card, .dashboard-card { padding: 1rem !important; }

    /* --- Os três cards de status (Disponíveis / Em Uso / Em Manutenção) ---
       Eram `flex: 1` lado a lado. Num celular cada um fica com ~110px, mas a
       palavra "Manutenção" não cabe: o item de flex não encolhe abaixo do
       conteúdo (min-width: auto), então o container transborda. E como o body
       tem overflow-x: hidden, o excedente não rolava — era CORTADO na direita.
       Foi o sintoma que apareceu no print do celular. */
    .stats-container {
        flex-wrap: wrap;
        gap: 0.7rem;
    }
    .stat-box {
        min-width: 0;          /* sem isto o item se recusa a encolher */
        flex: 1 1 30%;
        padding: 0.9rem 0.5rem;
    }
    .stat-box h4 {
        font-size: 0.75rem;
        text-align: center;
        line-height: 1.25;
        margin-bottom: 0.35rem;
    }
    .stat-value { font-size: 1.65rem; }

    /* Trava de segurança: nada dentro do conteúdo pode ser mais largo que a
       tela. Sem isto, qualquer largura fixa nova volta a cortar a página. */
    .content, .content > section { max-width: 100%; overflow-x: clip; }

    /* --- Tabelas: rolam na horizontal em vez de espremer a página --- */
    .table-card,
    #table-revisoes-container,
    .tabulator {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    #table-revisoes { min-width: 760px; }

    /* --- Filtros e botões de mês: quebram em linhas --- */
    .month-filter-btn { font-size: 0.8rem; padding: 5px 10px; }

    /* --- Rastreio: a lista de 340px ao lado do mapa não cabe. Empilha. --- */
    #view-rastreio > div[style*="display: flex"] {
        flex-direction: column !important;
        height: auto !important;
    }
    #view-rastreio div[style*="flex: 0 0 340px"] {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 300px !important;
    }
    #mapa-rastreio { height: 380px !important; min-height: 380px !important; }

    /* --- Cabeçalhos de seção: título e botão empilhados --- */
    section > header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.6rem;
    }
    h1 { font-size: 1.45rem; }

    /* --- Hero da dashboard: logo grande + título + subtítulo comiam a tela
       inteira antes de aparecer qualquer número. Encolhe para os indicadores
       ficarem visíveis já na abertura. --- */
    .dashboard-hero { margin: 0.2rem 0 1.4rem; }
    .dashboard-hero img { height: 38px; margin-bottom: 0.5rem; }
    .dashboard-hero h2 { font-size: 1.3rem; margin-bottom: 0.25rem; }
    .dashboard-hero p { font-size: 0.85rem; }
}

/* Telas bem estreitas (celular em pé, 360-400px) */
@media (max-width: 480px) {
    .content { padding: 0.9rem 0.55rem; }

    /* O nome e o cargo do usuário roubavam metade da primeira linha da navbar.
       A inicial no avatar já identifica quem está logado; o nome completo
       continua visível no desktop. */
    .user-details { display: none; }
    .navbar-right { gap: 0.7rem; }
    .top-navbar { padding: 0.5rem 0.7rem; }
    .modal-content { padding: 1.1rem !important; }
    h1 { font-size: 1.25rem; }
    .nav-btn { font-size: 0.8rem; padding: 0.4rem 0.6rem; }

    /* Botões de ação em bloco, para dar área de toque decente */
    .btn-primary, .btn-secondary { width: 100%; justify-content: center; }
    /* ...menos os que vivem dentro de linha de tabela ou barra de filtro */
    .table-card .btn-primary, .table-card .btn-secondary,
    .action-btn, .month-filter-btn, .btn-filter { width: auto; }
}

/* Card do arquivo escolhido num <input type="file">. O input do navegador corta o nome do
   arquivo e não tem como desfazer a escolha; este card mostra o nome e traz um X.
   Pintado por ligarCardDeArquivo() em app.js. */
.card-arquivo {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 6px 8px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 6px;
    font-size: 0.78rem;
    color: #0c4a6e;
}

/* A célula DOCS abre o painel de documentos, então precisa parecer clicável. */
.celula-docs { cursor: pointer; }
.celula-docs:hover { background: #f1f5f9; }

/* ---------------------------------------------------------------------------
   FAIXA INTERMEDIÁRIA — 781px até 1440px
   ---------------------------------------------------------------------------
   O `mobile.css` só acorda em 780px ou menos, e o `.content` foi desenhado para
   1510px. Entre os dois não havia regra nenhuma: em 1366x768 o texto truncava e em
   1280x720 sobrava rolagem nos dois eixos. São as máquinas do Luis e da Ana.

   A solução é escalar o app para 75%, não comprimir o layout — ver o comentário do `zoom`
   abaixo. A 75% a área efetiva passa de 1.700px e o layout de desktop cabe inteiro.

   `mobile.css` carrega depois deste arquivo, então abaixo de 780px as regras de lá
   continuam vencendo onde declaram a mesma propriedade. Em telefone o `zoom` daqui ainda
   se aplica — se atrapalhar, cancelar com `#view-app { zoom: 1 }` dentro do bloco de 780px. */
@media (max-width: 1440px) {
    /* ----- NÃO USAR `zoom` AQUI. JÁ FOI TENTADO E QUEBRA TODAS AS TABELAS. -----
       Testado em 12/08: `#view-app { zoom: 0.75 }` reproduz bem o layout que o Enzo quer (ele
       comparou 100% com 75% de zoom do navegador e prefere o de 75%), mas **destrói o
       Tabulator**. O Tabulator calcula largura de coluna em JavaScript, e com `zoom` as
       medidas do navegador ficam inconsistentes: a tabela ocupava ~70% da largura, sobrava uma
       faixa cinza à direita e a paginação saía cortada. Em todas as abas.
       É o mesmo problema que já está nas armadilhas do CLAUDE.md: layout decidido em
       JavaScript não sobrevive a mudança de escala.

       Caminho adotado: **zoom de 75% no navegador, uma vez por máquina**. Brave, Chrome e Edge
       guardam o zoom por site, então o Luis e a Ana configuram uma vez e nunca mais. Custo
       zero e as tabelas continuam corretas.

       Também já foi tentado e recusado: comprimir padding, fonte e cartão neste breakpoint. O
       Enzo apontou que ficou "podre" — o problema nunca foi densidade, era escala. */

    /* ----- MODAIS -----
       `.modal-content` não tinha `max-height` nenhum e `padding: 2.5rem`. Numa tela de 720 o
       modal alto era simplesmente cortado, sem rolagem interna — os diálogos de envio do
       abastecimento ficavam inacessíveis. Os modais novos já definem max-height inline (estilo
       inline vence folha de estilo), então esta regra só alcança os antigos, que são os
       quebrados. */
    .modal-content {
        max-height: 88vh;
        overflow-y: auto;
        padding: 1.25rem 1.5rem;
    }
    .close-modal-btn { top: 0.75rem; right: 1rem; }

    /* ----- HEADER -----
       São 9 guias de navegação mais o bloco do usuário. Em 1280 a navegação empurrava o bloco
       para fora da tela: os botões de permissões, auditoria e sair simplesmente não apareciam,
       e as guias ficavam grudadas. Agora a navegação encolhe e rola por dentro quando precisa,
       e o bloco do usuário nunca é empurrado. */
    /* ----- HEADER: garantir que os 3 botões da direita apareçam -----
       São 9 guias. `.navbar-center` é flex e os `.nav-btn` têm `flex-shrink: 0`, então a
       navegação nunca encolhia e empurrava o bloco do usuário para fora da tela: os botões de
       permissões, auditoria e sair simplesmente não existiam em 1280.

       As regras miram as CLASSES, não `header nav`. `.navbar-center` tem especificidade maior
       que `header nav`, então a versão anterior deste bloco perdia a disputa e não aplicava. */
    .top-navbar { padding: 0 0.9rem; }

    .navbar-center {
        min-width: 0;          /* sem isto o flex item não desce abaixo do tamanho do conteúdo */
        overflow-x: auto;
        /* Barra de rolagem escondida, rolagem mantida. Visível, ela virava uma tira cinza
           atravessando o meio do header. Roda do mouse e arrastar continuam funcionando. */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .navbar-center::-webkit-scrollbar { display: none; }

    /* Fonte no tamanho normal: encolher texto foi o que deixou a tela com cara de ruim.
       O aperto vem do espaço ENTRE as guias e do padding, que somam ~75px nas 9 guias — o
       suficiente para "Solicitações" caber inteira em 1366 em vez de cortar no meio. */
    .navbar-center { gap: 0.25rem; padding-right: 0.5rem; }
    .nav-btn { padding: 0.45rem 0.55rem; white-space: nowrap; }

    /* Em 1280 ainda faltavam uns 40px e "Solicitações" cortava. Estes três cortes somam ~55px
       e não tocam em tamanho de fonte nem no texto das guias. */
    @media (max-width: 1300px) {
        .navbar-center { gap: 0.1rem; }
        .nav-btn { padding: 0.45rem 0.4rem; }
        .nav-logo { max-width: 68px; }
        /* O ícone do Dashboard é decoração: as outras 8 guias não têm ícone. */
        .nav-btn svg { display: none; }
    }

    .navbar-right { flex-shrink: 0; gap: 0.6rem; }

    /* O nome trunca em vez de empurrar os botões. São ~140px que não valem os 3 botões. */
    .user-name {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .user-info { gap: 0.5rem; }
}