/* ============================================================
   AG4! · PAINEL — Design System (sistema, white mode, roxo AG4)

   Porte do design system do IL HUB (tokens, shell de aplicação,
   cards, tabelas, widgets) trocando o verde pelo ROXO DA MARCA
   e mantendo tudo em tema claro.

   Este arquivo é AUTOSSUFICIENTE: as páginas do painel e da área
   do cliente NÃO carregam mais o style.css do site institucional
   (que é dark). Um arquivo, um tema, sem briga de cascata.

   Duas peles bem diferentes de propósito:
     · ADMIN  (equipe AG4)  → shell de sistema: topbar + rail + breadcrumb,
                              largura cheia, densidade alta.
     · PORTAL (cliente)     → faixa roxa no topo, conteúdo centrado,
                              respiro grande, cara de portal e não de sistema.
   Ninguém confunde em qual dos dois está.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Acento = roxo da marca AG4 */
  --accent:#8B1FB0; --accent-600:#711692; --accent-700:#5B1580;
  --accent-100:#EFDBF8; --accent-50:#F9F2FC;
  --lime:#AEE60C;            /* só decorativo (o "!" da marca) */
  --lime-ink:#3F5400;

  /* Neutros */
  --bg:#F6F5F8; --surface:#FFFFFF; --surface-2:#FAF9FB;
  --ink:#17141C; --ink-2:#453D50; --muted:#8A8395; --faint:#B9B3C2;
  --line:#E8E5EC; --line-2:#F2F0F5;

  /* Escuro (faixa do portal, tela de login) */
  --dark:#150E1D; --dark-2:#1F1529; --dark-ink:#F4F1F8;
  --dark-muted:rgba(244,241,248,.62); --dark-line:rgba(244,241,248,.12);

  /* Semânticas */
  --ok:#1E8E5A;    --ok-bg:#E3F3EA;
  --warn:#B27A18;  --warn-bg:#F8EFDB;
  --danger:#C74A34;--danger-bg:#F9E7E2;
  --info:#3E6B8F;  --info-bg:#E6EEF4;

  /* Tipografia (mesma família da marca) */
  --disp:'Sora',-apple-system,'Segoe UI',sans-serif;
  --sans:'Inter',-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono','SF Mono',Consolas,monospace;
  --fs-xs:11.5px; --fs-sm:13px; --fs-md:14px; --fs-lg:16px; --fs-xl:19px; --fs-2xl:24px; --fs-3xl:30px;

  /* Forma */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-btn:10px; --r-full:999px;
  --sh-sm:0 1px 2px rgba(23,20,28,.05);
  --sh-md:0 6px 18px -6px rgba(23,20,28,.14);
  --sh-lg:0 20px 45px -18px rgba(23,20,28,.3);
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;

  /* Shell */
  --topbar-h:60px; --crumb-h:46px; --rail-w:64px; --rail-open:236px;
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* O `hidden` do HTML tem especificidade de folha do navegador e perde para
   qualquer `display` nosso (.form{display:grid} abria todo formulário de
   edição da página). Aqui ele volta a valer sempre. */
[hidden]{display:none !important}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:var(--fs-md);line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--disp);font-weight:600;letter-spacing:-.02em;line-height:1.18}
a{color:var(--accent);text-decoration:none}
button{cursor:pointer;font-family:inherit}
input,select,textarea{font-family:inherit}
img{display:block;max-width:100%}
ul,ol{list-style:none}
summary::-webkit-details-marker{display:none}
code{font-family:var(--mono);font-size:.92em;background:var(--line-2);padding:1px 5px;border-radius:5px}
::selection{background:var(--accent-100)}
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-thumb{background:var(--faint);border-radius:10px}
::-webkit-scrollbar-track{background:transparent}
.eyebrow{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.mono{font-family:var(--mono)}
.grow{flex:1;min-width:0}

/* ---------- 3. MARCA ---------- */
.mk{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:800;color:var(--ink);white-space:nowrap}
.mk .mk-sq{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;color:#fff;font-size:11px;letter-spacing:-.4px;
  white-space:nowrap;line-height:1;
  background:radial-gradient(circle at 30% 22%,#B24FDA,var(--accent) 58%,var(--accent-700))}
.mk .mk-sq i{color:var(--lime);font-style:normal}
.mk .mk-tx{font-size:16px;letter-spacing:-.02em;white-space:nowrap}
.mk .mk-tx i{color:var(--accent);font-style:normal}
.mk .mk-sub{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--muted);letter-spacing:0;padding-left:2px}
.mk.lg .mk-sq{width:56px;height:56px;border-radius:17px;font-size:19px}
.mk.lg .mk-tx{font-size:22px}
.mk.inv{color:#fff}
.mk.inv .mk-tx i{color:var(--lime)}
.mk.inv .mk-sub{color:var(--dark-muted)}

/* ---------- 4. BOTÕES ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);font-weight:600;font-size:var(--fs-sm);
  border:none;cursor:pointer;border-radius:var(--r-btn);padding:10px 18px;transition:.16s;white-space:nowrap;text-decoration:none;line-height:1.3}
.btn svg{flex:none}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-600);transform:translateY(-1px)}
.btn-soft{background:var(--accent-50);color:var(--accent-700)}
.btn-soft:hover{background:var(--accent-100)}
.btn-ghost{background:var(--surface);color:var(--ink-2);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-danger{background:var(--danger-bg);color:var(--danger)}
.btn-danger:hover{background:#f4d9d1}
.btn-ok{background:var(--ok-bg);color:var(--ok)}
.btn-ok:hover{background:#d5ecdf}
.btn-sm{padding:7px 13px;font-size:var(--fs-xs)}
.btn-lg{padding:12px 24px;font-size:var(--fs-md)}
.btn-block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.iconbtn{width:32px;height:32px;border:none;background:transparent;border-radius:9px;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;transition:.13s;flex:none}
.iconbtn:hover{background:var(--line-2);color:var(--ink)}
.iconbtn.lg{width:36px;height:36px;border-radius:10px}
.iconbtn.danger:hover{background:var(--danger-bg);color:var(--danger)}
.iconbtn:disabled{opacity:.3;cursor:not-allowed}
.iconbtn.bord{background:var(--surface);border:1px solid var(--line)}
.linkbtn{background:none;border:none;color:var(--accent);font:inherit;font-size:var(--fs-sm);font-weight:600;padding:0;display:inline-flex;align-items:center;gap:6px}
.linkbtn:hover{color:var(--accent-700)}

/* ---------- 5. BADGES ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:600;border-radius:var(--r-full);padding:4px 11px;line-height:1.3;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.badge.nodot::before{display:none}
.badge.ok,.badge.aprovado{background:var(--ok-bg);color:var(--ok)}
.badge.warn,.badge.pendente{background:var(--warn-bg);color:var(--warn)}
.badge.danger,.badge.reprovado{background:var(--danger-bg);color:var(--danger)}
.badge.info{background:var(--info-bg);color:var(--info)}
.badge.brand{background:var(--accent-50);color:var(--accent-700)}
.badge.plain{background:var(--line-2);color:var(--ink-2)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--line);border-radius:7px;padding:3px 9px;line-height:1.5;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.chip .dot{width:7px;height:7px;border-radius:3px;background:var(--accent);flex:none}
.chip.soft{background:var(--surface-2);border-style:dashed;color:var(--muted);font-weight:500}

/* selo de papel — a diferença agência × cliente, na cara */
.papel{display:inline-flex;align-items:center;gap:7px;font-family:var(--disp);font-weight:700;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 12px;border-radius:var(--r-full);white-space:nowrap}
.papel svg{width:13px;height:13px}
.papel.agencia{background:var(--accent);color:#fff}
.papel.cliente{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.3)}
.papel.cliente-claro{background:var(--accent-50);color:var(--accent-700);border:1px solid var(--accent-100)}

/* ---------- 6. CARDS ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
.card-pad{padding:var(--sp-5)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.card-head h3{font-size:var(--fs-md);display:flex;align-items:center;gap:9px}
.card-head .hint{font-family:var(--mono);font-size:11px;color:var(--muted)}
.card-head .ac{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.card-foot{padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--line-2);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.card-body{padding:var(--sp-5)}
.card-note{padding:0 var(--sp-5) var(--sp-4);font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:-4px}
.cnt{font-family:var(--mono);font-size:10.5px;color:var(--muted);background:var(--line-2);border-radius:99px;padding:1px 8px;font-weight:600}

/* KPI */
.kpi{padding:var(--sp-5)}
.kpi .k-label{font-family:var(--mono);font-size:10.5px;color:var(--muted);font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.kpi .k-value{font-family:var(--disp);font-weight:600;letter-spacing:-.02em;font-size:var(--fs-3xl);color:var(--ink);margin-top:8px;line-height:1.05}
.kpi .k-sub{font-size:var(--fs-xs);margin-top:7px;color:var(--muted)}
.kpi.destaque{border-color:var(--accent-100);background:linear-gradient(150deg,var(--accent-50),var(--surface) 65%)}
.kpi.destaque .k-value{color:var(--accent-700)}
.kpi.alerta{border-color:#EED9C3;background:linear-gradient(150deg,var(--warn-bg),var(--surface) 65%)}
.kpi.alerta .k-value{color:var(--warn)}

/* ---------- 7. FORMULÁRIOS ---------- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:var(--fs-xs);font-weight:600;color:var(--ink-2)}
.field label .op{font-weight:500;color:var(--muted)}
.input,input[type=text],input[type=url],input[type=email],input[type=password],input[type=date],select,textarea{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 13px;font-family:var(--sans);
  font-size:var(--fs-sm);color:var(--ink);outline:none;transition:.15s;width:100%}
input:focus,select:focus,textarea:focus,.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-50)}
input::placeholder,textarea::placeholder{color:var(--faint)}
textarea{min-height:86px;resize:vertical;line-height:1.6}
select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A8395' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.hintlbl{font-size:11px;color:var(--muted);line-height:1.5}
.form{display:grid;gap:14px}
.form .g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.form-acoes{display:flex;gap:10px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
@media(max-width:700px){.form .g2,.form .g3{grid-template-columns:1fr}}

/* bloco dobrável (adicionar item) */
.dobra{border:1px dashed var(--line);border-radius:var(--r-md);background:var(--surface-2);overflow:hidden}
.dobra>summary{display:flex;align-items:center;gap:9px;padding:12px 16px;cursor:pointer;font-size:var(--fs-sm);font-weight:600;color:var(--accent-700);list-style:none}
.dobra>summary:hover{background:var(--accent-50)}
.dobra>summary svg{flex:none;transition:transform .18s}
.dobra[open]>summary{border-bottom:1px dashed var(--line);background:var(--accent-50)}
.dobra[open]>summary svg.chev{transform:rotate(45deg)}
.dobra .dobra-in{padding:16px;background:var(--surface)}

/* ---------- 8. TABELAS ---------- */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.tbl th{text-align:left;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:11px 16px;border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap}
.tbl td{padding:13px 16px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:hover{background:var(--accent-50)}
.tbl .num{font-variant-numeric:tabular-nums;text-align:right}
.tbl .sub{display:block;font-size:11.5px;color:var(--muted);font-weight:400;margin-top:2px}
.tbl .acoes{display:flex;gap:4px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
.tbl tr.off{opacity:.55}

/* ---------- 9. AVATAR ---------- */
.av{width:36px;height:36px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--disp);
  font-weight:700;font-size:13px;color:#fff;flex:none;background:var(--accent)}
.av.lg{width:46px;height:46px;border-radius:14px;font-size:16px}
.av.sm{width:28px;height:28px;border-radius:9px;font-size:11px}
.av.suave{background:var(--accent-100);color:var(--accent-700)}

/* ---------- 10. ABAS ---------- */
.tabs{display:flex;gap:4px;background:var(--line-2);border-radius:var(--r-btn);padding:4px;width:max-content;max-width:100%;overflow-x:auto}
.tabs a,.tabs button{border:none;background:transparent;font-family:var(--sans);font-size:var(--fs-xs);font-weight:600;color:var(--muted);
  padding:8px 15px;border-radius:7px;cursor:pointer;white-space:nowrap;transition:.15s;display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.tabs a:hover{color:var(--ink)}
.tabs a.active{background:var(--surface);color:var(--ink);box-shadow:var(--sh-sm)}
.tabs a .cnt{background:var(--line-2)}
.tabs a.active .cnt{background:var(--accent-50);color:var(--accent-700)}

/* ---------- 11. ESTADOS ---------- */
.vazio{padding:40px 24px;text-align:center;color:var(--muted)}
.vazio .v-ic{width:46px;height:46px;border-radius:14px;background:var(--line-2);color:var(--faint);display:inline-flex;align-items:center;justify-content:center;margin-bottom:13px}
.vazio h4{font-family:var(--disp);font-size:var(--fs-lg);color:var(--ink-2);font-weight:600;margin-bottom:5px}
.vazio p{font-size:var(--fs-sm);max-width:400px;margin:0 auto;line-height:1.6}
.alert{border-radius:var(--r-md);padding:12px 15px;font-size:12.5px;display:flex;align-items:flex-start;gap:10px;line-height:1.55;margin-bottom:16px}
.alert svg{flex:none;margin-top:1px}
.alert.err{background:var(--danger-bg);color:var(--danger)}
.alert.ok{background:var(--ok-bg);color:var(--ok)}
.alert.warn{background:var(--warn-bg);color:var(--warn)}
.alert.info{background:var(--info-bg);color:var(--info)}
.nota{border:1px dashed var(--line);border-radius:var(--r-md);padding:14px 16px;font-size:12.5px;color:var(--muted);background:var(--surface-2);line-height:1.65}
.nota b{color:var(--ink-2)}
.nota ol{padding-left:18px;list-style:decimal;margin-top:6px}
.nota ol li{margin-bottom:3px}
.divider{height:1px;background:var(--line-2);margin:var(--sp-5) 0}

/* ---------- 12. GRIDS ---------- */
.grid{display:grid;gap:16px}
.grid>*{min-width:0}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g21{grid-template-columns:1.7fr 1fr}
.mt{margin-top:16px}
.mt-lg{margin-top:24px}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}.g21{grid-template-columns:1fr}}
@media(max-width:640px){.g4,.g3,.g2{grid-template-columns:1fr}}

/* ============================================================
   SHELL DO ADMIN — topbar + rail + breadcrumb + main
   ============================================================ */
.topbar{position:fixed;top:0;left:0;right:0;height:var(--topbar-h);background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;padding:0 18px;z-index:90}
.topbar .tb-busca{position:relative;flex:0 1 300px;min-width:0}
.topbar .tb-busca input{padding-left:34px;height:36px;padding-top:0;padding-bottom:0;background:var(--surface-2)}
.topbar .tb-busca svg{position:absolute;left:11px;top:10px;color:var(--faint);pointer-events:none}
.tb-user{display:flex;align-items:center;gap:9px;flex:none;padding-left:13px;border-left:1px solid var(--line-2);margin-left:2px}
.tb-user .u-nome{font-size:12.5px;font-weight:600;line-height:1.3;white-space:nowrap}
.tb-user .u-papel{font-size:10.5px;color:var(--accent);line-height:1.3;font-weight:600}
.burger{display:none}

.crumbrow{position:fixed;top:var(--topbar-h);left:var(--rail-w);right:0;height:var(--crumb-h);background:var(--surface);
  border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:8px;padding:0 24px;z-index:80;font-size:13px;overflow:hidden}
.crumbrow a{color:var(--muted);font-weight:500;white-space:nowrap}
.crumbrow a:hover{color:var(--accent)}
.crumbrow a.root{color:var(--accent);font-weight:600}
.crumbrow .sep{color:var(--faint);flex:none}
.crumbrow .leaf{color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumbrow .cr-right{margin-left:auto;display:flex;align-items:center;gap:9px;flex:none}
.crumbrow .cr-env{font-family:var(--mono);font-size:10px;color:var(--muted);background:var(--surface-2);border:1px solid var(--line-2);border-radius:6px;padding:2px 8px}

.rail{position:fixed;top:var(--topbar-h);bottom:0;left:0;width:var(--rail-w);background:var(--surface);border-right:1px solid var(--line);
  z-index:85;display:flex;flex-direction:column;padding:10px 0;transition:width .22s ease;overflow:hidden}
.rail:hover{width:var(--rail-open);box-shadow:var(--sh-lg)}
.rail a{display:flex;align-items:center;gap:13px;margin:2px 12px;padding:9px;border-radius:11px;color:var(--ink-2);font-size:13.5px;
  font-weight:500;white-space:nowrap;transition:background .14s,color .14s}
.rail a .ric{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.rail a .lbl{opacity:0;transition:opacity .18s .05s}
.rail:hover a .lbl{opacity:1}
.rail a:hover{background:var(--accent-50);color:var(--accent-700)}
.rail a.active{background:var(--accent);color:#fff}
.rail a .rpill{margin-left:auto;font-size:10px;font-family:var(--mono);background:var(--accent-100);color:var(--accent-700);font-weight:700;
  border-radius:99px;padding:1px 7px;opacity:0;transition:opacity .18s .05s}
.rail:hover a .rpill{opacity:1}
.rail a.active .rpill{background:rgba(255,255,255,.25);color:#fff}
.rail a .rpill.alerta{background:var(--warn-bg);color:var(--warn)}
.rail .rsep{height:1px;background:var(--line-2);margin:8px 16px}
.rail .rgrow{flex:1}
.rail-veil{display:none}

.main{margin:calc(var(--topbar-h) + var(--crumb-h)) 0 0 var(--rail-w);padding:24px clamp(16px,2.4vw,32px) 72px;min-width:0}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin:2px 0 20px;flex-wrap:wrap}
.page-head h1{font-size:24px}
.page-head .sub{color:var(--muted);font-size:13.5px;max-width:640px;margin-top:6px;line-height:1.55}
.ph-acoes{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ============================================================
   ADMIN — grade de clientes
   ============================================================ */
.cli-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:14px}
.cli-card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;
  box-shadow:var(--sh-sm);transition:.16s;position:relative;color:var(--ink)}
.cli-card:hover{box-shadow:var(--sh-md);transform:translateY(-2px);border-color:var(--accent-100)}
.cli-card .c-top{display:flex;align-items:flex-start;gap:12px}
.cli-card .c-nome{font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:-.01em;line-height:1.3}
.cli-card .c-seg{font-size:11.5px;color:var(--muted);margin-top:2px}
.cli-card .c-flags{margin-left:auto;display:flex;flex-direction:column;gap:5px;align-items:flex-end;flex:none}
.cli-card .c-kpis{display:flex;gap:18px;margin-top:14px;padding-top:13px;border-top:1px solid var(--line-2);flex-wrap:wrap}
.cli-card .c-kpi b{display:block;font-family:var(--disp);font-weight:600;font-size:16px;line-height:1.1}
.cli-card .c-kpi span{font-size:10.5px;color:var(--muted);font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
.cli-card .c-links{display:flex;gap:5px;margin-top:12px;flex-wrap:wrap}
.cli-card .c-links i{width:22px;height:22px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line-2);
  display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}
.cli-card .c-links i svg{width:12px;height:12px}
.cli-card.off{opacity:.6}
.cli-card.off:hover{opacity:.85}

/* ============================================================
   ADMIN — linha de item (aprovação, relatório, material, acesso)
   ============================================================ */
.lista{display:flex;flex-direction:column}
.linha{display:flex;gap:14px;align-items:flex-start;padding:15px var(--sp-5);border-bottom:1px solid var(--line-2)}
.linha:last-child{border-bottom:none}
.linha .l-ic{width:38px;height:38px;border-radius:11px;background:var(--accent-50);color:var(--accent-700);
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.linha .l-meta{flex:1;min-width:0}
.linha .l-meta h4{font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--sans);font-weight:600;letter-spacing:0}
.linha .l-meta p{color:var(--muted);font-size:12.5px;margin-top:3px;line-height:1.5;word-break:break-word}
.linha .l-meta p a{word-break:break-all}
.linha .l-meta .cmt{color:var(--warn);background:var(--warn-bg);border-radius:8px;padding:7px 10px;margin-top:8px;font-size:12px;display:inline-block}
.linha .l-acoes{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end;flex:none}
.linha.off{opacity:.55}
.linha .l-form{margin-top:14px;padding:15px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.linha.col{flex-direction:column;align-items:stretch}
@media(max-width:640px){
  .linha{flex-wrap:wrap}
  .linha .l-acoes{justify-content:flex-start;width:100%}
}

/* miniatura (conteúdo do site, blog) */
.thumb{width:64px;height:64px;flex:0 0 64px;border-radius:11px;overflow:hidden;background:var(--surface-2);
  border:1px solid var(--line);display:grid;place-items:center}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .sem{font-size:9.5px;line-height:1.25;text-align:center;color:var(--faint);font-weight:600;font-family:var(--mono);text-transform:uppercase}
.thumb .drive-img-falhou{display:none}
.ordem{display:flex;flex-direction:column;gap:2px}
.ordem form{display:block}

/* ============================================================
   LINKS DO CLIENTE — o coração da personalização
   ============================================================ */
.lk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:12px}
/* Cartão do link: identidade em cima, barra de ações embaixo. Os botões numa
   faixa própria evitam que 5 formulários de uma ação cada estiquem o cartão. */
.lk{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:var(--r-md);padding:13px;background:var(--surface);transition:.15s}
.lk-top{display:flex;gap:12px;align-items:flex-start;min-width:0}
/* O formulário de edição de um link não cabe dentro do cartão (a galeria de
   ferramentas precisa de largura). Ele é renderizado FORA do grid, em bloco
   inteiro, logo abaixo dos cartões daquele grupo. */
.lk-edit{border:1px solid var(--accent-100);background:var(--accent-50);border-radius:var(--r-md);padding:16px;margin-top:12px}
.lk-edit>h5{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--accent-700);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.lk:hover{border-color:var(--accent-100);box-shadow:var(--sh-sm)}
.lk .lk-ic{width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;flex:none;color:#fff}
.lk .lk-tx{flex:1;min-width:0}
.lk .lk-tx b{display:block;font-size:13px;font-weight:600}
.lk .lk-tx span{display:block;font-size:11px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lk .lk-tags{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
.lk.off{opacity:.6;border-style:dashed}
.lk-acoes{display:flex;gap:2px;align-items:center;justify-content:flex-end;flex-wrap:wrap;
  border-top:1px solid var(--line-2);padding-top:8px;margin-top:auto}
.lk-acoes form{display:inline-flex}
.lk-acoes .ordem{flex-direction:row;gap:2px;margin-right:auto}

/* escolha de tipo (galeria de presets) */
.tipos{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:9px}
.tipo-op{position:relative}
.tipo-op input{position:absolute;opacity:0;width:0;height:0}
.tipo-op label{display:flex;align-items:center;gap:9px;border:1.5px solid var(--line);border-radius:var(--r-md);padding:9px 11px;
  cursor:pointer;transition:.14s;background:var(--surface);font-size:12.5px;font-weight:600;color:var(--ink-2)}
.tipo-op label .t-ic{width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex:none;color:#fff}
.tipo-op label .t-ic svg{width:14px;height:14px}
.tipo-op label:hover{border-color:var(--accent-100);background:var(--accent-50)}
.tipo-op input:checked+label{border-color:var(--accent);background:var(--accent-50);color:var(--accent-700);box-shadow:0 0 0 3px var(--accent-50)}
.tipo-op input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}

/* ============================================================
   PORTAL DO CLIENTE — outra pele, de propósito
   ============================================================ */
.portal-top{background:linear-gradient(120deg,var(--accent-700),var(--accent) 58%,#B24FDA);color:#fff;padding:0 0 64px}
.portal-top .pt-bar{display:flex;align-items:center;gap:14px;max-width:1080px;margin:0 auto;padding:16px 22px}
.portal-top .pt-bar .pt-who{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.portal-top .pt-bar .pt-nome{text-align:right;line-height:1.25;display:none}
.portal-top .pt-bar .pt-nome b{font-family:var(--disp);font-size:13.5px;display:block}
.portal-top .pt-bar .pt-nome span{font-size:11.5px;color:rgba(255,255,255,.72)}
@media(min-width:720px){.portal-top .pt-bar .pt-nome{display:block}}
.portal-top .btn-ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff}
.portal-top .btn-ghost:hover{background:rgba(255,255,255,.2);border-color:#fff;color:#fff}
.portal-hero{max-width:1080px;margin:0 auto;padding:14px 22px 0}
.portal-hero h1{font-size:clamp(24px,4vw,32px);color:#fff}
.portal-hero p{color:rgba(255,255,255,.78);font-size:14.5px;margin-top:8px;max-width:560px}
.portal-wrap{max-width:1080px;margin:-46px auto 0;padding:0 22px 80px;position:relative;z-index:2}
.portal-wrap>.card,.portal-wrap>.grid{margin-bottom:18px}
.portal-sec{margin-top:26px}
.portal-sec h2{font-size:18px;display:flex;align-items:center;gap:10px;margin-bottom:4px}
.portal-sec .desc{color:var(--muted);font-size:13.5px;margin-bottom:14px}

/* ações rápidas do cliente (links) */
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:14px}
.qcard{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px;box-shadow:var(--sh-sm);transition:.16s;color:var(--ink)}
.qcard:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--accent-100)}
.qcard .q-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;color:#fff}
.qcard .q-tx{min-width:0}
.qcard .q-tx b{display:block;font-family:var(--disp);font-weight:600;font-size:14px}
.qcard .q-tx span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.qcard .q-go{margin-left:auto;color:var(--faint);flex:none}
.qcard:hover .q-go{color:var(--accent)}

/* barra de preview do admin dentro do portal */
.preview-bar{background:var(--dark);color:#fff;border-radius:var(--r-md);padding:12px 16px;display:flex;align-items:center;
  gap:14px;flex-wrap:wrap;margin-bottom:18px;font-size:13px}
.preview-bar b{font-family:var(--disp)}
.preview-bar .pb-ic{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.12);display:grid;place-items:center;flex:none}
.preview-bar .btn{margin-left:auto}

/* cartão de aprovação */
.aprov{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-sm);overflow:hidden;margin-bottom:16px}
.aprov .a-head{padding:16px var(--sp-5) 0}
.aprov .a-head h4{font-size:16px}
.aprov .a-head p{color:var(--muted);font-size:13px;margin-top:4px}
.aprov .viewer{margin:16px var(--sp-5)}
.aprov .a-foot{display:flex;gap:10px;justify-content:flex-end;align-items:center;flex-wrap:wrap;padding:14px var(--sp-5);
  border-top:1px solid var(--line-2);background:var(--surface-2)}

/* ============================================================
   VISUALIZADOR DE MÍDIAS (carrossel/vídeo/embed) — tema claro
   ============================================================ */
.viewer{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface-2)}
.viewer-stage{position:relative;aspect-ratio:16/10;max-height:66vh;overflow:hidden;background:
  radial-gradient(120% 120% at 50% 0%,var(--accent-50),transparent 62%),var(--surface-2)}
.viewer .slides{display:flex;height:100%;transition:transform .38s cubic-bezier(.4,0,.2,1)}
.viewer .slide{min-width:100%;height:100%;display:grid;place-items:center;position:relative}
.viewer .vimg{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in}
.viewer .vvid{max-width:100%;max-height:100%;background:#000}
.viewer .vembed{width:100%;height:100%}
.viewer .vembed iframe{width:100%;height:100%;border:0;display:block}
.viewer .vdrive{width:100%;height:100%;display:grid;place-items:center}
.viewer .vnav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.92);color:var(--ink);font-size:22px;line-height:1;display:grid;place-items:center;
  backdrop-filter:blur(6px);transition:.16s;z-index:2;box-shadow:var(--sh-sm)}
.viewer .vnav:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.viewer .vnav.prev{left:12px}.viewer .vnav.next{right:12px}
.viewer .vcounter{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.92);border:1px solid var(--line);color:var(--ink-2);
  font-family:var(--mono);font-size:11px;padding:4px 10px;border-radius:100px;z-index:2}
.viewer .vdots{display:flex;gap:7px;justify-content:center;padding:11px;background:var(--surface);border-top:1px solid var(--line-2)}
.viewer .vdot{width:8px;height:8px;border-radius:50%;border:none;cursor:pointer;background:var(--line);transition:.18s;padding:0}
.viewer .vdot.on{background:var(--accent);width:22px;border-radius:100px}
.viewer .vcard{display:flex;align-items:center;gap:15px;width:min(90%,440px);padding:18px 20px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm);transition:.16s}
.viewer .vcard:hover{border-color:var(--accent);transform:translateY(-2px)}
.viewer .vcard-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:19px;
  background:var(--accent);color:#fff;flex:0 0 auto}
.viewer .vcard-tx{flex:1;min-width:0}
.viewer .vcard-tx b{font-family:var(--disp);font-size:14px;display:block;color:var(--ink)}
.viewer .vcard-tx small{color:var(--muted);font-size:12px;word-break:break-all}
.viewer .vcard-go{color:var(--accent);font-weight:600;font-size:13px;white-space:nowrap}
.lightbox{position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:24px;background:rgba(23,20,28,.9);backdrop-filter:blur(4px);cursor:zoom-out}
.lightbox.on{display:grid}
.lightbox img{max-width:96vw;max-height:92vh;object-fit:contain;border-radius:8px;box-shadow:0 30px 90px rgba(0,0,0,.5)}

/* miniaturas de mídia no admin */
.mthumbs{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}
.mthumb{position:relative;width:74px;height:74px;border-radius:11px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2);flex:0 0 auto}
.mthumb img{width:100%;height:100%;object-fit:cover}
.mthumb .mt-ic{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted)}
.mthumb .mt-ic svg{width:18px;height:18px}
.mthumb .mt-ic small{font-size:9.5px;font-weight:600;font-family:var(--mono);text-transform:uppercase}
.mthumb .mt-x{position:absolute;top:4px;right:4px;width:21px;height:21px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(23,20,28,.62);color:#fff;font-size:13px;line-height:1;display:grid;place-items:center}
.mthumb .mt-x:hover{background:var(--danger)}
.mthumb .drive-img-falhou{display:none}

/* ---------- DIALOG ---------- */
dialog.dlg{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--r-lg);padding:0;
  max-width:460px;width:92%;box-shadow:var(--sh-lg)}
dialog.dlg::backdrop{background:rgba(23,20,28,.55);backdrop-filter:blur(3px)}
dialog.dlg .d-head{padding:20px var(--sp-5) 0}
dialog.dlg .d-head h3{font-size:17px}
dialog.dlg .d-head p{color:var(--muted);font-size:13px;margin-top:6px}
dialog.dlg .d-body{padding:16px var(--sp-5)}
dialog.dlg .d-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px var(--sp-5);border-top:1px solid var(--line-2);background:var(--surface-2)}

/* ---------- LOGIN ---------- */
.login-tela{position:fixed;inset:0;background:var(--dark);display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto;
  background-image:radial-gradient(900px 440px at 50% -12%,rgba(139,31,176,.5),transparent 70%),
                   radial-gradient(600px 400px at 12% 108%,rgba(174,230,12,.08),transparent 65%)}
.login-card{background:var(--surface);border-radius:var(--r-lg);width:100%;max-width:412px;overflow:hidden;box-shadow:var(--sh-lg)}
.login-top{background:var(--dark-2);padding:30px 28px;text-align:center;border-bottom:3px solid var(--accent)}
.login-top .nome{font-family:var(--disp);font-size:19px;font-weight:600;color:var(--dark-ink);letter-spacing:-.02em;margin-top:12px}
.login-top .sub{font-size:11.5px;color:var(--dark-muted);margin-top:5px}
.login-body{padding:26px 28px 28px;display:flex;flex-direction:column;gap:15px}
.login-volta{display:block;text-align:center;font-size:12.5px;color:var(--muted);padding-top:4px}
.login-volta:hover{color:var(--accent)}

/* ---------- RESPONSIVO DO SHELL ---------- */
@media(max-width:900px){
  .burger{display:inline-flex}
  .hide-sm{display:none !important}
  .topbar .tb-busca{display:none}
  .crumbrow{left:0;padding:0 16px}
  .rail{transform:translateX(-100%);width:var(--rail-open);box-shadow:var(--sh-lg);transition:transform .22s ease}
  .rail a .lbl,.rail a .rpill{opacity:1}
  .rail.open{transform:none}
  .rail-veil.on{display:block;position:fixed;inset:var(--topbar-h) 0 0 0;background:rgba(23,20,28,.4);z-index:84}
  .main{margin-left:0;padding:20px 16px 60px}
  .tb-user{border-left:none;padding-left:0}
}
@media(max-width:520px){
  .page-head h1{font-size:20px}
  .viewer-stage{aspect-ratio:4/5;max-height:74vh}
  .portal-wrap,.portal-hero,.portal-top .pt-bar{padding-left:16px;padding-right:16px}
}