/* Camada única de interface (04/11/2026).
   Vidro no padrão Apple (Liquid Glass: superfície translúcida, desfoque com
   saturação, filete claro de 1px e realce no topo) sobre a paleta da Fingunt:
   vermelho #e11d2a e preto #070707, sem azul e sem emoji.
   Carregada por último no index.html, vale para o app React e para os módulos
   injetados. Não muda estrutura: só a pele comum a todas as telas. */

:root {
  --fg-glass: rgba(16, 10, 12, .58);
  --fg-glass-forte: rgba(14, 9, 11, .82);
  --fg-glass-desfoque: blur(24px) saturate(160%);
  --fg-filete: rgba(255, 255, 255, .07);
  --fg-filete-forte: rgba(255, 255, 255, .12);
  --fg-realce: inset 0 1px 0 rgba(255, 255, 255, .05);
  --fg-sombra: 0 18px 48px rgba(0, 0, 0, .45);
  --fg-raio-p: 10px;
  --fg-raio: 14px;
  --fg-raio-g: 20px;
  --fg-curva: cubic-bezier(.2, .8, .2, 1);
  --fg-acento: #e11d2a;
}

/* ---- Lateral: a nativa do React e a de reserva com a mesma pele ---- */
#root aside.fgd-sidebar-persistente,
#fingunt-sidebar-fallback {
  background: linear-gradient(180deg, rgba(22, 12, 14, .78), rgba(9, 6, 7, .86)) !important;
  border-right: 1px solid var(--fg-filete) !important;
  box-shadow: inset -1px 0 0 rgba(225, 29, 42, .08), 18px 0 48px rgba(0, 0, 0, .34);
}
/* NUNCA pôr backdrop-filter na lateral do React: elemento com backdrop-filter vira o
   contêiner dos filhos position:fixed, e o alerta de tarefa atrasada (que nasce dentro
   da lateral) ficava preso nos 260px dela, cortado à esquerda (04/11/2026, commit
   2d282d8). O desfoque dela vem do #root aside::before do fingunt-tarefas-patch.js. */
#fingunt-sidebar-fallback {
  -webkit-backdrop-filter: var(--fg-glass-desfoque);
  backdrop-filter: var(--fg-glass-desfoque);
}

/* Itens do menu em cápsula, com transição curta */
#root aside nav > button,
#root aside nav > a,
#root aside nav > .fgd-nav-grupo,
#fingunt-sidebar-fallback nav button {
  border-radius: var(--fg-raio-p) !important;
  transition: background-color .18s var(--fg-curva), color .18s var(--fg-curva), box-shadow .18s var(--fg-curva) !important;
}
#root aside nav > button:hover,
#root aside nav > a:hover,
#root aside nav > .fgd-nav-grupo:hover,
#fingunt-sidebar-fallback nav button:hover {
  background-color: rgba(255, 255, 255, .045) !important;
}
#root aside nav > [aria-current='page'],
#fingunt-sidebar-fallback nav [aria-current='page'] {
  background-color: rgba(225, 29, 42, .14) !important;
  box-shadow: inset 0 0 0 1px rgba(225, 29, 42, .38), var(--fg-realce) !important;
  color: #fff !important;
}

/* ---- Menus suspensos, popovers e janelas: vidro forte e cantos regulares ---- */
[role='menu'],
[role='listbox'],
[data-radix-popper-content-wrapper] > *,
#fgd-user-menu,
.fgd-ctx-menu {
  -webkit-backdrop-filter: var(--fg-glass-desfoque);
  backdrop-filter: var(--fg-glass-desfoque);
  border-color: var(--fg-filete-forte) !important;
  border-radius: var(--fg-raio) !important;
  box-shadow: var(--fg-sombra), var(--fg-realce) !important;
}
[role='dialog'] {
  border-radius: var(--fg-raio-g);
}
/* Fundo atrás das janelas: escurece e desfoca, como uma folha do iOS */
.fixed.inset-0[class*='bg-black'],
.fgd-ctx-bg {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ---- Botões de ação à vista em todas as telas (pedido do Yago, 04/11/2026) ----
   Mesmo critério dos Roteiros: o que salva, cria ou envia é vermelho cheio; editar,
   adicionar e os demais secundários têm borda vermelha. Excluir/perigo (.dan, .danger)
   fica como cada tela definiu. Cada módulo tem a sua classe, por isso a lista. */
.fcp-button:not(.fcp-button-secondary):not(.danger):not(.dan),
.fam-button:not(.fam-button-secondary):not(.fam-danger),
.fgd-btn.ok,
.fce-button.primary,
.cb-btn--primario {
  background: #e11d2a !important;
  border-color: #e11d2a !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(225, 29, 42, .28), inset 0 1px 0 rgba(255, 255, 255, .16) !important;
}
.fcp-button-secondary:not(.danger),
.fam-button-secondary,
.fgd-btn.g,
.btn.g:not(.dan):not(.danger),
.btn-edit-feq {
  border: 1px solid rgba(225, 29, 42, .55) !important;
  background: rgba(225, 29, 42, .08) !important;
  color: #fff !important;
}
.fgd-btn.g:hover,
.btn.g:not(.dan):hover,
.btn-edit-feq:hover,
.fcp-button-secondary:not(.danger):hover,
.fam-button-secondary:hover {
  background: rgba(225, 29, 42, .2) !important;
  border-color: #e11d2a !important;
}

/* Botão de abrir o menu no celular (o "fixed top-3 left-3 md:hidden" do React). Ficava
   invisível — cinza sobre fundo escuro e por baixo das barras fixas do topo — e só aparecia
   ao ser tocado (Yago, 05/11/2026). Sempre visível: ícone claro sobre vidro escuro, acima
   das barras. Só a aparência; o clique continua o do React. */
@media (max-width: 767px) {
  #root button.fixed[class*="top-3"][class*="left-3"][class*="md:hidden"] {
    z-index: 100000 !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #f5f0f0 !important;
    background: rgba(16, 10, 12, .78) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
  }
  #root button.fixed[class*="top-3"][class*="left-3"][class*="md:hidden"] svg {
    stroke: currentColor !important;
    color: #f5f0f0 !important;
    opacity: 1 !important;
  }
}

/* Cabeçalho de cada página fixo no topo enquanto a lista rola por baixo (Yago, 05/11/2026:
   "tenho que rolar para cima para achar o botão voltar"). Vale para o cabeçalho de cada
   módulo. Fundo quase opaco e SEM backdrop-filter: com ele, os menus que abrem dentro do
   cabeçalho ficariam presos e cortados (o mesmo defeito do alerta na lateral, ec21fde).
   O cabeçalho do editor de roteiro (.tpk-ed-head) já é sticky no próprio arquivo. */
.fcp-head,
.feq-head,
.fam-head,
.fce-header,
.fgn-top,
.fed-top,
.tp-header:not(.tpk-ed-head) {
  position: sticky !important;
  top: 0;
  z-index: 20;
  background: rgba(10, 7, 8, .94) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}

/* Roteiro (Gravações), 05/11/2026. O contêiner #teleprompter-root é item flex da área principal
   e tem min-height:100vh; com o flex-shrink padrão ele encolhia até 100vh e o conteúdo vazava
   por baixo. Sticky só vale dentro da caixa do pai: ao rolar um roteiro longo, o cabeçalho (com
   o Voltar) e o rodapé saíam da tela junto com a caixa. Sem encolher, a caixa tem a altura toda. */
#teleprompter-root { flex-shrink: 0; }
/* No celular o Voltar do roteiro é só a seta num círculo (font-size:0 no teleprompter.js), mas o
   fingunt-responsive.css força 16px !important em todo button até 640px: o texto "Roteiros"
   vazava do círculo e era cortado na borda esquerda. */
@media (max-width: 900px) {
  #tpk-ed-voltar { font-size: 0 !important; }
  /* O borrado do roteiro no celular: o painel de sugestões (#tpk-lado) vira position:static
     nessa largura (teleprompter.js), mas o #root aside::before do fingunt-tarefas-patch.js é
     absolute com backdrop-filter. Sem um pai posicionado, o ::before passava a cobrir a tela
     inteira (375x761) e embaçava o texto do roteiro. No desktop o aside é sticky e o contém. */
  #tpk-lado::before { display: none !important; }
}

/* Menu recolhido (68px): "Chamados abertos" só com o ícone, como os outros itens. */
#root aside[class*='w-[68px]'] #fg-nav-chamados { justify-content: center; padding-left: 8px !important; padding-right: 8px !important; }
#root aside[class*='w-[68px]'] #fg-nav-chamados > span:not(.fgc-qtd) { display: none !important; }
#root aside[class*='w-[68px]'] #fg-nav-chamados .fgc-qtd { position: absolute; top: 2px; right: 6px; margin: 0; }

/* ---- Campos e botões: foco vermelho, nunca o anel azul do navegador ---- */
#root :is(input, textarea, select, button):focus-visible,
body > :not(#root) :is(input, textarea, select, button):focus-visible {
  outline: 2px solid rgba(225, 29, 42, .55) !important;
  outline-offset: 2px;
}
::selection { background: rgba(225, 29, 42, .35); color: #fff; }

/* ---- Rolagem fina e discreta ---- */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .14) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .22); }

/* ---- Tela de login: cartão de vidro e a marca completa ---- */
.fingunt-login-card {
  background: rgba(18, 12, 14, .62) !important;
  -webkit-backdrop-filter: var(--fg-glass-desfoque);
  backdrop-filter: var(--fg-glass-desfoque);
  border: 1px solid var(--fg-filete-forte) !important;
  border-radius: var(--fg-raio-g) !important;
  box-shadow: var(--fg-sombra), var(--fg-realce) !important;
}
.fingunt-login-marca { display: block; height: 26px; width: auto; margin: 4px auto 18px; }
.fingunt-assinatura-login {
  margin: 18px 0 0; text-align: center; font: 500 11px/1 Inter, system-ui, sans-serif;
  letter-spacing: .14em; text-transform: lowercase; color: #6f6264;
}

/* ---- Quem pediu menos movimento no aparelho ----
   Não há exceção para prefers-reduced-transparency: no Windows ela segue o
   "Efeitos de transparência" do sistema, e o vidro é pedido explícito do Yago. */
@media (prefers-reduced-motion: reduce) {
  #root aside nav > *, #fingunt-sidebar-fallback nav button { transition: none !important; }
}

/* Cabeçalho fixo (Yago, 09/11/2026: "minimamente lei do design"). Páginas que ainda
   deixavam o título rolar embora: Agenda, Financeiro, Telemetria e Fontes de dados.
   Cada regra vale só para a página dela; o cabeçalho fica sob a barra global do app. */
#fac-top,
#fin-portal .head,
.max-w-5xl.mx-auto > header.mb-6:first-child,
#fgf-page > h1:first-child {
  position: sticky; top: 0; z-index: 30;
  background: rgba(10, 10, 12, .94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
#fin-portal .shell { overflow: visible !important; }
.max-w-5xl.mx-auto > header.mb-6:first-child { margin-bottom: 0; padding-bottom: 16px; }
#fgf-page > h1:first-child { margin: 0; padding: 12px 0; }

/* Clientes (carteira): o cabeçalho já era sticky, mas o overflow:hidden do .fcp-shell
   o impedia de ficar fixo ao rolar. */
.fcp-shell { overflow: visible !important; }
.fcp-head {
  z-index: 30; background: rgba(10, 10, 12, .94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}

/* L02: favoritos do menu lateral. A estrela aparece no hover (sempre no toque) e fica fixa quando marcada. */
aside nav[data-fgd-agrupada] > [data-nav-route] { position: relative; }
aside nav .fgd-fav { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: #a08b8f; opacity: 0; transition: opacity .15s, color .15s; cursor: pointer; font-size: 0; }
aside nav > *:hover .fgd-fav, aside nav .fgd-fav:focus-visible, aside nav .fgd-fav.on { opacity: 1; }
aside nav .fgd-fav:hover { color: #ff4652; background: rgba(239, 43, 60, .12); }
aside nav .fgd-fav.on { color: #ef2b3c; }
aside nav .fgd-fav.on svg { fill: currentColor; }
aside nav .fgd-fav:focus-visible { outline: 2px solid #ff4652; outline-offset: 1px; }
aside nav > [data-fgd-fav][draggable=true] { cursor: grab; }
aside nav .fgd-fav-cab { cursor: default; }
aside nav .fgd-fav-cab > svg:first-child { color: #ef2b3c; fill: currentColor; }
@media (hover: none) { aside nav .fgd-fav { opacity: .65; } aside nav .fgd-fav.on { opacity: 1; } }
#fg-nav-chamados .fgd-fav { right: 40px; }

/* Gaveta do menu no celular (abaixo de 768 px): ela fica acima de qualquer cabeçalho fixo da página. Os cabeçalhos sticky
   (#fac-top, .fcp-head, .fce-header...) usam z-index 20 a 30, o mesmo da gaveta (z-30), e como vêm depois no HTML cobriam
   os itens do topo do menu. Aberta, a gaveta é opaca (o vidro deixava o calendário borrado aparecendo por trás);
   fechada, não desenha desfoque nenhum. */
@media (max-width: 767px) {
  #root aside[class*="shrink-0"] { z-index: 9000 !important; }
  #root aside[class*="shrink-0"]:not([class*="w-0"]) { background: rgba(10, 7, 8, .985) !important; box-shadow: 14px 0 40px rgba(0, 0, 0, .55); }
  #root aside[class*="shrink-0"][class*="w-0"]::before { display: none !important; }
  /* Chamado CH-20261111-A96F0C (iPhone 440x483, teclado aberto): o app limita o bloco da navegação em 65vh e as conversas em
     34vh, e no Safari do iPhone o "vh" é a altura da tela SEM barras nem teclado (~956 px). Com 483 px visíveis, o bloco da
     navegação ficava mais alto que a gaveta e a metade de baixo (itens e Sair) era cortada sem ter como rolar. Na gaveta o
     bloco passa a ocupar só o que sobra e rola por dentro; a gaveta ocupa só a área visível (topo e base a 0) e nunca passa de 86% da largura. */
  #root aside[class*="shrink-0"] { top: 0 !important; bottom: 0 !important; height: auto !important; max-width: 86vw; }
  #root aside[class*="shrink-0"] > div { max-width: 86vw; }
  #root aside[class*="shrink-0"] nav.overflow-y-auto { max-height: none !important; flex: 1 1 auto !important; min-height: 120px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  #root aside[class*="shrink-0"] [class*="max-h-[34vh]"] { max-height: none !important; }
  #root aside[data-fgd-isis=aberto] [data-fgd-isis-corpo] { max-height: 50vh !important; min-height: 120px; }
}
@supports (height: 100dvh) {
  @media (max-width: 767px) {
    #root aside[data-fgd-isis=aberto] [data-fgd-isis-corpo] { max-height: 50dvh !important; }
  }
}

/* Favoritos com a lateral recolhida (68 px): sem estrelas por cima dos icones, e o cabecalho "Favoritos" vira so um
   separador fino acima dos itens favoritos (o item favorito sobe pelo CSS order, nao e copiado). */
#root aside[class*='w-[68px]'] nav .fgd-fav { display: none !important; }
#root aside[class*='w-[68px]'] nav > .fgd-fav-cab { height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: 8px 14px !important; border: 0 !important; background: rgba(255, 255, 255, .14) !important; overflow: hidden; font-size: 0 !important; }
#root aside[class*='w-[68px]'] nav > .fgd-fav-cab > * { display: none !important; }
#root aside[class*='w-[68px]'] nav > .fgd-fav-cab[hidden] { display: none !important; }


/* ==== Regra de barras e botões (Yago, 12/11/2026) ====
   Cada módulo desenhou o seu botão: 24 famílias, alturas de 28 a 44 px, cantos de 6, 7, 8,
   9, 10 e 99 px, pesos 600, 700 e 750. Aqui todas passam a ter a mesma forma, o mesmo peso
   e os mesmos estados, pela gramática da Apple (Human Interface Guidelines) trazida para a
   web: cápsula, um só peso, resposta ao toque, desligado apagado. A COR continua a de cada
   tela (vermelho cheio = ação principal; borda vermelha = secundária; sem fundo = terciária;
   excluir fica na engrenagem). Regra completa: docs/regra-barras-e-botoes.md.
   Botão novo: use uma destas classes, ou acrescente a sua nas listas abaixo.
   Sem :is()/:where() e sem gap: o iPad do Yago roda Safari 12. */
:root {
  --fg-btn-raio: 999px;
  --fg-btn-peso: 600;
  --fg-btn-curva: cubic-bezier(.2, .8, .2, 1);
  --fg-barra: rgba(10, 7, 8, .94);
  --fg-barra-filete: rgba(255, 255, 255, .07);
  --fg-barra-sombra: 0 10px 24px rgba(0, 0, 0, .35);
}
.cb-btn, .wf-btn, .fwi-btn, .fgd-btn, .fam-button, .fgt-btn, .cx-btn, .fgn-btn, .fcp-button,
.tpk-btn, .pav-btn, .inc-btn, .fgc-btn, .fac-btn, .fgs-btn, .fed-button, .far-btn, .wff-btn,
.faa-btn, .fgl-btn, .fce-button, .fgu-btn, .feq-button, .feq-btn, .feq-btn-sm, .btn-edit-feq {
  border-radius: var(--fg-btn-raio) !important;
  font-weight: var(--fg-btn-peso) !important;
  letter-spacing: -.005em;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color .16s var(--fg-btn-curva), border-color .16s var(--fg-btn-curva),
    box-shadow .16s var(--fg-btn-curva), opacity .16s var(--fg-btn-curva),
    transform .12s var(--fg-btn-curva) !important;
}
/* Toque: o botão afunda um pouco, como no iOS. */
.cb-btn:active, .wf-btn:active, .fwi-btn:active, .fgd-btn:active, .fam-button:active,
.fgt-btn:active, .cx-btn:active, .fgn-btn:active, .fcp-button:active, .tpk-btn:active,
.pav-btn:active, .inc-btn:active, .fgc-btn:active, .fac-btn:active, .fgs-btn:active,
.fed-button:active, .far-btn:active, .wff-btn:active, .faa-btn:active, .fgl-btn:active,
.fce-button:active, .fgu-btn:active, .feq-button:active, .feq-btn:active, .feq-btn-sm:active,
.btn-edit-feq:active {
  transform: scale(.97);
}
/* Desligado: apagado, sem sombra e sem resposta. */
.cb-btn:disabled, .wf-btn:disabled, .fwi-btn:disabled, .fgd-btn:disabled, .fam-button:disabled,
.fgt-btn:disabled, .cx-btn:disabled, .fgn-btn:disabled, .fcp-button:disabled, .tpk-btn:disabled,
.pav-btn:disabled, .inc-btn:disabled, .fgc-btn:disabled, .fac-btn:disabled, .fgs-btn:disabled,
.fed-button:disabled, .far-btn:disabled, .wff-btn:disabled, .faa-btn:disabled, .fgl-btn:disabled,
.fce-button:disabled, .fgu-btn:disabled, .feq-button:disabled, .feq-btn:disabled,
.feq-btn-sm:disabled, .btn-edit-feq:disabled {
  opacity: .38 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}
/* Barras de página: todas com o mesmo fundo, o mesmo filete e a mesma sombra. */
.fcp-head, .feq-head, .fam-head, .fce-header, .fgn-top, .fed-top, .tp-header:not(.tpk-ed-head),
#fac-top, #fin-portal .head, .max-w-5xl.mx-auto > header.mb-6:first-child, #fgf-page > h1:first-child {
  background: var(--fg-barra) !important;
  border-bottom: 1px solid var(--fg-barra-filete);
  box-shadow: var(--fg-barra-sombra);
}
@media (prefers-reduced-motion: reduce) {
  .cb-btn, .wf-btn, .fwi-btn, .fgd-btn, .fam-button, .fgt-btn, .cx-btn, .fgn-btn, .fcp-button,
  .tpk-btn, .pav-btn, .inc-btn, .fgc-btn, .fac-btn, .fgs-btn, .fed-button, .far-btn, .wff-btn,
  .faa-btn, .fgl-btn, .fce-button, .fgu-btn, .feq-button, .feq-btn, .feq-btn-sm, .btn-edit-feq {
    transition: none !important;
    transform: none !important;
  }
}

/* Botão Atualizar (U-20261114-02): um componente só, ligado pelo FinguntAtualizar (fingunt-carregando.js).
   Enquanto busca, o ícone refresh-cw gira e o botão fica desligado; depois, ao lado, o selo
   "Última atualização às HH:MM" ou "Não atualizou, tente de novo". Sem gap, inset nem clamp (Safari 12). */
:root {
  --fg-atualizar-mut: rgba(244, 244, 245, .62);
  --fg-atualizar-erro: #ff7a85;
}
.fg-atualizar svg { transform-origin: 50% 50%; }
.fg-atualizar .fg-atualizar-ic { margin-right: 6px; vertical-align: -3px; flex: none; }
.fg-atualizando svg {
  -webkit-animation: fg-gira .8s linear infinite;
  animation: fg-gira .8s linear infinite;
}
/* Vem depois da regra "Desligado" (opacity .38): girando, o botão fica legível. */
.fg-atualizando, .fg-atualizando:disabled {
  cursor: progress !important;
  opacity: .82 !important;
}
.fg-atualizado {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-atualizar-mut);
  white-space: nowrap;
  align-self: center;
  vertical-align: middle;
}
.fg-atualizado-erro { color: var(--fg-atualizar-erro); }
@-webkit-keyframes fg-gira {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}
@keyframes fg-gira {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .fg-atualizando svg { -webkit-animation: none; animation: none; }
}