/* =====================================================================
   Visual aprovado em 02/11/2026 (.claude/skills/visual-moderno/propostas/
   alvaro-aprovada.html). Carregado DEPOIS do theme.css: redefine os tokens
   e a casca (menu, topo, barra do celular, busca ⌘K, movimento) — as telas
   que já usam as classes do tema herdam o visual sem reescrever.
   ===================================================================== */

:root {
    --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
    --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;
    --ease-out: cubic-bezier(.2, .8, .2, 1);
    --spring: cubic-bezier(.34, 1.4, .5, 1);

    --bg: #f2f5f9; --bg-subtle: #e9eef5; --surface: #ffffff; --surface-2: #f8fafc; --surface-hover: #f0f4f9;
    --border: #e2e8f0; --border-strong: #cfd8e3;
    --text: #0d1726; --text-muted: #566476; --text-faint: #6b7889;
    --ok: #16794a; --ok-bg: #dcf2e6; --warn: #9a5b00; --warn-bg: #fdf0d8; --bad: #c2312f; --bad-bg: #fde5e3; --info: #1e5f99; --info-bg: #e1edf8;
    --teal: #0f9b90; --teal-bg: #dcf3f0;
    --neutral-bg: #e9eef5;
    --side-1: #0b2140; --side-2: #123259; --side-ink: #dbe6f3; --side-muted: #8ea3bd;
    --glass: rgb(255 255 255 / .74);
    --shadow-xs: 0 1px 2px rgb(16 32 56 / .06);
    --shadow-sm: 0 1px 2px rgb(16 32 56 / .05), 0 8px 24px -12px rgb(16 32 56 / .18);
    --shadow-md: 0 1px 2px rgb(16 32 56 / .05), 0 12px 30px -14px rgb(16 32 56 / .24);
    --shadow-lg: 0 2px 6px rgb(16 32 56 / .06), 0 24px 48px -20px rgb(16 32 56 / .32);
}
[data-bs-theme="dark"] {
    --bg: #0a1018; --bg-subtle: #0e1520; --surface: #121a26; --surface-2: #162030; --surface-hover: #1a2535;
    --border: #223044; --border-strong: #2d3d54;
    --text: #e8eef6; --text-muted: #9aa9bc; --text-faint: #8292a6;
    --ok: #4fca8c; --ok-bg: #10291d; --warn: #f0b04a; --warn-bg: #2e230e; --bad: #f2837d; --bad-bg: #341716; --info: #7ab6ea; --info-bg: #10243a;
    --teal: #34c3b6; --teal-bg: #0f2e2c; --neutral-bg: #1a2535;
    --side-1: #070d16; --side-2: #0c1624; --side-ink: #d6e1ef; --side-muted: #7d8fa6;
    --glass: rgb(18 26 38 / .74);
    --shadow-xs: 0 1px 2px rgb(0 0 0 / .4);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / .4), 0 10px 28px -14px rgb(0 0 0 / .7);
    --shadow-md: 0 1px 2px rgb(0 0 0 / .4), 0 14px 32px -14px rgb(0 0 0 / .75);
    --shadow-lg: 0 2px 8px rgb(0 0 0 / .5), 0 28px 56px -18px rgb(0 0 0 / .8);
}

/* Troca de página: o navegador cruza as telas (Chrome/Edge/Safari novos). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
.app-sidebar { view-transition-name: menu; }
.mobile-nav { view-transition-name: tabbar; }

/* ---------------- Menu lateral escuro ---------------- */
.app-sidebar {
    background: linear-gradient(180deg, var(--side-1), var(--side-2));
    border-right: 0; color: var(--side-ink); overflow: hidden;
}
.app-sidebar::after { content: ''; position: absolute; inset: auto -40% -30% -40%; height: 60%; background: radial-gradient(closest-side, rgb(47 111 181 / .32), transparent); pointer-events: none; }
.app-sidebar .sidebar-brand { border-bottom: 0; padding-bottom: .4rem; }
.app-sidebar .brand-mark { background: linear-gradient(135deg, #2a6db8, #0d7f76); color: #fff; border-radius: 12px; box-shadow: 0 8px 20px -8px rgb(19 168 158 / .7); text-shadow: 0 1px 2px rgb(0 0 0 / .25); }
.app-sidebar .brand-text strong { color: #fff; }
.app-sidebar .brand-text span { color: var(--side-muted); }
.app-sidebar .nav-section-title { color: var(--side-muted); opacity: .9; }
.app-sidebar .sidebar-nav { position: relative; z-index: 1; }
.app-sidebar .nav-link { color: var(--side-ink); opacity: .82; border-radius: 11px; position: relative; z-index: 1; background: transparent !important; }
.app-sidebar .nav-link:hover { opacity: 1; background: rgb(255 255 255 / .05) !important; color: #fff; }
.app-sidebar .nav-link.active { opacity: 1; color: #fff; box-shadow: none; }
.app-sidebar .nav-link.active::before { display: none; }
.app-sidebar .nav-badge { background: #e5484d; color: #fff; }
.app-sidebar .sidebar-foot { border-top: 1px solid rgb(255 255 255 / .08); position: relative; z-index: 1; }
.app-sidebar .sidebar-foot .btn-ghost { color: var(--side-muted); }
.app-sidebar .sidebar-foot .btn-ghost:hover { color: #fff; background: rgb(255 255 255 / .06); }
/* Indicador que desliza até o item ativo (posição pelo app.js) */
.nav-ind { position: absolute; left: 0; right: 0; top: 0; border-radius: 11px; background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08);
    transition: transform .38s var(--spring), height .3s; z-index: 0; pointer-events: none; opacity: 0; }
.nav-ind.on { opacity: 1; }
.nav-ind::before { content: ''; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: #5fb3ff; }
.side-user { display: flex; gap: 10px; align-items: center; padding: 10px 8px 4px; }
.side-user b { display: block; font-size: 13px; color: #fff; line-height: 1.2; }
.side-user span { font-size: 11.5px; color: var(--side-muted); }

/* ---------------- Topo de vidro ---------------- */
.app-topbar { background: var(--glass); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); }
.cmd-btn { flex: 1; max-width: 460px; display: flex; align-items: center; gap: 10px; padding: 9px 14px; min-height: 42px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); color: var(--text-faint); box-shadow: var(--shadow-xs); transition: border-color .15s, box-shadow .15s; font-size: .9rem; text-align: left; }
.cmd-btn:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.cmd-btn kbd { margin-left: auto; font: 500 11px var(--font-mono); padding: 2px 6px; border-radius: 6px; background: var(--bg-subtle); color: var(--text-muted); }
.icon-btn { border-radius: 12px; }

/* ---------------- Cabeçalho de página e cartões ---------------- */
.page-head h1 { font: 700 1.65rem/1.15 var(--font-display); letter-spacing: -.02em; }
.card, .panel { border-radius: var(--r-lg); border-color: var(--border); box-shadow: var(--shadow-xs); }
.card-header { background: transparent; border-bottom-color: var(--border); }
.card-header:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.kpis { border-radius: var(--r-lg); }
.lift { transition: transform .22s var(--ease-out), box-shadow .22s; }
.lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ---------------- Botões ---------------- */
.btn { border-radius: 12px; transition: transform .15s, box-shadow .15s, background .15s; }
.btn:active { transform: scale(.97); }
.btn-primary { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 82%, #fff), var(--brand)); border-color: var(--brand);
    box-shadow: 0 1px 0 rgb(255 255 255 / .22) inset, 0 8px 18px -8px rgba(var(--brand-rgb), .7); }
.btn-primary:hover { box-shadow: 0 1px 0 rgb(255 255 255 / .22) inset, 0 12px 24px -8px rgba(var(--brand-rgb), .8); }
.btn-soft { background: var(--surface); border: 1px solid var(--border); color: var(--text); box-shadow: var(--shadow-xs); }
.btn-soft:hover { background: var(--surface-hover); color: var(--text); }

/* ---------------- Fichas de filtro ---------------- */
.chip-filter { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; color: var(--text-muted); text-decoration: none; transition: all .15s; white-space: nowrap; min-height: 36px; }
.chip-filter:hover { color: var(--text); border-color: var(--border-strong); text-decoration: none; }
.chip-filter.active, .chip-filter[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.pill.teal { background: var(--teal-bg); color: var(--teal); }

/* ---------------- Entrada escalonada ---------------- */
.rise { animation: ui-rise .5s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes ui-rise { from { opacity: 0; transform: translateY(12px) scale(.99); } }
@keyframes ui-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
@keyframes ui-draw { to { stroke-dashoffset: 0; } }
@keyframes ui-fade { to { opacity: 1; } }

/* ---------------- Confete ao concluir ---------------- */
.burst { position: absolute; pointer-events: none; inset: 0; overflow: visible; z-index: 50; }
.burst i { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 2px; animation: ui-fly .8s var(--ease-out) forwards; }
@keyframes ui-fly { to { transform: translate(var(--x), var(--y)) rotate(220deg); opacity: 0; } }

/* ---------------- Busca e ações (⌘K) ---------------- */
.palette-ov { position: fixed; inset: 0; z-index: 1080; background: rgb(8 16 28 / .42); backdrop-filter: blur(4px); display: none; align-items: flex-start; justify-content: center; padding: 12vh 12px 12px; }
.palette-ov.on { display: flex; animation: ui-fade .18s forwards; opacity: 0; }
.palette { width: min(640px, 100%); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--border); overflow: hidden; animation: ui-pal .28s var(--spring); }
@keyframes ui-pal { from { transform: translateY(-10px) scale(.97); opacity: 0; } }
.palette-in { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--border); color: var(--text-faint); }
.palette input { flex: 1; border: 0; outline: 0; background: none; padding: 17px 0; font: 500 16px var(--font-sans); color: var(--text); }
.palette ul { list-style: none; margin: 0; padding: 8px; max-height: min(420px, 60vh); overflow: auto; }
.palette .g { font: 500 10.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); padding: 10px 12px 4px; }
.palette .i { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 11px; cursor: pointer; color: var(--text); text-decoration: none; min-height: 44px; }
.palette .i .ico { color: var(--text-muted); }
.palette .i small { color: var(--text-faint); margin-left: auto; font-size: 12px; white-space: nowrap; }
.palette .i[aria-selected="true"] { background: var(--brand-soft); color: var(--brand-text); }
.palette .i[aria-selected="true"] .ico { color: var(--brand-text); }
.palette-foot { display: flex; gap: 14px; padding: 8px 16px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-faint); }
.palette-foot kbd { font: 500 10.5px var(--font-mono); padding: 1px 5px; border-radius: 5px; background: var(--bg-subtle); color: var(--text-muted); }

/* ---------------- Toast ---------------- */
.toast-item { background: #0d1726; color: #fff; border: 0; border-radius: 14px; box-shadow: var(--shadow-lg); }
[data-bs-theme="dark"] .toast-item { background: #e8eef6; color: #0d1726; }

/* ---------------- Celular: barra flutuante e botão + ---------------- */
@media (max-width: 767.98px) {
    .mobile-nav { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); border-radius: 24px; padding: 6px;
        background: var(--glass); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
    .mobile-nav a, .mobile-nav button { border-radius: 18px; position: relative; isolation: isolate; min-height: 50px; }
    .mobile-nav a[aria-current="page"] { color: var(--brand-text); }
    .mobile-nav a[aria-current="page"]::before { content: ''; position: absolute; inset: 2px 6px; border-radius: 16px; background: var(--brand-soft); z-index: -1; animation: ui-pop .35s var(--spring); }
    .fab-new { position: fixed; z-index: 1030; right: 20px; bottom: calc(96px + env(safe-area-inset-bottom)); width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; color: #fff; border: 0;
        background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 80%, #fff), var(--brand)); box-shadow: 0 14px 30px -10px rgba(var(--brand-rgb), .8); transition: transform .2s var(--spring); }
    .fab-new:active { transform: scale(.92) rotate(90deg); }
    .fab-new .ico { width: 24px; height: 24px; }
    .app-content { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
    .page-head h1 { font-size: 1.35rem; }
}
@media (min-width: 768px) { .fab-new { display: none; } }
/* Formulário com botão de salvar preso ao rodapé: o + sairia por cima dele. */
body:has(.form-actions) .fab-new { display: none; }

/* ---------------- Movimento reduzido ---------------- */
@media (prefers-reduced-motion: reduce) {
    .rise, .burst i, .palette, .mobile-nav a::before { animation: none !important; }
    .nav-ind { transition: none; }
    @view-transition { navigation: none; }
}

/* Campo preenchido pelo CEP: um brilho curto mostra o que mudou. */
.cep-filled { animation: ui-cep .9s var(--ease-out); }
@keyframes ui-cep { 0% { box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .35); } 100% { box-shadow: 0 0 0 0 rgba(var(--brand-rgb), 0); } }
[data-cep].is-loading { background-image: linear-gradient(90deg, transparent, rgba(var(--brand-rgb), .12), transparent); background-size: 200% 100%; animation: ui-cep-load 1s linear infinite; }
@keyframes ui-cep-load { to { background-position: -200% 0; } }

/* ---------------- Autocomplete ---------------- */
.ac-wrap { position: relative; }
.ac-list { position: absolute; z-index: 1060; left: 0; right: 0; top: calc(100% + 6px); min-width: min(320px, 92vw); margin: 0; padding: 6px; list-style: none;
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); max-height: 340px; overflow: auto;
    animation: ui-ac .18s var(--ease-out); }
@keyframes ui-ac { from { opacity: 0; transform: translateY(-4px); } }
.ac-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-height: 44px; border-radius: 10px; cursor: pointer; color: var(--text); }
.ac-item > i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-text); flex: none; font-size: .9rem; }
.ac-item[aria-selected="true"], .ac-item:hover { background: var(--surface-hover); }
.ac-item[aria-selected="true"] { box-shadow: inset 0 0 0 1px var(--border-strong); }
.ac-txt { min-width: 0; display: grid; }
.ac-label { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-sub { font-size: .78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-list mark { background: color-mix(in srgb, var(--brand) 18%, transparent); color: inherit; padding: 0 1px; border-radius: 3px; }
.ac-head { font: 500 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--warn); padding: 6px 10px 4px; }
.ac-foot, .ac-empty { font-size: .78rem; color: var(--text-faint); padding: 8px 10px 4px; }
.ac-empty { padding: 10px; }

/* Campo com ícone (lupa) que ganhou autocomplete: o input agora mora dentro de
   .ac-wrap, e a regra .field-icon > .form-control do tema não o alcança. O
   ícone passa a ficar por cima do wrapper. */
.field-icon > .ac-wrap > .form-control { padding-left: 2.3rem; }
.field-icon > i, :has(> .ac-wrap) > i, :has(> .ac-wrap) > .ico { z-index: 2; pointer-events: none; }