/* ==========================================================================
   DASHBOARD.CSS - Estilos Globais e Componentes (Trife)
   ========================================================================== */

/* VARIÁVEIS GLOBAIS E RESET */
:root {
    --bg-body: #0f172a;
    --bg-surface: #1e293b;
    --primary: #3b82f6;
    --on-primary: #ffffff;
    --text-main: #f8fafc;
    --text-secondary: #94a3b8;
    --outline: rgba(255, 255, 255, 0.1);
    --success: #10b981;
    --error: #ef4444;
    --warning: #f59e0b;
    --whatsapp: #25D366;
    --radius-card: 10px;
    --radius-btn: 8px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    font-family: 'Inter', sans-serif;
}

body {
    background-color: var(--bg-body);
    color: var(--text-main);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    padding-bottom: 100px;
    overscroll-behavior-y: none;
}

/* ================= BACKGROUND ANIMADO ================= */
.bg-blob {
    position: fixed;
    border-radius: 50%;
    filter: blur(90px);
    z-index: -1;
    opacity: 0.3;
}
.blob-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; background: var(--primary); }
.blob-2 { bottom: -10%; right: -10%; width: 60vw; height: 60vw; background: var(--warning); }

/* ================= CABEÇALHOS DE SEÇÃO ================= */
.section-title {
    width: 95%;
    max-width: 800px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.status-pill {
    font-size: 0.75rem;
    font-weight: 700;
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    padding: 6px 12px;
    border-radius: 50px;
    border: 1px solid rgba(59, 130, 246, 0.3);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ================= GRID DE CARDS (ESTILO APP - 2 COLUNAS) ================= */
.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 95%;
    max-width: 800px;
    align-items: start;
    grid-auto-rows: max-content;
}

/* ================= CARD COMPACTO ESTILO APP ================= */
.android-card {
    background: var(--bg-surface);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-card);
    padding: 10px;
    width: 100%;
    position: relative;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    align-self: start;
}

/* Card ocupado — borda azul */
.android-card.busy-card {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12);
}
.android-card.busy-card:not(.is-expanded),
.android-card.new-bonde-card:not(.is-expanded) { min-height: 76px; justify-content: center; }
.android-card.busy-card:not(.is-expanded) .card-header { margin-bottom: 2px; }
.android-card.busy-card:not(.is-expanded) .star-badge { display: none; }
.compact-card-time { margin: 3px 0 0 36px; color: var(--text-main); font: 900 .9rem/1.15 'JetBrains Mono','Courier New',monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.compact-card-time.is-negative { color: var(--error); }
.new-bonde-card:not(.is-expanded) .nb-link,
.new-bonde-card:not(.is-expanded) .nb-toggle,
.new-bonde-card:not(.is-expanded) .nb-status,
.new-bonde-card:not(.is-expanded) .nb-footer { display:none !important; }
.new-bonde-card:not(.is-expanded)::after { content:'ABERTO (24H)'; margin:3px 0 0 44px; color:var(--warning); font-size:.72rem; font-weight:900; }

/* Card bonde — borda amarela */
.bonde-card {
    border-color: rgba(245, 158, 11, 0.5) !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.1) !important;
}

/* Card expirado */
.expired-card {
    border-color: var(--error) !important;
    background: rgba(239, 68, 68, 0.05) !important;
}

/* ================= HEADER DO CARD ================= */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

/* Círculo colorido do veículo */
.icon-box {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
    /* cor dinâmica via JS: background e color */
}

.veiculo-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.v-name {
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--text-main);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.v-status {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--success);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.v-status.idle {
    color: var(--text-secondary);
}

/* Badge estrela (★ N) */
.star-badge {
    background: rgba(255, 255, 255, 0.06);
    border: 0.5px solid rgba(59, 130, 246, 0.4);
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--primary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ================= CORPO DO CARD ================= */
.card-body {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* ─── Timer Row ─── */
.timer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    width: 100%;
}

.timer-text-container {
    display: flex;
    align-items: center;
    gap: 5px;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--warning);
    flex-shrink: 0;
}

.timer-text {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-weight: 900;
    font-size: 1.25rem;
    color: var(--text-main);
    letter-spacing: -0.5px;
    line-height: 1;
}

.btn-play-pause {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    transition: background 0.15s;
}

.btn-play-pause:active { background: rgba(255, 255, 255, 0.15); }
.btn-play-pause.paused { background: var(--primary); color: #fff; }

/* ─── Bloco Expirado ─── */
.expired-block {
    width: 100%;
    background: #8b0000;
    color: white;
    font-weight: 800;
    font-size: 0.72rem;
    text-align: center;
    padding: 4px;
    border-radius: 4px;
    margin-bottom: 6px;
    text-transform: uppercase;
}

/* ─── Barra de Progresso ─── */
.progress-container {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 4px;
}

.progress-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 10px;
    transition: width 1s linear;
    width: 0%;
}

.progress-fill.critical { background: var(--error); }

/* ─── Intervalo de Tempo ─── */
.time-range {
    font-size: 0.65rem;
    color: var(--success);
    font-weight: 600;
    margin-bottom: 6px;
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Divisor ─── */
.card-divider {
    height: 0.5px;
    background: rgba(255, 255, 255, 0.08);
    margin: 0 -10px 8px -10px;
}

/* ─── Linha do Cliente ─── */
.client-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.client-info {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    max-width: 58%;
    overflow: hidden;
}

.client-info i { font-size: 10px; flex-shrink: 0; }

.client-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.client-val {
    font-weight: 900;
    color: var(--primary);
    font-size: 0.85rem;
    white-space: nowrap;
}

/* ================= GRADE DE AÇÕES (EXPANDIDA) ================= */
.actions-grid {
    display: none;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    width: 100%;
    animation: fadeIn 0.2s ease;
}
.android-card.is-expanded .actions-grid { display: flex; }

.actions-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    width: 100%;
    align-items: stretch;
}

.square-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--outline);
    border-radius: 8px;
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    transition: 0.15s;
    color: var(--text-main);
    height: 46px;
    min-width: 0;
    width: 100%;
    line-height: 1;
}

.square-btn i { font-size: 0.95rem; }
.square-btn span { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; }
.square-btn:active { background: rgba(255, 255, 255, 0.1); transform: scale(0.95); }

.btn-reset  { color: var(--error);    background: rgba(239, 68, 68, 0.1);    border-color: rgba(239, 68, 68, 0.3); }
.btn-finish { color: var(--success);  background: rgba(16, 185, 129, 0.1);   border-color: rgba(16, 185, 129, 0.4); }
.btn-zap    { color: var(--whatsapp); background: rgba(37, 211, 102, 0.08);  border-color: rgba(37, 211, 102, 0.3); }
.zap-icon{width:18px;height:18px;object-fit:contain;display:block}
.overage-block{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:7px 0 0;padding:9px 10px;border-radius:9px;border:1px solid rgba(245,158,11,.32);background:rgba(245,158,11,.09);color:#fde68a;font-size:.66rem}
.overage-block strong{font-size:.68rem}.overage-block span{font-weight:900;color:#fbbf24;white-space:nowrap}
.btn-bonde  { color: var(--warning);  background: rgba(245, 158, 11, 0.1);   border-color: rgba(245, 158, 11, 0.4); }

/* ================= ESTILO BONDE (ABERTO 24H) ================= */
.bonde-open-box {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 6px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.bonde-open-box i {
    color: var(--primary);
    font-size: 1.4rem;
    animation: bonde-bounce 0.7s ease-in-out infinite alternate;
}

.bonde-open-label {
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

@keyframes bonde-bounce {
    from { transform: translateY(0); }
    to   { transform: translateY(-6px); }
}

/* ================= MODAIS E OVERLAYS ================= */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.modal-card {
    background: var(--bg-surface);
    width: 90%;
    max-width: 350px;
    border-radius: 20px;
    border: 1px solid var(--outline);
    padding: 20px;
    max-height: 90vh;
    overflow-y: auto;
}

/* ================= INPUTS E FORMULÁRIOS ================= */
.autocomplete-wrap { position: relative; margin-bottom: 10px; }

.autocomplete-wrap input,
.custom-input {
    width: 100%;
    padding: 12px 12px 12px 36px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--outline);
    color: var(--text-main);
    border-radius: 8px;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
}

.custom-input { padding-left: 12px; }

.autocomplete-wrap input:focus,
.custom-input:focus { border-color: var(--primary); }

.autocomplete-wrap input::placeholder,
.custom-input::placeholder { color: var(--text-secondary); }

.autocomplete-wrap .search-ico {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 0.85rem;
    pointer-events: none;
}

.autocomplete-wrap .clear-ico {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
    display: none;
}

.sugestoes-drop {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #1e293b;
    border: 1px solid var(--outline);
    border-radius: 10px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 3000;
    display: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.sugestao-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.15s;
}

.sugestao-item:last-child { border-bottom: none; }
.sugestao-item:hover, .sugestao-item:active { background: rgba(255, 255, 255, 0.08); }

.sugestao-nome { font-weight: 700; color: var(--text-main); font-size: 0.88rem; }
.sugestao-tel  { font-size: 0.72rem; color: var(--text-secondary); margin-top: 2px; }
.sugestao-pts  { font-size: 0.75rem; font-weight: 700; color: var(--primary); white-space: nowrap; margin-left: 8px; }

.cliente-badge {
    display: none;
    align-items: center;
    gap: 8px;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: 0.85rem;
    color: var(--text-main);
    font-weight: 600;
}

.cliente-badge.show { display: flex; }

.cliente-badge button {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0;
    margin-left: auto;
}

/* ================= CHECKBOX CUSTOMIZADO ================= */
.checkbox-container {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid var(--outline);
    margin-bottom: 14px;
    cursor: pointer;
    transition: 0.2s;
}

.checkbox-container:hover { border-color: var(--success); background: rgba(16, 185, 129, 0.05); }
.checkbox-container.bonde-mode:hover { border-color: var(--primary); background: rgba(59, 130, 246, 0.05); }
.checkbox-container input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--success); cursor: pointer; }
.checkbox-container.bonde-mode input[type="checkbox"] { accent-color: var(--primary); }
.checkbox-container label { margin-left: 10px; font-size: 0.85rem; font-weight: 700; color: var(--text-main); cursor: pointer; flex: 1; }

/* ================= LISTA BONDE / TICKETS ================= */
.child-row {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--outline);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.child-info { display: flex; flex-direction: column; }
.child-name { font-size: 0.85rem; font-weight: bold; color: var(--text-main); }
.child-timer { font-size: 0.75rem; color: var(--success); font-weight: bold; margin-top: 4px; }
.child-timer.expired { color: var(--error); animation: blink 1s infinite; }

.btn-child-action {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid var(--error);
    color: var(--error);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.7rem;
    font-weight: bold;
    cursor: pointer;
}

/* ================= FAB DE FINALIZADOS (DRAG) ================= */
.fab-finished {
    position: fixed;
    bottom: 30px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #ffb6b6;
    color: #8b0000;
    border: none;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.5);
    z-index: 9999;
    cursor: grab;
    display: none;
    align-items: center;
    justify-content: center;
    animation: pulse-red 1.5s infinite;
    touch-action: none;
}

.fab-finished:active { cursor: grabbing; transform: scale(0.95); }
.fab-finished i { font-size: 24px; pointer-events: none; }

.fab-finished span {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #8b0000;
    color: white;
    font-weight: 800;
    font-size: 12px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffb6b6;
    pointer-events: none;
}

/* ================= ANIMAÇÕES ================= */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

@keyframes pulse-red {
    0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); transform: scale(1); }
    70%  { box-shadow: 0 0 0 15px rgba(239, 68, 68, 0); transform: scale(1.1); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); transform: scale(1); }
}

/* ================= ESTILO NEW-BONDE CARD (ABERTO 24H FULL) ================= */
.new-bonde-card {
    border: 1px solid var(--success) !important;
    background: var(--bg-surface) !important;
    box-shadow: none !important;
}

.nb-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 25px;
}

.nb-icon-box {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.nb-info {
    flex: 1;
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}

.nb-name { font-size: 1.15rem; font-weight: 700; color: var(--text-main); line-height: 1; }
.nb-link { font-size: 0.95rem; font-weight: 600; color: var(--success); cursor: pointer; }

.nb-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 5px;
}

.nb-status {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--success);
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 20px;
}

.nb-status i { font-size: 1.8rem; }

.nb-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(16, 185, 129, 0.4);
    padding-top: 15px;
}

.nb-client {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    color: var(--text-main);
    font-weight: 500;
}

.nb-client i { color: var(--success); font-size: 1rem; }
.nb-val { font-size: 1.2rem; font-weight: 800; color: var(--success); }

/* Força toggle verde para Bonde */
.switch-success input:checked + .slider {
    background-color: var(--success) !important;
}

/* ================= RESPONSIVIDADE MOBILE ================= */

/* Telas menores que 480px (smartphones compactos) */
@media (max-width: 480px) {
    body {
        padding-bottom: 80px;
    }

    /* Grid ocupa largura total com gap menor */
    .grid-container {
        width: 100%;
        gap: 6px;
        padding: 0 6px;
    }

    /* TIMER: reduz fonte para caber em 1 linha */
    .timer-text {
        font-size: 0.95rem;
        letter-spacing: -0.5px;
        white-space: nowrap;
    }

    /* Card compacto: menos padding interno */
    .android-card {
        padding: 8px;
    }

    /* Header do card mais compacto */
    .card-header {
        margin-bottom: 6px;
    }

    /* Ícone menor */
    .icon-box {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }

    /* Nome do veículo menor */
    .v-name {
        font-size: 0.7rem;
    }

    /* Status menor */
    .v-status {
        font-size: 0.6rem;
    }

    /* Badge estrela menor */
    .star-badge {
        font-size: 0.62rem;
        padding: 2px 5px;
    }

    /* Botão play/pause menor */
    .btn-play-pause {
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
    }

    /* Linha do cliente menor */
    .client-info {
        font-size: 0.65rem;
    }

    .client-val {
        font-size: 0.75rem;
    }

    /* Intervalo de tempo menor */
    .time-range {
        font-size: 0.58rem;
    }

    /* Expirado banner menor */
    .expired-block {
        font-size: 0.65rem;
        padding: 3px;
    }

    /* Botões de ação menores */
    .square-btn {
        height: 44px;
        padding: 6px 3px;
    }

    .square-btn i { font-size: 0.85rem; }
    .square-btn span { font-size: 0.55rem; }

    /* Seção título menor */
    .section-title {
        font-size: 0.78rem;
        width: 100%;
        padding: 0 6px;
    }

    /* Status pill menor */
    .status-pill {
        font-size: 0.7rem;
        padding: 4px 10px;
    }

    /* Bonde card compacto */
    .nb-name { font-size: 0.95rem; }
    .nb-link  { font-size: 0.8rem; }
    .nb-status { font-size: 1rem; }
    .nb-status i { font-size: 1.4rem; }
    .nb-client { font-size: 0.9rem; }
    .nb-val    { font-size: 1rem; }
    .nb-icon-box { width: 34px; height: 34px; font-size: 1rem; }
    .nb-info { gap: 6px; }
    .nb-top  { margin-bottom: 14px; }
    .nb-status { margin-bottom: 12px; }
}

/* Telas muito estreitas (< 360px) — ajuste extra */
@media (max-width: 360px) {
    .timer-text {
        font-size: 0.85rem;
    }

    .v-name { font-size: 0.65rem; }

    .grid-container {
        gap: 5px;
        padding: 0 4px;
    }

    .android-card {
        padding: 7px;
    }
}

/* Desktop / Tablets largos: cards com max-width confortável */
@media (min-width: 768px) {
    .grid-container {
        grid-template-columns: repeat(3, 1fr);
        max-width: 900px;
    }

    .timer-text {
        font-size: 1.1rem;
    }
}

@media (min-width: 1100px) {
    .grid-container {
        grid-template-columns: repeat(4, 1fr);
        max-width: 1100px;
    }
}
/* ================= FILTRO WEB POR CATEGORIA ================= */
.dashboard-toolbar {
    width: 95%;
    max-width: 1100px;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid var(--outline);
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.82);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}
.toolbar-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.toolbar-heading strong { display: block; font-size: 1rem; margin-top: 2px; }
.toolbar-eyebrow { color: var(--primary); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.toolbar-count { color: var(--text-secondary); font-size: .72rem; font-weight: 800; white-space: nowrap; }
.toolbar-main-actions { margin-top: 11px; }
.category-filter-button {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--outline);
    border-radius: 12px;
    background: rgba(255,255,255,.035);
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    font-size: .72rem;
    font-weight: 800;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.category-filter-button > i:first-child { color: var(--primary); }
.category-filter-button span { min-width:0;flex:1;text-align:left;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.category-filter-button strong { color:var(--text-main); }
.category-filter-chevron { color:#64748b;font-size:.65rem;transition:transform .18s ease; }
.category-filter-button.active { border-color:color-mix(in srgb,var(--primary) 45%,transparent);background:color-mix(in srgb,var(--primary) 9%,transparent); }
.category-filter-button[aria-expanded="true"] .category-filter-chevron { transform:rotate(180deg); }
.category-filter-button:active { transform:scale(.985); }
.toolbar-app-actions { display: flex; gap: 7px; margin-top: 9px; }
.toolbar-app-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--outline);
    border-radius: 10px;
    background: rgba(255,255,255,.035);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: .68rem;
    font-weight: 900;
    cursor: pointer;
}
.toolbar-app-btn i { color: var(--primary); }
.toolbar-app-btn.active { color: #fecaca; border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.10); }
.toolbar-app-btn.active i { color: #ef4444; }
.dashboard-locked .android-card { border-color: rgba(148,163,184,.18); }
.dashboard-locked .android-card::after {
    content: "TELA TRAVADA";
    position: absolute;
    right: 7px;
    bottom: 6px;
    padding: 3px 5px;
    border-radius: 5px;
    background: rgba(15,23,42,.88);
    color: #94a3b8;
    font-size: .5rem;
    font-weight: 900;
    letter-spacing: .05em;
    pointer-events: none;
}
.category-filter-overlay { position:fixed;inset:0;z-index:100080;background:rgba(2,6,12,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;padding:0;opacity:0;pointer-events:none;transition:opacity .2s ease; }
.category-filter-overlay.open { opacity:1;pointer-events:auto; }
.category-filter-sheet { width:min(100%,620px);max-height:min(72dvh,620px);padding:8px 14px calc(17px + env(safe-area-inset-bottom));border:1px solid rgba(255,255,255,.10);border-bottom:0;border-radius:22px 22px 0 0;background:linear-gradient(180deg,#111827,#0b1220);box-shadow:0 -24px 80px rgba(0,0,0,.55);transform:translateY(103%);transition:transform .25s cubic-bezier(.2,.8,.2,1);overflow:hidden; }
.category-filter-overlay.open .category-filter-sheet { transform:translateY(0); }
.category-sheet-handle { width:40px;height:4px;border-radius:99px;background:rgba(255,255,255,.18);margin:3px auto 12px; }
.category-sheet-header { display:flex;align-items:center;justify-content:space-between;gap:12px; }
.category-sheet-header span { color:var(--primary);font-size:.61rem;font-weight:900;letter-spacing:.10em; }
.category-sheet-header h2 { margin:2px 0 0;font-size:1.05rem;letter-spacing:-.02em; }
.category-sheet-header button { width:34px;height:34px;border-radius:50%;border:1px solid var(--outline);background:color-mix(in srgb,var(--text-main) 6%,transparent);color:var(--text-main);cursor:pointer; }
.category-sheet-help { margin:10px 0 12px;color:var(--text-secondary);font-size:.68rem;line-height:1.45; }
.category-filter-options { display:grid;gap:6px;max-height:calc(min(72dvh,620px) - 135px);overflow:auto;padding-right:2px; }
.category-option { min-height:54px;width:100%;padding:8px 10px;border:1px solid transparent;border-radius:13px;background:color-mix(in srgb,var(--text-main) 3%,transparent);color:var(--text-main);display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer; }
.category-option.active { border-color:rgba(59,130,246,.34);background:rgba(59,130,246,.10); }
.category-option-icon { width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary); }
.category-option-copy { min-width:0;flex:1; }.category-option-copy strong,.category-option-copy small { display:block; }.category-option-copy strong { font-size:.75rem; }.category-option-copy small { margin-top:3px;color:var(--text-secondary);font-size:.62rem; }
.category-option-check { color:var(--primary);opacity:0;font-size:.82rem; }.category-option.active .category-option-check { opacity:1; }
body.category-filter-open { overflow:hidden!important; }
.dashboard-toast {
    position: fixed;
    left: 50%;
    top: max(16px, env(safe-area-inset-top));
    transform: translate(-50%, -18px);
    z-index: 5000;
    max-width: min(90vw, 520px);
    padding: 11px 16px;
    border-radius: 999px;
    background: rgba(5, 12, 24, .95);
    border: 1px solid rgba(96,165,250,.45);
    color: #fff;
    font-size: .78rem;
    font-weight: 850;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    box-shadow: 0 14px 35px rgba(0,0,0,.35);
}
.dashboard-toast.show { opacity: 1; transform: translate(-50%, 0); }
.run-details { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; margin-top: 7px; }
.run-detail { min-width: 0; color: var(--text-secondary); font-size: .6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.run-detail b { color: var(--text-main); font-weight: 800; }
.vehicle-swap-enter { animation: vehicleSwapPulse .8s ease-out; }
@keyframes vehicleSwapPulse {
    0% { transform: scale(.94); box-shadow: 0 0 0 0 rgba(59,130,246,.75); }
    45% { transform: scale(1.025); box-shadow: 0 0 0 12px rgba(59,130,246,.08); }
    100% { transform: scale(1); box-shadow: 0 2px 4px rgba(0,0,0,.2); }
}
@media (prefers-reduced-motion: reduce) {
    .vehicle-swap-enter { animation: none; }
    .android-card, .dashboard-toast, .category-filter-overlay, .category-filter-sheet { transition: none !important; }
}
@media (max-width: 620px) {
    .dashboard-toolbar { width: calc(100% - 12px); padding: 12px; }
    .toolbar-app-actions { display: grid; grid-template-columns: repeat(3,1fr); }
    .toolbar-app-btn { font-size: .59rem; gap: 5px; }
}


/* ==========================================================================
   ESTADO INICIAL — FROTA VAZIA (espelha a experiência do app)
   ========================================================================== */
.dashboard-toolbar.empty-fleet .toolbar-main-actions,
.dashboard-toolbar.empty-fleet .toolbar-app-actions {
    display: none !important;
}

.dashboard-empty-state[hidden] { display: none !important; }
.empty-state-primary[hidden], .empty-premium-card[hidden], .empty-state-readonly[hidden] { display: none !important; }

.dashboard-empty-state {
    width: min(94%, 760px);
    margin: clamp(28px, 7vh, 72px) auto 28px;
    padding: clamp(24px, 5vw, 42px);
    border-radius: 28px;
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border-color, transparent));
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 52%),
        color-mix(in srgb, var(--bg-surface) 94%, transparent);
    box-shadow: 0 28px 80px rgba(0,0,0,.24);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.dashboard-empty-state::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, transparent), transparent 45%);
}

.dashboard-empty-state > * { position: relative; z-index: 1; }

.empty-state-icon {
    width: 78px;
    height: 78px;
    margin: 0 auto 18px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    font-size: 2.35rem;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 13%, var(--bg-surface));
    border: 1px solid color-mix(in srgb, var(--primary) 26%, transparent);
    box-shadow: 0 16px 40px color-mix(in srgb, var(--primary) 15%, transparent);
}

.empty-state-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    margin-bottom: 10px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.dashboard-empty-state h1 {
    margin: 0;
    font-size: clamp(1.65rem, 5vw, 2.35rem);
    letter-spacing: -.045em;
    color: var(--text-main);
}

.dashboard-empty-state > p {
    width: min(100%, 560px);
    margin: 10px auto 0;
    color: var(--text-secondary);
    font-size: .96rem;
    line-height: 1.62;
}

.empty-state-highlight {
    width: min(100%, 560px);
    margin: 22px auto;
    min-height: 54px;
    padding: 13px 16px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
    color: var(--text-main);
    font-size: .86rem;
    font-weight: 750;
}

.empty-state-highlight i { color: var(--primary); }

.empty-state-actions {
    width: min(100%, 580px);
    margin: 0 auto;
    display: grid;
    gap: 14px;
}

.empty-state-primary,
.empty-premium-card button {
    width: 100%;
    min-height: 58px;
    border: 0;
    border-radius: 17px;
    cursor: pointer;
    font: inherit;
    font-weight: 950;
    letter-spacing: .02em;
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

.empty-state-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    color: var(--on-primary, var(--btn-text, #07111f));
    background: linear-gradient(135deg, var(--primary), var(--accent-hover, var(--primary)));
    box-shadow: 0 16px 34px color-mix(in srgb, var(--primary) 22%, transparent);
}

.empty-state-primary:active,
.empty-premium-card button:active { transform: scale(.985); }

.empty-premium-card {
    padding: 18px;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, #facc15 30%, var(--border-color, transparent));
    background: linear-gradient(145deg, color-mix(in srgb, #facc15 8%, var(--bg-surface)), var(--bg-surface));
    text-align: left;
}

.empty-premium-copy {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.empty-premium-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: #facc15;
    background: rgba(250,204,21,.1);
}

.empty-premium-copy strong {
    display: block;
    color: var(--text-main);
    font-size: 1rem;
    font-weight: 900;
}

.empty-premium-copy p {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: .78rem;
    line-height: 1.48;
}

.empty-premium-card button {
    min-height: 48px;
    margin-top: 15px;
    color: var(--text-main);
    background: transparent;
    border: 1px solid color-mix(in srgb, #facc15 55%, transparent);
}

.empty-premium-card button i { color: #facc15; margin-right: 7px; }

.empty-state-readonly {
    margin-top: 18px !important;
    padding: 13px 16px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--text-secondary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-secondary) 18%, transparent);
}

@media (max-width: 560px) {
    .dashboard-empty-state {
        margin-top: 24px;
        border-radius: 24px;
        padding: 26px 18px 22px;
    }
    .empty-state-icon { width: 68px; height: 68px; border-radius: 21px; font-size: 2rem; }
    .dashboard-empty-state h1 { font-size: 1.75rem; }
    .empty-state-highlight { justify-content: flex-start; text-align: left; }
}

/* ==========================================================================
   VEÍCULOS FINALIZADOS — MODAL RESPONSIVO WEB / IOS / ANDROID
   ========================================================================== */
body.finished-modal-open { overflow: hidden !important; }

.finalized-modal {
    z-index: 100100;
    padding:
        max(16px, env(safe-area-inset-top))
        max(16px, env(safe-area-inset-right))
        max(16px, env(safe-area-inset-bottom))
        max(16px, env(safe-area-inset-left));
    background: rgba(2, 6, 15, .84);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.finished-dialog {
    width: min(980px, 100%);
    max-height: calc(100vh - 32px);
    max-height: min(900px, calc(100dvh - 32px));
    display: grid;
    grid-template-rows: auto auto minmax(120px, 1fr) auto;
    overflow: hidden;
    color: var(--text-main);
    background: #0b1220;
    background:
        radial-gradient(circle at 8% 0%, rgba(239, 68, 68, .11), transparent 34%),
        linear-gradient(145deg, #111827, #080f1c 72%);
    border: 1px solid rgba(248, 113, 113, .3);
    border-radius: 28px;
    box-shadow: 0 36px 110px rgba(0, 0, 0, .72);
}

.finished-dialog-header {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 24px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.finished-dialog-heading {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.finished-dialog-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #fecaca;
    background: rgba(239, 68, 68, .14);
    border: 1px solid rgba(248, 113, 113, .28);
    font-size: 1.15rem;
}

.finished-dialog-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: #fca5a5;
    font-size: .62rem;
    font-weight: 950;
    letter-spacing: .13em;
}

.finished-dialog-heading h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    line-height: 1.1;
    letter-spacing: -.035em;
}

.finished-dialog-heading p {
    margin: 5px 0 0;
    color: #94a3b8;
    font-size: .78rem;
    line-height: 1.4;
}

.finished-dialog-close {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .06);
    color: #e2e8f0;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background .16s ease, transform .16s ease;
}
.finished-dialog-close:active { transform: scale(.95); background: rgba(255, 255, 255, .12); }

.finished-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 16px 24px;
    background: rgba(2, 6, 15, .28);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.finished-summary-item {
    min-width: 0;
    padding: 12px 14px;
    border-radius: 15px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .07);
}
.finished-summary-item span,
.finished-summary-item small { display: block; color: #94a3b8; }
.finished-summary-item span { font-size: .62rem; font-weight: 850; text-transform: uppercase; letter-spacing: .055em; }
.finished-summary-item strong { display: block; margin-top: 5px; color: #f8fafc; font-size: 1.05rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.finished-summary-item small { margin-top: 4px; font-size: .58rem; }
.finished-summary-item.is-warning { background: rgba(245, 158, 11, .07); border-color: rgba(245, 158, 11, .2); }
.finished-summary-item.is-warning strong { color: #fbbf24; }
.finished-summary-item.is-total { background: rgba(34, 197, 94, .07); border-color: rgba(34, 197, 94, .2); }
.finished-summary-item.is-total strong { color: #86efac; }

.finished-list {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    align-content: start;
    gap: 14px;
    padding: 18px 24px 22px;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

.finished-vehicle-card {
    min-width: 0;
    padding: 16px;
    border-radius: 20px;
    background: rgba(15, 23, 42, .86);
    border: 1px solid rgba(248, 113, 113, .22);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .2);
    overflow: hidden;
}

.finished-card-header {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.finished-vehicle-identity { min-width: 0; display: flex; align-items: center; gap: 10px; }
.finished-vehicle-identity > div { min-width: 0; }
.finished-vehicle-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: var(--finished-vehicle-color, #ef4444);
    background: color-mix(in srgb, var(--finished-vehicle-color, #ef4444) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--finished-vehicle-color, #ef4444) 30%, transparent);
}
.finished-vehicle-identity h3 { margin: 0; color: #fff; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.finished-vehicle-identity p { margin: 5px 0 0; color: #94a3b8; font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.finished-vehicle-identity p i { margin-right: 4px; color: #64748b; }
.finished-card-rank {
    flex: 0 0 auto;
    max-width: 44%;
    padding: 5px 7px;
    border-radius: 8px;
    color: #fca5a5;
    background: rgba(239, 68, 68, .1);
    border: 1px solid rgba(248, 113, 113, .18);
    font-size: .52rem;
    font-weight: 950;
    letter-spacing: .045em;
    text-align: center;
}

.finished-time-panel {
    margin-top: 14px;
    padding: 12px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(127, 29, 29, .62), rgba(69, 10, 10, .42));
    border: 1px solid rgba(248, 113, 113, .26);
}
.finished-time-panel span { display: block; color: #fecaca; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .055em; }
.finished-time-panel span i { margin-right: 4px; }
.finished-time-panel strong { display: block; margin-top: 5px; color: #fff; font-size: 1rem; line-height: 1.2; }
.finished-time-panel small { display: block; margin-top: 5px; color: rgba(254, 226, 226, .72); font-size: .62rem; }

.finished-value-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 10px;
}
.finished-value-grid > div { min-width: 0; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .065); }
.finished-value-grid span { display: block; color: #94a3b8; font-size: .56rem; font-weight: 800; text-transform: uppercase; }
.finished-value-grid strong { display: block; margin-top: 5px; color: #e2e8f0; font-size: .78rem; white-space: nowrap; }
.finished-value-grid .is-extra { background: rgba(245, 158, 11, .07); border-color: rgba(245, 158, 11, .18); }
.finished-value-grid .is-extra strong { color: #fbbf24; }
.finished-value-grid .is-total { background: rgba(34, 197, 94, .07); border-color: rgba(34, 197, 94, .18); }
.finished-value-grid .is-total strong { color: #86efac; }

.finished-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.finished-card-meta span { min-width: 0; display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 9px; color: #cbd5e1; background: rgba(255, 255, 255, .035); font-size: .6rem; font-weight: 700; }
.finished-card-meta i { color: #94a3b8; }

.finished-charge-hint { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; color: #93c5fd; font-size: .62rem; line-height: 1.45; }
.finished-charge-hint i { margin-top: 2px; flex: 0 0 auto; }

.finished-card-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 13px; }
.finished-card-actions button {
    min-width: 0;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 13px;
    font: inherit;
    font-size: .68rem;
    font-weight: 950;
    text-transform: uppercase;
    cursor: pointer;
}
.finished-card-finish { color: #ecfdf5; background: linear-gradient(135deg, #15803d, #16a34a); border: 1px solid #22c55e; box-shadow: 0 9px 20px rgba(22, 163, 74, .18); }
.finished-card-cancel { min-width: 92px !important; color: #fca5a5; background: rgba(239, 68, 68, .08); border: 1px solid rgba(248, 113, 113, .36); }
.finished-card-actions button:active { transform: scale(.98); }
.finished-readonly { margin-top: 12px; min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 12px; color: #94a3b8; background: rgba(148, 163, 184, .06); border: 1px solid rgba(148, 163, 184, .13); font-size: .66rem; font-weight: 850; }

.finished-empty-state { grid-column: 1 / -1; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #94a3b8; }
.finished-empty-state i { color: #22c55e; font-size: 2rem; }
.finished-empty-state strong { margin-top: 12px; color: #e2e8f0; }
.finished-empty-state span { margin-top: 5px; font-size: .72rem; }

.finished-dialog-footer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 16px 24px 20px;
    background: rgba(2, 6, 15, .6);
    border-top: 1px solid rgba(255, 255, 255, .07);
    box-shadow: 0 -12px 28px rgba(2, 6, 15, .22);
}
.finished-dialog-footer [hidden] { display: none !important; }
.finished-footer-button {
    min-width: 0;
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 14px;
    font: inherit;
    font-size: .72rem;
    font-weight: 950;
    text-transform: uppercase;
    cursor: pointer;
}
.finished-footer-button.is-neutral { color: #e2e8f0; background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .12); }
.finished-footer-button.is-success { color: #dcfce7; background: rgba(22, 163, 74, .18); border: 1px solid #22c55e; }
.finished-footer-button.is-danger { color: #fecaca; background: rgba(185, 28, 28, .17); border: 1px solid rgba(248, 113, 113, .5); }
.finished-footer-button:disabled { opacity: .58; cursor: wait; }

@media (max-width: 700px) {
    .finalized-modal {
        align-items: flex-end;
        padding: max(8px, env(safe-area-inset-top)) 0 0;
    }
    .finished-dialog {
        width: 100%;
        max-height: 96vh;
        max-height: calc(100dvh - max(8px, env(safe-area-inset-top)));
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        border-radius: 26px 26px 0 0;
    }
    .finished-dialog-header { padding: 17px max(15px, env(safe-area-inset-right)) 14px max(15px, env(safe-area-inset-left)); }
    .finished-dialog-icon { width: 42px; height: 42px; border-radius: 13px; }
    .finished-dialog-heading { gap: 10px; }
    .finished-dialog-heading h2 { font-size: 1.22rem; }
    .finished-dialog-heading p { font-size: .68rem; }
    .finished-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left)); }
    .finished-summary-item.is-total { grid-column: 1 / -1; }
    .finished-list { grid-template-columns: 1fr; gap: 10px; padding: 12px max(12px, env(safe-area-inset-right)) 14px max(12px, env(safe-area-inset-left)); scrollbar-gutter: auto; }
    .finished-dialog-footer {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 12px max(12px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    }
    .finished-footer-button.is-success { grid-column: 1 / -1; grid-row: 1; }
    .finished-footer-button { min-height: 48px; }
}

@media (max-width: 420px) {
    .finished-dialog-header { gap: 8px; }
    .finished-dialog-icon { display: none; }
    .finished-dialog-eyebrow { font-size: .56rem; }
    .finished-dialog-heading h2 { font-size: 1.1rem; }
    .finished-dialog-close { width: 42px; height: 42px; }
    .finished-summary-item { padding: 10px; }
    .finished-summary-item strong { font-size: .9rem; }
    .finished-vehicle-card { padding: 13px; border-radius: 17px; }
    .finished-card-rank { max-width: 40%; font-size: .47rem; }
    .finished-value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .finished-value-grid .is-total { grid-column: 1 / -1; }
    .finished-value-grid strong { font-size: .76rem; }
    .finished-card-actions { grid-template-columns: minmax(0, 1fr) 84px; }
    .finished-card-cancel { min-width: 0 !important; }
    .finished-card-actions button { font-size: .62rem; }
}

@media (max-width: 340px) {
    .finished-dialog-heading p { display: none; }
    .finished-card-rank { display: none; }
    .finished-summary { gap: 7px; }
    .finished-card-meta span { width: 100%; }
    .finished-card-actions { grid-template-columns: 1fr; }
    .finished-card-cancel { min-height: 42px !important; }
}

@media (max-height: 620px) and (min-width: 701px) {
    .finalized-modal { padding-top: 8px; padding-bottom: 8px; }
    .finished-dialog { max-height: calc(100dvh - 16px); }
    .finished-dialog-header { padding-top: 15px; padding-bottom: 12px; }
    .finished-summary { padding-top: 10px; padding-bottom: 10px; }
    .finished-list { padding-top: 12px; padding-bottom: 12px; }
    .finished-dialog-footer { padding-top: 11px; padding-bottom: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .finished-dialog-close,
    .finished-card-actions button { transition: none !important; }
}

/* Versão operacional compacta: uma linha por veículo e controles sempre visíveis. */
.finished-dialog {
    width: min(1080px, 100%);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
}
.finished-dialog-header { padding: 15px 18px; align-items: center; }
.finished-dialog-heading { gap: 10px; }
.finished-dialog-icon { width: 38px; height: 38px; border-radius: 11px; font-size: .9rem; }
.finished-dialog-eyebrow { display: none; }
.finished-dialog-heading h2 { font-size: 1.28rem; }
.finished-dialog-heading p { margin-top: 2px; font-size: .68rem; }
.finished-dialog-close { width: 40px; height: 40px; border-radius: 11px; }

.finished-quick-summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 18px;
    color: #cbd5e1;
    background: rgba(2, 6, 15, .34);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    font-size: .7rem;
    font-weight: 750;
}
.finished-quick-summary strong { color: #fff; font-size: .85rem; }
.finished-quick-summary .is-warning { color: #fde68a; white-space: nowrap; }
.finished-quick-summary .is-warning strong { color: #fbbf24; }

.finished-list {
    grid-template-columns: 1fr;
    grid-auto-rows: max-content;
    align-content: start;
    gap: 8px;
    padding: 10px 16px;
}

.finished-vehicle-card {
    height: max-content !important;
    min-height: 82px;
    align-self: start;
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(145px, 175px) minmax(265px, 310px) minmax(190px, 220px);
    grid-auto-rows: max-content;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 15px;
    overflow: visible;
    background: rgba(15, 23, 42, .78);
}
.finished-vehicle-identity { min-width: 0; gap: 9px; }
.finished-vehicle-icon { width: 36px; height: 36px; border-radius: 10px; }
.finished-name-line { min-width: 0; display: flex; align-items: center; gap: 7px; }
.finished-name-line h3 { min-width: 0; margin: 0; color: #fff; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.finished-name-line span { flex: 0 0 auto; color: #fca5a5; font-size: .58rem; font-weight: 900; }
.finished-vehicle-identity p { margin-top: 3px; font-size: .61rem; }

.finished-time-compact { min-width: 0; padding-left: 10px; border-left: 2px solid rgba(248, 113, 113, .32); }
.finished-time-compact strong { display: block; color: #fca5a5; font-size: .72rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.finished-time-compact span { display: block; margin-top: 3px; color: #94a3b8; font-size: .58rem; }

.finished-value-grid { margin: 0; gap: 5px; }
.finished-value-grid > div { padding: 7px 8px; border-radius: 9px; }
.finished-value-grid span { font-size: .49rem; }
.finished-value-grid strong { margin-top: 3px; font-size: .67rem; }

.finished-card-actions { margin: 0; grid-template-columns: minmax(105px, 1fr) minmax(72px, auto); gap: 6px; }
.finished-card-actions button { min-height: 40px; border-radius: 10px; font-size: .6rem; }
.finished-card-cancel { min-width: 72px !important; }
.finished-readonly { margin: 0; min-height: 40px; }
.finished-run-metrics {
    grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px;
    padding-top: 8px; border-top: 1px solid rgba(255,255,255,.065);
}
.finished-run-metrics span { min-width:0; color:#e2e8f0; font-size:.62rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.finished-run-metrics b { display:block; margin-bottom:3px; color:#94a3b8; font-size:.5rem; text-transform:uppercase; }
.finished-run-metrics em { color:#fde68a; font-style:normal; }

.finished-dialog-footer { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
.finished-footer-button { min-height: 44px; border-radius: 11px; font-size: .64rem; }

@media (max-width: 960px) {
    .finished-vehicle-card {
        grid-template-columns: minmax(0, 1fr) minmax(145px, 180px);
        min-height: 126px;
    }
    .finished-vehicle-identity { grid-column: 1; grid-row: 1; }
    .finished-time-compact { grid-column: 2; grid-row: 1; }
    .finished-value-grid { grid-column: 1; grid-row: 2; }
    .finished-card-actions,
    .finished-readonly { grid-column: 2; grid-row: 2; }
}

@media (max-width: 620px) {
    .finished-dialog-header { padding: 12px max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left)); }
    .finished-dialog-icon { display: none; }
    .finished-dialog-heading h2 { font-size: 1.05rem; }
    .finished-dialog-heading p { display: none; }
    .finished-quick-summary { min-height: 40px; padding: 7px max(12px, env(safe-area-inset-right)) 7px max(12px, env(safe-area-inset-left)); font-size: .62rem; }
    .finished-list { gap: 7px; padding: 8px max(8px, env(safe-area-inset-right)) 9px max(8px, env(safe-area-inset-left)); }
    .finished-vehicle-card {
        grid-template-columns: minmax(0, 1fr) minmax(122px, auto);
        min-height: 166px;
        padding: 10px;
    }
    .finished-value-grid { grid-column: 1 / -1; grid-row: 2; }
    .finished-card-actions,
    .finished-readonly { grid-column: 1 / -1; grid-row: 3; }
    .finished-card-actions { grid-template-columns: minmax(0, 1fr) minmax(88px, auto); }
    .finished-card-actions button { min-height: 42px; }
    .finished-run-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); grid-row:4; }
    .finished-dialog-footer { padding: 8px max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
}

@media (max-width: 350px) {
    .finished-quick-summary { align-items: flex-start; flex-direction: column; gap: 3px; }
    .finished-vehicle-card { grid-template-columns: 1fr; min-height: 205px; }
    .finished-vehicle-identity,
    .finished-time-compact,
    .finished-value-grid,
    .finished-card-actions,
    .finished-readonly { grid-column: 1; }
    .finished-vehicle-identity { grid-row: 1; }
    .finished-time-compact { grid-row: 2; padding-left: 0; border-left: 0; }
    .finished-value-grid { grid-row: 3; }
    .finished-card-actions,
    .finished-readonly { grid-row: 4; }
    .finished-run-metrics { grid-row:5; }
}

/* FINALIZADOS V109 — uma corrida por linha, fechada por padrão. */
.finished-list { grid-template-columns: 1fr; }
.finished-vehicle-card { display: block; min-height: 0; padding: 0; border-radius: 15px; }
.finished-card-summary {
    width: 100%; min-height: 54px; display: grid;
    grid-template-columns: minmax(120px,1fr) auto 18px;
    align-items: center; gap: 10px; padding: 10px 14px; border: 0;
    color: #e2e8f0; background: transparent; font: inherit; text-align: left; cursor: pointer;
}
.finished-card-summary strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color:#fff; font-size:.78rem; }
.finished-card-summary span { color:#fca5a5; font-size:.68rem; font-weight:850; white-space:nowrap; }
.finished-card-summary i { color:#64748b; text-align:center; }
.finished-card-details { display:grid; grid-template-columns:minmax(170px,1fr) minmax(265px,1.35fr) minmax(190px,220px); align-items:center; gap:10px; padding:12px 14px 14px; border-top:1px solid rgba(255,255,255,.07); }
.finished-card-details[hidden] { display:none !important; }
.finished-client-compact { min-width:0; display:flex; align-items:center; gap:9px; }
.finished-client-compact > div { min-width:0; }
.finished-client-compact small { display:block; color:#64748b; font-size:.49rem; font-weight:850; text-transform:uppercase; }
.finished-client-compact strong { display:block; margin-top:2px; color:#fff; font-size:.76rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.finished-client-compact p { margin:3px 0 0; color:#94a3b8; font-size:.58rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.finished-client-compact p i { margin-right:4px; }
.finished-card-details > .finished-client-compact { grid-column:1; grid-row:1; }
.finished-card-details > .finished-value-grid { grid-column:2; grid-row:1; }
.finished-card-details > .finished-card-actions,
.finished-card-details > .finished-readonly { grid-column:3; grid-row:1; }
.finished-card-details > .finished-run-metrics { grid-column:1 / -1; grid-row:2; }
@media (max-width: 720px) {
    .finished-card-summary { grid-template-columns:minmax(90px,1fr) auto 14px; gap:6px; padding:9px 10px; }
    .finished-card-summary strong { font-size:.68rem; }
    .finished-card-summary span { font-size:.58rem; }
    .finished-card-details { grid-template-columns:1fr 1fr; padding:10px; }
    .finished-card-details .finished-client-compact { grid-column:1; grid-row:1; }
    .finished-card-details .finished-card-actions,.finished-card-details .finished-readonly { grid-column:2; grid-row:1; }
    .finished-card-details .finished-value-grid { grid-column:1 / -1; grid-row:2; }
    .finished-card-details .finished-run-metrics { grid-column:1 / -1; grid-row:3; }
}
@media (max-width: 430px) {
    .finished-card-summary { grid-template-columns:minmax(80px,1fr) minmax(100px,auto) 14px; }
    .finished-card-summary span { overflow:hidden; text-overflow:ellipsis; }
    .finished-card-details { grid-template-columns:1fr; }
    .finished-card-details .finished-client-compact,
    .finished-card-details .finished-value-grid,
    .finished-card-details .finished-card-actions,
    .finished-card-details .finished-readonly,
    .finished-card-details .finished-run-metrics { grid-column:1; grid-row:auto; }
}