/* =====================================================================
   FOCO — BASE VISUAL DOS CINCO SISTEMAS
   ---------------------------------------------------------------------
   Repaginada de 15/09/2026. Pedido do usuário: o contraste do preto com
   uma cor viva, mas "com cara mais profissional", escuro como PADRÃO e
   claro como alternativa, e o login no mesmo padrão do resto.

   ESTE ARQUIVO É CÓPIA IDÊNTICA em Central, Fiscal, Contábil, Pessoal e
   Clientes (assets/foco-base.css). A fonte da verdade é
   base-visual/foco-base.css — edite lá e rode
   base-visual/copiar_para_modulos.ps1. Uma bateria compara os md5.

   COMO OS MÓDULOS USAM
     · carregado ANTES do estilo.css de cada módulo;
     · SEMPRE por a.php (a.php?f=foco-base.css): as fontes são pedidas ao
       a.php, que é quem entrega woff2 com cache nesta hospedagem — o IIS
       da UOL não serve woff2 sozinho, e o a.php só lê arquivo solto de
       assets/, por isso as fontes não moram numa subpasta;
     · o estilo.css de cada módulo NÃO define cor: ele aponta os nomes
       antigos (--ink, --superficie, --txt, --painel...) para os --fc-*
       daqui. Mudar uma cor é mudar UM lugar.

   TRÊS REGRAS QUE EXPLICAM O RESTO
     1. Cor com função. O acento é ação, seleção e item ativo — nada mais.
        Verde, âmbar, laranja, vermelho e roxo são SINAL, e sinal nunca
        vem só como cor: vem com ícone ou palavra.
     2. Sem vidro, sem brilho, sem degradê. Superfície chapada, borda de
        1px e canto de 3px. A profundidade vem da escala de fundos.
     3. Os dois modos são desenhados, não invertidos: cada tom foi
        escolhido para o seu fundo (texto miúdo ≥ 4,5:1 nos dois).
   ===================================================================== */

/* ---------------- fontes: IBM Plex, servidas pelo próprio site ------- */
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('a.php?f=plex-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('a.php?f=plex-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 500; font-display: swap;
  src: url('a.php?f=plex-cond-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 500; font-display: swap;
  src: url('a.php?f=plex-cond-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url('a.php?f=plex-cond-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url('a.php?f=plex-cond-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url('a.php?f=plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url('a.php?f=plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url('a.php?f=plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url('a.php?f=plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------- a fonte da MARCA: Montserrat ----------------------
   Esboço 3 (15/09/2026): o usuário pediu identidade — "com nome, com logo
   da Foco". A palavra FOCO, os títulos das telas de entrada e os rótulos
   da casca usam a Montserrat, a mesma letra geométrica do logotipo. O
   corpo continua IBM Plex. Um arquivo variável (500 a 800) por faixa. */
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url('a.php?f=montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url('a.php?f=montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------- o que não muda com o modo ------------------------- */
:root {
  --fc-fonte:  "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --fc-titulo: "IBM Plex Sans Condensed", "IBM Plex Sans", "Arial Narrow", sans-serif;
  --fc-mono:   "IBM Plex Mono", Consolas, "Courier New", monospace;
  --fc-marca-fonte: "Montserrat", "Segoe UI", Arial, sans-serif;
  --fc-raio-p: 3px;
  --fc-raio:   4px;
  --fc-raio-g: 8px;
  --fc-transicao: .14s ease;
  /* a curva dos movimentos da casca e das entradas: sai rápido, assenta devagar */
  --fc-curva: cubic-bezier(.2, .8, .2, 1);
  /* o degradê do símbolo é da MARCA e vale nos dois modos */
  --fc-marca-luz: #86aef0;
  --fc-marca-sombra: #3a5d96;
}

/* ---------------- ESCURO — o padrão ---------------------------------
   Vale também sem atributo nenhum: tela que nasce antes de saber quem é
   a pessoa (login, reserva, sso) abre escura, que é o padrão da casa. */
:root,
html[data-tema="escuro"] {
  color-scheme: dark;
  --fc-bg:          #0a0d11;
  --fc-painel:      #10151b;
  --fc-elevado:     #161d25;
  --fc-campo:       #0c1015;
  --fc-hover:       #1a232d;
  --fc-linha:       #222c37;
  --fc-linha-forte: #334150;

  --fc-tinta:   #e8edf2;
  --fc-tinta-2: #b3bdc7;
  --fc-apagada: #8793a0;

  --fc-acento:       #22c7dd;
  --fc-acento-forte: #5ad7e8;
  --fc-acento-tinta: #03161a;
  --fc-acento-fundo: rgba(34, 199, 221, .12);
  --fc-acento-borda: rgba(34, 199, 221, .45);

  /* O AZUL DA FOCO — identidade (símbolo, palavra, saudação), nunca ação.
     E a cor de cada sistema: marcador do alternador, da colmeia de escolha
     e do item aceso na lateral. */
  --fc-marca:       #6b9be6;
  --fc-marca-tinta: #07172e;
  --fc-marca-fundo: rgba(107, 155, 230, .14);
  --fc-m-central:  #5b93ff;
  --fc-m-fiscal:   #25b9a4;
  --fc-m-contabil: #e2a53a;
  --fc-m-pessoal:  #a083f2;
  --fc-m-clientes: #e0558b;

  --fc-ok:       #3ecf8e;  --fc-ok-fundo:      rgba(62, 207, 142, .12);  --fc-ok-borda:      rgba(62, 207, 142, .34);
  --fc-aviso:    #f0b44c;  --fc-aviso-fundo:   rgba(240, 180, 76, .13);  --fc-aviso-borda:   rgba(240, 180, 76, .38);
  --fc-serio:    #f28c5e;  --fc-serio-fundo:   rgba(242, 140, 94, .13);  --fc-serio-borda:   rgba(242, 140, 94, .38);
  --fc-critico:  #f36b7e;  --fc-critico-fundo: rgba(243, 107, 126, .13); --fc-critico-borda: rgba(243, 107, 126, .42);
  --fc-falha:    #ab98f2;  --fc-falha-fundo:   rgba(171, 152, 242, .13); --fc-falha-borda:   rgba(171, 152, 242, .38);
  --fc-neutro-fundo: rgba(135, 147, 160, .16);

  /* categoria (equipe, pessoa, série): ordem fixa, passos do escuro */
  --fc-cat-1: #4a90e8;  --fc-cat-2: #e0703f;  --fc-cat-3: #23b083;  --fc-cat-4: #d6a02a;
  --fc-cat-5: #dc6b98;  --fc-cat-6: #4caf50;  --fc-cat-7: #9a8cf0;  --fc-cat-8: #e86a6a;

  --fc-grade: #1b232c;
  --fc-eixo:  #3a4755;
  --fc-veu:   rgba(3, 6, 9, .72);

  --fc-sombra:   0 1px 0 rgba(0, 0, 0, .35);
  --fc-sombra-m: 0 6px 18px rgba(0, 0, 0, .40);
  --fc-sombra-g: 0 18px 48px rgba(0, 0, 0, .58);
  --fc-anel:     0 0 0 3px rgba(34, 199, 221, .28);
}

/* ---------------- CLARO --------------------------------------------- */
html[data-tema="claro"] {
  color-scheme: light;
  --fc-bg:          #f2f4f7;
  --fc-painel:      #ffffff;
  --fc-elevado:     #f7f9fb;
  --fc-campo:       #ffffff;
  --fc-hover:       #edf2f6;
  --fc-linha:       #dfe4ea;
  --fc-linha-forte: #c3ccd6;

  --fc-tinta:   #101820;
  --fc-tinta-2: #3f4b57;
  --fc-apagada: #5f6b77;

  --fc-acento:       #00788c;
  --fc-acento-forte: #005f6f;
  --fc-acento-tinta: #ffffff;
  --fc-acento-fundo: rgba(0, 120, 140, .09);
  --fc-acento-borda: rgba(0, 120, 140, .45);

  --fc-marca:       #35598f;
  --fc-marca-tinta: #ffffff;
  --fc-marca-fundo: rgba(53, 89, 143, .10);
  --fc-m-central:  #2f6fe0;
  --fc-m-fiscal:   #0e8a79;
  --fc-m-contabil: #a86f06;
  --fc-m-pessoal:  #6f4fd1;
  --fc-m-clientes: #b3336a;

  --fc-ok:       #0f7a47;  --fc-ok-fundo:      rgba(15, 122, 71, .10);   --fc-ok-borda:      rgba(15, 122, 71, .30);
  --fc-aviso:    #8f5600;  --fc-aviso-fundo:   rgba(214, 140, 0, .14);   --fc-aviso-borda:   rgba(143, 86, 0, .32);
  --fc-serio:    #ad4a14;  --fc-serio-fundo:   rgba(173, 74, 20, .10);   --fc-serio-borda:   rgba(173, 74, 20, .30);
  --fc-critico:  #bf2439;  --fc-critico-fundo: rgba(191, 36, 57, .09);   --fc-critico-borda: rgba(191, 36, 57, .32);
  --fc-falha:    #5b4bb0;  --fc-falha-fundo:   rgba(91, 75, 176, .10);   --fc-falha-borda:   rgba(91, 75, 176, .30);
  --fc-neutro-fundo: rgba(95, 107, 119, .12);

  --fc-cat-1: #2a78d6;  --fc-cat-2: #d8612f;  --fc-cat-3: #15966a;  --fc-cat-4: #c98a00;
  --fc-cat-5: #cf5a8b;  --fc-cat-6: #2f8f36;  --fc-cat-7: #5a4bb8;  --fc-cat-8: #d64545;

  --fc-grade: #eef1f5;
  --fc-eixo:  #cfd6de;
  --fc-veu:   rgba(16, 24, 32, .45);

  --fc-sombra:   0 1px 2px rgba(16, 24, 32, .06);
  --fc-sombra-m: 0 6px 18px rgba(16, 24, 32, .10);
  --fc-sombra-g: 0 18px 48px rgba(16, 24, 32, .18);
  --fc-anel:     0 0 0 3px rgba(0, 120, 140, .22);
}

/* ---------------- regras globais ------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--fc-bg); }
body {
  margin: 0;
  background: var(--fc-bg);
  color: var(--fc-tinta);
  font-family: var(--fc-fonte);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* O vidro saiu do desenho. As folhas antigas pedem `backdrop-filter` em
   dezenas de lugares, parte com valor literal; uma regra só desliga todos
   e desliga também o que alguém escrever amanhã sem lembrar disto. */
*, *::before, *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

::selection { background: color-mix(in srgb, var(--fc-acento) 30%, transparent); }
:focus-visible { outline: 2px solid var(--fc-acento); outline-offset: 2px; }

* { scrollbar-color: var(--fc-linha-forte) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--fc-linha-forte); border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--fc-apagada); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

.fc-num { font-family: var(--fc-mono); font-variant-numeric: tabular-nums; }

/* ---------------- o botão de modo, igual nos cinco ------------------
   Um botão só, e não três: são dois estados, e alternar entre dois é o
   gesto que todo mundo já conhece. O ícone é o do modo PARA ONDE vai. */
.fc-modo {
  width: 34px; height: 34px; padding: 0; flex: none;
  display: inline-grid; place-items: center;
  border: 1px solid var(--fc-linha-forte); border-radius: var(--fc-raio);
  background: var(--fc-painel); color: var(--fc-tinta-2); cursor: pointer;
  transition: background var(--fc-transicao), color var(--fc-transicao);
}
.fc-modo:hover { background: var(--fc-hover); color: var(--fc-tinta); }
.fc-modo svg { width: 16px; height: 16px; display: block; }
.fc-modo .fc-sol { display: none; }
html[data-tema="escuro"] .fc-modo .fc-sol, html:not([data-tema]) .fc-modo .fc-sol { display: block; }
html[data-tema="escuro"] .fc-modo .fc-lua, html:not([data-tema]) .fc-modo .fc-lua { display: none; }

/* ---------------- PEÇAS VIVAS (Esboço 3) ----------------------------
   Divididas pela casca (foco-casca.css) e pelas telas de entrada
   (foco-entrada.css): botão com onda no clique, chave liga/desliga,
   avatar, o símbolo com o degradê da marca, o modo que vira sol e lua, a
   rodinha de espera e o mergulho de cor ao trocar de sistema. */
.fc-casca [hidden], .fc-susp [hidden], .fc-veu [hidden], .fc-gaveta [hidden],
.fc-login [hidden], .fc-portal [hidden], .fc-escolha [hidden] { display: none !important; }

.fc-bt {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; margin: 0; padding: 0 14px; overflow: hidden; white-space: nowrap; text-decoration: none;
  border: 1px solid var(--fc-linha-forte); border-radius: var(--fc-raio);
  background: var(--fc-painel); color: var(--fc-tinta); font: 500 14px/1 var(--fc-fonte); cursor: pointer;
  transition: transform .18s var(--fc-curva), background .18s, border-color .18s, box-shadow .18s, color .18s;
}
.fc-bt:hover:not(:disabled) { background: var(--fc-hover); transform: translateY(-1px); }
.fc-bt:active:not(:disabled) { transform: translateY(0) scale(.98); }
.fc-bt:disabled { opacity: .65; cursor: progress; }
.fc-bt .fc-ic { width: 17px; height: 17px; flex: none; }
.fc-bt-cheio { background: var(--fc-acento); border-color: var(--fc-acento); color: var(--fc-acento-tinta); font-weight: 600; }
.fc-bt-cheio:hover:not(:disabled) { background: var(--fc-acento-forte); border-color: var(--fc-acento-forte); box-shadow: 0 8px 20px -10px var(--fc-acento); }
.fc-bt-mini { height: 28px; padding: 0 10px; font-size: 12px; }
.fc-onda { position: absolute; border-radius: 50%; background: currentColor; opacity: .22; transform: scale(0); animation: fc-onda .6s ease-out forwards; pointer-events: none; }
@keyframes fc-onda { to { transform: scale(4); opacity: 0; } }

.fc-rodinha { display: inline-block; width: 16px; height: 16px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: fc-gira .7s linear infinite; }
@keyframes fc-gira { to { transform: rotate(360deg); } }
@keyframes fc-pulsar { 50% { transform: scale(1.6); opacity: .5; } }

.fc-chave { position: relative; display: inline-flex; align-items: center; gap: 10px; color: var(--fc-tinta-2); font: 500 13px/1.3 var(--fc-fonte); cursor: pointer; user-select: none; }
.fc-chave input { position: absolute; opacity: 0; pointer-events: none; }
.fc-chave i { position: relative; width: 36px; height: 20px; flex: none; border-radius: 10px; background: var(--fc-linha-forte); transition: background .2s; }
.fc-chave i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--fc-tinta); transition: transform .25s var(--fc-curva), background .2s; }
.fc-chave input:checked + i { background: var(--fc-acento); }
.fc-chave input:checked + i::after { transform: translateX(16px); background: var(--fc-acento-tinta); }
.fc-chave input:focus-visible + i { outline: 2px solid var(--fc-acento); outline-offset: 2px; }

.fc-avatar {
  position: relative; display: grid; place-items: center; width: 38px; height: 38px; flex: none; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: linear-gradient(135deg, var(--fc-marca-luz), var(--fc-marca-sombra));
  color: #ffffff; font: 700 13px/1 var(--fc-marca-fonte); letter-spacing: .02em; cursor: pointer;
  transition: transform .25s var(--fc-curva);
}
button.fc-avatar:hover { transform: scale(1.07); }
.fc-avatar::after { content: ""; position: absolute; right: 0; bottom: 1px; width: 10px; height: 10px; border-radius: 50%; background: var(--fc-ok); box-shadow: 0 0 0 2px var(--fc-bg); transition: background .3s; }
.fc-avatar.fc-off::after { background: var(--fc-critico); }

.fc-simbolo { display: block; width: 32px; height: auto; flex: none; overflow: visible; }
.fc-simbolo path { fill: url(#fc-grad-marca) var(--fc-marca); }

.fc-modo-morfo svg { width: 18px; height: 18px; overflow: visible; transition: transform .5s var(--fc-curva); }
.fc-modo-morfo .fc-raios { transform-box: view-box; transform-origin: 12px 12px; transition: opacity .3s, transform .5s var(--fc-curva); }
.fc-modo-morfo .fc-lua-corte { transform: translate(12px, -12px); transition: transform .5s var(--fc-curva); }
.fc-modo-morfo:hover svg { transform: rotate(-25deg); }
/* A LUA: o recorte do desenho original deixava mais da metade do círculo e
   parecia uma tigela. No claro o círculo cresce e o recorte chega mais perto
   do centro: sobra uma lua crescente de verdade. (cx, cy e r como CSS valem
   no Chrome; noutro navegador fica o desenho do HTML.) */
.fc-modo-morfo svg > circle { transition: r .5s var(--fc-curva); }
.fc-modo-morfo .fc-lua-corte { cx: 14.6px; cy: 9.4px; r: 5.4px; }
html[data-tema="claro"] .fc-modo-morfo svg > circle { r: 6.8px; }
html[data-tema="claro"] .fc-modo-morfo .fc-raios { opacity: 0; transform: scale(.4); }
html[data-tema="claro"] .fc-modo-morfo .fc-lua-corte { transform: none; }

/* o mergulho: a cor do sistema de destino cobre a tela antes de trocar */
.fc-mergulho { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ---------------- a cor de cada sistema no alternador ---------------
   O mapa (api/sistemas.php) manda as duas cores de cada sistema: a clara,
   que aparece sobre o fundo escuro, e a firme, que aparece sobre o claro.
   A tela escolhe pelo modo; as folhas dos módulos continuam lendo --sis. */
.alt-ic { --sis: var(--sis-escuro); --sis-tinta: var(--fc-bg); }
html[data-tema="claro"] .alt-ic { --sis: var(--sis-claro); --sis-tinta: #ffffff; }

/* ---------------- telas de entrada (login, reserva, portal) ---------
   A tela de senha da Central, a entrada reserva (?local=1) do Contábil e
   do Clientes e a porta do portal do cliente usam as MESMAS peças: quem
   entra por uma reconhece as outras. */
.fc-entrada { min-height: 100vh; display: flex; flex-direction: column; background: var(--fc-bg); color: var(--fc-tinta); }
.fc-entrada-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px; background: var(--fc-painel); border-bottom: 1px solid var(--fc-linha); }
.fc-entrada-corpo { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 48px 24px; display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 56px; align-items: center; }
.fc-entrada-corpo.fc-uma { grid-template-columns: minmax(0, 400px); justify-content: center; }
.fc-entrada-pe { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 12px 24px; border-top: 1px solid var(--fc-linha); font-size: 12px; color: var(--fc-apagada); }
.fc-entrada-pe a { color: var(--fc-tinta-2); }

.fc-marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fc-marca-simbolo { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--fc-raio); background: linear-gradient(135deg, var(--fc-marca-luz), var(--fc-marca-sombra)); color: #ffffff; }
.fc-marca-simbolo svg { width: 14px; height: 17px; display: block; }
.fc-marca strong { display: block; font: 800 15px/1.1 var(--fc-marca-fonte); letter-spacing: .12em; text-transform: uppercase; color: var(--fc-tinta); }
.fc-marca small { display: block; margin-top: 2px; font: 600 10px/1.2 var(--fc-marca-fonte); letter-spacing: .2em; text-transform: uppercase; color: var(--fc-apagada); }

.fc-cartao { background: var(--fc-painel); border: 1px solid var(--fc-linha); border-radius: var(--fc-raio); box-shadow: var(--fc-sombra); padding: 28px; display: grid; gap: 20px; }
.fc-rotulo { font: 500 11px/1.3 var(--fc-titulo); letter-spacing: .07em; text-transform: uppercase; color: var(--fc-apagada); }
.fc-titulo { margin: 6px 0 0; font: 600 26px/1.15 var(--fc-titulo); color: var(--fc-tinta); text-wrap: balance; }
.fc-texto { margin: 0; color: var(--fc-tinta-2); max-width: 54ch; }

.fc-campo { display: grid; gap: 6px; }
.fc-campo label { font-size: 13px; font-weight: 500; color: var(--fc-tinta-2); }
.fc-campo input {
  height: 40px; width: 100%; padding: 0 12px; font: inherit; color: var(--fc-tinta);
  background: var(--fc-campo); border: 1px solid var(--fc-linha-forte); border-radius: var(--fc-raio); outline: none;
  transition: border-color var(--fc-transicao), box-shadow var(--fc-transicao);
}
.fc-campo input:hover { border-color: var(--fc-apagada); }
.fc-campo input:focus { border-color: var(--fc-acento); box-shadow: var(--fc-anel); }

.fc-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; font: 500 14px/1 var(--fc-fonte); cursor: pointer;
  border: 1px solid var(--fc-acento); border-radius: var(--fc-raio);
  background: var(--fc-acento); color: var(--fc-acento-tinta);
  transition: background var(--fc-transicao), border-color var(--fc-transicao);
}
.fc-botao:hover:not(:disabled) { background: var(--fc-acento-forte); border-color: var(--fc-acento-forte); }
.fc-botao:disabled { opacity: .6; cursor: progress; }
.fc-botao.fc-largo { width: 100%; }

.fc-aviso { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--fc-raio); font-size: 13px; line-height: 1.5; border: 1px solid var(--fc-linha); background: var(--fc-elevado); color: var(--fc-tinta-2); }
.fc-aviso.fc-erro { background: var(--fc-critico-fundo); border-color: var(--fc-critico-borda); color: var(--fc-critico); }
.fc-aviso.fc-info { background: var(--fc-acento-fundo); border-color: var(--fc-acento-borda); color: var(--fc-tinta); }

.fc-sistemas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--fc-linha); border: 1px solid var(--fc-linha); border-radius: var(--fc-raio); overflow: hidden; }
.fc-sistemas li { display: grid; grid-template-columns: 10px 1fr; gap: 10px; align-items: baseline; padding: 12px 14px; background: var(--fc-painel); }
.fc-sistemas li i { width: 10px; height: 10px; border-radius: 1px; background: var(--sis, var(--fc-linha-forte)); }
.fc-sistemas li b { font: 600 14px/1.3 var(--fc-titulo); color: var(--fc-tinta); }
.fc-sistemas li span { display: block; font-size: 12px; color: var(--fc-apagada); }

@media (max-width: 860px) {
  .fc-entrada-corpo { grid-template-columns: minmax(0, 1fr); padding: 28px 16px; gap: 28px; }
  .fc-entrada-topo, .fc-entrada-pe { padding-inline: 16px; }
}
@media (max-width: 520px) {
  .fc-sistemas { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* ---------------- impressão: sempre papel branco --------------------
   Com o escuro como padrão, imprimir sem isto gastaria toner pintando o
   fundo. Os mesmos valores do claro, forçados para o papel. */
@media print {
  :root, html[data-tema] {
    color-scheme: light;
    --fc-bg: #ffffff; --fc-painel: #ffffff; --fc-elevado: #f5f7f9; --fc-campo: #ffffff; --fc-hover: #ffffff;
    --fc-linha: #d5dbe2; --fc-linha-forte: #b9c2cc;
    --fc-tinta: #000000; --fc-tinta-2: #26313b; --fc-apagada: #4f5a65;
    --fc-acento: #00788c; --fc-acento-forte: #005f6f; --fc-acento-tinta: #ffffff; --fc-acento-fundo: rgba(0, 120, 140, .08); --fc-acento-borda: rgba(0, 120, 140, .45);
    --fc-ok: #0f7a47; --fc-aviso: #8f5600; --fc-serio: #ad4a14; --fc-critico: #bf2439; --fc-falha: #5b4bb0;
    --fc-ok-fundo: transparent; --fc-aviso-fundo: transparent; --fc-serio-fundo: transparent; --fc-critico-fundo: transparent; --fc-falha-fundo: transparent; --fc-neutro-fundo: transparent;
    --fc-grade: #eceff3; --fc-eixo: #c7cfd8;
    --fc-sombra: none; --fc-sombra-m: none; --fc-sombra-g: none;
  }
  html, body { background: #ffffff !important; color: #000000; }
  .fc-modo { display: none !important; }
}