/* Paraná Capital — camada de componentes server-rendered.
   Traduzida 1:1 dos componentes React de referência em packages/design-system/components.
   Nenhum valor aqui é livre: tudo remete a um var(--token) definido em design-system/tokens. */

/* ---------- eyebrow / headings ---------- */
.pc-eyebrow-row{display:flex;align-items:center;gap:var(--space-3)}
.pc-eyebrow-num{font:var(--type-mono);color:var(--text-muted)}
.pc-section-title{font:var(--type-display-3);color:var(--text-strong);margin-top:var(--space-2)}

/* ---------- buttons ---------- */
.pc-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font:600 13px/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;height:44px;padding:0 22px;
  border-radius:var(--radius-control);cursor:pointer;transition:var(--transition-control);
  border:1px solid transparent;}
.pc-btn:focus-visible{box-shadow:var(--focus-ring)}
.pc-btn--sm{height:34px;padding:0 14px;font-size:12px}
.pc-btn--lg{height:54px;padding:0 30px;font-size:14px;letter-spacing:.09em}
.pc-btn--full{width:100%}
.pc-btn--primary{background:var(--ink-900);color:var(--sand-50);border-color:var(--ink-900)}
.pc-btn--primary:visited{color:var(--sand-50)}
.pc-btn--primary:hover{background:var(--state-hover-ink);border-color:var(--state-hover-ink);color:var(--sand-50)}
.pc-btn--primary:active{filter:brightness(.94)}
.pc-btn--accent{background:var(--brass-500);color:var(--sand-50);border-color:var(--brass-500)}
.pc-btn--accent:visited{color:var(--sand-50)}
.pc-btn--accent:hover{background:var(--brass-600);border-color:var(--brass-600);color:var(--sand-50);box-shadow:var(--shadow-md)}
.pc-btn--secondary{background:transparent;color:var(--text-strong);border-color:var(--line-strong)}
.pc-btn--secondary:visited{color:var(--text-strong)}
.pc-btn--secondary:hover{background:var(--state-hover-wash);border-color:var(--ink-900);color:var(--text-strong)}
.pc-btn--ghost{background:transparent;color:var(--text-strong);border-color:transparent}
.pc-btn--ghost:visited{color:var(--text-strong)}
.pc-btn--ghost:hover{background:var(--state-hover-wash);color:var(--text-strong)}
.pc-btn:disabled,.pc-btn[aria-disabled="true"]{cursor:not-allowed;color:var(--state-disabled-fg);
  background:var(--state-disabled-bg);border-color:var(--state-disabled-bg)}

.pc-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:var(--radius-control);border:1px solid var(--line-hairline);background:var(--surface-card);
  color:var(--text-strong);cursor:pointer;transition:var(--transition-control)}
.pc-iconbtn:hover{background:var(--state-hover-wash);border-color:var(--line-strong)}
.pc-iconbtn--sm{width:30px;height:30px}

/* ---------- card ---------- */
.pc-card{background:var(--surface-card);border:1px solid var(--line-hairline);
  border-radius:var(--radius-card);padding:var(--pad-card);position:relative;transition:var(--transition-control)}
.pc-card--loose{padding:var(--pad-card-lg)}
.pc-card--tight{padding:var(--space-4)}
.pc-card--accent{border-top:2px solid var(--brass-500)}
.pc-card--interactive{cursor:pointer}
.pc-card--interactive:hover{border-color:var(--line-strong);box-shadow:var(--shadow-md)}

/* ---------- badge / tag ---------- */
.pc-badge{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 var(--font-sans);
  letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border-radius:var(--radius-pill);white-space:nowrap}
.pc-badge--dot::before{content:"";width:5px;height:5px;border-radius:999px;background:currentColor}
.pc-badge--neutral{background:var(--status-neutral-soft);color:var(--status-neutral)}
.pc-badge--positive{background:var(--status-positive-soft);color:var(--status-positive)}
.pc-badge--attention{background:var(--status-attention-soft);color:var(--status-attention)}
.pc-badge--critical{background:var(--status-critical-soft);color:var(--status-critical)}
.pc-badge--brand{background:var(--river-200);color:var(--river-700)}
.pc-badge--brass{background:var(--brass-100);color:var(--brass-700)}

.pc-tag{display:inline-flex;align-items:center;gap:8px;font:500 13px/1 var(--font-sans);
  padding:8px 12px;border-radius:var(--radius-control);background:transparent;color:var(--text-body);
  border:1px solid var(--line-hairline);cursor:default;transition:var(--transition-control)}
a.pc-tag,button.pc-tag{cursor:pointer}
a.pc-tag:hover,button.pc-tag:hover{background:var(--state-hover-wash)}
.pc-tag--selected{background:var(--ink-900);color:var(--sand-50);border-color:var(--ink-900)}

/* ---------- forms ---------- */
.pc-field{display:grid;gap:8px;min-width:0}
.pc-field + .pc-field{margin-top:var(--space-4)}
.pc-label{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.pc-label .pc-required{color:var(--status-critical)}
/* min-width:0: o <input> tem largura mínima própria (~20 caracteres); sem
   isso a caixa não encolhe numa coluna estreita e invade a vizinha. */
.pc-control{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 14px;min-width:0;
  background:var(--surface-card);border:1px solid var(--line-hairline);border-radius:var(--radius-control);
  transition:var(--transition-control)}
.pc-control:focus-within{border-color:var(--ink-900);box-shadow:inset 0 -2px 0 var(--brass-500)}
/* O destaque de foco é da caixa (.pc-control:focus-within). O anel global de
   :focus-visible (tokens/base.css) não pode valer pro campo de dentro, senão
   aparece uma segunda moldura menor e desalinhada dentro da caixa. */
.pc-control input:focus-visible,.pc-control select:focus-visible,.pc-control textarea:focus-visible{box-shadow:none}
.pc-control--error{border-color:var(--status-critical)}
.pc-control input,.pc-control select,.pc-control textarea{flex:1;min-width:0;border:none;outline:none;
  background:transparent;font:var(--type-body);color:var(--text-strong);padding:12px 0}
.pc-control select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:26px}
/* O <select> ocupa a caixa inteira (o espaçamento vai pra dentro dele): a
   lista que o navegador abre segue a largura e a posição do select, então
   com padding na caixa ela abria menor e deslocada em relação à borda. */
.pc-control--select{position:relative;padding:0}
.pc-control--select select{align-self:stretch;width:100%;padding:12px 40px 12px 14px}
.pc-control--select::after{content:"";position:absolute;right:14px;top:50%;width:8px;height:8px;
  border-right:1.5px solid var(--text-muted);border-bottom:1.5px solid var(--text-muted);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}
textarea.pc-control,.pc-control textarea{min-height:120px;align-items:flex-start;padding-top:12px}
.pc-hint{font:var(--type-caption);color:var(--text-muted)}
.pc-hint--error{color:var(--status-critical)}
fieldset.pc-fieldset{border:1px solid var(--line-hairline);border-radius:var(--radius-card);padding:var(--space-5);margin:0}
fieldset.pc-fieldset legend{padding:0 8px;font:var(--type-label);color:var(--text-strong)}

.pc-check{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.pc-check input{position:absolute;opacity:0;width:0;height:0}
.pc-check-box{width:18px;height:18px;flex:0 0 auto;margin-top:2px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:var(--radius-sm);border:1px solid var(--line-strong);
  background:var(--surface-card);color:var(--sand-50);transition:var(--transition-control)}
.pc-check input:checked ~ .pc-check-box{background:var(--ink-900);border-color:var(--ink-900)}
.pc-check input:checked ~ .pc-check-box::after{content:"";display:block;width:5px;height:9px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-1px,-1px)}
.pc-check-text{display:grid;gap:2px}
.pc-check-label{font:var(--type-body-sm);color:var(--text-strong)}
.pc-check-desc{font:var(--type-caption);color:var(--text-muted)}

.pc-radio{display:flex;gap:12px;align-items:center;cursor:pointer}
.pc-radio input{position:absolute;opacity:0;width:0;height:0}
.pc-radio-dot{width:18px;height:18px;flex:0 0 auto;border-radius:999px;border:1px solid var(--line-strong);
  background:var(--surface-card);display:inline-flex;align-items:center;justify-content:center;transition:var(--transition-control)}
.pc-radio input:checked ~ .pc-radio-dot{border-color:var(--ink-900)}
.pc-radio input:checked ~ .pc-radio-dot::after{content:"";width:9px;height:9px;border-radius:999px;background:var(--ink-900)}

.pc-switch{position:relative;display:inline-flex;align-items:center;gap:12px;cursor:pointer}
.pc-switch input{position:absolute;opacity:0;width:0;height:0}
.pc-switch-track{width:38px;height:22px;border-radius:999px;background:var(--sand-300);position:relative;transition:var(--transition-control)}
.pc-switch-track::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:999px;
  background:var(--white);transition:var(--transition-control)}
.pc-switch input:checked ~ .pc-switch-track{background:var(--ink-900)}
.pc-switch input:checked ~ .pc-switch-track::after{transform:translateX(16px)}

/* ---------- tabs / breadcrumb ---------- */
.pc-tabs{display:flex;gap:28px;border-bottom:1px solid var(--line-hairline);overflow-x:auto}
.pc-tab{display:inline-flex;align-items:center;gap:8px;padding:0 0 14px;flex:0 0 auto;white-space:nowrap;
  background:none;border:none;cursor:pointer;font:600 13px/1 var(--font-sans);letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted);box-shadow:none;transition:var(--transition-control);
  text-decoration:none}
.pc-tab:hover{color:var(--text-strong)}
.pc-tab[aria-selected="true"]{color:var(--text-strong);box-shadow:inset 0 -2px 0 var(--brass-500)}
.pc-tab-count{font:var(--type-mono);color:var(--text-muted);letter-spacing:0}

.pc-breadcrumb{display:flex;align-items:center;gap:8px;font:var(--type-caption);color:var(--text-muted);flex-wrap:wrap}
.pc-breadcrumb a{border:none;color:var(--text-muted)}
.pc-breadcrumb a:hover{color:var(--text-strong)}
.pc-breadcrumb-sep{opacity:.5}

/* ---------- alerts / toast (server-rendered flash) ---------- */
.pc-toast{display:flex;gap:14px;align-items:flex-start;max-width:520px;padding:var(--space-4) var(--space-5);
  background:var(--surface-card);border:1px solid var(--line-hairline);border-radius:var(--radius-card);
  box-shadow:var(--shadow-md);margin-bottom:var(--space-4)}
.pc-toast--positive{border-left:2px solid var(--status-positive)}
.pc-toast--critical{border-left:2px solid var(--status-critical)}
.pc-toast--attention{border-left:2px solid var(--status-attention)}
.pc-toast-title{font:var(--type-label);color:var(--text-strong);display:block}
.pc-toast-desc{font:var(--type-caption);color:var(--text-muted);display:block;margin-top:3px}

/* ---------- empty / error states ---------- */
.pc-empty{display:grid;justify-items:start;gap:var(--space-3);padding:var(--space-12) var(--space-6);
  border:1px dashed var(--line-strong);border-radius:var(--radius-card);background:var(--surface-sunken)}
.pc-empty-title{font:var(--type-title);color:var(--text-strong)}
.pc-empty-desc{font:var(--type-body-sm);color:var(--text-muted);max-width:46ch}

.pc-status-page{min-height:60vh;display:grid;place-items:center;text-align:center;padding:var(--space-12) var(--space-6)}
.pc-status-code{font:var(--type-mono);color:var(--text-muted);letter-spacing:.1em}

/* ---------- locked / protected state (not covered explicitly by DS guidelines;
   derived directly from existing tokens: --status-attention for "pending", brass for
   the value being protected, dashed hairline border already used by DataRoomFile pattern) ---------- */
.pc-locked{display:flex;align-items:center;gap:12px;padding:var(--space-4);border:1px dashed var(--line-strong);
  border-radius:var(--radius-card);background:var(--surface-sunken);color:var(--text-muted)}
.pc-locked-icon{width:32px;height:32px;flex:0 0 auto;border-radius:var(--radius-control);
  background:var(--status-attention-soft);color:var(--status-attention);display:grid;place-items:center;font:600 14px/1 var(--font-mono)}
.pc-locked-text{display:grid;gap:2px}
.pc-locked-title{font:var(--type-label);color:var(--text-strong)}
.pc-locked-desc{font:var(--type-caption);color:var(--text-muted)}

/* ---------- layout: shell (dashboards) ---------- */
.pc-shell{display:grid;grid-template-columns:246px 1fr;min-height:100vh;background:var(--surface-sunken)}
.pc-sidebar{background:var(--ink-900);padding:var(--space-6) 0;display:grid;align-content:start;
  gap:var(--space-8);position:sticky;top:0;height:100vh;overflow-y:auto}
.pc-sidebar-logo{padding:0 var(--space-6)}
.pc-sidebar-nav{display:grid}
.pc-sidebar-link{border:none;display:flex;align-items:center;gap:12px;padding:12px var(--space-6);
  font:500 14px/1 var(--font-sans);color:rgba(250,248,244,.72);background:transparent;
  box-shadow:none;text-decoration:none;transition:var(--transition-control)}
.pc-sidebar-link:hover{color:var(--sand-50);background:rgba(250,248,244,.06)}
.pc-sidebar-link--active{color:var(--sand-50);background:rgba(250,248,244,.06);
  box-shadow:inset 2px 0 0 var(--brass-500)}
.pc-sidebar-aside{margin:0 var(--space-6);padding:var(--space-4);border:1px solid var(--line-on-brand);display:grid;gap:8px}
.pc-shell-header{position:sticky;top:0;z-index:20;background:var(--surface-page);border-bottom:1px solid var(--line-hairline);
  min-height:70px;display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:12px var(--space-6)}
.pc-shell-header-title{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--text-muted);flex:1;min-width:120px}
.pc-shell-main{padding:var(--space-6);display:grid;min-width:0;gap:var(--space-6)}
/* Item de grid não encolhe abaixo do conteúdo (min-width:auto): sem isso uma
   tabela ou fileira de abas larga empurra a página toda pra fora da tela. */
.pc-shell > *,.pc-shell-main > *{min-width:0}
.pc-logout-link{border:none;display:inline-flex;align-items:center;gap:8px;font:var(--type-caption);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted)}

@media (max-width:900px){
  /* minmax(0,1fr), não 1fr: com 1fr a coluna cresce até caber o menu
     inteiro e o overflow-x do menu nunca entra em ação (página estoura). */
  .pc-shell{grid-template-columns:minmax(0,1fr)}
  .pc-sidebar{position:static;height:auto;grid-auto-flow:column;overflow-x:auto;padding:var(--space-3) 0}
  .pc-sidebar-nav{grid-auto-flow:column}
  .pc-sidebar-aside{display:none}
}

/* ---------- generic layout helpers ---------- */
.pc-grid{display:grid;gap:var(--space-6)}
.pc-grid--2{grid-template-columns:repeat(2,1fr)}
.pc-grid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.pc-grid--2,.pc-grid--3{grid-template-columns:1fr}}
.pc-stack{display:grid;gap:var(--stack-default)}
.pc-stack--tight{gap:var(--stack-tight)}
.pc-stack--loose{gap:var(--stack-loose)}
.pc-table{width:100%;border-collapse:collapse;font:var(--type-body-sm)}
/* Rola só a tabela, não a página inteira -- sem isso, qualquer tabela de mais
   de 3-4 colunas (fila de validação, deals, documentos) estoura a largura da
   tela no mobile. Direto na classe, não por view, pra nenhuma tela nova esquecer. */
@media (max-width:760px){
  .pc-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
}
.pc-table th{text-align:left;font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--text-muted);padding:var(--space-3) var(--space-3);
  border-bottom:1px solid var(--line-hairline)}
.pc-table td{padding:var(--space-3);border-bottom:1px solid var(--line-hairline);color:var(--text-body);vertical-align:top}
.pc-table tr:last-child td{border-bottom:none}
.pc-figure{font:var(--type-figure);letter-spacing:-.02em;color:var(--text-strong);font-variant-numeric:tabular-nums}
.pc-kv{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4) var(--space-6)}
.pc-kv-item{display:grid;gap:2px;padding-bottom:var(--space-3);border-bottom:1px solid var(--line-hairline)}
.pc-kv-item--locked{opacity:.55}
.pc-kv-label{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.pc-kv-value{font:var(--type-body-sm);color:var(--text-strong)}
@media (max-width:640px){.pc-kv{grid-template-columns:1fr}}