/* =========================================================================
   PWR DASH — Design System compartilhado (pwrdash-ui.css)
   -------------------------------------------------------------------------
   FONTE ÚNICA de estilo para o portal E para todos os apps filhos.
   Um app filho adota o padrão simplesmente linkando este arquivo:

     <link rel="stylesheet"
           href="https://pwrdash.com.br/static/css/pwrdash-ui.css?v=1" />
     <script src="https://pwrdash.com.br/static/js/pwrdash-ui.js?v=1" defer></script>

   e usando o cabeçalho canônico (.pd-topbar) + as classes .pd-*.
   Não edite cores/fontes direto nos apps: mude AQUI e todos herdam.
   ========================================================================= */

:root {
  /* ----- Marca (azul PWR) ----- */
  --pd-brand:      #0a55ae;
  --pd-brand-700:  #084a97;
  --pd-brand-800:  #063a78;
  --pd-brand-300:  #7fb2ef;
  --pd-brand-100:  #d7e8fb;
  --pd-brand-50:   #eef5fd;

  /* ----- Superfícies ----- */
  --pd-bg:         #f4f7fb;   /* fundo da página */
  --pd-surface:    #ffffff;   /* cards / painéis */
  --pd-surface-2:  #f0f4f9;   /* hover / superfícies sutis */
  --pd-surface-3:  #e7edf5;

  /* ----- Texto / linhas ----- */
  --pd-text:       #0f1d33;
  --pd-text-soft:  #40506a;
  --pd-text-muted: #6b7a90;
  --pd-border:     #dbe2ec;
  --pd-border-2:   #c7d0dd;

  /* ----- Estados ----- */
  --pd-ok:      #12885a;   --pd-ok-bg:   #e4f6ec;
  --pd-danger:  #d33a3a;   --pd-danger-bg:#fdeaea;
  --pd-warn:    #b7791f;   --pd-warn-bg: #fdf3e2;
  --pd-info:    #0a55ae;   --pd-info-bg: #e8f1fd;

  /* ----- Forma / sombra / motion ----- */
  --pd-radius:     14px;
  --pd-radius-sm:  9px;
  --pd-radius-pill:999px;
  --pd-shadow-sm:  0 1px 2px rgba(15,29,51,.05), 0 1px 3px rgba(15,29,51,.06);
  --pd-shadow:     0 6px 20px rgba(10,85,174,.08), 0 2px 6px rgba(15,29,51,.06);
  --pd-shadow-lg:  0 20px 48px rgba(10,85,174,.16);
  --pd-ring:       0 0 0 4px rgba(85,150,237,.30);
  --pd-ease:       .18s cubic-bezier(.4,0,.2,1);

  --pd-topbar-h:   60px;

  --pd-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, Helvetica, Arial, sans-serif;
  --pd-mono: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace;

  font-family: var(--pd-font);
}

*, *::before, *::after { box-sizing: border-box; }

/* Reset leve — não força margin:0 no body pra não brigar com apps legados
   que já tenham seu próprio reset. O portal aplica no seu próprio CSS. */
.pd-app { margin: 0; background: var(--pd-bg); color: var(--pd-text); min-height: 100vh; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =============================== TIPOGRAFIA ============================== */
.pd-h1, h1.pd { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 10px; }
.pd-h2, h2.pd { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 10px; }
.pd-muted { color: var(--pd-text-muted); }
.pd-small { font-size: .85rem; }
.pd-mono  { font-family: var(--pd-mono); }

/* =============================== TOPBAR ================================= */
/* Cabeçalho PADRÃO de todos os apps.
   Estrutura canônica:
     <header class="pd-topbar"> logo | divisor | breadcrumb/tabs | spacer |
                                user-menu | Portal </header>                */
.pd-topbar {
  display: flex; align-items: center; gap: 16px;
  height: var(--pd-topbar-h);
  padding: 0 22px;
  background: linear-gradient(180deg, #0b5cbb 0%, var(--pd-brand) 100%);
  color: #fff;
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 2px 12px rgba(6,58,120,.22);
  font-family: var(--pd-font);
}
.pd-topbar__logo { display: inline-flex; align-items: center; line-height: 0; flex-shrink: 0; }
.pd-topbar__logo img { height: 30px; width: auto; display: block; }
.pd-topbar__divider { width: 1px; height: 26px; background: rgba(255,255,255,.22); flex-shrink: 0; }
.pd-topbar__title {
  font-size: .95rem; font-weight: 600; color: rgba(255,255,255,.95);
  white-space: nowrap; letter-spacing: -.01em;
}
.pd-topbar__crumb { color: rgba(255,255,255,.72); font-size: .88rem; font-weight: 500; white-space: nowrap; }
.pd-topbar__crumb a { color: inherit; text-decoration: none; }
.pd-topbar__crumb a:hover { color: #fff; }
.pd-topbar__spacer { flex: 1 1 auto; min-width: 8px; }

/* Abas dentro da topbar (apps com navegação interna) */
.pd-topbar__tabs { display: flex; align-items: center; gap: 2px; height: 100%; }
.pd-topbar__tab {
  display: inline-flex; align-items: center; height: 100%;
  padding: 0 13px; color: rgba(255,255,255,.78); font-weight: 600; font-size: .9rem;
  text-decoration: none; border-bottom: 2px solid transparent; transition: color var(--pd-ease);
}
.pd-topbar__tab:hover { color: #fff; }
.pd-topbar__tab.is-active { color: #fff; border-bottom-color: #fff; }

/* Menu do usuário na topbar */
.pd-user {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 5px 6px 5px 12px; border-radius: var(--pd-radius-pill);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-size: .86rem; font-weight: 600; white-space: nowrap;
}
.pd-user__avatar {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--pd-brand); font-size: .78rem; font-weight: 800;
}
.pd-user__name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }

/* Botão “Portal” / ações fantasma na topbar */
.pd-topbar .pd-btn.pd-btn--ghost {
  background: transparent; border-color: rgba(255,255,255,.34); color: #fff;
}
.pd-topbar .pd-btn.pd-btn--ghost:hover {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.55);
}

/* Subheader opcional (título da tela + ações) */
.pd-subheader {
  background: var(--pd-surface); border-bottom: 1px solid var(--pd-border);
  padding: 14px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.pd-subheader__title { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.pd-subheader__sub { font-size: .82rem; color: var(--pd-text-muted); margin-top: 2px; }
.pd-subheader__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* =============================== BOTÕES ================================= */
.pd-btn {
  --_bg: var(--pd-surface-2); --_fg: var(--pd-text); --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 18px; border-radius: var(--pd-radius-sm);
  background: var(--_bg); color: var(--_fg); border: 1px solid var(--_bd);
  font: inherit; font-weight: 600; font-size: .92rem; line-height: 1; cursor: pointer;
  text-decoration: none; white-space: nowrap; position: relative;
  transition: background var(--pd-ease), border-color var(--pd-ease), transform .06s ease, box-shadow var(--pd-ease);
}
.pd-btn:hover { text-decoration: none; filter: brightness(.98); }
.pd-btn:active { transform: translateY(1px); }
.pd-btn:focus-visible { outline: none; box-shadow: var(--pd-ring); }
.pd-btn[disabled], .pd-btn.is-loading { opacity: .65; pointer-events: none; }

.pd-btn--primary { --_bg: var(--pd-brand); --_fg: #fff; box-shadow: var(--pd-shadow-sm); }
.pd-btn--primary:hover { --_bg: var(--pd-brand-700); filter: none; }
.pd-btn--ghost   { --_bg: transparent; --_fg: var(--pd-text-soft); --_bd: var(--pd-border-2); }
.pd-btn--ghost:hover { --_bg: var(--pd-surface-2); --_fg: var(--pd-text); filter: none; }
.pd-btn--danger  { --_bg: var(--pd-danger); --_fg: #fff; }
.pd-btn--success { --_bg: var(--pd-ok); --_fg: #fff; }
.pd-btn--sm { padding: 6px 12px; font-size: .82rem; }
.pd-btn--lg { padding: 13px 22px; font-size: 1rem; }
.pd-btn--block { display: flex; width: 100%; }

/* estado de carregamento: spinner no botão */
.pd-btn.is-loading > * { visibility: hidden; }
.pd-btn.is-loading::after {
  content: ""; position: absolute; width: 16px; height: 16px; visibility: visible;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: pd-spin .6s linear infinite;
}

/* =============================== CARDS ================================= */
.pd-card {
  background: var(--pd-surface); border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius); padding: 22px; box-shadow: var(--pd-shadow-sm);
}
.pd-card--flush { padding: 0; overflow: hidden; }

/* =============================== FORM CONTROLS ========================= */
.pd-field { display: flex; flex-direction: column; gap: 6px; }
.pd-label {
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--pd-text-soft);
}
.pd-input, .pd-select, .pd-textarea {
  width: 100%; background: var(--pd-surface); border: 1px solid var(--pd-border-2);
  border-radius: var(--pd-radius-sm); color: var(--pd-text); padding: 11px 13px;
  font: inherit; font-size: .95rem; outline: none;
  transition: border-color var(--pd-ease), box-shadow var(--pd-ease);
}
.pd-input::placeholder { color: var(--pd-text-muted); }
.pd-input:focus, .pd-select:focus, .pd-textarea:focus {
  border-color: var(--pd-brand-300); box-shadow: var(--pd-ring);
}
.pd-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: .93rem; color: var(--pd-text-soft); }
.pd-check input { width: 17px; height: 17px; accent-color: var(--pd-brand); }

/* =============================== TABELA ================================ */
.pd-table-wrap { background: var(--pd-surface); border: 1px solid var(--pd-border); border-radius: var(--pd-radius); overflow: hidden; box-shadow: var(--pd-shadow-sm); }
.pd-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.pd-table th, .pd-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--pd-border); }
.pd-table th {
  background: var(--pd-surface-2); font-size: .7rem; font-weight: 700; color: var(--pd-text-soft);
  text-transform: uppercase; letter-spacing: .06em; position: sticky; top: 0;
}
.pd-table tbody tr:last-child td { border-bottom: none; }
.pd-table tbody tr:hover { background: var(--pd-surface-2); }
.pd-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* =============================== BADGES / CHIPS ======================== */
.pd-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border-radius: var(--pd-radius-pill); font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  background: var(--pd-surface-3); color: var(--pd-text-muted);
}
.pd-badge--ok     { background: var(--pd-ok-bg);     color: var(--pd-ok); }
.pd-badge--danger { background: var(--pd-danger-bg); color: var(--pd-danger); }
.pd-badge--warn   { background: var(--pd-warn-bg);   color: var(--pd-warn); }
.pd-badge--info   { background: var(--pd-info-bg);   color: var(--pd-info); }
.pd-badge--brand  { background: var(--pd-brand-100); color: var(--pd-brand-700); }

/* =============================== ALERTS / CALLOUTS ===================== */
.pd-alert {
  padding: 12px 15px; border-radius: var(--pd-radius-sm); font-size: .92rem;
  border: 1px solid transparent; display: flex; gap: 10px; align-items: flex-start;
}
.pd-alert--error   { background: var(--pd-danger-bg); color: #8c2424; border-color: #f4c2c2; }
.pd-alert--success { background: var(--pd-ok-bg);     color: #0d6b46; border-color: #b7e3ca; }
.pd-alert--warn    { background: var(--pd-warn-bg);   color: #8a5a12; border-color: #ecd3a3; }
.pd-alert--info    { background: var(--pd-info-bg);   color: var(--pd-brand-800); border-color: #bcd8f7; }

/* Callout usado nos guias “como usar / antes de começar” */
.pd-callout {
  border-left: 4px solid var(--pd-brand-300); background: var(--pd-brand-50);
  border-radius: 0 var(--pd-radius-sm) var(--pd-radius-sm) 0; padding: 14px 18px; margin: 16px 0;
}
.pd-callout--warn { border-left-color: var(--pd-warn); background: var(--pd-warn-bg); }
.pd-callout--tip  { border-left-color: var(--pd-ok);   background: var(--pd-ok-bg); }

/* ===================================================================== */
/* ============  INDICADORES DE CARREGAMENTO (PADRÃO ÚNICO)  =========== */
/* ===================================================================== */

/* 1) Barra de progresso no topo — some/aparece automaticamente em
      navegações e envios de formulário (ver pwrdash-ui.js). */
.pd-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%; z-index: 9999;
  background: linear-gradient(90deg, var(--pd-brand-300), var(--pd-brand), var(--pd-brand-300));
  box-shadow: 0 0 8px rgba(10,85,174,.5); opacity: 0; pointer-events: none;
  transition: transform .2s ease, opacity .3s ease;
}
.pd-progress.is-active { opacity: 1; }

/* 2) Spinner reutilizável (círculo girando) */
.pd-spinner {
  display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.2em;
  border: 2.5px solid var(--pd-brand-100); border-top-color: var(--pd-brand);
  border-radius: 50%; animation: pd-spin .7s linear infinite;
}
.pd-spinner--lg { width: 42px; height: 42px; border-width: 4px; }
.pd-spinner--light { border-color: rgba(255,255,255,.35); border-top-color: #fff; }
@keyframes pd-spin { to { transform: rotate(360deg); } }

/* 3) Overlay de carregamento (cobre um card ou a tela toda) */
.pd-overlay {
  position: absolute; inset: 0; z-index: 30;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(255,255,255,.78); backdrop-filter: blur(2px);
  border-radius: inherit; color: var(--pd-text-soft); font-weight: 600; font-size: .92rem;
}
.pd-overlay[hidden] { display: none; }
.pd-overlay--fixed { position: fixed; }

/* 4) Estado de carregamento embutido (para blocos que buscam dados) */
.pd-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 48px 24px; color: var(--pd-text-muted); font-weight: 600; text-align: center;
}

/* 5) Skeleton shimmer (placeholder de conteúdo) */
.pd-skeleton {
  position: relative; overflow: hidden; background: var(--pd-surface-2);
  border-radius: var(--pd-radius-sm);
}
.pd-skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: pd-shimmer 1.3s infinite;
}
@keyframes pd-shimmer { to { transform: translateX(100%); } }

/* Respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  .pd-spinner, .pd-btn.is-loading::after, .pd-skeleton::after { animation-duration: 1.4s; }
  .pd-progress { transition: opacity .3s ease; }
}

/* =============================== UTILITÁRIOS =========================== */
.pd-stack   { display: flex; flex-direction: column; gap: 14px; }
.pd-row     { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pd-spacer  { flex: 1; }
.pd-hide    { display: none !important; }

@media (max-width: 640px) {
  .pd-topbar { padding: 0 14px; gap: 10px; }
  .pd-topbar__crumb, .pd-topbar__title { display: none; }
  .pd-user__name { max-width: 92px; }
}