/* A casca do que o cliente vê: a paleta, a barra de cima com a marca dele e os separadores.
 *
 * Vive à parte porque é a mesma em duas páginas: os números (/painel) e os anúncios (/painel/anuncios). Antes cada
 * uma tinha a sua pele (a segunda herdou a da consola da equipa, verde e com lateral), e saltar de uma para a outra
 * parecia sair da aplicação. Decisão do MSR a 23 Set: para o cliente há uma interface só, e é esta.
 *
 * A barra é escura de propósito: o logótipo que o cliente publica no manifesto é branco, e num fundo claro
 * desaparecia (vem da maquete da Galhofo de 18 Set). O desenho é do Gabriel, regra 10.
 */
:root {
  --navy: #1B2949; --navy-2: #24345C; --line: #E2E6EE; --muted: #5C6579;
  --fundo: #F5F6F9; --carta: #ffffff; --bom: #1C9D6B; --mau: #B23B3B; --aviso: #C9821F;
  --barra: #2E4172; --raio: 12px;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 Inter, "Helvetica Neue", Arial, sans-serif;
       color: #1A2236; background: var(--fundo); }
main { max-width: 1240px; margin: 0 auto; padding: 22px 18px 60px; }

header { background: var(--navy); color: #fff; padding: 13px 18px; display: flex; align-items: center;
         gap: 14px 18px; flex-wrap: wrap; }
header .marca { display: flex; align-items: center; gap: 16px; min-width: 0; }
header .marca img { height: 30px; width: auto; max-width: 190px; object-fit: contain; flex: none; }
/* A barra só existe quando há logótipo; sem ele o nome do cliente faz de marca. */
header .marca img + .tit { padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .28); }
header .tit { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
header .tit b { font-size: 17px; letter-spacing: -.015em; }
header .tit span { font-size: 12.5px; color: #C7CED9; }
header .dir { margin-left: auto; display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
              font-size: 12.5px; color: #C7CED9; }
header .quem { display: flex; align-items: center; gap: 8px; min-width: 0; }
header .quem i { width: 28px; height: 28px; border-radius: 50%; background: var(--navy-2); flex: none;
                 display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 11px; color: #fff; }
header button, header select { font: inherit; padding: 7px 11px; border: 1px solid rgba(255, 255, 255, .35);
                               border-radius: 8px; background: transparent; color: #fff; cursor: pointer; }
header button:hover, header select:hover { border-color: #fff; }
header select option { color: #1A2236; }
header .ligacao { color: #fff; border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px;
                  padding: 6px 11px; text-decoration: none; }
header .ligacao:hover { border-color: #fff; }

/* Os separadores, na própria linha dentro da barra: é o que faz os números e os anúncios serem a mesma casa.
   Só aparecem a quem tem mais do que um sítio para onde ir. */
header .abas { flex-basis: 100%; display: flex; gap: 20px; margin: 4px 0 -13px; overflow-x: auto; scrollbar-width: none; }
header .abas::-webkit-scrollbar { display: none; }
header .abas a { color: #C7CED9; text-decoration: none; font-size: 13.5px; font-weight: 600; white-space: nowrap;
                 padding: 9px 2px 10px; border-bottom: 2px solid transparent; }
header .abas a:hover { color: #fff; }
header .abas a[aria-current="page"] { color: #fff; border-bottom-color: #fff; }