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

* {
    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;
}

/* ============================================================
   LANDING — Tema claro
   Fundo claro, cor da marca #6C5CE7, animações leves (CSS).
   Reveal on scroll: html.anim + [data-reveal] (js/landing.js).
   ============================================================ */

/* ---- Reveal on scroll (progressivo: sem JS, tudo visível) ---- */
html.anim [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0.6s ease var(--rd, 0s),
        transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) var(--rd, 0s);
}

html.anim [data-reveal].in-view {
    opacity: 1;
    transform: none;
}

/* ---- Hero (claro) ---- */
.hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(52rem 30rem at 85% -8%, rgba(108, 92, 231, 0.14), transparent 62%),
        radial-gradient(40rem 26rem at -12% 42%, rgba(46, 196, 166, 0.1), transparent 60%),
        linear-gradient(180deg, #fdfdff 0%, #f3f1fe 100%);
}

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

.hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    width: min(100%, 1120px);
    margin: 0 auto;
    padding: 6.8rem 1rem 4.2rem;
}

.landing-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(18, 19, 26, 0.07);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: box-shadow 0.25s ease;
}

.landing-nav.is-scrolled {
    box-shadow: 0 10px 30px rgba(18, 19, 26, 0.09);
}

.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,
.button-outline,
.button-soft,
.button-cta-light,
.button-cta-ghost {
    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-login {
    display: inline-flex;
    align-items: center;
    min-height: 2.8rem;
    padding: 0.6rem 0.7rem;
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 800;
    text-decoration: none;
    border-radius: 8px;
    transition: color 0.15s ease;
}

.nav-login:hover {
    color: var(--brand);
}

.nav-cta {
    color: #fff;
    background: var(--brand);
    box-shadow: 0 10px 24px rgba(108, 92, 231, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.nav-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(108, 92, 231, 0.38);
}

.hero-copy {
    max-width: 40rem;
}

/* .eyebrow: usado também em Auth/Contato (fundo escuro) — não alterar. */
.eyebrow {
    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;
}

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

.hero h1 {
    margin: 0.8rem 0 0;
    font-size: clamp(2.35rem, 8.5vw, 4.1rem);
    line-height: 1.04;
    font-weight: 950;
    letter-spacing: -0.015em;
    color: var(--ink);
}

.hero h1 em {
    font-style: normal;
    background: linear-gradient(100deg, var(--brand), #9b8cff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-copy p {
    max-width: 36rem;
    margin: 1.25rem 0 0;
    color: #454b5c;
    font-size: clamp(1.02rem, 3.4vw, 1.22rem);
    line-height: 1.55;
}

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

.button-primary {
    color: #fff;
    border: none;
    background: var(--brand);
    box-shadow: 0 18px 36px rgba(108, 92, 231, 0.34);
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.button-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 42px rgba(108, 92, 231, 0.42);
}

/* .button-secondary: usado na página de Contato (fundo escuro) — não alterar. */
.button-secondary {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.1);
}

.button-outline {
    color: var(--brand);
    border: 1.5px solid rgba(108, 92, 231, 0.45);
    background: rgba(255, 255, 255, 0.65);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.button-outline:hover {
    background: #fff;
    border-color: var(--brand);
    transform: translateY(-2px);
}

/* Ação terciária (ex.: "Falar com especialista"): mesma família dos botões,
   com peso visual menor para não competir com o CTA principal. */
.button-soft {
    gap: 0.5rem;
    color: var(--brand);
    background: var(--lav);
    border: 1px solid var(--lav-line);
    font-size: 0.95rem;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.button-soft:hover {
    background: #fff;
    border-color: rgba(108, 92, 231, 0.45);
    transform: translateY(-2px);
}

.button-soft svg {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
}

.button-glow {
    position: relative;
}

.button-glow::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
    border-radius: 12px;
    background: radial-gradient(60% 100% at 50% 100%, rgba(108, 92, 231, 0.45), transparent 70%);
    opacity: 0.5;
    animation: glow-breathe 3.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes glow-breathe {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.75; }
}

/* Bullets de benefício do hero: mesma .check-list da seção "Como funciona",
   só com divisor próprio para fechar a primeira dobra. O espaço acima vem do
   gap da .hero-inner — a lista é item do grid do hero, não da coluna de texto. */
.check-list--hero {
    gap: 0.7rem;
    margin-top: 0;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(18, 19, 26, 0.1);
}

.check-list--hero li {
    font-size: 0.97rem;
    font-weight: 650;
}

/* ---- Selo de trial no hero (tema claro) ---- */
.trial-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.trial-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 0.95rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(18, 19, 26, 0.1);
    color: #333846;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.1;
    box-shadow: 0 6px 16px rgba(18, 19, 26, 0.05);
}

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

.trial-badge--accent {
    background: var(--mint);
    border-color: var(--mint);
    color: #0c1f1a;
    font-weight: 900;
    box-shadow: 0 14px 30px rgba(46, 196, 166, 0.32);
}

.trial-badge--accent svg {
    color: #0c1f1a;
}

/* ---- Visual do hero (janela do produto + chips flutuantes) ---- */
.hero-visual {
    position: relative;
    display: none;
    align-self: center;
}

.hero-window {
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--lav-line);
    box-shadow: 0 40px 90px rgba(76, 63, 180, 0.22);
    overflow: hidden;
    animation: float-y 7s ease-in-out infinite;
}

.hero-window-bar {
    display: flex;
    gap: 0.4rem;
    padding: 0.65rem 0.85rem;
    background: #f6f6fb;
    border-bottom: 1px solid var(--lav-line);
}

.hero-window-bar i {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 50%;
    background: #dcdaf0;
}

.hero-window-bar i:first-child { background: #f4a6a6; }
.hero-window-bar i:nth-child(2) { background: #f7d491; }
.hero-window-bar i:nth-child(3) { background: #a5e3c8; }

.hero-window img {
    display: block;
    width: 100%;
    height: auto;
}

.hero-chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--lav-line);
    box-shadow: 0 18px 40px rgba(18, 19, 26, 0.14);
    font-size: 0.8rem;
    color: var(--muted);
    animation: float-y 6s ease-in-out infinite;
}

.hero-chip span {
    display: grid;
    gap: 0.1rem;
    line-height: 1.25;
}

.hero-chip strong {
    color: var(--ink);
    font-size: 0.84rem;
}

.hero-chip svg {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
}

.hero-chip--ok {
    top: -1.4rem;
    right: -0.9rem;
    animation-delay: 0.8s;
}

.hero-chip--ok svg { color: var(--mint); }

.hero-chip--alert {
    bottom: -1.3rem;
    left: -1.1rem;
    animation-delay: 1.9s;
}

.hero-chip--alert svg { color: var(--amber); }

@keyframes float-y {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}

/* ---- Estrutura das seções ---- */
.section-inner {
    width: min(100%, 1120px);
    margin: 0 auto;
    padding: 4.5rem 1rem;
}

.section-inner > h2,
.solution-band h2,
.features h2,
.impact h2,
.cta-section h2 {
    max-width: 46rem;
    margin: 0.7rem 0 0;
    font-size: clamp(1.9rem, 6.5vw, 3.2rem);
    line-height: 1.08;
    font-weight: 920;
    letter-spacing: -0.015em;
}

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

/* ---- Problema (claro) ---- */
.pain-strip {
    background: #fff;
}

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

.pain-grid article,
.feature-grid article {
    border-radius: 14px;
    padding: 1.35rem 1.25rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pain-grid article {
    border: 1px solid #eceef5;
    background: var(--paper);
}

.pain-grid article:hover,
.feature-grid article:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(18, 19, 26, 0.09);
    border-color: rgba(108, 92, 231, 0.35);
}

.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,
.cta-section p {
    margin: 0.7rem 0 0;
    color: var(--muted);
    line-height: 1.65;
}

/* ---- Solução / Como funciona ---- */
.solution-band {
    background: var(--lav);
}

.split-layout {
    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);
}

/* ---- Mockup do celular (mantido escuro de propósito: contraste) ---- */
.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(53, 42, 145, 0.24);
}

.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: 12%;
    height: 2px;
    background: var(--mint);
    box-shadow: 0 0 22px var(--mint);
    animation: scan-move 2.8s ease-in-out infinite;
}

@keyframes scan-move {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(11rem); }
}

.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;
}

/* Passos acendem em sequência (1 → 2 → 3, ciclo de 6s) */
.phone-flow .flow-step:nth-of-type(1) { animation: step-live 6s ease-in-out infinite; }
.phone-flow .flow-step:nth-of-type(2) { animation: step-live 6s ease-in-out 2s infinite; }
.phone-flow .flow-step:nth-of-type(3) { animation: step-live 6s ease-in-out 4s infinite; }

@keyframes step-live {
    0%, 38%, 100% {
        color: #a8adbc;
        border-color: #2a2f3e;
        background: #1d212d;
    }
    6%, 30% {
        color: #fff;
        border-color: rgba(108, 92, 231, 0.7);
        background: rgba(108, 92, 231, 0.22);
    }
}

/* ---- Como o motorista usa o QR ---- */
.qr-how {
    background: #fff;
}

.qr-lead {
    max-width: 44rem;
    margin: 1rem 0 0;
    color: var(--muted);
    line-height: 1.65;
}

.qr-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 2.2rem;
}

.qr-steps article {
    position: relative;
    padding: 1.4rem 1.2rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.qr-steps article:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(18, 19, 26, 0.09);
    border-color: rgba(108, 92, 231, 0.35);
}

.qr-step-num {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-weight: 900;
    font-size: 1.05rem;
    box-shadow: 0 10px 22px rgba(108, 92, 231, 0.3);
}

.qr-steps h3 {
    margin: 0.9rem 0 0;
    font-size: 1.1rem;
    font-weight: 850;
}

.qr-steps p {
    margin: 0.55rem 0 0;
    color: var(--muted);
    line-height: 1.6;
}

/* ---- Prints do sistema ---- */
.shot {
    margin: 2.6rem auto 0;
    text-align: center;
}

.shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    border: 1px solid var(--line);
    box-shadow: 0 24px 60px rgba(18, 19, 26, 0.16);
}

.shot figcaption {
    margin-top: 0.95rem;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.shot--mobile {
    max-width: 21rem;
}

.shot--mobile img {
    border-radius: 26px;
    border: 8px solid #0e1018;
    box-shadow: 0 30px 64px rgba(18, 19, 26, 0.26);
}

.shot--wide {
    max-width: 62rem;
}

/* Botão que embrulha o print (abre o visualizador com zoom — js/landing.js) */
.shot-zoom {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    position: relative;
    cursor: zoom-in;
    -webkit-tap-highlight-color: transparent;
}

.shot-zoom:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 6px;
    border-radius: 18px;
}

.shot-zoom-hint {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    background: rgba(18, 19, 26, 0.72);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    backdrop-filter: blur(4px);
    pointer-events: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.shot-zoom-hint svg {
    width: 15px;
    height: 15px;
}

.shot-zoom:hover .shot-zoom-hint {
    background: var(--brand);
    transform: translateY(-2px);
}

.shot--mobile .shot-zoom-hint {
    right: 1.1rem;
    bottom: 1.1rem;
}

/* ---- Visualizador de imagem com zoom (landing) ---- */
.imgview {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 11, 16, 0.94);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0s linear 0.18s;
    overscroll-behavior: contain;
    touch-action: none;
}

.imgview.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.18s ease;
}

.imgview-palco {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.imgview-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    transform-origin: center center;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
    cursor: zoom-in;
}

.imgview.is-zoom .imgview-img {
    cursor: grab;
}

.imgview.is-arrastando .imgview-img {
    cursor: grabbing;
}

.imgview-barra {
    position: absolute;
    left: 50%;
    bottom: max(1rem, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem;
    border-radius: 999px;
    background: rgba(28, 30, 40, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.imgview-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.imgview-btn svg {
    width: 20px;
    height: 20px;
}

.imgview-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.14);
}

.imgview-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.imgview-nivel {
    min-width: 3.2rem;
    text-align: center;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.imgview-fechar {
    position: absolute;
    top: max(0.9rem, env(safe-area-inset-top));
    right: 0.9rem;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    background: rgba(28, 30, 40, 0.92);
    color: #fff;
    cursor: pointer;
}

.imgview-fechar svg {
    width: 20px;
    height: 20px;
}

.imgview-dica {
    position: absolute;
    top: calc(max(0.9rem, env(safe-area-inset-top)) + 3.6rem);
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
    max-width: min(80vw, 26rem);
    text-align: center;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.78rem;
    line-height: 1.4;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.imgview.is-usado .imgview-dica {
    opacity: 0;
}

body.imgview-aberto {
    overflow: hidden;
}

@media (max-width: 600px) {
    .imgview-btn {
        width: 46px;
        height: 46px;
    }

    .imgview-dica {
        font-size: 0.72rem;
    }
}

/* ---- Recursos ---- */
.features {
    background: #f5f6fa;
}

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

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

.feature-icon {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 10px;
    color: var(--brand);
    background: rgba(108, 92, 231, 0.12);
    transition: transform 0.2s ease;
}

.feature-icon svg {
    width: 1.35rem;
    height: 1.35rem;
}

.feature-grid article:nth-child(2n) .feature-icon {
    color: #1f9d85;
    background: rgba(46, 196, 166, 0.14);
}

.feature-grid article:nth-child(3n) .feature-icon {
    color: #c77700;
    background: rgba(255, 184, 77, 0.18);
}

.feature-grid article:hover .feature-icon {
    transform: scale(1.1);
}

/* ---- Módulos inclusos ---- */
.modules-band {
    background: #fff;
}

.modules-lead {
    max-width: 44rem;
    margin: 1rem 0 0;
    color: var(--muted);
    line-height: 1.65;
}

.modules-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.modules-grid li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: #f8f7fe;
    border: 1px solid var(--lav-line);
    color: #2c3140;
    font-size: 0.92rem;
    font-weight: 750;
    line-height: 1.25;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.modules-grid li:hover {
    transform: translateY(-3px);
    border-color: rgba(108, 92, 231, 0.5);
    background: #f1edfe;
}

.modules-grid svg {
    flex-shrink: 0;
    width: 1.2rem;
    height: 1.2rem;
    color: var(--brand);
}

/* ---- Impacto / métricas ---- */
.impact {
    background: var(--paper);
}

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

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

.metric-wall div {
    padding: 1.15rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--lav-line);
    box-shadow: 0 10px 28px rgba(18, 19, 26, 0.05);
}

.metric-wall dt {
    font-size: clamp(1.9rem, 9vw, 3.1rem);
    line-height: 1;
    font-weight: 950;
    color: var(--brand);
}

.metric-wall dd {
    margin: 0.5rem 0 0;
    color: var(--muted);
    line-height: 1.45;
}

/* ---- Planos ---- */
.plans-band {
    background: var(--lav);
}

.plans-note {
    max-width: 44rem;
    margin: 1rem 0 0;
    color: var(--muted);
    line-height: 1.6;
}

.trial-banner {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 1.8rem 0 0;
    padding: 1.05rem 1.2rem;
    border-radius: 12px;
    background: rgba(46, 196, 166, 0.1);
    border: 1px solid rgba(46, 196, 166, 0.35);
}

.trial-banner svg {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--mint);
}

.trial-banner span {
    color: #2a3a36;
    font-size: 0.95rem;
    line-height: 1.5;
}

.trial-banner strong {
    color: var(--ink);
}

.plans-fallback {
    margin-top: 2rem;
    padding: 2rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--line);
    text-align: center;
}

.plans-fallback p {
    margin: 0 0 1.2rem;
    color: var(--muted);
    line-height: 1.6;
}

.plans-fallback .button-primary {
    width: min(100%, 18rem);
    margin: 0 auto;
}

.plan-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
    margin-top: 2rem;
}

.plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1.9rem 1.5rem 1.6rem;
    border-radius: 16px;
    background: #fff;
    border: 1.5px solid var(--line);
    transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.plan-card:hover {
    box-shadow: 0 18px 44px rgba(18, 19, 26, 0.1);
    transform: translateY(-3px);
}

.plan-card--featured {
    border-color: var(--brand);
    box-shadow: 0 0 0 1px rgba(108, 92, 231, 0.18), 0 22px 50px rgba(108, 92, 231, 0.18);
}

.plan-card--enterprise {
    border-style: dashed;
    background: #fbfbfe;
}

.plan-badge {
    position: absolute;
    top: -0.85rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.28rem 0.95rem;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(108, 92, 231, 0.35);
}

.plan-badge--trial {
    background: var(--mint);
    color: #0c1f1a;
    box-shadow: 0 8px 18px rgba(46, 196, 166, 0.35);
}

.plan-name {
    margin: 0.2rem 0 0;
    font-size: 1.2rem;
    font-weight: 850;
}

.plan-desc {
    margin: 0;
    min-height: 2.4rem;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.plan-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    margin-top: 0.3rem;
}

.plan-price-value {
    font-size: 2.2rem;
    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.plan-price-value--sm {
    font-size: 1.5rem;
}

.plan-price-unit {
    color: var(--muted);
    font-weight: 700;
}

.plan-price-note {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

.plan-price-note strong {
    color: var(--ink);
}

.plan-features {
    display: grid;
    gap: 0.6rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
    flex: 1;
}

.plan-features li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #2c3140;
    font-size: 0.9rem;
}

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

.plan-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.9rem;
    margin-top: 1.1rem;
    border-radius: 9px;
    padding: 0.78rem 1rem;
    text-decoration: none;
    font-weight: 800;
    color: #fff;
    background: var(--brand);
    box-shadow: 0 14px 30px rgba(108, 92, 231, 0.28);
    transition: filter 0.15s ease, background 0.15s ease;
}

.plan-cta:hover {
    filter: brightness(1.05);
}

.plan-cta--outline {
    color: var(--brand);
    background: #fff;
    border: 1.5px solid var(--brand);
    box-shadow: none;
}

.plan-cta--outline:hover {
    background: rgba(108, 92, 231, 0.07);
    filter: none;
}

/* ---- FAQ ---- */
.faq-band {
    background: #f5f6fa;
}

.faq-list {
    display: grid;
    gap: 0.75rem;
    max-width: 46rem;
    margin-top: 2rem;
}

.faq-list details {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-list details:hover {
    border-color: rgba(108, 92, 231, 0.4);
}

.faq-list details[open] {
    border-color: rgba(108, 92, 231, 0.5);
    box-shadow: 0 14px 34px rgba(18, 19, 26, 0.07);
}

.faq-list summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 1.05rem 1.15rem;
    font-weight: 800;
    font-size: 0.98rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary i {
    position: relative;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: rgba(108, 92, 231, 0.12);
    transition: transform 0.25s ease, background 0.25s ease;
}

.faq-list summary i::before,
.faq-list summary i::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.7rem;
    height: 2px;
    border-radius: 2px;
    background: var(--brand);
    transform: translate(-50%, -50%);
}

.faq-list summary i::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq-list details[open] summary {
    color: var(--brand);
}

.faq-list details[open] summary i {
    transform: rotate(45deg);
}

.faq-list details p {
    margin: 0;
    padding: 0 1.15rem 1.15rem;
    color: var(--muted);
    line-height: 1.6;
    animation: faq-in 0.28s ease;
}

.faq-list details p a {
    color: var(--brand);
    font-weight: 750;
}

@keyframes faq-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.faq-more {
    margin: 1.6rem 0 0;
    color: var(--muted);
    line-height: 1.6;
}

.faq-more a {
    color: var(--brand);
    font-weight: 800;
}

/* ---- CTA final (gradiente da marca) ---- */
.cta-section {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, #7263ea 0%, #5546cf 55%, #40339f 100%);
}

.cta-section::before {
    content: "";
    position: absolute;
    top: -14rem;
    right: -8rem;
    width: 34rem;
    height: 34rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 65%);
    animation: float-y 9s ease-in-out infinite;
    pointer-events: none;
}

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

.cta-section .section-kicker {
    color: #cfc8ff;
}

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

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

.button-cta-light {
    color: var(--brand-dark);
    background: #fff;
    box-shadow: 0 18px 38px rgba(18, 12, 60, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.button-cta-light:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 44px rgba(18, 12, 60, 0.38);
}

.button-cta-ghost {
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.08);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.button-cta-ghost:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.75);
}

/* ---- Footer (mantido escuro: fechamento da página) ---- */
.footer {
    background: #090b11;
    color: #fff;
}

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

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-top: 3rem;
    padding-bottom: 2.4rem;
}

.footer-brand {
    display: grid;
    gap: 0.9rem;
    align-content: start;
}

.footer-brand > span {
    max-width: 24rem;
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.6;
}

.footer-instagram {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    color: #fff;
    font-weight: 750;
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

.footer-instagram:hover {
    opacity: 1;
}

.footer-instagram svg {
    width: 1.15rem;
    height: 1.15rem;
}

.footer-whatsapp svg {
    color: #25D366;
}

.footer-col {
    display: grid;
    gap: 0.7rem;
    align-content: start;
}

.footer-col h4 {
    margin: 0 0 0.2rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.footer-col a {
    color: rgba(255, 255, 255, 0.74);
    text-decoration: none;
    font-size: 0.94rem;
    transition: color 0.15s ease;
}

.footer-col a:hover {
    color: #fff;
}

.footer-bottom {
    display: grid;
    gap: 0.6rem;
    padding-top: 1.3rem;
    padding-bottom: 1.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom span,
.footer-bottom a {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.86rem;
    text-decoration: none;
}

.footer-bottom a:hover {
    color: #fff;
}

/* ---- Pulso do botão flutuante do WhatsApp ---- */
@keyframes wa-pulse {
    0%, 100% {
        box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45), 0 0 0 0 rgba(37, 211, 102, 0.35);
    }
    50% {
        box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45), 0 0 0 12px rgba(37, 211, 102, 0);
    }
}

/* ---- Responsivo da landing ---- */
@media (max-width: 560px) {
    .nav-cta-extra {
        display: none;
    }

    .nav-cta {
        min-height: 2.5rem;
        padding: 0.6rem 0.75rem;
        font-size: 0.88rem;
    }

    .nav-login {
        padding: 0.55rem 0.5rem;
        font-size: 0.88rem;
    }
}

/* Telas bem estreitas: some o nome "Cofauto" (a marca "C" fica),
   liberando espaço para os três botões com rótulo legível. */
@media (max-width: 430px) {
    .landing-nav {
        gap: 0.5rem;
    }

    .landing-nav .brand > span:not(.brand-mark) {
        display: none;
    }

    .nav-right {
        gap: 0.4rem;
    }
}

@media (max-width: 380px) {
    .nav-motorista { padding: 0.5rem 0.5rem; font-size: 0.78rem; }
    .nav-login { padding: 0.5rem 0.3rem; font-size: 0.82rem; }
    .nav-cta { padding: 0.55rem 0.6rem; font-size: 0.82rem; }
}

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

    /* Ocupa a linha de baixo inteira, mas com largura do conteúdo:
       a dupla de CTAs principais continua sendo o bloco dominante. */
    .hero-actions .button-soft {
        grid-column: 1 / -1;
        justify-self: start;
        padding-left: 1.1rem;
        padding-right: 1.3rem;
    }

    /* Duas colunas a partir do tablet: os 4 benefícios cabem na primeira dobra
       sem empurrar os CTAs para baixo. */
    .check-list--hero {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1.5rem;
    }

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

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

    .qr-steps {
        grid-template-columns: 1fr 1fr;
    }

    .cta-actions {
        grid-template-columns: auto auto;
        justify-content: start;
    }

    .footer-bottom {
        grid-template-columns: 1fr auto;
        align-items: center;
    }
}

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

    .nav-links {
        display: flex;
        align-items: center;
        gap: 1.4rem;
        color: #3a3f4e;
        font-size: 0.92rem;
        font-weight: 750;
    }

    .nav-links a {
        text-decoration: none;
        transition: color 0.15s ease;
    }

    .nav-links a:hover {
        color: var(--brand);
    }

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

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

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

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

    .qr-steps {
        grid-template-columns: repeat(4, 1fr);
    }

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

    .footer-grid {
        grid-template-columns: 1.6fr 1fr 1fr 1fr;
        gap: 2.5rem;
    }
}

@media (min-width: 900px) {
    .modules-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1040px) {
    .hero-inner {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        align-items: center;
        column-gap: 3.5rem;
        row-gap: 2.4rem;
        padding-top: 8rem;
        padding-bottom: 5.5rem;
    }

    .hero-visual {
        display: block;
    }

    /* O H1 é dimensionado para a largura da tela, mas vive numa coluna de ~550px:
       em 4.1rem a manchete quebrava em 7 linhas e empilhava tudo à esquerda. */
    .hero h1 {
        font-size: 3.3rem;
        letter-spacing: -0.02em;
    }

    .hero-copy p {
        max-width: 32rem;
    }

    /* Botões do tamanho do próprio texto, em vez de presos a 25rem:
       sem isso "Começar grátis agora" quebrava em duas linhas. */
    .hero-actions {
        width: auto;
        grid-template-columns: auto auto;
        justify-content: start;
        margin-top: 1.9rem;
    }

    /* Faixa de benefícios atravessando as duas colunas, em 4 partes. */
    .check-list--hero {
        grid-column: 1 / -1;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 1.75rem;
        padding-top: 1.7rem;
    }

    .plan-grid {
        grid-template-columns: repeat(4, 1fr);
        align-items: start;
    }

    /* Em 4 colunas o card fica estreito: preço menor e sem quebra de linha. */
    .plan-price-value {
        font-size: 1.85rem;
    }
}

/* ---- Acessibilidade: reduz movimento ---- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    html.anim [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .hero-window,
    .hero-chip,
    .cta-section::before,
    .scan-frame::after,
    .phone-flow .flow-step,
    .button-glow::after,
    .whatsapp-float {
        animation: none !important;
    }
}
/* ============================================================
   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;
}

/* ---- 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;
    height: 100dvh;
    overflow: hidden;
    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 {
    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);
}

/* Collapsed: centraliza o botão de expandir, esconde a brand */
.sidebar--collapsed .sidebar-header {
    padding: 0;
    justify-content: center;
}

.sidebar--collapsed .sidebar-brand {
    display: none;
}

/* ── 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;
    min-height: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /*
     * Indicadores de scroll via background em camadas:
     * — camadas "local" movem com o conteúdo e cobrem o indicador quando já está na borda
     * — camadas "scroll" ficam fixas no elemento e formam o fade visível
     * Resultado: indicador aparece apenas quando há itens ocultos
     */
    background:
        linear-gradient(var(--sidebar-bg) 20%, transparent)             top    / 100% 40px no-repeat local,
        linear-gradient(transparent, var(--sidebar-bg) 80%)             bottom / 100% 40px no-repeat local,
        linear-gradient(to bottom, rgba(255,255,255,0.14), transparent) top    / 100% 40px no-repeat scroll,
        linear-gradient(to top,    rgba(255,255,255,0.14), transparent) bottom / 100% 40px no-repeat scroll;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

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

.nav-group-label {
    display: block;
    flex-shrink: 0;
    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 {
    flex-shrink: 0;
    height: 1px;
    background: var(--sidebar-border);
    margin: 0.4rem 0.5rem;
}

.nav-item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    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-item--disabled {
    pointer-events: none;
    opacity: 0.38;
    cursor: not-allowed;
}

.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; }

/* ── Trial / plano badge no sidebar ── */
.sidebar-trial-badge {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background: rgba(190, 46, 221, 0.12);
    color: #6C5CE7;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    margin: 0.25rem 0;
    border: 1px solid rgba(190, 46, 221, 0.22);
    transition: background 0.15s;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-trial-badge:hover { background: rgba(190, 46, 221, 0.22); }

.sidebar-trial-badge svg {
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
}

.sidebar-trial-badge--expired {
    background: rgba(244, 91, 105, 0.12);
    color: #f45b69;
    border-color: rgba(244, 91, 105, 0.22);
}

.sidebar-trial-badge--expired:hover { background: rgba(244, 91, 105, 0.22); }

/* ── App main area ── */
.app-main {
    display: flex;
    flex-direction: column;
    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);
}

/* ── Notificações — wrapper + painel ── */
.notif-wrapper {
    position: relative;
}

.notif-overlay {
    position: fixed;
    inset: 0;
    z-index: 199;
}

.notif-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    max-height: 420px;
    background: #fff;
    border: 1px solid #e8eaf0;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    z-index: 200;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem 0.7rem;
    border-bottom: 1px solid #f0f1f5;
    flex-shrink: 0;
}

.notif-panel-title {
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--ink);
}

.notif-limpar-btn {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--brand);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.15s;
}
.notif-limpar-btn:hover { opacity: 0.7; }

.notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    color: var(--muted);
    font-size: 0.82rem;
}
.notif-empty svg { width: 2rem; height: 2rem; opacity: 0.4; }

.notif-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 0;
    border-bottom: 1px solid #f5f6fa;
    transition: background 0.12s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: #fafbff; }
.notif-item--lida { opacity: 0.65; }

.notif-item-body {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 0.5rem 0.75rem 1rem;
    cursor: pointer;
    flex: 1;
    min-width: 0;
}

.notif-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand);
    flex-shrink: 0;
    margin-top: 5px;
}

.notif-item-content {
    min-width: 0;
    flex: 1;
}

.notif-item-titulo {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 0.18rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notif-item-msg {
    font-size: 0.75rem;
    color: var(--muted);
    margin: 0 0 0.3rem;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Notificação expandida via "Ver mais": remove o corte e mostra o texto completo */
.notif-item-msg--expandido {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
}

.notif-vermais-btn {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--brand);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0 0 0.3rem;
    text-align: left;
    transition: opacity 0.15s;
}
.notif-vermais-btn:hover { opacity: 0.7; }

.notif-item-tempo {
    font-size: 0.68rem;
    color: #b0b4c4;
    font-weight: 600;
}

.notif-excluir-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 100%;
    min-height: 3.2rem;
    flex-shrink: 0;
    background: none;
    border: none;
    color: #c0c4d0;
    cursor: pointer;
    padding: 0 0.5rem;
    transition: color 0.15s;
}
.notif-excluir-btn:hover { color: var(--danger); }
.notif-excluir-btn svg { width: 0.8rem; height: 0.8rem; }

@media (max-width: 480px) {
    .notif-panel {
        right: -0.5rem;
        width: calc(100vw - 1rem);
        max-width: 340px;
    }
}

/* ── App content area ── */
.app-content {
    flex: 1;
    min-height: 0;
    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,
.dash-row-inatividade {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}

/* ── Cards "parados" (mais tempo sem lançamento) ── */
.inativ-list { display: flex; flex-direction: column; gap: 0.5rem; }

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

.inativ-avatar {
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 9px;
    background: rgba(108, 92, 231, 0.12);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.inativ-plate {
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 9px;
    background: #11131b;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.inativ-plate svg { width: 1.05rem; height: 1.05rem; }

.inativ-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}
.inativ-info strong {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inativ-info span {
    font-size: 0.74rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inativ-tempo {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.74rem;
    font-weight: 800;
    white-space: nowrap;
    cursor: default;
}
.inativ-tempo svg { width: 0.82rem; height: 0.82rem; flex-shrink: 0; }

.inativ-tempo--ok    { color: #1a9e8b; }
.inativ-tempo--warn  { color: #c8860a; }
.inativ-tempo--alert { color: var(--danger); }
.inativ-tempo--none  { color: var(--muted); }

/* ── 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-item--clickable { cursor: pointer; }
.trip-item--clickable:hover { border-color: var(--brand); background: #f4f2fe; }

.trip-status-line {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.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;
    }
    .dash-row-inatividade {
        grid-template-columns: 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; }

/* ── Tempo desde o último lançamento ── */
.veiculo-atividade {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .4rem;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: default;
    width: fit-content;
}
.veiculo-atividade svg {
    width: .82rem;
    height: .82rem;
    flex-shrink: 0;
}

/* Lançamento recente — neutro/positivo */
.veiculo-atividade--ok    { color: #1a9e8b; }
/* Algumas semanas sem lançamento — atenção */
.veiculo-atividade--warn  { color: #c8860a; }
/* Muito tempo sem lançamento — alerta */
.veiculo-atividade--alert { color: var(--danger); }
/* Nunca houve lançamento — apenas informativo */
.veiculo-atividade--none  { color: var(--muted); }

/* ── 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); }

/* Estado desabilitado (sem permissão) — mantém a aparência inativa inclusive no hover */
.action-btn:disabled,
.action-btn:disabled:hover,
.action-btn--danger:disabled:hover {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f7f8fb;
    border-color: #e8eaf1;
    color: #c2c7d4;
}

/* ── 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;
}

.form-alert-success {
    padding: 0.75rem 0.9rem;
    border-radius: 8px;
    background: rgba(16,185,129,0.08);
    border: 1px solid rgba(16,185,129,0.25);
    color: #059669;
    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;
}

/* ── KPIs em cards (tela de Abastecimento) ── */
.abast-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
}

.abast-kpi-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    background: #fff;
    border: 1px solid #e8eaf0;
    border-radius: 14px;
    padding: 1rem 1.1rem;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.abast-kpi-card:hover {
    border-color: rgba(108, 92, 231, 0.28);
    box-shadow: 0 6px 18px rgba(108, 92, 231, 0.10);
    transform: translateY(-1px);
}

.abast-kpi-card--brand {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.10), rgba(108, 92, 231, 0.02));
    border-color: rgba(108, 92, 231, 0.25);
}

.abast-kpi-ico {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(108, 92, 231, 0.10);
    color: var(--brand);
}

.abast-kpi-ico svg { width: 1.05rem; height: 1.05rem; }

.abast-kpi-card--brand .abast-kpi-ico { background: rgba(108, 92, 231, 0.16); }

.abast-kpi-value {
    font-size: clamp(1.15rem, 2.6vw, 1.5rem);
    font-weight: 900;
    color: var(--ink);
    line-height: 1.1;
}

.abast-kpi-card--brand .abast-kpi-value { color: var(--brand); }

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

@media (max-width: 640px) {
    .abast-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
    .abast-kpi-card { padding: 0.85rem 0.9rem; }
}

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

/* ── Paginação ── */
.util-paginacao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1rem;
    margin-top: 1rem;
    padding: 0.75rem 0.9rem;
    background: #fff;
    border: 1px solid #e8eaf0;
    border-radius: 12px;
}

.util-pag-tamanho {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted);
}

.util-pag-select {
    padding: 0.32rem 0.55rem;
    border-radius: 8px;
    border: 1px solid #d8dce8;
    background: #fff;
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s;
}

.util-pag-select:hover { border-color: #c0c5d8; }
.util-pag-select:focus { outline: none; border-color: var(--brand); }

.util-pag-info {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}

.util-pag-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.util-pag-btn,
.util-pag-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    border-radius: 8px;
    border: 1px solid #d8dce8;
    background: #fff;
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
}

.util-pag-btn svg { width: 1rem; height: 1rem; }

.util-pag-btn:hover:not(:disabled),
.util-pag-num:hover:not(.util-pag-num--active) {
    background: #f4f5f9;
    border-color: #c0c5d8;
}

.util-pag-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.util-pag-num--active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    cursor: default;
}

.util-pag-ellipsis {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 1.5rem;
    color: var(--muted);
    font-weight: 700;
}

@media (max-width: 640px) {
    .util-paginacao { justify-content: center; }
    .util-pag-info { order: 3; width: 100%; text-align: center; }
}

/* ── Estados de carregamento da lista ── */
.util-list-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 3rem 1rem;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 600;
    background: #fff;
    border: 1px solid #e8eaf0;
    border-radius: 12px;
}

/* Dá um leve feedback enquanto a próxima página chega, sem sumir com o conteúdo. */
.util-list--loading {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.15s;
}

/* ── 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); }

/* Badge da condição de retorno (detalhe do gestor) */
.enc-item strong .util-cond-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}
.enc-item strong .util-cond-badge--ok     { background: rgba(46,196,166,0.12); color: #1a9e8b; }
.enc-item strong .util-cond-badge--alerta { background: rgba(244,91,105,0.1); color: var(--danger); }

.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);
}

/* ── Config de checklist (aba Empresa) ── */
.chk-cfg-section { padding-top: 0.25rem; }

.chk-cfg-loading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 2rem 1rem;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 600;
}

.chk-cfg-etapa { margin-bottom: 1.5rem; }

.chk-cfg-etapa-titulo {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--ink);
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #eceef4;
    margin-bottom: 0.75rem;
}

.chk-cfg-cat {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0.9rem 0 0.5rem;
}

.chk-cfg-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.7rem 0.85rem;
    background: #fff;
    border: 1px solid #e8eaf0;
    border-radius: 10px;
    margin-bottom: 0.5rem;
}

.chk-cfg-item-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 12rem;
    flex: 1;
}

.chk-cfg-item-nome {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ink);
}

.chk-cfg-item-desc {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.35;
}

.chk-cfg-badge {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--brand);
    background: rgba(108,92,231,0.1);
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
}

.chk-cfg-toggles {
    display: flex;
    gap: 1.25rem;
    flex-shrink: 0;
}

.chk-cfg-toggle {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--muted) !important;
}

@media (max-width: 640px) {
    .chk-cfg-toggles { gap: 0.5rem; width: 100%; flex-direction: column; }
}

/* ── Card clicável (abre detalhes) ── */
.util-card--clickable { cursor: pointer; }
.util-card--clickable:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.util-status-line {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Selo de problemas no card */
.util-prob-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: rgba(244,91,105,0.1);
    color: var(--danger);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.util-prob-badge svg { width: 0.8rem; height: 0.8rem; flex-shrink: 0; }

/* Chevron sutil indicando que o card abre */
.util-card-chevron {
    display: inline-flex;
    align-items: center;
    color: var(--muted);
    opacity: 0.5;
    transition: opacity 0.15s, transform 0.15s;
}

.util-card-chevron svg { width: 1.05rem; height: 1.05rem; }
.util-card--clickable:hover .util-card-chevron { opacity: 1; transform: translateX(2px); }

/* ── Drawer: detalhes (somente leitura) ── */
.util-det-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 2.5rem 1rem;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 600;
}

.util-det-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 1rem;
}

.util-det-ck-cat {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0.6rem 0 0.4rem;
}

.util-det-ck-item {
    padding: 0.55rem 0.7rem;
    background: #f8f9fc;
    border: 1px solid #e8eaf0;
    border-radius: 8px;
    margin-bottom: 0.4rem;
}

.util-det-ck-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.util-det-ck-nome {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink);
}

.util-det-ck-tag {
    flex-shrink: 0;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.util-det-ck-tag--ok   { background: rgba(46,196,166,0.12); color: #1a9e8b; }
.util-det-ck-tag--prob { background: rgba(244,91,105,0.12); color: var(--danger); }

.util-det-ck-obs {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.4;
    white-space: pre-wrap;
}

.util-det-obs {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ink);
    line-height: 1.5;
    white-space: pre-wrap;
}

/* ── Fotos anexadas pelo motorista (detalhe da utilização) ── */
.util-det-fotos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.util-det-foto {
    position: relative;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--paper);
    padding: 0;
    cursor: zoom-in;
    display: flex;
    align-items: center;
    justify-content: center;
}
.util-det-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.15s;
}
.util-det-foto:hover img { transform: scale(1.04); }

.util-foto-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(18,19,26,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    cursor: zoom-out;
}
.util-foto-overlay img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
    box-shadow: 0 18px 60px rgba(0,0,0,0.5);
}
.util-foto-overlay-fechar {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.14);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.util-foto-overlay-fechar svg { width: 18px; height: 18px; }

/* ── Galeria: wrapper com exclusão + cards de PDF ── */
.util-det-foto-wrap {
    position: relative;
    aspect-ratio: 1;
}
.util-det-foto-wrap .util-det-foto {
    width: 100%;
    height: 100%;
}
.util-det-foto--pdf {
    flex-direction: column;
    gap: 0.35rem;
    text-decoration: none;
    color: var(--brand);
    background: var(--lav);
    border-color: var(--lav-line);
    cursor: pointer;
}
.util-det-foto--pdf svg { width: 26px; height: 26px; }
.util-det-foto--carregando { pointer-events: none; }
.util-det-foto-pdf-label {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--muted);
}
.util-det-foto-wrap .ck-foto-remover { z-index: 2; }
.ck-foto-remover--confirmar {
    background: var(--danger);
    font-size: 0.8rem;
    font-weight: 900;
    color: #fff;
}

/* ── Uploader do gestor (drawers) ── */
.ck-foto-gestor { display: block; }
.ck-foto-thumb--pdf {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lav);
    border-color: var(--lav-line);
}
.ck-foto-pdf-icone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--brand);
}
.ck-foto-pdf-icone svg { width: 24px; height: 24px; }

/* ── 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; }
    .util-status-line { justify-content: flex-start; }
    .encerramento-resumo { grid-template-columns: 1fr; }
    .util-det-grid { 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; }
    .ocorr-card .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; }
    .ocorr-card .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; }
    .manut-card .veiculo-actions { grid-column: 5; grid-row: 1; }
}

@media (max-width: 520px) {
    .manut-card { grid-template-columns: 4px auto 1fr auto; }
    .manut-card .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; }
    .multa-card .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, #6C5CE7 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: #6C5CE7; color: #6C5CE7; }
.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: #6C5CE7;
    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: #6C5CE7;
    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: #6C5CE7;
    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: #6C5CE7;
}

.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, #6C5CE7 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: #6C5CE7; color: #6C5CE7; }
.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: #6C5CE7; 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: #6C5CE7; 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: #6C5CE7;
    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: #6C5CE7; }
.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); }

/* Aba desativada / em breve */
.config-nav-btn--soon { opacity: 0.65; }
.config-nav-soon-badge {
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
    color: var(--muted); background: #f0f1f5; border-radius: 999px; padding: 0.1rem 0.4rem;
}
.config-nav-btn--soon.config-nav-btn--active .config-nav-soon-badge { background: #f4eafc; color: #6C5CE7; }
@media (max-width: 640px) { .config-nav-soon-badge { display: none; } }

/* 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, #6C5CE7);
    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: #6C5CE7; }
.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: #6C5CE7; }
.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: #6C5CE7; }

/* 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 — expansor */
.config-log-expansor {
    padding: 0;
    overflow: hidden;
}
.config-log-expansor-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.85rem 1rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--ink);
    transition: background 0.15s;
}
.config-log-expansor-header:hover { background: var(--surface-alt, #f8f9fc); }
.config-log-expansor-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink);
    flex: 1;
}
.config-log-expansor-meta {
    font-size: 0.75rem;
    color: var(--muted);
    margin-right: 0.25rem;
}
.config-log-list {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0 1rem 0.85rem;
}
.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); }

/* Importação de dados */
.config-importacao-hero {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}
.config-importacao-icone {
    width: 2.5rem; height: 2.5rem; flex-shrink: 0;
    background: #f3e8fd;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #6C5CE7;
}
.config-importacao-icone svg { width: 1.15rem; height: 1.15rem; }
.config-importacao-titulo {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 0.2rem;
}
.config-importacao-steps {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: var(--surface-alt, #f8f9fc);
    border-radius: 8px;
}
.config-importacao-step {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.8rem;
    color: var(--ink);
    line-height: 1.4;
}
.config-importacao-num {
    width: 1.2rem; height: 1.2rem;
    border-radius: 50%;
    background: #6C5CE7;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-top: 0.05rem;
}

/* 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: #6C5CE7;
}

/* 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: #6C5CE7; }

.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: #6C5CE7;
    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: #6C5CE7 !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: #6C5CE7;
    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: #6C5CE7; 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: #6C5CE7;
    border-color: #6C5CE7;
}
.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: #6C5CE7 !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; }
}

/* ═══════════════════════════════════════════
   VEÍCULO — Modal de informações vinculadas
═══════════════════════════════════════════ */

/* Botão de detalhes na lista */
.action-btn--info:hover {
    background: rgba(108,92,231,0.07);
    border-color: rgba(108,92,231,0.3);
    color: var(--brand);
}

/* Badge de gravidade/risco em vermelho (reaproveitável) */
.status-badge--danger { background: rgba(244,91,105,0.12); color: var(--danger); }
.status-badge--danger::before { background: var(--danger); }

/* Spinner em tom da marca (fundo claro) */
.btn-spinner--brand {
    border: 2px solid rgba(108,92,231,0.25);
    border-top-color: var(--brand);
}

/* Painel */
.vd-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 301;
    width: min(680px, 96vw);
    max-height: 90vh;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(18,19,26,0.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Cabeçalho */
.vd-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.1rem 1.25rem 0.95rem;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(108,92,231,0.08), rgba(108,92,231,0) 62%);
}

.vd-header-veic {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.vd-plate { min-width: 5rem; }

.vd-header-info {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-width: 0;
}

.vd-header-info strong { font-size: 0.98rem; font-weight: 800; color: var(--ink); }
.vd-header-info > span { font-size: 0.78rem; color: var(--muted); }
.vd-status-badge { align-self: flex-start; margin-top: 0.1rem; }

/* Abas */
.vd-tabs {
    display: flex;
    gap: 0.15rem;
    padding: 0 0.75rem;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    flex-shrink: 0;
    background: #fff;
    scrollbar-width: thin;
}
.vd-tabs::-webkit-scrollbar { height: 4px; }
.vd-tabs::-webkit-scrollbar-thumb { background: #d6dae6; border-radius: 4px; }

.vd-tab {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.7rem 0.7rem;
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s;
}
.vd-tab:hover { color: var(--ink); }
.vd-tab--active {
    color: var(--brand);
    border-bottom-color: var(--brand);
    background: linear-gradient(to top, rgba(108,92,231,0.07), rgba(108,92,231,0));
}

.vd-tab-count {
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    padding: 0.18rem 0.4rem;
    border-radius: 999px;
    background: #f0f1f5;
    color: var(--muted);
    min-width: 1.15rem;
    text-align: center;
}
.vd-tab--active .vd-tab-count { background: rgba(108,92,231,0.12); color: var(--brand); }

/* Corpo */
.vd-body {
    padding: 1.1rem 1.25rem 1.35rem;
    overflow-y: auto;
    flex: 1;
}

.vd-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    color: var(--muted);
    font-size: 0.85rem;
}

/* Resumo */
.vd-resumo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 0.6rem;
}

/* Paleta por categoria (--cat = cor sólida, --cat-bg = tom suave) */
.vd-stat--documentos,     .vd-list--documentos     { --cat:#1971c2; --cat-bg:rgba(25,113,194,0.10); }
.vd-stat--utilizacoes,    .vd-list--utilizacoes    { --cat:#6c5ce7; --cat-bg:rgba(108,92,231,0.10); }
.vd-stat--abastecimentos, .vd-list--abastecimentos { --cat:#c8860a; --cat-bg:rgba(200,134,10,0.12); }
.vd-stat--ocorrencias,    .vd-list--ocorrencias    { --cat:#f45b69; --cat-bg:rgba(244,91,105,0.10); }
.vd-stat--manutencoes,    .vd-list--manutencoes    { --cat:#1a9e8b; --cat-bg:rgba(26,158,139,0.12); }
.vd-stat--custos,         .vd-list--custos         { --cat:#7950f2; --cat-bg:rgba(121,80,242,0.10); }
.vd-stat--multas,         .vd-list--multas         { --cat:#e8590c; --cat-bg:rgba(232,89,12,0.10); }

.vd-stat {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.12s, box-shadow 0.12s, transform 0.08s, background 0.12s;
}
.vd-stat:hover {
    border-color: var(--cat, var(--brand));
    background: var(--cat-bg, #faf9ff);
    box-shadow: 0 6px 18px rgba(18,19,26,0.07);
    transform: translateY(-1px);
}
.vd-stat:active { transform: scale(0.98); }

.vd-stat-icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 11px;
    background: var(--cat-bg, #f0f1f5);
    color: var(--cat, var(--muted));
    flex-shrink: 0;
}
.vd-stat-icon svg { width: 1.3rem; height: 1.3rem; }

.vd-stat-meta { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.vd-stat-num { font-size: 1.5rem; font-weight: 900; color: var(--ink); line-height: 1.05; }
.vd-stat-label { font-size: 0.74rem; font-weight: 700; color: var(--muted); }

.vd-kpis {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.6rem;
}

.vd-kpi {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 0.9rem;
    border-radius: 14px;
    background: var(--cat-bg, var(--paper));
    border: 1px solid transparent;
}
.vd-kpi--brand  { --cat:#6c5ce7; --cat-bg:rgba(108,92,231,0.09); }
.vd-kpi--danger { --cat:#f45b69; --cat-bg:rgba(244,91,105,0.09); }
.vd-kpi--amber  { --cat:#c8860a; --cat-bg:rgba(200,134,10,0.11); }

.vd-kpi-icon {
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 11px;
    background: #fff;
    color: var(--cat, var(--brand));
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(18,19,26,0.08);
}
.vd-kpi-icon svg { width: 1.15rem; height: 1.15rem; }

.vd-kpi-meta { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.vd-kpi-label { font-size: 0.68rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.vd-kpi-value { font-size: 1.2rem; font-weight: 900; color: var(--cat, var(--ink)); }

/* Listas por categoria */
.vd-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vd-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    box-shadow: inset 3px 0 0 var(--cat, transparent);
    transition: border-color 0.12s, box-shadow 0.12s;
}
.vd-item:hover {
    border-color: var(--cat, #c8cde0);
    box-shadow: inset 3px 0 0 var(--cat, transparent), 0 2px 10px rgba(18,19,26,0.05);
}

.vd-item-icon {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 9px;
    background: var(--cat-bg, #f0f1f5);
    color: var(--cat, var(--muted));
    flex-shrink: 0;
}
.vd-item-icon svg { width: 1.1rem; height: 1.1rem; }

.vd-item-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.vd-item-main strong {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vd-item-main span { font-size: 0.76rem; color: var(--muted); }

.vd-item-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
    flex-shrink: 0;
}
.vd-item-value { font-size: 0.9rem; font-weight: 800; color: var(--ink); white-space: nowrap; }

/* Vazio */
.vd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding: 2.75rem 1rem;
    text-align: center;
    color: var(--muted);
}
.vd-empty svg {
    width: 1.7rem;
    height: 1.7rem;
    color: var(--brand);
    padding: 0.9rem;
    box-sizing: content-box;
    background: rgba(108,92,231,0.09);
    border-radius: 50%;
}
.vd-empty p { margin: 0; font-size: 0.85rem; }

/* Mobile — tela cheia */
@media (max-width: 600px) {
    .vd-modal {
        top: 0; left: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }
    .vd-header { padding: 1rem 1rem 0.85rem; }
    .vd-tabs { padding: 0 0.5rem; }
    .vd-body { padding: 1rem; }
    .vd-resumo-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════
   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;
}

/* ── Tempo desde o último lançamento ── */
.motorista-atividade {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .3rem;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: default;
    width: fit-content;
}
.motorista-atividade svg {
    width: .82rem;
    height: .82rem;
    flex-shrink: 0;
}

/* Lançou recentemente — neutro/positivo */
.motorista-atividade--ok    { color: #1a9e8b; }
/* Algumas semanas sem lançar — atenção */
.motorista-atividade--warn  { color: #c8860a; }
/* Muito tempo sem lançar — alerta */
.motorista-atividade--alert { color: var(--danger); }
/* Nunca lançou nada — apenas informativo */
.motorista-atividade--none  { color: var(--muted); }

/* 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: #6C5CE7; }
.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;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.8rem;
    padding: 0.78rem 0.9rem;
    border: 1.5px solid rgba(108, 92, 231, 0.4);
    border-radius: 8px;
    color: var(--brand);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    background: rgba(108, 92, 231, 0.06);
}
.nav-motorista svg {
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
}
.nav-motorista:hover {
    background: rgba(108, 92, 231, 0.13);
    border-color: var(--brand);
}

/* No mobile o rótulo encurta para "Motorista" (nunca só o ícone). */
.nav-motorista-short {
    display: none;
}

@media (max-width: 680px) {
    .nav-motorista-full { display: none; }
    .nav-motorista-short { display: inline; }
    .nav-motorista { min-height: 2.5rem; padding: 0.55rem 0.65rem; font-size: 0.8rem; }
    .nav-motorista svg { width: 1rem; height: 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: #6C5CE7; }
.moto-step-bar--done   { background: rgba(108,92,231,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: #6C5CE7;
    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: #6C5CE7;
    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: #6C5CE7;
    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, #6C5CE7 0%, #5548c8 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(108,92,231,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #6C5CE7;
}
.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: #6C5CE7; 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: #6C5CE7;
    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, #6C5CE7, 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; }

/* Após ler o QR não há mais câmera: o conteúdo sobe e o CTA fica visível sem rolar. */
.moto-qr-area--lido {
    justify-content: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem 1.25rem;
}

/* Confirmação compacta (substitui o quadrado preto "LIDO") */
.moto-qr-lido {
    width: 100%;
    max-width: 340px;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.9rem;
    border-radius: 14px;
    background: rgba(46, 196, 166, 0.1);
    border: 1.5px solid rgba(46, 196, 166, 0.35);
    animation: motoQrLidoEntra 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.moto-qr-lido-check {
    width: 2.1rem;
    height: 2.1rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: #1a9e6e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.moto-qr-lido-check svg { width: 1.1rem; height: 1.1rem; }
.moto-qr-lido-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.moto-qr-lido-txt strong { font-size: 0.9rem; font-weight: 800; color: #12131a; }
.moto-qr-lido-txt span { font-size: 0.76rem; color: #606575; }

@keyframes motoQrLidoEntra {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

/* Chamada do próximo passo, logo acima do botão */
.moto-qr-proximo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: auto 0 0; /* encosta no rodapé quando sobra espaço */
    padding-top: 0.25rem;
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #606575;
    max-width: 320px;
}
.moto-qr-proximo strong { color: #6C5CE7; font-weight: 800; white-space: nowrap; }
.moto-qr-proximo svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: #6C5CE7;
    animation: motoSetaDesce 1.6s ease-in-out infinite;
}
@keyframes motoSetaDesce {
    0%, 100% { transform: translateY(-2px); }
    50%      { transform: translateY(2px); }
}

/* Rodapé colado na base: o CTA nunca sai da tela, mesmo em celular pequeno. */
.moto-footer--grudado {
    position: sticky;
    bottom: 0;
    z-index: 3;
    box-shadow: 0 -6px 20px rgba(18, 19, 26, 0.07);
}

/* CTA com destaque momentâneo, para o olho ir até ele após a leitura */
.moto-btn-primary--destaque {
    animation: motoCtaPulso 1.5s ease-out 2;
}
@keyframes motoCtaPulso {
    0%   { box-shadow: 0 0 0 0 rgba(108, 92, 231, 0.45); }
    70%  { box-shadow: 0 0 0 12px rgba(108, 92, 231, 0); }
    100% { box-shadow: 0 0 0 0 rgba(108, 92, 231, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .moto-qr-lido,
    .moto-qr-proximo svg,
    .moto-btn-primary--destaque { animation: none; }
}

.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(108,92,231,0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6C5CE7;
    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: #6C5CE7;
    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(108,92,231,0.1);
    color: #6C5CE7;
    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(108,92,231,0.06);
    border-bottom: 1px solid rgba(108,92,231,0.12);
    flex-shrink: 0;
}
.moto-empresa-context-icon {
    width: 2rem;
    height: 2rem;
    background: #6C5CE7;
    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: #6C5CE7;
}
.moto-empresa-context-label {
    font-size: 0.68rem;
    color: rgba(108,92,231,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: #6C5CE7;
    background: rgba(108,92,231,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(108,92,231,0.1);
    color: #6C5CE7;
}
.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(108,92,231,0.1);
    color: #5548c8;
}
.moto-veiculo-status--uso::before { background: #6C5CE7; }
.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: #6C5CE7;
    background: #6C5CE7;
}
.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(108,92,231,0.1); color: #6C5CE7; }
.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: #6C5CE7; }
.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 — Overlay de bloqueio (MotoristaLoadingOverlay)

   Cobre a viewport inteira e engole o clique enquanto a API responde
   ou enquanto o WebAssembly ainda está subindo. Evita o toque múltiplo
   do motorista em botão que ainda não respondeu.

   Só anima transform/opacity (composita na GPU) — sem layout/paint por
   frame e sem JS. Nada disso toca o servidor.
═══════════════════════════════════════════════════════════ */

.moto-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);

    /* O ponto do componente: capturar TODO evento de ponteiro. */
    pointer-events: all;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    cursor: progress;

    animation: motoLoadingFade 0.16s ease both;
}
@keyframes motoLoadingFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.moto-loading-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.15rem;
    padding: 0 2rem;
    text-align: center;
    /* Sobe um pouco do centro óptico: no celular o meio exato "cai". */
    transform: translateY(-4vh);
}

/* ── Marca "C" + anel orbitando ───────────────────────────── */
.moto-loading-mark-wrap {
    position: relative;
    width: 5.25rem;
    height: 5.25rem;
    display: grid;
    place-items: center;
}

.moto-loading-mark {
    position: relative;
    z-index: 1;

    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1.05rem;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #6C5CE7;
    color: #fff;
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1;
    /* Compensa o desenho do "C" da fonte, que não é opticamente centrado. */
    padding-bottom: 0.1rem;

    box-shadow: 0 14px 30px rgba(108, 92, 231, 0.34);
    animation: motoLoadingPulso 1.6s ease-in-out infinite;
}
@keyframes motoLoadingPulso {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.07); }
}

.moto-loading-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(108, 92, 231, 0.16);
    border-top-color: #6C5CE7;
    animation: spin 0.9s linear infinite;
}

/* ── Texto ────────────────────────────────────────────────── */
.moto-loading-texto {
    font-size: 1rem;
    font-weight: 800;
    color: #12131a;
    letter-spacing: -0.01em;
}

.moto-loading-sub {
    font-size: 0.8rem;
    font-weight: 500;
    color: #606575;
    max-width: 17rem;
    line-height: 1.4;
    margin-top: -0.5rem;
}

/* Pontinhos animados — o "…" fica vivo sem precisar de JS. */
.moto-loading-dots {
    display: inline-flex;
    gap: 0.14rem;
    margin-left: 0.12rem;
    vertical-align: baseline;
}
.moto-loading-dots i {
    width: 0.2rem;
    height: 0.2rem;
    border-radius: 50%;
    background: #6C5CE7;
    align-self: flex-end;
    margin-bottom: 0.18rem;
    animation: motoLoadingDot 1.2s ease-in-out infinite;
}
.moto-loading-dots i:nth-child(2) { animation-delay: 0.15s; }
.moto-loading-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes motoLoadingDot {
    0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
    30%           { opacity: 1;    transform: translateY(-0.16rem); }
}

/* ── Rede de segurança contra "tela congelada" ─────────────
   Revelado por animation-delay, sem JS: no pior cenário (runtime WebAssembly
   não sobe) nenhum C# roda no cliente, então um timer no componente nunca
   dispararia — CSS dispara igual, inclusive no HTML prerenderizado.

   Fica em position:absolute para não empurrar o bloco central enquanto está
   escondido: zero impacto no layout até aparecer.
*/
.moto-loading-lenta {
    position: absolute;
    left: 50%;
    bottom: calc(2.25rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);

    width: min(21rem, calc(100% - 2.5rem));
    box-sizing: border-box;
    padding: 0.85rem 1rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    text-align: center;

    background: #f7f7fa;
    border: 1px solid #eaebf2;
    border-radius: 14px;

    opacity: 0;
    visibility: hidden;
    animation: motoLoadingLenta 0.35s ease 7s forwards;
}
@keyframes motoLoadingLenta {
    to { opacity: 1; visibility: visible; }
}

.moto-loading-lenta-txt {
    font-size: 0.8rem;
    font-weight: 500;
    color: #606575;
    line-height: 1.45;
}

.moto-loading-lenta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 2.4rem;
    padding: 0 1.4rem;

    border-radius: 10px;
    background: #6C5CE7;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.moto-loading-lenta-btn:active { transform: scale(0.98); }
.moto-loading-lenta-btn:hover  { color: #fff; text-decoration: none; }

/* Acessibilidade: quem pediu menos movimento vê o overlay parado.
   O aviso de demora continua aparecendo — ele é informação, não enfeite. */
@media (prefers-reduced-motion: reduce) {
    .moto-loading-overlay,
    .moto-loading-mark,
    .moto-loading-ring,
    .moto-loading-dots i {
        animation: none;
    }
    .moto-loading-ring { border-top-color: rgba(108, 92, 231, 0.16); }
    .moto-loading-dots i { opacity: 0.55; }
    .moto-loading-lenta { animation-duration: 0.01s; }
}


/* ═══════════════════════════════════════════════════════════
   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(108,92,231,0.1);
    color: #6C5CE7;
    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(108,92,231,0.3);
    border-radius: 16px;
    background: rgba(108,92,231,0.04);
    margin-top: 1.25rem;
}

.moto-empresa-confirm-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 12px;
    background: #6C5CE7;
    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: #6C5CE7; }
.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: #6C5CE7; }
.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(108,92,231,0.08);
    border-color: #6C5CE7;
    color: #6C5CE7;
}

/* ── Card de fotos do checklist (perguntas tipo Foto) ── */
.ck-foto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}
.ck-foto-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    border: 1.5px solid #e2e4ed;
    background: #f4f5f9;
}
.ck-foto-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ck-foto-thumb--enviando img { opacity: 0.45; }
.ck-foto-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.ck-foto-remover {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: rgba(18,19,26,0.65);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
.ck-foto-remover svg { width: 12px; height: 12px; }

.ck-foto-add {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.8rem 0.9rem;
    border: 1.5px dashed #c9c3f2;
    border-radius: 10px;
    background: rgba(108,92,231,0.04);
    color: #6C5CE7;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.13s, border-color 0.13s;
}
.ck-foto-add:active { background: rgba(108,92,231,0.1); }
.ck-foto-add--disabled { opacity: 0.6; pointer-events: none; }
.ck-foto-add svg { width: 20px; height: 20px; flex-shrink: 0; }
.ck-foto-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.ck-foto-contador {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: #606575;
}

/* 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: #6C5CE7; }

/* 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: #6C5CE7; }
.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(108,92,231,0.08);
    border-color: #6C5CE7;
}
.ck-comb-icone {
    font-size: 0.85rem;
    line-height: 1;
    color: #a0a5b5;
    font-style: normal;
}
.ck-combustivel-btn--active .ck-comb-icone { color: #6C5CE7; }
.ck-comb-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: #a0a5b5;
    white-space: nowrap;
}
.ck-combustivel-btn--active .ck-comb-label { color: #6C5CE7; }

/* Resumo de pendências */
.ck-loading-perguntas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1.5rem 1rem;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 600;
}

.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, #6C5CE7 0%, #5548c8 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    box-shadow: 0 8px 24px rgba(108,92,231,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(108,92,231,0.25); }
.tarefa-card--saida:active  { background: rgba(108,92,231,0.03); }
.tarefa-card--saida .tarefa-card-icon       { background: rgba(108,92,231,0.1); color: #6C5CE7; }

.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; }

.tarefa-card--custo         { border-color: rgba(22,163,74,0.25); }
.tarefa-card--custo:active  { background: rgba(22,163,74,0.03); }
.tarefa-card--custo .tarefa-card-icon       { background: rgba(22,163,74,0.1); color: #15803d; }


/* ═══════════════════════════════════════════════════════════
   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.6rem;
}
.form-row-ab .ck-field-card { margin-bottom: 0; }

@media (max-width: 480px) {
    .form-row-ab { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════
   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: #6C5CE7;
    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: #6C5CE7; color: #6C5CE7; 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: #6C5CE7;
    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: #6C5CE7;
    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: #6C5CE7; 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: #6C5CE7;
    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: #6C5CE7;
    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: #6C5CE7;
    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, #6C5CE7);
    border: 1.5px solid var(--primary, #6C5CE7);
}
.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: #6C5CE7;
    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;
    }
}

/* ── Painel de resultado do checkout ── */
.checkout-result-panel {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    background: #fff;
    border: 1.5px solid rgba(190,46,221,.25);
    border-radius: 14px;
    padding: 1.75rem;
    margin-top: 2rem;
    box-shadow: 0 0 0 4px rgba(190,46,221,.05);
}
.checkout-result-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(190,46,221,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6C5CE7;
}
.checkout-result-icon svg {
    width: 1.15rem;
    height: 1.15rem;
}
.checkout-result-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.checkout-result-titulo {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.checkout-result-desc {
    font-size: .88rem;
    color: var(--muted);
    margin: 0;
}
.checkout-result-instrucao {
    font-size: .82rem;
    color: var(--muted);
    margin: 0;
    line-height: 1.5;
}
.checkout-result-acoes {
    display: flex;
    gap: .75rem;
    margin-top: .5rem;
    flex-wrap: wrap;
}
@media (max-width: 600px) {
    .checkout-result-panel {
        flex-direction: column;
        align-items: stretch;
    }
    .checkout-result-acoes {
        flex-direction: column;
    }
    .checkout-result-acoes .btn-primary,
    .checkout-result-acoes .btn-ghost {
        width: 100%;
        justify-content: center;
    }
}

/* ─────────────────────────────────────────
   Onboarding Card — Primeiros passos
   Visível apenas para cofautoapp@gmail.com
───────────────────────────────────────── */
.onboarding-card {
    background: #fff;
    border: 1px solid #e8eaf0;
    border-radius: 14px;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}

.onboarding-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), #6C5CE7);
}

.onboarding-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
}

.onboarding-title {
    margin: 0 0 .2rem;
    font-size: .97rem;
    font-weight: 800;
    color: var(--ink);
}

.onboarding-subtitle {
    margin: 0;
    font-size: .8rem;
    color: var(--muted);
}

.onboarding-progress-wrap {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-shrink: 0;
}

.onboarding-progress-bar {
    width: 110px;
    height: 6px;
    background: #e8eaf0;
    border-radius: 99px;
    overflow: hidden;
}

.onboarding-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--brand), #6C5CE7);
    border-radius: 99px;
}

.onboarding-progress-label {
    font-size: .75rem;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
}

/* ── Steps container ── */
.onboarding-steps {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    position: relative;
}

/* Linha de progresso horizontal (desktop) */
.onboarding-line {
    position: absolute;
    top: .875rem;
    left: 2rem;
    right: 2rem;
    height: 2px;
    background: var(--line);
    z-index: 0;
}
.onboarding-line-done {
    height: 100%;
    background: var(--brand);
    border-radius: 999px;
    transition: width .4s ease;
}

/* Individual step — desktop: coluna (circle em cima, texto embaixo) */
.onboarding-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .55rem;
    flex: 1;
    position: relative;
    z-index: 1;
    padding: 0 .5rem;
}

.onboarding-step-circle {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 800;
    flex-shrink: 0;
    background: #fff;
}

.onboarding-step--done .onboarding-step-circle {
    background: rgba(26,158,110,.12);
    color: #1a9e6e;
}
.onboarding-step--active .onboarding-step-circle {
    background: rgba(108,92,231,.12);
    color: var(--brand);
    border: 2px solid var(--brand);
}
.onboarding-step--pending .onboarding-step-circle {
    background: #f0f1f5;
    color: var(--muted);
}

.onboarding-step-content {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.onboarding-step-title {
    font-size: .78rem;
    font-weight: 700;
    color: var(--ink);
}
.onboarding-step--pending .onboarding-step-title {
    color: var(--muted);
    font-weight: 500;
}

.onboarding-step-desc {
    font-size: .72rem;
    color: var(--muted);
    line-height: 1.4;
}

.onboarding-step-link {
    font-size: .72rem;
    color: var(--brand);
    font-weight: 600;
    text-decoration: none;
    margin-top: .1rem;
    display: inline-block;
}
.onboarding-step-link:hover { text-decoration: underline; }

/* Mobile: volta para coluna vertical (row → lista) */
@media (max-width: 640px) {
    .onboarding-steps {
        flex-direction: column;
        gap: 0;
    }
    .onboarding-line { display: none; }
    .onboarding-step {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        padding: .65rem 0;
        border-bottom: 1px solid var(--line);
        gap: .75rem;
    }
    .onboarding-step:last-child { border-bottom: none; }
    .onboarding-step-circle { margin-top: .05rem; }
    .onboarding-step-content { flex: 1; }
}

/* ═══════════════════════════════════════════════════════════
   Modal — Gerenciar Assinatura
   ═══════════════════════════════════════════════════════════ */

.mgmt-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 900;
    animation: fadeIn .15s ease;
}

.mgmt-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 901;
    width: 92%;
    max-width: 440px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.22);
    display: flex;
    flex-direction: column;
    animation: modalSlideIn .18s ease;
    max-height: 90vh;
    overflow: hidden;
}

@keyframes modalSlideIn {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* Cabeçalho */
.mgmt-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem .9rem;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.mgmt-modal-titulo-wrap {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.mgmt-modal-titulo {
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink);
}

.mgmt-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    padding: .25rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: color .15s, background .15s;
}
.mgmt-modal-close:hover { color: var(--ink); background: var(--paper); }
.mgmt-modal-close svg  { width: 1rem; height: 1rem; }

/* Body */
.mgmt-modal-body {
    padding: 1.1rem 1.25rem;
    overflow-y: auto;
    flex: 1;
}

/* Destaque do plano */
.mgmt-plano-destaque {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: .75rem;
}

.mgmt-plano-nome {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ink);
}

.mgmt-status-badge {
    font-size: .72rem;
    font-weight: 700;
    padding: .25rem .65rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* Linhas de info */
.mgmt-info-lista {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.mgmt-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem .9rem;
    border-bottom: 1px solid var(--line);
}
.mgmt-info-row:last-child { border-bottom: none; }

.mgmt-info-label {
    font-size: .8rem;
    color: var(--muted);
    font-weight: 500;
}

.mgmt-info-value {
    font-size: .85rem;
    font-weight: 600;
    color: var(--ink);
    text-align: right;
}

/* Barra de veículos */
.mgmt-veiculos-bloco {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.mgmt-veiculos-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mgmt-barra-bg {
    height: 7px;
    background: var(--line);
    border-radius: 999px;
    overflow: hidden;
}

.mgmt-barra-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .4s ease;
}

/* Rodapé */
.mgmt-modal-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: .6rem;
    flex-shrink: 0;
}

/* Botão de cancelar — sutil, não destacado */
.mgmt-btn-cancelar {
    background: none;
    border: none;
    cursor: pointer;
    font-size: .8rem;
    color: var(--muted);
    text-align: center;
    padding: .3rem;
    transition: color .15s;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.mgmt-btn-cancelar:hover { color: #e03a4a; }

/* Aviso na tela de cancelamento */
.mgmt-cancel-aviso {
    font-size: .85rem;
    color: var(--text);
    line-height: 1.55;
    background: rgba(224,58,74,.06);
    border: 1px solid rgba(224,58,74,.2);
    border-radius: 8px;
    padding: .8rem 1rem;
}

/* Mobile */
@media (max-width: 480px) {
    .mgmt-modal {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        transform: none;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        animation: modalSlideUp .2s ease;
        max-height: 85vh;
    }

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

/* ══════════════════════════════════════════════════════════
   SUPORTE — Central de Suporte
   ══════════════════════════════════════════════════════════ */

.suporte-shell {
    max-width: 860px;
    margin: 0 auto;
}

/* ── Abas ── */
.suporte-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--line);
    padding-bottom: 0;
}

.suporte-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 1rem;
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    border-radius: 6px 6px 0 0;
    transition: color 0.15s, border-color 0.15s;
    position: relative;
}

.suporte-tab svg {
    width: 1rem;
    height: 1rem;
}

.suporte-tab:hover {
    color: var(--ink);
    background: #f5f6fa;
}

.suporte-tab--active {
    color: var(--brand);
    border-bottom-color: var(--brand);
}

.suporte-tab-badge {
    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.62rem;
    font-weight: 900;
}

/* ══════════════════════════════════════════════════════════
   FAQ — Dúvidas rápidas
   ══════════════════════════════════════════════════════════ */

.suporte-faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.faq-categoria {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}

.faq-cat-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.9rem 1.1rem 0.7rem;
    border-bottom: 1px solid var(--line);
}

.faq-cat-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.faq-cat-titulo {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0;
}

.faq-lista {
    display: flex;
    flex-direction: column;
}

.faq-item {
    border-bottom: 1px solid var(--line);
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-pergunta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.8rem 1.1rem;
    background: transparent;
    border: none;
    text-align: left;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    transition: background 0.12s;
}

.faq-pergunta:hover {
    background: #f8f9fc;
}

.faq-chevron {
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
    color: var(--muted);
    transition: transform 0.2s;
}

.faq-item--aberto .faq-chevron {
    transform: rotate(180deg);
}

.faq-item--aberto .faq-pergunta {
    color: var(--brand);
    background: #f5f3ff;
}

.faq-resposta {
    padding: 0 1.1rem 0.9rem;
    font-size: 0.83rem;
    color: var(--muted);
    line-height: 1.65;
    animation: faq-slide-in 0.15s ease;
}

.faq-resposta strong { color: var(--ink); }
.faq-resposta em { color: var(--brand); font-style: normal; }

@keyframes faq-slide-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Rodapé do FAQ */
.suporte-faq-rodape {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
    padding: 2rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    text-align: center;
    color: var(--muted);
}

.suporte-faq-rodape svg {
    color: var(--brand);
    opacity: 0.7;
}

.suporte-faq-rodape p {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
}

/* ══════════════════════════════════════════════════════════
   CHAMADOS — Lista
   ══════════════════════════════════════════════════════════ */

.suporte-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 3.5rem 1rem;
    color: var(--muted);
    text-align: center;
}

.suporte-empty svg { opacity: 0.35; }
.suporte-empty strong { color: var(--ink); font-size: 1rem; }
.suporte-empty p { font-size: 0.87rem; margin: 0; }
.suporte-empty .btn-primary { margin-top: 0.5rem; }

.chamado-lista {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.chamado-card {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.chamado-card:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,0.07);
    border-color: #d0d3e0;
}

.chamado-card--novo {
    border-left: 3px solid var(--brand);
    background: #faf9ff;
}

.chamado-card-status {
    flex-shrink: 0;
}

.chamado-status {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 99px;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.chamado-status--aberto       { background: #e8f5e9; color: #2e7d32; }
.chamado-status--em-atendimento { background: #e8eaff; color: var(--brand); }
.chamado-status--resolvido    { background: #f0f1f5; color: var(--muted); }
.chamado-status--aguardando   { background: #fff8e1; color: #f57c00; }

.chamado-card-body {
    min-width: 0;
}

.chamado-titulo {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chamado-preview {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chamado-card-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
    flex-shrink: 0;
}

.chamado-tempo {
    font-size: 0.75rem;
    color: var(--muted);
    white-space: nowrap;
}

.chamado-novo-badge {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--brand);
    background: #ede9ff;
    padding: 0.15rem 0.45rem;
    border-radius: 99px;
}

.chamado-card-arrow {
    width: 1rem;
    height: 1rem;
    color: var(--muted);
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   CHAMADOS — Conversa (chat)
   ══════════════════════════════════════════════════════════ */

.chamado-conversa-shell {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    min-height: 520px;
}

.chamado-conversa-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--line);
    background: #fafafa;
}

.chamado-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    flex-shrink: 0;
}

.chamado-back-btn svg { width: 0.85rem; height: 0.85rem; }
.chamado-back-btn:hover { background: #f0f1f5; color: var(--ink); }

.chamado-conversa-titulo {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex: 1;
    min-width: 0;
}

.chamado-conversa-titulo strong {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chamado-conversa-id {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--muted);
    flex-shrink: 0;
}

/* Mensagens */
.chamado-msgs {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1.25rem;
    overflow-y: auto;
    background: #f7f8fb;
}

.chamado-msg {
    display: flex;
    gap: 0.7rem;
    max-width: 78%;
}

.chamado-msg--cliente {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chamado-msg--suporte {
    align-self: flex-start;
}

.chamado-msg-avatar {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.76rem;
    font-weight: 900;
    flex-shrink: 0;
    align-self: flex-end;
}

.chamado-msg--cliente .chamado-msg-avatar {
    background: var(--brand);
    color: #fff;
}

.chamado-msg--suporte .chamado-msg-avatar {
    background: var(--ink);
    color: #fff;
}

.chamado-msg-balao {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0.65rem 0.9rem;
    min-width: 0;
}

.chamado-msg--cliente .chamado-msg-balao {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    border-radius: 14px 14px 4px 14px;
}

.chamado-msg--suporte .chamado-msg-balao {
    border-radius: 14px 14px 14px 4px;
}

.chamado-msg-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.chamado-msg-meta strong {
    font-size: 0.75rem;
    font-weight: 800;
}

.chamado-msg--cliente .chamado-msg-meta strong,
.chamado-msg--cliente .chamado-msg-meta span {
    color: rgba(255,255,255,0.85);
}

.chamado-msg-meta span {
    font-size: 0.7rem;
    color: var(--muted);
}

.chamado-msg-balao p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Banner resolvido */
.chamado-resolvido-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: #e8f5e9;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #2e7d32;
    align-self: center;
}

.chamado-resolvido-banner svg {
    width: 0.95rem;
    height: 0.95rem;
}

/* Caixa de resposta */
.chamado-reply-box {
    border-top: 1px solid var(--line);
    padding: 0.9rem 1.1rem;
    background: #fff;
}

.chamado-reply-input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 0.87rem;
    font-family: inherit;
    color: var(--ink);
    background: var(--paper);
    resize: none;
    outline: none;
    transition: border-color 0.15s;
}

.chamado-reply-input:focus {
    border-color: var(--brand);
    background: #fff;
}

.chamado-reply-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.6rem;
    gap: 0.75rem;
}

.chamado-reply-hint {
    font-size: 0.73rem;
    color: var(--muted);
}

/* ══════════════════════════════════════════════════════════
   MODAL — Novo Chamado
   ══════════════════════════════════════════════════════════ */

.suporte-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, calc(100vw - 2rem));
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
    z-index: 300;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modal-pop 0.18s ease;
}

@keyframes modal-pop {
    from { opacity: 0; transform: translate(-50%, -48%) scale(0.97); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.suporte-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.3rem 0.9rem;
    border-bottom: 1px solid var(--line);
}

.suporte-modal-header h2 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0;
}

.suporte-modal-body {
    padding: 1.2rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.suporte-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    padding: 0.9rem 1.3rem;
    border-top: 1px solid var(--line);
    background: #fafafa;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVIDADE — Suporte
   ══════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
    .suporte-faq-grid {
        grid-template-columns: 1fr;
    }

    .suporte-tab {
        font-size: 0.82rem;
        padding: 0.55rem 0.75rem;
    }

    .chamado-card {
        grid-template-columns: auto 1fr auto;
    }

    .chamado-card-arrow {
        display: none;
    }

    .chamado-msg {
        max-width: 90%;
    }

    .suporte-shell {
        max-width: 100%;
    }
}

/* ============================================================
   PAINEL ADMIN (adm/privado — layout isolado, sem sidebar)
   ============================================================ */

:root {
    --adm-brand: #6c5ce7;
    --adm-brand-dark: #5a4bd1;
    --adm-bg: #0f0f13;
    --adm-surface: #1a1a23;
    --adm-surface2: #22222e;
    --adm-border: rgba(255,255,255,.08);
    --adm-text: #e8e8f0;
    --adm-text2: #9090a8;
    --adm-red: #e84393;
    --adm-green: #00cec9;
    --adm-yellow: #fdcb6e;
}

/* Shell */
.adm-shell {
    min-height: 100vh;
    background: var(--adm-bg);
    color: var(--adm-text);
    font-family: 'Inter', system-ui, sans-serif;
    display: flex;
    flex-direction: column;
}

/* Header */
.adm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .875rem 1.5rem;
    background: var(--adm-surface);
    border-bottom: 1px solid var(--adm-border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.adm-header-brand {
    display: flex;
    align-items: center;
    gap: .625rem;
}

.adm-header-icon {
    width: 22px;
    height: 22px;
    color: var(--adm-brand);
    flex-shrink: 0;
}

.adm-header-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--adm-text);
    display: flex;
    align-items: center;
    gap: .5rem;
}

.adm-badge {
    font-size: .65rem;
    font-weight: 700;
    background: var(--adm-brand);
    color: #fff;
    padding: .15rem .45rem;
    border-radius: 20px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Navegação por abas (compartilhada em todo o admin) */
.adm-nav {
    background: var(--adm-surface);
    border-bottom: 1px solid var(--adm-border);
}

.adm-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.75rem;
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.adm-nav-inner::-webkit-scrollbar {
    display: none;
}

.adm-nav-tab {
    flex-shrink: 0;
    padding: .85rem 1rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--adm-text2);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
}

.adm-nav-tab:hover {
    color: var(--adm-text);
}

.adm-nav-tab--active {
    color: var(--adm-brand);
    border-bottom-color: var(--adm-brand);
}

/* Main */
.adm-main {
    flex: 1;
    padding: 0;
}

/* ── Login ────────────────────────────────────────────────── */
.adm-login-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 57px);
    padding: 2rem 1rem;
}

.adm-login-card {
    background: var(--adm-surface);
    border: 1px solid var(--adm-border);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
}

.adm-login-logo svg {
    width: 56px;
    height: 56px;
}

.adm-login-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--adm-text);
    margin: 0;
    text-align: center;
}

.adm-login-sub {
    font-size: .85rem;
    color: var(--adm-text2);
    margin: 0 0 .5rem;
    text-align: center;
}

.adm-login-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

/* Fields */
.adm-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

/* Lembrar senha */
.adm-remember {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    color: var(--adm-text2);
    cursor: pointer;
    user-select: none;
}

.adm-remember input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--adm-brand);
    cursor: pointer;
}

.adm-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--adm-text2);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.adm-input {
    background: var(--adm-bg);
    border: 1px solid var(--adm-border);
    border-radius: 8px;
    color: var(--adm-text);
    font-size: .95rem;
    padding: .7rem 1rem;
    outline: none;
    transition: border-color .2s;
    width: 100%;
    box-sizing: border-box;
}

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

.adm-input::placeholder {
    color: var(--adm-text2);
    opacity: .6;
}

/* Buttons */
.adm-btn-primary {
    background: var(--adm-brand);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: .95rem;
    font-weight: 600;
    padding: .75rem 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    transition: background .2s, transform .1s;
    width: 100%;
    margin-top: .25rem;
}

.adm-btn-primary:hover:not(:disabled) {
    background: var(--adm-brand-dark);
}

.adm-btn-primary:active:not(:disabled) {
    transform: scale(.98);
}

.adm-btn-primary:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.adm-btn-outline {
    background: transparent;
    border: 1px solid var(--adm-border);
    color: var(--adm-text2);
    border-radius: 8px;
    font-size: .875rem;
    font-weight: 500;
    padding: .5rem 1.1rem;
    cursor: pointer;
    transition: border-color .2s, color .2s;
}

.adm-btn-outline:hover {
    border-color: var(--adm-text2);
    color: var(--adm-text);
}

/* Alert */
.adm-alert {
    border-radius: 8px;
    font-size: .875rem;
    padding: .75rem 1rem;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.adm-alert--erro {
    background: rgba(232,67,147,.12);
    border: 1px solid rgba(232,67,147,.3);
    color: var(--adm-red);
}

/* Spinner */
.adm-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: adm-spin .7s linear infinite;
    flex-shrink: 0;
}

.adm-spinner--lg {
    width: 36px;
    height: 36px;
    border-width: 3px;
    border-top-color: var(--adm-brand);
}

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

/* Loading */
.adm-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 60vh;
    color: var(--adm-text2);
    font-size: .95rem;
}

/* ── Dashboard ────────────────────────────────────────────── */
.adm-dashboard {
    padding: 2rem 1.75rem;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

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

.adm-page-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--adm-text);
    margin: 0 0 .25rem;
}

.adm-page-sub {
    font-size: .875rem;
    color: var(--adm-text2);
    margin: 0;
}

/* Stats */
.adm-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.adm-stat-card {
    background: var(--adm-surface);
    border: 1px solid var(--adm-border);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: border-color .2s;
}

.adm-stat-card:hover {
    border-color: rgba(108,92,231,.35);
}

.adm-stat-card--pendente {
    border-color: rgba(232,67,147,.25);
}

.adm-stat-card--pendente:hover {
    border-color: rgba(232,67,147,.5);
}

/* Card clicável (Empresas → gráfico) */
.adm-stat-card--clickable {
    cursor: pointer;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    position: relative;
}

.adm-stat-card--ativo {
    border-color: rgba(108,92,231,.55);
    box-shadow: 0 0 0 1px rgba(108,92,231,.35);
}

.adm-stat-chevron {
    width: 18px;
    height: 18px;
    margin-left: auto;
    color: var(--adm-text2);
    flex-shrink: 0;
    transition: transform .2s;
}

.adm-stat-card--ativo .adm-stat-chevron {
    transform: rotate(180deg);
    color: #6C5CE7;
}

/* Gráfico de cadastros (30 dias) */
.adm-chart-card {
    background: var(--adm-surface);
    border: 1px solid var(--adm-border);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.adm-chart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.adm-chart-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--adm-text);
    margin: 0;
}

.adm-chart-sub {
    font-size: .85rem;
    color: var(--adm-text2);
    margin: .25rem 0 0;
}

.adm-chart-close {
    background: transparent;
    border: 1px solid var(--adm-border);
    border-radius: 8px;
    color: var(--adm-text2);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: color .2s, border-color .2s;
}

.adm-chart-close:hover {
    color: var(--adm-text);
    border-color: rgba(108,92,231,.5);
}

.adm-chart-close svg { width: 16px; height: 16px; }

.adm-chart-empty {
    color: var(--adm-text2);
    font-size: .9rem;
    text-align: center;
    padding: 1.5rem 0;
}

.adm-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 200px;
    overflow-x: auto;
    padding-bottom: .25rem;
}

.adm-chart-col {
    flex: 1 0 auto;
    min-width: 18px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
}

.adm-chart-bar-wrap {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    min-height: 0;
}

.adm-chart-bar-val {
    font-size: .62rem;
    font-weight: 600;
    color: var(--adm-text2);
    line-height: 1;
}

.adm-chart-bar {
    width: 100%;
    min-height: 2px;
    border-radius: 4px 4px 0 0;
    background: rgba(108,92,231,.45);
    transition: background .2s;
}

.adm-chart-bar--max { background: #6C5CE7; }

.adm-chart-col:hover .adm-chart-bar { background: #6C5CE7; }

.adm-chart-day {
    font-size: .6rem;
    color: var(--adm-text2);
    white-space: nowrap;
    transform: rotate(-45deg);
    transform-origin: center;
    height: 1.4em;
}

@media (max-width: 640px) {
    .adm-chart-card { padding: 1rem; }
    .adm-chart-bars { gap: 3px; height: 170px; }
    .adm-chart-col { min-width: 20px; }
    .adm-chart-bar-val { display: none; }
}

.adm-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.adm-stat-icon svg {
    width: 22px;
    height: 22px;
}

.adm-stat-icon--empresas {
    background: rgba(108,92,231,.15);
    color: var(--adm-brand);
}

.adm-stat-icon--veiculos {
    background: rgba(0,206,201,.12);
    color: var(--adm-green);
}

.adm-stat-icon--assinantes {
    background: rgba(253,203,110,.12);
    color: var(--adm-yellow);
}

.adm-stat-icon--pendentes {
    background: rgba(232,67,147,.12);
    color: var(--adm-red);
}

.adm-stat-info {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.adm-stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--adm-text);
    line-height: 1;
}

.adm-stat-label {
    font-size: .8rem;
    color: var(--adm-text2);
}

/* Section */
.adm-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.adm-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--adm-text);
    margin: 0;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--adm-border);
}

/* Empty */
.adm-empty {
    background: var(--adm-surface);
    border: 1px solid var(--adm-border);
    border-radius: 12px;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--adm-text2);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
}

.adm-empty svg {
    width: 40px;
    height: 40px;
    color: var(--adm-green);
}

.adm-empty p {
    margin: 0;
    font-size: .9rem;
}

/* Tabela de chamados */
.adm-chamados-table-wrap {
    background: var(--adm-surface);
    border: 1px solid var(--adm-border);
    border-radius: 12px;
    overflow: auto;
}

.adm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

.adm-table thead tr {
    border-bottom: 1px solid var(--adm-border);
}

.adm-table th {
    padding: .875rem 1rem;
    text-align: left;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--adm-text2);
    white-space: nowrap;
}

.adm-table td {
    padding: .875rem 1rem;
    color: var(--adm-text);
    vertical-align: middle;
}

.adm-chamado-row {
    border-bottom: 1px solid var(--adm-border);
    transition: background .15s;
}

.adm-chamado-row:last-child {
    border-bottom: none;
}

.adm-chamado-row:hover {
    background: var(--adm-surface2);
}

.adm-chamado-num {
    font-weight: 700;
    color: var(--adm-brand);
    white-space: nowrap;
}

.adm-chamado-titulo {
    font-weight: 500;
    max-width: 220px;
}

.adm-chamado-msg {
    max-width: 200px;
    color: var(--adm-text2);
    font-size: .82rem;
}

.adm-chamado-data {
    white-space: nowrap;
    color: var(--adm-text2);
    font-size: .82rem;
}

.adm-status-badge {
    display: inline-block;
    padding: .2rem .7rem;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
    background: rgba(108,92,231,.15);
    color: var(--adm-brand);
    white-space: nowrap;
}

/* ── Responsivo admin ─────────────────────────────────────── */
@media (max-width: 720px) {
    .adm-dashboard {
        padding: 1.25rem 1rem;
        gap: 1.5rem;
    }

    .adm-nav-inner {
        padding: 0 1rem;
    }

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

    .adm-page-header {
        flex-direction: column;
    }

    .adm-table th:nth-child(6),
    .adm-table td:nth-child(6) {
        display: none;
    }
}

@media (max-width: 480px) {
    .adm-stats {
        grid-template-columns: 1fr;
    }

    .adm-login-card {
        padding: 2rem 1.25rem;
    }
}

/* ─────────────────────────────────────────────────────────────
   Multas — botão "Ver quem usou este veículo" + modal de uso
   ───────────────────────────────────────────────────────────── */
.relatorio-uso-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.btn-relatorio-uso {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    padding: 0.6rem 0.95rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--brand);
    background: #f3f1fe;
    border: 1px solid #ddd7fb;
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.btn-relatorio-uso:hover:not(:disabled) { background: #ece8fd; border-color: #c9c0f8; }
.btn-relatorio-uso:disabled,
.btn-relatorio-uso--disabled {
    color: var(--muted);
    background: #f4f5f9;
    border-color: #e6e8f0;
    cursor: not-allowed;
    opacity: 0.7;
}

.relatorio-hint {
    margin: 0;
    font-size: 0.74rem;
    color: var(--muted);
}

/* Modal centralizado (acima do drawer de cadastro de multa) */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8,10,18,0.5);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 300;
}

.modal-box {
    display: flex;
    flex-direction: column;
    width: min(460px, 100%);
    max-height: min(88dvh, 640px);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(18,19,26,0.28);
    overflow: hidden;
    z-index: 301;
    animation: modal-pop 0.18s ease-out;
}
@keyframes modal-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.15rem 1.25rem 0.9rem;
    border-bottom: 1px solid #eceef4;
    flex-shrink: 0;
}

.modal-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--ink);
}

.modal-subtitle {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: var(--muted);
}

.modal-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;
}
.modal-close:hover { background: #f4f5f9; color: var(--ink); }
.modal-close svg { width: 0.9rem; height: 0.9rem; }

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
}

.modal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem 1rem;
    color: var(--muted);
    font-size: 0.85rem;
}

.modal-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 1.75rem 1rem;
}
.modal-empty p { margin: 0; font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.modal-empty-hint { font-size: 0.78rem; color: var(--muted); }

.modal-intro {
    margin: 0 0 0.9rem;
    font-size: 0.82rem;
    color: var(--muted);
}

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

/* Lista de motoristas que utilizaram o veículo na data */
.relatorio-lista {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.relatorio-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid #e8eaf0;
    border-radius: 10px;
    transition: border-color 0.12s, background 0.12s;
}
.relatorio-item:hover { border-color: #d7d2f7; background: #fafaff; }

.relatorio-item-avatar {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    flex-shrink: 0;
}

.relatorio-item-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1;
}

.relatorio-item-nome {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink);
}

.relatorio-item-horarios {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.7rem;
}

.relatorio-horario {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
}
.relatorio-horario--saida { color: #1f9d63; }
.relatorio-horario--retorno { color: #c0392b; }
.relatorio-horario--andamento { color: var(--brand); }

.relatorio-item-finalidade {
    font-size: 0.72rem;
    color: var(--muted);
    font-style: italic;
}

.btn-selecionar-infrator {
    flex-shrink: 0;
    padding: 0.5rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    background: var(--brand);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.15s;
}
.btn-selecionar-infrator:hover { opacity: 0.88; }

/* ── Impressão de etiqueta de QR Code (admin /adm/qrcode) ──
   Isola a etiqueta: somente a área .qr-print-area é enviada à impressora
   (impressora térmica de adesivos). O restante da tela fica oculto. */
@media print {
    body * {
        visibility: hidden;
    }

    .qr-print-area,
    .qr-print-area * {
        visibility: visible;
    }

    .qr-print-area {
        position: absolute;
        left: 0;
        top: 0;
        width: auto;
        margin: 0;
        padding: 0;
    }

    @page {
        margin: 4mm;
    }
}

/* ──────────────────────────────────────────────
   Página de Contato (landing)
   ────────────────────────────────────────────── */
.contato-page {
    min-height: 100vh;
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(108,92,231,0.22), transparent 60%),
        #11131b;
    color: #fff;
    display: flex;
    flex-direction: column;
}

.contato-header {
    width: min(100%, 1120px);
    margin: 0 auto;
    padding: 1.4rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.contato-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255,255,255,0.72);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    transition: color 0.15s;
}

.contato-back:hover { color: #fff; }

.contato-main {
    width: min(100%, 1120px);
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
    flex: 1;
}

.contato-intro {
    max-width: 38rem;
    margin-bottom: 2.4rem;
}

.contato-intro h1 {
    margin: 0.6rem 0 0.8rem;
    font-size: clamp(2rem, 7vw, 3rem);
    line-height: 1.05;
    font-weight: 900;
}

.contato-intro p {
    margin: 0;
    color: rgba(255,255,255,0.74);
    font-size: clamp(1rem, 3.5vw, 1.15rem);
    line-height: 1.5;
}

.contato-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
    align-items: start;
}

.contato-card,
.contato-whatsapp {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 1.8rem 1.5rem;
}

.contato-card h2,
.contato-whatsapp h2 {
    margin: 0 0 1.3rem;
    font-size: 1.3rem;
    font-weight: 800;
}

.contato-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.field-group textarea {
    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;
    line-height: 1.5;
    resize: vertical;
    min-height: 7rem;
    transition: border-color 0.15s, background 0.15s;
    outline: none;
}

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

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

.contato-form .button-primary { margin-top: 0.2rem; }

.contato-erro {
    margin: 0;
    color: #ffb4ba;
    background: rgba(244,91,105,0.12);
    border: 1px solid rgba(244,91,105,0.4);
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.contato-nota {
    margin: 0;
    color: rgba(255,255,255,0.5);
    font-size: 0.82rem;
    text-align: center;
}

.contato-sucesso {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 0;
}

.contato-sucesso-icone {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(46,196,166,0.16);
    border: 1px solid rgba(46,196,166,0.5);
    color: var(--mint);
    margin-bottom: 0.4rem;
}

.contato-sucesso-icone svg { width: 1.6rem; height: 1.6rem; }

.contato-sucesso h2 { margin: 0; }

.contato-sucesso p {
    margin: 0 0 0.8rem;
    color: rgba(255,255,255,0.74);
    max-width: 26rem;
    line-height: 1.5;
}

.contato-whatsapp {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Mobile: WhatsApp antes do formulário — é o canal mais usado no celular
       e o CTA aparece sem precisar rolar. No desktop volta para a coluna direita. */
    order: -1;
}

.contato-whatsapp-icone {
    width: 3rem;
    height: 3rem;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(37,211,102,0.14);
    color: #25D366;
    margin-bottom: 1rem;
}

.contato-whatsapp-icone svg { width: 1.7rem; height: 1.7rem; }

.contato-whatsapp h2 { margin-bottom: 0.6rem; }

.contato-whatsapp p {
    margin: 0 0 1.3rem;
    color: rgba(255,255,255,0.74);
    line-height: 1.5;
}

.contato-whatsapp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 2.9rem;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    background: #25D366;
    color: #0a2e18;
    font-weight: 800;
    text-decoration: none;
    transition: filter 0.15s;
}

.contato-whatsapp-btn:hover { filter: brightness(1.05); }

.contato-whatsapp-aviso {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 1rem 0 0;
    color: rgba(255,255,255,0.6);
    font-size: 0.82rem;
    line-height: 1.4;
}

.contato-whatsapp-aviso svg {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: var(--amber);
}

@media (min-width: 760px) {
    .contato-grid { grid-template-columns: 1.4fr 1fr; gap: 1.5rem; }
    .contato-card,
    .contato-whatsapp { padding: 2.2rem 2rem; }
    /* Desktop: formulário à esquerda, WhatsApp à direita (ordem do DOM). */
    .contato-whatsapp { order: 0; }
}

/* ──────────────────────────────────────────────
   Botão flutuante do WhatsApp (landing)
   ────────────────────────────────────────────── */
.whatsapp-float {
    position: fixed;
    right: 1.1rem;
    /* Sobe acima do banner de cookies enquanto ele estiver na tela.
       --cookie-banner-h e alimentado por js/cookie-consent.js e volta a 0 na decisao. */
    bottom: calc(1.1rem + var(--cookie-banner-h, 0px));
    z-index: 2001; /* acima do .cookie-banner (2000) */
    transition: bottom 0.25s ease;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #25D366;
    color: #fff;
    box-shadow: 0 10px 28px rgba(37,211,102,0.45);
    transition: transform 0.15s ease, bottom 0.25s ease;
    animation: wa-pulse 5s ease-in-out 2.5s infinite;
}

.whatsapp-float:hover {
    transform: scale(1.07);
    box-shadow: 0 14px 34px rgba(37,211,102,0.55);
}

.whatsapp-float svg { width: 2rem; height: 2rem; }

@media (min-width: 760px) {
    .whatsapp-float {
        right: 1.8rem;
        bottom: calc(1.8rem + var(--cookie-banner-h, 0px));
        width: 4rem;
        height: 4rem;
    }
    .whatsapp-float svg { width: 2.2rem; height: 2.2rem; }
}

/* ============================================================
   Admin — Limpeza de base (empresas sem uso)
   ============================================================ */

.adm-alert--ok {
    background: rgba(0,206,201,.12);
    border: 1px solid rgba(0,206,201,.3);
    color: var(--adm-green);
}

/* Filtros */
.adm-emp-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.75rem;
}

.adm-emp-check,
.adm-emp-dias {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    color: var(--adm-text2);
    user-select: none;
}

.adm-emp-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--adm-brand);
    cursor: pointer;
}

.adm-emp-dias-input {
    width: 68px;
    text-align: center;
    padding: .35rem .5rem;
}

/* Grid de cards */
.adm-emp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.adm-emp-card {
    background: var(--adm-surface);
    border: 1px solid var(--adm-border);
    border-radius: 14px;
    padding: 1.1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.adm-emp-card--excluivel {
    border-color: rgba(232,67,147,.35);
}

.adm-emp-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem;
}

.adm-emp-nome-wrap {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.adm-emp-nome {
    font-weight: 700;
    font-size: .98rem;
    color: var(--adm-text);
    word-break: break-word;
}

.adm-emp-fantasia {
    font-size: .78rem;
    color: var(--adm-text2);
}

.adm-emp-badge {
    flex-shrink: 0;
    padding: .2rem .6rem;
    border-radius: 20px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
}

.adm-emp-badge--excluivel {
    background: rgba(232,67,147,.15);
    color: var(--adm-red);
}

.adm-emp-badge--uso {
    background: rgba(0,206,201,.15);
    color: var(--adm-green);
}

.adm-emp-motivo {
    font-size: .8rem;
    color: var(--adm-text2);
}

.adm-emp-metricas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .4rem;
    background: var(--adm-surface2);
    border-radius: 10px;
    padding: .6rem .3rem;
}

.adm-emp-metrica {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
}

.adm-emp-metrica-val {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--adm-text);
}

.adm-emp-metrica-lbl {
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--adm-text2);
}

/* Armazenamento por empresa (banco estimado + anexos em disco) */
.adm-emp-arm {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.adm-emp-arm-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
}

.adm-emp-arm-titulo {
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--adm-text2);
}

.adm-emp-arm-total {
    font-size: .85rem;
    font-weight: 700;
    color: var(--adm-text);
}

.adm-emp-arm-barra {
    display: flex;
    height: 6px;
    border-radius: 99px;
    overflow: hidden;
    background: var(--adm-surface2);
}

.adm-emp-arm-fatia {
    display: block;
    height: 100%;
}

.adm-emp-arm-fatia--banco  { background: #6C5CE7; }
.adm-emp-arm-fatia--anexos { background: #A29BFE; }

.adm-emp-arm-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .9rem;
    font-size: .72rem;
    color: var(--adm-text2);
}

.adm-emp-arm-item {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.adm-emp-arm-item strong {
    color: var(--adm-text);
    font-weight: 600;
}

.adm-emp-arm-ponto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.adm-emp-arm-ponto--banco  { background: #6C5CE7; }
.adm-emp-arm-ponto--anexos { background: #A29BFE; }

.adm-emp-card-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .6rem;
    margin-top: auto;
}

.adm-emp-tempo {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    font-size: .74rem;
    color: var(--adm-text2);
    min-width: 0;
}

.adm-emp-parada {
    font-weight: 600;
    color: var(--adm-text2);
}

.adm-emp-parada--alerta {
    color: var(--adm-yellow);
}

.adm-emp-excluir {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .75rem;
    border-radius: 9px;
    border: 1px solid rgba(232,67,147,.4);
    background: transparent;
    color: var(--adm-red);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, opacity .15s;
}

.adm-emp-excluir svg {
    width: 15px;
    height: 15px;
}

.adm-emp-excluir:hover:not(:disabled) {
    background: rgba(232,67,147,.12);
}

.adm-emp-excluir:disabled {
    opacity: .35;
    cursor: not-allowed;
    border-color: var(--adm-border);
    color: var(--adm-text2);
}

/* Modal de confirmação */
.adm-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 200;
    backdrop-filter: blur(2px);
}

.adm-modal {
    background: var(--adm-surface);
    border: 1px solid var(--adm-border);
    border-radius: 16px;
    padding: 1.75rem 1.5rem;
    max-width: 420px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
}

.adm-modal-icone {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(232,67,147,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--adm-red);
}

.adm-modal-icone svg { width: 26px; height: 26px; }

.adm-modal-titulo {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--adm-text);
}

.adm-modal-texto {
    margin: 0;
    font-size: .88rem;
    color: var(--adm-text2);
    line-height: 1.5;
}

.adm-modal-texto strong { color: var(--adm-text); }

.adm-modal-aviso {
    margin: 0;
    font-size: .82rem;
    color: var(--adm-red);
}

.adm-modal-acoes {
    display: flex;
    gap: .6rem;
    margin-top: .6rem;
    width: 100%;
}

.adm-modal-acoes > * { flex: 1; }

.adm-modal-confirmar {
    padding: .6rem 1rem;
    border-radius: 10px;
    border: none;
    background: var(--adm-red);
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .15s;
}

.adm-modal-confirmar:hover:not(:disabled) { opacity: .9; }

.adm-modal-confirmar:disabled { opacity: .55; cursor: not-allowed; }

@media (max-width: 480px) {
    .adm-emp-grid { grid-template-columns: 1fr; }
    .adm-emp-card-foot { flex-direction: column; align-items: stretch; }
    .adm-emp-excluir { justify-content: center; }
}


/* ============================================================
   BLOG — listagem e artigo
   Mobile-first. Reaproveita os tokens da landing (--brand, --lav,
   --line, --ink, --muted) e as classes já existentes: .hero,
   .section-inner, .section-kicker, .cta-section, .button-*.

   A coluna do artigo é estreita de propósito (~68 caracteres por
   linha): é a medida em que texto longo é lido sem cansaço, e a
   maior parte do tráfego de blog chega pelo celular.
   ============================================================ */

/* ---- Topo das páginas do blog ---- */
.blog-hero {
    min-height: auto;
    padding-bottom: 2.5rem;
}

.blog-hero-inner {
    padding-top: 3rem;
    max-width: 46rem;
}

.blog-hero-inner h1 {
    margin: 0.6rem 0 0.9rem;
    font-size: clamp(1.9rem, 6vw, 3rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.blog-hero-sub {
    margin: 0;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.65;
}

/* ---- Filtro por categoria (links, não botões: cada um é uma URL) ---- */
.blog-filtros {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}

.blog-filtros-inner {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.blog-filtros-inner::-webkit-scrollbar { display: none; }

.blog-chip {
    flex: 0 0 auto;
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--lav-line);
    border-radius: 999px;
    background: var(--lav);
    color: var(--ink);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.blog-chip:hover { border-color: var(--brand); }

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

/* ---- Grade de cards ---- */
.blog-lista { padding-top: 2.5rem; }

.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.blog-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.blog-card:hover {
    transform: translateY(-3px);
    border-color: var(--lav-line);
    box-shadow: 0 14px 34px rgba(108, 92, 231, 0.13);
}

.blog-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.blog-card-capa {
    position: relative;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    display: grid;
    place-items: center;
    overflow: hidden;
}

.blog-card-capa img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Sem capa: marca d'água discreta em vez de buraco no layout. */
.blog-card-capa-vazia {
    font-size: 2.6rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.34);
}

.blog-card-corpo {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.15rem 1.25rem 1.35rem;
    flex: 1;
}

.blog-card-cat {
    align-self: flex-start;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--lav);
    color: var(--brand-dark);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.blog-card-titulo {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.32;
    letter-spacing: -0.01em;
}

.blog-card-resumo {
    margin: 0;
    color: var(--muted);
    font-size: 0.94rem;
    line-height: 1.55;
    /* 3 linhas: mantém todos os cards da linha com a mesma altura visual. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-meta {
    margin-top: auto;
    padding-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    color: var(--muted);
    font-size: 0.82rem;
}

.blog-vazio {
    padding: 3rem 0 4rem;
    text-align: center;
    color: var(--muted);
}

.blog-vazio h2 { color: var(--ink); margin-bottom: 0.5rem; }

.blog-paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 2.5rem 0 1rem;
}

.blog-paginacao-info { color: var(--muted); font-size: 0.9rem; }

/* ---- Artigo ---- */
.blog-artigo-cabecalho {
    padding-top: 2.2rem;
    max-width: 46rem;
}

.blog-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
    color: var(--muted);
    font-size: 0.85rem;
}

.blog-breadcrumb a { color: var(--muted); text-decoration: none; }
.blog-breadcrumb a:hover { color: var(--brand); text-decoration: underline; }

.blog-artigo-cabecalho h1 {
    margin: 0 0 0.9rem;
    font-size: clamp(1.75rem, 5.6vw, 2.7rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.blog-artigo-resumo {
    margin: 0 0 1.2rem;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.6;
}

.blog-artigo-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    color: var(--muted);
    font-size: 0.88rem;
}

.blog-artigo { background: #fff; }

.blog-artigo-inner {
    max-width: 42rem;
    margin: 0 auto;
    padding: 2.2rem 1.25rem 3.5rem;
}

.blog-artigo-capa {
    margin: 0 0 2rem;
}

.blog-artigo-capa img {
    width: 100%;
    border-radius: 16px;
    display: block;
}

/* ---- Corpo do post (HTML gerado pelo PostHtmlRenderer) ---- */
.post-conteudo {
    font-size: 1.06rem;
    line-height: 1.75;
    color: #23252f;
}

.post-conteudo p { margin: 0 0 1.15rem; }

.post-conteudo a {
    color: var(--brand-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.post-conteudo .post-h2 {
    margin: 2.4rem 0 0.9rem;
    font-size: 1.5rem;
    line-height: 1.25;
    letter-spacing: -0.015em;
    /* scroll-margin: o sumário salta para a seção sem esconder o título
       atrás da barra de categorias fixa. */
    scroll-margin-top: 4.5rem;
}

.post-conteudo .post-h3 {
    margin: 1.8rem 0 0.7rem;
    font-size: 1.18rem;
    line-height: 1.3;
}

.post-conteudo ul,
.post-conteudo ol { margin: 0 0 1.2rem; padding-left: 1.35rem; }

.post-conteudo li { margin-bottom: 0.5rem; }

.post-conteudo .post-checklist {
    list-style: none;
    padding-left: 0;
}

.post-conteudo .post-checklist li {
    position: relative;
    padding-left: 1.9rem;
}

.post-conteudo .post-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.42em;
    width: 1.05rem;
    height: 1.05rem;
    border: 2px solid var(--brand);
    border-radius: 5px;
}

.post-conteudo .post-citacao {
    margin: 1.6rem 0;
    padding: 0.2rem 0 0.2rem 1.1rem;
    border-left: 3px solid var(--brand);
    color: var(--ink);
    font-size: 1.1rem;
    font-style: italic;
}

.post-conteudo .post-citacao p { margin: 0; }

.post-conteudo .post-aviso {
    margin: 1.7rem 0;
    padding: 1rem 1.15rem;
    border: 1px solid var(--lav-line);
    border-left: 4px solid var(--amber);
    border-radius: 12px;
    background: #fffaf0;
}

.post-conteudo .post-aviso p { margin: 0; }

.post-conteudo .post-figura { margin: 1.9rem 0; }

.post-conteudo .post-figura img {
    width: 100%;
    border-radius: 14px;
    display: block;
}

.post-conteudo figcaption,
.blog-artigo-capa figcaption {
    margin-top: 0.55rem;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

.post-credito {
    display: block;
    opacity: 0.8;
    font-size: 0.78rem;
}

.post-tabela-wrap {
    margin: 1.7rem 0;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.post-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
}

.post-tabela th,
.post-tabela td {
    padding: 0.7rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid var(--line);
}

.post-tabela th {
    background: var(--lav);
    font-weight: 700;
    white-space: nowrap;
}

.post-tabela tr:last-child td { border-bottom: none; }

/* Sumário do artigo */
.post-sumario {
    margin: 0 0 2.2rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--lav-line);
    border-radius: 14px;
    background: var(--lav);
}

.post-sumario-titulo {
    margin: 0 0 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand-dark);
}

.post-sumario ul { margin: 0; padding-left: 1.1rem; }
.post-sumario li { margin-bottom: 0.35rem; font-size: 0.95rem; }

/* FAQ dentro do post */
.post-faq { margin: 1rem 0 1.6rem; }

.post-faq details {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.85rem 1.05rem;
    margin-bottom: 0.7rem;
    background: #fff;
}

.post-faq summary {
    cursor: pointer;
    font-weight: 650;
    list-style: none;
}

.post-faq summary::-webkit-details-marker { display: none; }

.post-faq summary::after {
    content: "+";
    float: right;
    color: var(--brand);
    font-weight: 700;
}

.post-faq details[open] summary::after { content: "–"; }

.post-faq details p { margin: 0.7rem 0 0; color: var(--muted); }

/* Fontes, aviso legal e CTA de fim de artigo */
.post-fontes {
    margin-top: 2.6rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--line);
}

.post-fontes h2 { font-size: 1.05rem; margin: 0 0 0.6rem; }
.post-fontes ul { margin: 0; padding-left: 1.2rem; }

.post-fontes li {
    margin-bottom: 0.35rem;
    font-size: 0.88rem;
    /* URL longa não pode estourar a coluna no celular. */
    overflow-wrap: anywhere;
}

.post-fontes a { color: var(--brand-dark); }

.post-aviso-legal {
    margin: 1.6rem 0 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.6;
}

.post-cta {
    margin-top: 2.6rem;
    padding: 1.6rem 1.5rem;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: #fff;
}

.post-cta h2 { margin: 0 0 0.6rem; font-size: 1.3rem; line-height: 1.25; }

.post-cta p {
    margin: 0 0 1.1rem;
    color: rgba(255, 255, 255, 0.86);
    line-height: 1.6;
}

.post-cta .button-primary {
    background: #fff;
    color: var(--brand-dark);
}

.blog-relacionados { background: var(--paper); }

@media (min-width: 640px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .blog-artigo-inner { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (min-width: 1040px) {
    .blog-grid { grid-template-columns: repeat(3, 1fr); }
    .post-conteudo { font-size: 1.1rem; }
}

/* ============================================================
   BLOG — tela de administração (/adm/blog)
   Reaproveita os componentes do tema admin (adm-*); aqui só o
   que é específico da lista de posts.
   ============================================================ */

.blog-adm-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.2rem 0;
}

.blog-adm-filtros .is-ativo {
    border-color: var(--brand);
    color: var(--brand);
    font-weight: 700;
}

.blog-adm-lista {
    display: grid;
    gap: 1rem;
}

.blog-adm-item {
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.blog-adm-item-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    font-size: 0.78rem;
    color: var(--muted);
}

.blog-adm-status {
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
}

.blog-adm-status--publicado { background: #e6f8f3; color: #17795f; }
.blog-adm-status--rascunho  { background: #fff4e0; color: #96601a; }
.blog-adm-status--arquivado { background: #f0f1f5; color: #5b606f; }

.blog-adm-cat {
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--lav);
    color: var(--brand-dark);
    font-weight: 600;
}

.blog-adm-titulo { margin: 0 0 0.35rem; font-size: 1.08rem; line-height: 1.3; }

.blog-adm-resumo {
    margin: 0 0 0.9rem;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

.blog-adm-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.blog-adm-excluir {
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--danger);
    border-radius: 10px;
    background: transparent;
    color: var(--danger);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.blog-adm-excluir:hover { background: var(--danger); color: #fff; }

.blog-adm-form {
    display: grid;
    gap: 0.85rem;
}

.blog-adm-form label {
    display: grid;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
}

.blog-adm-dica {
    margin: 0;
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    background: var(--lav);
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.55;
}

.blog-adm-dica code {
    background: #fff;
    padding: 0.1rem 0.35rem;
    border-radius: 5px;
    font-size: 0.78rem;
}

/* ---- /adm/ferramentas: tabela de uso das ferramentas gratuitas ----
   Reaproveita .adm-stats, .adm-stat-card, .blog-adm-filtros e .adm-alert.
   Só a tabela é nova. */
.ferr-adm-tabela-rolagem {
    margin-top: 1.25rem;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.ferr-adm-tabela {
    width: 100%;
    min-width: 46rem;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.ferr-adm-tabela th,
.ferr-adm-tabela td {
    padding: 0.7rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.ferr-adm-tabela th {
    background: var(--lav);
    color: var(--brand-dark);
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ferr-adm-tabela th.num,
.ferr-adm-tabela td.num { text-align: right; }

.ferr-adm-tabela tbody tr:last-child td { border-bottom: none; }
.ferr-adm-tabela tbody tr:hover { background: #fafafc; }

.ferr-adm-nome {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.ferr-adm-nome span:last-child {
    display: grid;
}

.ferr-adm-nome strong {
    font-size: 0.92rem;
    font-weight: 750;
}

.ferr-adm-nome small {
    color: var(--muted);
    font-size: 0.76rem;
}

.ferr-adm-icone {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9px;
    background: var(--lav);
    border: 1px solid var(--lav-line);
    color: var(--brand);
}

.ferr-adm-icone svg { width: 1rem; height: 1rem; }

.ferr-adm-taxa {
    font-weight: 800;
    color: var(--brand);
}

.ferr-adm-vazio { color: var(--muted); }

/* Slug que não está mais no catálogo: mantido para o histórico não sumir. */
.ferr-adm-fora { opacity: 0.62; }

.ferr-adm-nota {
    margin-top: 0.9rem;
    line-height: 1.6;
}

/* ============================================================
   FERRAMENTAS GRATUITAS (/ferramentas)

   Reaproveita a base pública: .hero .blog-hero no topo,
   .section-inner, .section-kicker, .check-list, .faq-band,
   .trial-badge, .cta-section e os .button-*. O que existe aqui
   é só o que não tinha equivalente: card de ferramenta, caixa
   da calculadora, bloco de download e tabela de exemplo.

   Prefixo .tool- em tudo, para não colidir com nada acima.
   ============================================================ */

/* ---- Menu suspenso de "Ferramentas" na barra pública ----

   Abre por :hover e :focus-within, sem JavaScript: a landing e o blog são SSR
   estático e não têm circuito Blazor para guardar "menu aberto". O :focus-within
   é o que faz o menu funcionar pelo teclado (Tab no gatilho já revela a lista).

   O gatilho segue sendo link para /ferramentas — clicar leva ao índice, parar o
   mouse mostra os atalhos.

   A .nav-links só existe a partir de 760px, então este bloco vale só no desktop. */
.nav-drop-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-drop-gatilho {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
}

.nav-drop-gatilho svg {
    width: 0.85rem;
    height: 0.85rem;
    transition: transform 0.18s ease;
}

.nav-drop-wrap:hover .nav-drop-gatilho svg,
.nav-drop-wrap:focus-within .nav-drop-gatilho svg {
    transform: rotate(180deg);
}

.nav-drop {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 30;
    width: 23rem;
    /* padding-top no lugar de margin: cria a ponte de hover entre o link e o
       painel. Sem isso o menu fecha ao atravessar o vão com o mouse. */
    padding-top: 0.85rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(-6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

.nav-drop-wrap:hover .nav-drop,
.nav-drop-wrap:focus-within .nav-drop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.nav-drop-painel {
    display: grid;
    gap: 0.12rem;
    padding: 0.6rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--lav-line);
    box-shadow: 0 24px 50px rgba(18, 19, 26, 0.16);
}

.nav-drop-cat {
    padding: 0.55rem 0.6rem 0.3rem;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.nav-drop-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.6rem;
    border-radius: 10px;
    transition: background 0.14s ease;
}

.nav-drop-item:hover {
    background: var(--lav);
}

.nav-drop-icone {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 9px;
    background: var(--lav);
    border: 1px solid var(--lav-line);
    color: var(--brand);
}

.nav-drop-item:hover .nav-drop-icone {
    background: #fff;
    border-color: var(--brand);
}

.nav-drop-icone svg {
    width: 1.05rem;
    height: 1.05rem;
}

.nav-drop-texto {
    display: grid;
    min-width: 0;
}

.nav-drop-texto strong {
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 750;
    line-height: 1.3;
}

.nav-drop-texto small {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.nav-drop-todas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.3rem;
    padding: 0.6rem;
    border-top: 1px solid var(--lav-line);
    color: var(--brand);
    font-size: 0.85rem;
    font-weight: 800;
}

.nav-drop-todas svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.15s ease;
}

.nav-drop-todas:hover svg { transform: translateX(3px); }

/* ---- Trilha de navegação (o BreadcrumbList do JSON-LD precisa estar visível) ---- */
.tool-trilha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.1rem;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.tool-trilha a {
    color: var(--brand);
    text-decoration: none;
}

.tool-trilha a:hover { text-decoration: underline; }

/* ---- Índice: cards agrupados por categoria ---- */
.tool-lista {
    padding-bottom: 1rem;
}

.tool-cat {
    margin: 2.5rem 0 1.1rem;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}

.tool-cat:first-child { margin-top: 0; }

.tool-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
}

.tool-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.tool-card:hover {
    transform: translateY(-3px);
    border-color: var(--lav-line);
    box-shadow: 0 14px 34px rgba(108, 92, 231, 0.13);
}

.tool-card-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    height: 100%;
    padding: 1.25rem 1.35rem 1.35rem;
    color: inherit;
    text-decoration: none;
}

.tool-card-icone {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    background: var(--lav);
    border: 1px solid var(--lav-line);
    color: var(--brand);
}

.tool-card-icone svg {
    width: 1.4rem;
    height: 1.4rem;
}

.tool-card-tipo {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--lav);
    color: var(--brand-dark);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tool-card-titulo {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.tool-card-chamada {
    margin: 0;
    color: var(--muted);
    font-size: 0.94rem;
    line-height: 1.55;
}

.tool-card-acao {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.7rem;
    color: var(--brand);
    font-size: 0.92rem;
    font-weight: 800;
}

.tool-card-acao svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.15s ease;
}

.tool-card:hover .tool-card-acao svg { transform: translateX(3px); }

.tool-nota {
    margin: 2.75rem 0 0;
    padding: 1rem 1.15rem;
    border-radius: 14px;
    background: var(--lav);
    border: 1px solid var(--lav-line);
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

.tool-nota a { color: var(--brand); font-weight: 700; }

/* ---- Palco: primeira dobra da página de ferramenta (widget ou download) ---- */
.tool-palco {
    background: #f5f6fa;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.tool-palco-inner {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
    max-width: 52rem;
}

.tool-palco-nota,
.tool-aviso {
    margin: 1.15rem 0 0;
    padding: 0.9rem 1.05rem;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.6;
}

.tool-palco-nota {
    background: #fff;
    border: 1px solid var(--line);
    color: var(--muted);
}

/* Aviso de "modelo, não parecer jurídico": precisa se destacar do texto comum. */
.tool-aviso {
    background: #fff8ec;
    border: 1px solid #f6dfb4;
    color: #6b4a12;
}

/* ---- Calculadora ---- */
.tool-widget {
    padding: 1.25rem;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(18, 19, 26, 0.06);
}

.tool-widget-dica {
    margin: 0 0 1.1rem;
    color: var(--muted);
    font-size: 0.87rem;
    line-height: 1.55;
}

.tool-campos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
}

.tool-campo {
    display: grid;
    gap: 0.35rem;
}

.tool-campo > span {
    font-size: 0.85rem;
    font-weight: 700;
    color: #333846;
}

.tool-campo input {
    width: 100%;
    min-height: 2.85rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tool-campo input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.16);
}

.tool-campo small {
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.tool-campo--destaque input {
    border-color: var(--lav-line);
    background: var(--lav);
}

/* ---- Blocos numerados do formulário (simulador com muitos campos) ----
   Onze campos numa lista única assusta. Em três blocos — a situação, um lado,
   o outro lado — o formulário passa a seguir a ordem em que o gestor tem os
   números na mão: o orçamento da concessionária e a cotação da locadora. */
.tool-grupo {
    margin: 0 0 1.25rem;
    padding: 0;
    border: none;
}

.tool-grupo:last-of-type { margin-bottom: 0; }

.tool-grupo legend {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
    padding: 0;
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 800;
}

.tool-grupo-num {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 900;
}

/* ---- Veredito do comparativo ---- */
.tool-veredito {
    margin: 0 0 1.1rem;
    padding: 0.9rem 1.1rem;
    border-radius: 14px;
    border: 1px solid var(--lav-line);
    background: var(--lav);
    color: var(--brand-dark);
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.55;
}

.tool-veredito[data-tipo="empate"] {
    border-color: #f6dfb4;
    background: #fff8ec;
    color: #6b4a12;
}

/* ---- Dois lados, lado a lado ---- */
.tool-versus {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
}

.tool-versus-card {
    padding: 1.05rem 1.15rem 1.15rem;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* O vencedor recebe 2px de borda da marca — é o único lugar da seção que
   quebra a regra de 1px, de propósito, para o olho achar a resposta. */
.tool-versus-card.is-melhor {
    border: 2px solid var(--brand);
    box-shadow: 0 14px 34px rgba(108, 92, 231, 0.14);
}

.tool-versus-rotulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.tool-versus-selo {
    display: none;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 0.62rem;
    font-style: normal;
    letter-spacing: 0.04em;
}

.tool-versus-card.is-melhor .tool-versus-selo { display: inline-block; }

.tool-versus-card > strong {
    display: block;
    margin-top: 0.35rem;
    color: var(--ink);
    font-size: clamp(1.55rem, 6vw, 1.95rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.tool-versus-card.is-melhor > strong { color: var(--brand); }

.tool-versus-card > small {
    display: block;
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: 0.82rem;
}

.tool-versus-metricas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin: 0.9rem 0 0;
    padding: 0.7rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.tool-versus-metricas dt {
    color: var(--muted);
    font-size: 0.78rem;
}

.tool-versus-metricas dd {
    margin: 0.1rem 0 0;
    font-size: 1.02rem;
    font-weight: 800;
}

.tool-versus-detalhe {
    display: grid;
    gap: 0.45rem;
    margin: 0.85rem 0 0;
    padding: 0;
    list-style: none;
}

.tool-versus-detalhe li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    color: #454b5c;
    font-size: 0.86rem;
    line-height: 1.45;
}

.tool-versus-detalhe li span:last-child {
    flex-shrink: 0;
    font-weight: 750;
}

/* Revenda entra como crédito: é dinheiro que VOLTA, não custo. */
.tool-versus-credito {
    margin-top: 0.3rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--line);
    color: var(--mint) !important;
}

.tool-versus-nota {
    color: var(--muted) !important;
    font-size: 0.8rem !important;
}

.tool-equilibrio {
    margin: 1.1rem 0 0;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: #f5f6fa;
    border: 1px solid var(--line);
    color: #333846;
    font-size: 0.9rem;
    line-height: 1.6;
}

.tool-equilibrio strong { color: var(--brand-dark); }

/* ---- Resultado ---- */
.tool-saida {
    margin-top: 1.35rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}

.tool-saida-principal {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.95rem 1.1rem;
    border-radius: 14px;
    background: var(--lav);
    border: 1px solid var(--lav-line);
}

.tool-saida-principal span {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--brand-dark);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tool-saida-principal strong {
    color: var(--brand);
    font-size: clamp(1.9rem, 7vw, 2.4rem);
    line-height: 1;
    letter-spacing: -0.02em;
}

.tool-saida-linhas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0.5rem 0 0;
}

.tool-saida-linhas > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.7rem 0.15rem;
    border-bottom: 1px solid var(--line);
}

.tool-saida-linhas dt {
    color: var(--muted);
    font-size: 0.9rem;
}

.tool-saida-linhas dd {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
}

.tool-saida-nota {
    margin: 0.9rem 0 0;
    color: #333846;
    font-size: 0.9rem;
    line-height: 1.6;
    font-weight: 600;
}

/* ---- Bloco de download ---- */
.tool-download {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.tool-download-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.95rem 1.05rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--line);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.tool-download-item:hover {
    border-color: var(--brand);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(108, 92, 231, 0.14);
}

.tool-download-formato {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 12px;
    background: var(--brand);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.03em;
}

.tool-download-texto {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.tool-download-texto strong { font-size: 1rem; }

.tool-download-texto small {
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.tool-download-seta {
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    margin-left: auto;
    color: var(--brand);
}

/* ---- Texto explicativo (a parte que ranqueia) ---- */
.tool-texto {
    max-width: 46rem;
    padding-top: 3.25rem;
    padding-bottom: 1rem;
}

.tool-texto h2 {
    margin: 0 0 0.9rem;
    font-size: clamp(1.5rem, 5vw, 2rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.tool-texto h3 {
    margin: 2.25rem 0 0.75rem;
    font-size: 1.15rem;
    line-height: 1.3;
}

.tool-texto p {
    margin: 0 0 1rem;
    color: #333846;
    font-size: 1.02rem;
    line-height: 1.7;
}

.tool-texto .check-list { margin-bottom: 1.25rem; }

.tool-lista-num {
    margin: 0 0 1.25rem;
    padding-left: 1.35rem;
    display: grid;
    gap: 0.7rem;
    color: #333846;
    font-size: 1.02rem;
    line-height: 1.65;
}

.tool-lista-num::marker,
.tool-lista-num > li::marker {
    color: var(--brand);
    font-weight: 800;
}

.tool-atualizado {
    margin-top: 2rem;
    color: var(--muted);
    font-size: 0.84rem;
}

/* ---- Tabela de exemplo ---- */
.tool-tabela-rolagem {
    margin: 0 0 1.15rem;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.tool-tabela {
    width: 100%;
    min-width: 24rem;
    border-collapse: collapse;
    font-size: 0.94rem;
}

.tool-tabela th,
.tool-tabela td {
    padding: 0.7rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid var(--line);
}

.tool-tabela th {
    background: var(--lav);
    color: var(--brand-dark);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tool-tabela td + td,
.tool-tabela th + th { text-align: right; }

.tool-tabela tbody tr:last-child td { border-bottom: none; }

.tool-tabela-total td {
    background: var(--lav);
    font-weight: 900;
    color: var(--brand-dark);
}

@media (min-width: 560px) {
    .tool-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Km rodados manda na conta inteira: fica sozinho na primeira linha. */
    .tool-campo--destaque { grid-column: 1 / -1; }

    .tool-download { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .tool-widget { padding: 1.5rem; }

    /* Comprar e alugar lado a lado: a comparação só funciona se os dois
       números estiverem no mesmo campo de visão. */
    .tool-versus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 760px) {
    .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .tool-saida-linhas { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.25rem; }

    .tool-saida-linhas > div {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }
}

@media (min-width: 1040px) {
    .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════════
   LOCAÇÃO DE VEÍCULOS
   Identidade própria derivada da cor primária (#6C5CE7): o roxo
   #9c6bf5 já é usado na categoria "Aluguel / Leasing" dos gráficos,
   então locação fala a mesma língua visual em todo o sistema.
   ═══════════════════════════════════════════════════════════════ */

:root {
    --locacao: #9c6bf5;
    --locacao-bg: rgba(156,107,245,0.12);
}

/* ── Selo "Alugado" no card do veículo ── */
.tag--locacao {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    background: var(--locacao-bg);
    color: #7a48d6;
    font-weight: 800;
}
.tag--locacao svg { width: 0.72rem; height: 0.72rem; flex-shrink: 0; }

/* ── Linha de prazo/franquia no card ── */
.veiculo-locacao {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: default;
    width: fit-content;
}
.veiculo-locacao svg { width: 0.82rem; height: 0.82rem; flex-shrink: 0; }
.veiculo-locacao--ok    { color: #7a48d6; }
.veiculo-locacao--warn  { color: #c8860a; }
.veiculo-locacao--alert { color: var(--danger); }

/* ── Chip de filtro "Alugados" ── */
.chip-sep {
    width: 1px;
    align-self: stretch;
    margin: 0.15rem 0.15rem;
    background: var(--border);
    flex-shrink: 0;
}
.chip-icon { width: 0.8rem; height: 0.8rem; flex-shrink: 0; }
.chip--locacao.chip--active {
    background: var(--locacao-bg);
    border-color: var(--locacao);
    color: #7a48d6;
}

/* ── Toggle "Este veículo é alugado" ── */
.loc-toggle {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fbfbfe;
    cursor: pointer;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--ink);
}
.loc-toggle input { width: 1rem; height: 1rem; accent-color: var(--brand); cursor: pointer; }
.loc-toggle:hover { border-color: var(--locacao); }
.loc-toggle--inline {
    margin-top: 0.35rem;
    font-weight: 600;
    font-size: 0.82rem;
    background: transparent;
    border-style: dashed;
}

/* ── Campos do contrato dentro do drawer ── */
.loc-form {
    margin-top: 0.85rem;
    padding: 0.9rem;
    border: 1px solid var(--locacao);
    border-radius: 10px;
    background: rgba(156,107,245,0.04);
}

.label-opcional {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 0.3rem;
}

/* ── Aviso de contrato vigente no drawer ── */
.loc-vigente-aviso {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.8rem;
    border: 1px solid var(--locacao);
    border-radius: 10px;
    background: rgba(156,107,245,0.05);
}
.loc-vigente-aviso > div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.loc-vigente-aviso strong { font-size: 0.88rem; color: var(--ink); }
.loc-vigente-aviso span   { font-size: 0.78rem; color: var(--muted); }

/* ── Card do contrato na aba Locação ── */
.loc-card {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1rem;
    border: 1px solid #e8eaf0;
    border-radius: 12px;
    background: #fff;
}

.loc-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.loc-card-head > div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.loc-card-head strong { font-size: 1rem; font-weight: 800; color: var(--ink); }
.loc-card-head span   { font-size: 0.78rem; color: var(--muted); }

/* ── Bloco de prazo de devolução ── */
.loc-prazo {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    border: 1px solid transparent;
}
.loc-prazo svg { width: 1.35rem; height: 1.35rem; flex-shrink: 0; }
.loc-prazo > div { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.loc-prazo strong { font-size: 0.9rem; font-weight: 800; }
.loc-prazo span   { font-size: 0.76rem; opacity: 0.85; }

.loc-prazo--ok    { background: var(--locacao-bg);            border-color: rgba(156,107,245,0.3); color: #7a48d6; }
.loc-prazo--warn  { background: rgba(200,134,10,0.1);         border-color: rgba(200,134,10,0.3);  color: #c8860a; }
.loc-prazo--alert { background: rgba(244,91,105,0.1);         border-color: rgba(244,91,105,0.3);  color: var(--danger); }

/* ── Barras de franquia de km ── */
.loc-franquia { display: flex; flex-direction: column; gap: 0.75rem; }
.loc-barra-wrap { display: flex; flex-direction: column; gap: 0.35rem; }

.loc-barra-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.76rem;
    color: var(--muted);
}
.loc-barra-label strong { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

.loc-barra {
    height: 0.5rem;
    border-radius: 999px;
    background: #eef0f6;
    overflow: hidden;
}
.loc-barra-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease;
}
.loc-barra-fill--ok    { background: var(--locacao); }
.loc-barra-fill--warn  { background: #c8860a; }
.loc-barra-fill--alert { background: var(--danger); }

/* ── Projeção de excedente ── */
.loc-projecao {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    font-size: 0.79rem;
    line-height: 1.45;
}
.loc-projecao svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.1rem; }
.loc-projecao--alert { background: rgba(244,91,105,0.08); color: var(--danger); }
.loc-projecao strong { font-weight: 800; }

/* ── Grade de dados do contrato ── */
.loc-dados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}
.loc-dados > div { display: flex; flex-direction: column; gap: 0.15rem; }
.loc-dados span   { font-size: 0.68rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.loc-dados strong { font-size: 0.88rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }

.loc-obs {
    margin: 0;
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    background: #f7f8fc;
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.5;
}

/* ── Formulário de devolução ── */
.loc-encerrar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.9rem;
    border: 1px dashed var(--locacao);
    border-radius: 10px;
    background: rgba(156,107,245,0.04);
}
.loc-encerrar > strong { font-size: 0.88rem; color: var(--ink); }
.loc-encerrar-acoes { display: flex; justify-content: flex-end; gap: 0.5rem; }

/* ── Histórico ── */
.loc-historico-titulo {
    margin: 1.25rem 0 0.6rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Mobile ── */
@media (max-width: 640px) {
    .loc-card-head { flex-direction: column; align-items: flex-start; }
    .loc-dados { grid-template-columns: repeat(2, 1fr); }
    .loc-encerrar-acoes { flex-direction: column-reverse; }
    .loc-encerrar-acoes button { width: 100%; justify-content: center; }
    .veiculo-locacao { white-space: normal; }
}