/* =========================================================================
   AllRecife — sistema visual
   Identidade: recife e maré (teal sobre abismo escuro).

   A folha é organizada em camadas: tokens primitivos (a paleta crua),
   tokens semânticos (o que cada cor significa na interface) e só então os
   componentes. Componente nenhum usa hex direto — sempre a var semântica —
   porque é isso que faz o tema escuro sair de graça lá no fim do arquivo.
   ========================================================================= */

:root {
  color-scheme: light;

  /* ---- primitivos: abismo (fundos escuros da marca) ---- */
  --abyss-950: #080f14;
  --abyss-900: #0d151d;
  --abyss-800: #152127;
  --abyss-700: #1d2f37;
  --abyss-600: #293e46;

  /* ---- primitivos: maré (teal da marca) ---- */
  --teal-700: #005c66;
  --teal-600: #00737e;
  --teal-500: #008e97;
  --teal-400: #00a8ae;
  --teal-300: #35c8c9;
  --teal-200: #8ce0df;
  --teal-100: #cdf1f0;
  --teal-050: #e9f8f8;

  /* ---- primitivos: coral (ação secundária / anexo) ---- */
  --coral-600: #bf4634;
  --coral-500: #d55948;
  --coral-400: #ec785b;
  --coral-050: #fdeeea;

  /* ---- primitivos: alerta ---- */
  --red-600: #c0413d;
  --red-500: #da534f;
  --red-100: #f6d3d0;
  --red-050: #fdecea;

  /* ---- primitivos: status ----
     Verde e âmbar próprios, deliberadamente fora da família teal: o teal já
     significa "ação primária" na interface, então não pode significar
     "aprovado/pago" ao mesmo tempo sem virar ambíguo. */
  --success-600: #1a8455;
  --success-500: #1f9d63;
  --warning-600: #a8721a;
  --warning-500: #c98a1f;

  /* ---- primitivos: neutros (levemente frios, casam com o teal) ---- */
  --slate-050: #f6f8f9;
  --slate-100: #eef2f3;
  --slate-200: #e3e9eb;
  --slate-300: #cfd8db;
  --slate-400: #a3b1b5;
  --slate-500: #6d7a7d;
  --slate-600: #5b6b70;
  --slate-700: #3a464b;
  --slate-800: #2c393e;
  --slate-900: #1b282d;

  /* ---- semânticos: superfícies ---- */
  --bg: var(--abyss-950);
  --surface: #ffffff;
  --surface-2: var(--slate-050);
  --surface-inset: var(--slate-100);
  --surface-hover: var(--slate-100);
  --surface-dark: var(--abyss-900);
  --surface-dark-2: var(--abyss-800);

  /* ---- semânticos: texto ----
     --text e --text-muted são um degrau mais escuros que a versão anterior
     (#425055/#778386): o muted antigo passava raspando no mínimo de contraste
     4.5:1 sobre o fundo claro, e some em tela de celular no sol. */
  --text: var(--slate-700);
  --text-strong: var(--slate-900);
  --text-muted: var(--slate-500);
  --text-subtle: var(--slate-400);
  --text-on-brand: #ffffff;
  --text-on-dark: #e4eef0;
  --text-on-dark-muted: #93a6ab;

  /* ---- semânticos: bordas ---- */
  --border: var(--slate-200);
  --border-strong: var(--slate-300);
  --border-on-dark: var(--abyss-600);

  /* ---- semânticos: marca e estados ---- */
  --brand: var(--teal-600);
  --brand-hover: var(--teal-500);
  --brand-active: var(--teal-700);
  --brand-soft: var(--teal-050);
  --brand-soft-text: var(--teal-700);
  --brand-glow: var(--teal-400);
  --accent: var(--teal-400);

  --attach: var(--coral-500);
  --attach-hover: var(--coral-400);
  --attach-active: var(--coral-600);

  --danger: var(--red-500);
  --danger-hover: var(--red-600);
  --danger-soft: var(--red-050);
  --danger-border: var(--red-100);

  /* Chips de status usam fundo tonal (~12% da própria cor) + texto na cor
     cheia, nunca texto colorido sobre cinza. */
  --success: var(--success-600);
  --success-soft: rgba(31, 157, 99, 0.12);
  --warning: var(--warning-600);
  --warning-soft: rgba(201, 138, 31, 0.14);

  --ring: color-mix(in srgb, var(--teal-400) 55%, transparent);

  /* Sombra colorida e larga, só para CTA sobre fundo escuro (login/topbar).
     Sombra preta em cima do abismo escuro não aparece — a colorida sim. */
  --glow-brand: 0 0 34px -8px rgba(0, 168, 174, 0.55);

  /* ---- decorativos ---- */
  --depth-lines: repeating-linear-gradient(
    to bottom,
    transparent 0, transparent 7px,
    rgba(0, 189, 190, 0.09) 7px, rgba(0, 189, 190, 0.09) 8px
  );

  /* ---- espaçamento (grade de 4px) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;

  /* ---- raios ---- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;

  /* ---- elevação: fio de cabelo + sombra difusa, nunca sombra dura ---- */
  --shadow-xs: 0 1px 2px rgba(13, 21, 29, 0.05);
  --shadow-sm: 0 1px 2px rgba(13, 21, 29, 0.06), 0 1px 3px rgba(13, 21, 29, 0.04);
  --shadow-md: 0 2px 4px -1px rgba(13, 21, 29, 0.06), 0 8px 20px -6px rgba(13, 21, 29, 0.10);
  --shadow-lg: 0 8px 14px -6px rgba(13, 21, 29, 0.10), 0 28px 56px -16px rgba(13, 21, 29, 0.20);
  --shadow-brand: 0 1px 2px rgba(0, 92, 102, 0.20), 0 6px 16px -6px rgba(0, 115, 126, 0.45);

  /* ---- movimento ---- */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  /* ---- tipografia ---- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- métricas ---- */
  --bottom-nav-h: 62px;
  --shell-max: 1140px;
  --tap: 44px;

  /* ---- aliases legados (nomes antigos ainda citados em algum lugar) ---- */
  --navy: var(--abyss-800);
  --navy-dark: var(--abyss-900);
  --green: var(--brand);
  --green-hover: var(--brand-hover);
  --green-light: var(--brand-soft);
  --coral: var(--attach);
  --coral-hover: var(--attach-hover);
  --card-bg: var(--surface);
  --radius: var(--r-md);
  --radius-sm: var(--r-sm);
  --radius-lg: var(--r-lg);
  --muted: var(--text-muted);
  --shadow: var(--shadow-sm);
}

/* =========================================================================
   base
   ========================================================================= */

* { box-sizing: border-box; }

/* [hidden] perde na cascata pra qualquer regra que defina display (era por isso
   que .login-screen precisava de um override próprio). Como agora vários
   componentes escondidos por atributo definem display (toast, blocos
   condicionais dos diálogos), a regra vira global de uma vez. */
[hidden] { display: none !important; }

html, body { max-width: 100%; overflow-x: hidden; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  /* O fundo do login vale pro sistema inteiro: abismo com linhas de profundidade,
     brilhos teal (body::before) e as ondas (#fundoMare). Os cartões flutuam sobre
     ele em --surface, nos dois temas. */
  background-color: var(--bg);
  background-image: var(--depth-lines);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(55% 45% at 28% 30%, rgba(0, 168, 174, 0.18), transparent 70%),
    radial-gradient(45% 40% at 80% 75%, rgba(0, 115, 126, 0.20), transparent 70%);
}

::selection { background: var(--teal-200); color: var(--abyss-900); }

/* Um anel de foco único para o app inteiro. Antes disso só os campos de
   formulário tinham foco visível — botão nenhum tinha, e num topbar escuro o
   contorno padrão do navegador some. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* barra de rolagem discreta (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-full);
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--text-subtle); background-clip: content-box; }

/* =========================================================================
   splash (carregando a sessão)
   ========================================================================= */

.splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background-color: var(--abyss-950);
  background-image: var(--depth-lines);
}
.splash-logo { width: 56px; height: 56px; animation: respirar 1.6s ease-in-out infinite; }
@keyframes respirar {
  0%, 100% { opacity: 0.45; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1); }
}

/* =========================================================================
   login
   ========================================================================= */

.login-screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  color: var(--text-on-dark);
}

/* Maré: três linhas de onda ondulando devagar no pé da tela — o mesmo traço das
   ondas do logo. Cada caminho tem o dobro da largura da viewBox e anda uma
   largura inteira, então o laço fecha sem emenda. */
.fundo-mare {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 42vh;
  z-index: -1;
  pointer-events: none;
}
.onda { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.onda-1 { stroke: rgba(53, 200, 201, 0.24); animation: mare 38s linear infinite; }
.onda-2 { stroke: rgba(0, 168, 174, 0.18); animation: mare 28s linear infinite reverse; }
.onda-3 { stroke: rgba(140, 224, 223, 0.12); animation: mare 22s linear infinite; }
@keyframes mare { from { transform: translateX(0); } to { transform: translateX(-1440px); } }

.login-layout {
  flex: 1;
  width: min(1080px, 100%);
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-6);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 392px);
  gap: var(--sp-9);
  align-items: center;
}

/* variante do portal: só o cartão, centralizado (sem o painel da marca) */
.login-layout-simples { grid-template-columns: minmax(0, 420px); justify-content: center; }
.login-layout-simples .login-card { width: 100%; }
.login-card .login-logo { width: 52px; height: 52px; margin: 0 auto var(--sp-2); display: block; }
.portal-quem { font-size: 0.8rem; color: var(--text-on-dark-muted); display: none; }
@media (min-width: 641px) { .portal-quem { display: inline; } }

/* foto do chamado */
.foto-previa { width: 100%; max-height: 260px; object-fit: contain; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-inset); }
.foto-chamado { width: 100%; max-height: 420px; object-fit: contain; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-inset); }
.linha-tempo { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 0.8rem; color: var(--text-muted); }
.linha-tempo li { display: flex; gap: var(--sp-2); align-items: baseline; }
.linha-tempo li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex-shrink: 0; position: relative; top: -1px; }
.chamado-descricao { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; color: var(--text); line-height: 1.55; }
.tag-status { text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 600; }

/* badge de contagem (chamados abertos) na aba e no botão da navegação */
.tab-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: var(--r-full);
  background: var(--warning-500);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1;
  vertical-align: 2px;
}
.nav-badge { position: absolute; top: 4px; left: calc(50% + 6px); margin: 0; z-index: 2; }

/* chips de filtro */
.filtros { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.chip {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 550;
  padding: 6px 12px;
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.chip:hover { color: var(--text); border-color: var(--border-strong); }
.chip.active { background: var(--brand-soft); color: var(--brand-soft-text); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.chamado-num { font-family: var(--font-mono); font-weight: 500; font-size: 0.78rem; color: var(--text-muted); margin-left: 4px; }

/* atalhos do sheet "Documentos" (celular) */
.atalhos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.atalho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--sp-4) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text-strong);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  text-align: center;
}
.atalho small { font-family: var(--font-body); font-weight: 400; font-size: 0.74rem; color: var(--text-muted); }
.atalho svg { width: 22px; height: 22px; color: var(--brand); }
.atalho.active { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); background: var(--brand-soft); }

/* ---- calendário ---- */
.cal-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.cal-nav { display: flex; align-items: center; gap: var(--sp-2); }
.cal-titulo { margin: 0 var(--sp-2); min-width: 170px; text-align: center; }
.cal-nav .btn-icon { font-size: 1.2rem; line-height: 1; }
.cal-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; }
.cal-semana span { text-align: center; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--text-muted); }
/* minmax(0, 1fr): sem isso um rótulo de compromisso (nowrap) estica a coluna dele */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dia { min-width: 0; }
.cal-dia {
  min-height: 82px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.cal-dia:hover { border-color: var(--border-strong); background: var(--surface-2); }
.cal-dia-outro { opacity: 0.45; }
.cal-dia-sel { border-color: var(--brand); box-shadow: 0 0 0 2px var(--ring); }
.cal-num { font-family: var(--font-mono); font-size: 0.74rem; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; }
.cal-dia-hoje .cal-num { background: var(--brand); color: #fff; font-weight: 600; }
.cal-evento {
  max-width: 100%;
  font-size: 0.68rem;
  line-height: 1.3;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--brand-soft);
  color: var(--brand-soft-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-mais { font-size: 0.66rem; color: var(--text-muted); font-family: var(--font-mono); }
.cal-ponto { display: none; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }

/* ---- painel da marca ---- */
.login-marca { position: relative; animation: card-in var(--dur-3) var(--ease) both; }
/* Anéis concêntricos bem fracos atrás da marca — a "ondulação" que sai do logo. */
.login-aneis {
  position: absolute;
  top: -170px;
  left: -175px;
  width: 440px;
  height: 440px;
  z-index: -1;
  pointer-events: none;
}
.login-aneis circle { fill: none; stroke: rgba(53, 200, 201, 0.11); stroke-width: 1; }
.login-aneis circle:nth-child(2) { stroke-opacity: 0.8; }
.login-aneis circle:nth-child(3) { stroke-opacity: 0.6; }
.login-aneis circle:nth-child(4) { stroke-opacity: 0.4; }
.login-aneis circle:nth-child(5) { stroke-opacity: 0.25; }
.login-marca-lockup { display: flex; align-items: center; gap: 12px; margin-bottom: var(--sp-7); }
.login-marca-logo { width: 42px; height: 42px; }
.login-marca-lockup .wordmark { font-size: 1.45rem; color: #fff; }
.login-eyebrow {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-300);
}
.login-marca-titulo {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.07;
  letter-spacing: -0.035em;
  color: #fff;
  text-wrap: balance;
}
.login-marca-texto {
  margin: 0 0 var(--sp-7);
  max-width: 46ch;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text-on-dark-muted);
}
.login-recursos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  max-width: 520px;
}
.login-recursos li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(2px);
}
.login-recurso-icone {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: rgba(0, 168, 174, 0.14);
  color: var(--teal-300);
}
.login-recurso-icone svg { width: 16px; height: 16px; }
.login-recursos strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
}
.login-recurso-tag {
  display: inline-block;
  vertical-align: 2px;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 500;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-200);
  background: rgba(0, 168, 174, 0.18);
}
.login-recursos li span:not(.login-recurso-icone) { display: block; font-size: 0.76rem; color: var(--text-on-dark-muted); }

/* ---- cartão de entrada ---- */
.login-card {
  background: var(--surface);
  color: var(--text);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.06);
  padding: var(--sp-7) var(--sp-7) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  animation: card-in var(--dur-3) var(--ease) 60ms both;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.login-card-topo { margin-bottom: var(--sp-1); }
.login-card h1 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}
.login-sub { margin: 0; font-size: 0.85rem; color: var(--text-muted); }

.login-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 550;
  color: var(--text-muted);
}

/* campo com ícone à esquerda (e, na senha, o botão de mostrar à direita) */
.campo-icone { position: relative; display: flex; align-items: center; }
.campo-icone > svg {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--text-subtle);
  pointer-events: none;
  transition: color var(--dur-1) var(--ease);
}
.campo-icone:focus-within > svg { color: var(--brand); }
.login-card input {
  width: 100%;
  font-size: 0.95rem;
  padding: 12px 12px 12px 38px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.login-card input#loginSenha { padding-right: 46px; }
.login-card input:hover { border-color: var(--border-strong); }
.login-card input:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--ring);
}
/* preenchimento automático do navegador sem o fundo amarelo/azul por cima */
.login-card input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 40px var(--surface) inset;
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
}

.campo-acao {
  position: absolute;
  right: 4px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-subtle);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.campo-acao:hover { color: var(--text); background: var(--surface-hover); }
.campo-acao svg { width: 17px; height: 17px; }
.campo-acao .icone-ocultar { display: none; }
.campo-acao[aria-pressed="true"] .icone-mostrar { display: none; }
.campo-acao[aria-pressed="true"] .icone-ocultar { display: block; }

.login-aviso {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: calc(var(--sp-2) * -1) 0 0;
  font-size: 0.78rem;
  font-weight: 550;
  color: var(--warning);
}
.login-aviso svg { width: 14px; height: 14px; }

.login-ajuda { margin: 0; text-align: center; font-size: 0.8rem; color: var(--text-muted); }
.login-ajuda a { color: var(--brand-soft-text); font-weight: 600; text-decoration: none; }
.login-ajuda a:hover { text-decoration: underline; }

/* ".login-card" na frente pra vencer a regra geral de .btn, que vem depois no arquivo. */
.login-card .btn-entrar { min-height: 48px; margin-top: var(--sp-1); font-size: 0.93rem; box-shadow: var(--shadow-brand), var(--glow-brand); }
.login-card .btn-entrar svg { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease); }
.login-card .btn-entrar:hover svg { transform: translateX(3px); }

.login-erro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--danger-soft);
  border: 1px solid var(--danger-border);
  color: var(--danger-hover);
  font-size: 0.82rem;
  text-align: center;
  animation: shake var(--dur-3) var(--ease);
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.login-rodape {
  width: min(1080px, 100%);
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-6) var(--sp-5);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-on-dark-muted);
}

@media (max-width: 900px) {
  .login-layout {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--sp-6);
    padding: var(--sp-8) var(--sp-4) var(--sp-4);
    align-content: center;
  }
  .login-marca { text-align: center; max-width: 440px; }
  .login-marca-lockup { justify-content: center; margin-bottom: var(--sp-5); }
  .login-eyebrow { display: none; }
  .login-marca-titulo { font-size: 1.65rem; margin-bottom: var(--sp-3); }
  .login-marca-texto { margin: 0 auto; font-size: 0.9rem; }
  /* no celular os cartões de recurso empurrariam o formulário pra baixo da dobra */
  .login-recursos { display: none; }
  .login-aneis { display: none; }
  .login-card { width: min(400px, 100%); padding: var(--sp-6) var(--sp-5) var(--sp-5); }
  .fundo-mare { height: 30vh; }
  .login-rodape { justify-content: center; text-align: center; padding: var(--sp-3) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom)); }
}

/* =========================================================================
   topbar + abas
   ========================================================================= */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  /* translúcido sobre o fundo compartilhado, em vez de pintar o próprio abismo */
  background: rgba(8, 15, 20, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-on-dark);
  border-bottom: 1px solid var(--border-on-dark);
}

.topbar-inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.logo { height: 34px; width: auto; display: block; }

.titulo { display: flex; flex-direction: column; line-height: 1.15; }
.titulo .titulo-sub {
  font-size: 0.68rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
  font-family: var(--font-mono);
}

.topbar-acoes { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }

.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.025em;
}
.grad-text {
  background: linear-gradient(120deg, var(--teal-300), var(--teal-200) 60%, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* botão fantasma sobre fundo escuro (Sair, tema) */
.btn-ghost-dark {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.13);
  color: var(--text-on-dark);
}
.btn-ghost-dark:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.btn-ghost-dark:active { background: rgba(255, 255, 255, 0.05); }

.tabs {
  max-width: var(--shell-max);
  margin: 0 auto;
  display: flex;
  gap: var(--sp-1);
  padding: 0 var(--sp-6);
  /* 8 abas: entre 641 e ~900px rola de lado, sem barra visível */
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-btn { flex-shrink: 0; }

.tab-btn {
  position: relative;
  background: transparent;
  border: none;
  color: var(--text-on-dark-muted);
  padding: 10px 14px 12px;
  cursor: pointer;
  font-size: 0.88rem;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.tab-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
/* Indicador como pseudo-elemento animado, e não border-bottom: assim ele
   cresce a partir do centro em vez de aparecer seco. */
.tab-btn::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2.5px;
  border-radius: var(--r-full) var(--r-full) 0 0;
  background: linear-gradient(90deg, var(--teal-400), var(--teal-200));
  transform: scaleX(0);
  transition: transform var(--dur-2) var(--ease);
}
.tab-btn.active { color: #fff; }
.tab-btn.active::after { transform: scaleX(1); }

main {
  max-width: var(--shell-max);
  margin: var(--sp-6) auto;
  padding: 0 var(--sp-6) var(--sp-9);
}

.tab-content { display: none; }
.tab-content.active { display: block; animation: tab-in var(--dur-2) var(--ease) both; }
@keyframes tab-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================================
   botões
   ========================================================================= */

.btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--text);
  --btn-bd: var(--border);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 38px;
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  padding: 8px 15px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 550;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
  transition:
    background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease),
    box-shadow var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease);
}
.btn:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.btn:active { transform: translateY(1px); box-shadow: none; }

.btn[disabled],
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: none;
  transform: none;
  filter: saturate(0.55);
}

/* Estado de trabalho: o rótulo desaparece e entra um spinner no lugar, então
   o botão não muda de largura no meio da geração do PDF. */
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  color: var(--btn-fg);
  opacity: 0.9;
  animation: spin 620ms linear infinite;
}
.btn-primario.is-loading::after,
.btn-compartilhar.is-loading::after,
.btn-compartilhar-pdf.is-loading::after { color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }

.btn-primario {
  --btn-bg: var(--brand);
  --btn-bd: var(--brand);
  --btn-fg: var(--text-on-brand);
  box-shadow: var(--shadow-brand);
}
.btn-primario:hover { --btn-bg: var(--brand-hover); --btn-bd: var(--brand-hover); }
.btn-primario:active { --btn-bg: var(--brand-active); --btn-bd: var(--brand-active); }

.btn-perigo { --btn-fg: var(--danger); --btn-bd: var(--danger-border); }
.btn-perigo:hover { --btn-bg: var(--danger-soft); --btn-bd: var(--danger); --btn-fg: var(--danger-hover); }

.btn-compartilhar { --btn-bg: var(--brand); --btn-bd: var(--brand); --btn-fg: #fff; box-shadow: var(--shadow-brand); }
.btn-compartilhar:hover { --btn-bg: var(--brand-hover); --btn-bd: var(--brand-hover); }

.btn-compartilhar-pdf { --btn-bg: var(--attach); --btn-bd: var(--attach); --btn-fg: #fff; }
.btn-compartilhar-pdf:hover { --btn-bg: var(--attach-hover); --btn-bd: var(--attach-hover); }
.btn-compartilhar-pdf:active { --btn-bg: var(--attach-active); --btn-bd: var(--attach-active); }

.btn-mini { min-height: 32px; padding: 5px 11px; font-size: 0.79rem; }

.btn-icon {
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  flex-shrink: 0;
  color: var(--text-muted);
}
.btn-icon:hover { color: var(--text-strong); }
.btn-icon.btn-perigo { color: var(--danger); }
.btn-icon svg { display: block; }
.btn-block { width: 100%; }

.btn svg { flex-shrink: 0; }

/* =========================================================================
   tags / badges
   ========================================================================= */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: var(--r-full);
  white-space: nowrap;
}
.tag-accent { background: var(--brand-soft); color: var(--brand-soft-text); }
.tag-neutral { background: var(--surface-inset); color: var(--text-muted); }
.tag-sucesso { background: var(--success-soft); color: var(--success); }
.tag-alerta { background: var(--warning-soft); color: var(--warning); }
.tag-perigo { background: var(--danger-soft); color: var(--danger-hover); }

/* =========================================================================
   cards de seção
   ========================================================================= */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  margin-bottom: var(--sp-5);
}

.card h2 {
  margin: 0 0 var(--sp-2);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  font-family: var(--font-display);
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-2);
}
.card-header h2 { margin: 0; }
.card-header .card-header-texto { min-width: 0; }

.card > .muted.small { margin: 0 0 var(--sp-4); max-width: 68ch; }

.muted { color: var(--text-muted); font-size: 0.9rem; }
.small { font-size: 0.8rem; }

.acoes { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); flex-wrap: wrap; }

/* =========================================================================
   barra de resumo (métricas do topo)
   ========================================================================= */

.resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3);
  margin: 0 0 var(--sp-5);
}
.resumo-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.resumo-rotulo {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.resumo-valor {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.resumo-item-destaque {
  background: linear-gradient(155deg, var(--brand-soft), var(--surface-2));
  border-color: color-mix(in srgb, var(--brand) 22%, var(--border));
}
.resumo-item-destaque .resumo-valor { color: var(--brand-soft-text); }

/* =========================================================================
   busca
   ========================================================================= */

.busca {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: var(--sp-4);
}
.busca svg {
  position: absolute;
  left: 12px;
  width: 15px;
  height: 15px;
  color: var(--text-subtle);
  pointer-events: none;
}
.busca input {
  width: 100%;
  font-family: inherit;
  font-size: 0.9rem;
  padding: 9px 12px 9px 34px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.busca input::placeholder { color: var(--text-subtle); }
.busca input:hover { border-color: var(--border-strong); }
.busca input:focus-visible {
  outline: none;
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--ring);
}

/* =========================================================================
   tabelas
   ========================================================================= */

/* Sombras de rolagem: as duas primeiras camadas são "capas" na cor da
   superfície presas ao conteúdo (background-attachment: local), as duas
   últimas são as sombras presas à viewport. Quando há conteúdo escondido de
   um lado, a capa sai de baixo e a sombra aparece. */
.tabela-wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left center / 36px 100% no-repeat,
    linear-gradient(to left, var(--surface) 30%, transparent) right center / 36px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(13, 21, 29, 0.10), transparent) left center / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(13, 21, 29, 0.10), transparent) right center / 12px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}

table { width: 100%; border-collapse: collapse; font-size: 0.885rem; }

th, td {
  text-align: left;
  padding: 11px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  /* Sem isto uma descrição de serviço longa empurra a coluna "Ações" pra fora
     da tela mesmo num monitor largo. */
  max-width: 32ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
th {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  border-bottom-color: var(--border-strong);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 1;
}
tbody tr { transition: background var(--dur-1) var(--ease); }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: none; }

/* números e datas em mono tabular, alinhados pela vírgula */
td.num, .col-valor { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

td:first-child { font-weight: 550; color: var(--text-strong); }

/* Continua sendo célula de tabela (display:flex aqui tirava a célula do layout
   e a linha divisória parava antes das ações). Os botões alinham à direita
   como inline-flex dentro dela. */
.acoes-tabela {
  text-align: right;
  white-space: nowrap;
  max-width: none;
  overflow: visible;
}
.acoes-tabela > .btn { display: inline-flex; vertical-align: middle; margin-left: var(--sp-1); }
/* Só a coluna de ações alinha à direita — o cabeçalho da última coluna do
   histórico ("Gerado em") é dado comum e continua alinhado à esquerda. */
th.col-acoes { text-align: right; }

.celula-principal { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.celula-principal > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.celula-sub {
  font-size: 0.74rem;
  font-weight: 400;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* =========================================================================
   estado vazio
   ========================================================================= */

.vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-4);
  color: var(--text-muted);
}
.vazio-icone {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-full);
  background: var(--surface-inset);
  color: var(--text-subtle);
  margin-bottom: var(--sp-1);
}
.vazio-titulo { font-family: var(--font-display); font-weight: 600; color: var(--text); font-size: 0.95rem; }
.vazio-texto { font-size: 0.83rem; max-width: 42ch; margin: 0; }
td.vazio-celula { max-width: none; white-space: normal; padding: 0; }
td.vazio-celula:first-child { font-weight: 400; }

/* =========================================================================
   listas em cards (mobile)
   ========================================================================= */

.lista-cards { display: none; flex-direction: column; gap: var(--sp-3); }
.item-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  box-shadow: var(--shadow-xs);
}
.item-card-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.item-card-valor {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
  white-space: nowrap;
}
.item-card-titulo {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: var(--sp-2);
  font-size: 0.98rem;
  color: var(--text-strong);
}
/* No topo do card o título divide a linha com o valor: sem margem ali em cima.
   (Antes isso era um style inline injetado por linha no app.js.) */
.item-card-topo .item-card-titulo { margin-top: 0; min-width: 0; overflow-wrap: anywhere; }
.item-card-sub { font-size: 0.81rem; color: var(--text-muted); margin-top: 3px; overflow-wrap: anywhere; }
.item-card-meta {
  font-size: 0.74rem;
  color: var(--text-subtle);
  font-family: var(--font-mono);
  margin-top: var(--sp-1);
}
.item-card-acoes {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  align-items: center;
}
.item-card-acoes > :nth-child(2) { margin-left: auto; }

/* =========================================================================
   formulários
   ========================================================================= */

.form { display: flex; flex-direction: column; gap: var(--sp-3); }
.form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.79rem;
  font-weight: 550;
  color: var(--text-muted);
}
.form input, .form select, .form textarea {
  font-size: 0.93rem;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  resize: vertical;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.form input:hover, .form select:hover, .form textarea:hover { border-color: var(--border-strong); }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--ring);
}
.form input::placeholder, .form textarea::placeholder { color: var(--text-subtle); }
.form input:disabled, .form select:disabled, .form textarea:disabled {
  background: var(--surface-inset);
  color: var(--text-subtle);
  cursor: not-allowed;
}
.form input[type="number"] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Agrupador visual dentro dos diálogos maiores (orçamento/proposta), que antes
   eram uma pilha reta de 12 campos sem hierarquia nenhuma. */
.campo-grupo {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.campo-grupo > .grupo-titulo {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
.campo-grupo .form input,
.campo-grupo .form select,
.campo-grupo .form textarea,
.campo-grupo input,
.campo-grupo select,
.campo-grupo textarea { background: var(--surface); }
.ajuda { font-size: 0.76rem; color: var(--text-muted); margin: 0; line-height: 1.45; }

/* campo com botão ao lado (senha + "Gerar") */
.campo-com-botao { display: flex; gap: var(--sp-2); align-items: stretch; }
.campo-com-botao input { flex: 1 1 auto; min-width: 0; }
.campo-com-botao .btn { flex-shrink: 0; min-height: 0; }

/* botão "Portal" do cliente: marcado quando o acesso existe */
.btn-acesso-ativo { --btn-fg: var(--brand-soft-text); --btn-bd: color-mix(in srgb, var(--brand) 45%, var(--border)); --btn-bg: var(--brand-soft); }
.btn-acesso-inativo { --btn-fg: var(--warning); --btn-bd: color-mix(in srgb, var(--warning) 45%, var(--border)); --btn-bg: var(--warning-soft); }

/* par de campos curtos lado a lado (mês/ano, validade/data) */
.campo-linha { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.campo-linha > label { min-width: 0; }

/* =========================================================================
   controle segmentado (os antigos rádios soltos)
   ========================================================================= */

.linha-radios {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.checkbox-linha {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 550;
  line-height: 1.25;
  color: var(--text-muted);
  margin: 0;
  padding: 8px 10px;
  min-height: 38px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.checkbox-linha:hover { color: var(--text); }
.checkbox-linha:has(input:checked) {
  background: var(--surface);
  color: var(--brand-soft-text);
  box-shadow: var(--shadow-xs);
}
.checkbox-linha:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 1px; }
/* A bolinha do rádio sai de cena: num controle segmentado quem indica a
   seleção é a própria pílula branca, e a bolinha só roubava largura do rótulo
   (que então quebrava linha). O input continua no DOM, focável pelo teclado —
   o anel de foco vem da regra :has() acima. */
.checkbox-linha input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

/* =========================================================================
   itens do orçamento
   ========================================================================= */

.itens-orcamento { display: flex; flex-direction: column; gap: var(--sp-2); }
/* Descrição ocupa a linha de cima sozinha; tipo/qtd/valor/remover dividem a de
   baixo. Numa única linha flex os cinco campos não cabiam na largura do
   diálogo e o botão de remover caía sozinho pra uma terceira linha. */
.item-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px clamp(78px, 24%, 104px) 36px;
  gap: var(--sp-2);
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  padding: var(--sp-2);
  transition: border-color var(--dur-1) var(--ease);
}
.item-linha:focus-within { border-color: var(--border-strong); }
.item-linha select, .item-linha input {
  font-family: inherit;
  font-size: 0.88rem;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--surface);
  color: var(--text);
  min-height: 34px;
}
.item-linha select:focus, .item-linha input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--ring);
}
.item-linha > * { min-width: 0; }
.item-linha .item-descricao { grid-column: 1 / -1; grid-row: 1; }
.item-linha .item-tipo { grid-column: 1; grid-row: 2; }
.item-linha .item-qtd { grid-column: 2; grid-row: 2; text-align: center; font-family: var(--font-mono); }
.item-linha .item-valor { grid-column: 3; grid-row: 2; font-family: var(--font-mono); }
.item-linha .btn-perigo { grid-column: 4; grid-row: 2; width: 36px; }

/* Linha de total: borda superior de 2px e peso maior, o padrão de rodapé de
   tabela de nota fiscal — separa o somatório dos itens sem virar mais um item. */
.itens-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-1);
  padding-top: var(--sp-3);
  border-top: 2px solid var(--border-strong);
}
.itens-total-rotulo {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.itens-total-valor {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

/* =========================================================================
   repasses
   ========================================================================= */

.recorrentes { display: flex; flex-direction: column; gap: var(--sp-2); }
.recorrente {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.recorrente-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.recorrente-nome {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}
.recorrente-itens {
  font-size: 0.8rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recorrente-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.recorrente-valor {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
  white-space: nowrap;
}
.recorrente-dia { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-subtle); white-space: nowrap; }
.recorrente-acoes { display: flex; gap: var(--sp-1); align-items: center; }

/* Linha de custo do repasse: só descrição + valor, então cabe numa fileira só
   (a do orçamento tem tipo e quantidade e precisa de duas). */
.custo-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(92px, 28%, 130px) 36px;
  gap: var(--sp-2);
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  padding: var(--sp-2);
}
.custo-linha > * { min-width: 0; }
.custo-linha input {
  font-family: inherit;
  font-size: 0.88rem;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--surface);
  color: var(--text);
  min-height: 34px;
}
.custo-linha .custo-valor { font-family: var(--font-mono); }
.custo-linha input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
.custo-linha .btn-perigo { width: 36px; }

/* checkbox numa linha só, dentro de um .form (que empilha label e campo) */
.form label.check {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.86rem;
  color: var(--text);
  cursor: pointer;
}
.form label.check input {
  width: 17px;
  height: 17px;
  margin: 0;
  padding: 0;
  box-shadow: none;
  accent-color: var(--brand);
  cursor: pointer;
}

/* =========================================================================
   diálogos
   ========================================================================= */

dialog {
  border: none;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 0;
  width: min(560px, 92vw);
  max-height: min(88dvh, 820px);
  background: var(--surface);
  color: var(--text);
  overflow: hidden;
}
dialog[open] { animation: dialog-in var(--dur-2) var(--ease) both; }
@keyframes dialog-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
dialog::backdrop {
  background: rgba(8, 15, 20, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
dialog[open]::backdrop { animation: fade-in var(--dur-2) var(--ease) both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* O formulário vira a moldura do diálogo: cabeçalho fixo, corpo rolável,
   rodapé de ações fixo. Antes o diálogo inteiro rolava e as ações sumiam. */
dialog > .form {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: inherit;
  overflow: hidden;
}
dialog h2 {
  margin: 0;
  padding: var(--sp-5) var(--sp-6) var(--sp-4);
  color: var(--text-strong);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-family: var(--font-display);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.dialog-corpo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  min-height: 0;
}
.dialog-rodape {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  padding: var(--sp-4) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.dialog-rodape .acoes { margin-top: 0; }
.dialog-rodape .ajuda { text-align: center; }
dialog .acoes { justify-content: center; }
.acoes-par { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.acoes-par .btn { width: 100%; }
/* par com um lado escondido (ex.: status já em andamento) — o que sobra ocupa a linha */
.acoes-par:has(> [hidden]) { grid-template-columns: 1fr; }

.dialog-alvo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  color: var(--brand-soft-text);
  font-size: 0.88rem;
  font-weight: 550;
  margin: 0;
}

/* =========================================================================
   toast
   ========================================================================= */

.toast {
  position: fixed;
  bottom: calc(var(--sp-6) + env(safe-area-inset-bottom));
  left: 50%;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--abyss-800);
  color: #fff;
  padding: 12px 18px;
  border: 1px solid var(--abyss-600);
  border-radius: var(--r-md);
  font-size: 0.86rem;
  box-shadow: var(--shadow-lg);
  z-index: 90;
  max-width: min(90vw, 460px);
  animation: toast-in var(--dur-3) var(--ease) both;
}
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 14px) scale(0.97); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
.toast::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--teal-300);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal-300) 25%, transparent);
}
.toast.erro { background: var(--danger); border-color: var(--danger-hover); }
.toast.erro::before { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28); }

/* =========================================================================
   navegação inferior (mobile)
   ========================================================================= */

.bottom-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 40;
}
.bottom-nav-inner { display: flex; }
.bottom-nav-btn {
  position: relative;
  flex: 1;
  background: none;
  border: none;
  min-height: var(--tap);
  padding: 9px 2px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease);
}
.bottom-nav-btn svg { width: 21px; height: 21px; transition: transform var(--dur-2) var(--ease); }
/* Pílula por trás do ícone da aba ativa — o mesmo indicador do topbar, só que
   na horizontal. */
.bottom-nav-btn::before {
  content: '';
  position: absolute;
  top: 5px;
  width: 40px;
  height: 27px;
  border-radius: var(--r-full);
  background: var(--brand-soft);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.bottom-nav-btn svg, .bottom-nav-btn { position: relative; }
.bottom-nav-btn svg { z-index: 1; }
.bottom-nav-btn.active { color: var(--brand); }
.bottom-nav-btn.active::before { opacity: 1; transform: scale(1); }
.bottom-nav-btn.active svg { transform: translateY(-1px); }

/* =========================================================================
   mobile
   ========================================================================= */

@media (max-width: 640px) {
  body { font-size: 15px; }
  .bottom-nav { display: block; }
  .topbar { position: static; }
  .topbar-inner { padding: 12px var(--sp-4); }
  .tabs { display: none; }
  main { margin: var(--sp-4) auto; padding: 0 var(--sp-3) calc(var(--bottom-nav-h) + var(--sp-6)); }
  .card { padding: var(--sp-4); border-radius: var(--r-md); }
  .card-header { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .card-header .btn { width: 100%; }
  .acoes { flex-direction: column; }
  .acoes .btn { width: 100%; }
  /* .acoes-par continua em duas colunas mesmo no celular: empilhar os quatro
     botões do rodapé do diálogo comia metade da tela e sobrava quase nada de
     área rolável pro formulário. */
  .resumo { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  /* Com 3 métricas em duas colunas o destaque sobrava sozinho numa meia
     linha; atravessando as duas ele fecha a grade. */
  .resumo-item-destaque { grid-column: 1 / -1; }
  .resumo-valor { font-size: 1.15rem; }

  th, td { padding: 9px 7px; }
  .tabela-wrap { display: none; }
  .lista-cards { display: flex; }

  /* Alvos de toque: 34px é pequeno demais pra um botão de excluir num
     celular — no mobile todo botão vai pro mínimo de 44px. */
  .btn { min-height: var(--tap); padding: 10px 16px; }
  .btn-mini { min-height: 38px; }
  .btn-icon { width: var(--tap); height: var(--tap); min-height: var(--tap); }
  .item-card-acoes > .btn:first-child { flex: 1 1 auto; }

  dialog { width: 100vw; max-width: 100vw; max-height: 92dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; margin: auto auto 0; }
  dialog h2 { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
  /* pega-dedo pra arrastar/fechar, puramente visual */
  dialog h2::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: var(--r-full);
    background: var(--border-strong);
    margin: 0 auto var(--sp-3);
  }
  .dialog-corpo { padding: var(--sp-4); }
  .dialog-rodape { padding: var(--sp-3) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom)); }

  .campo-linha { grid-template-columns: 1fr; }
  .linha-radios { flex-direction: column; }

  /* calendário no celular: célula baixa, só o número e um ponto por dia com compromisso */
  .cal-dia { min-height: 46px; padding: 4px; align-items: center; }
  .cal-evento, .cal-mais { display: none; }
  .cal-ponto { display: block; }
  .cal-titulo { min-width: 0; font-size: 1rem; }
  .cal-cabecalho .btn-primario { width: 100%; }
  .checkbox-linha { justify-content: flex-start; text-align: left; min-height: var(--tap); }

  /* Mesmo grid de duas fileiras do desktop — as colunas fixas já encolhem
     sozinhas via clamp(), então não vale um layout separado aqui. */
  .item-linha select,
  .item-linha input,
  .item-linha button,
  .custo-linha input,
  .custo-linha button { min-height: 40px; }

  .recorrente { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-3); }
  .recorrente .tag { justify-self: start; }
  .recorrente-acoes { grid-column: 1 / -1; }
  .recorrente-acoes > .btn:first-child { flex: 1 1 auto; }

  .toast { bottom: calc(var(--bottom-nav-h) + var(--sp-3) + env(safe-area-inset-bottom)); }
}

/* =========================================================================
   tema escuro (ativado pelo botão do topbar → data-theme="dark")
   Só os tokens semânticos mudam; nenhum componente precisa saber do tema.
   ========================================================================= */

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: var(--abyss-950);
  --surface: #101c23;
  --surface-2: #14222a;
  --surface-inset: #182933;
  --surface-hover: #1a2b35;

  --text: #cddade;
  --text-strong: #f0f6f7;
  --text-muted: #8ba0a6;
  --text-subtle: #6a7f86;

  --border: #1f333c;
  --border-strong: #2b444e;

  --brand: var(--teal-500);
  --brand-hover: var(--teal-400);
  --brand-active: var(--teal-600);
  --brand-soft: rgba(0, 168, 174, 0.14);
  --brand-soft-text: var(--teal-200);

  --attach: var(--coral-500);
  --attach-hover: var(--coral-400);

  --danger: #e8776f;
  --danger-hover: #f19289;
  --danger-soft: rgba(216, 83, 79, 0.14);
  --danger-border: rgba(216, 83, 79, 0.35);

  --success: #4fc48c;
  --success-soft: rgba(79, 196, 140, 0.15);
  --warning: #e0aa4c;
  --warning-soft: rgba(224, 170, 76, 0.15);

  --ring: color-mix(in srgb, var(--teal-300) 50%, transparent);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.34), 0 1px 3px rgba(0, 0, 0, 0.26);
  --shadow-md: 0 2px 4px -1px rgba(0, 0, 0, 0.34), 0 8px 20px -6px rgba(0, 0, 0, 0.46);
  --shadow-lg: 0 8px 14px -6px rgba(0, 0, 0, 0.44), 0 28px 56px -16px rgba(0, 0, 0, 0.62);
  --shadow-brand: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 16px -6px rgba(0, 142, 151, 0.40);
}

:root[data-theme="dark"] .toast { background: var(--surface-inset); border-color: var(--border-strong); color: var(--text-strong); }
:root[data-theme="dark"] .tabela-wrap {
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left center / 36px 100% no-repeat,
    linear-gradient(to left, var(--surface) 30%, transparent) right center / 36px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.45), transparent) left center / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.45), transparent) right center / 12px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
:root[data-theme="dark"] .resumo-item-destaque {
  background: linear-gradient(155deg, rgba(0, 168, 174, 0.16), var(--surface-2));
}
:root[data-theme="dark"] ::selection { background: var(--teal-600); color: #fff; }

/* O ícone do botão de tema mostra o destino, não o estado atual.
   Precisa bater `.btn-icon svg { display: block }` na especificidade — por isso
   o seletor carrega a classe do botão junto. */
.btn-icon svg.icone-tema-claro { display: none; }
:root[data-theme="dark"] .btn-icon svg.icone-tema-claro { display: block; }
:root[data-theme="dark"] .btn-icon svg.icone-tema-escuro { display: none; }