/* Tema do produto (22/10/2026, redesenho "Variação B" do Superdesign).
   Carregado DEPOIS do <style> de cada tela: mesma especificidade vence por ordem.
   Só tela (@media screen): a impressão de cada página continua como era. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  --marinho: #1e2d4f;
  --azul-vivo: #1a7fc2;
  --verde-agua: #21bfa5;
  --fundo: #f4f6fa;
  --borda: #e3e7ee;
  --texto: #1a1f26;
  --texto-2: #5a6472;
  --texto-3: #8a94a2;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --sombra-alta: 0 4px 12px rgba(16, 24, 40, .10);
  --lateral: 248px;
}

@media screen {
  body {
    font-family: "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
    background: var(--fundo);
    color: var(--texto);
    -webkit-font-smoothing: antialiased;
  }
  input, select, textarea, button { font-family: inherit; }
  input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--azul-vivo) !important;
    box-shadow: 0 0 0 3px rgba(26, 127, 194, .15);
  }
  table { font-variant-numeric: tabular-nums; }
  th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); font-weight: 600; }

  /* cartões das telas: borda suave + sombra discreta */
  .cartao, .kpi, .card, .folha, .painel, .ficha {
    border-color: var(--borda);
    border-radius: 12px;
    box-shadow: var(--sombra);
  }
  .kpi b, .kpi .v, .kpi .valor { font-variant-numeric: tabular-nums; }

  /* ---- cabeçalho de cada tela: de faixa azul para barra clara ---- */
  body > header {
    background: rgba(255, 255, 255, .92) !important;
    color: var(--texto) !important;
    border-bottom: 1px solid var(--borda);
    box-shadow: none;
    /* mesma altura do cabeçalho antigo (~52px): várias telas grudam painéis em top:48–56px */
    padding: 10px 24px;
    min-height: 52px;
    backdrop-filter: saturate(1.4) blur(8px);
  }
  body > header h1 { color: var(--marinho); font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em; }
  body > header small, body > header .sub { color: var(--texto-2); opacity: 1; }
  body > header a { color: var(--azul); opacity: 1; font-weight: 500; }
  body > header .logo-h { display: none; }
  html.gsm-moldura body > header a[href="/app.html"],
  html.gsm-moldura body > header a[href="/"] { display: none; }
  /* botões que eram brancos sobre o azul */
  body > header button, body > header a.bt, body > header .bt,
  button.sair, button.sinc, .barra a, .barra button {
    background: #fff;
    color: var(--texto);
    border: 1px solid var(--borda);
    border-radius: 8px;
    box-shadow: var(--sombra);
  }
  body > header button:hover, button.sair:hover, button.sinc:hover, .barra a:hover, .barra button:hover {
    border-color: var(--azul-vivo);
    color: var(--azul);
  }
  body > header input, body > header select, .barra input, .barra select,
  .periodo input[type=date] {
    background: #fff;
    color: var(--texto);
    border: 1px solid var(--borda);
    border-radius: 8px;
    color-scheme: light;
  }
  body > header input::placeholder, .barra input::placeholder { color: var(--texto-3); }
  .periodo button { background: #fff; color: var(--texto-2); border: 1px solid var(--borda); }
  .periodo button.ativo, body > header button.ativo {
    background: var(--azul); color: #fff; border-color: var(--azul);
  }
  .papel, body > header .pedido { background: #eef1f5; color: var(--texto-2); }
  .badge { background: #d93025; color: #fff; }

  /* ---- moldura: barra lateral ---- */
  html.gsm-moldura body { padding-left: var(--lateral); }
  html.gsm-moldura body::before {          /* fundo da lateral já no 1º quadro, antes do JS */
    content: "";
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--lateral);
    background: var(--marinho);
    z-index: 89;
  }
  .gsm-lateral {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--lateral);
    background: var(--marinho);
    color: #c3cbdb;
    display: flex;
    flex-direction: column;
    z-index: 90;
    font-size: 13.5px;
  }
  .gsm-marca { display: flex; align-items: center; gap: 12px; padding: 20px 20px 16px; text-decoration: none; }
  .gsm-marca img { width: 36px; height: 36px; border-radius: 8px; background: rgba(255, 255, 255, .05); }
  .gsm-marca span { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
  .gsm-marca b { color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gsm-marca small { color: #9aa6bd; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gsm-nav { flex: 1; overflow-y: auto; padding: 0 12px 8px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .14) transparent; }
  .gsm-secao { padding: 14px 12px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #6b7694; }
  .gsm-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; margin: 1px 0;
    border-radius: 8px;
    color: #c3cbdb; text-decoration: none;
    transition: background .15s, color .15s;
  }
  .gsm-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
  .gsm-item.ativo { background: var(--azul-vivo); color: #fff; font-weight: 500; }
  .gsm-item[data-gsm="inicio"] { margin-bottom: 4px; padding-top: 10px; padding-bottom: 10px; font-size: 14px; }
  .gsm-item span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gsm-ic { flex-shrink: 0; }
  .gsm-badge { font-size: 11px; font-weight: 700; color: #fff; background: #d93025; border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
  .gsm-usuario { border-top: 1px solid rgba(255, 255, 255, .1); padding: 10px 12px 12px; }
  .gsm-quem { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
  .gsm-avatar {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--azul); color: #fff; font-size: 13px; font-weight: 600;
  }
  .gsm-quem > span:last-child { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
  .gsm-quem b { color: #fff; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
  .gsm-quem i {
    font-style: normal; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
    color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .14); border-radius: 999px; padding: 2px 8px;
  }
  .gsm-acoes { display: flex; gap: 8px; margin-top: 6px; }
  .gsm-bt {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    font: inherit; font-size: 12.5px; color: #c3cbdb; text-decoration: none;
    background: transparent; border: 1px solid rgba(255, 255, 255, .15); border-radius: 8px;
    padding: 8px 6px; cursor: pointer; transition: background .15s, color .15s;
  }
  .gsm-bt:hover { background: rgba(255, 255, 255, .06); color: #fff; }
  .gsm-menu-bt { display: none; }
  .gsm-veu { display: none; }

  /* ---- menu minimizado (27/10/2026): só os ícones, no computador; o nome vem ao passar o mouse ---- */
  .gsm-min-bt {
    width: 100%; margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 6px;
    font: inherit; font-size: 12px; color: #9aa6bd; background: transparent; border: 0; border-radius: 8px;
    padding: 6px; cursor: pointer; transition: background .15s, color .15s;
  }
  .gsm-min-bt:hover { background: rgba(255, 255, 255, .06); color: #fff; }
  @media (min-width: 1024px) {
    html.gsm-mini { --lateral: 72px; }
    html.gsm-mini .gsm-marca { padding: 20px 0 16px; justify-content: center; }
    html.gsm-mini .gsm-marca span, html.gsm-mini .gsm-item span, html.gsm-mini .gsm-quem > span:last-child,
    html.gsm-mini .gsm-bt span, html.gsm-mini .gsm-min-bt span { display: none; }
    html.gsm-mini .gsm-secao { font-size: 0; padding: 10px 4px 6px; }
    html.gsm-mini .gsm-secao::after { content: ""; display: block; height: 1px; background: rgba(255, 255, 255, .1); }
    html.gsm-mini .gsm-item { justify-content: center; padding: 10px 0; position: relative; }
    html.gsm-mini .gsm-badge { position: absolute; top: 2px; right: 2px; font-size: 9px; line-height: 14px; padding: 0 4px; }
    html.gsm-mini .gsm-quem { justify-content: center; padding: 6px 0; }
    html.gsm-mini .gsm-acoes { flex-direction: column; }
    html.gsm-mini .gsm-bt { padding: 8px 0; }
  }
  @media (max-width: 1023px) { #gsm-min { display: none; } }     /* no celular o menu já é gaveta */

  /* respiro no fim da página: o último botão sempre rola para cima do aviso do ZapEquipe */
  html.gsm-moldura body { padding-bottom: 110px; }
  /* aviso flutuante do ZapEquipe no padrão da moldura */
  #ze-aviso { background: var(--marinho) !important; border-radius: 12px !important; box-shadow: 0 6px 20px rgba(0, 0, 0, .3) !important; }

  /* ---- celular e tablet: lateral vira gaveta ---- */
  @media (max-width: 1023px) {
    html.gsm-moldura body { padding-left: 0; }
    html.gsm-moldura body::before { display: none; }
    .gsm-lateral { transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility 0s .2s; }
    html.gsm-aberta .gsm-lateral { transform: none; visibility: visible; transition: transform .2s ease; box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
    html.gsm-aberta .gsm-veu { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 10000; }
    html.gsm-aberta .gsm-lateral { z-index: 10001; }      /* acima do aviso do ZapEquipe (z 9999 no ze-aviso.js) */
    .gsm-menu-bt {
      display: inline-flex; align-items: center; justify-content: center;
      width: 40px; height: 40px; flex-shrink: 0;
      background: #fff; color: var(--marinho);
      border: 1px solid var(--borda); border-radius: 10px; cursor: pointer;
      box-shadow: var(--sombra);
    }
    body > header .gsm-menu-bt { padding: 0; }
    .gsm-menu-bt.solto { position: fixed; top: 12px; left: 12px; z-index: 80; }
    html.gsm-sem-cab body { padding-top: 60px; }       /* o botão solto não cobre o 1º link da tela */
    body > header { padding: 6px 12px; }
    body > header .gsm-menu-bt { width: 36px; height: 36px; }
  }

  /* celular: nada empurra a página para o lado (grade e flex encolhem; tabela rola dentro do cartão).
     Seletores sem classe: a regra da própria tela (com classe) continua valendo. */
  @media (max-width: 700px) {
    /* cabeçalho numa linha só (rola para o lado dentro dele): quebrado em 2–3 linhas ele
       comia a tela e desalinhava os painéis grudados em top:48–56px */
    body > header { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    body > header::-webkit-scrollbar { display: none; }
    body > header > * { flex-shrink: 0; }
    body > header h1 { white-space: nowrap; }
    main, main * { min-width: 0; }
    main table { display: block; max-width: 100%; overflow-x: auto; }
    main input, main select, main textarea { max-width: 100%; }
    main td select { max-width: 70vw; }        /* opção com texto longo não passa da tela */
    .form-grade { grid-template-columns: 1fr 1fr !important; }   /* Usuários: 5 colunas não cabem */
    .form-grade input, .form-grade select { width: 100%; }
    .chips, .abas, .periodo, .etapas, .facetas { flex-wrap: wrap; }
  }
}

@media print {
  .gsm-lateral, .gsm-veu, .gsm-menu-bt { display: none !important; }
  html.gsm-moldura body { padding-left: 0 !important; }
  html.gsm-moldura body::before { display: none !important; }
}