/* header-clock.css — world-clock compartilhado por index.html (portal) e admin.html.
   Fonte única do LAYOUT do relógio. Comportamento/markup em header-clock.js.
   Combinação #17: 1 linha quando cabe (>=1480px); abaixo, o header quebra e os 9
   relógios vão pra uma 2ª linha de largura total, centralizados — SEMPRE visíveis,
   sem esconder nem clipar nenhum. order:10 + basis 100% jogam os relógios pro fim
   (2ª linha); logo/nav/toggles/lang/menu ficam na 1ª.
   ponytail: cache-bust manual (?v=N no <link> dos 2 arquivos) — .html não roda PHP,
             bump à mão ao editar. min-height 64px literal (admin não tem --header-h). */
/* ─── Shell do header (compartilhado portal + admin) — layout único, não drifta ───
   Dois flex:1 iguais (o .crumbs antes + o .hdr-spacer depois) cercam o .world-clock,
   deixando-o PERTO do centro. NÃO é o centro exato: fica deslocado por
   (logo+nav − controles−chip)/2 — no portal o lang-picker pesa à direita, então o
   relógio cai ~40-60px à esquerda do meio. Centro exato exigiria grid 1fr/auto/1fr
   (decidido não fazer). Padding/gap/altura + responsivo unificados aqui — 1 lugar. */
.app-header{
  display:flex;align-items:center;gap:16px;padding:0 24px;height:64px;
  position:sticky;top:0;z-index:100;
  background:var(--header-bg, rgba(14,6,4,.85));backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border-soft);
}
.app-header .crumbs{display:flex;align-items:center;gap:10px;flex:1;min-width:0;font-size:13px;color:var(--cream-dim)}
.app-header .hdr-spacer{flex:1;min-width:0}

/* Cluster de controles (compartilhado): agrupa os toggles (⚡ recarregar / 🔄 sync /
   🌙 tema) e, no portal, o lang-picker (PT/ES/EN), num pill container único igual ao
   nav-pills. O user-chip fica FORA, ao lado. Dentro do cluster os toggles e o lang
   ficam flat (o container é quem tem a borda). */
.hdr-controls{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:30px;background:var(--panel-2);border:1px solid var(--border-soft);flex-shrink:0}
.hdr-controls .theme-toggle{background:transparent;border:none}
.hdr-controls .lang-picker{background:transparent;border:none;padding:0}
.hdr-controls .hdr-divider{width:1px;height:18px;background:var(--border-soft);margin:0 4px;flex-shrink:0}

/* flex-wrap: na 2ª linha (phone estreito) os 9 fusos quebram em vez de estourar
   o viewport (scroll horizontal). Na 1ª linha o container é do tamanho do conteúdo
   e não quebra. */
.world-clock{display:flex;flex-wrap:wrap;align-items:center;padding:5px 9px;border-radius:30px;background:var(--panel-2);border:1px solid var(--border-soft);font-variant-numeric:tabular-nums;flex-shrink:0}
.wc-city{display:inline-flex;align-items:baseline;gap:4px;padding:0 6px;border-left:1px solid var(--border-soft);line-height:1}
.wc-city:first-child{padding-left:0;border-left:none}
.wc-city:last-child{padding-right:0}
.wc-city .wc-label{color:var(--cream-faint);font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:8px}
.wc-city .wc-time{color:var(--cream);font-weight:600;font-size:10px;letter-spacing:.02em}
@media (max-width:1480px){
  .app-header{flex-wrap:wrap;height:auto;min-height:64px;row-gap:8px;padding-top:10px;padding-bottom:14px}
  .world-clock{order:10;flex:1 1 100%;justify-content:center}
}
/* Responsivo do shell (aqui, no shared — senão os @media inline dos 2 arquivos ficam
   inertes: este css carrega DEPOIS do <style> inline, mesma specificity vence). */
@media (max-width:880px){ .app-header{padding:0 16px} }
@media (max-width:680px){
  .app-header{padding:0 12px;gap:8px}
  .app-header .crumbs{display:none}  /* breadcrumb longo quebrava em 4 linhas no phone (30/06) */
}