/* Pandora Têxtil — identidade visual compartilhada (portal, robôs e painéis) */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  --p-amarelo: #FDD00A;
  --p-verde: #05A44F;
  --p-verde-escuro: #05543F;
  --p-azul: #0560D8;
  --p-mostarda: #D2A526;
  --p-fundo: #F4F6F8;
  --p-card: #FFFFFF;
  --p-texto: #1B2430;
  --p-texto-suave: #5B6675;
  --p-borda: #E1E6EC;
  /* cores funcionais (semáforo), fora da marca */
  --p-ok: #05A44F;
  --p-alerta: #F28C00;
  --p-erro: #D92D20;
  --p-raio: 10px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px; line-height: 1.5;
  color: var(--p-texto); background: var(--p-fundo);
}

/* ---------- Cabeçalho padrão ---------- */
.p-header { background: #fff; border-bottom: 1px solid var(--p-borda); }
.p-header__barra {
  max-width: 1200px; margin: 0 auto; padding: 8px 20px;
  display: flex; align-items: center; gap: 16px; min-height: 60px;
}
.p-header__logo { height: 44px; width: auto; display: block; }
.p-voltar {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border: 1px solid var(--p-borda); border-radius: var(--p-raio);
  background: #fff; color: var(--p-azul); font-weight: 600; font-size: 14px; text-decoration: none;
}
.p-voltar:hover { background: #F0F6FF; }
.p-header__sep { width: 1px; height: 26px; background: var(--p-borda); }
.p-header__titulo { margin: 0; font-size: 18px; font-weight: 600; color: var(--p-verde-escuro); }

/* menu do usuário (recolhido) */
.p-usuario { margin-left: auto; position: relative; }
.p-usuario > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--p-raio); color: var(--p-texto-suave); font-size: 14px;
}
.p-usuario > summary::-webkit-details-marker { display: none; }
.p-usuario > summary:hover { background: var(--p-fundo); }
.p-usuario__menu {
  position: absolute; right: 0; top: calc(100% + 4px); min-width: 210px; z-index: 20;
  background: #fff; border: 1px solid var(--p-borda); border-radius: var(--p-raio);
  box-shadow: 0 8px 24px rgba(16,24,40,.12); padding: 6px;
}
.p-usuario__perfil { padding: 8px 10px; font-size: 13px; color: var(--p-texto-suave); border-bottom: 1px solid var(--p-borda); margin-bottom: 4px; }
.p-usuario__menu a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--p-texto); text-decoration: none; font-size: 14px; }
.p-usuario__menu a:hover { background: var(--p-fundo); }

/* faixa de marca (amarelo, verde, verde escuro) */
.p-faixa { height: 4px; background: linear-gradient(90deg,
  var(--p-amarelo) 0 33.33%, var(--p-verde) 33.33% 66.66%, var(--p-verde-escuro) 66.66% 100%); }

/* ---------- Conteúdo ---------- */
.p-pagina { max-width: 1200px; margin: 0 auto; padding: 24px 20px 48px; }
.p-pagina h2 { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: var(--p-verde-escuro); }
.p-subtitulo { margin: 0 0 20px; color: var(--p-texto-suave); }

.p-card { background: var(--p-card); border: 1px solid var(--p-borda); border-radius: 14px; padding: 18px 20px; }
.p-card + .p-card { margin-top: 16px; }

.p-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 16px; border: 0; border-radius: var(--p-raio);
  background: var(--p-azul); color: #fff; font: inherit; font-weight: 600; text-decoration: none;
}
.p-btn:hover { filter: brightness(.94); }
.p-btn--sec { background: #fff; color: var(--p-azul); border: 1px solid var(--p-borda); }

.p-tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: #FFF7D6; color: #7A5B00; }
.p-tag--ok { background: #DFF5E7; color: var(--p-verde-escuro); }
.p-tag--alerta { background: #FFEBD1; color: #9A5400; }
.p-tag--erro { background: #FDE2E0; color: #A3201A; }

table.p-tabela { width: 100%; border-collapse: collapse; }
.p-tabela th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--p-texto-suave); padding: 10px 12px; border-bottom: 2px solid var(--p-verde-escuro); }
.p-tabela td { padding: 10px 12px; border-bottom: 1px solid var(--p-borda); }

/* séries neutras de gráficos: usar nesta ordem */
:root { --serie-1: #0560D8; --serie-2: #05A44F; --serie-3: #FDD00A; --serie-4: #05543F; --serie-5: #D2A526; }

@media (max-width: 640px) {
  .p-header__titulo { font-size: 16px; }
  .p-header__sep { display: none; }
  .p-header__barra { flex-wrap: wrap; }
}

/* variante de cabeçalho escuro (usar logo-pandora-branco.png) */
.p-header--escuro { background: var(--p-verde-escuro); border-bottom-color: var(--p-verde-escuro); }
.p-header--escuro .p-header__titulo { color: #fff; }
.p-header--escuro .p-header__sep { background: rgba(255,255,255,.3); }
.p-header--escuro .p-usuario > summary { color: #fff; }
.p-header--escuro .p-usuario > summary:hover { background: rgba(255,255,255,.12); }
.p-header--escuro .p-faixa { background: linear-gradient(90deg,
  var(--p-amarelo) 0 33.33%, var(--p-verde) 33.33% 66.66%, var(--p-mostarda) 66.66% 100%); }

/* ---------- Icones de linha (substituem emojis) ---------- */
.p-ico { flex: none; vertical-align: -0.18em; }
.p-header__titulo { display: inline-flex; align-items: center; gap: 10px; }
.p-header__titulo .p-ico { color: var(--p-verde); }
.p-usuario > summary .p-ico { color: var(--p-texto-suave); }