:root {
    --brand: #6c5ce7;
    --brand-dark: #352a91;
    --ink: #12131a;
    --muted: #606575;
    --paper: #f7f8fb;
    --line: #dfe3ec;
    --mint: #2ec4a6;
    --amber: #ffb84d;
    --danger: #f45b69;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html,
body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--paper);
    color: var(--ink);
    overflow-x: hidden;
}

body {
    min-width: 320px;
}

a {
    color: inherit;
}

h1:focus {
    outline: none;
}

.hero {
    min-height: 92vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(8, 10, 18, 0.74) 0%, rgba(8, 10, 18, 0.44) 35%, rgba(8, 10, 18, 0.88) 100%),
        image-set(url("/images/cofauto-hero.png") 1x);
    background-size: cover;
    background-position: 58% center;
}

.hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 30%;
    background: linear-gradient(180deg, transparent, #11131b);
    pointer-events: none;
}

.landing-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1rem;
    color: #fff;
    background: rgba(14, 16, 28, 0.78);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: 0;
}

.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: var(--brand);
    color: #fff;
    box-shadow: 0 12px 28px rgba(108, 92, 231, 0.36);
}

.nav-links {
    display: none;
}

.nav-cta,
.button-primary,
.button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.8rem;
    border-radius: 8px;
    padding: 0.78rem 1rem;
    text-decoration: none;
    font-weight: 800;
}

.nav-cta {
    background: #fff;
    color: var(--ink);
}

.hero-copy {
    position: relative;
    z-index: 2;
    width: min(100%, 1120px);
    margin: 0 auto;
    padding: 7.5rem 1rem 4.8rem;
}

.eyebrow,
.section-kicker {
    display: block;
    max-width: 100%;
    color: var(--mint);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.hero h1 {
    margin: 0.7rem 0 0;
    font-size: clamp(4rem, 18vw, 9rem);
    line-height: 0.88;
    font-weight: 950;
    letter-spacing: 0;
}

.hero-copy p {
    max-width: 43rem;
    margin: 1.35rem 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: clamp(1.05rem, 3.8vw, 1.4rem);
    line-height: 1.45;
}

.hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    width: min(100%, 25rem);
    margin-top: 1.6rem;
}

.button-primary {
    color: #fff;
    background: var(--brand);
    box-shadow: 0 18px 36px rgba(108, 92, 231, 0.34);
}

.button-secondary {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.1);
}

.hero-proof {
    display: grid;
    gap: 0.75rem;
    margin-top: 2rem;
}

.hero-proof span {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    padding: 0.82rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.92rem;
    min-width: 0;
}

.hero-proof strong {
    color: #fff;
    font-size: 1.12rem;
}

.section-inner {
    width: min(100%, 1120px);
    margin: 0 auto;
    padding: 4.5rem 1rem;
}

.pain-strip {
    color: #fff;
    background: #11131b;
}

.section-inner > h2,
.solution-band h2,
.features h2,
.impact h2,
.operator-band h2,
.cta-section h2 {
    max-width: 48rem;
    margin: 0.7rem 0 0;
    font-size: clamp(2rem, 9vw, 4.2rem);
    line-height: 0.98;
    font-weight: 920;
    letter-spacing: 0;
}

.pain-grid,
.feature-grid,
.impact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.pain-grid {
    margin-top: 2rem;
}

.pain-grid article,
.feature-grid article {
    border-radius: 8px;
    padding: 1.2rem;
}

.pain-grid article {
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(255, 255, 255, 0.045);
}

.pain-grid span {
    color: var(--amber);
    font-weight: 900;
}

.pain-grid h3,
.feature-grid h3 {
    margin: 0.8rem 0 0;
    font-size: 1.15rem;
    font-weight: 850;
}

.pain-grid p,
.feature-grid p,
.solution-band p,
.impact p,
.operator-band p,
.cta-section p {
    margin: 0.7rem 0 0;
    color: var(--muted);
    line-height: 1.65;
}

.pain-grid p {
    color: rgba(255, 255, 255, 0.68);
}

.solution-band {
    background: #fff;
}

.split-layout,
.operator-panel {
    display: grid;
    gap: 2rem;
}

.check-list {
    display: grid;
    gap: 0.75rem;
    margin: 1.4rem 0 0;
    padding: 0;
    list-style: none;
}

.check-list li {
    position: relative;
    padding-left: 2rem;
    color: #333846;
    line-height: 1.5;
}

.check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35rem;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: inset 0 0 0 0.28rem #fff, 0 0 0 0.12rem var(--mint);
}

.phone-flow {
    width: min(100%, 22rem);
    margin: 0 auto;
    border-radius: 28px;
    padding: 1rem;
    background: #151821;
    border: 10px solid #080a10;
    box-shadow: 0 36px 60px rgba(18, 19, 26, 0.22);
}

.phone-top {
    width: 5rem;
    height: 0.35rem;
    margin: 0 auto 1rem;
    border-radius: 999px;
    background: #343847;
}

.scan-frame {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 8px;
    background: linear-gradient(135deg, #222636, #151821);
    overflow: hidden;
}

.scan-frame::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: 48%;
    height: 2px;
    background: var(--mint);
    box-shadow: 0 0 22px var(--mint);
}

.scan-frame span {
    position: absolute;
    width: 2.5rem;
    height: 2.5rem;
    border-color: var(--brand);
    border-style: solid;
}

.scan-frame span:nth-child(1) {
    top: 1rem;
    left: 1rem;
    border-width: 3px 0 0 3px;
}

.scan-frame span:nth-child(2) {
    top: 1rem;
    right: 1rem;
    border-width: 3px 3px 0 0;
}

.scan-frame span:nth-child(3) {
    right: 1rem;
    bottom: 1rem;
    border-width: 0 3px 3px 0;
}

.scan-frame span:nth-child(4) {
    left: 1rem;
    bottom: 1rem;
    border-width: 0 0 3px 3px;
}

.qr-pattern {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 0.28rem;
    width: 8.8rem;
    padding: 0.65rem;
    border-radius: 8px;
    background: #fff;
}

.qr-pattern i {
    aspect-ratio: 1;
    border-radius: 2px;
    background: #12131a;
}

.qr-pattern i:nth-child(3n),
.qr-pattern i:nth-child(7n) {
    background: transparent;
}

.vehicle-card,
.flow-step {
    border-radius: 8px;
    padding: 0.85rem;
    background: #fff;
}

.vehicle-card {
    display: grid;
    gap: 0.2rem;
    margin-top: 1rem;
}

.vehicle-card span {
    color: var(--mint);
    font-size: 0.88rem;
    font-weight: 800;
}

.flow-step {
    margin-top: 0.6rem;
    color: #a8adbc;
    border: 1px solid #2a2f3e;
    background: #1d212d;
    font-size: 0.9rem;
}

.flow-step.active {
    color: #fff;
    border-color: rgba(108, 92, 231, 0.7);
    background: rgba(108, 92, 231, 0.22);
}

.features {
    background: #f1f3f8;
}

.feature-grid {
    margin-top: 2rem;
}

.feature-grid article {
    background: #fff;
    border: 1px solid var(--line);
}

.feature-icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 8px;
    color: #fff;
    background: #151821;
    font-weight: 900;
}

.feature-grid article:nth-child(2n) .feature-icon {
    background: var(--brand);
}

.feature-grid article:nth-child(3n) .feature-icon {
    background: var(--mint);
}

.impact {
    background: #fff;
}

.impact-grid {
    align-items: center;
}

.metric-wall {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin: 0;
}

.metric-wall div {
    padding: 1.1rem;
    border-radius: 8px;
    background: #11131b;
    color: #fff;
}

.metric-wall dt {
    font-size: clamp(2rem, 11vw, 3.6rem);
    line-height: 1;
    font-weight: 950;
    color: var(--amber);
}

.metric-wall dd {
    margin: 0.5rem 0 0;
    color: rgba(255, 255, 255, 0.72);
}

.operator-band {
    background: #e8fbf6;
}

.operator-panel {
    align-items: start;
}

.timeline {
    display: grid;
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.timeline li {
    display: grid;
    gap: 0.2rem;
    padding: 1rem;
    border-left: 5px solid var(--brand);
    border-radius: 8px;
    background: #fff;
}

.timeline span {
    color: var(--muted);
    line-height: 1.5;
}

.cta-section {
    color: #fff;
    background: #11131b;
}

.cta-panel {
    text-align: left;
}

.cta-panel p {
    max-width: 42rem;
    color: rgba(255, 255, 255, 0.7);
}

.cta-panel .button-primary {
    margin-top: 1.4rem;
}

.footer {
    background: #090b11;
    color: #fff;
}

.footer-inner {
    display: grid;
    gap: 1rem;
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
}

.footer span:not(.brand-mark) {
    color: rgba(255, 255, 255, 0.62);
}

/* ============================================================
   AUTH PAGES — Login, Cadastro, Esqueci minha senha
   ============================================================ */

.auth-shell {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1fr;
    background: #080a10;
}

.auth-shell--centered .auth-form-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.auth-shell--centered .auth-card {
    width: 100%;
    max-width: 26rem;
}

/* ---- Brand panel (desktop only) ---- */
.auth-brand-panel {
    display: none;
}

/* ---- Form panel ---- */
.auth-form-panel {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: #080a10;
}

/* ---- Top nav (visible on mobile, hidden when brand panel shows) ---- */
.auth-top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    color: #fff;
}

.auth-top-nav .brand {
    color: #fff;
    text-decoration: none;
}

.auth-nav-link {
    color: rgba(255,255,255,0.62);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.15s;
}

.auth-nav-link:hover {
    color: #fff;
}

/* ---- Card ---- */
.auth-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 1.25rem 2.5rem;
    width: 100%;
    max-width: 28rem;
    margin: 0 auto;
}

.auth-card-header {
    margin-bottom: 1.75rem;
}

.auth-card-header h2 {
    margin: 0 0 0.4rem;
    color: #fff;
    font-size: clamp(1.5rem, 5vw, 1.9rem);
    font-weight: 900;
    line-height: 1.1;
}

.auth-card-header p {
    margin: 0;
    color: rgba(255,255,255,0.54);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ---- Icon badge (Esqueci senha) ---- */
.auth-icon-badge {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 12px;
    background: rgba(108,92,231,0.18);
    border: 1px solid rgba(108,92,231,0.35);
    color: var(--brand);
    margin-bottom: 1.1rem;
}

.auth-icon-badge svg {
    width: 1.4rem;
    height: 1.4rem;
}

/* ---- Form ---- */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.field-group {
    display: flex;
    flex-direction: column;
    gap: 0.42rem;
}

.field-group label {
    color: rgba(255,255,255,0.78);
    font-size: 0.88rem;
    font-weight: 700;
}

.field-group input {
    width: 100%;
    padding: 0.78rem 0.95rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: #fff;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s;
    outline: none;
}

.field-group input::placeholder {
    color: rgba(255,255,255,0.28);
}

.field-group input:focus {
    border-color: var(--brand);
    background: rgba(108,92,231,0.08);
}

.field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.field-link {
    color: var(--brand);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.15s;
}

.field-link:hover {
    opacity: 0.8;
}

/* ---- Input com botão de toggle ---- */
.input-with-toggle {
    position: relative;
}

.input-with-toggle input {
    padding-right: 3rem;
}

.toggle-eye {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: rgba(255,255,255,0.38);
    display: grid;
    place-items: center;
    transition: color 0.15s;
}

.toggle-eye:hover {
    color: rgba(255,255,255,0.72);
}

.toggle-eye svg {
    width: 1.1rem;
    height: 1.1rem;
}

/* ---- Força de senha ---- */
.password-strength {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.35rem;
}

.strength-bar {
    display: flex;
    gap: 0.3rem;
    flex: 1;
}

.strength-bar span {
    flex: 1;
    height: 3px;
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
    transition: background 0.25s;
}

.strength-bar span.active.weak   { background: var(--danger); }
.strength-bar span.active.fair   { background: var(--amber); }
.strength-bar span.active.good   { background: #74c0fc; }
.strength-bar span.active.strong { background: var(--mint); }

.strength-label {
    font-size: 0.75rem;
    font-weight: 800;
    min-width: 3.5rem;
    text-align: right;
}

.label-weak   { color: var(--danger); }
.label-fair   { color: var(--amber); }
.label-good   { color: #74c0fc; }
.label-strong { color: var(--mint); }

/* ---- Two-column field row ---- */
.field-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* ---- Alert ---- */
.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.78rem 0.95rem;
    border-radius: 8px;
    font-size: 0.88rem;
    line-height: 1.5;
}

.auth-alert svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.auth-alert--error {
    background: rgba(244,91,105,0.12);
    border: 1px solid rgba(244,91,105,0.3);
    color: #f45b69;
}

/* ---- Termos ---- */
.auth-terms {
    margin: 0;
    color: rgba(255,255,255,0.38);
    font-size: 0.8rem;
    line-height: 1.55;
}

.auth-terms a {
    color: rgba(255,255,255,0.6);
    font-weight: 700;
    text-decoration: underline;
}

/* ---- Buttons ---- */
.btn-auth-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.88rem 1rem;
    border-radius: 8px;
    border: none;
    background: var(--brand);
    color: #fff;
    font-size: 0.97rem;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s, transform 0.1s;
    box-shadow: 0 12px 28px rgba(108,92,231,0.3);
}

.btn-auth-primary:hover:not(:disabled) {
    opacity: 0.88;
}

.btn-auth-primary:active:not(:disabled) {
    transform: scale(0.98);
}

.btn-auth-primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-auth-ghost {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.88rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.14);
    background: transparent;
    color: rgba(255,255,255,0.7);
    font-size: 0.92rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.btn-auth-ghost:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
}

/* ---- Spinner ---- */
.btn-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ---- Footer da card ---- */
.auth-card-footer {
    margin-top: 1.5rem;
    text-align: center;
    color: rgba(255,255,255,0.4);
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.auth-card-footer a {
    color: var(--brand);
    font-weight: 800;
    text-decoration: none;
}

.auth-card-footer a:hover {
    text-decoration: underline;
}

/* ---- Success state ---- */
.auth-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.85rem;
    padding: 1rem 0;
}

.auth-success-icon {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: rgba(46,196,166,0.14);
    border: 1px solid rgba(46,196,166,0.35);
    color: var(--mint);
    margin-bottom: 0.25rem;
}

.auth-success-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.auth-success h3 {
    margin: 0;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 900;
}

.auth-success p {
    margin: 0;
    color: rgba(255,255,255,0.54);
    font-size: 0.92rem;
    line-height: 1.6;
    max-width: 22rem;
}

.auth-success p strong {
    color: rgba(255,255,255,0.82);
}

.auth-success .btn-auth-primary,
.auth-success .btn-auth-ghost {
    margin-top: 0.25rem;
}

/* ---- Desktop layout ---- */
@media (min-width: 860px) {
    .auth-shell {
        grid-template-columns: 1fr 1fr;
    }

    .auth-brand-panel {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 2rem 2.5rem 2.5rem;
        background:
            linear-gradient(180deg, rgba(8,10,18,0.72) 0%, rgba(8,10,18,0.42) 40%, rgba(8,10,18,0.9) 100%),
            image-set(url("/images/cofauto-hero.png") 1x);
        background-size: cover;
        background-position: 58% center;
        color: #fff;
        position: sticky;
        top: 0;
        height: 100dvh;
    }

    .auth-brand-logo {
        color: #fff;
        text-decoration: none;
    }

    .auth-brand-copy {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 2rem 0;
    }

    .auth-brand-copy h1 {
        margin: 0.6rem 0 0;
        font-size: clamp(2rem, 3.5vw, 3rem);
        font-weight: 950;
        line-height: 1;
        color: #fff;
    }

    .auth-brand-copy p {
        margin: 0.8rem 0 0;
        color: rgba(255,255,255,0.7);
        font-size: 1rem;
        line-height: 1.55;
        max-width: 26rem;
    }

    .auth-brand-stats {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 0.6rem;
    }

    .auth-brand-stats > div {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        padding: 0.85rem;
        border-radius: 8px;
        background: rgba(255,255,255,0.07);
        border: 1px solid rgba(255,255,255,0.1);
        backdrop-filter: blur(12px);
    }

    .auth-brand-stats strong {
        font-size: 1.1rem;
        font-weight: 900;
        color: #fff;
    }

    .auth-brand-stats span {
        font-size: 0.75rem;
        color: rgba(255,255,255,0.6);
        line-height: 1.3;
    }

    .auth-brand-checklist {
        display: grid;
        gap: 0.65rem;
        padding: 0;
        list-style: none;
        margin: 1.5rem 0 0;
    }

    .auth-brand-checklist li {
        position: relative;
        padding: 0.75rem 0.9rem 0.75rem 2.2rem;
        border-radius: 8px;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.1);
        color: rgba(255,255,255,0.75);
        font-size: 0.88rem;
        line-height: 1.4;
    }

    .auth-brand-checklist li::before {
        content: "";
        position: absolute;
        left: 0.8rem;
        top: 50%;
        transform: translateY(-50%);
        width: 0.7rem;
        height: 0.7rem;
        border-radius: 50%;
        background: var(--mint);
    }

    /* On desktop, hide the top nav inside form panel (brand panel replaces it) */
    .auth-shell:not(.auth-shell--centered) .auth-top-nav {
        display: none;
    }

    .auth-form-panel {
        overflow-y: auto;
        max-height: 100dvh;
    }

    .auth-card {
        padding: 3.5rem 2.5rem;
        max-width: 32rem;
        justify-content: center;
        min-height: 100dvh;
    }

    /* Centered variant (Esqueci Senha) — keeps top nav on desktop */
    .auth-shell--centered {
        grid-template-columns: 1fr;
    }

    .auth-shell--centered .auth-top-nav {
        display: flex;
    }

    .auth-shell--centered .auth-card {
        padding: 2rem 1.5rem 3rem;
        min-height: unset;
    }
}

/* ============================================================
   END AUTH PAGES
   ============================================================ */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: #b32121;
    color: white;
    padding: 1rem;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

@media (min-width: 560px) {
    .hero-actions {
        grid-template-columns: 1fr 1fr;
    }

    .hero-proof {
        grid-template-columns: repeat(3, 1fr);
    }

    .hero-proof span {
        display: block;
    }

    .metric-wall {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 430px) {
    .nav-cta {
        min-height: 2.5rem;
        padding: 0.65rem 0.78rem;
        font-size: 0.88rem;
    }

    .hero h1 {
        font-size: clamp(3.25rem, 16vw, 4.6rem);
    }
}

@media (min-width: 760px) {
    .landing-nav {
        padding: 0.95rem 1.5rem;
    }

    .nav-links {
        display: flex;
        align-items: center;
        gap: 1.4rem;
        color: rgba(255, 255, 255, 0.78);
        font-size: 0.92rem;
        font-weight: 750;
    }

    .nav-links a {
        text-decoration: none;
    }

    .section-inner {
        padding: 6rem 1.5rem;
    }

    .pain-grid,
    .feature-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .split-layout,
    .impact-grid,
    .operator-panel {
        grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.85fr);
    }

    .feature-grid article:nth-child(4),
    .feature-grid article:nth-child(5),
    .feature-grid article:nth-child(6) {
        margin-top: 1rem;
    }

    .footer-inner {
        grid-template-columns: auto 1fr;
        align-items: center;
        justify-content: space-between;
    }
}

@media (min-width: 1040px) {
    .hero {
        background-position: center;
    }

    .hero-copy {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .hero-copy p {
        font-size: 1.45rem;
    }
}
    border-radius: 12px;
    background: rgba(108,92,231,0.18);
    border: 1px solid rgba(108,92,231,0.35);
    color: var(--brand);
    margin-bottom: 1.1rem;
}

.auth-icon-badge svg {
    width: 1.4rem;
    height: 1.4rem;
}

/* ---- Form ---- */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.field-group {
    display: flex;
    flex-direction: column;
    gap: 0.42rem;
}

.field-group label {
    color: rgba(255,255,255,0.78);
    font-size: 0.88rem;
    font-weight: 700;
}

.field-group input {
    width: 100%;
    padding: 0.78rem 0.95rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: #fff;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s;
    outline: none;
}

.field-group input::placeholder { color: rgba(255,255,255,0.28); }
.field-group input:focus { border-color: var(--brand); background: rgba(108,92,231,0.08); }

.field-label-row { display: flex; align-items: center; justify-content: space-between; }

.field-link { color: var(--brand); font-size: 0.82rem; font-weight: 700; text-decoration: none; transition: opacity 0.15s; }
.field-link:hover { opacity: 0.8; }

.input-with-toggle { position: relative; }
.input-with-toggle input { padding-right: 3rem; }

.toggle-eye {
    position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
    background: none; border: none; padding: 0; cursor: pointer;
    color: rgba(255,255,255,0.38); display: grid; place-items: center; transition: color 0.15s;
}
.toggle-eye:hover { color: rgba(255,255,255,0.72); }
.toggle-eye svg { width: 1.1rem; height: 1.1rem; }

.password-strength { display: flex; align-items: center; gap: 0.65rem; margin-top: 0.35rem; }
.strength-bar { display: flex; gap: 0.3rem; flex: 1; }
.strength-bar span { flex: 1; height: 3px; border-radius: 999px; background: rgba(255,255,255,0.1); transition: background 0.25s; }
.strength-bar span.active.weak   { background: var(--danger); }
.strength-bar span.active.fair   { background: var(--amber); }
.strength-bar span.active.good   { background: #74c0fc; }
.strength-bar span.active.strong { background: var(--mint); }
.strength-label { font-size: 0.75rem; font-weight: 800; min-width: 3.5rem; text-align: right; }
.label-weak   { color: var(--danger); }
.label-fair   { color: var(--amber); }
.label-good   { color: #74c0fc; }
.label-strong { color: var(--mint); }

.field-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

.auth-alert { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.78rem 0.95rem; border-radius: 8px; font-size: 0.88rem; line-height: 1.5; }
.auth-alert svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.1rem; }
.auth-alert--error { background: rgba(244,91,105,0.12); border: 1px solid rgba(244,91,105,0.3); color: #f45b69; }

.auth-terms { margin: 0; color: rgba(255,255,255,0.38); font-size: 0.8rem; line-height: 1.55; }
.auth-terms a { color: rgba(255,255,255,0.6); font-weight: 700; text-decoration: underline; }

.btn-auth-primary {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    width: 100%; padding: 0.88rem 1rem; border-radius: 8px; border: none;
    background: var(--brand); color: #fff; font-size: 0.97rem; font-weight: 800;
    font-family: inherit; cursor: pointer; text-decoration: none;
    transition: opacity 0.15s, transform 0.1s; box-shadow: 0 12px 28px rgba(108,92,231,0.3);
}
.btn-auth-primary:hover:not(:disabled) { opacity: 0.88; }
.btn-auth-primary:active:not(:disabled) { transform: scale(0.98); }
.btn-auth-primary:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-auth-ghost {
    display: flex; align-items: center; justify-content: center;
    width: 100%; padding: 0.88rem 1rem; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.14); background: transparent;
    color: rgba(255,255,255,0.7); font-size: 0.92rem; font-weight: 700;
    font-family: inherit; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.btn-auth-ghost:hover { background: rgba(255,255,255,0.06); color: #fff; }

.btn-spinner {
    width: 1rem; height: 1rem; border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.auth-card-footer {
    margin-top: 1.5rem; text-align: center; color: rgba(255,255,255,0.4);
    font-size: 0.88rem; display: flex; align-items: center; justify-content: center; gap: 0.4rem;
}
.auth-card-footer a { color: var(--brand); font-weight: 800; text-decoration: none; }
.auth-card-footer a:hover { text-decoration: underline; }

.auth-success { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.85rem; padding: 1rem 0; }
.auth-success-icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: rgba(46,196,166,0.14); border: 1px solid rgba(46,196,166,0.35); color: var(--mint); margin-bottom: 0.25rem; }
.auth-success-icon svg { width: 1.5rem; height: 1.5rem; }
.auth-success h3 { margin: 0; color: #fff; font-size: 1.35rem; font-weight: 900; }
.auth-success p { margin: 0; color: rgba(255,255,255,0.54); font-size: 0.92rem; line-height: 1.6; max-width: 22rem; }
.auth-success p strong { color: rgba(255,255,255,0.82); }

@media (min-width: 860px) {
    .auth-shell { grid-template-columns: 1fr 1fr; }
    .auth-brand-panel {
        display: flex; flex-direction: column; justify-content: space-between;
        padding: 2rem 2.5rem 2.5rem;
        background: linear-gradient(180deg, rgba(8,10,18,0.72) 0%, rgba(8,10,18,0.42) 40%, rgba(8,10,18,0.9) 100%), image-set(url("/images/cofauto-hero.png") 1x);
        background-size: cover; background-position: 58% center;
        color: #fff; position: sticky; top: 0; height: 100dvh;
    }
    .auth-brand-logo { color: #fff; text-decoration: none; }
    .auth-brand-copy { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 2rem 0; }
    .auth-brand-copy h1 { margin: 0.6rem 0 0; font-size: clamp(2rem,3.5vw,3rem); font-weight: 950; line-height: 1; color: #fff; }
    .auth-brand-copy p { margin: 0.8rem 0 0; color: rgba(255,255,255,0.7); font-size: 1rem; line-height: 1.55; max-width: 26rem; }
    .auth-brand-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.6rem; }
    .auth-brand-stats > div { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.85rem; border-radius: 8px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(12px); }
    .auth-brand-stats strong { font-size: 1.1rem; font-weight: 900; color: #fff; }
    .auth-brand-stats span { font-size: 0.75rem; color: rgba(255,255,255,0.6); line-height: 1.3; }
    .auth-brand-checklist { display: grid; gap: 0.65rem; padding: 0; list-style: none; margin: 1.5rem 0 0; }
    .auth-brand-checklist li { position: relative; padding: 0.75rem 0.9rem 0.75rem 2.2rem; border-radius: 8px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.75); font-size: 0.88rem; line-height: 1.4; }
    .auth-brand-checklist li::before { content: ""; position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--mint); }
    .auth-shell:not(.auth-shell--centered) .auth-top-nav { display: none; }
    .auth-form-panel { overflow-y: auto; max-height: 100dvh; }
    .auth-card { padding: 3.5rem 2.5rem; max-width: 32rem; justify-content: center; min-height: 100dvh; }
    .auth-shell--centered { grid-template-columns: 1fr; }
    .auth-shell--centered .auth-top-nav { display: flex; }
    .auth-shell--centered .auth-card { padding: 2rem 1.5rem 3rem; min-height: unset; }
}

/* ============================================================
   APP SHELL — Layout autenticado (Sidebar + TopBar + Content)
   ============================================================ */

/* ── Variáveis do shell ── */
:root {
    --sidebar-w: 240px;
    --sidebar-w-collapsed: 64px;
    --topbar-h: 56px;
    --shell-bg: #f4f5f9;
    --sidebar-bg: #0d0f18;
    --sidebar-border: rgba(255,255,255,0.07);
}

/* ── Toggle mobile (input checkbox oculto) ── */
.mobile-sidebar-input { display: none; }

/* ── Shell grid ── */
.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100dvh;
    transition: grid-template-columns 0.28s cubic-bezier(0.4,0,0.2,1);
}

.app-shell.sidebar-collapsed {
    grid-template-columns: var(--sidebar-w-collapsed) 1fr;
}

/* ── Sidebar ── */
.sidebar {
    position: sticky;
    top: 0;
    height: 100dvh;
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    overflow: hidden;
    transition: width 0.28s cubic-bezier(0.4,0,0.2,1), min-width 0.28s cubic-bezier(0.4,0,0.2,1);
    z-index: 30;
}

.sidebar--collapsed {
    width: var(--sidebar-w-collapsed);
    min-width: var(--sidebar-w-collapsed);
}

/* ── Sidebar header ── */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.75rem;
    height: var(--topbar-h);
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink: 0;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-brand-name {
    opacity: 1;
    transition: opacity 0.2s;
}

.sidebar--collapsed .sidebar-brand-name { opacity: 0; }

.sidebar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.45);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.sidebar-collapse-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sidebar-collapse-btn svg { width: 1rem; height: 1rem; }

/* ── Nav ── */
.sidebar-nav,
.sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.75rem 0.5rem;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-nav { flex: 1; }
.sidebar-footer { flex-shrink: 0; border-top: 1px solid var(--sidebar-border); padding-top: 0.75rem; }

.nav-group-label {
    display: block;
    padding: 0.5rem 0.6rem 0.2rem;
    color: rgba(255,255,255,0.3);
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
}

.nav-divider {
    height: 1px;
    background: var(--sidebar-border);
    margin: 0.4rem 0.5rem;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.65rem;
    border-radius: 8px;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: inherit;
    transition: background 0.12s, color 0.12s;
}

.nav-item:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.88); }

.nav-item--active {
    background: rgba(108,92,231,0.16);
    color: #fff;
    font-weight: 700;
}

.nav-item--active .nav-icon { color: var(--brand); }

.nav-item--logout:hover { background: rgba(244,91,105,0.1); color: #f45b69; }
.nav-item--logout .nav-icon { transition: color 0.12s; }
.nav-item--logout:hover .nav-icon { color: #f45b69; }

.nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: rgba(255,255,255,0.4);
    transition: color 0.12s;
}

.nav-icon svg { width: 1.1rem; height: 1.1rem; }

.nav-label { flex: 1; }

.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 900;
    flex-shrink: 0;
}

.nav-badge--warning { background: var(--amber); color: #12131a; }

/* ── App main area ── */
.app-main {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--shell-bg);
    overflow: hidden;
}

/* ── TopBar ── */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--topbar-h);
    padding: 0 1.25rem;
    background: #fff;
    border-bottom: 1px solid #e8eaf0;
    position: sticky;
    top: 0;
    z-index: 20;
    flex-shrink: 0;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 6px;
    cursor: pointer;
    padding: 0.4rem 0.35rem;
    transition: background 0.15s;
}

.hamburger-btn:hover { background: #f0f1f5; }

.hamburger-btn span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: #606575;
    transition: transform 0.2s;
}

.topbar-system {
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--ink);
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.topbar-icon-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.topbar-icon-btn:hover { background: #f0f1f5; color: var(--ink); }
.topbar-icon-btn svg { width: 1.1rem; height: 1.1rem; }

.topbar-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 0.9rem;
    height: 0.9rem;
    padding: 0 0.2rem;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0.5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.topbar-user:hover { background: #f0f1f5; }

.topbar-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 900;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.topbar-user-info {
    display: none;
    flex-direction: column;
    line-height: 1.2;
}

.topbar-user-info strong {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--ink);
}

.topbar-user-info span {
    font-size: 0.72rem;
    color: var(--muted);
}

/* ── App content area ── */
.app-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

/* ── Mobile overlay ── */
.mobile-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(8,10,18,0.6);
    z-index: 25;
    backdrop-filter: blur(2px);
}

/* ============================================================
   DASHBOARD
   ============================================================ */

.dash {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 1280px;
    margin: 0 auto;
}

.dash-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.dash-title {
    margin: 0;
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    font-weight: 900;
    color: var(--ink);
    line-height: 1.1;
}

.dash-subtitle {
    margin: 0.3rem 0 0;
    color: var(--muted);
    font-size: 0.88rem;
}

.dash-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.1rem;
    border-radius: 8px;
    background: var(--brand);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s;
    box-shadow: 0 4px 16px rgba(108,92,231,0.28);
}

.dash-btn-primary:hover { opacity: 0.88; }
.dash-btn-primary svg { width: 1rem; height: 1rem; }

/* ── KPI cards ── */
.dash-kpi-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
}

.kpi-card {
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1.15rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e8eaf0;
    gap: 0.35rem;
}

.kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kpi-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kpi-icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    flex-shrink: 0;
}

.kpi-icon svg { width: 1rem; height: 1rem; }

.kpi-icon--green  { background: rgba(46,196,166,0.12); color: var(--mint); }
.kpi-icon--brand  { background: rgba(108,92,231,0.12); color: var(--brand); }
.kpi-icon--amber  { background: rgba(255,184,77,0.14); color: var(--amber); }
.kpi-icon--red    { background: rgba(244,91,105,0.12); color: var(--danger); }

.kpi-value {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 950;
    color: var(--ink);
    line-height: 1;
}

.kpi-card--green  .kpi-value { color: #1a9e8b; }
.kpi-card--brand  .kpi-value { color: var(--brand); }
.kpi-card--amber  .kpi-value { color: #c8860a; }
.kpi-card--red    .kpi-value { color: var(--danger); }

.kpi-footer {
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 0.1rem;
}

.kpi-footer--link a {
    color: var(--brand);
    font-weight: 700;
    text-decoration: none;
    font-size: 0.75rem;
}

/* ── Card genérico ── */
.dash-card {
    background: #fff;
    border: 1px solid #e8eaf0;
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
}

.dash-card--wide { grid-column: span 1; }

.dash-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 0.5rem;
}

.dash-card-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--ink);
}

.dash-card-sub {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    color: var(--muted);
}

.dash-card-link {
    color: var(--brand);
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.dash-card-link:hover { text-decoration: underline; }

/* ── Rows ── */
.dash-row-main,
.dash-row-bottom {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}

/* ── Trip list ── */
.trip-list { display: flex; flex-direction: column; gap: 0.6rem; }

.trip-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.75rem;
    border-radius: 8px;
    background: #f8f9fc;
    border: 1px solid #edf0f5;
    transition: border-color 0.12s;
}

.trip-item:hover { border-color: #d0d5e8; }

.trip-vehicle-badge {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 8px;
    background: rgba(108,92,231,0.1);
    color: var(--brand);
    flex-shrink: 0;
}

.trip-vehicle-badge svg { width: 1.1rem; height: 1.1rem; }

.trip-info { flex: 1; min-width: 0; }

.trip-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.trip-main strong { font-size: 0.88rem; font-weight: 800; color: var(--ink); }
.trip-driver { font-size: 0.8rem; color: var(--muted); }

.trip-detail { font-size: 0.78rem; color: var(--muted); margin-top: 0.1rem; }

.trip-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    flex-shrink: 0;
}

.trip-time { font-size: 0.75rem; color: var(--muted); font-weight: 700; }

.trip-status {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

.status-active  { background: rgba(108,92,231,0.1); color: var(--brand); }
.status-done    { background: rgba(46,196,166,0.1); color: #1a9e8b; }
.status-pending { background: rgba(255,184,77,0.12); color: #c8860a; }

/* ── Fleet donut (CSS apenas) ── */
.fleet-donut-wrap {
    display: flex;
    justify-content: center;
    margin: 0.5rem 0 1rem;
}

.fleet-donut {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: conic-gradient(
        #2ec4a6 0% 63%,
        #6c5ce7 63% 89%,
        #ffb84d 89% 100%
    );
    display: grid;
    place-items: center;
}

.fleet-donut::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    background: #fff;
}

.fleet-donut-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.fleet-donut-total { font-size: 1.4rem; font-weight: 950; color: var(--ink); }
.fleet-donut-label { font-size: 0.6rem; font-weight: 700; color: var(--muted); margin-top: 1px; }

.fleet-legend {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 0.85rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.83rem;
}

.legend-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.legend-dot--green { background: var(--mint); }
.legend-dot--brand { background: var(--brand); }
.legend-dot--amber { background: var(--amber); }

.legend-name { flex: 1; color: var(--muted); }
.legend-count { font-weight: 800; color: var(--ink); }
.legend-pct { color: var(--muted); min-width: 2.5rem; text-align: right; }

.fleet-progress-bars { display: flex; flex-direction: column; gap: 0.4rem; }
.fpb-item {}
.fpb-bar { height: 4px; border-radius: 999px; background: #edf0f5; overflow: hidden; }
.fpb-fill { height: 100%; border-radius: 999px; transition: width 0.6s ease; }
.fpb-fill--green { background: var(--mint); }
.fpb-fill--brand { background: var(--brand); }
.fpb-fill--amber { background: var(--amber); }

/* ── Manutenção list ── */
.maint-list { display: flex; flex-direction: column; gap: 0.55rem; }

.maint-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    background: #f8f9fc;
    border: 1px solid #edf0f5;
}

.maint-urgency {
    width: 3px;
    height: 2rem;
    border-radius: 999px;
    flex-shrink: 0;
}

.urgency--red    { background: var(--danger); }
.urgency--amber  { background: var(--amber); }
.urgency--green  { background: var(--mint); }

.maint-info { flex: 1; min-width: 0; }
.maint-info strong { display: block; font-size: 0.85rem; font-weight: 800; color: var(--ink); }
.maint-info span   { font-size: 0.77rem; color: var(--muted); }

.maint-due { display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; }
.maint-due span { font-size: 0.75rem; font-weight: 700; }
.due--red   { color: var(--danger); }
.due--amber { color: #c8860a; }
.due--green { color: #1a9e8b; }
.maint-km   { color: var(--muted) !important; font-weight: 600 !important; }

/* ── Cost card ── */
.cost-total {
    display: flex;
    align-items: flex-end;
    gap: 0.2rem;
    margin: 0.25rem 0 0.35rem;
    line-height: 1;
}

.cost-currency { font-size: 1rem; font-weight: 700; color: var(--muted); padding-bottom: 0.2rem; }
.cost-value    { font-size: 2.2rem; font-weight: 950; color: var(--ink); }
.cost-cents    { font-size: 1rem; font-weight: 700; color: var(--muted); padding-bottom: 0.2rem; }

.cost-vs { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--muted); margin-bottom: 1.1rem; }
.cost-delta { font-weight: 800; }
.cost-delta--up   { color: var(--danger); }
.cost-delta--down { color: var(--mint); }

.cost-breakdown { display: flex; flex-direction: column; gap: 0.55rem; }

.cost-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
    color: var(--muted);
}

.cost-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; flex-shrink: 0; }
.cost-dot--brand { background: var(--brand); }
.cost-dot--amber { background: var(--amber); }
.cost-dot--red   { background: var(--danger); }
.cost-dot--muted { background: #bcc0cc; }

.cost-item span:nth-child(2) { flex: 1; }
.cost-item-val { font-weight: 800; color: var(--ink); }

/* ── Alert list ── */
.alert-list { display: flex; flex-direction: column; gap: 0.55rem; }

.alert-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    border-left: 3px solid transparent;
    background: #f8f9fc;
}

.alert-item--red    { border-left-color: var(--danger); background: rgba(244,91,105,0.04); }
.alert-item--amber  { border-left-color: var(--amber);  background: rgba(255,184,77,0.04); }
.alert-item--blue   { border-left-color: var(--brand);  background: rgba(108,92,231,0.04); }

.alert-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    margin-top: 0.35rem;
    flex-shrink: 0;
}

.alert-item--red   .alert-dot { background: var(--danger); }
.alert-item--amber .alert-dot { background: var(--amber); }
.alert-item--blue  .alert-dot { background: var(--brand); }

.alert-body { flex: 1; min-width: 0; }
.alert-body strong { display: block; font-size: 0.83rem; font-weight: 800; color: var(--ink); }
.alert-body span   { display: block; font-size: 0.76rem; color: var(--muted); margin-top: 0.1rem; line-height: 1.4; }

.alert-tag {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--muted);
    background: #edf0f5;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ============================================================
   RESPONSIVE — App shell
   ============================================================ */

@media (min-width: 640px) {
    .dash-kpi-row {
        grid-template-columns: repeat(4, 1fr);
    }
    .topbar-user-info { display: flex; }
}

@media (min-width: 900px) {
    .dash-row-main {
        grid-template-columns: 1fr 320px;
    }
    .dash-row-bottom {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* Mobile: sidebar como drawer overlay */
@media (max-width: 860px) {
    .hamburger-btn { display: flex; }

    .app-shell {
        grid-template-columns: 1fr !important;
    }

    .sidebar {
        position: fixed;
        left: calc(-1 * var(--sidebar-w));
        top: 0;
        height: 100dvh;
        transition: left 0.3s cubic-bezier(0.4,0,0.2,1);
        z-index: 50;
        width: var(--sidebar-w) !important;
        min-width: var(--sidebar-w) !important;
    }

    .sidebar--collapsed {
        width: var(--sidebar-w) !important;
        min-width: var(--sidebar-w) !important;
    }

    /* Quando o checkbox mobile estiver marcado, abre o sidebar */
    .mobile-sidebar-input:checked ~ .app-shell .sidebar {
        left: 0;
    }

    .mobile-sidebar-input:checked ~ .mobile-sidebar-overlay {
        display: block;
    }

    .app-content { padding: 1rem; }
}

@media (min-width: 1280px) {
    .app-content { padding: 1.75rem 2rem; }
}


/* ============================================================
   PAGE SHELL — Padrão de página interna
   ============================================================ */

.page-shell {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 1280px;
    margin: 0 auto;
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-title {
    margin: 0;
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    font-weight: 900;
    color: var(--ink);
    line-height: 1.1;
}

.page-subtitle {
    margin: 0.25rem 0 0;
    color: var(--muted);
    font-size: 0.85rem;
}

/* ── Botões padrão ── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.1rem;
    border-radius: 8px;
    border: none;
    background: var(--brand);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s;
    box-shadow: 0 4px 16px rgba(108,92,231,0.28);
}

.btn-primary:hover { opacity: 0.88; }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primary svg { width: 1rem; height: 1rem; }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.65rem 1.1rem;
    border-radius: 8px;
    border: 1px solid #d8dce8;
    background: #fff;
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.btn-ghost:hover { background: #f4f5f9; color: var(--ink); }

/* ── Filter bar ── */
.filter-bar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.search-input-wrap {
    position: relative;
    max-width: 28rem;
}

.search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: var(--muted);
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: 0.65rem 2.5rem 0.65rem 2.4rem;
    border-radius: 8px;
    border: 1px solid #d8dce8;
    background: #fff;
    color: var(--ink);
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.search-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(108,92,231,0.1);
}

.search-input::placeholder { color: #b0b5c4; }

.search-clear {
    position: absolute;
    right: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.15rem;
    cursor: pointer;
    color: var(--muted);
    display: grid;
    place-items: center;
    border-radius: 4px;
    transition: background 0.12s, color 0.12s;
}

.search-clear:hover { background: #edf0f5; color: var(--ink); }
.search-clear svg { width: 0.85rem; height: 0.85rem; }

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.75rem;
    border-radius: 999px;
    border: 1px solid #d8dce8;
    background: #fff;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.chip:hover { background: #f4f5f9; color: var(--ink); border-color: #c0c5d8; }

.chip--active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.chip-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.chip-dot--green { background: var(--mint); }
.chip-dot--brand { background: var(--brand); }
.chip-dot--amber { background: var(--amber); }
.chip-dot--muted { background: #bcc0cc; }

.chip--active .chip-dot { background: rgba(255,255,255,0.7); }

/* ── Empty state ── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: 4rem 1rem;
    background: #fff;
    border: 1px solid #e8eaf0;
    border-radius: 12px;
}

.empty-icon {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: #f4f5f9;
    color: #b0b5c4;
    margin-bottom: 0.25rem;
}

.empty-icon svg { width: 1.8rem; height: 1.8rem; }

.empty-state h3 { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--ink); }
.empty-state p  { margin: 0; font-size: 0.88rem; color: var(--muted); max-width: 22rem; line-height: 1.5; }

/* ── Vehicle list ── */
.veiculo-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.veiculo-card {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1rem;
    background: #fff;
    border: 1px solid #e8eaf0;
    border-radius: 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.veiculo-card:hover {
    border-color: #c8cde0;
    box-shadow: 0 2px 12px rgba(18,19,26,0.06);
}

.veiculo-card--confirming {
    border-color: rgba(244,91,105,0.4);
    background: rgba(244,91,105,0.02);
}

/* ── Plate badge ── */
.veiculo-plate-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-width: 5.5rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    background: #f4f5f9;
    border: 1px solid #e0e3ee;
    text-align: center;
}

.plate-text {
    font-size: 0.95rem;
    font-weight: 900;
    color: var(--ink);
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.plate-frota {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Vehicle info ── */
.veiculo-info { min-width: 0; }

.veiculo-modelo {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.veiculo-modelo strong { font-size: 0.92rem; font-weight: 800; color: var(--ink); }
.veiculo-modelo span   { font-size: 0.78rem; color: var(--muted); }

.veiculo-tags { margin-top: 0.35rem; }

/* ── Tags ── */
.tag {
    display: inline-block;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.tag--green  { background: rgba(46,196,166,0.1);  color: #1a9e8b; }
.tag--amber  { background: rgba(255,184,77,0.12);  color: #c8860a; }
.tag--blue   { background: rgba(116,192,252,0.14); color: #1971c2; }
.tag--mint   { background: rgba(46,196,166,0.1);   color: #1a9e8b; }
.tag--brand  { background: rgba(108,92,231,0.1);   color: var(--brand); }
.tag--purple { background: rgba(156,107,245,0.1);  color: #7950f2; }
.tag--muted  { background: #f0f1f5; color: var(--muted); }

/* ── KM ── */
.veiculo-km {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    min-width: 8rem;
}

.km-value { font-size: 0.88rem; font-weight: 800; color: var(--ink); }

.km-next { font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.km-next--ok     { color: var(--muted); }
.km-next--warn   { color: #c8860a; }
.km-next--urgent { color: var(--danger); }

/* ── Status badge ── */
.veiculo-status-col { min-width: 6rem; display: flex; justify-content: flex-end; }

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
}

.status-badge::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-badge--green { background: rgba(46,196,166,0.12);  color: #1a9e8b; }
.status-badge--green::before { background: var(--mint); }
.status-badge--brand { background: rgba(108,92,231,0.1);   color: var(--brand); }
.status-badge--brand::before { background: var(--brand); }
.status-badge--amber { background: rgba(255,184,77,0.12);  color: #c8860a; }
.status-badge--amber::before { background: var(--amber); }
.status-badge--muted { background: #f0f1f5;                color: var(--muted); }
.status-badge--muted::before { background: #bcc0cc; }

/* ── Action buttons ── */
.veiculo-actions {
    display: flex;
    gap: 0.3rem;
}

.action-btn {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 7px;
    border: 1px solid #e0e3ee;
    background: #fff;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.12s;
}

.action-btn svg { width: 0.95rem; height: 0.95rem; }
.action-btn:hover { background: #f4f5f9; border-color: #c8cde0; color: var(--ink); }

.action-btn--danger:hover { background: rgba(244,91,105,0.08); border-color: rgba(244,91,105,0.3); color: var(--danger); }

/* ── Delete confirm inline ── */
.delete-confirm {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.delete-confirm-icon {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 8px;
    background: rgba(244,91,105,0.1);
    color: var(--danger);
    flex-shrink: 0;
}

.delete-confirm-icon svg { width: 1rem; height: 1rem; }

.delete-confirm-text { flex: 1; min-width: 0; }
.delete-confirm-text strong { display: block; font-size: 0.9rem; font-weight: 800; color: var(--ink); }
.delete-confirm-text span   { font-size: 0.78rem; color: var(--muted); }

.delete-confirm-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-ghost-sm {
    padding: 0.4rem 0.85rem;
    border-radius: 7px;
    border: 1px solid #d8dce8;
    background: #fff;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s;
}

.btn-ghost-sm:hover { background: #f4f5f9; color: var(--ink); }

.btn-danger-sm {
    padding: 0.4rem 0.85rem;
    border-radius: 7px;
    border: none;
    background: var(--danger);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.12s;
}

.btn-danger-sm:hover { opacity: 0.88; }

/* ============================================================
   DRAWER — Painel lateral de cadastro/edição
   ============================================================ */

.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8,10,18,0.45);
    backdrop-filter: blur(2px);
    z-index: 55;
}

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(480px, 100vw);
    height: 100dvh;
    background: #fff;
    border-left: 1px solid #e0e3ee;
    box-shadow: -8px 0 32px rgba(18,19,26,0.12);
    display: flex;
    flex-direction: column;
    z-index: 60;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}

.drawer--open { transform: translateX(0); }

.drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid #e8eaf0;
    flex-shrink: 0;
}

.drawer-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--ink);
}

.drawer-sub {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: var(--muted);
}

.drawer-close {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 7px;
    border: 1px solid #e0e3ee;
    background: #fff;
    color: var(--muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
}

.drawer-close:hover { background: #f4f5f9; color: var(--ink); }
.drawer-close svg { width: 0.9rem; height: 0.9rem; }

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.drawer-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid #e8eaf0;
    flex-shrink: 0;
    background: #fafbfc;
}

/* ── Form sections ── */
.form-section {
    border: 1px solid #e8eaf0;
    border-radius: 10px;
    padding: 1rem;
    margin: 0;
}

.form-section legend {
    padding: 0 0.4rem;
    font-size: 0.75rem;
    font-weight: 900;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; }

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.form-field label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink);
}

.required { color: var(--danger); }

.form-field input,
.form-field select {
    padding: 0.6rem 0.8rem;
    border-radius: 7px;
    border: 1px solid #d8dce8;
    background: #fff;
    color: var(--ink);
    font-size: 0.88rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
}

.form-field input:focus,
.form-field select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(108,92,231,0.1);
}

.form-field input.input--error,
.form-field select.input--error { border-color: var(--danger); }

.field-error { font-size: 0.75rem; color: var(--danger); font-weight: 600; }

.form-alert-error {
    padding: 0.75rem 0.9rem;
    border-radius: 8px;
    background: rgba(244,91,105,0.08);
    border: 1px solid rgba(244,91,105,0.25);
    color: var(--danger);
    font-size: 0.85rem;
    font-weight: 600;
}

/* ── Status radio group ── */
.status-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.status-radio {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: 1px solid #d8dce8;
    background: #fff;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.12s;
}

.status-radio input[type="radio"] { display: none; }

.status-radio:hover { border-color: var(--brand); color: var(--ink); }

.status-radio--active {
    border-color: var(--brand);
    background: rgba(108,92,231,0.08);
    color: var(--brand);
}

.radio-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.radio-dot--green { background: var(--mint); }
.radio-dot--brand { background: var(--brand); }
.radio-dot--amber { background: var(--amber); }
.radio-dot--muted { background: #bcc0cc; }

/* ── Responsive: mobile cards stack ── */
@media (max-width: 720px) {
    .veiculo-card {
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
    }

    .veiculo-km        { display: none; }
    .veiculo-status-col { grid-column: 3; grid-row: 1; justify-content: flex-end; }
    .veiculo-actions   { grid-column: 1 / -1; grid-row: 3; justify-content: flex-end; border-top: 1px solid #f0f1f5; padding-top: 0.6rem; margin-top: 0.2rem; }

    .form-row-2,
    .form-row-3 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .veiculo-plate-badge { min-width: 4.5rem; padding: 0.4rem 0.55rem; }
    .plate-text { font-size: 0.82rem; }
}


/* ============================================================
   MOTORISTAS — estilos específicos do card e CNH
   ============================================================ */

/* ── Lista ── */
.motorista-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* ── Card ── */
.motorista-card {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1rem;
    background: #fff;
    border: 1px solid #e8eaf0;
    border-radius: 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.motorista-card:hover {
    border-color: #c8cde0;
    box-shadow: 0 2px 12px rgba(18,19,26,0.06);
}

.motorista-card--confirming {
    border-color: rgba(244,91,105,0.4);
    background: rgba(244,91,105,0.02);
}

/* ── Avatar com inicial ── */
.motorista-avatar {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--avatar-color, #6c5ce7);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 900;
    flex-shrink: 0;
    letter-spacing: 0.03em;
    user-select: none;
}

/* ── Info pessoal ── */
.motorista-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.motorista-nome {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.motorista-detalhe {
    font-size: 0.78rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.info-sep {
    margin: 0 0.3rem;
    opacity: 0.5;
}

/* ── CNH ── */
.motorista-cnh {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 9rem;
}

.cnh-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cnh-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.5rem;
    border-radius: 5px;
    background: #11131b;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.cnh-numero {
    font-size: 0.78rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* ── Validade CNH ── */
.cnh-validade {
    font-size: 0.73rem;
    font-weight: 700;
    white-space: nowrap;
}

.cnh-val--ok      { color: var(--muted); }
.cnh-val--warn    { color: #c8860a; }
.cnh-val--urgent  { color: var(--danger); }
.cnh-val--expired {
    color: #fff;
    background: var(--danger);
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    display: inline-block;
}

/* ── Status col ── */
.motorista-status-col {
    min-width: 6.5rem;
    display: flex;
    justify-content: flex-end;
}

/* ── Chip alerta CNH ── */
.chip--alert {
    border-color: rgba(244,91,105,0.3);
    color: var(--danger);
    background: rgba(244,91,105,0.05);
}

.chip--alert:hover { background: rgba(244,91,105,0.1); border-color: rgba(244,91,105,0.5); }

.chip--active-alert {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

/* ── Alertas no formulário de CNH ── */
.cnh-form-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.7rem 0.9rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.45;
    margin-top: 0.75rem;
}

.cnh-form-alert svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.05rem; }

.cnh-form-alert--expired {
    background: rgba(244,91,105,0.1);
    border: 1px solid rgba(244,91,105,0.3);
    color: var(--danger);
}

.cnh-form-alert--warn {
    background: rgba(255,184,77,0.1);
    border: 1px solid rgba(255,184,77,0.35);
    color: #c8860a;
}

/* ── Textarea no formulário ── */
.form-textarea {
    padding: 0.6rem 0.8rem;
    border-radius: 7px;
    border: 1px solid #d8dce8;
    background: #fff;
    color: var(--ink);
    font-size: 0.88rem;
    font-family: inherit;
    outline: none;
    resize: vertical;
    min-height: 4.5rem;
    width: 100%;
    transition: border-color 0.15s, box-shadow 0.15s;
    line-height: 1.5;
}

.form-textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(108,92,231,0.1);
}

.form-textarea::placeholder { color: #b0b5c4; }

/* ── Responsive ── */
@media (max-width: 800px) {
    .motorista-card {
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        row-gap: 0.5rem;
    }

    .motorista-cnh         { display: none; }
    .motorista-status-col  { grid-column: 3; grid-row: 1; }
    .veiculo-actions       { grid-column: 1 / -1; justify-content: flex-end; border-top: 1px solid #f0f1f5; padding-top: 0.6rem; }
}


/* ============================================================
   DOCUMENTOS — estilos específicos
   ============================================================ */

/* ── Banner de alerta ── */
.doc-alert-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: rgba(244,91,105,0.07);
    border: 1px solid rgba(244,91,105,0.25);
    border-radius: 10px;
    font-size: 0.88rem;
    color: var(--ink);
    flex-wrap: wrap;
}

.doc-alert-banner svg {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--danger);
    flex-shrink: 0;
}

.doc-alert-banner span { flex: 1; line-height: 1.5; }

.doc-alert-filter {
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(244,91,105,0.35);
    background: #fff;
    color: var(--danger);
    font-size: 0.78rem;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s;
}

.doc-alert-filter:hover { background: rgba(244,91,105,0.08); }

/* ── Chip com contador ── */
.chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 900;
    margin-left: 0.1rem;
}

.chip--active .chip-count { background: rgba(255,255,255,0.3); }

.chip-dot--danger { background: var(--danger); }

/* ── Subtítulo com alertas ── */
.subtitle-alert { color: var(--danger); font-weight: 700; }
.subtitle-warn  { color: #c8860a;      font-weight: 700; }

/* ── Lista de documentos ── */
.doc-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* ── Card ── */
.doc-card {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1rem;
    background: #fff;
    border: 1px solid #e8eaf0;
    border-left: 3px solid transparent;
    border-radius: 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.doc-card:hover {
    border-color: #c8cde0;
    box-shadow: 0 2px 12px rgba(18,19,26,0.06);
}

.doc-card--vencendo {
    border-left-color: var(--amber);
    background: rgba(255,184,77,0.02);
}

.doc-card--vencido {
    border-left-color: var(--danger);
    background: rgba(244,91,105,0.02);
}

.doc-card--confirming {
    border-color: rgba(244,91,105,0.4);
    background: rgba(244,91,105,0.02);
}

/* ── Ícone do tipo ── */
.doc-type-icon {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 8px;
    flex-shrink: 0;
}

.doc-type-icon svg { width: 1.1rem; height: 1.1rem; }

.doc-type-icon--crlv             { background: rgba(108,92,231,0.1); color: var(--brand); }
.doc-type-icon--seguro           { background: rgba(46,196,166,0.1); color: var(--mint); }
.doc-type-icon--ipva             { background: rgba(255,184,77,0.12); color: #c8860a; }
.doc-type-icon--vistoria         { background: rgba(116,192,252,0.14); color: #1971c2; }
.doc-type-icon--laudo-t-cnico    { background: rgba(156,107,245,0.1); color: #7950f2; }
.doc-type-icon--contrato-de-leasing { background: rgba(18,19,26,0.06); color: var(--muted); }
.doc-type-icon--ap-lice-de-seguro { background: rgba(46,196,166,0.1); color: var(--mint); }
.doc-type-icon--licen-a-de-opera--o { background: rgba(108,92,231,0.1); color: var(--brand); }
.doc-type-icon--outros           { background: #f4f5f9; color: var(--muted); }

/* ── Info do documento ── */
.doc-info { min-width: 0; }

.doc-info-top {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.doc-tipo {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
}

.doc-tipo-filter-btn {
    display: grid;
    place-items: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: #c0c5d4;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.12s, color 0.12s;
}

.doc-card:hover .doc-tipo-filter-btn { opacity: 1; }
.doc-tipo-filter-btn:hover { background: #edf0f5; color: var(--brand); }
.doc-tipo-filter-btn svg { width: 0.75rem; height: 0.75rem; }

.doc-veiculo {
    font-size: 0.78rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.12rem;
    display: block;
}

.doc-plate {
    font-weight: 800;
    color: var(--ink);
    font-size: 0.8rem;
}

/* ── Número e valor ── */
.doc-numero-col {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 7rem;
}

.doc-numero {
    font-size: 0.78rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.doc-valor {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--ink);
}

/* ── Vencimento ── */
.doc-vencimento-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.18rem;
    min-width: 9rem;
}

.doc-venc-label {
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.venc-ok      { color: var(--muted); }
.venc-warn    { color: #c8860a; }
.venc-urgent  { color: var(--danger); font-weight: 800; }
.venc-expired {
    color: #fff;
    background: var(--danger);
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    display: inline-block;
}

.doc-venc-data {
    font-size: 0.72rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* ── Situação ── */
.doc-situacao-col {
    min-width: 5.5rem;
    display: flex;
    justify-content: flex-end;
}

.status-badge--red {
    background: rgba(244,91,105,0.1);
    color: var(--danger);
}

.status-badge--red::before { background: var(--danger); }

/* ── Responsive ── */
@media (max-width: 900px) {
    .doc-card {
        grid-template-columns: auto 1fr auto auto;
        grid-template-rows: auto auto;
        row-gap: 0.5rem;
    }

    .doc-numero-col    { display: none; }
    .doc-vencimento-col { grid-column: 3; grid-row: 1; }
    .doc-situacao-col  { display: none; }
    .veiculo-actions   { grid-column: 1 / -1; justify-content: flex-end; border-top: 1px solid #f0f1f5; padding-top: 0.6rem; }
}

@media (max-width: 560px) {
    .doc-card {
        grid-template-columns: auto 1fr auto;
    }
    .doc-vencimento-col { min-width: auto; }
    .doc-venc-label { font-size: 0.72rem; }
}


/* ============================================================
   UTILIZAÇÕES — estilos específicos
   ============================================================ */

/* ── Mini KPIs ── */
.util-kpi-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border: 1px solid #e8eaf0;
    border-radius: 12px;
    overflow: hidden;
}

.util-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.9rem 1.25rem;
    flex: 1;
}

.util-kpi--sep { border-left: 1px solid #e8eaf0; }

.util-kpi--alert { background: rgba(244,91,105,0.03); }

.util-kpi-value {
    font-size: clamp(1.2rem, 3vw, 1.6rem);
    font-weight: 950;
    color: var(--ink);
    line-height: 1;
}

.util-kpi-value--brand  { color: var(--brand); }
.util-kpi-value--danger { color: var(--danger); }

.util-kpi-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* ── Lista ── */
.util-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* ── Card ── */
.util-card {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1rem;
    background: #fff;
    border: 1px solid #e8eaf0;
    border-left: 3px solid transparent;
    border-radius: 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.util-card:hover {
    border-color: #c8cde0;
    box-shadow: 0 2px 12px rgba(18,19,26,0.06);
}

.util-card--brand { border-left-color: var(--brand); }
.util-card--red   { border-left-color: var(--danger); background: rgba(244,91,105,0.02); }
.util-card--green { border-left-color: transparent; }

.util-card--confirming {
    border-color: rgba(244,91,105,0.4);
    background: rgba(244,91,105,0.02);
}

/* ── Coluna placa ── */
.util-plate-col { flex-shrink: 0; }

/* ── Info motorista ── */
.util-info { min-width: 0; }

.util-motorista {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.util-avatar {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--avatar-color, #6c5ce7);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.util-motorista strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.util-motorista span {
    display: block;
    font-size: 0.75rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.08rem;
}

/* ── Timeline saída → retorno ── */
.util-timeline {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 10rem;
}

.util-time-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.util-time-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.util-time-dot--out     { background: var(--brand); }
.util-time-dot--in      { background: var(--mint); }
.util-time-dot--pending {
    background: transparent;
    border: 2px solid #c8cde0;
}

.util-time-line {
    flex: 1;
    height: 1px;
    background: #e0e3ee;
    min-width: 1.5rem;
}

.util-time-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.util-time-val {
    display: block;
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.util-time-val--late { color: var(--danger); }

/* ── KM ── */
.util-km-col {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 6rem;
}

.util-km-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.util-km-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    min-width: 3rem;
}

.util-km-val {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.util-km-row--total .util-km-val { color: var(--brand); }
.util-km-pending { color: var(--muted); font-weight: 600; }

/* ── Duração ── */
.util-duracao-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    min-width: 4rem;
}

.util-duracao {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.util-data {
    font-size: 0.72rem;
    color: var(--muted);
}

/* ── Status + ações agrupados ── */
.util-status-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

/* ── Botão encerrar ── */
.action-btn--encerrar {
    border-color: rgba(46,196,166,0.35);
    color: var(--mint);
}

.action-btn--encerrar:hover {
    background: rgba(46,196,166,0.1);
    border-color: rgba(46,196,166,0.5);
    color: #1a9e8b;
}

/* ── Drawer: encerramento ── */
.encerramento-resumo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    padding: 0.9rem 1rem;
    background: #f8f9fc;
    border: 1px solid #e8eaf0;
    border-radius: 10px;
}

.enc-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.enc-item span  { font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.enc-item strong { font-size: 0.88rem; font-weight: 800; color: var(--ink); }

.enc-km-calc {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    background: rgba(108,92,231,0.06);
    border: 1px solid rgba(108,92,231,0.18);
    border-radius: 8px;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--ink);
}

.enc-km-calc svg { width: 1rem; height: 1rem; color: var(--brand); flex-shrink: 0; }
.enc-km-calc strong { color: var(--brand); font-weight: 900; }

/* ── Checkbox personalizado ── */
.checklist-label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink);
    user-select: none;
}

.checklist-input { display: none; }

.checklist-box {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 4px;
    border: 2px solid #d0d5e4;
    background: #fff;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}

.checklist-input:checked + .checklist-box {
    background: var(--brand);
    border-color: var(--brand);
}

.checklist-input:checked + .checklist-box::after {
    content: "";
    width: 0.38rem;
    height: 0.2rem;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .util-card {
        grid-template-columns: auto 1fr auto auto auto;
    }
    .util-km-col { display: none; }
}

@media (max-width: 860px) {
    .util-kpi-row { flex-wrap: wrap; }
    .util-kpi { min-width: 40%; border-left: none; border-top: 1px solid #e8eaf0; }
    .util-kpi:first-child { border-top: none; }
    .util-kpi:nth-child(2) { border-top: none; border-left: 1px solid #e8eaf0; }

    .util-card {
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        row-gap: 0.5rem;
    }

    .util-timeline    { display: none; }
    .util-duracao-col { grid-column: 3; grid-row: 1; }
    .util-status-actions { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; border-top: 1px solid #f0f1f5; padding-top: 0.6rem; }
    .encerramento-resumo { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .util-kpi { min-width: 50%; }
    .util-kpi-value { font-size: 1.1rem; }
}


/* ============================================================
   ABASTECIMENTO — estilos específicos
   ============================================================ */

/* ── Lista ── */
.abast-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* ── Card ── */
.abast-card {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1rem;
    background: #fff;
    border: 1px solid #e8eaf0;
    border-radius: 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.abast-card:hover {
    border-color: #c8cde0;
    box-shadow: 0 2px 12px rgba(18,19,26,0.06);
}

.abast-card--confirming {
    border-color: rgba(244,91,105,0.4);
    background: rgba(244,91,105,0.02);
}

/* ── Ícone + data ── */
.abast-tipo-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

.abast-tipo-icon {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 8px;
    flex-shrink: 0;
}

.abast-tipo-icon svg { width: 1.1rem; height: 1.1rem; }

.abast-tipo-icon--amber  { background: rgba(255,184,77,0.12);  color: #c8860a; }
.abast-tipo-icon--green  { background: rgba(46,196,166,0.12);  color: #1a9e8b; }
.abast-tipo-icon--blue   { background: rgba(116,192,252,0.14); color: #1971c2; }
.abast-tipo-icon--purple { background: rgba(156,107,245,0.1);  color: #7950f2; }
.abast-tipo-icon--mint   { background: rgba(46,196,166,0.1);   color: var(--mint); }
.abast-tipo-icon--muted  { background: #f4f5f9; color: var(--muted); }

.abast-data {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ── Info veículo ── */
.abast-info {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-width: 0;
}

.abast-veiculo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.abast-modelo {
    font-size: 0.78rem;
    color: var(--muted);
}

.abast-motorista,
.abast-posto {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Litros ── */
.abast-litros-col {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    align-items: flex-start;
    min-width: 6rem;
}

.abast-litros {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--ink);
}

.abast-preco-unit {
    font-size: 0.72rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* ── Chip dot extras ── */
.chip-dot--amber  { background: var(--amber); }
.chip-dot--blue   { background: #74c0fc; }
.chip-dot--purple { background: #9c6bf5; }
.chip-dot--mint   { background: var(--mint); }

/* ── Valor total ── */
.abast-valor-col {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    align-items: flex-end;
    min-width: 6rem;
}

.abast-valor-total {
    font-size: 1rem;
    font-weight: 900;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.abast-tanque-cheio {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--mint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── KM e consumo ── */
.abast-km-col {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    align-items: flex-end;
    min-width: 5.5rem;
}

.abast-km {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.abast-consumo {
    font-size: 0.72rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.consumo--bom  { color: #1a9e8b; }
.consumo--ok   { color: #c8860a; }
.consumo--ruim { color: var(--danger); }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .abast-card { grid-template-columns: auto 1fr auto auto auto; }
    .abast-km-col { display: none; }
}

@media (max-width: 860px) {
    .abast-card {
        grid-template-columns: auto 1fr auto auto;
        grid-template-rows: auto auto;
        row-gap: 0.5rem;
    }
    .abast-litros-col { display: none; }
    .abast-valor-col  { grid-column: 3; grid-row: 1; }
    .veiculo-actions  { grid-column: 1 / -1; justify-content: flex-end; border-top: 1px solid #f0f1f5; padding-top: 0.6rem; }
}

@media (max-width: 520px) {
    .abast-card { grid-template-columns: auto 1fr auto; }
    .abast-valor-col { min-width: auto; }
    .abast-valor-total { font-size: 0.88rem; }
}


/* ============================================================
   OCORRÊNCIAS — estilos específicos
   ============================================================ */

.ocorr-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* ── Card ── */
.ocorr-card {
    display: grid;
    grid-template-columns: 4px auto auto 1fr auto auto auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1rem 0.9rem 0;
    background: #fff;
    border: 1px solid #e8eaf0;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.ocorr-card:hover {
    border-color: #c8cde0;
    box-shadow: 0 2px 12px rgba(18,19,26,0.06);
}

.ocorr-card--confirming {
    border-color: rgba(244,91,105,0.4);
    background: rgba(244,91,105,0.02);
}

/* ── Barra lateral de gravidade ── */
.ocorr-gravidade-bar {
    width: 4px;
    align-self: stretch;
    border-radius: 0;
    flex-shrink: 0;
}

.ocorr-gravidade-bar--baixa   { background: var(--mint); }
.ocorr-gravidade-bar--media   { background: var(--amber); }
.ocorr-gravidade-bar--alta    { background: var(--danger); }
.ocorr-gravidade-bar--critica { background: #7d0000; }

/* ── Ícone do tipo ── */
.ocorr-tipo-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

.ocorr-tipo-icon {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 8px;
    flex-shrink: 0;
}

.ocorr-tipo-icon svg { width: 1.1rem; height: 1.1rem; }

.ocorr-tipo-icon--red    { background: rgba(244,91,105,0.1);  color: var(--danger); }
.ocorr-tipo-icon--amber  { background: rgba(255,184,77,0.12); color: #c8860a; }
.ocorr-tipo-icon--blue   { background: rgba(116,192,252,0.14);color: #1971c2; }
.ocorr-tipo-icon--purple { background: rgba(156,107,245,0.1); color: #7950f2; }
.ocorr-tipo-icon--muted  { background: #f4f5f9; color: var(--muted); }

.ocorr-data {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
}

/* ── Info ── */
.ocorr-info { min-width: 0; }

.ocorr-header-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    flex-wrap: wrap;
}

.ocorr-descricao {
    margin: 0;
    font-size: 0.83rem;
    color: var(--ink);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ocorr-meta {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 0.3rem;
    flex-wrap: wrap;
}

/* ── Badge de gravidade ── */
.ocorr-gravidade-col { flex-shrink: 0; }

.ocorr-grav-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.ocorr-grav-badge--baixa   { background: rgba(46,196,166,0.1);  color: #1a9e8b; }
.ocorr-grav-badge--media   { background: rgba(255,184,77,0.12); color: #c8860a; }
.ocorr-grav-badge--alta    { background: rgba(244,91,105,0.1);  color: var(--danger); }
.ocorr-grav-badge--critica { background: #7d0000; color: #fff; }

/* ── Custo ── */
.ocorr-custo-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    min-width: 5.5rem;
}

.ocorr-custo {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.ocorr-custo-label {
    font-size: 0.65rem;
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase;
}

.ocorr-custo-vazio { color: var(--muted); font-size: 0.9rem; }

/* ── Status ── */
.ocorr-status-col { min-width: 6rem; display: flex; justify-content: flex-end; }

/* ── Gravidade radio group ── */
.gravidade-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.gravidade-radio {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 2px solid transparent;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.12s;
}

.gravidade-radio input[type="radio"] { display: none; }

.gravidade-radio--baixa   { background: rgba(46,196,166,0.08);  color: #1a9e8b;  border-color: rgba(46,196,166,0.2); }
.gravidade-radio--media   { background: rgba(255,184,77,0.1);   color: #c8860a;  border-color: rgba(255,184,77,0.25); }
.gravidade-radio--alta    { background: rgba(244,91,105,0.08);  color: var(--danger); border-color: rgba(244,91,105,0.2); }
.gravidade-radio--critica { background: rgba(125,0,0,0.08);     color: #7d0000;  border-color: rgba(125,0,0,0.2); }

.gravidade-radio--active.gravidade-radio--baixa   { background: var(--mint);   color: #fff; border-color: var(--mint); }
.gravidade-radio--active.gravidade-radio--media   { background: var(--amber);  color: #12131a; border-color: var(--amber); }
.gravidade-radio--active.gravidade-radio--alta    { background: var(--danger); color: #fff; border-color: var(--danger); }
.gravidade-radio--active.gravidade-radio--critica { background: #7d0000;       color: #fff; border-color: #7d0000; }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .ocorr-card { grid-template-columns: 4px auto auto 1fr auto auto auto; }
    .ocorr-custo-col { display: none; }
}

@media (max-width: 860px) {
    .ocorr-card {
        grid-template-columns: 4px auto 1fr auto auto;
        grid-template-rows: auto auto;
        row-gap: 0.5rem;
    }
    .ocorr-gravidade-col { display: none; }
    .ocorr-status-col    { grid-column: 4; grid-row: 1; }
    .veiculo-actions     { grid-column: 5; grid-row: 1; }
    .ocorr-info          { grid-column: 3 / 6; grid-row: 2; }
}

@media (max-width: 560px) {
    .ocorr-card { grid-template-columns: 4px auto 1fr auto; }
    .veiculo-actions { display: none; }
    .ocorr-card:active { box-shadow: 0 0 0 2px var(--brand); }
}


/* ============================================================
   MANUTENÇÃO PROGRAMADAS — estilos específicos
   ============================================================ */

.manut-list { display: flex; flex-direction: column; gap: 0.6rem; }

/* ── Card ── */
.manut-card {
    display: grid;
    grid-template-columns: 4px auto auto 1fr auto auto auto auto auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1rem 0.9rem 0;
    background: #fff;
    border: 1px solid #e8eaf0;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.manut-card:hover {
    border-color: #c8cde0;
    box-shadow: 0 2px 12px rgba(18,19,26,0.06);
}

.manut-card--confirming {
    border-color: rgba(244,91,105,0.4);
    background: rgba(244,91,105,0.02);
}

/* ── Barra de urgência ── */
.manut-urgencia-bar {
    width: 4px;
    align-self: stretch;
    flex-shrink: 0;
}

.manut-urgencia-bar--critica { background: #7d0000; }
.manut-urgencia-bar--urgente { background: var(--danger); }
.manut-urgencia-bar--aviso   { background: var(--amber); }
.manut-urgencia-bar--normal  { background: var(--brand); }
.manut-urgencia-bar--ok      { background: var(--mint); }

/* ── Ícone ── */
.manut-icone-col { flex-shrink: 0; }

.manut-icone {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 8px;
}

.manut-icone svg { width: 1.1rem; height: 1.1rem; }

.manut-icone--oleo   { background: rgba(255,184,77,0.12);  color: #c8860a; }
.manut-icone--revisao{ background: rgba(108,92,231,0.1);   color: var(--brand); }
.manut-icone--alinha { background: rgba(116,192,252,0.14); color: #1971c2; }
.manut-icone--pneu   { background: rgba(18,19,26,0.06);    color: var(--ink); }
.manut-icone--freio  { background: rgba(244,91,105,0.1);   color: var(--danger); }
.manut-icone--correia{ background: rgba(46,196,166,0.1);   color: #1a9e8b; }
.manut-icone--vela   { background: rgba(255,184,77,0.12);  color: #c8860a; }
.manut-icone--doc    { background: rgba(156,107,245,0.1);  color: #7950f2; }
.manut-icone--outros { background: #f4f5f9; color: var(--muted); }

/* ── Info ── */
.manut-info { min-width: 0; }

.manut-veiculo-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.15rem;
}

.manut-modelo { font-size: 0.75rem; color: var(--muted); }

.manut-tipo {
    display: block;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.manut-oficina {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 0.2rem;
}

/* ── Gatilho (KM ou data) ── */
.manut-gatilho-col {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 7rem;
}

.manut-gatilho-top {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.manut-gatilho-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.manut-gatilho-diff {
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.diff--ok     { color: var(--muted); }
.diff--warn   { color: #c8860a; }
.diff--urgent { color: var(--danger); }
.diff--late   {
    color: #fff;
    background: var(--danger);
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    display: inline-block;
}

/* ── Custo ── */
.manut-custo-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    min-width: 5.5rem;
}

.manut-custo       { font-size: 0.88rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.manut-custo-label { font-size: 0.65rem; color: var(--muted); font-weight: 700; text-transform: uppercase; }

/* ── Status ── */
.manut-status-col { min-width: 5.5rem; display: flex; justify-content: flex-end; }

/* ── Dica do formulário ── */
.form-hint {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.5;
}

/* ── Responsive ── */
@media (max-width: 1200px) {
    .manut-card { grid-template-columns: 4px auto auto 1fr auto auto auto auto; }
    .manut-custo-col { display: none; }
}

@media (max-width: 1000px) {
    .manut-card { grid-template-columns: 4px auto auto 1fr auto auto auto; }
    /* esconde segundo gatilho (data) se houver os dois */
    .manut-gatilho-col:nth-child(6) { display: none; }
}

@media (max-width: 780px) {
    .manut-card {
        grid-template-columns: 4px auto 1fr auto auto;
        grid-template-rows: auto auto;
        row-gap: 0.5rem;
    }
    .manut-gatilho-col { grid-column: 3; grid-row: 2; }
    .manut-status-col  { grid-column: 4; grid-row: 1; }
    .veiculo-actions   { grid-column: 5; grid-row: 1; }
}

@media (max-width: 520px) {
    .manut-card { grid-template-columns: 4px auto 1fr auto; }
    .veiculo-actions { flex-wrap: nowrap; }
}


/* ============================================================
   HISTÓRICO DE MANUTENÇÃO — estilos específicos
   ============================================================ */

/* ── Filtro linha com período ── */
.hist-filter-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.hist-periodo-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.hist-periodo-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
}

.hist-periodo-select {
    padding: 0.55rem 0.8rem;
    border-radius: 8px;
    border: 1px solid #d8dce8;
    background: #fff;
    color: var(--ink);
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
}

.hist-periodo-select:focus { border-color: var(--brand); }

/* ── Agrupamento por mês ── */
.hist-grupo { display: flex; flex-direction: column; gap: 0.5rem; }

.hist-grupo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.25rem;
}

.hist-grupo-mes {
    font-size: 0.82rem;
    font-weight: 900;
    color: var(--ink);
    text-transform: capitalize;
}

.hist-grupo-total {
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 700;
}

.hist-list { display: flex; flex-direction: column; gap: 0.5rem; }

/* ── Card ── */
.hist-card {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid #e8eaf0;
    border-radius: 10px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.hist-card:hover {
    border-color: #c8cde0;
    box-shadow: 0 2px 10px rgba(18,19,26,0.05);
}

.hist-card--confirming {
    border-color: rgba(244,91,105,0.4);
    background: rgba(244,91,105,0.02);
}

/* ── Info ── */
.hist-info { min-width: 0; }

.hist-veiculo-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.15rem;
}

/* ── Data e KM ── */
.hist-data-col {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 6rem;
}

.hist-data {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.hist-km {
    font-size: 0.72rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* ── Próxima manutenção ── */
.hist-proxima-col {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 6rem;
}

.hist-proxima-label {
    font-size: 0.65rem;
    font-weight: 900;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.hist-proxima-val {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--brand);
    font-variant-numeric: tabular-nums;
}

/* ── NF/OS ── */
.hist-nf-col {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 5rem;
}

.hist-nf-label {
    font-size: 0.65rem;
    font-weight: 900;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.hist-nf-val {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
}

/* ── Custo ── */
.hist-custo-col {
    min-width: 5.5rem;
    display: flex;
    justify-content: flex-end;
}

.hist-custo {
    font-size: 0.95rem;
    font-weight: 900;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .hist-card { grid-template-columns: auto auto 1fr auto auto auto; }
    .hist-nf-col { display: none; }
}

@media (max-width: 860px) {
    .hist-card { grid-template-columns: auto auto 1fr auto auto; }
    .hist-proxima-col { display: none; }
    .hist-filter-row { flex-direction: column; align-items: flex-start; }
    .search-input-wrap { max-width: 100% !important; width: 100%; }
}

@media (max-width: 600px) {
    .hist-card {
        grid-template-columns: auto 1fr auto auto;
        grid-template-rows: auto auto;
        row-gap: 0.5rem;
    }
    .hist-data-col  { grid-column: 3; grid-row: 1; }
    .hist-custo-col { grid-column: 4; grid-row: 1; }
    .hist-info      { grid-column: 2 / 5; grid-row: 2; }
    .veiculo-actions{ grid-column: 1 / -1; justify-content: flex-end; border-top: 1px solid #f0f1f5; padding-top: 0.5rem; }
}


/* ============================================================
   CUSTOS E DESPESAS — estilos específicos
   ============================================================ */

/* ── Painel de resumo ── */
.custo-resumo-panel {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border: 1px solid #e8eaf0;
    border-radius: 12px;
    align-items: center;
}

/* ── Bloco total ── */
.custo-total-block {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 14rem;
    padding-right: 1.5rem;
    border-right: 1px solid #e8eaf0;
}

.custo-total-label {
    font-size: 0.72rem;
    font-weight: 900;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.custo-total-valor {
    display: flex;
    align-items: flex-end;
    gap: 0.25rem;
    line-height: 1;
}

.custo-currency {
    font-size: 1rem;
    font-weight: 700;
    color: var(--muted);
    padding-bottom: 0.25rem;
}

.custo-number {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 950;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.custo-variacao {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 0.1rem;
}

.custo-delta        { font-weight: 800; }
.delta--up          { color: var(--danger); }
.delta--down        { color: var(--mint); }

/* ── Breakdown categorias ── */
.custo-breakdown-block {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
}

.custo-cat-row {
    display: grid;
    grid-template-columns: 10rem 1fr auto;
    align-items: center;
    gap: 0.75rem;
}

.custo-cat-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.custo-cat-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.custo-cat-nome {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custo-cat-bar-wrap { min-width: 0; }

.custo-cat-bar {
    height: 6px;
    border-radius: 999px;
    background: #edf0f5;
    overflow: hidden;
}

.custo-cat-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.6s ease;
    min-width: 2px;
}

.custo-cat-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    min-width: 6rem;
}

.custo-cat-pct   { font-size: 0.7rem; font-weight: 800; color: var(--muted); }
.custo-cat-total { font-size: 0.78rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ── Card de despesa ── */
.custo-card {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid #e8eaf0;
    border-radius: 10px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.custo-card:hover {
    border-color: #c8cde0;
    box-shadow: 0 2px 10px rgba(18,19,26,0.05);
}

.custo-card--confirming {
    border-color: rgba(244,91,105,0.4);
    background: rgba(244,91,105,0.02);
}

/* ── Ícone de categoria ── */
.custo-cat-icon {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 8px;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--cat-color) 12%, transparent);
    color: var(--cat-color);
}

.custo-cat-icon svg { width: 1.1rem; height: 1.1rem; }

/* ── Info da despesa ── */
.custo-info { min-width: 0; }

.custo-descricao {
    display: block;
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
}

.custo-meta-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.custo-meta-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--muted);
}

/* ── Data ── */
.custo-data-col {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 6rem;
}

/* ── Valor ── */
.custo-valor-col {
    min-width: 6rem;
    display: flex;
    justify-content: flex-end;
}

.custo-valor {
    font-size: 1rem;
    font-weight: 900;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* ── Fallback color-mix para browsers sem suporte ── */
@supports not (color: color-mix(in srgb, red 10%, transparent)) {
    .custo-cat-icon { background: #f4f5f9; }
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .custo-card { grid-template-columns: auto 1fr auto auto auto; }
    .hist-nf-col { display: none; }
}

@media (max-width: 860px) {
    .custo-resumo-panel {
        grid-template-columns: 1fr;
    }
    .custo-total-block {
        border-right: none;
        border-bottom: 1px solid #e8eaf0;
        padding-right: 0;
        padding-bottom: 1rem;
    }
    .custo-cat-row { grid-template-columns: 8rem 1fr auto; }
    .custo-card { grid-template-columns: auto 1fr auto auto; }
    .custo-data-col { display: none; }
}

@media (max-width: 600px) {
    .custo-card {
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        row-gap: 0.4rem;
    }
    .custo-valor-col { grid-column: 3; grid-row: 1; }
    .custo-info      { grid-column: 2 / 4; grid-row: 2; }
    .veiculo-actions { grid-column: 1 / -1; justify-content: flex-end; border-top: 1px solid #f0f1f5; padding-top: 0.5rem; }
    .custo-cat-row   { grid-template-columns: 7rem 1fr auto; gap: 0.5rem; }
    .custo-cat-total { display: none; }
}


/* ============================================================
   MULTAS — estilos específicos
   ============================================================ */

.multa-list { display: flex; flex-direction: column; gap: 0.6rem; }

/* ── Card ── */
.multa-card {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1rem;
    background: #fff;
    border: 1px solid #e8eaf0;
    border-radius: 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.multa-card:hover {
    border-color: #c8cde0;
    box-shadow: 0 2px 12px rgba(18,19,26,0.06);
}

.multa-card--red      { border-left: 3px solid var(--danger); }
.multa-card--green    { border-left: 3px solid var(--mint); }
.multa-card--brand    { border-left: 3px solid var(--brand); }
.multa-card--muted    { border-left: 3px solid #c8cde0; opacity: .85; }

.multa-card--confirming {
    border-color: rgba(244,91,105,0.4);
    background: rgba(244,91,105,0.02);
}

/* ── Badge de pontos ── */
.multa-pontos-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 0;
}

.multa-pontos-badge {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 950;
    line-height: 1;
}

.multa-pontos-badge--baixa { background: rgba(46,196,166,0.1);  color: #1a9e8b; }
.multa-pontos-badge--media { background: rgba(255,184,77,0.12); color: #c8860a; }
.multa-pontos-badge--alta  { background: rgba(244,91,105,0.1);  color: var(--danger); }

.multa-pontos-label {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Info da infração ── */
.multa-info { min-width: 0; }

.multa-header-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    flex-wrap: wrap;
}

.multa-tipo {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.multa-orgao-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    border-radius: 5px;
    background: #11131b;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
}

.multa-meta-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--muted);
    flex-wrap: wrap;
}

.multa-meta-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Data ── */
.multa-data-col {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 6rem;
}

/* ── Vencimento ── */
.multa-venc-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.18rem;
    min-width: 8rem;
}

.multa-desconto-hint {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--mint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Valor ── */
.multa-valor-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    min-width: 7rem;
}

.multa-valor {
    font-size: 0.95rem;
    font-weight: 900;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.multa-valor-desc {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--mint);
    font-variant-numeric: tabular-nums;
}

.multa-valor-pago {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* ── Status ── */
.multa-status-col { min-width: 6rem; display: flex; justify-content: flex-end; }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .multa-card { grid-template-columns: auto 1fr auto auto auto auto; }
    .multa-data-col { display: none; }
}

@media (max-width: 860px) {
    .multa-card {
        grid-template-columns: auto 1fr auto auto auto;
        grid-template-rows: auto auto;
        row-gap: 0.5rem;
    }
    .multa-venc-col   { display: none; }
    .multa-status-col { grid-column: 3; grid-row: 1; }
    .multa-valor-col  { grid-column: 4; grid-row: 1; }
    .veiculo-actions  { grid-column: 5; grid-row: 1; }
    .multa-info       { grid-column: 2 / 6; grid-row: 2; }
}

@media (max-width: 560px) {
    .multa-card { grid-template-columns: auto 1fr auto auto; }
    .multa-status-col { display: none; }
}


/* ============================================================
   RELATÓRIOS — estilos específicos
   ============================================================ */

/* ── Seletor de período ── */
.rel-periodo-group {
    display: flex;
    border: 1px solid #d8dce8;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.rel-periodo-btn {
    padding: 0.55rem 1rem;
    border: none;
    border-right: 1px solid #d8dce8;
    background: #fff;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}

.rel-periodo-btn:last-child { border-right: none; }
.rel-periodo-btn:hover      { background: #f4f5f9; color: var(--ink); }

.rel-periodo-btn--active {
    background: var(--brand);
    color: #fff;
    border-right-color: var(--brand);
}

/* ── KPI grid ── */
.rel-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
}

.rel-kpi-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e8eaf0;
}

.rel-kpi-icon {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 8px;
    flex-shrink: 0;
}

.rel-kpi-icon svg { width: 1.1rem; height: 1.1rem; }

.rel-kpi-card--brand .rel-kpi-icon { background: rgba(108,92,231,0.1); color: var(--brand); }
.rel-kpi-card--green .rel-kpi-icon { background: rgba(46,196,166,0.1);  color: var(--mint); }
.rel-kpi-card--amber .rel-kpi-icon { background: rgba(255,184,77,0.12); color: #c8860a; }
.rel-kpi-card--mint  .rel-kpi-icon { background: rgba(46,196,166,0.1);  color: var(--mint); }
.rel-kpi-card--red   .rel-kpi-icon { background: rgba(244,91,105,0.1);  color: var(--danger); }
.rel-kpi-card--muted .rel-kpi-icon { background: #f4f5f9; color: var(--muted); }

.rel-kpi-body {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.rel-kpi-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rel-kpi-value {
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 950;
    color: var(--ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.rel-kpi-card--red   .rel-kpi-value { color: var(--danger); }
.rel-kpi-card--amber .rel-kpi-value { color: #c8860a; }

.rel-kpi-sub {
    font-size: 0.72rem;
    color: var(--muted);
}

.sub--alert { color: var(--danger); font-weight: 700; }

/* ── Linha 2 colunas ── */
.rel-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

/* ── Gráficos de barras horizontais ── */
.rel-total-badge {
    font-size: 0.82rem;
    font-weight: 900;
    color: var(--brand);
    background: rgba(108,92,231,0.08);
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    white-space: nowrap;
}

.rel-bar-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.rel-bar-row {
    display: grid;
    grid-template-columns: 9rem 1fr auto;
    align-items: center;
    gap: 0.75rem;
}

.rel-bar-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.rel-bar-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.rel-bar-label > span:not(.rel-bar-dot) {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rel-bar-track {
    height: 6px;
    border-radius: 999px;
    background: #edf0f5;
    overflow: hidden;
}

.rel-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.6s ease;
    min-width: 2px;
}

.rel-bar-vals {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.05rem;
    min-width: 5.5rem;
}

.rel-bar-pct { font-size: 0.72rem; font-weight: 800; color: var(--muted); }
.rel-bar-val { font-size: 0.78rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }

.rel-plate-mini {
    font-size: 0.75rem;
    font-weight: 900;
    color: var(--ink);
    background: #f4f5f9;
    border: 1px solid #e0e3ee;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    white-space: nowrap;
    letter-spacing: 0.03em;
}

/* ── Ranking ── */
.rel-ranking-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.rel-ranking-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.rel-rank-pos {
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 900;
    background: #f4f5f9;
    color: var(--muted);
    flex-shrink: 0;
}

.rank-gold   { background: #fff3cd; color: #c8860a; }
.rank-silver { background: #f0f1f5; color: #6c757d; }
.rank-bronze { background: #fde5d8; color: #c96a35; }

.rel-ranking-val {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 5.5rem;
    text-align: right;
}

/* ── Catálogo ── */
.rel-catalogo-header { margin-top: 0.5rem; }

.rel-catalogo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.rel-catalogo-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1px solid #e8eaf0;
    border-radius: 10px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.rel-catalogo-card:hover {
    border-color: #c8cde0;
    box-shadow: 0 2px 10px rgba(18,19,26,0.05);
}

.rel-catalogo-icon {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 8px;
    flex-shrink: 0;
}

.rel-catalogo-icon svg { width: 1.1rem; height: 1.1rem; }

.rel-catalogo-icon--brand  { background: rgba(108,92,231,0.1); color: var(--brand); }
.rel-catalogo-icon--amber  { background: rgba(255,184,77,0.12); color: #c8860a; }
.rel-catalogo-icon--green  { background: rgba(46,196,166,0.1);  color: #1a9e8b; }
.rel-catalogo-icon--purple { background: rgba(156,107,245,0.1); color: #7950f2; }
.rel-catalogo-icon--red    { background: rgba(244,91,105,0.1);  color: var(--danger); }
.rel-catalogo-icon--blue   { background: rgba(116,192,252,0.14);color: #1971c2; }
.rel-catalogo-icon--orange { background: rgba(247,103,7,0.1);   color: #f76707; }
.rel-catalogo-icon--mint   { background: rgba(46,196,166,0.1);  color: var(--mint); }

.rel-catalogo-body { flex: 1; min-width: 0; }

.rel-catalogo-titulo {
    display: block;
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 0.2rem;
}

.rel-catalogo-desc {
    margin: 0;
    font-size: 0.75rem;
    color: var(--muted);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rel-catalogo-actions {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex-shrink: 0;
}

.rel-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    border: 1px solid;
    font-size: 0.72rem;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
}

.rel-export-btn svg { width: 0.8rem; height: 0.8rem; }

.rel-export-btn--pdf {
    border-color: rgba(244,91,105,0.3);
    color: var(--danger);
    background: rgba(244,91,105,0.05);
}

.rel-export-btn--pdf:hover  { background: rgba(244,91,105,0.12); }

.rel-export-btn--xls {
    border-color: rgba(46,196,166,0.3);
    color: #1a9e8b;
    background: rgba(46,196,166,0.05);
}

.rel-export-btn--xls:hover  { background: rgba(46,196,166,0.12); }

/* ── Toast ── */
.rel-toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.1rem;
    background: #12131a;
    color: #fff;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(18,19,26,0.28);
    z-index: 200;
    animation: toastIn 0.25s ease;
}

.rel-toast svg {
    width: 1rem;
    height: 1rem;
    color: var(--mint);
    flex-shrink: 0;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(0.5rem); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ── */
@media (min-width: 900px) {
    .rel-kpi-grid { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 900px) {
    .rel-kpi-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
    .rel-row-2         { grid-template-columns: 1fr; }
    .rel-catalogo-grid { grid-template-columns: 1fr; }
    .rel-bar-row       { grid-template-columns: 7rem 1fr auto; }
    .page-header       { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
    .rel-kpi-grid     { grid-template-columns: repeat(2, 1fr); }
    .rel-periodo-btn  { padding: 0.45rem 0.65rem; font-size: 0.75rem; }
    .rel-catalogo-card { flex-wrap: wrap; }
    .rel-catalogo-actions { flex-direction: row; }
}

/* ═══════════════════════════════════════════
   EMPRESA
═══════════════════════════════════════════ */

/* Banner de sucesso */
.empresa-success-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    background: rgba(46, 196, 166, 0.1);
    border: 1px solid rgba(46, 196, 166, 0.3);
    border-radius: 10px;
    color: #1a9e8b;
    font-size: 0.88rem;
    font-weight: 600;
}
.empresa-success-banner svg { width: 1rem; height: 1rem; flex-shrink: 0; }

/* Card de identidade */
.empresa-identity-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    flex-wrap: wrap;
}

.empresa-avatar-block {
    position: relative;
    flex-shrink: 0;
}

.empresa-avatar {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #be2edd 0%, #9b22b5 100%);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: -0.5px;
    user-select: none;
}

.empresa-avatar-upload {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--muted);
    transition: border-color 0.15s, color 0.15s;
}
.empresa-avatar-upload:hover { border-color: #be2edd; color: #be2edd; }
.empresa-avatar-upload svg { width: 11px; height: 11px; }

.empresa-identity-info {
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.empresa-nome {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.2;
}

.empresa-cnpj,
.empresa-cidade {
    font-size: 0.82rem;
    color: var(--muted);
}

.empresa-plan-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
    margin-left: auto;
}

.empresa-plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    background: linear-gradient(135deg, rgba(190,46,221,0.12) 0%, rgba(155,34,181,0.08) 100%);
    border: 1px solid rgba(190,46,221,0.25);
    border-radius: 999px;
    color: #be2edd;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.empresa-plan-badge svg { width: 0.75rem; height: 0.75rem; }

.empresa-plan-detalhe {
    font-size: 0.75rem;
    color: var(--muted);
}

.empresa-plan-link {
    font-size: 0.75rem;
    color: #be2edd;
    text-decoration: none;
    font-weight: 600;
}
.empresa-plan-link:hover { text-decoration: underline; }

/* Grid do formulário */
.empresa-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: start;
}

.empresa-form-col {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Seções internas de config */
.empresa-config-section {
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
}
.empresa-config-section:first-child { padding-top: 0; border-top: none; }

.empresa-config-titulo {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

/* Rodapé do formulário */
.empresa-form-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--line);
}

/* Responsivo */
@media (max-width: 900px) {
    .empresa-form-grid { grid-template-columns: 1fr; }
    .empresa-plan-block { align-items: flex-start; }
}

@media (max-width: 600px) {
    .empresa-identity-card { flex-direction: column; align-items: flex-start; }
    .empresa-plan-block { margin-left: 0; }
    .empresa-form-footer { flex-direction: column-reverse; }
    .empresa-form-footer .btn-ghost,
    .empresa-form-footer .btn-primary { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════
   USUÁRIOS
═══════════════════════════════════════════ */

.usuario-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* ── Card ── */
.usuario-card {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1rem;
    background: #fff;
    border: 1px solid #e8eaf0;
    border-radius: 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.usuario-card:hover {
    border-color: #c8cde0;
    box-shadow: 0 2px 12px rgba(18,19,26,0.06);
}

.usuario-card--pendente {
    background: rgba(255,184,77,0.02);
    border-color: rgba(255,184,77,0.25);
}

.usuario-card--confirming {
    border-color: rgba(244,91,105,0.4);
    background: rgba(244,91,105,0.02);
}

/* Avatar menor para usuários */
.usuario-avatar-sm {
    width: 2.35rem;
    height: 2.35rem;
    font-size: 0.8rem;
    border-radius: 10px;
}

/* ── Info ── */
.usuario-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.usuario-eu-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    background: rgba(190,46,221,0.1);
    color: #be2edd;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    vertical-align: middle;
    letter-spacing: 0.02em;
}

.usuario-cargo {
    font-size: 0.74rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: italic;
}

/* ── Perfil ── */
.usuario-perfil-col {
    min-width: 7rem;
    display: flex;
    justify-content: center;
}

.usuario-perfil-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.usuario-perfil-badge--admin {
    background: rgba(190,46,221,0.1);
    color: #be2edd;
}

.usuario-perfil-badge--gerente {
    background: rgba(25,113,194,0.1);
    color: #1971c2;
}

.usuario-perfil-badge--operador {
    background: rgba(46,196,166,0.1);
    color: #1a9e8b;
}

.usuario-perfil-badge--visualizador {
    background: #f0f1f5;
    color: var(--muted);
}

/* ── Último acesso ── */
.usuario-acesso-col {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 7.5rem;
    text-align: right;
}

.usuario-acesso-label {
    font-size: 0.7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.usuario-acesso-data {
    font-size: 0.8rem;
    color: var(--ink);
    font-weight: 600;
}

.usuario-acesso-pendente {
    font-size: 0.75rem;
    color: #c8860a;
    font-weight: 700;
}

.usuario-acesso-nunca {
    font-size: 0.78rem;
    color: var(--muted);
    font-style: italic;
}

/* ── Perfil radio no drawer ── */
.usuario-perfil-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.usuario-perfil-radio {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: #fff;
}

.usuario-perfil-radio input[type="radio"] { display: none; }

.usuario-perfil-radio:hover {
    border-color: #c8cde0;
    background: #fafbfd;
}

.usuario-perfil-radio-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
}

.usuario-perfil-radio-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.usuario-perfil-radio-name {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--ink);
}

.usuario-perfil-radio-desc {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.45;
}

/* Estados ativos por perfil */
.usuario-perfil-radio--active.usuario-perfil-radio--admin {
    border-color: rgba(190,46,221,0.4);
    background: rgba(190,46,221,0.04);
}

.usuario-perfil-radio--active.usuario-perfil-radio--gerente {
    border-color: rgba(25,113,194,0.4);
    background: rgba(25,113,194,0.04);
}

.usuario-perfil-radio--active.usuario-perfil-radio--operador {
    border-color: rgba(46,196,166,0.4);
    background: rgba(46,196,166,0.04);
}

.usuario-perfil-radio--active.usuario-perfil-radio--visualizador {
    border-color: rgba(176,181,196,0.5);
    background: rgba(176,181,196,0.05);
}

/* Responsivo */
@media (max-width: 900px) {
    .usuario-card {
        grid-template-columns: auto 1fr auto auto;
        grid-template-rows: auto auto;
    }
    .usuario-acesso-col { display: none; }
    .usuario-perfil-col { justify-content: flex-start; }
}

@media (max-width: 600px) {
    .usuario-card {
        grid-template-columns: auto 1fr auto;
        gap: 0.75rem;
    }
    .usuario-perfil-col { display: none; }
    .usuario-perfil-radio-header { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
}


/* ═══════════════════════════════════════════
   EMPRESA
═══════════════════════════════════════════ */

.empresa-success-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    background: rgba(46, 196, 166, 0.1);
    border: 1px solid rgba(46, 196, 166, 0.3);
    border-radius: 10px;
    color: #1a9e8b;
    font-size: 0.88rem;
    font-weight: 600;
}
.empresa-success-banner svg { width: 1rem; height: 1rem; flex-shrink: 0; }

.empresa-identity-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    flex-wrap: wrap;
}

.empresa-avatar-block { position: relative; flex-shrink: 0; }

.empresa-avatar {
    width: 64px; height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #be2edd 0%, #9b22b5 100%);
    color: #fff; font-size: 1.5rem; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    letter-spacing: -0.5px; user-select: none;
}

.empresa-avatar-upload {
    position: absolute; bottom: -6px; right: -6px;
    width: 22px; height: 22px; border-radius: 50%;
    background: #fff; border: 1.5px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--muted);
    transition: border-color 0.15s, color 0.15s;
}
.empresa-avatar-upload:hover { border-color: #be2edd; color: #be2edd; }
.empresa-avatar-upload svg { width: 11px; height: 11px; }

.empresa-identity-info {
    flex: 1; min-width: 180px;
    display: flex; flex-direction: column; gap: 0.2rem;
}
.empresa-nome { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--ink); line-height: 1.2; }
.empresa-cnpj, .empresa-cidade { font-size: 0.82rem; color: var(--muted); }

.empresa-plan-block {
    display: flex; flex-direction: column;
    align-items: flex-end; gap: 0.3rem; margin-left: auto;
}
.empresa-plan-badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    background: linear-gradient(135deg, rgba(190,46,221,0.12) 0%, rgba(155,34,181,0.08) 100%);
    border: 1px solid rgba(190,46,221,0.25); border-radius: 999px;
    color: #be2edd; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.01em;
}
.empresa-plan-badge svg { width: 0.75rem; height: 0.75rem; }
.empresa-plan-detalhe { font-size: 0.75rem; color: var(--muted); }
.empresa-plan-link { font-size: 0.75rem; color: #be2edd; text-decoration: none; font-weight: 600; }
.empresa-plan-link:hover { text-decoration: underline; }

.empresa-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.empresa-form-col  { display: flex; flex-direction: column; gap: 1.25rem; }

.empresa-config-section { padding-top: 0.75rem; border-top: 1px solid var(--line); }
.empresa-config-section:first-child { padding-top: 0; border-top: none; }
.empresa-config-titulo {
    font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
}

.empresa-form-footer {
    display: flex; justify-content: flex-end; gap: 0.75rem;
    padding-top: 0.5rem; border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
    .empresa-form-grid { grid-template-columns: 1fr; }
    .empresa-plan-block { align-items: flex-start; }
}
@media (max-width: 600px) {
    .empresa-identity-card { flex-direction: column; align-items: flex-start; }
    .empresa-plan-block { margin-left: 0; }
    .empresa-form-footer { flex-direction: column-reverse; }
    .empresa-form-footer .btn-ghost,
    .empresa-form-footer .btn-primary { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════
   USUÁRIOS
═══════════════════════════════════════════ */

.usuario-list { display: flex; flex-direction: column; gap: 0.6rem; }

.usuario-card {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto auto;
    align-items: center; gap: 1rem;
    padding: 0.9rem 1rem; background: #fff;
    border: 1px solid #e8eaf0; border-radius: 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.usuario-card:hover { border-color: #c8cde0; box-shadow: 0 2px 12px rgba(18,19,26,0.06); }
.usuario-card--pendente { background: rgba(255,184,77,0.02); border-color: rgba(255,184,77,0.25); }
.usuario-card--confirming { border-color: rgba(244,91,105,0.4); background: rgba(244,91,105,0.02); }

.usuario-avatar-sm { width: 2.35rem; height: 2.35rem; font-size: 0.8rem; border-radius: 10px; }

.usuario-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.usuario-eu-badge {
    display: inline-block; margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    background: rgba(190,46,221,0.1); color: #be2edd;
    border-radius: 999px; font-size: 0.68rem; font-weight: 700;
    vertical-align: middle; letter-spacing: 0.02em;
}
.usuario-cargo { font-size: 0.74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: italic; }

.usuario-perfil-col { min-width: 7rem; display: flex; justify-content: center; }
.usuario-perfil-badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.22rem 0.65rem; border-radius: 999px;
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap;
}
.usuario-perfil-badge--admin       { background: rgba(190,46,221,0.1);  color: #be2edd; }
.usuario-perfil-badge--gerente     { background: rgba(25,113,194,0.1);  color: #1971c2; }
.usuario-perfil-badge--operador    { background: rgba(46,196,166,0.1);  color: #1a9e8b; }
.usuario-perfil-badge--visualizador{ background: #f0f1f5;              color: var(--muted); }

.usuario-acesso-col { display: flex; flex-direction: column; gap: 0.1rem; min-width: 7.5rem; text-align: right; }
.usuario-acesso-label  { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.usuario-acesso-data   { font-size: 0.8rem; color: var(--ink); font-weight: 600; }
.usuario-acesso-pendente { font-size: 0.75rem; color: #c8860a; font-weight: 700; }
.usuario-acesso-nunca  { font-size: 0.78rem; color: var(--muted); font-style: italic; }

.usuario-perfil-radio-group { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
.usuario-perfil-radio {
    display: flex; align-items: flex-start; gap: 0.75rem;
    padding: 0.75rem 0.9rem; border: 1.5px solid var(--line);
    border-radius: 10px; cursor: pointer;
    transition: border-color 0.15s, background 0.15s; background: #fff;
}
.usuario-perfil-radio input[type="radio"] { display: none; }
.usuario-perfil-radio:hover { border-color: #c8cde0; background: #fafbfd; }
.usuario-perfil-radio-body  { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; }
.usuario-perfil-radio-header{ display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.usuario-perfil-radio-name  { font-size: 0.88rem; font-weight: 800; color: var(--ink); }
.usuario-perfil-radio-desc  { font-size: 0.78rem; color: var(--muted); line-height: 1.45; }

.usuario-perfil-radio--active.usuario-perfil-radio--admin       { border-color: rgba(190,46,221,0.4); background: rgba(190,46,221,0.04); }
.usuario-perfil-radio--active.usuario-perfil-radio--gerente     { border-color: rgba(25,113,194,0.4);  background: rgba(25,113,194,0.04);  }
.usuario-perfil-radio--active.usuario-perfil-radio--operador    { border-color: rgba(46,196,166,0.4);  background: rgba(46,196,166,0.04);  }
.usuario-perfil-radio--active.usuario-perfil-radio--visualizador{ border-color: rgba(176,181,196,0.5); background: rgba(176,181,196,0.05); }

@media (max-width: 900px) {
    .usuario-card { grid-template-columns: auto 1fr auto auto; grid-template-rows: auto auto; }
    .usuario-acesso-col { display: none; }
    .usuario-perfil-col { justify-content: flex-start; }
}
@media (max-width: 600px) {
    .usuario-card { grid-template-columns: auto 1fr auto; gap: 0.75rem; }
    .usuario-perfil-col { display: none; }
    .usuario-perfil-radio-header { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
}

/* ═══════════════════════════════════════════
   CONFIGURAÇÕES
═══════════════════════════════════════════ */

/* Nav de abas */
.config-nav {
    display: flex; gap: 0.25rem;
    background: #f4f5f9; border-radius: 12px; padding: 0.3rem;
    overflow-x: auto; scrollbar-width: none;
}
.config-nav::-webkit-scrollbar { display: none; }

.config-nav-btn {
    flex: 1; padding: 0.5rem 0.9rem;
    border: none; background: transparent; border-radius: 9px;
    font-size: 0.82rem; font-weight: 600; color: var(--muted);
    cursor: pointer; transition: all 0.15s;
    display: flex; align-items: center; gap: 0.4rem; justify-content: center;
    white-space: nowrap; min-width: max-content;
}
.config-nav-btn:hover { color: var(--ink); background: rgba(255,255,255,0.6); }
.config-nav-btn--active { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(18,19,26,0.1); }

/* Grid de duas colunas das seções */
.config-section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.config-col          { display: flex; flex-direction: column; gap: 1.25rem; }

/* Rodapé de ações */
.config-footer {
    display: flex; justify-content: flex-end; gap: 0.75rem;
    padding-top: 0.5rem; border-top: 1px solid var(--line);
}

/* Avatar da conta */
.config-avatar-block {
    display: flex; align-items: center; gap: 1rem;
    margin-bottom: 0.75rem;
}
.config-avatar {
    width: 3.5rem; height: 3.5rem; border-radius: 50%;
    background: var(--avatar-color, #be2edd);
    color: #fff; font-size: 1.1rem; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; user-select: none;
}
.config-avatar-nome  { display: block; font-weight: 800; font-size: 0.95rem; color: var(--ink); }
.config-avatar-email { display: block; font-size: 0.8rem; color: var(--muted); }

/* Info rows (leitura) */
.config-info-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.6rem 0; border-bottom: 1px solid var(--line); gap: 0.5rem;
}
.config-info-label { font-size: 0.82rem; color: var(--muted); }
.config-info-value { font-size: 0.85rem; font-weight: 600; color: var(--ink); }

/* Botão de ação perigosa */
.config-danger-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.9rem; border-radius: 8px;
    border: 1px solid rgba(244,91,105,0.3);
    background: transparent; color: var(--danger);
    font-size: 0.82rem; font-weight: 600; cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.config-danger-btn:hover { background: rgba(244,91,105,0.06); border-color: rgba(244,91,105,0.5); }
.config-danger-btn svg   { width: 0.9rem; height: 0.9rem; flex-shrink: 0; }

/* Confirmação inline */
.config-confirm-inline {
    margin-top: 0.75rem; padding: 0.75rem;
    background: rgba(244,91,105,0.05); border: 1px solid rgba(244,91,105,0.2);
    border-radius: 8px; font-size: 0.82rem; color: var(--ink);
}

/* Toggle switch */
.config-switch { position: relative; display: inline-block; flex-shrink: 0; cursor: pointer; }
.config-switch input[type="checkbox"] { display: none; }
.config-switch-track {
    display: block; width: 2.6rem; height: 1.4rem; border-radius: 999px;
    background: #dfe3ec; position: relative;
    transition: background 0.2s;
}
.config-switch-track::after {
    content: ""; position: absolute;
    width: 1.1rem; height: 1.1rem; border-radius: 50%;
    background: #fff; top: 0.15rem; left: 0.15rem;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.config-switch input:checked + .config-switch-track { background: #be2edd; }
.config-switch input:checked + .config-switch-track::after { transform: translateX(1.2rem); }

/* Linhas de toggle */
.config-toggle-list { display: flex; flex-direction: column; }
.config-toggle-row  {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 0.7rem 0;
    border-bottom: 1px solid var(--line);
}
.config-toggle-row:last-child { border-bottom: none; }
.config-toggle-info  { display: flex; flex-direction: column; gap: 0.15rem; }
.config-toggle-nome  { font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.config-toggle-desc  { font-size: 0.75rem; color: var(--muted); line-height: 1.4; }

/* Seletor de tema */
.config-tema-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.config-tema-card {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    padding: 0.75rem; border: 2px solid var(--line); border-radius: 12px;
    cursor: pointer; transition: border-color 0.15s; background: #fff;
}
.config-tema-card input[type="radio"] { display: none; }
.config-tema-card:hover              { border-color: #c8cde0; }
.config-tema-card--active            { border-color: #be2edd; }
.config-tema-card--disabled          { opacity: 0.5; cursor: not-allowed; }
.config-tema-nome { font-size: 0.8rem; font-weight: 700; color: var(--ink); display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.config-em-breve  { font-size: 0.65rem; font-weight: 600; color: var(--muted); background: #f0f1f5; padding: 0.1rem 0.4rem; border-radius: 999px; }

/* Prévia do tema */
.config-tema-preview {
    width: 100%; height: 3.5rem; border-radius: 7px;
    border: 1px solid var(--line); display: flex; overflow: hidden;
}
.config-tema-preview--light .ctp-sidebar { width: 28%; background: #f7f8fb; border-right: 1px solid #e8eaf0; }
.config-tema-preview--light .ctp-content { flex: 1; padding: 0.35rem; display: flex; flex-direction: column; gap: 0.25rem; background: #fff; }
.config-tema-preview--light .ctp-bar     { height: 0.4rem; border-radius: 3px; background: #e8eaf0; }
.config-tema-preview--light .ctp-card    { height: 0.65rem; border-radius: 3px; background: #f7f8fb; border: 1px solid #e8eaf0; }
.config-tema-preview--dark  .ctp-sidebar { width: 28%; background: #1a1b2e; }
.config-tema-preview--dark  .ctp-content { flex: 1; padding: 0.35rem; display: flex; flex-direction: column; gap: 0.25rem; background: #12131a; }
.config-tema-preview--dark  .ctp-bar     { height: 0.4rem; border-radius: 3px; background: #2a2b40; }
.config-tema-preview--dark  .ctp-card    { height: 0.65rem; border-radius: 3px; background: #1e1f35; border: 1px solid #2a2b40; }
.config-tema-preview--system .ctp-sidebar { width: 28%; background: linear-gradient(180deg, #1a1b2e 50%, #f7f8fb 50%); }
.config-tema-preview--system .ctp-content { flex: 1; padding: 0.35rem; display: flex; flex-direction: column; gap: 0.25rem; background: linear-gradient(180deg, #12131a 50%, #fff 50%); }
.config-tema-preview--system .ctp-bar     { height: 0.4rem; border-radius: 3px; background: linear-gradient(90deg, #2a2b40 50%, #e8eaf0 50%); }
.config-tema-preview--system .ctp-card    { height: 0.65rem; border-radius: 3px; background: linear-gradient(90deg, #1e1f35 50%, #f7f8fb 50%); }

/* Pré-visualização de formato */
.config-preview-card {
    padding: 1rem 1.25rem; background: #fff;
    border: 1px solid var(--line); border-radius: 12px;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.config-preview-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.config-preview-demo  { display: flex; align-items: baseline; gap: 1.25rem; flex-wrap: wrap; }
.config-preview-date  { font-size: 1rem; font-weight: 700; color: var(--ink); }
.config-preview-value { font-size: 1.1rem; font-weight: 900; color: #be2edd; }

/* Campo de senha */
.config-password-wrap { position: relative; }
.config-password-wrap input { padding-right: 2.5rem; }
.config-password-toggle {
    position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%);
    background: none; border: none; padding: 0.2rem; cursor: pointer;
    color: var(--muted); display: flex; align-items: center;
    transition: color 0.15s;
}
.config-password-toggle:hover { color: var(--ink); }
.config-password-toggle svg { width: 1rem; height: 1rem; }

.config-api-key-wrap { position: relative; }
.config-api-key-wrap input { padding-right: 2.5rem; }

/* Força da senha */
.config-senha-forca  { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.1rem; }
.config-senha-barras { display: flex; gap: 0.25rem; flex: 1; }
.config-senha-barra  { flex: 1; height: 3px; border-radius: 999px; background: #e8eaf0; transition: background 0.2s; }
.config-senha-barca--fraca   { background: var(--danger); }
.config-senha-barca--regular { background: var(--amber); }
.config-senha-barca--boa     { background: #74c0fc; }
.config-senha-barca--forte   { background: var(--mint); }
.config-senha-label           { font-size: 0.72rem; font-weight: 700; min-width: 3.5rem; }
.config-senha-label--fraca   { color: var(--danger); }
.config-senha-label--regular { color: #c8860a; }
.config-senha-label--boa     { color: #1971c2; }
.config-senha-label--forte   { color: #1a9e8b; }

/* Sessões */
.config-sessao-list { display: flex; flex-direction: column; gap: 0.6rem; }
.config-sessao-card {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem; border: 1px solid var(--line);
    border-radius: 10px; background: #fff;
}
.config-sessao-card--atual { border-color: rgba(46,196,166,0.3); background: rgba(46,196,166,0.03); }
.config-sessao-icone {
    width: 2rem; height: 2rem; border-radius: 8px;
    background: #f4f5f9; display: flex; align-items: center; justify-content: center;
    color: var(--muted); flex-shrink: 0;
}
.config-sessao-icone svg { width: 1rem; height: 1rem; }
.config-sessao-info  { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; min-width: 0; font-size: 0.82rem; }
.config-sessao-info strong { color: var(--ink); font-size: 0.85rem; }
.config-sessao-info span   { color: var(--muted); font-size: 0.75rem; }
.config-sessao-tempo { font-size: 0.72rem !important; color: #b0b5c4 !important; }

/* Log de acessos */
.config-log-list { display: flex; flex-direction: column; gap: 0.1rem; }
.config-log-row  { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.config-log-row:last-child { border-bottom: none; }
.config-log-dot  { width: 0.5rem; height: 0.5rem; border-radius: 50%; margin-top: 0.3rem; flex-shrink: 0; }
.config-log-dot--ok   { background: var(--mint); }
.config-log-dot--fail { background: var(--danger); }
.config-log-info { display: flex; flex-direction: column; gap: 0.1rem; }
.config-log-info span { font-size: 0.82rem; color: var(--ink); font-weight: 600; }
.config-log-meta { font-size: 0.72rem !important; color: var(--muted) !important; font-weight: 400 !important; }

/* Integrações */
.config-integracao-card {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 0; border-bottom: 1px solid var(--line);
}
.config-integracao-card:last-child { border-bottom: none; }
.config-integracao-logo {
    width: 2.25rem; height: 2.25rem; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.config-integracao-logo svg { width: 1rem; height: 1rem; }
.config-integracao-info { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; }
.config-integracao-info strong { font-size: 0.88rem; font-weight: 800; color: var(--ink); }
.config-integracao-info span   { font-size: 0.75rem; color: var(--muted); }

/* Responsivo */
@media (max-width: 900px) {
    .config-section-grid { grid-template-columns: 1fr; }
    .config-tema-grid    { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .config-nav-btn  { padding: 0.45rem 0.65rem; font-size: 0.76rem; }
    .config-nav-btn span { display: none; }
    .config-footer   { flex-direction: column-reverse; }
    .config-footer .btn-ghost,
    .config-footer .btn-primary { width: 100%; justify-content: center; }
    .config-tema-grid { grid-template-columns: repeat(2, 1fr); }
    .config-sessao-card { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════
   RELATÓRIOS — MELHORIAS
═══════════════════════════════════════════ */

/* KPI custo/km destacado */
.rel-kpi-card--custo-km {
    background: linear-gradient(135deg, rgba(190,46,221,0.06) 0%, rgba(155,34,181,0.03) 100%);
    border-color: rgba(190,46,221,0.25);
}
.rel-kpi-card--custo-km .rel-kpi-icon {
    background: rgba(190,46,221,0.12);
    color: #be2edd;
}

/* Título de seção separador */
.rel-secao-titulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--line);
    margin-top: 0.25rem;
}
.rel-secao-titulo svg { width: 0.9rem; height: 0.9rem; }

/* Gráfico de evolução mensal (barras verticais) */
.rel-evo-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 120px;
    padding: 0 0.25rem;
    margin: 0.75rem 0 0.5rem;
}

.rel-evo-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    height: 100%;
    justify-content: flex-end;
}

.rel-evo-bar-wrap {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.rel-evo-bar {
    width: 100%;
    border-radius: 4px 4px 0 0;
    background: #dfe3ec;
    transition: height 0.5s ease;
    min-height: 4px;
}

.rel-evo-bar--destaque { background: #be2edd; }

.rel-evo-mes {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--muted);
    text-align: center;
}

.rel-evo-value {
    font-size: 0.66rem;
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
}

.rel-evo-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--line);
}

.rel-evo-leg-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: var(--muted);
    font-weight: 600;
}

/* Lista de motoristas */
.rel-motorista-list {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.rel-motorista-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--line);
}
.rel-motorista-row:last-child { border-bottom: none; }

/* Responsivo relatórios */
@media (max-width: 860px) {
    .rel-evo-chart    { height: 90px; }
    .rel-evo-value    { display: none; }
}
@media (max-width: 600px) {
    .rel-secao-titulo { font-size: 0.72rem; }
    .rel-evo-chart    { gap: 0.3rem; }
}

/* ── Barra de filtros dos relatórios ── */
.rel-filter-bar {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.rel-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.rel-filter-titulo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.rel-filter-active {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.rel-filter-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    background: rgba(190,46,221,0.1);
    color: #be2edd;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.rel-filter-clear {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    background: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.rel-filter-clear:hover { border-color: var(--danger); color: var(--danger); }

.rel-filter-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.rel-filter-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
    padding-top: 0.35rem;
    min-width: 7rem;
}

@media (max-width: 600px) {
    .rel-filter-row { flex-direction: column; gap: 0.4rem; }
    .rel-filter-label { min-width: unset; }
}

/* ── Botão Filtros ── */
.rel-filtro-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}
.rel-filtro-btn--ativo {
    border-color: rgba(190,46,221,0.4) !important;
    color: #be2edd !important;
    background: rgba(190,46,221,0.06) !important;
}
.rel-filtro-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.25rem;
    background: #be2edd;
    color: #fff;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 900;
}

/* ── Modal overlay ── */
.filter-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(18,19,26,0.45);
    z-index: 300;
    backdrop-filter: blur(2px);
}

/* ── Modal panel ── */
.filter-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 301;
    width: min(520px, 96vw);
    max-height: 88vh;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(18,19,26,0.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.filter-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.1rem 1.25rem 0.9rem;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
    gap: 0.75rem;
}

.filter-modal-titulo {
    margin: 0 0 0.15rem;
    font-size: 1rem;
    font-weight: 900;
    color: var(--ink);
}

.filter-modal-subtitulo {
    margin: 0;
    font-size: 0.78rem;
    color: var(--muted);
}

.filter-modal-close {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    border: none;
    background: #f4f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--muted);
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.filter-modal-close:hover { background: #e8eaf0; color: var(--ink); }
.filter-modal-close svg { width: 0.9rem; height: 0.9rem; }

.filter-modal-body {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* ── Seção dentro do modal ── */
.filter-modal-secao {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--line);
}
.filter-modal-secao:last-child { border-bottom: none; }

.filter-modal-secao-titulo {
    font-size: 0.73rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: 0.65rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* ── Campo de busca dentro do modal ── */
.filter-modal-busca { margin-bottom: 0.5rem; }
.filter-modal-busca input {
    width: 100%;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--ink);
    outline: none;
    background: #fafbfd;
    transition: border-color 0.15s;
}
.filter-modal-busca input:focus { border-color: #be2edd; background: #fff; }
.filter-modal-busca input::placeholder { color: #b0b5c4; }

/* ── Lista de itens checkáveis ── */
.filter-modal-lista {
    display: flex;
    flex-direction: column;
    max-height: 160px;
    overflow-y: auto;
    scrollbar-width: thin;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fafbfd;
}

.filter-modal-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background 0.12s;
    border-bottom: 1px solid #f0f1f5;
    user-select: none;
}
.filter-modal-item:last-child { border-bottom: none; }
.filter-modal-item:hover { background: #f4f5f9; }
.filter-modal-item input[type="checkbox"] { display: none; }

.filter-modal-item-check {
    width: 1rem;
    height: 1rem;
    border: 1.5px solid #c8cde0;
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    background: #fff;
}
.filter-modal-item input:checked ~ .filter-modal-item-check {
    background: #be2edd;
    border-color: #be2edd;
}
.filter-modal-item input:checked ~ .filter-modal-item-check::after {
    content: "";
    width: 4px;
    height: 7px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translate(-1px, -1px);
    display: block;
}

.filter-modal-item-nome {
    font-size: 0.82rem;
    color: var(--muted);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Rodapé do modal ── */
.filter-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--line);
    flex-shrink: 0;
    gap: 0.75rem;
    background: #fafbfd;
}

@media (max-width: 600px) {
    .filter-modal { max-height: 95vh; border-radius: 16px 16px 0 0; top: auto; bottom: 0; transform: translateX(-50%); }
    .filter-modal-footer { flex-direction: column; }
    .filter-modal-footer > div { width: 100%; display: flex; gap: .5rem; }
    .filter-modal-footer .btn-ghost,
    .filter-modal-footer .btn-primary { flex: 1; justify-content: center; }
}

/* ═══════════════════════════════════════════
   CENTROS DE CUSTO (Empresa)
═══════════════════════════════════════════ */

/* Seção */
.cc-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--line);
    margin-top: 0.5rem;
}

.cc-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.cc-section-titulo {
    margin: 0 0 0.2rem;
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--ink);
}

.cc-section-sub {
    margin: 0;
    font-size: 0.82rem;
    color: var(--muted);
    max-width: 38rem;
}

/* Empty state */
.cc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2.5rem 1rem;
    background: #fafbfd;
    border: 1.5px dashed var(--line);
    border-radius: 12px;
    text-align: center;
    color: var(--muted);
    font-size: 0.85rem;
}
.cc-empty svg { width: 2.5rem; height: 2.5rem; color: #c8cde0; }
.cc-empty p   { margin: 0; max-width: 28rem; }

/* Lista de centros */
.cc-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Card de centro */
.cc-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.cc-card:hover {
    border-color: #c8cde0;
    box-shadow: 0 2px 10px rgba(18,19,26,0.06);
}
.cc-card--confirming {
    border-color: rgba(244,91,105,0.4);
    background: rgba(244,91,105,0.02);
}

.cc-card-barra {
    width: 5px;
    align-self: stretch;
    flex-shrink: 0;
}

.cc-card-info {
    flex: 1;
    padding: 0.8rem 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.cc-card-header-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cc-card-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.cc-card-nome {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--ink);
}

.cc-card-qtd {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    background: #f4f5f9;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
}

.cc-card-desc {
    margin: 0;
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 38rem;
}

.cc-card-veiculos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.1rem;
}

/* Seletor de cor no drawer */
.cc-cor-grupo {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.cc-cor-opcao {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
}
.cc-cor-opcao input[type="radio"] { display: none; }

.cc-cor-swatch {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    border: 3px solid transparent;
    transition: transform 0.15s, box-shadow 0.15s;
}
.cc-cor-swatch:hover { transform: scale(1.12); }

.cc-cor-swatch--ativa {
    border-color: #fff;
    box-shadow: 0 0 0 2.5px currentColor, 0 2px 8px rgba(0,0,0,0.15);
    transform: scale(1.1);
}

.cc-cor-label {
    font-size: 0.65rem;
    color: var(--muted);
    font-weight: 600;
    text-align: center;
}

/* Lista de veículos no drawer */
.cc-veiculo-lista {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: #fafbfd;
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
    margin-top: 0.5rem;
}

.filter-modal-item--desabilitado {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsivo */
@media (max-width: 600px) {
    .cc-section-header { flex-direction: column; }
    .cc-card { flex-wrap: wrap; padding: 0.75rem; gap: 0.5rem; }
    .cc-card-barra { display: none; }
}

/* ═══════════════════════════════════════════
   VEÍCULOS — Centro de custo + QR Code
═══════════════════════════════════════════ */

/* Badge de centro de custo no card */
.veiculo-centro-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.5rem;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    opacity: 0.85;
}

/* Botão QR no card */
.action-btn--qr {
    color: #be2edd !important;
}
.action-btn--qr:hover {
    background: rgba(190,46,221,0.08) !important;
    border-color: rgba(190,46,221,0.3) !important;
}

/* ── Modal QR Code ── */
.qr-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 301;
    width: min(420px, 95vw);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(18,19,26,0.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.qr-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.1rem 1.25rem 0.9rem;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.qr-modal-titulo {
    margin: 0 0 0.15rem;
    font-size: 1rem;
    font-weight: 900;
    color: var(--ink);
}

.qr-modal-sub {
    margin: 0;
    font-size: 0.78rem;
    color: var(--muted);
}

.qr-modal-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.qr-modal-imagem {
    padding: 0.75rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-img {
    width: 200px;
    height: 200px;
    display: block;
    border-radius: 4px;
}

.qr-modal-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}

.qr-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid var(--line);
}
.qr-info-row:last-child { border-bottom: none; }

.qr-info-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.qr-info-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink);
    text-align: right;
}

.qr-modal-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.75rem;
    color: var(--muted);
    line-height: 1.45;
    text-align: left;
    width: 100%;
}

.qr-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--line);
    background: #fafbfd;
    flex-shrink: 0;
}

.qr-modal-footer .btn-primary {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

@media (max-width: 480px) {
    .qr-img { width: 160px; height: 160px; }
    .qr-modal-footer { flex-direction: column; }
    .qr-modal-footer .btn-ghost,
    .qr-modal-footer .btn-primary { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════
   SCORE DE RISCO — MOTORISTAS
═══════════════════════════════════════════ */

/* ── Badge inline no card ── */
.score-inline-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.3rem;
    flex-wrap: wrap;
}

.score-mini {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem 0.15rem 0.4rem;
    border-radius: 6px;
    font-weight: 900;
    cursor: default;
    user-select: none;
    transition: opacity .15s;
}
.score-mini:hover { opacity: .85; }

.score-mini-letra {
    font-size: 0.75rem;
    line-height: 1;
}
.score-mini-pts {
    font-size: 0.7rem;
    font-weight: 700;
    opacity: .75;
}

/* Cores por grau */
.score-mini--a { background: rgba(26,158,139,.13); color: #1a9e8b; }
.score-mini--b { background: rgba(46,196,166,.13);  color: #1a9e8b; }
.score-mini--c { background: rgba(255,184,77,.15);  color: #c8860a; }
.score-mini--d { background: rgba(244,91,105,.1);   color: #e05060; }
.score-mini--e { background: rgba(244,91,105,.18);  color: var(--danger); }

/* Tooltip CSS puro */
.score-mini[data-tooltip] { cursor: help; }
.score-mini[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(18,19,26,.93);
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    padding: .4rem .7rem;
    border-radius: 7px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 50;
    opacity: 0;
    transition: opacity .15s;
    box-shadow: 0 4px 14px rgba(18,19,26,.25);
}
.score-mini[data-tooltip]::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(18,19,26,.93);
    pointer-events: none;
    z-index: 50;
    opacity: 0;
    transition: opacity .15s;
}
.score-mini[data-tooltip]:hover::after,
.score-mini[data-tooltip]:hover::before { opacity: 1; }

.score-alertas-text {
    font-size: .73rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-wrap: wrap;
}

/* Botão de score nas ações */
.action-btn--score {
    color: var(--brand) !important;
}
.action-btn--score:hover {
    background: rgba(108,92,231,.08) !important;
    border-color: rgba(108,92,231,.3) !important;
}

/* ── Modal ── */
.score-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 301;
    width: min(480px, 96vw);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(18,19,26,.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 92vh;
}

.score-modal-header {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1.1rem 1.25rem .9rem;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}
.score-modal-titulo { margin: 0 0 .1rem; font-size: .98rem; font-weight: 900; color: var(--ink); }
.score-modal-sub    { margin: 0; font-size: .75rem; color: var(--muted); }

.score-modal-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* Gauge principal */
.score-gauge-wrap {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.score-gauge {
    width: 6.5rem;
    height: 6.5rem;
    border-radius: 50%;
    border: 5px solid currentColor;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.score-gauge--a { border-color: #1a9e8b; color: #1a9e8b; }
.score-gauge--b { border-color: #2ec4a6; color: #2ec4a6; }
.score-gauge--c { border-color: #c8860a; color: #c8860a; }
.score-gauge--d { border-color: #e05060; color: #e05060; }
.score-gauge--e { border-color: var(--danger); color: var(--danger); }

.score-gauge-letra { font-size: 1.8rem; font-weight: 950; line-height: 1; }
.score-gauge-pts   { font-size: .7rem;  font-weight: 700; opacity: .7; margin-top: -.1rem; }
.score-gauge-label { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; opacity: .75; }

.score-barra-wrap { flex: 1; display: flex; flex-direction: column; gap: .5rem; }

.score-barra {
    height: 10px;
    background: #edf0f5;
    border-radius: 999px;
    overflow: hidden;
}
.score-barra-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .6s ease;
}
.score-barra-fill--a, .score-barra-fill--b { background: #2ec4a6; }
.score-barra-fill--c { background: var(--amber); }
.score-barra-fill--d { background: #e05060; }
.score-barra-fill--e { background: var(--danger); }

.score-barra-escala {
    display: flex;
    justify-content: space-between;
    font-size: .65rem;
    font-weight: 900;
}

/* Grid de fatores */
.score-fatores-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
}

.score-fator {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .7rem .85rem;
    border-radius: 10px;
    border: 1.5px solid var(--line);
}
.score-fator--ok    { background: rgba(46,196,166,.04); border-color: rgba(46,196,166,.2); }
.score-fator--alerta{ background: rgba(244,91,105,.04); border-color: rgba(244,91,105,.2); }

.score-fator-icon {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(0,0,0,.04);
    color: var(--muted);
}
.score-fator--alerta .score-fator-icon { color: var(--danger); background: rgba(244,91,105,.08); }
.score-fator-icon svg { width: .9rem; height: .9rem; }

.score-fator-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}
.score-fator-nome { font-size: .75rem; font-weight: 800; color: var(--ink); }
.score-fator-desc { font-size: .68rem; color: var(--muted); line-height: 1.3; }

.score-fator-pontos {
    font-size: .78rem;
    font-weight: 900;
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.score-fator-pontos--neg { color: var(--danger); }

/* Nota */
.score-nota {
    display: flex;
    gap: .45rem;
    font-size: .73rem;
    color: var(--muted);
    line-height: 1.45;
    background: #f8f9fc;
    border-radius: 8px;
    padding: .65rem .8rem;
}

.score-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
    padding: .85rem 1.25rem;
    border-top: 1px solid var(--line);
    background: #fafbfd;
    flex-shrink: 0;
}

@media (max-width: 520px) {
    .score-fatores-grid { grid-template-columns: 1fr; }
    .score-gauge-wrap   { flex-direction: column; align-items: flex-start; }
    .score-gauge        { width: 5.5rem; height: 5.5rem; }
    .score-modal-footer { flex-direction: column; }
    .score-modal-footer .btn-ghost,
    .score-modal-footer .btn-primary { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════
   CATEGORIAS DE VEÍCULO
═══════════════════════════════════════════ */

/* Linha do select + botão "Nova" */
.cat-select-wrap {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.cat-gerenciar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
    padding: 0.45rem 0.75rem;
    font-size: 0.78rem;
    flex-shrink: 0;
}

/* Popup inline */
.cat-popup {
    margin-top: 0.6rem;
    border: 1.5px solid rgba(190,46,221,0.25);
    border-radius: 10px;
    overflow: hidden;
    background: #fafbfd;
    animation: cat-popup-in 0.15s ease;
}

@keyframes cat-popup-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cat-popup-lista {
    display: flex;
    flex-direction: column;
    max-height: 190px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.cat-popup-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid var(--line);
    background: #fff;
    transition: background 0.12s;
}
.cat-popup-item:last-child { border-bottom: none; }
.cat-popup-item:hover { background: #f7f8fb; }
.cat-popup-item--editando { background: #f7f8fb; padding: 0.35rem 0.6rem; }

.cat-popup-nome {
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--ink);
    flex: 1;
}

.cat-popup-acoes {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.cat-popup-btn {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--muted);
    transition: all 0.15s;
}
.cat-popup-btn:hover { background: #f4f5f9; color: var(--ink); border-color: #c8cde0; }
.cat-popup-btn--danger:hover { background: rgba(244,91,105,.08); color: var(--danger); border-color: rgba(244,91,105,.3); }

.cat-popup-input {
    flex: 1;
    padding: 0.35rem 0.6rem;
    border: 1.5px solid rgba(190,46,221,0.35);
    border-radius: 7px;
    font-size: 0.82rem;
    color: var(--ink);
    outline: none;
    background: #fff;
    transition: border-color 0.15s;
    min-width: 0;
}
.cat-popup-input:focus { border-color: #be2edd; }
.cat-popup-input::placeholder { color: #b0b5c4; }

/* Rodapé de adição */
.cat-popup-add {
    display: flex;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
    background: rgba(190,46,221,0.04);
    border-top: 1px solid rgba(190,46,221,0.15);
    align-items: center;
}


/* ═══════════════════════════════════════════════════════════
   NAV LANDING — botão "Sou motorista"
═══════════════════════════════════════════════════════════ */

.nav-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-motorista {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border: 1.5px solid rgba(190,46,221,0.35);
    border-radius: 8px;
    color: #be2edd;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    background: rgba(190,46,221,0.06);
}
.nav-motorista svg {
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
}
.nav-motorista:hover {
    background: rgba(190,46,221,0.13);
    border-color: rgba(190,46,221,0.6);
}

@media (max-width: 680px) {
    .nav-motorista span { display: none; }
    .nav-motorista { padding: 0.45rem; border-radius: 8px; }
    .nav-motorista svg { width: 1.1rem; height: 1.1rem; }
}


/* ═══════════════════════════════════════════════════════════
   MOTORISTA — shell base (todas as telas /motorista/*)
═══════════════════════════════════════════════════════════ */

.moto-shell {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: #fff;
    max-width: 480px;
    margin: 0 auto;
    position: relative;
}

/* Cabeçalho compacto das sub-telas */
.moto-topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid #f0f1f5;
    flex-shrink: 0;
}
.moto-topbar-back {
    width: 2.2rem;
    height: 2.2rem;
    border: none;
    background: #f5f6fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    color: #12131a;
    transition: background 0.15s;
}
.moto-topbar-back:hover { background: #eaebf2; }
.moto-topbar-back svg { width: 1rem; height: 1rem; }
.moto-topbar-info { flex: 1; min-width: 0; }
.moto-topbar-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #12131a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.moto-topbar-sub {
    font-size: 0.72rem;
    color: #606575;
    margin-top: 0.1rem;
}

/* Barra de progresso de etapas */
.moto-steps {
    display: flex;
    gap: 0.3rem;
    padding: 0 1.25rem 0.9rem;
    flex-shrink: 0;
}
.moto-step-bar {
    height: 3px;
    flex: 1;
    border-radius: 99px;
    background: #eaebf2;
    transition: background 0.3s;
}
.moto-step-bar--active { background: #be2edd; }
.moto-step-bar--done   { background: rgba(190,46,221,0.35); }

/* Corpo scrollável */
.moto-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.25rem 2rem;
    display: flex;
    flex-direction: column;
}

/* Rodapé fixo com CTA */
.moto-footer {
    padding: 0.85rem 1.25rem 1.5rem;
    border-top: 1px solid #f0f1f5;
    flex-shrink: 0;
    background: #fff;
}
.moto-footer-safe { padding-bottom: env(safe-area-inset-bottom, 1.5rem); }

/* ── Botões ── */
.moto-btn-primary {
    width: 100%;
    padding: 0.95rem 1rem;
    background: #be2edd;
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: opacity 0.15s, transform 0.1s;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.moto-btn-primary:active { opacity: 0.85; transform: scale(0.98); }
.moto-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.moto-btn-primary svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }

.moto-btn-secondary {
    width: 100%;
    padding: 0.85rem 1rem;
    background: #f5f6fa;
    color: #12131a;
    border: 1.5px solid #e2e4ed;
    border-radius: 14px;
    font-size: 0.97rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background 0.15s;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.moto-btn-secondary:active { background: #eaebf2; }
.moto-btn-secondary svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }

.moto-btn-ghost {
    background: none;
    border: none;
    color: #be2edd;
    font-size: 0.87rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0.5rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* ═══════════════════════════════════════════════════════════
   TELA ENTRY — /motorista
═══════════════════════════════════════════════════════════ */

.moto-entry {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: #fff;
    max-width: 480px;
    margin: 0 auto;
}

.moto-entry-header {
    padding: 3rem 1.75rem 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.moto-entry-brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    margin-bottom: 2.5rem;
}
.moto-entry-brand .brand-mark {
    width: 2.2rem;
    height: 2.2rem;
    background: #be2edd;
    color: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 900;
}
.moto-entry-brand span:last-child {
    font-size: 1.1rem;
    font-weight: 900;
    color: #12131a;
}
.moto-entry-headline {
    font-size: clamp(1.6rem, 6vw, 2rem);
    font-weight: 950;
    line-height: 1.1;
    color: #12131a;
    margin: 0 0 0.6rem;
    letter-spacing: -0.02em;
}
.moto-entry-sub {
    font-size: 0.9rem;
    color: #606575;
    margin: 0;
    line-height: 1.5;
}

.moto-entry-body {
    flex: 1;
    padding: 2rem 1.75rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* Card de opção grande */
.moto-option-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.1rem;
    border: 1.5px solid #e2e4ed;
    border-radius: 16px;
    text-decoration: none;
    color: #12131a;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
    text-align: left;
}
.moto-option-card:active { transform: scale(0.98); background: #fafbfd; }
.moto-option-card--primary {
    background: linear-gradient(135deg, #be2edd 0%, #9b22b5 100%);
    border-color: transparent;
    color: #fff;
}
.moto-option-card--primary:active { opacity: 0.9; }

.moto-option-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 12px;
    background: rgba(190,46,221,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #be2edd;
}
.moto-option-card--primary .moto-option-icon {
    background: rgba(255,255,255,0.2);
    color: #fff;
}
.moto-option-icon svg { width: 1.4rem; height: 1.4rem; }

.moto-option-text { flex: 1; min-width: 0; }
.moto-option-title {
    font-size: 0.97rem;
    font-weight: 800;
    display: block;
    line-height: 1.2;
}
.moto-option-desc {
    font-size: 0.77rem;
    opacity: 0.75;
    display: block;
    margin-top: 0.25rem;
    line-height: 1.4;
}
.moto-option-card--primary .moto-option-desc { opacity: 0.8; }

.moto-option-arrow {
    opacity: 0.4;
    flex-shrink: 0;
}
.moto-option-card--primary .moto-option-arrow { opacity: 0.6; }
.moto-option-arrow svg { width: 1rem; height: 1rem; }

.moto-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #a0a5b5;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.moto-divider::before,
.moto-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e4ed;
}

.moto-entry-footer {
    padding: 1.5rem 1.75rem 2rem;
    text-align: center;
}
.moto-entry-footer a {
    font-size: 0.82rem;
    color: #606575;
    text-decoration: none;
}
.moto-entry-footer a span { color: #be2edd; font-weight: 700; }


/* ═══════════════════════════════════════════════════════════
   TELA QR SCANNER — /motorista/qr
═══════════════════════════════════════════════════════════ */

.moto-qr-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    gap: 1.5rem;
}

.moto-qr-frame-wrap {
    position: relative;
    width: min(260px, 70vw);
    aspect-ratio: 1;
}

.moto-qr-frame {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: #12131a;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Cantos do viewfinder */
.moto-qr-corner {
    position: absolute;
    width: 2.2rem;
    height: 2.2rem;
    border-color: #be2edd;
    border-style: solid;
    border-width: 0;
}
.moto-qr-corner--tl { top: 1rem; left: 1rem; border-top-width: 3px; border-left-width: 3px; border-top-left-radius: 4px; }
.moto-qr-corner--tr { top: 1rem; right: 1rem; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 4px; }
.moto-qr-corner--bl { bottom: 1rem; left: 1rem; border-bottom-width: 3px; border-left-width: 3px; border-bottom-left-radius: 4px; }
.moto-qr-corner--br { bottom: 1rem; right: 1rem; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 4px; }

/* Linha de scan animada */
.moto-qr-scanline {
    position: absolute;
    left: 1rem;
    right: 1rem;
    height: 2px;
    background: linear-gradient(90deg, transparent, #be2edd, transparent);
    border-radius: 99px;
    animation: qrScanMove 2s ease-in-out infinite;
}
@keyframes qrScanMove {
    0%   { top: 15%; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { top: 85%; opacity: 0; }
}

/* Placeholder câmera */
.moto-qr-camera-icon {
    color: rgba(255,255,255,0.15);
}
.moto-qr-camera-icon svg { width: 3rem; height: 3rem; }

/* Estado: QR lido com sucesso */
.moto-qr-frame--success { background: #0a1a0f; }
.moto-qr-success-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: #2ec4a6;
}
.moto-qr-success-icon svg { width: 2.5rem; height: 2.5rem; }
.moto-qr-success-icon span { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; }

.moto-qr-hint {
    font-size: 0.82rem;
    color: #606575;
    text-align: center;
    line-height: 1.5;
    max-width: 240px;
}

/* Card de resultado após scan */
.moto-qr-result-card {
    width: 100%;
    max-width: 340px;
    border: 1.5px solid #e2e4ed;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
}
.moto-qr-result-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    background: #fafbfd;
    border-bottom: 1px solid #f0f1f5;
}
.moto-qr-result-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(190,46,221,0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #be2edd;
    flex-shrink: 0;
}
.moto-qr-result-icon svg { width: 1.2rem; height: 1.2rem; }
.moto-qr-result-plate {
    font-size: 1rem;
    font-weight: 900;
    color: #12131a;
    letter-spacing: 0.05em;
}
.moto-qr-result-model {
    font-size: 0.75rem;
    color: #606575;
    margin-top: 0.1rem;
}
.moto-qr-result-rows {
    padding: 0.25rem 0;
}
.moto-qr-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid #f0f1f5;
    font-size: 0.82rem;
}
.moto-qr-result-row:last-child { border-bottom: none; }
.moto-qr-result-label { color: #606575; font-weight: 600; }
.moto-qr-result-value { color: #12131a; font-weight: 700; }
.moto-qr-status-ok {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #1a9e6e;
    font-weight: 700;
    font-size: 0.82rem;
}
.moto-qr-status-ok::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1a9e6e;
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════
   TELA SELECIONAR EMPRESA — /motorista/empresa
═══════════════════════════════════════════════════════════ */

.moto-search-wrap {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    padding: 0.75rem 1.25rem 0.5rem;
    border-bottom: 1px solid #f0f1f5;
    flex-shrink: 0;
}

.moto-search-field {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    background: #f5f6fa;
    border: 1.5px solid #e2e4ed;
    border-radius: 12px;
    transition: border-color 0.15s;
}
.moto-search-field:focus-within {
    border-color: #be2edd;
    background: #fff;
}
.moto-search-field svg { width: 1rem; height: 1rem; color: #a0a5b5; flex-shrink: 0; }
.moto-search-field input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.97rem;
    color: #12131a;
    outline: none;
    font-family: inherit;
}
.moto-search-field input::placeholder { color: #a0a5b5; }
.moto-search-clear {
    background: none;
    border: none;
    color: #a0a5b5;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
}
.moto-search-clear svg { width: 0.9rem; height: 0.9rem; }

/* Lista de resultados */
.moto-empresa-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 0;
}

.moto-empresa-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.95rem 1.25rem;
    border-bottom: 1px solid #f5f6fa;
    cursor: pointer;
    transition: background 0.12s;
    -webkit-tap-highlight-color: transparent;
    text-align: left;
    background: none;
    border-left: none;
    border-top: none;
    border-right: none;
    width: 100%;
}
.moto-empresa-item:active { background: #fafbfd; }
.moto-empresa-item:last-child { border-bottom: none; }

.moto-empresa-avatar {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 12px;
    background: rgba(190,46,221,0.1);
    color: #be2edd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 900;
    flex-shrink: 0;
    letter-spacing: -0.02em;
}

.moto-empresa-info { flex: 1; min-width: 0; }
.moto-empresa-nome {
    font-size: 0.92rem;
    font-weight: 800;
    color: #12131a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.moto-empresa-cidade {
    font-size: 0.75rem;
    color: #606575;
    margin-top: 0.15rem;
}
.moto-empresa-arrow { color: #c5c9d6; flex-shrink: 0; }
.moto-empresa-arrow svg { width: 0.9rem; height: 0.9rem; }

/* Estado vazio */
.moto-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    color: #a0a5b5;
    gap: 0.75rem;
}
.moto-empty-state svg { width: 2.5rem; height: 2.5rem; opacity: 0.4; }
.moto-empty-state p { font-size: 0.85rem; line-height: 1.5; margin: 0; }
.moto-empty-state strong { color: #606575; display: block; font-size: 0.92rem; margin-bottom: 0.2rem; }


/* ═══════════════════════════════════════════════════════════
   TELA SELECIONAR VEÍCULO — /motorista/veiculo
═══════════════════════════════════════════════════════════ */

.moto-empresa-context {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 1.25rem;
    background: rgba(190,46,221,0.06);
    border-bottom: 1px solid rgba(190,46,221,0.12);
    flex-shrink: 0;
}
.moto-empresa-context-icon {
    width: 2rem;
    height: 2rem;
    background: #be2edd;
    color: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 900;
    flex-shrink: 0;
}
.moto-empresa-context-name {
    font-size: 0.8rem;
    font-weight: 800;
    color: #be2edd;
}
.moto-empresa-context-label {
    font-size: 0.68rem;
    color: rgba(190,46,221,0.7);
    font-weight: 600;
    display: block;
}

.moto-veiculo-grid {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem 1.25rem;
}

.moto-veiculo-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    border: 1.5px solid #e2e4ed;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s, background 0.12s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
    text-align: left;
    width: 100%;
}
.moto-veiculo-card:active { transform: scale(0.99); background: #fafbfd; }
.moto-veiculo-card--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.moto-veiculo-card--selected {
    border-color: #be2edd;
    background: rgba(190,46,221,0.04);
}

.moto-veiculo-icon {
    width: 2.8rem;
    height: 2.8rem;
    background: #f5f6fa;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a0a5b5;
    flex-shrink: 0;
}
.moto-veiculo-card--selected .moto-veiculo-icon {
    background: rgba(190,46,221,0.1);
    color: #be2edd;
}
.moto-veiculo-icon svg { width: 1.2rem; height: 1.2rem; }

.moto-veiculo-info { flex: 1; min-width: 0; }
.moto-veiculo-plate {
    font-size: 0.9rem;
    font-weight: 900;
    color: #12131a;
    letter-spacing: 0.04em;
}
.moto-veiculo-model {
    font-size: 0.75rem;
    color: #606575;
    margin-top: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.moto-veiculo-status {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 99px;
    flex-shrink: 0;
}
.moto-veiculo-status::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}
.moto-veiculo-status--ok {
    background: rgba(30,180,120,0.12);
    color: #1a9e6e;
}
.moto-veiculo-status--ok::before { background: #1a9e6e; }
.moto-veiculo-status--uso {
    background: rgba(190,46,221,0.1);
    color: #9b22b5;
}
.moto-veiculo-status--uso::before { background: #be2edd; }
.moto-veiculo-status--manut {
    background: rgba(255,184,77,0.15);
    color: #b07600;
}
.moto-veiculo-status--manut::before { background: #ffb84d; }

.moto-veiculo-radio {
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid #dfe3ec;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s;
}
.moto-veiculo-card--selected .moto-veiculo-radio {
    border-color: #be2edd;
    background: #be2edd;
}
.moto-veiculo-radio-inner {
    width: 0.4rem;
    height: 0.4rem;
    background: #fff;
    border-radius: 50%;
}


/* ═══════════════════════════════════════════════════════════
   TELA IDENTIFICAÇÃO — /motorista/identificacao
═══════════════════════════════════════════════════════════ */

/* Card de contexto (empresa + veículo confirmados) */
.moto-context-card {
    background: #fafbfd;
    border: 1px solid #f0f1f5;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.moto-context-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #f0f1f5;
}
.moto-context-row:last-child { border-bottom: none; }
.moto-context-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.moto-context-icon--empresa { background: rgba(190,46,221,0.1); color: #be2edd; }
.moto-context-icon--veiculo { background: #f0f1f5; color: #606575; }
.moto-context-icon svg { width: 1rem; height: 1rem; }
.moto-context-label {
    font-size: 0.68rem;
    color: #a0a5b5;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: block;
}
.moto-context-value {
    font-size: 0.88rem;
    font-weight: 800;
    color: #12131a;
    display: block;
    margin-top: 0.05rem;
}

/* Formulário de identificação */
.moto-form-title {
    font-size: 1.1rem;
    font-weight: 900;
    color: #12131a;
    margin: 0 0 0.3rem;
    letter-spacing: -0.01em;
}
.moto-form-sub {
    font-size: 0.82rem;
    color: #606575;
    margin: 0 0 1.5rem;
    line-height: 1.45;
}

.moto-field {
    margin-bottom: 1rem;
}
.moto-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #606575;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.4rem;
}
.moto-field input {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1.5px solid #e2e4ed;
    border-radius: 12px;
    font-size: 1rem;
    font-family: inherit;
    color: #12131a;
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
    -webkit-appearance: none;
}
.moto-field input:focus { border-color: #be2edd; }
.moto-field input::placeholder { color: #c5c9d6; }
.moto-field input.input-error { border-color: #f45b69; }
.moto-field-error {
    font-size: 0.75rem;
    color: #f45b69;
    margin-top: 0.3rem;
    display: block;
}

/* Spinner botão */
.moto-btn-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ═══════════════════════════════════════════════════════════
   MOTORISTA — Código de acesso da empresa
═══════════════════════════════════════════════════════════ */

.moto-codigo-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 0 0;
    gap: 0.5rem;
}

.moto-codigo-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 16px;
    background: rgba(190,46,221,0.1);
    color: #be2edd;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
}
.moto-codigo-icon svg { width: 1.5rem; height: 1.5rem; }

.moto-codigo-icon--success {
    background: rgba(30,180,120,0.12);
    color: #1a9e6e;
}

.moto-codigo-titulo {
    font-size: 1.15rem;
    font-weight: 900;
    color: #12131a;
    margin: 0;
    letter-spacing: -0.01em;
}

.moto-codigo-sub {
    font-size: 0.83rem;
    color: #606575;
    margin: 0;
    line-height: 1.5;
    max-width: 280px;
}

/* Input de código — fonte maior, espaçamento monospace */
.moto-codigo-input {
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    text-align: center;
}

.moto-codigo-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    margin-top: 0.5rem;
    font-size: 0.73rem;
    color: #a0a5b5;
}

/* Card de confirmação da empresa */
.moto-empresa-confirm-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 2px solid rgba(190,46,221,0.3);
    border-radius: 16px;
    background: rgba(190,46,221,0.04);
    margin-top: 1.25rem;
}

.moto-empresa-confirm-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 12px;
    background: #be2edd;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 900;
    flex-shrink: 0;
    letter-spacing: -0.02em;
}

.moto-empresa-confirm-info { flex: 1; min-width: 0; }

.moto-empresa-confirm-nome {
    font-size: 0.97rem;
    font-weight: 800;
    color: #12131a;
}

.moto-empresa-confirm-cidade {
    font-size: 0.75rem;
    color: #606575;
    margin-top: 0.2rem;
}


/* ═══════════════════════════════════════════════════════════
   MOTORISTA — Checklist de saída
═══════════════════════════════════════════════════════════ */

/* Seção */
.ck-section {
    padding-bottom: 1.25rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #f0f1f5;
}

.ck-section-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.7rem;
    font-weight: 800;
    color: #a0a5b5;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.75rem;
}
.ck-section-title svg { width: 0.85rem; height: 0.85rem; flex-shrink: 0; }

/* Card de campo (km, finalidade, etc.) */
.ck-field-card {
    background: #fff;
    border: 1.5px solid #e2e4ed;
    border-radius: 14px;
    padding: 0.9rem 1rem 0.85rem;
    margin-bottom: 0.6rem;
    transition: border-color 0.15s;
}
.ck-field-card--error { border-color: #f45b69; }

.ck-field-label { margin-bottom: 0.6rem; }
.ck-field-nome {
    display: block;
    font-size: 0.9rem;
    font-weight: 800;
    color: #12131a;
}
.ck-field-desc {
    display: block;
    font-size: 0.73rem;
    color: #a0a5b5;
    margin-top: 0.15rem;
}
.ck-required { color: #be2edd; }
.ck-optional { font-size: 0.72rem; color: #a0a5b5; font-weight: 400; }

.ck-field-error-msg {
    display: block;
    font-size: 0.73rem;
    color: #f45b69;
    margin-top: 0.35rem;
}

/* Input KM */
.ck-km-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ck-km-input {
    flex: 1;
    padding: 0.75rem 0.9rem;
    border: 1.5px solid #e2e4ed;
    border-radius: 10px;
    font-size: 1.25rem;
    font-weight: 900;
    color: #12131a;
    font-family: inherit;
    outline: none;
    text-align: right;
    transition: border-color 0.15s;
    -webkit-appearance: none;
    max-width: 180px;
}
.ck-km-input:focus { border-color: #be2edd; }
.ck-km-input.ck-input-error { border-color: #f45b69; }
.ck-km-unit {
    font-size: 0.85rem;
    font-weight: 700;
    color: #a0a5b5;
}

/* Chips de finalidade */
.ck-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.ck-chip {
    padding: 0.45rem 0.85rem;
    border: 1.5px solid #e2e4ed;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #606575;
    background: #fff;
    cursor: pointer;
    transition: background 0.13s, border-color 0.13s, color 0.13s;
    -webkit-tap-highlight-color: transparent;
}
.ck-chip--active {
    background: rgba(190,46,221,0.08);
    border-color: #be2edd;
    color: #be2edd;
}

/* Input text genérico (destino, obs) */
.ck-obs-input {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1.5px solid #e2e4ed;
    border-radius: 10px;
    font-size: 0.93rem;
    font-family: inherit;
    color: #12131a;
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
    -webkit-appearance: none;
    box-sizing: border-box;
}
.ck-obs-input:focus { border-color: #be2edd; }

/* Card de item (inspeção) */
.ck-item-card {
    background: #fff;
    border: 1.5px solid #e2e4ed;
    border-radius: 14px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.55rem;
    transition: border-color 0.15s;
}
.ck-item-card--ok      { border-color: rgba(30,180,120,0.4); background: rgba(30,180,120,0.03); }
.ck-item-card--problema { border-color: rgba(244,91,105,0.4); background: rgba(244,91,105,0.03); }

.ck-item-info { margin-bottom: 0.65rem; }
.ck-item-nome {
    display: block;
    font-size: 0.9rem;
    font-weight: 800;
    color: #12131a;
}
.ck-item-desc {
    display: block;
    font-size: 0.73rem;
    color: #a0a5b5;
    margin-top: 0.12rem;
    line-height: 1.4;
}

/* Pills OK / Problema */
.ck-item-pills {
    display: flex;
    gap: 0.5rem;
}
.ck-pill {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.6rem 0.5rem;
    border-radius: 10px;
    font-size: 0.83rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.13s, border-color 0.13s, color 0.13s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
    border: 1.5px solid #e2e4ed;
    background: #f5f6fa;
    color: #a0a5b5;
}
.ck-pill:active { transform: scale(0.97); }
.ck-pill svg { width: 0.9rem; height: 0.9rem; flex-shrink: 0; }

.ck-pill--active-ok {
    background: rgba(30,180,120,0.1);
    border-color: rgba(30,180,120,0.5);
    color: #1a9e6e;
}
.ck-pill--active-prob {
    background: rgba(244,91,105,0.08);
    border-color: rgba(244,91,105,0.4);
    color: #e03a4a;
}

/* Área de observação (expansível) */
.ck-obs-expand {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid #f0f1f5;
}
.ck-obs-textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1.5px solid #e2e4ed;
    border-radius: 10px;
    font-size: 0.87rem;
    font-family: inherit;
    color: #12131a;
    background: #fff;
    outline: none;
    resize: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
    line-height: 1.45;
}
.ck-obs-textarea:focus { border-color: #be2edd; }
.ck-obs-textarea::placeholder { color: #c5c9d6; }

/* Combustível */
.ck-combustivel-row {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.1rem;
}
.ck-combustivel-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.55rem 0.3rem;
    border: 1.5px solid #e2e4ed;
    border-radius: 10px;
    background: #f5f6fa;
    cursor: pointer;
    transition: background 0.13s, border-color 0.13s;
    -webkit-tap-highlight-color: transparent;
}
.ck-combustivel-btn--active {
    background: rgba(190,46,221,0.08);
    border-color: #be2edd;
}
.ck-comb-icone {
    font-size: 0.85rem;
    line-height: 1;
    color: #a0a5b5;
    font-style: normal;
}
.ck-combustivel-btn--active .ck-comb-icone { color: #be2edd; }
.ck-comb-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: #a0a5b5;
    white-space: nowrap;
}
.ck-combustivel-btn--active .ck-comb-label { color: #be2edd; }

/* Resumo de pendências */
.ck-pendencias {
    background: #fff8f8;
    border: 1.5px solid rgba(244,91,105,0.3);
    border-radius: 14px;
    padding: 1rem;
    margin-top: 0.5rem;
}
.ck-pendencias-header {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.83rem;
    font-weight: 800;
    color: #e03a4a;
    margin-bottom: 0.65rem;
}
.ck-pendencias-header svg { width: 1rem; height: 1rem; flex-shrink: 0; }

.ck-pendencias-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.ck-pendencias-list li {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding-left: 0.75rem;
    border-left: 2.5px solid rgba(244,91,105,0.4);
}
.ck-pend-nome {
    font-size: 0.82rem;
    font-weight: 700;
    color: #12131a;
}
.ck-pend-obs {
    font-size: 0.73rem;
    color: #606575;
    line-height: 1.4;
}

.ck-pendencias-aviso {
    font-size: 0.73rem;
    color: #a0a5b5;
    margin: 0;
    line-height: 1.45;
}

/* Erro geral do checklist */
.ck-erro-geral {
    font-size: 0.78rem;
    color: #e03a4a;
    text-align: center;
    padding: 0.5rem 0 0.4rem;
    font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════
   MOTORISTA — Tela de confirmação (sucesso)
═══════════════════════════════════════════════════════════ */

.moto-confirmado-shell {
    justify-content: space-between;
}

.moto-confirmado-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1.75rem 1.5rem;
    text-align: center;
}

.moto-confirmado-icon {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #be2edd 0%, #9b22b5 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    box-shadow: 0 8px 24px rgba(190,46,221,0.3);
}
.moto-confirmado-icon svg { width: 1.8rem; height: 1.8rem; }

.moto-confirmado-titulo {
    font-size: 1.6rem;
    font-weight: 950;
    color: #12131a;
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}

.moto-confirmado-sub {
    font-size: 0.88rem;
    color: #606575;
    margin: 0 0 1.75rem;
    line-height: 1.5;
}

.moto-confirmado-card {
    width: 100%;
    border: 1px solid #e2e4ed;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    text-align: left;
    margin-bottom: 1rem;
}

.moto-confirmado-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid #f0f1f5;
}

.moto-confirmado-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #a0a5b5;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.moto-confirmado-value {
    font-size: 0.87rem;
    font-weight: 700;
    color: #12131a;
    text-align: right;
}

.moto-confirmado-alerta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem;
    background: rgba(255,184,77,0.1);
    border: 1px solid rgba(255,184,77,0.4);
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #8a6000;
    width: 100%;
    text-align: left;
}
.moto-confirmado-alerta svg { width: 1rem; height: 1rem; flex-shrink: 0; color: #ffb84d; }


/* ═══════════════════════════════════════════════════════════
   MOTORISTA — Seleção de tarefa
═══════════════════════════════════════════════════════════ */

.tarefa-instrucao {
    font-size: 0.82rem;
    color: #606575;
    margin: 0 0 1rem;
    line-height: 1.45;
}

.tarefa-grid {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.tarefa-card {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    padding: 1rem 1rem;
    border-radius: 16px;
    border: 1.5px solid #e2e4ed;
    background: #fff;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: border-color 0.15s, background 0.12s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}
.tarefa-card:active { transform: scale(0.99); }

.tarefa-card-icon {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tarefa-card-icon svg { width: 1.2rem; height: 1.2rem; }

.tarefa-card-text { flex: 1; min-width: 0; }
.tarefa-card-titulo {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    color: #12131a;
}
.tarefa-card-desc {
    display: block;
    font-size: 0.73rem;
    color: #a0a5b5;
    margin-top: 0.2rem;
    line-height: 1.35;
}

.tarefa-card-arrow { color: #c5c9d6; flex-shrink: 0; }
.tarefa-card-arrow svg { width: 0.9rem; height: 0.9rem; }

/* Variantes por tipo */
.tarefa-card--saida         { border-color: rgba(190,46,221,0.25); }
.tarefa-card--saida:active  { background: rgba(190,46,221,0.03); }
.tarefa-card--saida .tarefa-card-icon       { background: rgba(190,46,221,0.1); color: #be2edd; }

.tarefa-card--devolucao     { border-color: rgba(30,180,120,0.25); }
.tarefa-card--devolucao:active { background: rgba(30,180,120,0.03); }
.tarefa-card--devolucao .tarefa-card-icon   { background: rgba(30,180,120,0.1); color: #1a9e6e; }

.tarefa-card--abastecimento { border-color: rgba(59,130,246,0.25); }
.tarefa-card--abastecimento:active { background: rgba(59,130,246,0.03); }
.tarefa-card--abastecimento .tarefa-card-icon { background: rgba(59,130,246,0.1); color: #2563eb; }

.tarefa-card--manutencao    { border-color: rgba(255,184,77,0.35); }
.tarefa-card--manutencao:active { background: rgba(255,184,77,0.04); }
.tarefa-card--manutencao .tarefa-card-icon  { background: rgba(255,184,77,0.15); color: #b07600; }

.tarefa-card--ocorrencia    { border-color: rgba(244,91,105,0.25); }
.tarefa-card--ocorrencia:active { background: rgba(244,91,105,0.03); }
.tarefa-card--ocorrencia .tarefa-card-icon  { background: rgba(244,91,105,0.1); color: #e03a4a; }


/* ═══════════════════════════════════════════════════════════
   MOTORISTA — Layout dois campos lado a lado (ab/manut)
═══════════════════════════════════════════════════════════ */

.form-row-ab {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-bottom: 0;
}
.form-row-ab .ck-field-card { margin-bottom: 0; }


/* ═══════════════════════════════════════════════════════════
   MOTORISTA — Alerta crítico (ocorrência com vítimas)
═══════════════════════════════════════════════════════════ */

.ocor-alerta-critico {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 0.9rem;
    background: #fff0f0;
    border: 1.5px solid rgba(244,91,105,0.4);
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #c0293a;
    line-height: 1.45;
}
.ocor-alerta-critico svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: .05rem; color: #e03a4a; }


/* ═══════════════════════════════════════════════════════════
   EMPRESA — Aba "Acesso do motorista"
═══════════════════════════════════════════════════════════ */

.acesso-motorista-section {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-top: 0.25rem;
}

/* Banner explicativo */
.acesso-info-banner {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    background: rgba(190,46,221,0.05);
    border: 1px solid rgba(190,46,221,0.2);
    border-radius: 12px;
}
.acesso-info-icon {
    width: 2.2rem;
    height: 2.2rem;
    background: rgba(190,46,221,0.12);
    color: #be2edd;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: .1rem;
}
.acesso-info-icon svg { width: 1rem; height: 1rem; }
.acesso-info-texto strong {
    display: block;
    font-size: 0.85rem;
    font-weight: 800;
    color: #12131a;
    margin-bottom: .3rem;
}
.acesso-info-texto p {
    font-size: 0.8rem;
    color: #606575;
    margin: 0;
    line-height: 1.55;
}

/* Card principal do código */
.acesso-codigo-card {
    background: #fff;
    border: 1.5px solid #e2e4ed;
    border-radius: 16px;
    padding: 1.25rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.acesso-codigo-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.acesso-codigo-titulo {
    font-size: 0.92rem;
    font-weight: 800;
    color: #12131a;
    margin: 0 0 .15rem;
}
.acesso-codigo-sub {
    font-size: 0.75rem;
    color: #a0a5b5;
    margin: 0;
}

.acesso-status-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .7rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    flex-shrink: 0;
}
.acesso-status-badge--ativo {
    background: rgba(30,180,120,0.1);
    color: #1a9e6e;
}
.acesso-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1a9e6e;
}

/* Display do código */
.acesso-codigo-display {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: #f5f6fa;
    border: 1.5px solid #e2e4ed;
    border-radius: 12px;
    padding: .85rem 1rem;
}
.acesso-codigo-valor {
    flex: 1;
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: .18em;
    color: #12131a;
    font-family: ui-monospace, "Cascadia Code", "Fira Code", monospace;
}

.acesso-btn-copiar {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem .9rem;
    background: #fff;
    border: 1.5px solid #e2e4ed;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 700;
    color: #606575;
    cursor: pointer;
    transition: background .13s, border-color .13s, color .13s;
    white-space: nowrap;
    flex-shrink: 0;
}
.acesso-btn-copiar svg { width: .9rem; height: .9rem; }
.acesso-btn-copiar:hover { border-color: #be2edd; color: #be2edd; background: rgba(190,46,221,.04); }
.acesso-btn-copiar--ok { background: rgba(30,180,120,.08); border-color: rgba(30,180,120,.4); color: #1a9e6e; }

/* Ações secundárias */
.acesso-codigo-acoes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .75rem;
}
.acesso-btn-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: none;
    border: none;
    color: #be2edd;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
}
.acesso-btn-link svg { width: .85rem; height: .85rem; }
.acesso-btn-link:hover { text-decoration: underline; }

.acesso-btn-regen {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: none;
    border: none;
    color: #a0a5b5;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}
.acesso-btn-regen svg { width: .85rem; height: .85rem; }
.acesso-btn-regen:hover { color: #606575; }

.acesso-regen-confirm {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .6rem .85rem;
    background: #fff5f5;
    border: 1px solid rgba(244,91,105,.3);
    border-radius: 8px;
    font-size: .78rem;
    color: #606575;
    width: 100%;
}

.acesso-codigo-criado {
    font-size: .72rem;
    color: #c5c9d6;
    border-top: 1px solid #f0f1f5;
    padding-top: .6rem;
    margin-top: -.25rem;
}

/* Card QR */
.acesso-qr-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    background: #fafbfd;
    border: 1px solid #e2e4ed;
    border-radius: 12px;
}
.acesso-qr-icon {
    width: 2.2rem;
    height: 2.2rem;
    background: #f0f1f5;
    color: #606575;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: .1rem;
}
.acesso-qr-icon svg { width: 1rem; height: 1rem; }
.acesso-qr-texto strong {
    display: block;
    font-size: .85rem;
    font-weight: 800;
    color: #12131a;
    margin-bottom: .3rem;
}
.acesso-qr-texto p {
    font-size: .79rem;
    color: #606575;
    margin: 0;
    line-height: 1.55;
}

/* Stats de uso */
.acesso-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
}
.acesso-stat-card {
    background: #fff;
    border: 1px solid #e2e4ed;
    border-radius: 12px;
    padding: .9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.acesso-stat-valor {
    font-size: 1.15rem;
    font-weight: 900;
    color: #be2edd;
    line-height: 1;
}
.acesso-stat-label {
    font-size: .7rem;
    color: #a0a5b5;
    font-weight: 600;
    line-height: 1.3;
}

@media (max-width: 520px) {
    .acesso-codigo-valor { font-size: 1.35rem; }
    .acesso-stats-grid { grid-template-columns: 1fr 1fr; }
    .acesso-stats-grid .acesso-stat-card:last-child { grid-column: span 2; }
}


/* ═══════════════════════════════════════════════════════════
   UTILIZAÇÕES — Agrupamento Em aberto / Encerradas
═══════════════════════════════════════════════════════════ */

.util-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .6rem 0 .5rem;
    margin-bottom: .35rem;
}
.util-group-header--sep { margin-top: 1.75rem; }

.util-group-titulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    font-weight: 800;
    color: #12131a;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.util-group-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.util-group-dot--aberto     { background: #be2edd; box-shadow: 0 0 0 2px rgba(190,46,221,.2); }
.util-group-dot--encerradas { background: #1a9e6e; }

.util-group-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 .35rem;
    background: #f0f1f5;
    color: #606575;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
}

.util-group-alerta {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .15rem .5rem;
    background: rgba(244,91,105,.1);
    color: #e03a4a;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}
.util-group-alerta svg { width: .7rem; height: .7rem; }

.util-group-hint {
    font-size: .72rem;
    color: #a0a5b5;
    font-weight: 500;
}

/* Borda esquerda colorida nos cards em aberto */
.util-list--aberto .util-card--em-aberto {
    border-left: 3px solid rgba(190,46,221,.4);
}
.util-list--aberto .util-card--atrasado {
    border-left: 3px solid rgba(244,91,105,.6);
    background: rgba(244,91,105,.015);
}

/* Botão de encerrar — mais proeminente que icon-only */
.btn-encerrar-viagem {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .32rem .7rem;
    background: rgba(190,46,221,.08);
    border: 1.5px solid rgba(190,46,221,.35);
    border-radius: 8px;
    font-size: .75rem;
    font-weight: 700;
    color: #be2edd;
    cursor: pointer;
    transition: background .13s, border-color .13s;
    white-space: nowrap;
}
.btn-encerrar-viagem:hover {
    background: rgba(190,46,221,.15);
    border-color: rgba(190,46,221,.6);
}
.btn-encerrar-viagem svg { width: .8rem; height: .8rem; flex-shrink: 0; }

/* Cards atrasados — botão encerrar em vermelho */
.util-card--atrasado .btn-encerrar-viagem {
    background: rgba(244,91,105,.08);
    border-color: rgba(244,91,105,.4);
    color: #e03a4a;
}
.util-card--atrasado .btn-encerrar-viagem:hover {
    background: rgba(244,91,105,.15);
    border-color: rgba(244,91,105,.7);
}

/* ══════════════════════════════════════════
   ASSINATURA / PLANOS
══════════════════════════════════════════ */

/* Toggle Mensal / Anual */
.assinatura-periodo-toggle {
    display: inline-flex;
    background: var(--surface-alt, #f4f5f7);
    border-radius: 10px;
    padding: 4px;
    gap: 2px;
}
.assinatura-periodo-btn {
    padding: .45rem 1.4rem;
    border: none;
    border-radius: 7px;
    font-size: .88rem;
    font-weight: 500;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.assinatura-periodo-btn--active {
    background: #fff;
    color: var(--text);
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.assinatura-desconto-badge {
    background: #00b894;
    color: #fff;
    font-size: .68rem;
    font-weight: 600;
    padding: .1rem .4rem;
    border-radius: 20px;
    line-height: 1.4;
}

/* Grid de planos */
.assinatura-planos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-top: .5rem;
}

/* Card de plano */
.assinatura-card {
    position: relative;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 1.75rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: box-shadow .15s, border-color .15s;
}
.assinatura-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
.assinatura-card--destaque {
    border-color: #be2edd;
    box-shadow: 0 0 0 1px rgba(190,46,221,.15), 0 6px 24px rgba(190,46,221,.12);
}
.assinatura-card--current {
    border-color: #00b894;
    box-shadow: 0 0 0 1px rgba(0,184,148,.15);
}
.assinatura-card--enterprise {
    border-style: dashed;
    background: var(--surface-alt, #f8f9fc);
}

/* Badge do card */
.assinatura-card-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #be2edd;
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    padding: .2rem .8rem;
    border-radius: 20px;
    white-space: nowrap;
}
.assinatura-card-badge--current {
    background: #00b894;
}

/* Cabeçalho do card */
.assinatura-card-header { }
.assinatura-card-nome {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 .25rem;
}
.assinatura-card-desc {
    font-size: .82rem;
    color: var(--muted);
    margin: 0;
}

/* Preço */
.assinatura-card-preco {
    display: flex;
    align-items: baseline;
    gap: .3rem;
}
.assinatura-preco-valor {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}
.assinatura-preco-label {
    font-size: .85rem;
    color: var(--muted);
}
.assinatura-preco-anual-info {
    font-size: .78rem;
    color: var(--muted);
    margin-top: -.5rem;
}

/* Features do plano */
.assinatura-card-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex: 1;
}
.assinatura-card-features li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .84rem;
    color: var(--text);
}
.assinatura-card-features svg {
    width: .9rem;
    height: .9rem;
    color: #00b894;
    flex-shrink: 0;
}

/* Botão outline para planos não-destaque */
.btn-primary--outline {
    background: transparent;
    color: var(--primary, #be2edd);
    border: 1.5px solid var(--primary, #be2edd);
}
.btn-primary--outline:hover {
    background: rgba(190,46,221,.08);
}

/* Sidebar — badge de trial */
.sidebar-trial-badge {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: rgba(190,46,221,.08);
    border: 1px solid rgba(190,46,221,.2);
    border-radius: 8px;
    padding: .5rem .75rem;
    margin: .5rem .75rem;
    font-size: .78rem;
    color: #be2edd;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background .13s;
}
.sidebar-trial-badge:hover { background: rgba(190,46,221,.14); }
.sidebar-trial-badge svg { width: .85rem; height: .85rem; flex-shrink: 0; }

.sidebar-trial-badge--expired {
    background: rgba(244,91,105,.08);
    border-color: rgba(244,91,105,.25);
    color: #f45b69;
}
.sidebar-trial-badge--expired:hover { background: rgba(244,91,105,.14); }

@media (max-width: 768px) {
    .assinatura-planos-grid {
        grid-template-columns: 1fr;
    }
}