/* ══════════════════════════════════════════════════════════════════════════
   VAPO GO — camada visual premium (v3.1)
   Carregada DEPOIS de tokens.css, styles.css e components.css: redefine os
   tokens, a casca (menu lateral + barra superior), os componentes-base, o tema
   escuro e as animações, sem tocar nos arquivos herdados.

   Índice: 1 tokens · 2 tema escuro · 3 base · 4 casca · 5 página · 6 cartões
   7 tabelas · 8 badges · 9 botões · 10 formulários · 11 alertas · 12 modais
   13 abas/filtros · 14 login · 15 heróis e painéis · 16 gráficos · 17 módulos
   18 notificações · 19 telas herdadas · 20 animações · 21 impressão/movimento
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens (tema claro) ───────────────────────────────────────────────── */
:root {
  --fundo:        #F2F5FA;
  --card:         #FFFFFF;
  --card-2:       #F7F9FC;
  --card-hover:   #F8FAFD;
  --borda:        #E1E7F0;
  --borda-forte:  #C9D2DF;
  --texto:        #111C2D;
  --texto-2:      #3A485C;
  --muted:        #66758B;
  --titulo:       #0B2545;

  --marinho:      #0B2545;
  --marinho-2:    #143A66;
  --azul-600:     #2563EB;
  --acento:       #00B8AC;
  --acento-vivo:  #00D2C4;
  --violeta:      #7C5CF6;
  --coral:        #F9735B;
  --grad-marca:   linear-gradient(135deg, #071A33 0%, #0B2545 38%, #1B4F8A 78%, #00A398 130%);
  --grad-acento:  linear-gradient(135deg, #00D2C4 0%, #2F7DF6 100%);
  --grad-quente:  linear-gradient(135deg, #F9735B 0%, #F5B73B 100%);

  --btn-bg:       #0B2545;
  --btn-bg-hover: #143A66;
  --btn-fg:       #FFFFFF;
  --suave:        #EDF2FB;      /* fundo de hover / chip neutro */
  --suave-2:      #DCE6F5;
  --suave-fg:     #1B4F8A;

  --ok:    #12805C;  --ok-bg:    #E5F6EF;  --ok-bd:    #BFE6D5;
  --aviso: #A86E00;  --aviso-bg: #FFF5DC;  --aviso-bd: #F4DDA0;
  --erro:  #C43B2E;  --erro-bg:  #FDEEEC;  --erro-bd:  #F4CBC5;
  --ciano-bg: #E3F7F5; --ciano-fg: #00796F; --ciano-bd: #B2E5E0;
  --neutro-bg: #EEF1F6; --neutro-fg: #526079; --neutro-bd: #DBE1EA;

  --radius:      10px;
  --radius-lg2:  16px;
  --sombra:      0 1px 2px rgba(16,32,56,.05), 0 1px 3px rgba(16,32,56,.06);
  --sombra-md:   0 6px 18px rgba(16,32,56,.09), 0 1px 3px rgba(16,32,56,.06);
  --sombra-lg:   0 24px 56px rgba(8,20,40,.24);
  --brilho:      0 8px 24px rgba(0,184,172,.22);
  --anel:        0 0 0 3px rgba(37,99,235,.24);
  --topbar-h:    62px;
  --sb-w:        272px;
  --sb-w-mini:   78px;

  /* Reaponta os tokens herdados: as telas antigas mudam de tema junto. */
  --bg-app: var(--fundo);
  --bg-surface: var(--card);
  --bg-surface-elevated: var(--card-2);
  --bg-surface-glass: var(--card);
  --border-subtle: var(--borda);
  --border-active: var(--acento);
  --text-primary: var(--texto);
  --text-secondary: var(--texto-2);
  --text-muted: var(--muted);

  --font-heading: 'Outfit', 'Inter', "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-body: 'Inter', "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --shadow-sm: var(--sombra);
  --shadow-md: var(--sombra-md);
  --shadow-lg: var(--sombra-lg);
  --radius-md: 10px;
  --radius-lg: 16px;
  color-scheme: light;
}

/* ── 2. Tema escuro ───────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --fundo:        #070E1A;
  --card:         #0F1A2C;
  --card-2:       #142238;
  --card-hover:   #17273F;
  --borda:        #1F2F48;
  --borda-forte:  #30435F;
  --texto:        #E8EEF8;
  --texto-2:      #B9C5D6;
  --muted:        #8493AA;
  --titulo:       #F1F6FF;

  --btn-bg:       #2F7DF6;
  --btn-bg-hover: #4A90FF;
  --suave:        #172844;
  --suave-2:      #213758;
  --suave-fg:     #8FC0FF;

  --ok:    #4ADE9F;  --ok-bg:    rgba(74,222,159,.12);  --ok-bd:    rgba(74,222,159,.30);
  --aviso: #FBC65A;  --aviso-bg: rgba(251,198,90,.12);  --aviso-bd: rgba(251,198,90,.30);
  --erro:  #FF8A7A;  --erro-bg:  rgba(255,138,122,.12); --erro-bd:  rgba(255,138,122,.32);
  --ciano-bg: rgba(0,210,196,.12); --ciano-fg: #4FE3D8; --ciano-bd: rgba(0,210,196,.30);
  --neutro-bg: #18253A; --neutro-fg: #A9B7CB; --neutro-bd: #28384F;

  --sombra:      0 1px 2px rgba(0,0,0,.35);
  --sombra-md:   0 8px 22px rgba(0,0,0,.42);
  --sombra-lg:   0 28px 60px rgba(0,0,0,.6);
  --anel:        0 0 0 3px rgba(79,145,255,.35);
  color-scheme: dark;
}

/* ── 3. Base ──────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body { font-size: 14px; line-height: 1.5; color: var(--texto); background: var(--fundo); transition: background-color .25s ease, color .25s ease; }
h1, h2, h3, h4 { letter-spacing: -.015em; }
::selection { background: rgba(0,184,172,.28); }
:focus-visible { outline: none; box-shadow: var(--anel); border-radius: 6px; }
.ic { width: 18px; height: 18px; flex: none; vertical-align: -3px; }
.ic-sm { width: 15px; height: 15px; }
.ic-lg { width: 22px; height: 22px; }
code { font-family: Consolas, "Cascadia Mono", monospace; font-size: 12.5px; background: var(--suave); color: var(--suave-fg); padding: 2px 7px; border-radius: 6px; }
.texto-muted { color: var(--muted); }
.texto-perigo { color: var(--erro); font-weight: 600; }
.texto-ok { color: var(--ok); font-weight: 600; }
* { scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }

/* ── 4. Casca: menu lateral + barra superior ──────────────────────────────── */
#app-container { flex-direction: row !important; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100dvh; }

.sidebar {
  width: var(--sb-w); flex: none; height: 100dvh; display: flex; flex-direction: column; position: relative; z-index: 1100;
  color: #C5D3E6; padding: 0; border: none; overflow: hidden;
  background:
    radial-gradient(420px 260px at 0% 0%, rgba(0,210,196,.16), transparent 70%),
    radial-gradient(380px 300px at 100% 100%, rgba(47,125,246,.18), transparent 70%),
    linear-gradient(180deg, #081A33 0%, #0A2140 55%, #071629 100%);
  transition: width .24s cubic-bezier(.4,0,.2,1), transform .28s cubic-bezier(.4,0,.2,1);
}
.sb-topo { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 10px 18px; min-height: var(--topbar-h); }
.brand { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; min-width: 0; }
.brand img { height: 38px; width: 38px; object-fit: contain; display: block; flex: none; filter: drop-shadow(0 4px 10px rgba(0,210,196,.35)); }
.brand-txt { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; }
.brand-nome { font-family: var(--font-heading); font-weight: 800; font-size: 19px; color: #fff; letter-spacing: -.02em; }
.brand-acento { background: var(--grad-acento); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-sub { font-size: 10.5px; color: #8FA6C4; white-space: nowrap; letter-spacing: .06em; text-transform: uppercase; }
.sidebar .sb-fechar { display: none; color: #C5D3E6; }

.sb-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 12px 14px; display: flex; flex-direction: column; gap: 2px; scrollbar-color: rgba(255,255,255,.18) transparent; }
.sb-grupo { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6F86A6; padding: 16px 12px 6px; white-space: nowrap; }
.sidebar .nav-item {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin: 0; border-radius: 10px; border: none;
  color: #C5D3E6; font-size: 13.5px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; background: transparent;
  transition: background .16s, color .16s, transform .16s;
}
.sidebar .nav-item .ic { width: 19px; height: 19px; color: #8FA6C4; transition: color .16s, transform .2s; }
.sidebar .nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar .nav-item:hover .ic { color: #fff; transform: scale(1.08); }
.sidebar .nav-item.active { background: linear-gradient(90deg, rgba(0,210,196,.22), rgba(47,125,246,.14)); color: #fff; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(0,210,196,.28); }
.sidebar .nav-item.active .ic { color: var(--acento-vivo); }
.sidebar .nav-item.active::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--grad-acento); box-shadow: 0 0 12px rgba(0,210,196,.7); }
.sidebar .nav-item > span { overflow: hidden; text-overflow: ellipsis; }
.sb-conta { margin-left: auto; background: var(--coral); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }

.sb-viagem { margin: 10px 0 8px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); display: flex; flex-direction: column; gap: 6px; }
.sb-rotulo { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #7FD9D2; }
.sidebar .trip-badge-selector { background: rgba(4,14,28,.5); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 7px 10px; gap: 8px; max-width: none; color: var(--acento-vivo); }
.sidebar .trip-switcher-select { color: #fff; font-size: 13px; font-weight: 600; max-width: none; width: 100%; min-width: 0; }
.sidebar .trip-switcher-select option { color: #111C2D; }
.sidebar .trip-badge-periodo { font-size: 11.5px; color: #9FB2CC; white-space: normal; }
.sb-viagem-status { font-size: 11.5px; font-weight: 600; color: #FBC65A; display: inline-flex; gap: 6px; align-items: center; }
.sb-viagem-status[hidden] { display: none; }

.sb-recolher { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 24px; border: none; border-top: 1px solid rgba(255,255,255,.08); background: transparent; color: #8FA6C4; font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.sb-recolher:hover { color: #fff; background: rgba(255,255,255,.05); }
.sb-recolher .ic { transition: transform .24s; }

/* menu recolhido (só ícones) — por escolha do usuário no desktop… */
body.menu-recolhido .sidebar { width: var(--sb-w-mini); }
body.menu-recolhido .sidebar .brand-txt, body.menu-recolhido .sidebar .nav-item > span, body.menu-recolhido .sidebar .sb-grupo,
body.menu-recolhido .sidebar .sb-viagem, body.menu-recolhido .sidebar .sb-recolher span, body.menu-recolhido .sidebar .sb-conta { display: none; }
body.menu-recolhido .sidebar .nav-item { justify-content: center; padding: 11px 0; }
body.menu-recolhido .sidebar .sb-topo { justify-content: center; padding-left: 16px; }
body.menu-recolhido .sidebar .sb-recolher { justify-content: center; padding: 14px 0; }
body.menu-recolhido .sidebar .sb-recolher .ic { transform: rotate(180deg); }
body.menu-recolhido .sidebar .sb-nav { gap: 4px; }

.topbar {
  position: relative; z-index: 1000; height: var(--topbar-h); flex: none; padding: 0 22px; display: flex; align-items: center; gap: 14px; justify-content: flex-start;
  background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--borda);
}
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--acento-vivo) 0%, #2F7DF6 45%, var(--violeta) 100%); opacity: .85; }
.topbar-titulo { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.topbar-migalha { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-titulo strong { font-family: var(--font-heading); font-size: 17px; font-weight: 700; color: var(--titulo); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-acoes { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.topbar .nav-toggle { display: none; }

.tem-menu { position: relative; }
.tem-menu.aberto .ic-chev { transform: rotate(180deg); }
.usuario-btn .ic-chev { width: 14px; height: 14px; transition: transform .15s; opacity: .7; }
.menu {
  display: none; position: absolute; top: calc(100% + 10px); left: 0; min-width: 244px; margin: 0;
  background: var(--card); border: 1px solid var(--borda); border-radius: 14px; box-shadow: var(--sombra-lg); padding: 6px; list-style: none; z-index: 1210;
}
.menu-dir { left: auto; right: 0; }
.tem-menu.aberto > .menu { display: block; animation: surgir .16s ease-out; transform-origin: top right; }
.menu a, .menu li > button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 9px; border: none; background: none;
  cursor: pointer; color: var(--texto-2); font: inherit; font-size: 13.5px; font-weight: 500; text-align: left; text-decoration: none;
}
.menu a:hover, .menu li > button:hover { background: var(--suave); color: var(--titulo); }
.menu .ic { color: var(--muted); }
.menu-sep { height: 1px; background: var(--borda); margin: 6px 4px; }
.menu-perfil { padding: 10px; display: flex; gap: 10px; align-items: center; min-width: 0; }
.menu-perfil strong { display: block; font-size: 13.5px; color: var(--texto); }
.menu-perfil small { color: var(--muted); font-size: 12px; display: block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-btn { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--borda); border-radius: 999px; background: var(--card); cursor: pointer; font: inherit; color: var(--texto); transition: border-color .15s, box-shadow .15s; }
.usuario-btn:hover { border-color: var(--borda-forte); box-shadow: var(--sombra); }
.usuario-btn .nome { font-size: 13px; font-weight: 600; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--grad-acento); color: #fff; font-size: 13px; font-weight: 700; }
.avatar img, .cs-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-avatar { overflow: hidden; }
.sidebar-overlay { z-index: 1090; top: 0; background: rgba(4,12,24,.55); backdrop-filter: blur(2px); }

.faixa-concluida { display: flex; align-items: center; gap: 12px; padding: 10px 22px; background: var(--aviso-bg); color: var(--aviso); border-bottom: 1px solid var(--aviso-bd); font-size: 13.5px; flex: none; }
.faixa-concluida[hidden] { display: none; }
.faixa-concluida span { flex: 1; min-width: 0; color: var(--texto-2); }
.faixa-concluida strong { color: var(--aviso); }
.faixa-concluida .btn { background: var(--card); color: var(--texto); border-color: var(--aviso-bd); }
/* viagem concluída: some tudo que cria/edita; fica só a consulta */
body.viagem-concluida .view-panel:not(#view-inicio):not(#view-perfil):not(#view-meus-itens):not(#view-notificacoes):not(#view-preferencias):not([id^="view-admin"]) :is(.so-edicao, [data-acao="nova"], [data-acao="novo"], [data-acao="nova-lista"], [data-acao="modelo"], .ck-add, .tf-mover, #btn-nova-despesa, #btn-quick-import) { display: none !important; }

/* tablet: menu em ícones, abre por cima ao tocar no hambúrguer */
@media (max-width: 1199px) and (min-width: 768px) {
  .topbar .nav-toggle { display: inline-flex; }
  body:not(.menu-aberto) .sidebar { width: var(--sb-w-mini); }
  body:not(.menu-aberto) .sidebar .brand-txt, body:not(.menu-aberto) .sidebar .nav-item > span, body:not(.menu-aberto) .sidebar .sb-grupo,
  body:not(.menu-aberto) .sidebar .sb-viagem, body:not(.menu-aberto) .sidebar .sb-conta { display: none; }
  body:not(.menu-aberto) .sidebar .nav-item { justify-content: center; padding: 11px 0; }
  body:not(.menu-aberto) .sidebar .sb-topo { justify-content: center; }
  .sb-recolher { display: none; }
  body.menu-aberto .sidebar { position: fixed; left: 0; top: 0; width: var(--sb-w); box-shadow: var(--sombra-lg); }
  body.menu-aberto .app-main { margin-left: var(--sb-w-mini); }
  body.menu-aberto .sidebar .sb-fechar { display: inline-flex; }
}
/* celular: gaveta */
@media (max-width: 767px) {
  .topbar .nav-toggle { display: inline-flex; }
  .sidebar { position: fixed; left: 0; top: 0; width: min(86vw, 320px); transform: translateX(-104%); box-shadow: var(--sombra-lg); }
  body.menu-aberto .sidebar { transform: none; }
  body.menu-recolhido .sidebar { width: min(86vw, 320px); }
  .sb-recolher { display: none; }
  .sidebar .sb-fechar { display: inline-flex; }
  .topbar { padding: 0 12px; gap: 10px; }
  .topbar-migalha { display: none; }
  .topbar-titulo strong { font-size: 15.5px; }
  .usuario-btn .nome, .usuario-btn .ic-chev, #btn-quick-import { display: none; }
  .usuario-btn { padding: 3px; }
  .topbar-acoes { gap: 6px; }
  .faixa-concluida { padding: 10px 14px; font-size: 12.5px; }
  .menu { position: fixed; top: calc(var(--topbar-h) + 6px); right: 10px; left: 10px; min-width: 0; }
}

/* ── 5. Estrutura de página ───────────────────────────────────────────────── */
.view-panel { padding: 26px 28px 44px; }
.pagina { max-width: 1560px; width: 100%; margin: 0 auto; }
@media (max-width: 1199px) { .view-panel { padding: 22px 20px 40px; } }
@media (max-width: 640px) { .view-panel { padding: 16px 14px calc(32px + env(safe-area-inset-bottom)); } }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.page-header h2, .section-title-bar h2 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--titulo); line-height: 1.2; margin: 0; font-family: var(--font-heading); }
.page-h2-sec { font-size: 19px !important; }
.page-sub { color: var(--muted); font-size: 13.5px; margin: 4px 0 0; max-width: 96ch; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rodape { color: var(--muted); border-top: 1px solid var(--borda); font-size: 12px; padding: 18px 0 0; margin-top: 36px; }
.rodape-inner { display: flex; gap: 8px 20px; flex-wrap: wrap; justify-content: space-between; }
.duas-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }
.grade-painel { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.grade-painel > * { min-width: 0; display: grid; gap: 18px; }
@media (max-width: 1100px) { .grade-painel { grid-template-columns: 1fr; } }
.secao-titulo { display: flex; align-items: center; gap: 10px; margin: 26px 0 14px; }
.secao-titulo h3 { font-family: var(--font-heading); font-size: 18px; font-weight: 700; color: var(--titulo); margin: 0; }
.secao-titulo .conta { background: var(--suave); color: var(--suave-fg); font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.secao-titulo .card-acao { margin-left: auto; }

/* ── 6. Cartões, chips e indicadores ──────────────────────────────────────── */
.form-card, .tabela-card, .fb-topo { background: var(--card); border: 1px solid var(--borda); border-radius: var(--radius-lg2); box-shadow: var(--sombra); transition: box-shadow .2s, border-color .2s, transform .2s; }
.form-card { padding: 20px 22px; }
.form-card h3, .card-titulo h3 { font-family: var(--font-heading); font-size: 16px; font-weight: 700; color: var(--titulo); margin: 0; }
.card-titulo { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; min-width: 0; }
.card-titulo .card-acao { margin-left: auto; }
.card-desc { font-size: 13px; color: var(--muted); margin: 0 0 16px; }
.chip-ic { width: 36px; height: 36px; border-radius: 11px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--suave); color: var(--suave-fg); }
.chip-ic.chip-sm { width: 30px; height: 30px; border-radius: 9px; }
.chip-ic.chip-sm .ic { width: 15px; height: 15px; }
.chip-ic.verde { background: var(--ok-bg); color: var(--ok); }
.chip-ic.ambar { background: var(--aviso-bg); color: var(--aviso); }
.chip-ic.rubro { background: var(--erro-bg); color: var(--erro); }
.chip-ic.oliva { background: var(--ciano-bg); color: var(--ciano-fg); }
.chip-ic.violeta { background: rgba(124,92,246,.13); color: var(--violeta); }
.chip-ic.solido { background: var(--grad-acento); color: #fff; box-shadow: var(--brilho); }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 16px; margin-bottom: 22px; }
.kpi-grid.cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1500px) { .kpi-grid.cinco { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.kpi-grid.cinco .kpi-card { padding: 16px; gap: 12px; } .kpi-grid.cinco .kpi-card .chip-ic { width: 42px; height: 42px; }
.kpi-card {
  position: relative; overflow: hidden; background: var(--card); text-align: left; padding: 18px 20px; border: 1px solid var(--borda); border-radius: var(--radius-lg2);
  box-shadow: var(--sombra); display: flex; align-items: center; gap: 16px; font: inherit; color: inherit; min-width: 0;
  transition: box-shadow .22s, transform .22s, border-color .22s;
}
.kpi-card::after { content: ""; position: absolute; inset: auto -30% -70% auto; width: 160px; height: 160px; border-radius: 50%; background: var(--grad-acento); opacity: 0; filter: blur(34px); transition: opacity .3s; pointer-events: none; }
.kpi-card:hover { box-shadow: var(--sombra-md); transform: translateY(-3px); border-color: var(--borda-forte); }
.kpi-card:hover::after { opacity: .16; }
button.kpi-link { cursor: pointer; width: 100%; }
.kpi-card .chip-ic { width: 48px; height: 48px; border-radius: 14px; }
.kpi-card .chip-ic .ic { width: 22px; height: 22px; }
.kpi-corpo { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.kpi-num { font-family: var(--font-heading); font-size: 28px; font-weight: 700; letter-spacing: -.03em; color: var(--texto); line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi-num small { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.kpi-num-sm { font-size: 21px; }
.kpi-label { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.kpi-corpo .barra { margin-top: 8px; }
.kpi-card.destaque { background: var(--grad-marca); border-color: transparent; color: #fff; }
.kpi-card.destaque .kpi-num { color: #fff; } .kpi-card.destaque .kpi-label { color: #BFD3EA; }
.kpi-card.destaque .chip-ic { background: rgba(255,255,255,.14); color: #fff; }
.barra { display: block; height: 8px; background: var(--suave-2); border-radius: 999px; overflow: hidden; }
.barra > span { display: block; height: 100%; border-radius: 999px; background: var(--grad-acento); transition: width .9s cubic-bezier(.2,.8,.2,1); position: relative; overflow: hidden; }
.barra > span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transform: translateX(-100%); animation: varrer 2.6s ease-in-out infinite; }
.barra > span.ok { background: linear-gradient(90deg, #12B981, #4ADE9F); }
.barra > span.estourou { background: var(--grad-quente); }

.metrics-grid.kpi-mini { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 18px; }
.metric-card { border-radius: 14px; padding: 14px 16px; box-shadow: var(--sombra); flex-direction: column-reverse; background: var(--card); border-color: var(--borda); }
.metric-card:hover { transform: translateY(-2px); border-color: var(--borda-forte); }
.metric-label { font-size: 12.5px; color: var(--muted); text-transform: none; letter-spacing: 0; }
.metric-value { font-size: 22px !important; font-weight: 700; color: var(--texto) !important; letter-spacing: -.02em; font-family: var(--font-heading); }
.day-card { border-radius: 14px; box-shadow: var(--sombra); background: var(--card); border-color: var(--borda); }
.day-card:hover { border-color: var(--acento); box-shadow: var(--sombra-md); transform: translateY(-3px); }
.day-number { color: var(--titulo); }

/* ── 7. Tabelas ───────────────────────────────────────────────────────────── */
.tabela-card { overflow: hidden; margin-bottom: 20px; }
.tabela-wrapper { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela thead th { background: var(--card-2); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 11px 16px; border-bottom: 1px solid var(--borda); text-align: left; white-space: nowrap; }
.tabela thead th.ordenavel { cursor: pointer; user-select: none; }
.tabela thead th.ordenavel:hover { color: var(--titulo); }
.tabela thead th .ic { width: 12px; height: 12px; margin-left: 4px; opacity: .55; }
.tabela thead th.ordem-ativa { color: var(--suave-fg); } .tabela thead th.ordem-ativa .ic { opacity: 1; }
.tabela tbody td { padding: 13px 16px; vertical-align: middle; }
.tabela tbody tr { border-bottom: 1px solid var(--borda); transition: background .12s; }
.tabela tbody tr:last-child { border-bottom: none; }
.tabela tbody tr:hover { background: var(--card-hover); }
.tabela .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.linha-inativa { opacity: .6; }
.celula-pessoa { display: flex; align-items: center; gap: 10px; min-width: 0; }
.celula-pessoa strong { display: block; }
.celula-pessoa small, .sub-celula { display: block; color: var(--muted); font-size: 12px; }
.acoes-linha { display: flex; gap: 2px; align-items: center; }
.vazio { text-align: center; padding: 38px 20px; color: var(--muted); font-size: 13.5px; }
.vazio .chip-ic { width: 52px; height: 52px; border-radius: 16px; margin-bottom: 12px; animation: flutuar 4s ease-in-out infinite; }
.vazio .chip-ic .ic { width: 24px; height: 24px; }
.vazio strong { display: block; color: var(--texto); font-size: 14.5px; margin-bottom: 2px; }
.paginacao { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--borda); font-size: 12.5px; color: var(--muted); }
.paginacao .espaco { flex: 1; }
/* tabela vira cartões no celular */
@media (max-width: 720px) {
  .tabela.responsiva thead { display: none; }
  .tabela.responsiva tbody tr { display: grid; gap: 6px; padding: 14px 16px; }
  .tabela.responsiva tbody td { padding: 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
  .tabela.responsiva tbody td[data-rotulo]::before { content: attr(data-rotulo); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); min-width: 92px; }
  .tabela.responsiva .num { text-align: left; }
}

/* ── 8. Badges ────────────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; font-size: 11.5px; font-weight: 600; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.badge-ativo    { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-bd); }
.badge-inativo  { background: var(--neutro-bg); color: var(--neutro-fg); border-color: var(--neutro-bd); }
.badge-usuario  { background: var(--suave); color: var(--suave-fg); border-color: var(--suave-2); }
.badge-admin    { background: var(--marinho); color: #fff; }
.badge-alerta   { background: var(--aviso-bg); color: var(--aviso); border-color: var(--aviso-bd); }
.badge-perigo   { background: var(--erro-bg); color: var(--erro); border-color: var(--erro-bd); }
.badge-ciano    { background: var(--ciano-bg); color: var(--ciano-fg); border-color: var(--ciano-bd); }
.badge-ponto::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-papel-administrador { background: var(--grad-marca); color: #fff; }
.badge-papel-moderador { background: var(--ciano-bg); color: var(--ciano-fg); border-color: var(--ciano-bd); }
.badge-papel-participante { background: var(--suave); color: var(--suave-fg); border-color: var(--suave-2); }
.badge-papel-leitor { background: var(--neutro-bg); color: var(--neutro-fg); border-color: var(--neutro-bd); }
.tag-viagem { display: inline-block; background: var(--neutro-bg); color: var(--texto-2); border-radius: 7px; padding: 2px 9px; font-size: 12px; font-weight: 500; margin: 1px 4px 1px 0; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

/* ── 9. Botões ────────────────────────────────────────────────────────────── */
.btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 10px;
  font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.2; border: 1px solid transparent; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .2s, transform .12s, opacity .15s;
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn:focus-visible { box-shadow: var(--anel); }
.btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 1px 2px rgba(11,37,69,.3); }
.btn-primary::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-18deg); transition: left .55s ease; }
.btn-primary:hover { background: var(--btn-bg-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(11,37,69,.28); }
.btn-primary:hover::before { left: 120%; }
.btn-acento { background: var(--grad-acento); color: #fff; box-shadow: var(--brilho); }
.btn-acento:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn-secondary { background: var(--card); color: var(--texto-2); border-color: var(--borda-forte); }
.btn-secondary:hover { background: var(--card-2); border-color: var(--muted); color: var(--texto); }
.btn-danger { background: var(--card); color: var(--erro); border-color: var(--erro-bd); }
.btn-danger:hover { background: var(--erro); color: #fff; border-color: var(--erro); }
.btn-danger-solido { background: #C43B2E; color: #fff; }
.btn-danger-solido:hover { background: #A93226; }
.btn-ghost { background: transparent; color: var(--texto-2); }
.btn-ghost:hover { background: var(--suave); color: var(--titulo); }
.btn-sm { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; gap: 6px; }
.btn-lg { padding: 13px 22px; font-size: 14.5px; border-radius: 12px; }
.btn-block { display: flex; width: 100%; }
.btn-icone { width: 34px; height: 34px; padding: 0; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .15s; flex: none; position: relative; }
.btn-icone:hover { background: var(--suave); color: var(--titulo); }
.btn-icone.perigo:hover { background: var(--erro-bg); color: var(--erro); }
.btn-icone[disabled] { opacity: .3; pointer-events: none; }
.btn-icone-borda { border-color: var(--borda); background: var(--card); width: 38px; height: 38px; border-radius: 999px; color: var(--texto-2); }
.btn-icone-borda:hover { border-color: var(--borda-forte); box-shadow: var(--sombra); transform: translateY(-1px); }

/* ── 10. Formulários ──────────────────────────────────────────────────────── */
.form-label { font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.form-input, .form-textarea, .form-select { border: 1px solid var(--borda-forte); border-radius: 10px; font-family: inherit; font-size: 14px; color: var(--texto); background: var(--card); transition: border-color .15s, box-shadow .15s; }
.form-input:hover, .form-textarea:hover, .form-select:hover { border-color: var(--muted); }
.form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; border-color: var(--azul-600); box-shadow: var(--anel); }
.form-input::placeholder, .form-textarea::placeholder { color: var(--muted); opacity: .7; }
.form-hint { font-size: 12px; color: var(--muted); }
input[type=checkbox], input[type=radio] { accent-color: var(--acento); }
input[type=file] { width: 100%; padding: 8px; border: 1px dashed var(--borda-forte); border-radius: 10px; background: var(--card-2); font-family: inherit; font-size: 13px; color: var(--texto-2); }
input[type=file]::file-selector-button { margin-right: 12px; padding: 7px 12px; border: 1px solid var(--borda-forte); border-radius: 7px; background: var(--card); color: var(--texto-2); font: inherit; font-weight: 600; font-size: 12.5px; cursor: pointer; }
.campo-busca { position: relative; }
.campo-busca .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.campo-busca input { padding-left: 38px !important; width: 100%; }
.cresce { flex: 1; min-width: 200px; }
.barra-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 12px 14px; margin-bottom: 16px; }
.barra-filtros .form-select, .barra-filtros input[type=date] { width: auto; min-width: 150px; }
.interruptor { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--texto-2); user-select: none; position: relative; }
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
.interruptor .trilho { width: 40px; height: 23px; border-radius: 999px; background: var(--borda-forte); position: relative; transition: background .2s; flex: none; }
.interruptor .trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .22s cubic-bezier(.3,1.4,.5,1); }
.interruptor input:checked + .trilho { background: var(--acento); }
.interruptor input:checked + .trilho::after { transform: translateX(17px); }
.interruptor input:focus-visible + .trilho { box-shadow: var(--anel); }

/* ── 11. Alertas ──────────────────────────────────────────────────────────── */
.alert { padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; border: 1px solid; margin-bottom: 16px; word-break: break-word; }
.alert[hidden] { display: none; }
.alert-flex { display: flex; align-items: flex-start; gap: 11px; }
.alert-corpo { flex: 1; min-width: 0; }
.alert-success { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-bd); }
.alert-danger  { background: var(--erro-bg); color: var(--erro); border-color: var(--erro-bd); }
.alert-warning { background: var(--aviso-bg); color: var(--aviso); border-color: var(--aviso-bd); }
.alert-info    { background: var(--suave); color: var(--suave-fg); border-color: var(--suave-2); }

/* ── 12. Modais ───────────────────────────────────────────────────────────── */
.modal-overlay { background: rgba(6,14,28,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal-window { border-radius: 18px; box-shadow: var(--sombra-lg); border: 1px solid var(--borda); background: var(--card); animation: subir .22s cubic-bezier(.2,.9,.3,1.1); }
.modal-window.modal-premium { max-width: 560px; }
.modal-window.modal-premium.largo { max-width: 740px; }
.modal-premium .modal-header { border-bottom: none; padding: 20px 24px 0; background: transparent; }
.modal-header h3 { font-family: var(--font-heading); font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--titulo); margin: 0; }
.modal-close-btn { color: var(--muted); width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.modal-close-btn:hover { background: var(--suave); color: var(--titulo); }
.modal-premium .modal-body { padding: 14px 24px 24px; }
.modal-rodape { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.confirmar-msg { color: var(--texto-2); font-size: 14px; line-height: 1.55; margin: 4px 0 0; }
.mf-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.mf-grade .form-group { margin-bottom: 14px; min-width: 0; }
.mf-grade .form-group .form-input, .mf-grade .form-group .form-select, .mf-grade .form-group .form-textarea { width: 100%; }
.mf-cheio { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .mf-grade { grid-template-columns: 1fr; } .modal-rodape .btn { flex: 1; }
  .modal-overlay { padding: 0 !important; align-items: flex-end !important; }
  .modal-window { border-radius: 20px 20px 0 0; max-height: 94dvh; width: 100% !important; max-width: none !important; animation: gaveta .26s cubic-bezier(.2,.9,.3,1); }
}

/* ── 13. Abas e filtros ───────────────────────────────────────────────────── */
.fb-topo { padding: 18px 22px 0; margin-bottom: 16px; }
.abas { display: flex; gap: 2px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.abas.soltas { margin: 0 0 18px; border-bottom: 1px solid var(--borda); }
.aba { display: inline-flex; align-items: center; gap: 8px; padding: 11px 14px; border: none; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.aba:hover { color: var(--titulo); }
.aba.ativa { color: var(--suave-fg); border-bottom-color: var(--acento); }
.aba .conta { background: var(--suave); color: var(--suave-fg); font-size: 11.5px; padding: 1px 8px; border-radius: 999px; }
.chips-filtro { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.chip-filtro { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; border: 1px solid var(--borda-forte); background: var(--card); color: var(--texto-2); transition: all .15s; }
.chip-filtro:hover { border-color: var(--acento); color: var(--titulo); background: var(--suave); transform: translateY(-1px); }
.chip-filtro.ativo { background: var(--btn-bg); border-color: var(--btn-bg); color: #fff; }
.modelos { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.modelos small { color: var(--muted); font-size: 12.5px; margin-right: 2px; }
.modelo { font: inherit; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; cursor: pointer; border: 1px dashed var(--borda-forte); background: var(--card); color: var(--texto-2); transition: all .15s; }
.modelo:hover { border-color: var(--acento); border-style: solid; color: var(--titulo); background: var(--suave); }
.ficha { display: grid; font-size: 13.5px; }
.ficha div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--borda); }
.ficha div:first-child { border-top: none; }
.ficha div > span:first-child { color: var(--muted); flex: none; }
.ficha div > span:last-child { font-weight: 600; text-align: right; min-width: 0; }

/* ── 14. Login ────────────────────────────────────────────────────────────── */
.login-screen { display: block; padding: 0; background: var(--fundo); min-height: 100dvh; }
.login-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100dvh; }
.login-hero { position: relative; overflow: hidden; color: #fff; padding: 56px 64px; display: flex; flex-direction: column; justify-content: space-between; background: var(--grad-marca); }
.login-hero::before { content: ""; position: absolute; right: -200px; top: 50%; width: 660px; height: 660px; transform: translateY(-50%); border-radius: 50%; background: repeating-radial-gradient(circle, rgba(255,255,255,.08) 0 1px, transparent 1px 46px); animation: girar 90s linear infinite; }
.login-hero::after { content: ""; position: absolute; left: -120px; bottom: -140px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(0,210,196,.5), transparent 65%); filter: blur(10px); animation: flutuar 9s ease-in-out infinite; }
.login-hero > * { position: relative; z-index: 1; }
.login-hero > div:first-child { margin: auto 0; }
.login-selo { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #BFD3EA; }
.login-hero h1 { font-family: var(--font-heading); font-size: 42px; line-height: 1.08; letter-spacing: -.03em; font-weight: 700; margin: 18px 0 14px; max-width: 15ch; color: #fff; }
.login-hero p.lead { font-size: 16px; color: #C9D6E8; max-width: 46ch; margin: 0; }
.login-pontos { list-style: none; display: grid; gap: 14px; margin: 34px 0 0; padding: 0; }
.login-pontos li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: #DCE6F3; max-width: 48ch; animation: entrar .6s both; }
.login-pontos li:nth-child(2) { animation-delay: .12s; } .login-pontos li:nth-child(3) { animation-delay: .24s; }
.login-pontos .chip-ic { background: rgba(255,255,255,.12); color: #fff; width: 36px; height: 36px; backdrop-filter: blur(6px); }
.login-pontos strong { display: block; color: #fff; }
.login-hero-rodape { font-size: 12px; color: #9FB2CC; }
.login-lado { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--card); }
.login-caixa { width: 100%; max-width: 380px; animation: entrar .5s both; }
.login-caixa .login-logo { height: 96px; width: auto; max-width: none; margin: 0 0 22px -6px; display: block; filter: none; }
.login-caixa h2 { font-family: var(--font-heading); font-size: 26px; letter-spacing: -.02em; color: var(--titulo); margin: 0 0 4px; }
.login-caixa .sub { color: var(--muted); margin: 0 0 24px; font-size: 14px; }
.login-caixa .form-input { padding: 12px 14px; width: 100%; }
.login-rodape { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--borda); font-size: 12.5px; color: var(--muted); }
@media (max-width: 880px) { .login-split { grid-template-columns: 1fr; } .login-hero { display: none; } }

/* ── 15. Heróis e painéis ─────────────────────────────────────────────────── */
.saudacao, .heroi {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 28px 30px; border-radius: 20px; margin-bottom: 22px; color: #fff;
  position: relative; overflow: hidden; box-shadow: var(--sombra-md); background: var(--grad-marca); isolation: isolate;
}
.saudacao::before, .heroi::before { content: ""; position: absolute; z-index: -1; right: -150px; top: 50%; width: 460px; height: 460px; transform: translateY(-50%); border-radius: 50%; background: repeating-radial-gradient(circle, rgba(255,255,255,.08) 0 1px, transparent 1px 36px); animation: girar 80s linear infinite; }
.saudacao::after, .heroi::after { content: ""; position: absolute; z-index: -1; left: 30%; bottom: -160px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(0,210,196,.42), transparent 65%); animation: flutuar 8s ease-in-out infinite; }
.saudacao-txt, .heroi-txt { min-width: 0; flex: 1 1 320px; }
.saudacao h2, .heroi h2 { font-family: var(--font-heading); font-size: 28px; letter-spacing: -.02em; font-weight: 700; margin: 8px 0 2px; color: #fff; line-height: 1.15; }
.saudacao .meta, .heroi .meta { color: #C9D6E8; font-size: 14px; }
.saudacao .lado, .heroi .lado { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.heroi .btn-secondary, .saudacao .btn-secondary { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.26); backdrop-filter: blur(6px); }
.heroi .btn-secondary:hover, .saudacao .btn-secondary:hover { background: rgba(255,255,255,.22); color: #fff; }
.heroi .btn-claro, .saudacao .btn-claro { background: #fff; color: #0B2545; }
.heroi .btn-claro:hover { background: #E9F1FC; transform: translateY(-1px); }
.heroi-avatar { width: 78px; height: 78px; border-radius: 50%; border: 3px solid rgba(255,255,255,.35); box-shadow: 0 8px 24px rgba(0,0,0,.3); overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 700; color: #fff; }
.heroi-avatar img { width: 100%; height: 100%; object-fit: cover; }
.contagem { display: inline-flex; align-items: baseline; gap: 8px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); padding: 10px 18px; border-radius: 16px; font-size: 13.5px; color: #DCE6F3; backdrop-filter: blur(6px); }
.contagem b { font-family: var(--font-heading); font-size: 30px; color: #fff; letter-spacing: -.02em; }
.selo-fase { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.fase-planejamento { background: var(--suave); color: var(--suave-fg); }
.fase-em_andamento { background: var(--ok-bg); color: var(--ok); }
.fase-encerrada { background: var(--aviso-bg); color: var(--aviso); }
.fase-concluida { background: var(--neutro-bg); color: var(--neutro-fg); }
.heroi .selo-fase { background: rgba(255,255,255,.16); color: #fff; }
.grupo-avatares { display: flex; align-items: center; margin-top: 14px; }
.grupo-avatares .cs-avatar { border: 2px solid rgba(255,255,255,.55); margin-right: -8px; transition: transform .18s; }
.grupo-avatares .cs-avatar:hover { transform: translateY(-3px) scale(1.08); z-index: 2; }
.grupo-total { margin-left: 18px; font-size: 12.5px; color: #C9D6E8; }
.form-card .grupo-avatares .cs-avatar, .vg-card .grupo-avatares .cs-avatar { border-color: var(--card); }
.form-card .grupo-total, .vg-card .grupo-total { color: var(--muted); }

.lista-linhas { display: grid; gap: 4px; }
.linha-item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 11px; min-width: 0; transition: background .14s, transform .14s; }
.linha-clicavel { cursor: pointer; }
.linha-clicavel:hover { background: var(--suave); transform: translateX(3px); }
.linha-clicavel > .ic { color: var(--muted); }
.linha-txt { flex: 1; min-width: 0; }
.linha-txt strong { display: block; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-txt small { display: block; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-vazia { color: var(--muted); font-size: 13px; padding: 10px 8px; margin: 0; }

/* cartões de viagem do painel pessoal */
.vg-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
.vg-card { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--borda); border-radius: 18px; overflow: hidden; box-shadow: var(--sombra); transition: transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s, border-color .24s; }
.vg-card:hover { transform: translateY(-5px); box-shadow: var(--sombra-md); border-color: var(--acento); }
.vg-capa { position: relative; padding: 18px 20px 16px; color: #fff; background: var(--grad-marca); overflow: hidden; isolation: isolate; }
.vg-card:nth-child(3n+2) .vg-capa { background: linear-gradient(135deg, #1B1447 0%, #3B2A8F 55%, #2F7DF6 130%); }
.vg-card:nth-child(3n+3) .vg-capa { background: linear-gradient(135deg, #3A1325 0%, #8A2B4A 55%, #F9735B 130%); }
.vg-capa::after { content: ""; position: absolute; z-index: -1; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(255,255,255,.1) 0 1px, transparent 1px 22px); transition: transform .6s; }
.vg-card:hover .vg-capa::after { transform: scale(1.25) rotate(20deg); }
.vg-capa h4 { font-family: var(--font-heading); font-size: 19px; font-weight: 700; margin: 10px 0 2px; color: #fff; line-height: 1.2; }
.vg-capa small { color: #C9D6E8; font-size: 12.5px; }
.vg-capa .vg-dias { position: absolute; right: 18px; top: 16px; text-align: right; font-size: 11.5px; color: #DCE6F3; }
.vg-capa .vg-dias b { display: block; font-family: var(--font-heading); font-size: 26px; color: #fff; line-height: 1; }
.vg-corpo { padding: 16px 20px; display: grid; gap: 12px; flex: 1; }
.vg-num { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vg-num div { background: var(--card-2); border-radius: 12px; padding: 10px 12px; }
.vg-num small { display: block; color: var(--muted); font-size: 11.5px; }
.vg-num b { font-family: var(--font-heading); font-size: 17px; font-variant-numeric: tabular-nums; }
.vg-rodape { display: flex; align-items: center; gap: 10px; padding: 0 20px 18px; }
.vg-rodape .btn { margin-left: auto; }
.vg-atual { box-shadow: 0 0 0 2px var(--acento), var(--sombra-md); }

/* feed de novidades */
.feed { display: grid; gap: 0; position: relative; }
.feed-item { display: flex; gap: 12px; padding: 12px 6px; border-radius: 12px; position: relative; cursor: pointer; transition: background .14s; }
.feed-item:hover { background: var(--suave); }
.feed-item + .feed-item::before { content: ""; position: absolute; left: 22px; top: -10px; height: 20px; width: 2px; background: var(--borda); }
.feed-ic { position: relative; flex: none; }
.feed-ic .chip-ic { position: absolute; right: -6px; bottom: -6px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--card); }
.feed-ic .chip-ic .ic { width: 10px; height: 10px; stroke-width: 2.6; }
.feed-txt { min-width: 0; flex: 1; }
.feed-txt strong { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.feed-txt small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 1px; }
.feed-txt .feed-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 5px; font-size: 11.5px; color: var(--muted); }
.feed-rolagem { max-height: 560px; overflow-y: auto; margin: 0 -8px; padding: 0 8px; }

/* ── 16. Gráficos (CSS/SVG puros) ─────────────────────────────────────────── */
.rosca-wrap { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.rosca { --tam: 168px; width: var(--tam); height: var(--tam); border-radius: 50%; position: relative; flex: none; animation: crescer .8s cubic-bezier(.2,.8,.2,1) both; }
.rosca::after { content: ""; position: absolute; inset: 26px; border-radius: 50%; background: var(--card); }
.rosca-centro { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.rosca-centro b { font-family: var(--font-heading); font-size: 19px; letter-spacing: -.02em; }
.rosca-centro small { color: var(--muted); font-size: 11.5px; }
.legenda { display: grid; gap: 7px; flex: 1; min-width: 190px; }
.legenda div { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legenda span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legenda b { font-variant-numeric: tabular-nums; font-weight: 600; }
.barras { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding-top: 10px; }
.barras .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; min-width: 0; }
.barras .col i { width: 100%; max-width: 34px; border-radius: 7px 7px 3px 3px; background: var(--grad-acento); min-height: 3px; transform-origin: bottom; animation: subirBarra .7s cubic-bezier(.2,.8,.2,1) both; transition: filter .15s; }
.barras .col:hover i { filter: brightness(1.15); }
.barras .col small { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.anel { --p: 0; --tam: 64px; width: var(--tam); height: var(--tam); border-radius: 50%; flex: none; position: relative; display: flex; align-items: center; justify-content: center; background: conic-gradient(var(--acento-vivo) calc(var(--p) * 1%), var(--suave-2) 0); font-weight: 700; font-size: 13px; }
.anel::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--card); }
.anel span { position: relative; }
.heroi .anel, .saudacao .anel { background: conic-gradient(#fff calc(var(--p) * 1%), rgba(255,255,255,.2) 0); color: #fff; }
.heroi .anel::before, .saudacao .anel::before { background: #123661; }
.dias-trilha { display: flex; gap: 4px; flex-wrap: wrap; }
.dias-trilha i { width: 22px; height: 22px; border-radius: 7px; font-style: normal; font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; background: var(--neutro-bg); color: var(--neutro-fg); cursor: default; }
.dias-trilha i.st-em_elaboracao { background: var(--suave); color: var(--suave-fg); }
.dias-trilha i.st-pronto_para_comparacao { background: var(--aviso-bg); color: var(--aviso); }
.dias-trilha i.st-aprovado, .dias-trilha i.st-bloqueado_final { background: var(--ok-bg); color: var(--ok); }
.agenda-item { display: flex; gap: 14px; align-items: center; padding: 9px 6px; border-radius: 11px; cursor: pointer; transition: background .14s; }
.agenda-item:hover { background: var(--suave); }
.agenda-data { width: 46px; flex: none; text-align: center; background: var(--card-2); border: 1px solid var(--borda); border-radius: 11px; padding: 5px 0; line-height: 1.1; }
.agenda-data b { display: block; font-family: var(--font-heading); font-size: 17px; }
.agenda-data small { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pessoas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.pessoa-card { display: flex; gap: 11px; align-items: center; padding: 11px 12px; border: 1px solid var(--borda); border-radius: 13px; background: var(--card-2); min-width: 0; transition: transform .16s, border-color .16s; }
.pessoa-card:hover { transform: translateY(-2px); border-color: var(--borda-forte); }
.pessoa-card strong { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pessoa-card small { display: block; font-size: 12px; color: var(--muted); }

/* ── 17. Módulos ──────────────────────────────────────────────────────────── */
.rv-lista { display: grid; gap: 10px; }
.rv-mes { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 14px 2px 2px; }
.rv-card { display: flex; gap: 14px; align-items: flex-start; background: var(--card); border: 1px solid var(--borda); border-radius: 15px; padding: 16px; box-shadow: var(--sombra); cursor: pointer; transition: border-color .18s, box-shadow .18s, transform .18s; }
.rv-card:hover { border-color: var(--acento); box-shadow: var(--sombra-md); transform: translateY(-2px); }
.rv-cancelada { opacity: .6; } .rv-cancelada strong { text-decoration: line-through; }
.rv-ic { width: 44px; height: 44px; border-radius: 13px; }
.rv-corpo { flex: 1; min-width: 0; }
.rv-topo { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.rv-topo strong { font-size: 15px; }
.rv-meta { display: flex; gap: 4px 16px; flex-wrap: wrap; color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.rv-meta span { display: inline-flex; gap: 5px; align-items: center; }
.rv-rodape { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.rv-codigo { font-family: Consolas, "Cascadia Mono", monospace; font-size: 12.5px; background: var(--suave); color: var(--suave-fg); border: 1px solid var(--suave-2); border-radius: 8px; padding: 4px 10px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; letter-spacing: .04em; }
.rv-codigo:hover { background: var(--suave-2); }
.rv-codigo small { font-family: var(--font-body); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.rv-link { font-size: 12.5px; font-weight: 600; color: var(--suave-fg); display: inline-flex; gap: 5px; align-items: center; text-decoration: none; }
.rv-link:hover { text-decoration: underline; }
.rv-direita { margin-left: auto; display: inline-flex; gap: 10px; align-items: center; font-size: 14px; }
.rv-pessoas { display: inline-flex; } .rv-pessoas .cs-avatar { margin-left: -6px; border: 2px solid var(--card); }
.tipo-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.tipo-op { position: relative; }
.tipo-op input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.tipo-op span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border: 1px solid var(--borda-forte); border-radius: 12px; font-size: 12px; font-weight: 600; color: var(--texto-2); background: var(--card); text-align: center; line-height: 1.2; transition: all .16s; }
.tipo-op span .ic { color: var(--muted); width: 20px; height: 20px; }
.tipo-op input:hover + span { border-color: var(--acento); transform: translateY(-1px); }
.tipo-op input:checked + span { border-color: var(--acento); background: var(--ciano-bg); color: var(--ciano-fg); box-shadow: inset 0 0 0 1px var(--acento); }
.tipo-op input:checked + span .ic { color: var(--ciano-fg); }
.tipo-op input:focus-visible + span { box-shadow: var(--anel); }

.tf-quadro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.tf-coluna { background: var(--card-2); border: 1px solid var(--borda); border-radius: var(--radius-lg2); padding: 12px; }
.tf-coluna > header { display: flex; align-items: center; gap: 8px; padding: 4px 6px 12px; color: var(--texto-2); font-size: 13.5px; }
.tf-coluna .conta { margin-left: auto; background: var(--card); color: var(--suave-fg); font-size: 11.5px; font-weight: 700; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--borda); }
.tf-itens { display: grid; gap: 10px; }
.tf-card { background: var(--card); border: 1px solid var(--borda); border-left: 3px solid var(--borda-forte); border-radius: 12px; padding: 13px 14px; box-shadow: var(--sombra); cursor: pointer; transition: box-shadow .18s, transform .18s; }
.tf-card:hover { box-shadow: var(--sombra-md); transform: translateY(-2px); }
.tf-card.prio-alta { border-left-color: var(--coral); } .tf-card.prio-media { border-left-color: #E0A100; }
.tf-concluida .tf-card { opacity: .72; } .tf-concluida .tf-card strong { text-decoration: line-through; }
.tf-topo strong { font-size: 14px; line-height: 1.35; }
.tf-desc { color: var(--muted); font-size: 12.5px; margin: 4px 0 0; }
.tf-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--muted); }
.tf-prazo { display: inline-flex; gap: 5px; align-items: center; } .tf-prazo.atrasada { color: var(--erro); font-weight: 600; }
.tf-resp { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }
.tf-mover { display: flex; justify-content: space-between; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--borda); }
@media (max-width: 900px) { .tf-quadro { grid-template-columns: 1fr; } }

.ck-progresso strong { font-family: var(--font-heading); font-size: 19px; color: var(--titulo); margin-right: 10px; }
.ck-progresso > span { color: var(--muted); font-size: 13px; } .ck-progresso .barra { margin-top: 10px; }
.ck-modelos { margin-bottom: 16px; }
.ck-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.ck-lista .card-titulo { margin-bottom: 10px; }
.ck-conta { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.ck-itens { list-style: none; margin: 12px 0 10px; padding: 0; display: grid; gap: 1px; }
.ck-itens li { display: flex; align-items: center; gap: 6px; padding: 4px 2px 4px 6px; border-radius: 9px; min-height: 40px; }
.ck-itens li:hover { background: var(--card-hover); }
.ck-itens label { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; font-size: 13.5px; padding: 4px 0; }
.ck-itens input[type=checkbox] { width: 18px; height: 18px; flex: none; }
.ck-itens li.feito label span { color: var(--muted); text-decoration: line-through; }
.ck-itens .btn-icone { opacity: 0; width: 28px; height: 28px; }
.ck-itens li:hover .btn-icone, .ck-itens .btn-icone:focus-visible { opacity: 1; }
@media (hover: none) { .ck-itens .btn-icone { opacity: .6; } }
.ck-add { display: flex; gap: 6px; } .ck-add .form-input { flex: 1; min-width: 0; padding: 8px 11px; font-size: 13.5px; }

.dc-grade, .eq-grade, .mr-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.dc-card { background: var(--card); border: 1px solid var(--borda); border-radius: var(--radius-lg2); padding: 16px 18px; box-shadow: var(--sombra); transition: transform .18s, box-shadow .18s; }
.dc-card:hover, .mr-card:hover, .eq-card:hover { transform: translateY(-2px); box-shadow: var(--sombra-md); }
.dc-topo { display: flex; gap: 12px; align-items: center; } .dc-topo strong { display: block; font-size: 14.5px; } .dc-topo small { color: var(--muted); font-size: 12.5px; }
.dc-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.dc-obs { color: var(--texto-2); font-size: 13px; margin: 10px 0 0; white-space: pre-wrap; }
.dc-acoes { display: flex; gap: 6px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borda); flex-wrap: wrap; }

.eq-grade { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
.eq-topo { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin-bottom: 12px; }
.eq-topo h3 { font-size: 16px; line-height: 1.3; } .eq-topo small { color: var(--muted); font-size: 12.5px; display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.eq-opcoes { display: grid; gap: 8px; }
.eq-opcao { position: relative; overflow: hidden; width: 100%; text-align: left; font: inherit; color: var(--texto); background: var(--card); border: 1px solid var(--borda-forte); border-radius: 12px; padding: 0; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.eq-opcao:hover:not([disabled]) { border-color: var(--acento); transform: translateX(3px); }
.eq-opcao[disabled] { cursor: default; }
.eq-opcao.sel { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.eq-opcao.vencedora { border-color: var(--ok); }
.eq-barra { position: absolute; inset: 0 auto 0 0; background: var(--suave); transition: width .7s cubic-bezier(.2,.8,.2,1); }
.eq-opcao.sel .eq-barra { background: var(--ciano-bg); } .eq-opcao.vencedora .eq-barra { background: var(--ok-bg); }
.eq-linha { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 14px; font-size: 13.5px; }
.eq-marca { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--borda-forte); flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--card); }
.eq-opcao.sel .eq-marca { background: var(--acento); border-color: var(--acento); color: #fff; }
.eq-marca .ic { width: 11px; height: 11px; stroke-width: 3; }
.eq-texto { flex: 1; min-width: 0; font-weight: 500; }
.eq-votantes { display: inline-flex; } .eq-votantes .cs-avatar { margin-left: -6px; border: 2px solid var(--card); }
.eq-linha b { font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; color: var(--texto-2); }
.eq-rodape { display: flex; gap: 4px; justify-content: flex-end; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--borda); }
.eq-fechada { background: var(--card-2); }
@media (max-width: 480px) { .eq-grade, .dc-grade, .mr-grade, .ck-grade, .vg-grade { grid-template-columns: 1fr; } }

.mr-fixado { border-color: var(--aviso-bd); box-shadow: 0 0 0 3px var(--aviso-bg), var(--sombra); }
.mr-tit { min-width: 0; flex: 1; } .mr-tit small { color: var(--muted); font-size: 12px; }
.mr-conteudo { color: var(--texto-2); font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; margin: 0 0 10px; }
.mr-rodape { display: flex; gap: 8px; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--borda); color: var(--muted); } .mr-rodape small { font-size: 12px; }

.oc-emoji { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex: none; }
.oc-barra { min-width: 200px; width: 34%; } .oc-barra small { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }

.tabela-usuarios .col-acoes { width: 1%; }
.us-legenda { margin-top: 4px; }
.us-papeis { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 20px; }
.us-papeis > div { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; } .us-papeis small { color: var(--muted); font-size: 12.5px; }
.us-viagens-check, .pessoas-check { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.check-pill { position: relative; cursor: pointer; }
.check-pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.check-pill span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 7px; border: 1px solid var(--borda-forte); border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--texto-2); background: var(--card); transition: all .15s; }
.us-viagens-check .check-pill span { padding-left: 13px; }
.check-pill input:checked + span { border-color: var(--acento); background: var(--ciano-bg); color: var(--ciano-fg); box-shadow: inset 0 0 0 1px var(--acento); font-weight: 600; }
.check-pill input:focus-visible + span { box-shadow: var(--anel); }
.senhas-temp { border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; margin-bottom: 12px; max-height: 320px; overflow-y: auto; }
.senha-linha { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 11px 14px; border-top: 1px solid var(--borda); }
.senha-linha:first-child { border-top: none; } .senha-linha small { display: block; color: var(--muted); font-size: 12px; }
.senha-linha code { font-size: 15px; padding: 5px 11px; letter-spacing: .04em; user-select: all; }
.us-detalhe-topo { display: flex; gap: 16px; align-items: center; padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid var(--borda); }
.us-detalhe-topo strong { display: block; font-family: var(--font-heading); font-size: 19px; color: var(--titulo); letter-spacing: -.01em; } .us-detalhe-topo small { color: var(--muted); }
.us-detalhe-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; margin-top: 12px; }
.us-sub { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 10px 0 6px; }
.us-atividades { max-height: 320px; overflow-y: auto; display: grid; gap: 2px; } .us-atividades .linha-txt small { white-space: normal; }
@media (max-width: 640px) { .us-detalhe-grade { grid-template-columns: 1fr; } .barra-filtros .form-select, .barra-filtros input[type=date] { flex: 1; } }

/* preferências */
.pref-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; align-items: start; }
.tema-opcoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tema-op { position: relative; } .tema-op input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.tema-op .amostra { display: block; height: 74px; border-radius: 12px; border: 2px solid var(--borda); overflow: hidden; position: relative; transition: border-color .15s, transform .15s; }
.tema-op .amostra::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 26%; background: #0A2140; }
.tema-op .amostra::after { content: ""; position: absolute; left: 34%; right: 10%; top: 22%; height: 16%; border-radius: 4px; box-shadow: 0 22px 0 0 currentColor; background: currentColor; opacity: .5; }
.tema-op .amostra.claro { background: #F2F5FA; color: #C9D2DF; } .tema-op .amostra.escuro { background: #070E1A; color: #30435F; }
.tema-op .amostra.sistema { background: linear-gradient(110deg, #F2F5FA 50%, #070E1A 50%); color: #8493AA; }
.tema-op small { display: block; text-align: center; margin-top: 6px; font-weight: 600; font-size: 12.5px; color: var(--texto-2); }
.tema-op input:checked + .amostra { border-color: var(--acento); box-shadow: var(--brilho); } .tema-op input:hover + .amostra { transform: translateY(-2px); }
.pref-tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pref-tabela th { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 6px 8px; }
.pref-tabela th:first-child { text-align: left; } .pref-tabela td { padding: 10px 8px; border-top: 1px solid var(--borda); text-align: center; }
.pref-tabela td:first-child { text-align: left; } .pref-tabela td small { display: block; color: var(--muted); font-size: 12px; }

/* perfil */
.pf-capa { height: 150px; border-radius: 20px 20px 0 0; background: var(--grad-marca); position: relative; overflow: hidden; }
.pf-capa::after { content: ""; position: absolute; right: -80px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(255,255,255,.09) 0 1px, transparent 1px 30px); animation: girarLivre 80s linear infinite; }
.pf-cabeca { background: var(--card); border: 1px solid var(--borda); border-top: none; border-radius: 0 0 20px 20px; padding: 0 28px 22px; display: flex; gap: 22px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 22px; box-shadow: var(--sombra); }
.pf-foto { width: 132px; height: 132px; border-radius: 50%; border: 5px solid var(--card); margin-top: -66px; position: relative; flex: none; box-shadow: var(--sombra-md); background: var(--grad-acento); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 50px; font-weight: 700; }
.pf-foto .pf-foto-img { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pf-foto img { width: 100%; height: 100%; object-fit: cover; }
.pf-foto .pf-camera { position: absolute; right: 2px; bottom: 6px; width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--card); background: var(--btn-bg); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .16s; }
.pf-foto .pf-camera:hover { transform: scale(1.1); }
.pf-ident { flex: 1; min-width: 240px; padding-top: 14px; }
.pf-ident h2 { font-family: var(--font-heading); font-size: 27px; margin: 0; color: var(--titulo); letter-spacing: -.02em; }
.pf-ident p { margin: 2px 0 8px; color: var(--muted); }
.pf-ident .pf-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.pf-acoes { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 4px; }
.pf-completude { display: flex; gap: 14px; align-items: center; }
.pf-completude .lista-falta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

/* ── 18. Notificações ─────────────────────────────────────────────────────── */
.sino { position: relative; }
.sino-conta { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--coral); color: #fff; font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--card); animation: pulsar 2s infinite; }
.sino-conta[hidden], .sb-conta[hidden] { display: none; }
.sino.tocando .ic { animation: tocar .9s ease; transform-origin: top center; }
.painel-notif { width: 380px; max-width: calc(100vw - 20px); padding: 0; overflow: hidden; }
.painel-notif-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 8px 16px; }
.painel-notif-lista { max-height: 420px; overflow-y: auto; padding: 0 6px; }
.painel-notif > .btn-block { border-top: 1px solid var(--borda); border-radius: 0; padding: 11px; }
.notif { display: flex; gap: 12px; padding: 11px 10px; border-radius: 11px; cursor: pointer; position: relative; transition: background .14s; }
.notif:hover { background: var(--suave); }
.notif.nao-lida::after { content: ""; position: absolute; right: 10px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--acento-vivo); box-shadow: 0 0 8px var(--acento-vivo); }
.notif.nao-lida strong { font-weight: 700; }
.notif .linha-txt strong, .notif .linha-txt small { white-space: normal; }
.notif .linha-txt { padding-right: 14px; }
.notif-quando { font-size: 11.5px; color: var(--muted); margin-top: 3px; display: block; }
.pilha-popups { position: fixed; right: 18px; bottom: 18px; z-index: 6000; display: grid; gap: 10px; width: min(380px, calc(100vw - 28px)); pointer-events: none; }
.popup-notif { pointer-events: auto; display: flex; gap: 12px; align-items: flex-start; padding: 14px 14px 14px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--borda); box-shadow: var(--sombra-lg); cursor: pointer; position: relative; overflow: hidden; animation: deslizar .4s cubic-bezier(.2,.9,.3,1.15) both; }
.popup-notif::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad-acento); }
.popup-notif::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--grad-acento); opacity: .5; transform-origin: left; animation: esvaziar 7s linear forwards; }
.popup-notif.saindo { animation: sumir .3s ease forwards; }
.popup-notif strong { display: block; font-size: 13.5px; line-height: 1.35; } .popup-notif small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.popup-notif .popup-viagem { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ciano-fg); }
@media (max-width: 640px) { .pilha-popups { right: 10px; left: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); width: auto; } }

/* ── 19. Telas herdadas: acertos para o novo idioma e para o tema escuro ─── */
.section-title-bar { margin-bottom: 18px; }
.cs-hero, .rm-hero, .dashboard-hero { border-radius: 20px; }
.btn-ia-action { border-radius: 10px; }
#modal-primeiro-acesso.pa-voluntario .modal-body > p { display: none; }
:root[data-theme="dark"] :is(.cs-painel, .pf-card, .locais-table-card, .locais-toolbar, .proposta-card, .comparador-col, .rm-dia-card, .modal-window, .local-drawer, .integracao-card, .cs-despesa, .comentario-item) { background-color: var(--card); border-color: var(--borda); color: var(--texto); }
:root[data-theme="dark"] :is(table, thead, th, td) { border-color: var(--borda); }
:root[data-theme="dark"] :is(.locais-table thead, .locais-table th) { background: var(--card-2); color: var(--muted); }
:root[data-theme="dark"] img.login-logo, :root[data-theme="dark"] .login-caixa .login-logo { filter: drop-shadow(0 0 14px rgba(0,210,196,.25)); }
:root[data-theme="dark"] .toast { background: var(--card-2); color: var(--texto); border-color: var(--borda-forte); }

/* ── 20. Animações ────────────────────────────────────────────────────────── */
@keyframes surgir  { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes subir   { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes gaveta  { from { transform: translateY(100%); } to { transform: none; } }
@keyframes entrar  { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes girar   { to { transform: translateY(-50%) rotate(360deg); } }
@keyframes girarLivre { to { transform: rotate(360deg); } }
@keyframes varrer  { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
@keyframes crescer { from { opacity: 0; transform: scale(.6) rotate(-90deg); } to { opacity: 1; transform: none; } }
@keyframes subirBarra { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pulsar  { 0%, 100% { box-shadow: 0 0 0 0 rgba(249,115,91,.55); } 60% { box-shadow: 0 0 0 7px rgba(249,115,91,0); } }
@keyframes tocar   { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-7deg); } 75% { transform: rotate(3deg); } }
@keyframes deslizar { from { opacity: 0; transform: translateX(110%); } to { opacity: 1; transform: none; } }
@keyframes sumir   { to { opacity: 0; transform: translateX(110%); } }
@keyframes esvaziar { to { transform: scaleX(0); } }
@keyframes brilhar { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }

/* entrada em cascata: cada bloco da tela sobe um instante depois do anterior */
.view-panel.active .pagina > * { animation: entrar .5s cubic-bezier(.2,.8,.2,1) both; }
.view-panel.active .pagina > *:nth-child(2) { animation-delay: .06s; }
.view-panel.active .pagina > *:nth-child(3) { animation-delay: .12s; }
.view-panel.active .pagina > *:nth-child(4) { animation-delay: .18s; }
.view-panel.active .pagina > *:nth-child(n+5) { animation-delay: .24s; }
.kpi-grid > *, .vg-grade > *, .ck-grade > *, .dc-grade > *, .eq-grade > *, .mr-grade > *, .rv-lista > article, .pessoas-grade > * { animation: entrar .5s cubic-bezier(.2,.8,.2,1) both; }
.kpi-grid > *:nth-child(2), .vg-grade > *:nth-child(2), .ck-grade > *:nth-child(2), .dc-grade > *:nth-child(2), .eq-grade > *:nth-child(2), .mr-grade > *:nth-child(2), .rv-lista > article:nth-of-type(2) { animation-delay: .07s; }
.kpi-grid > *:nth-child(3), .vg-grade > *:nth-child(3), .ck-grade > *:nth-child(3), .dc-grade > *:nth-child(3), .eq-grade > *:nth-child(3), .mr-grade > *:nth-child(3), .rv-lista > article:nth-of-type(3) { animation-delay: .14s; }
.kpi-grid > *:nth-child(4), .vg-grade > *:nth-child(4), .ck-grade > *:nth-child(4), .dc-grade > *:nth-child(4), .eq-grade > *:nth-child(4), .mr-grade > *:nth-child(4), .rv-lista > article:nth-of-type(4) { animation-delay: .21s; }
.kpi-grid > *:nth-child(n+5), .vg-grade > *:nth-child(n+5), .rv-lista > article:nth-of-type(n+5) { animation-delay: .28s; }
.esqueleto { border-radius: 12px; min-height: 84px; background: linear-gradient(90deg, var(--card-2) 0px, var(--suave) 160px, var(--card-2) 320px); background-size: 800px 100%; animation: brilhar 1.4s linear infinite; }
.esqueleto.alto { min-height: 190px; }

/* ── 21. Impressão e preferência de menos movimento ───────────────────────── */
@media print { .sidebar, .topbar, .faixa-concluida, .pilha-popups { display: none !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ── 22. Acertos finos ────────────────────────────────────────────────────── */
.grade-painel > * { grid-template-columns: minmax(0, 1fr); }
.sidebar .trip-badge-selector { display: flex !important; }
.sidebar .trip-badge-periodo { display: block !important; }
/* a gaveta de local fica invisível (não só fora da tela) enquanto fechada */
.local-drawer { visibility: hidden; transition: right var(--transition-normal), visibility 0s linear .25s; }
.local-drawer.open { visibility: visible; transition: right var(--transition-normal); }
@media (max-width: 640px) {
  .saudacao, .heroi { padding: 20px; gap: 14px; border-radius: 18px; }
  .saudacao h2, .heroi h2 { font-size: 22px; }
  .heroi-avatar { width: 58px; height: 58px; font-size: 22px; }
  .heroi .lado, .saudacao .lado { margin-left: 0; width: 100%; }
  .contagem { padding: 8px 14px; } .contagem b { font-size: 24px; }
  .kpi-grid, .kpi-grid.cinco { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi-card, .kpi-grid.cinco .kpi-card { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  .kpi-card .chip-ic { width: 38px; height: 38px; border-radius: 11px; }
  .kpi-num { font-size: 22px; } .kpi-num-sm { font-size: 17px; }
  .kpi-grid > .kpi-card.destaque { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .page-header h2 { font-size: 21px; }
  .page-actions { width: 100%; } .page-actions .btn { flex: 1; }
  .pf-cabeca { padding: 0 18px 18px; gap: 12px; } .pf-foto { width: 104px; height: 104px; margin-top: -52px; font-size: 40px; } .pf-capa { height: 110px; }
  .rosca-wrap { justify-content: center; }
  .rv-card { padding: 14px; gap: 10px; } .rv-ic { width: 38px; height: 38px; }
  .rv-direita { margin-left: 0; width: 100%; justify-content: space-between; }
}
/* neutraliza a gaveta antiga de styles.css (≤1024px) — a casca nova decide sozinha */
@media (min-width: 768px) {
  .sidebar { position: relative; transform: none; max-width: none; padding: 0; height: 100dvh; top: auto; bottom: auto; left: auto; z-index: 1100; }
  body.menu-aberto .sidebar { position: fixed; left: 0; top: 0; }
}
@media (max-width: 767px) { .sidebar { padding: 0; max-width: none; z-index: 1200; height: 100dvh; } }
.sidebar { background:
    radial-gradient(420px 260px at 0% 0%, rgba(0,210,196,.16), transparent 70%),
    radial-gradient(380px 300px at 100% 100%, rgba(47,125,246,.18), transparent 70%),
    linear-gradient(180deg, #081A33 0%, #0A2140 55%, #071629 100%) !important; }
/* abas do módulo Custos no tema escuro */
:root[data-theme="dark"] .cs-tab-btn.active { background: var(--suave-2); color: #fff; }
:root[data-theme="dark"] .cs-tabs { background: var(--card-2); }
/* o JS mostra a tela de login com display:flex — a divisão precisa ocupar a tela toda mesmo assim */
.login-screen { padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; }
.login-split { width: 100%; flex: 1; }

/* ── 23. PWA: tela "Instalar app", convite e app em tela cheia ────────────── */
.pwa-heroi .pwa-icone { width: 92px; height: 92px; border-radius: 22px; flex: none; box-shadow: 0 14px 34px rgba(0,0,0,.35); animation: flutuar 5s ease-in-out infinite; }
.pwa-beneficio { display: block; padding: 18px 20px; }
.pwa-beneficio h3 { margin: 12px 0 4px; font-size: 15px; }
.pwa-beneficio p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.pwa-lista { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; }
.pwa-lista li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--borda); border-radius: 14px; background: var(--card-2); animation: entrar .45s cubic-bezier(.2,.8,.2,1) both; }
.pwa-lista strong { display: block; font-size: 14.5px; } .pwa-lista small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; line-height: 1.5; }
.pwa-num { width: 32px; height: 32px; flex: none; border-radius: 10px; background: var(--grad-acento); color: #fff; font-family: var(--font-heading); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--brilho); }
.pwa-endereco { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pwa-endereco code { flex: 1; min-width: 200px; padding: 9px 12px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pwa-faq { border-top: 1px solid var(--borda); padding: 12px 2px; }
.pwa-faq:first-of-type { border-top: none; }
.pwa-faq summary { cursor: pointer; font-weight: 600; font-size: 13.5px; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.pwa-faq summary::-webkit-details-marker { display: none; }
.pwa-faq summary::after { content: "+"; color: var(--muted); font-size: 18px; line-height: 1; transition: transform .2s; }
.pwa-faq[open] summary::after { transform: rotate(45deg); }
.pwa-faq p { margin: 8px 0 0; color: var(--texto-2); font-size: 13.5px; line-height: 1.6; }
.pwa-convite { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--ciano-bd); box-shadow: 0 0 0 3px var(--ciano-bg), var(--sombra); }
.pwa-convite img { border-radius: 12px; flex: none; }
.pwa-convite .linha-txt strong, .pwa-convite .linha-txt small { white-space: normal; }
.sb-novo { background: var(--grad-acento); text-transform: uppercase; letter-spacing: .06em; font-size: 9.5px; }
.login-pwa { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; color: var(--muted); }
.popup-fixo::after { display: none; }
/* app instalado: respeita o entalhe/ilha e a barra de gestos do aparelho */
@media (display-mode: standalone), (display-mode: minimal-ui) {
  .topbar { padding-top: env(safe-area-inset-top); height: calc(var(--topbar-h) + env(safe-area-inset-top)); }
  .sidebar .sb-topo { padding-top: calc(16px + env(safe-area-inset-top)); }
  .sidebar { padding-bottom: env(safe-area-inset-bottom); }
  .login-lado { padding-top: calc(40px + env(safe-area-inset-top)); }
  body { overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }
}

/* ── 24. Perfil do participante ───────────────────────────────────────────── */
.pessoa-card[data-perfil-usuario] { cursor: pointer; }
.pessoa-card[data-perfil-usuario]:hover { border-color: var(--acento); box-shadow: var(--sombra-md); }
.pp-topo { display: flex; gap: 18px; align-items: center; }
.pp-foto { width: 96px; height: 96px; border-radius: 50%; flex: none; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 38px; font-weight: 700; box-shadow: 0 0 0 4px var(--card), 0 0 0 6px var(--acento), var(--sombra-md); }
.pp-foto img { width: 100%; height: 100%; object-fit: cover; }
.pp-ident { min-width: 0; } .pp-ident strong { display: block; font-family: var(--font-heading); font-size: 22px; color: var(--titulo); letter-spacing: -.02em; line-height: 1.2; }
.pp-ident small { color: var(--muted); font-size: 13.5px; word-break: break-all; }
.pp-bio { margin: 16px 0 0; color: var(--texto-2); font-style: italic; line-height: 1.6; }
.pp-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.pp-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pp-numeros div { background: var(--card-2); border: 1px solid var(--borda); border-radius: 13px; padding: 12px; min-width: 0; }
.pp-numeros b { display: block; font-family: var(--font-heading); font-size: 17px; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-numeros small { color: var(--muted); font-size: 11.5px; line-height: 1.3; display: block; margin-top: 2px; }
@media (max-width: 560px) { .pp-numeros { grid-template-columns: 1fr 1fr; } .pp-foto { width: 76px; height: 76px; font-size: 30px; } .pp-ident strong { font-size: 19px; } }

/* ══════════════════════════════════════════════════════════════════════════
   25. FORMULÁRIO DE DESPESA (padrão do app Saldo: cartões + resumo ao vivo)
   ══════════════════════════════════════════════════════════════════════════ */
.cs-modal-window { max-width: 1080px; width: 100%; }
.cs-modal-header { align-items: flex-start; gap: 12px; }
.cs-modal-titulo { min-width: 0; }
.cs-modal-titulo h3 { margin: 0; }
.cs-modal-titulo p { margin: 3px 0 0; font-size: 13px; color: var(--muted); max-width: 62ch; }
.cs-modal-body { padding: 16px 22px 22px; }

.cs-form-grade { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) {
  .cs-form-grade { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); gap: 18px; }
  .cs-resumo { position: sticky; top: 4px; }
}
.cs-card { background: var(--card); border: 1px solid var(--borda); border-radius: 15px; padding: 16px 18px; min-width: 0; box-shadow: var(--sombra); }
.cs-card-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; min-width: 0; }
.cs-card-topo h4 { font-family: var(--font-heading); font-size: 15.5px; font-weight: 700; color: var(--titulo); margin: 0; min-width: 0; overflow-wrap: anywhere; }
.cs-card-topo .chip-ic { width: 32px; height: 32px; border-radius: 10px; }
.cs-card-topo .chip-ic .ic { width: 16px; height: 16px; }
.cs-card-opcional { margin-left: auto; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.cs-card .form-group:last-child { margin-bottom: 0; }
.opcional { font-weight: 400; color: var(--muted); }

.cs-valor-moeda { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0 12px; }
.cs-dois-campos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
@media (max-width: 460px) { .cs-valor-moeda, .cs-dois-campos { grid-template-columns: minmax(0, 1fr); } }
.cs-campo-grande { font-size: 20px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cs-conversao { margin: -6px 0 14px; font-size: 12.5px; color: var(--muted); }
.cs-conversao:empty { display: none; }

/* resumo ao vivo */
.cs-resumo-card { background: linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%); }
.cs-resumo-vazio { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 13px; color: var(--muted); }
.cs-resumo-total { padding-bottom: 14px; border-bottom: 1px solid var(--borda); }
.cs-resumo-rotulo { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.cs-resumo-total strong { display: block; font-family: var(--font-heading); font-size: 26px; letter-spacing: -.02em; color: var(--titulo); line-height: 1.2; overflow-wrap: anywhere; }
.cs-resumo-total small, .cs-resumo-eu small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.cs-resumo-bloco { padding: 14px 0; border-bottom: 1px solid var(--borda); }
.cs-resumo-bloco h5 { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.cs-resumo-partes { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.cs-resumo-partes li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; min-width: 0; }
.cs-resumo-pessoa { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cs-resumo-pessoa > span { min-width: 0; overflow-wrap: anywhere; }
.cs-resumo-partes b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-resumo-aviso { display: flex; gap: 6px; align-items: flex-start; margin: 10px 0 0; font-size: 12.5px; font-weight: 600; color: var(--aviso); }
.cs-resumo-eu { padding-top: 14px; }
.cs-resumo-eu strong { display: block; font-family: var(--font-heading); font-size: 22px; letter-spacing: -.02em; line-height: 1.2; }
.cs-resumo-eu.recebe strong { color: var(--ok); }
.cs-resumo-eu.deve strong { color: var(--erro); }

/* pagadores e divisão */
#cs-card-pagadores #co-pagadores { margin: 0; }
.co-pagadores-titulo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cs-divisao-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cs-divisao-topo .cs-hint { margin: 0; flex: 1 1 200px; min-width: 0; }
.cs-seg { flex-wrap: wrap; }
.cs-divisao-atalhos { display: flex; gap: 6px 14px; flex-wrap: wrap; }

/* celular e tablet: folha de tela cheia, cabeçalho e rodapé fixos */
@media (max-width: 1023px) {
  #modal-despesa { padding: 0 !important; align-items: stretch !important; }
  #modal-despesa .cs-modal-window { max-width: none; width: 100%; max-height: none; height: 100dvh; border-radius: 0; animation: gaveta .24s cubic-bezier(.2,.9,.3,1); }
  #modal-despesa .cs-modal-header { position: sticky; top: 0; z-index: 2; background: var(--card); padding: calc(14px + env(safe-area-inset-top)) 16px 12px; border-bottom: 1px solid var(--borda); }
  #modal-despesa .cs-modal-body { flex: 1; overflow-y: auto; padding: 14px 14px 20px; }
  #modal-despesa .cs-modal-footer { position: sticky; bottom: 0; z-index: 2; background: var(--card); border-top: 1px solid var(--borda); padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); gap: 8px; }
  #modal-despesa .cs-modal-footer-direita { flex: 1; display: flex; gap: 8px; }
  #modal-despesa .cs-modal-footer .btn { flex: 1 1 auto; min-width: 0; }
  #modal-despesa .cs-card { padding: 14px; border-radius: 14px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   26. ANTICORTE — achados da varredura automática (scratch/auditoria_corte.mjs)
   ══════════════════════════════════════════════════════════════════════════ */
/* 1. Botão estreito cortava o rótulo em silêncio (o .btn tem overflow:hidden por causa do brilho). */
.btn { white-space: normal; overflow-wrap: anywhere; height: auto; min-height: 42px; text-align: center; }
.btn-sm { min-height: 36px; }
.btn-lg { min-height: 48px; }
/* 2. Barras de ação: no celular os botões dividem a linha em vez de espremer o texto. */
@media (max-width: 767px) {
  .page-header { gap: 10px; }
  .page-actions, .section-title-bar > div:last-child { width: 100%; }
  .page-actions .btn, .section-title-bar .btn { flex: 1 1 calc(50% - 8px); min-width: 0; }
  .page-actions .btn:only-child, .section-title-bar .btn:only-child { flex-basis: 100%; }
  .modal-rodape .btn, .modal-footer .btn { flex: 1 1 auto; min-width: 0; }
  .tag-viagem { max-width: 100%; }
}
/* 5. Tabelas largas: rolagem própria em vez de corte. */
#view-historico-ia > div, .admin-table-card { overflow-x: auto; }
#view-historico-ia table, .admin-table-card table { min-width: 560px; }
/* 6. Tabela da auditoria: a descrição quebra em duas linhas em vez de sumir com "…". */
.tabela-usuarios td, #aud-corpo td { overflow-wrap: anywhere; }
#aud-corpo td > span { white-space: normal !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }

/* 3. Alvos de toque no celular E no tablet (aparelhos de dedo, até 1023px). */
@media (max-width: 1023px), (hover: none) {
  .btn, .btn-sm, .cs-seg-btn, .cs-link-btn, .chip-filtro, .aba, .modelo,
  .rm-tab-btn, .cs-tab-btn, .btn-trocar-trajeto, .rv-codigo, .btn-pag { min-height: 40px; }
  .btn-icone, .icon-btn, .modal-close-btn, .btn-icone-borda, .btn-fechar-sidebar { min-width: 40px; min-height: 40px; }
  /* Links que funcionam como botão (abrir reserva, baixar anexo) também são alvo de toque. */
  a.rv-link, .dc-acoes a, .pp-acoes a, .co-anexos a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* 4. Resumos de lista: uma linha com "…" escondia o assunto. Agora quebram em duas
   linhas (três nas telas estreitas, onde cabe menos por linha). */
.linha-txt strong, .linha-txt small, .notif .linha-txt strong, .notif .linha-txt small {
  white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
/* O convite de instalação é um texto curto e importante: sem limite de linhas. */
.pwa-convite .linha-txt strong, .pwa-convite .linha-txt small { -webkit-line-clamp: none; line-clamp: none; display: block; overflow: visible; }
.pwa-convite { align-items: flex-start; }
@media (max-width: 480px) {
  .linha-txt strong, .linha-txt small, .notif .linha-txt strong, .notif .linha-txt small { -webkit-line-clamp: 3; line-clamp: 3; }
}