/* ============================================================
   PLAN — Fundação de marca (tokens + helpers)
   Derivado de plan.tokens.css v1.0 (Design System Digital).
   NÃO recriar o glow por CSS: usar somente o asset oficial.
   ============================================================ */

/* Inter self-hospedado (subset latino, cobre acentos do pt-BR). Antes vinha do
   Google Fonts (host externo, round-trip a mais em rede de hospital/4G). A marca
   é system-first (SF Pro no iPhone), mas o Inter mantém o visual idêntico em
   Android/Windows. font-display: swap → texto aparece na hora (fonte do sistema)
   e troca pro Inter sem "flash" de texto invisível. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../vendor/inter/inter-400.da03732a27e1.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../vendor/inter/inter-500.51205681a1ba.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../vendor/inter/inter-600.2ede57db1a3a.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../vendor/inter/inter-700.8ca0a5155296.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("../vendor/inter/inter-800.900ae45e40b8.woff2") format("woff2"); }

:root {
  --plan-navy-900: #081220;  /* CORRIGIDO v1.1 (era #0A1521) — fundo institucional oficial */
  --plan-navy:     #101828;  /* CORRIGIDO v1.1 (era #0D1B2A) — navy oficial */
  --plan-navy-800: #16223C;  /* derivado (camada intermediária) */
  --plan-navy-700: #1E2C4A;  /* derivado (hover do secundário) */
  --plan-slate-600:#5A6875;
  --plan-slate-500:#7C8B99;
  /* Azul oficial #0D56FF substitui o ciano (paleta v1.1). Os nomes --plan-cyan*
     viram ALIAS do azul p/ não quebrar usos existentes; preferir --plan-blue* no futuro. */
  --plan-blue-600: #0A45CC;  /* derivado (hover/escuro) */
  --plan-blue:     #0D56FF;  /* oficial — acento */
  --plan-blue-400: #4F86FF;  /* derivado (claro) */
  --plan-blue-200: #B6CCFF;  /* oficial — azul claro */
  --plan-blue-100: #E6EEFF;  /* derivado (tint de fundo) */
  --plan-cyan-600: var(--plan-blue-600);
  --plan-cyan:     var(--plan-blue);
  --plan-cyan-400: var(--plan-blue-400);
  --plan-cyan-200: var(--plan-blue-200);
  --plan-gray-100: #F2F5F7;
  --plan-gray-200: #E4EAEF;
  --plan-white:    #FFFFFF;
  --plan-night:    #081220; /* fundo institucional do glow (asset travado) */

  --plan-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, Arial, sans-serif;
  --plan-font-text:    -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, Arial, sans-serif;

  --plan-radius-sm: 8px;
  --plan-radius-md: 12px;
  --plan-radius-lg: 16px;
  --plan-radius-pill: 999px;
  --plan-shadow-subtle: 0 8px 24px rgba(13,27,42,.08);
  --plan-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* Seleção de texto on-brand */
::selection { background: var(--plan-cyan-200); color: var(--plan-navy); }

/* Cores de marca (helpers) */
.plan-bg-navy   { background-color: var(--plan-navy); }
.plan-bg-navy-900 { background-color: var(--plan-navy-900); }
.plan-bg-night  { background-color: var(--plan-night); }
.plan-bg-canvas { background-color: var(--plan-gray-100); }
.plan-bg-cyan   { background-color: var(--plan-cyan); }
.plan-bg-cyan-200 { background-color: var(--plan-cyan-200); }
.plan-text-navy  { color: var(--plan-navy); }
.plan-text-slate { color: var(--plan-slate-600); }
.plan-text-cyan  { color: var(--plan-cyan-600); }
.plan-text-white { color: var(--plan-white); }
.plan-border     { border-color: var(--plan-gray-200); }
.plan-font-display { font-family: var(--plan-font-display); }

/* Botões de marca: primário = ciano sobre navy; secundário = navy sobre branco */
.plan-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600; border-radius: var(--plan-radius-md);
  padding: .85rem 1.4rem; min-height: 48px; line-height: 1;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background-color .18s var(--plan-ease), color .18s var(--plan-ease),
              border-color .18s var(--plan-ease);
}
.plan-btn-primary { background: var(--plan-cyan); color: var(--plan-navy); }
.plan-btn-primary:hover { background: var(--plan-cyan-400); }
.plan-btn-secondary { background: var(--plan-navy); color: var(--plan-white); }
.plan-btn-secondary:hover { background: var(--plan-navy-700); }
.plan-btn-ghost-light {
  background: transparent; color: var(--plan-white); border-color: rgba(255,255,255,.35);
}
.plan-btn-ghost-light:hover { background: rgba(255,255,255,.10); }
.plan-btn-ghost-dark {
  background: var(--plan-white); color: var(--plan-navy); border-color: var(--plan-gray-200);
}
.plan-btn-ghost-dark:hover { background: var(--plan-gray-100); }

/* Selo / label institucional */
.plan-label {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--plan-radius-pill);
}
.plan-label-light { background: var(--plan-cyan-200); color: var(--plan-navy); }
.plan-label-dark  { background: rgba(13,86,255,.16); color: var(--plan-cyan-200); border: 1px solid rgba(13,86,255,.30); }

/* Cartão técnico (sem glow, sombra sutil) */
.plan-card {
  background: var(--plan-white); border: 1px solid var(--plan-gray-200);
  border-radius: var(--plan-radius-lg); transition: border-color .18s var(--plan-ease), transform .18s var(--plan-ease);
}
.plan-card-hover:hover { border-color: var(--plan-cyan-600); transform: translateY(-2px); }

/* Foco acessível */
.plan-focusable:focus-visible { outline: 3px solid var(--plan-cyan-600); outline-offset: 3px; }

/* Marca glow: apenas posiciona o asset oficial; nunca recria o efeito. */
.plan-brand-glow { display:block; width: min(100%, 460px); height:auto; object-fit:contain; filter:none; }

@media (prefers-reduced-motion: reduce) {
  .plan-btn, .plan-card { transition: none; }
}

/* ============================================================
   Aliases legados — garantem a marca também no modo CDN (dev),
   onde as classes de componente do app.css não existem.
   Carregado por ÚLTIMO, então prevalece de forma consistente.
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 700; border-radius: 8px; font-size: 14px; padding: .5rem 1rem;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background-color .18s var(--plan-ease), color .18s var(--plan-ease);
}
.btn-sm { font-size: 12px; padding: .375rem .75rem; }
.btn-primary  { background: var(--plan-blue); color: #fff; }
.btn-primary:hover  { background: var(--plan-blue-600); }
.btn-secondary { background: var(--plan-navy); color: #fff; }
.btn-secondary:hover { background: var(--plan-navy-700); }

/* Marca: navy estrutura, ciano acento (substitui o antigo gradiente) */
.marca-grad      { background: var(--plan-blue); color: #fff; }
.marca-grad-text { color: var(--plan-navy); }
.marca-painel    { background: var(--plan-navy); color: #fff; }

/* ============================================================
   Estados de interação (hover / pressed / selected / focus / disabled)
   Color-agnostic: aplicam a TODAS as variantes .btn-* sem depender da
   cor de cada uma. Carregado por último → prevalece em dev (CDN) e em
   prod (app.css compilado), sem exigir rebuild do Tailwind.
   ============================================================ */
/* Realce de toque nativo (Safari): tint de marca em vez do cinza padrão do iOS,
   em TODOS os clicáveis (cobre também botões de ícone que não são .btn). */
.btn, button, [role="button"], a {
  -webkit-tap-highlight-color: rgba(13, 86, 255, .22);
}
/* Feedback universal acionado por JS — o iOS standalone suprime :active E o tap-highlight,
   então estas classes garantem o retorno visual no celular.
   .is-pressing (botões): opacidade + escala. .is-pressing-soft (links/itens de menu): só opacidade. */
.is-pressing      { opacity: .6 !important; transform: scale(.93) !important; transition: none !important; }
.is-pressing-soft { opacity: .5 !important; transition: none !important; }

/* F3 — anti-double-submit: enquanto o form está enviando, o botão fica travado.
   NÃO usamos o atributo `disabled` (removeria o name/value do POST); o 2º envio é
   barrado no JS. Aqui só o feedback visual de "ocupado". */
.is-enviando { opacity: .6 !important; cursor: progress !important; pointer-events: none !important; }

.btn {
  cursor: pointer;
  white-space: nowrap;                       /* rótulo sempre numa linha (não quebra em 'Voltar/Enviar') */
  transition: background-color .18s var(--plan-ease),
              color .15s var(--plan-ease),
              box-shadow .15s var(--plan-ease),
              transform .08s var(--plan-ease),
              filter .12s var(--plan-ease);
}
/* hover SÓ em dispositivos com cursor (desktop) — evita o "hover preso" após o toque no celular */
@media (hover: hover) {
  .btn:hover:not(:disabled):not([disabled]):not(.disabled) {
    box-shadow: 0 4px 12px -2px rgba(13, 27, 42, .18);
    transform: translateY(-1px);
  }
}
/* pressed: encolhe, ESCURECE a própria cor e afunda — feedback forte tanto no toque quanto no clique.
   .is-pressing é a versão acionada por JS (o :active não dispara em toque no iOS). */
.btn:active:not(:disabled):not([disabled]):not(.disabled),
.btn.is-pressing:not(:disabled):not([disabled]):not(.disabled) {
  transform: scale(.95);
  filter: brightness(.88);
  box-shadow: inset 0 2px 6px rgba(13, 27, 42, .30);
}
/* foco por teclado: anel ciano de marca (acessibilidade), sem afetar clique do mouse */
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--plan-cyan-200), 0 0 0 1px var(--plan-cyan);
}
/* selecionado/ativo (toggles, abas, filtros): destaque persistente */
.btn[aria-pressed="true"], .btn.selected, .btn.is-active {
  box-shadow: inset 0 0 0 2px var(--plan-cyan);
  filter: saturate(1.08);
}
/* desabilitado: claramente inerte, sem nenhum feedback */
.btn:disabled, .btn[disabled], .btn.disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  filter: grayscale(.15);
}

/* ============================================================
   Mural de alertas (dashboard) — minimizar (chip) + dispensar
   ============================================================ */
.alerta-mural { transition: box-shadow .18s var(--plan-ease); }
.alerta-mural .alerta-rotulo { display: none; }
.alerta-mural.alerta-collapsed { padding-top: .5rem; padding-bottom: .5rem; }
.alerta-mural.alerta-collapsed .alerta-texto { display: none; }
.alerta-mural.alerta-collapsed .alerta-rotulo { display: inline; font-weight: 700; }
.alerta-mural.alerta-collapsed .alerta-min i { transform: rotate(180deg); }
.alerta-acao {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: 8px;
  opacity: .55; cursor: pointer; border: 0; background: transparent; color: inherit;
  transition: opacity .15s var(--plan-ease), background-color .15s var(--plan-ease);
}
.alerta-acao:hover { opacity: 1; background: rgba(13, 27, 42, .08); }
.alerta-acao:focus-visible { outline: none; opacity: 1; box-shadow: 0 0 0 2px var(--plan-cyan); }

@media (prefers-reduced-motion: reduce) {
  .plan-btn, .plan-card, .btn { transition: none; }
  .btn:hover:not(:disabled):not([disabled]):not(.disabled),
  .btn:active:not(:disabled):not([disabled]):not(.disabled) { transform: none; }
  .is-pressing { transform: none !important; }
}

/* ============================================================
   ESTADO VAZIO (Empty State) — componente reutilizável (DS aprovado).
   Densidades: .es--compact / .es--standard / .es--wide.
   Anatomia: ícone discreto em círculo + título + subtítulo + CTA contextual.
   Ícone NEUTRO (sem cor sem significado); CTA só quando há ação útil.
   Partial: escala/partials/estado_vazio.html
   ============================================================ */
.es { text-align: center; --es-ink: #0f1622; --es-ink3: #616b79; --es-screen: #f6f7f9; }
.es-ic { margin: 0 auto; background: var(--es-screen); color: var(--es-ink3);
  display: flex; align-items: center; justify-content: center; }
.es-title { color: var(--es-ink); font-weight: 600; }
.es-sub { color: var(--es-ink3); margin-top: 4px; }
.es-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.es-cta--dashed  { border: 1px dashed #d3d8e2; color: var(--plan-blue); border-radius: 12px; padding: 10px 16px; font-size: 12.5px; }
.es-cta--primary { background: var(--plan-blue); color: #fff; border-radius: 11px; padding: 10px 18px; font-size: 13px; }
.es-cta--link    { color: var(--plan-blue); font-size: 12.5px; }
/* Densidade compacta — Mural, listas, painéis pequenos */
.es--compact { padding: 13px 16px; }
.es--compact .es-ic { width: 30px; height: 30px; border-radius: 9px; font-size: 12.5px; margin-bottom: 7px; }
.es--compact .es-title { font-size: 13px; }
.es--compact .es-sub { font-size: 11.5px; margin-top: 1px; }
/* Densidade padrão — cards e áreas de conteúdo */
.es--standard { padding: 40px 24px; }
.es--standard .es-ic { width: 48px; height: 48px; border-radius: 16px; font-size: 18px; margin-bottom: 12px; }
.es--standard .es-title { font-size: 14px; }
.es--standard .es-sub { font-size: 12.5px; }
/* Densidade ampla — seções/telas praticamente vazias */
.es--wide { padding: 72px 24px; }
.es--wide .es-ic { width: 60px; height: 60px; border-radius: 20px; font-size: 24px; margin-bottom: 16px; }
.es--wide .es-title { font-size: 18px; }
.es--wide .es-sub { font-size: 13.5px; max-width: 40ch; margin-left: auto; margin-right: auto; }

/* ============================================================
   iOS — impede o ZOOM automático ao focar campos de formulário.
   O WKWebView/Safari do iOS dá zoom quando o input focado tem
   font-size < 16px (deixa a tela "grande" e cria barra horizontal;
   sintoma clássico na tela de login por causa do autofocus).
   Escopo restrito a iOS via @supports (-webkit-touch-callout) para
   NÃO alterar o tamanho visual em desktop/Android. 16px é o mínimo
   que o iOS aceita sem dar zoom.
   ============================================================ */
@supports (-webkit-touch-callout: none) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
  select,
  textarea { font-size: 16px; }
}

/* ============================================================
   Filtros — chips de filtro ativo + limpar (F1 Gestão & Cadastros v2)
   Linguagem do DS: azul PLAN só como acento, sem glow, alvos >= 32px
   (chips são secundários; os CONTROLES de filtro seguem >= 44px).
   Uso: <a class="chip-filtro">Rótulo<i class="fa-solid fa-xmark"></i></a>
        <a class="chip-filtro-limpar">Limpar filtros</a>
   ============================================================ */
.chip-filtro {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  background: #eef4ff; border: 1px solid #d3e0fb;
  color: #0D56FF; font-size: 12px; font-weight: 600;
  line-height: 1; text-decoration: none;
  transition: background .12s ease;
}
.chip-filtro:hover { background: #e2ecfe; }
.chip-filtro i { font-size: 10px; opacity: .65; }
.chip-filtro:hover i { opacity: 1; }
.chip-filtro-limpar {
  display: inline-flex; align-items: center;
  padding: 5px 10px; border-radius: 999px;
  background: transparent; border: 1px dashed var(--p-line, #e9ecf2);
  color: var(--p-ink3, #616b79); font-size: 12px; font-weight: 600;
  line-height: 1; text-decoration: none;
}
.chip-filtro-limpar:hover { color: var(--p-ink, #0f172a); border-color: #c9d0da; }