/* IA Hipócrates — ADMIN. Graphite + green: the control room belongs to neither client navy/gold
   nor reviewer terracotta/teal; every status color must read cleanly on it. */
:root{
  --bg:            #1E222A;
  --surface:       #262C36;
  --surface-raised:#2F3642;
  --surface-sunk:  #1A1E25;
  --border:        #3D4654;
  --border-soft:   #333A46;

  --text:          #EAEDF2;
  --text-2:        #A9B2C1;
  --text-muted:    #78828F;

  --accent:        #4E9E6F;
  --accent-hover:  #5FB483;
  --accent-on:     #0D2318;

  --danger:        #C25048;
  --danger-bg:     #3A2320;
  --warn:          #F0C93E;

  /* shared status vocabulary */
  --st-novo-bg:    #28405A;  --st-novo-fg:    #A8CFEE;
  --st-analise-bg: #4A3D1A;  --st-analise-fg: #F5DA7B;
  --st-done-bg:    #26402F;  --st-done-fg:    #8BD3A3;

  --radius: 8px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
}

*{ box-sizing:border-box; }

body{
  margin:0; padding:2rem 1rem;
  background:var(--bg); color:var(--text);
  font-family:system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:15px; line-height:1.5;
}
.wrap{ max-width:960px; margin:0 auto; }
a{ color:var(--text-2); }

.masthead{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  padding-bottom:14px; margin-bottom:24px;
  border-bottom:1px solid var(--border-soft);
}
.wordmark{ margin:0; font-size:15px; font-weight:600; }
.wordmark .ia{ color:var(--accent); }
.wordmark .role{ color:var(--text-muted); font-weight:400; }
.who{ margin:0; font-size:13px; color:var(--text-muted); }
.who a{ color:var(--text-2); }

h1{ margin:0 0 4px; font-size:22px; font-weight:600; }
.lede{ margin:0 0 24px; font-size:14px; color:var(--text-2); }

h2{
  margin:32px 0 4px; font-size:16px; font-weight:600;
  display:flex; align-items:center; gap:10px;
}
h2 .count{ font-size:12px; font-weight:500; color:var(--text-muted); }
h2 .count.hot{ color:var(--warn); }
.section-note{ margin:0 0 12px; font-size:13px; color:var(--text-muted); }

/* tabs — Operação / Equipe (client-side view toggle) */
.tabs{
  display:flex; gap:4px; margin:20px 0 4px;
  border-bottom:1px solid var(--border-soft);
}
.tab{
  font:inherit; font-size:14px; font-weight:600;
  padding:9px 16px; border:none; background:transparent; cursor:pointer;
  color:var(--text-muted); border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tab:hover{ color:var(--text-2); }
.tab.on{ color:var(--text); border-bottom-color:var(--accent); }

.panel{ background:var(--surface); border-radius:12px; overflow:hidden; }

/* Em revisão accordion */
.acc{ border-bottom:1px solid var(--border-soft); }
.acc:last-child{ border-bottom:none; }
.acc-head{
  display:flex; align-items:center; gap:14px; width:100%;
  padding:13px 16px; border:none; background:transparent; cursor:pointer;
  font:inherit; color:var(--text); text-align:left;
}
.acc-head:hover{ background:var(--surface-raised); }
.acc-head.on{ background:var(--surface-raised); }
.acc-head .chev{
  flex-shrink:0; width:8px; height:8px; border-right:2px solid var(--text-muted);
  border-bottom:2px solid var(--text-muted); transform:rotate(-45deg); transition:transform .15s;
}
.acc-head.on .chev{ transform:rotate(45deg); }
.acc-head .load{
  font-size:13px; font-variant-numeric:tabular-nums; color:var(--text-2);
  text-align:right; min-width:88px;
}
.acc-body{ background:var(--surface-sunk); }
.acc-item{
  display:flex; align-items:center; gap:14px;
  padding:11px 16px 11px 38px; border-top:1px solid var(--border-soft);
}
.acc-item .name{ font-size:14px; }

/* Cadastro accordion (decision 17) — the SAME .acc component as "Em revisão", scoped so nothing
   here reaches that section: every rule below is under .acc.cadastro. The head stacks name over
   meta because a cadastro header carries identity, not one word.

   ─── F-g B1 (owner ruling 2026-09-28): THE CADASTRO IS A SEPARATE CARD ───
   ⭐ THE FORM IS THE CLIENT'S, THE COLOURS ARE THE ADMIN'S. Reproduced here from
   app/static/portal.css:146-164 — .institution-card (own surface, own border, radius, bottom
   margin, overflow hidden) > .institution-head-row (flex row, its own lighter surface) >
   .institution-title > .institution-kicker (11px, .06em tracking, uppercase, --text-2) /
   .institution-name (15px/600, one line with ellipsis) / .institution-meta (12px, mono, muted).
   ⛔ NOT ONE BYTE OF portal.css IS IMPORTED OR COPIED: the admin is a separate image
   (Dockerfile.admin) serving its own bundle, the two palettes are different on purpose
   (portal navy/gold vs admin graphite/green), and reusing the sheet is the second component the
   house forbids. Every value below is an ADMIN token.
   ⛔ AND EVERY NEW RULE IS SCOPED UNDER .panel.cards OR .acc.cadastro so the "Em revisão"
   section — same .acc component, plain .panel — does not move. */

/* The list stops being one boxed panel and becomes a stack of cards. .panel's own background,
   radius and overflow:hidden are what fused the cadastros into a single sheet. */
.panel.cards{ background:transparent; border-radius:0; overflow:visible; }
.panel.cards > .acc.cadastro{
  background:var(--surface-sunk); border:1px solid var(--border-soft);
  border-radius:var(--radius); margin-bottom:12px; overflow:hidden;
}
/* the head-row sits one step lighter than the card, as the client's does */
.acc.cadastro > .acc-headrow{ background:var(--surface); }

.acc.cadastro .acc-head .row-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
/* PERFIL — on top, small, UPPERCASE. The uppercase is CSS, never the text: the server keeps
   sending "Instituição" (the client's own word, out of app/shared/vocab.py), so a screen reader
   reads a word and the guard compares against the one source. */
.acc.cadastro .acc-head .kicker{
  display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-2);
}
/* NOME + PSEUDÔNIMO — siblings on ONE line (decision 19, 2026-09-29). The name keeps its
   ellipsis; the handle never truncates, because half a handle identifies nothing. */
.acc.cadastro .acc-head .name-row{
  display:flex; align-items:baseline; gap:8px; min-width:0;
}
.acc.cadastro .acc-head .name-row > .name{ flex:0 1 auto; min-width:0; }
.acc.cadastro .acc-head .name-row > .pseud{
  flex:0 0 auto; font-family:var(--mono); font-size:12px; color:var(--text-2);
  background:var(--surface-sunk); border:1px solid var(--border-soft);
  border-radius:6px; padding:1px 7px; white-space:nowrap;
}
/* NOME — the prominent line. One line, ellipsis, like the client's. */
.acc.cadastro .acc-head .name{
  display:block; font-size:15px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* DOCUMENTO — underneath, quiet, monospaced (digits line up across cards). */
.acc.cadastro .acc-head .meta{
  display:block; margin-top:1px; font-size:12px;
  color:var(--text-muted); font-family:var(--mono);
}
/* The state summary is a SELO now, not a right-aligned column of text. */
.acc.cadastro .acc-head .badge.b-count{
  background:var(--surface-sunk); color:var(--text-2); border:1px solid var(--border-soft);
}
.acc.cadastro .acc-head .badge.b-count.hot{
  background:var(--st-novo-bg); color:var(--st-novo-fg); border-color:transparent;
}
/* The cadastro header is a ROW, not just the toggle: the "Ver dossie" anchor sits beside the
   button because an <a> inside a <button> is invalid HTML (and the delegated toggle would
   swallow the click). */
.acc.cadastro > .acc-headrow{ display:flex; align-items:center; gap:10px; padding-right:16px; }
.acc.cadastro > .acc-headrow > .acc-head{ flex:1 1 auto; min-width:0; }
.acc.cadastro > .acc-headrow > .dossie{ flex:0 0 auto; }
.acc-item.pedido{ flex-wrap:wrap; align-items:flex-start; }
.acc-item.pedido .row-main{ flex:1 1 320px; }
.acc-item.pedido .badge, .acc-item.pedido .wait, .acc-item.pedido .btn{ margin-top:2px; }
/* One named area per line, as the client's readiness card lists them (decision 17, item 2). */
.acc-item.pedido .bravo-area{ display:block; padding-left:10px; }

/* System accordion (decision 18) — a sanfona INSIDE the cadastro's, and the SAME .acc component
   for the third time.

   ─── F-g B2 (owner ruling 2026-09-28): EACH SYSTEM IS A CARD, GROUPED UNDER A SECTION TITLE
   BY A VERTICAL RAIL ───
   ⭐ THE FORM IS THE CLIENT'S. Reproduced from app/static/portal.css:215-220
   (.institution-systems-wrap = position:relative + left padding, with the rail as an ABSOLUTE
   2px ::before, never a container border; .systems-label = 12px, --text-2) and
   app/static/portal.css:110-140 (.sys = own surface, radius, bottom margin, overflow hidden, and
   a 3px LEFT ACCENT EDGE over a soft 1px border; .sys-name 15px; .sys-code block, smaller, mono,
   muted). ⛔ Not one byte of portal.css is imported — admin tokens throughout, and the accent
   edge is the ADMIN's green, not the client's.

   ⛔ THE SUPERSEDED RULES ARE RECORDED (D-073), NOT DELETED, because two of them stop MATCHING
   once the systems move inside .sistemas-wrap (they selected a direct child of .acc-body), and a
   dead selector left in a sheet reads as a rule somebody still relies on:

       .acc.cadastro > .acc-body > .acc.sistema{ border-top:1px solid var(--border-soft); border-bottom:none; }
       .acc.sistema > .acc-head{ padding-left:38px; gap:10px; }
       .acc.sistema > .acc-body{ background:var(--surface); }
       .acc.sistema .acc-item.pedido{ padding-left:58px; border-top:none; }

   They expressed the nesting with INDENT (padding-left 38px / 58px) over a flat list. The card
   expresses it with a SURFACE and a RAIL, so the indent now comes from the wrap and the padding
   goes back to the component's own. */

/* the rail + the section title */
.acc.cadastro .sistemas-wrap{ position:relative; padding:12px 16px 14px 30px; }
.acc.cadastro .sistemas-wrap::before{
  content:""; position:absolute; left:16px; top:14px; bottom:14px; width:2px;
  background:var(--border-soft); border-radius:2px;
}
.acc.cadastro .sistemas-label{ margin:0 0 8px; font-size:12px; color:var(--text-2); }

/* the card, with its left accent filete */
.acc.cadastro .acc.sistema{
  background:var(--surface); border:1px solid var(--border-soft);
  border-left:3px solid var(--accent);
  border-radius:10px; margin-bottom:8px; overflow:hidden;
}

/* ⭐ O PISCAR DE NOVIDADE NO PAINEL DO ADMIN -- ordem do dono 2026-10-26, verbatim: *"Mesma
   gramática do cliente: data-has-news no card do cadastro e no card do sistema do painel do
   admin, com o mesmo keyframe (borda pulsando 1,5 s; braço estático para
   prefers-reduced-motion)"*, e *"o admin usa o seu próprio --warn com a mesma animação"*.

   ⛔ A TELA NÃO DECIDE NADA: o gancho `data-has-news` é emitido pelo SERVIDOR
   (`app/api/routers/staff.py::_system_has_news` / `_cadastro_has_news`) e esta folha só sabe
   pintá-lo. ⛔ E ⛔ não há "marcar como visto": o pulso para quando o estado do servidor muda.

   ⛔ `var(--warn)` E ⛔ NUNCA O DOURADO DO CLIENTE. O token de atenção do PORTAL vive em
   `app/static/portal.css`, declarado UMA vez e contado LÁ por `scripts/test_merged_flow_ui.py`
   (U-TETO3b); esta folha ⛔ não o declara, ⛔ não o importa e ⛔ não copia o seu hex em notação
   nenhuma -- são duas aplicações, dois bundles (Dockerfile.admin), e o admin já tem o seu
   próprio token de atenção no `:root` desde sempre (o mesmo que `.count.hot` e `.wait.hot` leem).
   ⚠ E O NOME DELE ⛔ NÃO É ESCRITO AQUI, DE PROPÓSITO: `scripts/test_admin_templates_static.py`
   (checagem 6) afirma que ele ⛔ não aparece nesta folha, e a ordem do dono é medida por um
   `grep` CRU -- uma menção em prosa faria a medição do dono discordar da da guarda.

   ⭐ O VALE É `transparent`, COPIADO DA GRAMÁTICA DO CLIENTE E ⛔ NÃO INVENTADO AQUI: lá um
   cartão descansa em transparente e outro numa borda sólida, e durante o pulso ambos percorrem o
   MESMO caminho, logo a novidade tem a mesma cara onde quer que esteja.
   ⚠ A CONSEQUÊNCIA, DITA E ⛔ NÃO DESCOBERTA: `border-color` é propriedade das QUATRO bordas,
   então o filete de `--accent` do cartão de sistema entra no pulso junto com as outras três. É
   exactamente o que os dois tiers do cliente fazem, e ⛔ NÃO se escreve aqui uma segunda regra
   para o filete: duas regras para um pulso são duas aparências para uma novidade.

   ⛔ ESCOPADAS SOB `.panel.cards` / `.acc.cadastro`, como toda regra deste bloco, para que a
   seção "Em revisão" -- mesmo componente `.acc`, `.panel` puro -- ⛔ não se mexa. ⭐ E a
   especificidade é LOAD-BEARING no braço estático, ⛔ não arrumação: `border-color` ali é uma
   declaração NORMAL, e `.panel.cards > .acc.cadastro` (4 classes) ganharia de um
   `.acc.cadastro[data-has-news]` (3) -- a borda dourada fixa ⛔ nunca apareceria. Dentro da
   animação a cascata já dá prioridade ao keyframe; no `reduce` ⛔ não dá.

   ⚠ `prefers-reduced-motion: reduce` ⛔ NÃO APAGA A NOTÍCIA -- desliga o MOVIMENTO e deixa a
   borda FIXA no dourado de atenção. Desligar a animação e esconder a novidade são duas coisas
   diferentes, e só a primeira foi pedida. */
@keyframes news-pulse{
  0%, 100% { border-color:transparent; }
  50%      { border-color:var(--warn); }
}
.panel.cards > .acc.cadastro[data-has-news],
.acc.cadastro .acc.sistema[data-has-news]{
  animation:news-pulse 1.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .panel.cards > .acc.cadastro[data-has-news],
  .acc.cadastro .acc.sistema[data-has-news]{
    animation:none; border-color:var(--warn);
  }
}

/* --- F-h (owner ruling 2026-09-28): THE SYSTEM HEADER IS A ROW OF **TWO SIBLINGS** ------------
   The TOGGLE (chevron + name + SYS) and the CONTROLS beside it. Same shape as the cadastro
   header above and for the same reason, now measured twice: a <select>/<button> inside the
   <button> is invalid HTML AND the delegated toggle (admin.js:68-77 resolves `.acc-head` with
   `closest`, i.e. up the ANCESTORS) would swallow its click and flip the accordion.
   No JS was added: siblings put the controls outside the handler's reach by construction.

   The three selectors below moved from `.acc.sistema > .acc-head` to
   `.acc.sistema > .acc-headrow > .acc-head` because the head stopped being a direct child of the
   card. THE OLD FORM IS NOT LEFT BEHIND: a selector that no longer matches anything reads, to the
   next person, as a rule somebody still relies on -- the same objection this sheet already
   records for the superseded indent rules above. */
.acc.sistema > .acc-headrow{
  display:flex; align-items:center; flex-wrap:wrap; gap:0 10px; padding-right:14px;
}
/* WIDTH:AUTO IS LOAD-BEARING, not tidying. `.acc-head`'s base rule sets `width:100%`, and in a
   WRAPPING flex row the line break is decided by each item's HYPOTHETICAL main size -- a 100%
   basis makes the head alone fill the line, so the controls would drop to the second row even on
   a 1280px screen. `flex:1 1 auto` then lets the head absorb the slack and push the controls
   right. `min-width:0` only permits SHRINKING after the break; it does not prevent one. */
.acc.sistema > .acc-headrow > .acc-head{
  width:auto; flex:1 1 auto; min-width:0; padding:12px 14px; gap:10px;
}
/* NARROW SCREEN: the controls wrap to the line BELOW the name and never over it -- they are
   flex siblings on their own line, so overlap is impossible by layout, not by z-order luck. */
.acc.sistema > .acc-headrow > .sys-controls{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  flex:0 1 auto; padding:8px 0 8px 14px;
}
/* The select is capped so a long reviewer name cannot push the controls onto their own line on a
   wide screen -- the wrap is meant to be the NARROW case only. */
.acc.sistema .assign-form select{ max-width:190px; }
.acc.sistema .assign-form .btn{ padding:7px 14px; }

/* NOME on top, SYS-nnn under it — small, muted, monospaced (the codes line up down the column) */
.acc.sistema > .acc-headrow > .acc-head .row-main{
  display:flex; flex-direction:column; gap:2px; min-width:0;
}
.acc.sistema > .acc-headrow > .acc-head .name{ font-size:14px; }
.acc.sistema > .acc-headrow > .acc-head .code{
  display:block; font-size:11px; color:var(--text-muted); font-family:var(--mono);
}
.acc.sistema > .acc-body{ background:var(--surface-sunk); border-top:1px solid var(--border-soft); }
.acc.sistema .acc-item.pedido{ padding:11px 14px; border-top:none; }
/* the day count is a SELO now, beside the state seal */
.badge.b-wait{
  background:var(--surface-sunk); color:var(--text-2); border:1px solid var(--border-soft);
  font-variant-numeric:tabular-nums;
}
.badge.b-wait.hot{ background:var(--st-analise-bg); color:var(--st-analise-fg); border-color:transparent; }
.b-novo{ background:var(--st-novo-bg); color:var(--st-novo-fg); }

.row{
  display:flex; align-items:center; gap:14px;
  padding:13px 16px; border-bottom:1px solid var(--border-soft);
}
.row:last-child{ border-bottom:none; }
.row:hover{ background:var(--surface-raised); }
.row-main{ flex:1; min-width:0; }
.name{ margin:0; font-size:15px; }
.meta{ margin:2px 0 0; font-size:12px; color:var(--text-muted); font-family:var(--mono); }
.meta .sep{ margin:0 6px; color:var(--border); }

.wait{
  font-size:13px; font-variant-numeric:tabular-nums;
  color:var(--text-muted); text-align:right; min-width:88px;
}
.wait.hot{ color:var(--warn); }
.wait small{ display:block; font-size:11px; }

.badge{ font-size:12px; padding:3px 10px; border-radius:var(--radius); white-space:nowrap; flex-shrink:0; }
.b-analise{ background:var(--st-analise-bg); color:var(--st-analise-fg); }
.b-done{    background:var(--st-done-bg);    color:var(--st-done-fg); }
.b-role{ background:var(--surface-sunk); color:var(--text-2); border:1px solid var(--border-soft); }

.assign-form{ display:flex; align-items:center; gap:8px; margin:0; }

select, .add-form input{
  font:inherit; font-size:13px;
  padding:7px 10px; border-radius:var(--radius);
  background:var(--surface-sunk); color:var(--text);
  border:1px solid var(--border);
}
select:focus, .add-form input:focus{ outline:none; border-color:var(--accent); }

.btn{
  font:inherit; font-size:13px; font-weight:600;
  padding:8px 16px; border:none; border-radius:var(--radius);
  background:var(--accent); color:#fff;
  cursor:pointer; white-space:nowrap; text-decoration:none;
  display:inline-block; transition:background .12s;
}
.btn:hover{ background:var(--accent-hover); }
.btn.ghost{ background:transparent; color:var(--text-2); border:1px solid var(--border); font-weight:500; }
.btn.ghost:hover{ background:var(--surface-raised); color:var(--text); }
/* Action hierarchy: filled .btn = forward/primary (Aceitar / Gerar / Enviar); .caution = the
   exceptional verdict re-roll (Regerar) — neutral dashed tint, NOT the verdict red/amber/green. */
.btn.caution{ background:var(--surface-raised); color:var(--text-2); border:1px dashed var(--border); }
.btn.caution:hover{ background:var(--surface-sunk); color:var(--text); border-color:var(--text-muted); }

/* Bravo verdict severity badge (admin) — same semantic mapping as the reviewer surface,
   in the graphite/green admin palette. nao_conforme is a filled alarm (must be unmissable). */
.bravo-ov{ display:inline-block; font-size:12px; font-weight:600; padding:2px 9px; border-radius:var(--radius);
  vertical-align:middle; margin-left:6px; letter-spacing:.01em; }
.ov-conforme{      background:var(--st-done-bg);    color:var(--st-done-fg); }    /* green  */
.ov-pendente{      background:var(--st-analise-bg); color:var(--st-analise-fg); } /* amber  */
.ov-nao_conforme{  background:var(--danger);        color:#fff; }                /* red alarm, filled */
.ov-indeterminado{ background:var(--surface-raised); color:var(--text-2); }       /* neutral */

/* Bravo per-ref severity chips + blockers accordion (admin) — mirrors reviewers.css. */
.v-badge{ display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:5px; margin-right:6px; vertical-align:middle; }
.v-nao_atende{    background:var(--danger);         color:#fff; }
.v-parcial{       background:var(--st-analise-bg);  color:var(--st-analise-fg); }
.v-indeterminado{ background:var(--surface-raised); color:var(--text-2); }
.proc-blockers{ padding:0 16px 12px; border-bottom:1px solid var(--border-soft); }
.row:has(+ .proc-blockers){ border-bottom:none; }   /* card + its blockers read as one unit */
.adm-blockers{ margin-top:2px; }
.adm-blockers>summary{ cursor:pointer; font-size:12px; color:var(--warn); }
.blocker{ border:1px solid var(--border-soft); border-radius:var(--radius); margin:6px 0 0; background:var(--surface-sunk); }
.blocker>summary{ list-style:none; cursor:pointer; padding:8px 11px; }
.blocker>summary::-webkit-details-marker{ display:none; }
.blocker-body{ padding:6px 11px 9px; }
.b-fund{ margin:4px 0 0; font-size:13px; color:var(--text-2); }
.b-pend{ margin:4px 0 0; font-size:13px; color:var(--warn); }
.campos>summary{ cursor:pointer; font-size:11px; color:var(--text-muted); margin-top:4px; }
.campos-list{ margin:3px 0 0; font-size:12px; font-family:var(--mono); color:var(--text-2); word-break:break-word; }
.btn.danger{ background:transparent; color:var(--danger); border:1px solid var(--danger); font-weight:500; }
.btn.danger:hover{ background:var(--danger-bg); }

.empty{ padding:26px 20px; text-align:center; font-size:14px; color:var(--text-2); }

.banner-error{ background:var(--danger-bg); border:1px solid var(--danger); color:#F0C9C2;
  border-radius:var(--radius); padding:11px 14px; margin:0 0 16px; font-size:14px; }

/* delete guard + add-member form */
.guard{
  margin:10px 16px 16px;
  background:var(--danger-bg); border:1px solid #5A342F; border-radius:var(--radius);
  padding:14px 16px;
}
.guard h3{ margin:0 0 6px; font-size:14px; color:#F0A79B; }
.guard p{ margin:0 0 10px; font-size:13px; color:var(--text-2); }
.guard p:last-of-type{ margin-bottom:0; }
.guard .blockers{ font-family:var(--mono); font-size:12px; color:var(--text); }
.guard-actions{ display:flex; gap:8px; margin-top:12px; align-items:center; }
.guard-actions form{ margin:0; }
.add-form{ display:flex; flex-direction:column; gap:8px; }

.foot{
  margin-top:40px; padding-top:14px; border-top:1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:12px; color:var(--text-muted);
}
.foot p{ margin:0; }

/* ---------------------------------------------------------------------------------------------
   "Meu cadastro" (0056) -- the member's own profile. OWN CLASS PREFIX (`mc-`) on purpose: this
   page exists on BOTH staff surfaces, whose stylesheets share no vocabulary (`.panel` here,
   `.card` there), so the page brings its own and the two copies stay visually identical.
   --------------------------------------------------------------------------------------------- */
.mc-head{ margin: 18px 0 10px; }
.mc-card{ background:#171922; border:1px solid #262a38; border-radius:10px; padding:18px 20px;
          margin:0 0 18px; }
.mc-card h2{ margin:0 0 4px; font-size:16px; }
.mc-card h3{ margin:18px 0 4px; font-size:14px; }
.mc-note{ color:#9aa3b5; font-size:13px; line-height:1.5; margin:0 0 14px; }
.mc-form{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px 18px; }
.mc-form label{ display:flex; flex-direction:column; gap:4px; font-size:13px; color:#c6cbd8; }
.mc-form input, .mc-form select{ background:#0f1117; border:1px solid #2c3142; border-radius:6px;
          color:#e8ebf2; padding:8px 10px; font-size:14px; }
.mc-form small{ color:#8b93a5; font-size:12px; line-height:1.4; }
.mc-actions{ grid-column:1 / -1; margin:6px 0 0; }
.mc-ok{ background:#12301d; border:1px solid #1f5a34; color:#8fe0ab; border-radius:8px;
        padding:10px 14px; margin:0 0 14px; }
.mc-sig{ margin:0 0 16px; }
.mc-sig img{ max-width:420px; width:100%; background:#fff; border:1px solid #2c3142;
             border-radius:6px; padding:8px; }
.mc-meta{ color:#8b93a5; font-size:12px; margin:6px 0 0; }
.mc-empty{ color:#8b93a5; font-size:13px; margin:0 0 14px; }
.mc-history{ margin:8px 0 0; padding-left:20px; color:#9aa3b5; font-size:13px; line-height:1.7; }
.mc-history li.current{ color:#e8ebf2; }

/* A LISTA EM TABELA -- a tela `/cupons` (0075). ESCOPADO POR CONTAINER, nunca um `table{}` global:
   nenhum outro template do admin usa <table> hoje, logo uma regra global seria uma regra a espera
   de apanhar um template futuro que ninguem reviu.
   Os QUATRO tokens sao os do `:root` no topo deste ficheiro, e sao os MESMOS que a `.row` ja usa,
   para a tabela ler como o resto do painel em vez de como um enxerto: `--text-muted` no rotulo
   (o idioma do `.who` e do `.section-note`), `--border` sob o cabecalho, `--border-soft` no
   separador entre linhas (igual a `.row`), `--surface-raised` no hover (igual a `.row:hover`).
   Sem cor literal e sem token novo: um token INVENTADO nao da erro nenhum, so nao pinta -- um
   `var()` por um nome que o `:root` nao declara e uma cor que desaparece em silencio. */
.panel table{ width:100%; border-collapse:collapse; font-size:14px; }
.panel th, .panel td{ padding:11px 16px; text-align:left; vertical-align:top; }
.panel th{ font-size:13px; font-weight:600; color:var(--text-muted); white-space:nowrap;
           border-bottom:1px solid var(--border); }
.panel tbody tr{ border-top:1px solid var(--border-soft); }
.panel tbody tr:first-child{ border-top:none; }
.panel tbody tr:hover{ background:var(--surface-raised); }

/* A CAIXA DO CODIGO FINAL -- a tela `/cupons` (0075, ajuste 3). ESCOPADA POR CONTAINER: as tres
   regras abaixo vivem todas sob a classe da caixa, e nenhuma delas e um selector nu. Uma regra nua
   de campo apanharia os SETE campos do formulario de criacao, que fica logo acima dela nesta mesma
   tela -- a mesma objeccao que o bloco `A LISTA EM TABELA` acima ja faz a uma regra nua de tabela.
   O NOME DA CLASSE E `cp-caixa-final` E ISSO FOI MEDIDO, NAO ESCOLHIDO. O nome obvio -- o prefixo
   `cp-` desta tela seguido da palavra `criado` -- e PREFIXO do id `cp-criado-por` do campo do
   ajuste 1, no mesmo ficheiro, e contem tambem a classe `ia` do cabecalho. Uma clausula que conte
   o literal mais curto casa o elemento ERRADO e nunca falha pela razao que o seu nome nomeia: e o
   segundo corolario (`D-935`), e foi a prova de render do criterio 5 que o acusou, com DUAS
   ocorrencias da classe numa pagina onde a caixa estava AUSENTE. A cura nao foi ancorar em volta
   da colisao, foi tira-la, e a guarda estatica afirma hoje que esta classe nao e substring de
   nenhum outro identificador desta tela, nem o contrario.
   Os SEIS tokens sao os do `:root` no topo deste ficheiro e NENHUM e novo: `--surface-sunk` no
   fundo (o mesmo que os campos do formulario ja usam), `--accent` na borda da caixa (o verde que
   esta folha ja da ao caminho que avanca), `--radius` nos cantos, `--mono` e `--text` no codigo,
   `--border` na borda do campo.
   O MONOESPACADO E UMA DECISAO E NAO GOSTO: este codigo e ditado ao telefone e digitado a mao, e
   por isso le-se glifo a glifo -- e o token que esta folha ja da ao documento do cadastro e ao
   codigo do sistema, pela mesma razao e nao por uma nova.
   Sem cor literal, sem token novo e sem declaracao de prioridade forcada: um token INVENTADO nao
   da erro nenhum, so nao pinta, e uma cor que desaparece em silencio e o pior resultado possivel
   para uma caixa cuja funcao e ser LIDA e copiada. */
.cp-caixa-final{
  margin:14px 0 0; padding:14px 16px;
  background:var(--surface-sunk); border:1px solid var(--accent);
  border-radius:var(--radius);
}
/* A nota e a classe DA CASA (a mesma dos outros avisos deste cartao); o que muda aqui e so o
   centrado, para ela ler como legenda do campo em vez de como paragrafo do formulario. */
.cp-caixa-final .mc-note{ margin:0 0 10px; text-align:center; }
/* O CAMPO: grande, centrado e de largura cheia, que e o pedido do dono palavra por palavra. A
   largura cheia e o que o torna facil de copiar sem roteiro nenhum -- um duplo-clique seleciona o
   codigo inteiro porque nao ha nada ao lado dele na linha. */
.cp-caixa-final input{
  display:block; width:100%; margin:0; padding:12px 10px;
  font-family:var(--mono); font-size:26px; font-weight:600; letter-spacing:.06em;
  text-align:center; color:var(--text);
  background:var(--surface-sunk); border:1px solid var(--border);
  border-radius:var(--radius);
}