/* ==========================================================================
   TVRJ — DESIGN SYSTEM (herdado fielmente do Ruas Crew, 08/10/2026)
   Mesmo vocabulário shadcn/ui, mesmas escalas no modelo Radix (12 passos),
   mesma forma, espaço, tipo e movimento. A ÚNICA troca: a marca deixa o ciano
   e passa ao VERMELHO TVRJ (#FF1F2D). Tema branco / preto / vermelho:
   · fundo branco, tinta quase preta, faixas INVERSAS pretas
   · sobre branco a marca escurece até passar AA (#D11A27 = 5,4:1)
   · sobre preto o vermelho clareia para texto (#FF3341 = 5,4:1); botão sólido
     vermelho leva tinta BRANCA (#E11D2A = 4,8:1), não preta como no ciano
   Fontes locais (padrão da casa): Manrope 700/800 + Inter 400–700.
   ========================================================================== */
@font-face{font-family:'Manrope';font-weight:700;font-display:swap;src:url(/fonts/manrope-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:800;font-display:swap;src:url(/fonts/manrope-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url(/fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:500;font-display:swap;src:url(/fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url(/fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:700;font-display:swap;src:url(/fonts/inter-latin-700-normal.woff2) format('woff2')}
:root{
  color-scheme: light;

  /* ── ESCALAS (Radix-style) ─────────────────────────────────────────── */
  --red-1:#FFFCFC; --red-2:#FFF7F7; --red-3:#FEEBEC; --red-4:#FFDBDC;
  --red-5:#FFCDCE; --red-6:#FDBDBE; --red-7:#F4A9AA; --red-8:#EB8E90;
  --red-9:#FF1F2D; --red-10:#E11D2A; --red-11:#D11A27; --red-12:#641723;

  --slate-1:#FFFFFF; --slate-2:#F8FAFB; --slate-3:#F1F4F6; --slate-4:#E9EEF0;
  --slate-5:#E0E6E9; --slate-6:#D5DCE0; --slate-7:#C9D2D8; --slate-8:#A7B3BB;
  --slate-9:#7A8791; --slate-10:#5B6670; --slate-11:#3D464D; --slate-12:#0B0F10;

  /* ── SHADCN: superfícies e tinta ───────────────────────────────────── */
  --background:            var(--slate-1);
  --foreground:            var(--slate-12);   /* 19:1 */
  --card:                  #FFFFFF;
  --card-foreground:       var(--slate-12);
  --popover:               #FFFFFF;
  --popover-foreground:    var(--slate-12);
  --primary:               var(--red-11);     /* ação principal sobre branco: 5,4:1 c/ branco */
  --primary-foreground:    #FFFFFF;
  --primary-hover:         #B0141F;
  --primary-soft:          var(--red-3);      /* superfície tingida (selecionado, destaque) */
  --primary-bright:        var(--red-9);      /* o vermelho da marca: decorativo sobre claro */
  --secondary:             var(--slate-3);
  --secondary-foreground:  var(--slate-12);
  --muted:                 var(--slate-3);
  --muted-foreground:      var(--slate-10);   /* 5.6:1 */
  --accent:                var(--slate-4);    /* hover / item ativo (NÃO é a marca) */
  --accent-foreground:     var(--slate-12);
  --destructive:           #B4232B;           /* erro: vermelho mais fechado que a marca; sempre com ícone + texto */
  --destructive-foreground:#FFFFFF;
  --destructive-soft:      #FDECEC;
  --success:#1E7F4F; --success-soft:#E6F6EC;
  --warning:#9A5300; --warning-soft:#FFF3E0;
  --info:#2158C9;    --info-soft:#E8EFFC;
  --border:                var(--slate-5);
  --input:                 var(--slate-7);    /* borda de campo e outline: um degrau acima de --border */
  --campo:                 #E8EDF1;           /* fundo dos campos: gelo um tom abaixo da faixa #F3F6F8 */
  --campo-borda:           #D3DCE2;
  --ring:                  var(--red-11);
  --ring-soft:             rgba(209,26,39,.32);
  --overlay:               rgba(11,15,16,.55);

  /* ── INVERSO (card preto, rodapé, hero) ────────────────────────────── */
  --ice:                   #F3F6F8;   /* branco gelo: faixas que quebram o branco puro */
  --inverse:               #0B0B0C;
  --inverse-2:             #151617;
  --inverse-foreground:    #FFFFFF;
  --inverse-muted:         rgba(255,255,255,.72);
  --inverse-border:        rgba(255,255,255,.12);
  --inverse-primary:       #FF3341;           /* texto/acento vermelho sobre preto: 5,4:1 */
  --inverse-primary-solid: var(--red-10);     /* fundo de botão vermelho: tinta branca 4,8:1 */
  --inverse-primary-foreground:#FFFFFF;

  /* ── FORMA ─────────────────────────────────────────────────────────── */
  --radius:      6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-full: 999px;
  --bd: 1px solid var(--border);
  --shadow-xs: 0 1px 2px rgba(11,15,16,.06);
  --shadow-sm: 0 1px 3px rgba(11,15,16,.08), 0 1px 2px rgba(11,15,16,.04);
  --shadow-md: 0 6px 16px -4px rgba(11,15,16,.12), 0 2px 6px rgba(11,15,16,.06);
  --shadow-lg: 0 20px 40px -12px rgba(11,15,16,.22), 0 8px 16px -8px rgba(11,15,16,.10);
  --shadow-glow: 0 0 0 1px rgba(255,31,45,.4), 0 8px 30px -8px rgba(255,31,45,.55);

  /* ── ESPAÇO (escala de 4) ──────────────────────────────────────────── */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px;
  /* RITMO — valores inteiros por faixa (sem fração): gutter lateral, seção, bloco, título→conteúdo */
  --gutter:16px; --sec:48px; --blk:32px; --hd:20px;
  --container: 1280px;

  /* ── TIPO ──────────────────────────────────────────────────────────── */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Manrope', var(--font-body);
  --text-xs:12px; --text-sm:13px; --text-base:15px; --text-md:16px; --text-lg:18px;
  --text-xl: clamp(20px, 1.6vw, 24px);
  --text-2xl: clamp(24px, 2.4vw, 32px);
  --text-3xl: clamp(30px, 3.6vw, 44px);
  --text-4xl: clamp(36px, 5vw, 64px);
  --leading-tight:1.1; --leading-snug:1.25; --leading-normal:1.5; --leading-relaxed:1.65;
  --tracking-caps: .06em;

  /* ── MOVIMENTO ─────────────────────────────────────────────────────── */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-fast:120ms; --dur:200ms; --dur-slow:360ms;

  --z-header:50; --z-menu:60; --z-dialog:80; --z-toast:90;
}

@media (min-width:640px){:root{--gutter:24px;--sec:72px;--blk:40px;--hd:24px}}
@media (min-width:1024px){:root{--gutter:40px;--sec:96px;--blk:56px;--hd:32px}}

/* ── RESET E BASE ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--background);color:var(--foreground);font:400 var(--text-base)/var(--leading-normal) var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100dvh;display:flex;flex-direction:column}
main{flex:1}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
a:where(:not([class])){color:var(--primary);text-decoration:underline;text-underline-offset:3px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:800;line-height:var(--leading-tight);letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:var(--radius)}
::selection{background:var(--red-5);color:var(--slate-12)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}

/* ── LAYOUT ────────────────────────────────────────────────────────── */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
/* seção = espaço SÓ em cima (--sec); a página fecha com --sec antes do rodapé → todo vão entre seções é igual */
.section,.section--tight{padding-top:var(--sec);padding-bottom:0}
/* faixas com fundo (preta ou branco gelo): --sec nos dois lados; a borda do fundo é visível */
.section.inverse,.section--ice{padding-block:var(--sec)}
.section--ice{background:var(--ice);box-shadow:0 0 0 100vmax var(--ice);clip-path:inset(0 -100vmax)}
/* o bloco antes de uma faixa fecha com --sec pra não encostar na borda */
.section:has(+ .section--ice),.section:has(+ .section.inverse){padding-bottom:var(--sec)}
main > :not(.section):has(+ .section--ice){margin-bottom:var(--sec)}
main{padding-bottom:var(--sec)}
main > .section:first-child{padding-top:var(--blk)}
main:has(> .section.inverse:last-child),main:has(> .section--ice:last-child){padding-bottom:0}
.section__hd{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--hd);flex-wrap:wrap}
.section__hd h2{font-size:var(--text-2xl);text-transform:uppercase;letter-spacing:-.005em}
.eyebrow{display:flex;width:fit-content;align-items:center;gap:var(--space-2);font:700 var(--text-sm)/1 var(--font-body);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--primary)}
.stack{display:flex;flex-direction:column;gap:var(--space-4)}
.row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.grid{display:grid;gap:var(--space-4)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1024px){.grid--5{grid-template-columns:repeat(3,minmax(0,1fr))}.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid--5,.grid--4,.grid--3,.grid--2{grid-template-columns:1fr}.grid--5,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.grid--5,.grid--4{grid-template-columns:1fr}}
.inverse{background:var(--inverse);color:var(--inverse-foreground)}
.inverse .muted{color:var(--inverse-muted)}
.muted{color:var(--muted-foreground)}
.small{font-size:var(--text-sm)}
.divider{border:0;border-top:var(--bd);margin:0}

/* ── ÍCONE (Lucide) ────────────────────────────────────────────────── */
.icon{width:1em;height:1em;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;font-size:16px}
.icon--brand{fill:currentColor;stroke:none}
.icon--sm{font-size:14px}.icon--lg{font-size:20px}.icon--xl{font-size:28px}

/* ── BUTTON (shadcn: default=primary · outline · secondary · ghost · link · destructive) ── */
.btn{--h:40px;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:var(--h);padding:0 var(--space-5);border-radius:var(--radius);border:1px solid var(--input);background:var(--card);color:var(--foreground);font:700 var(--text-sm)/1 var(--font-body);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur-fast) var(--ease),box-shadow var(--dur) var(--ease);box-shadow:var(--shadow-xs);user-select:none}
.btn:hover{background:var(--accent)}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.5;pointer-events:none}
.btn--primary{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground)}
.btn--primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.btn--secondary{background:var(--secondary);border-color:transparent;box-shadow:none}
.btn--secondary:hover{background:var(--accent)}
.btn--ghost{background:transparent;border-color:transparent;box-shadow:none}
.btn--ghost:hover{background:var(--accent)}
.btn--link{background:none;border:0;box-shadow:none;padding:0;height:auto;color:var(--primary);text-transform:none;letter-spacing:0;font-weight:700}
.btn--link:hover{text-decoration:underline;text-underline-offset:3px;background:none}
.btn--destructive{background:var(--destructive);border-color:var(--destructive);color:var(--destructive-foreground)}
.btn--outline-primary{border-color:var(--primary);color:var(--primary)}
.btn--outline-primary:hover{background:var(--primary-soft)}
.btn--sm{--h:34px;padding-inline:var(--space-4);font-size:var(--text-xs)}
.btn--lg{--h:48px;padding-inline:var(--space-6);font-size:var(--text-base)}
.btn--icon{width:var(--h);padding:0}
.btn--block{width:100%}
/* sobre superfície inversa: a marca pura brilha e a tinta vira preta */
.inverse .btn--primary,.btn--brand{background:var(--inverse-primary-solid);border-color:var(--inverse-primary-solid);color:var(--inverse-primary-foreground);box-shadow:none}
.inverse .btn--primary:hover,.btn--brand:hover{background:var(--red-9);border-color:var(--red-9);box-shadow:var(--shadow-glow)}
.inverse .btn{border-color:var(--inverse-border);background:transparent;color:var(--inverse-foreground);box-shadow:none}
.inverse .btn:hover{background:rgba(255,255,255,.08)}
.btn.is-loading{position:relative;color:transparent!important;pointer-events:none}
.btn.is-loading::after{content:"";position:absolute;width:16px;height:16px;border:2px solid currentColor;border-color:var(--primary-foreground) transparent var(--primary-foreground) transparent;border-radius:50%;animation:spin .8s linear infinite;color:var(--foreground)}
.btn:not(.btn--primary).is-loading::after{border-color:var(--foreground) transparent var(--foreground) transparent}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── BADGE / PILL / TAG ────────────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--radius-full);font:700 var(--text-xs)/1 var(--font-body);letter-spacing:.02em;background:var(--secondary);color:var(--secondary-foreground);border:1px solid transparent;white-space:nowrap}
.pill--outline{background:transparent;border-color:var(--input)}
.pill--primary{background:var(--primary);color:var(--primary-foreground)}
.pill--brand{background:var(--inverse-primary-solid);color:var(--inverse-primary-foreground)}
.pill--soft{background:var(--primary-soft);color:var(--red-12)}
.pill--ok{background:var(--success-soft);color:var(--success)}
.pill--wait{background:var(--warning-soft);color:var(--warning)}
.pill--off{background:var(--destructive-soft);color:var(--destructive)}
.pill--info{background:var(--info-soft);color:var(--info)}
.pill--caps{text-transform:uppercase}
/* item gratuito: chip com brilho da marca, lê como presente, não como "desconto" */
.pill--gratis{background:linear-gradient(135deg,var(--red-3),var(--red-1));color:var(--red-12);border-color:var(--red-6);text-transform:uppercase;letter-spacing:.06em;box-shadow:0 0 0 3px rgba(255,31,45,.12)}
.pill--gratis .icon{color:var(--red-11)}
.pill--preco{background:var(--inverse);color:var(--inverse-primary);letter-spacing:.02em}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.tag{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:var(--radius);border:var(--bd);background:var(--card);font:600 var(--text-xs)/1 var(--font-body)}

/* ── CARD ──────────────────────────────────────────────────────────── */
.card{background:var(--card);color:var(--card-foreground);border:var(--bd);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs)}
.card__hd{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) var(--space-5) 0}
.card__hd h2,.card__hd h3{font-size:var(--text-lg)}
.card__desc{color:var(--muted-foreground);font-size:var(--text-sm);margin-top:2px}
.card__bd{padding:var(--space-5)}
.card__ft{padding:0 var(--space-5) var(--space-5);display:flex;gap:var(--space-3);align-items:center}
.card--hover{transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.card--hover:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--slate-7)}

/* ── FORM ──────────────────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field > label,.label{font:600 var(--text-sm)/1.3 var(--font-body)}
.label .req{color:var(--destructive);margin-left:2px}
/* campo: uma borda só, de 2px; só a cor muda por estado (sem halo, sem outline por cima) */
.input,.select,.textarea{width:100%;height:44px;padding:0 var(--space-3);border:2px solid var(--campo-borda);border-radius:var(--radius);background-color:var(--campo);font-size:var(--text-md);transition:border-color var(--dur) var(--ease)}
.textarea{height:auto;min-height:104px;padding-block:var(--space-3);resize:vertical}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6670' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:40px}

.input:hover,.select:hover,.textarea:hover{border-color:var(--slate-8)}
.input:focus,.select:focus,.textarea:focus,.input:focus-visible,.select:focus-visible,.textarea:focus-visible{outline:0;border-color:var(--ring);box-shadow:none}
.input::placeholder,.textarea::placeholder{color:var(--slate-9)}
.input[aria-invalid=true],.select[aria-invalid=true],.textarea[aria-invalid=true]{border-color:var(--destructive);box-shadow:none}
.input:disabled,.select:disabled{background:var(--muted);color:var(--muted-foreground);cursor:not-allowed}
.hint{font-size:var(--text-xs);color:var(--muted-foreground)}
.err{display:flex;align-items:center;gap:6px;font-size:var(--text-xs);font-weight:600;color:var(--destructive)}
.input-group{display:flex}
.input-group .input{border-radius:var(--radius) 0 0 var(--radius)}
.input-group .btn{border-radius:0 var(--radius) var(--radius) 0;margin-left:-2px;height:44px}
/* checkbox / radio nativos, estilizados */
.check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:var(--text-sm)}
.check input{appearance:none;width:18px;height:18px;flex:none;margin-top:1px;border:1.5px solid var(--input);border-radius:4px;background:var(--card);display:grid;place-content:center;transition:all var(--dur-fast)}
.check input[type=radio]{border-radius:50%}
.check input::before{content:"";width:10px;height:10px;transform:scale(0);transition:transform var(--dur-fast) var(--ease);background:var(--primary-foreground);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%)}
.check input[type=radio]::before{clip-path:none;border-radius:50%;width:8px;height:8px}
.check input:checked{background:var(--primary);border-color:var(--primary)}
.check input:checked::before{transform:scale(1)}
.check input:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
/* opção em cartão (kit, modalidade, tamanho) — Radio Group do shadcn em forma de card */
.choice{position:relative;display:block;cursor:pointer}
.choice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.choice__box{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-4);border:1px solid var(--input);border-radius:var(--radius-lg);background:var(--card);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease);min-height:56px}
.choice:hover .choice__box{border-color:var(--slate-8)}
.choice input:checked + .choice__box{border-color:var(--primary);background:var(--primary-soft);box-shadow:0 0 0 1px var(--primary)}
.choice input:focus-visible + .choice__box{outline:2px solid var(--ring);outline-offset:2px}
.choice input:disabled + .choice__box{opacity:.5;cursor:not-allowed}
.choice__box > span:first-child{display:flex;flex-direction:column;min-width:0}
.choice__title{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-weight:700;font-size:var(--text-base)}
.choice__desc{display:block;font-size:var(--text-sm);color:var(--muted-foreground);margin-top:2px}
.choice__price{margin-left:auto;font:800 var(--text-md)/1.2 var(--font-display);white-space:nowrap}
.choice__price s{color:var(--muted-foreground);font-weight:500;font-size:var(--text-xs);margin-right:6px}
.choice--compact .choice__box{padding:10px 14px;min-height:44px;justify-content:center;text-align:center}
.choice--compact .choice__box > span:first-child{align-items:center}
.choice--compact .choice__title{font-size:var(--text-sm)}

/* ── TABS / TOGGLE GROUP (segmentado) ──────────────────────────────── */
.tabs{display:inline-flex;gap:2px;padding:3px;background:var(--muted);border-radius:var(--radius);max-width:100%;overflow:auto;scrollbar-width:none}
.tab{height:34px;padding:0 var(--space-4);border-radius:calc(var(--radius) - 2px);font:600 var(--text-sm)/1 var(--font-body);color:var(--muted-foreground);white-space:nowrap;display:inline-flex;align-items:center;gap:6px;transition:all var(--dur-fast) var(--ease)}
.tab:hover{color:var(--foreground)}
.tab[aria-selected=true],.tab[aria-pressed=true]{background:var(--card);color:var(--foreground);box-shadow:var(--shadow-sm)}
.tabs--block{display:flex}.tabs--block .tab{flex:1;justify-content:center}

/* ── ALERT ─────────────────────────────────────────────────────────── */
.alert{display:grid;grid-template-columns:auto 1fr;gap:var(--space-3);padding:var(--space-4);border:var(--bd);border-radius:var(--radius-lg);background:var(--card);font-size:var(--text-sm)}
.alert .icon{margin-top:2px;font-size:18px}
.alert__title{font-weight:700;margin-bottom:2px}
.alert__desc{color:var(--muted-foreground)}
.alert--info{background:var(--info-soft);border-color:transparent;color:var(--info)}.alert--info .alert__desc{color:var(--info)}
.alert--warning{background:var(--warning-soft);border-color:transparent;color:var(--warning)}.alert--warning .alert__desc{color:var(--warning)}
.alert--destructive{background:var(--destructive-soft);border-color:transparent;color:var(--destructive)}.alert--destructive .alert__desc{color:var(--destructive)}
.alert--success{background:var(--success-soft);border-color:transparent;color:var(--success)}.alert--success .alert__desc{color:var(--success)}

/* ── DIALOG (Radix Dialog: overlay + content, role=dialog, aria-modal) ── */
.dialog{position:fixed;inset:0;z-index:var(--z-dialog);display:grid;place-items:center;padding:var(--space-4);background:var(--overlay);animation:fade var(--dur) var(--ease)}
.dialog__content{width:100%;max-width:520px;max-height:min(90dvh,calc(100dvh - 32px));overflow:auto;background:var(--popover);color:var(--popover-foreground);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);animation:pop var(--dur) var(--ease)}
.dialog__content--wide{max-width:760px}
.dialog__hd{padding:var(--space-6) var(--space-6) 0;display:flex;justify-content:space-between;gap:var(--space-4)}
.dialog__hd h2{font-size:var(--text-xl)}
.dialog__bd{padding:var(--space-4) var(--space-6)}
.dialog__ft{padding:0 var(--space-6) var(--space-6);display:flex;justify-content:flex-end;gap:var(--space-3);flex-wrap:wrap}
@media (max-width:640px){.dialog{place-items:end center;padding:0}.dialog__content{border-radius:var(--radius-xl) var(--radius-xl) 0 0;max-height:92dvh}}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}}

/* ── TOAST ─────────────────────────────────────────────────────────── */
.toasts{position:fixed;z-index:var(--z-toast);bottom:var(--space-4);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:var(--space-2);width:min(420px,calc(100% - 32px));pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:var(--space-3);padding:12px 14px;background:var(--inverse);color:var(--inverse-foreground);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);font-size:var(--text-sm);animation:pop var(--dur) var(--ease)}
.toast .icon{font-size:18px;color:var(--inverse-primary)}
.toast--err .icon{color:#FF8A8A}
.toast__action{margin-left:auto;font-weight:700;color:var(--inverse-primary)}

/* ── SKELETON / EMPTY / PROGRESS ───────────────────────────────────── */
.skeleton{background:linear-gradient(90deg,var(--slate-3) 25%,var(--slate-4) 50%,var(--slate-3) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--radius)}
@keyframes shimmer{to{background-position:-200% 0}}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-2);padding:var(--space-10) var(--space-4);border:1px dashed var(--input);border-radius:var(--radius-lg);color:var(--muted-foreground)}
.empty .icon{font-size:32px;color:var(--slate-8)}
.empty__title{font-weight:700;color:var(--foreground)}
.progress{height:6px;background:var(--muted);border-radius:var(--radius-full);overflow:hidden}
.progress__bar{height:100%;background:var(--primary);border-radius:inherit;transition:width var(--dur-slow) var(--ease)}

/* ── AVATAR ────────────────────────────────────────────────────────── */
.avatar{width:40px;height:40px;border-radius:50%;background:var(--muted);display:grid;place-items:center;overflow:hidden;font-weight:700;color:var(--muted-foreground);flex:none}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar--lg{width:72px;height:72px;font-size:24px}

/* ── TABLE ─────────────────────────────────────────────────────────── */
.tbl-wrap{overflow:auto;border:var(--bd);border-radius:var(--radius-lg)}
.table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.table th{text-align:left;font-weight:600;color:var(--muted-foreground);padding:10px 14px;border-bottom:var(--bd);background:var(--slate-2);white-space:nowrap}
.table td{padding:12px 14px;border-bottom:var(--bd);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--slate-2)}

/* ── KBD / BREADCRUMB ──────────────────────────────────────────────── */
.kbd{font:600 11px/1 var(--font-body);padding:3px 6px;border:var(--bd);border-bottom-width:2px;border-radius:4px;background:var(--slate-2)}
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:var(--text-sm);color:var(--muted-foreground);flex-wrap:wrap}
.breadcrumb a:hover{color:var(--foreground)}
.breadcrumb .icon{font-size:14px}

/* ── SWITCH (a "chavinha" do painel) ───────────────────────────────── */
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:var(--text-sm);font-weight:600}
.switch input{appearance:none;width:40px;height:22px;border-radius:var(--radius-full);background:var(--slate-7);position:relative;transition:background var(--dur) var(--ease);flex:none;margin:0}
.switch input::before{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:transform var(--dur) var(--ease)}
.switch input:checked{background:var(--success)}
.switch input:checked::before{transform:translateX(18px)}
.switch input:focus-visible{outline:2px solid var(--ring);outline-offset:2px}