/* A CASCA DO HUB, SEM AS REGRAS DE ELEMENTO.
   Subconjunto de hub-ui.css para o Contratos. Leva as variaveis de cor e a
   barra de cima; deixa de fora tudo que estiliza elemento nu -- em especial
   `input,select,textarea{width:100%}`, que esticaria os 44 campos deste app,
   dimensionados por estilo embutido e sem largura declarada.

   COPIADO POR FAIXA, E NAO REGRA A REGRA. A primeira versao filtrava seletor
   por seletor e descartou os que comecam por atributo: ficou com
   `.marca-topo{display:none}` e SEM `[data-logo="topo-nome"] .marca-topo-nome
   {display:block}` -- guardou a regra que esconde a marca e jogou fora a que a
   mostra. Tambem achatou os @media, fazendo a altura de celular valer sempre.
   Recortar por faixa preserva os dois.

   Gerado de hub-ui.css em 04/set/2026. Quando o Contratos for portado de
   verdade, este arquivo sai e a folha inteira entra. */

/* ---- as variaveis de cor, nas tres paletas ---- */
:root,
[data-paleta="a"] {
  --roxo:        #732a7b;   /* brandbook */
  --roxo-claro:  #8b22d5;
  --roxo-escuro: #521179;
  --roxo-tenue:  #f6eef8;
  --destaque:    #732a7b;   /* "sua vez" */
  --destaque-bg: #f6eef8;

  --fundo:       #faf8fb;
  --papel:       #ffffff;
  --borda:       #ebe4ee;
  --texto:       #241a28;
  --texto-2:     #6b5f72;
  --texto-3:     #9a8fa0;

  --ok:          #1f9254;  --ok-bg:      #e7f6ed;
  --espera:      #b8860b;  --espera-bg:  #fdf4e0;
  --atraso:      #c0392b;  --atraso-bg:  #fdecea;
  --inerte:      #cfc7d3;  --inerte-bg:  #f2eff3;
  --a1: #b8860b; --a1-bg: #fdf4e0;
  --a2: #c0392b; --a2-bg: #fdecea;
  --a3: #6b1226; --a3-bg: #f9e6ea;
}
/* -------------------------------------------------- PALETA B — roxo + coral */
[data-paleta="b"] {
  --roxo: #732a7b; --roxo-claro: #9b3db0; --roxo-escuro: #521179; --roxo-tenue: #f7f0f9;
  --destaque: #e2574c; --destaque-bg: #fdeeec;
  --fundo: #fdfaf7; --papel: #ffffff; --borda: #f0e6e3;
  --texto: #2b2124; --texto-2: #6f6167; --texto-3: #a2939a;
  --ok: #1f9254; --ok-bg: #e7f6ed;
  --espera: #d97706; --espera-bg: #fef3e2;
  /* vinho escuro, e nao vermelho: com o coral no papel de "sua vez", um
     vermelho comum vira quase a mesma cor e as bolinhas param de informar. */
  --atraso: #7f1d2e; --atraso-bg: #fbe9ec;
  --inerte: #d6cbc8; --inerte-bg: #f4efed;
  /* Os tres niveis de atraso (3, 7 e 15 dias). Rampa que ESCURECE, e nao tres
     matizes diferentes: separa por claro-escuro alem da cor, entao continua
     legivel para quem enxerga cor de outro jeito -- e ninguem precisa decorar
     uma tabela de cores para entender que uma e pior que a outra.
     O coral (--destaque) fica reservado para "e a sua vez, ainda no prazo". */
  --a1: #e08c1f; --a1-bg: #fdf1dd;   /* ambar    3 a 6 dias  */
  --a2: #c2410c; --a2-bg: #fdeade;   /* laranja  7 a 14 dias */
  --a3: #7f1d2e; --a3-bg: #fbe9ec;   /* vinho    15+ dias    */
  /* "e a vez, ainda no prazo" precisa ser CALMO e sair da rampa de atraso.
     Com o coral cheio (#e2574c) ele encostava no laranja do nivel 2 -- o mesmo
     erro que eu ja tinha cometido uma vez entre coral e vermelho. Coral claro
     resolve por claridade, nao por matiz. O --destaque cheio segue nos botoes. */
  --vez: #f0937f; --vez-bg: #fdeeeb;
}
/* ----------------------------------------------- PALETA C — roxo + turquesa */
[data-paleta="c"] {
  --roxo: #6c2b86; --roxo-claro: #8b22d5; --roxo-escuro: #4a1263; --roxo-tenue: #f1ecf7;
  --destaque: #0d9488; --destaque-bg: #e6f6f4;
  --fundo: #f7f9fb; --papel: #ffffff; --borda: #e4e9ef;
  --texto: #1f2937; --texto-2: #5b6675; --texto-3: #94a1b2;
  /* verde, e nao turquesa: com o turquesa no papel de "sua vez", concluida e
     vez ficavam com a mesma matiz e a fileira de bolinhas virava um borrao. */
  --ok: #15803d; --ok-bg: #e8f6ec;
  --espera: #b45309; --espera-bg: #fdf3e3;
  --atraso: #be123c; --atraso-bg: #fdeaef;
  --a1: #b45309; --a1-bg: #fdf3e3;
  --a2: #be123c; --a2-bg: #fdeaef;
  --a3: #7a0d28; --a3-bg: #fae6eb;
  --inerte: #cbd5e1; --inerte-bg: #eef2f6;
}

/* ---- a casca: barra de cima, menu, avatar ---- */
/* ------------------------------------------------------------------ casca */
.hub-topo{position:sticky;top:0;z-index:40;background:var(--papel);
  border-bottom:1px solid var(--borda);display:flex;align-items:center;gap:18px;
  padding:0 20px;height:58px}
.hub-marca{font-family:Sora;font-weight:700;font-size:17px;color:var(--roxo);white-space:nowrap}
.hub-marca span{color:var(--texto-3);font-weight:400}
.hub-menu{display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none}
.hub-menu::-webkit-scrollbar{display:none}
.hub-menu a{display:flex;align-items:center;gap:7px;padding:7px 13px;border-radius:9px;
  color:var(--texto-2);text-decoration:none;font-size:14px;font-weight:500;white-space:nowrap}
.hub-menu a:hover{background:var(--roxo-tenue);color:var(--roxo)}
.hub-menu a[aria-current]{background:var(--roxo);color:#fff}
.hub-sigla{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:6px;background:var(--roxo-tenue);color:var(--roxo);font-size:10px;font-weight:700}
.hub-menu a[aria-current] .hub-sigla{background:rgba(255,255,255,.22);color:#fff}
.hub-eu{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--texto-2)}
.hub-avatar{width:30px;height:30px;border-radius:50%;background:var(--roxo);color:#fff;
  display:grid;place-items:center;font-weight:600;font-size:12px;flex:none}


/* ---- a marca na barra, e o data-logo que a mostra ---- */
/* =========================================================== a marca ======
   A logo veio do brandbook oficial (Marca_Multvision, 7 paginas), extraida em
   VETOR -- nada foi redesenhado. Fonte guardada em hub-multvision/marca/.

   Duas maneiras de aplicar, para o Sidney escolher. A diferenca esta so na
   barra de cima; a tela de entrada leva a logo nas duas.
     data-logo ausente  -> OPCAO A: barra com o nome escrito (como hoje)
     data-logo="topo"   -> OPCAO B: barra com a logo no lugar do nome
   ========================================================================= */
.marca-entrar{display:block;height:46px;width:auto;margin:0 auto 6px}
.marca-topo{height:23px;width:auto;display:none;flex:none}
[data-logo="topo"] .marca-topo{display:block}
[data-logo="topo"] .hub-marca{display:none}

@media (max-width:760px){
  /* Celular: a logo encolhe de proposito. Tela pequena e espaco de trabalho,
     e marca grande demais rouba linha de conteudo. */
  .marca-entrar{height:38px}
  .marca-topo{height:19px}
}

/* OPCAO C: na barra, so o logotipo -- sem o slogan. No tamanho da barra a linha
   "TECNOLOGIA EM SEGURANCA" fica ilegivel e vira sujeira; aqui ela sai, e a
   marca respira. Continua sendo a arte oficial, so a parte do logotipo. */
.marca-topo-nome{height:19px;width:auto;display:none;flex:none}
[data-logo="topo-nome"] .marca-topo-nome{display:block}
[data-logo="topo-nome"] .hub-marca{display:none}
@media (max-width:760px){ .marca-topo-nome{height:17px} }

/* ---- o responsivo da casca ---- */
@media (max-width:760px){
  .hub-topo{padding:8px 13px;gap:9px;height:auto;flex-wrap:wrap}
  .hub-menu{order:3;flex-basis:100%;padding-bottom:2px}
  .hub-eu{margin-left:auto}
  .hub-marca span{display:none}
  .hub-eu .hub-nome{display:none}
}