/*! verus-ui v1.0.1 · css · gerado por scripts/build.mjs — não edite, edite src/ */
/* ---- src/tokens/base.css ---- */
/* ============================================================
   verus-ui — tokens base (só variáveis: sem componentes, sem layout)
   Visual do Metronic 8 recriado com valores próprios; nenhum arquivo
   da Keenthemes é usado (D-UI-01).

   Os atributos valem em QUALQUER elemento, não só no <html>: uma
   prévia pode mostrar o modo claro dentro de uma página escura.
   Por isso todo token que é apelido (var(--outro)) no bloco claro é
   repetido no bloco escuro: var() se resolve no elemento que declara.
     data-theme="light|dark"   data-brand="<marca>"   data-density="confortavel|compacta"
   ============================================================ */
:root, [data-theme="light"] {
  color-scheme: light;
  /* Tipografia */
  --font-sans: "Inter", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --fs-xs: .75rem; --fs-sm: .85rem; --fs-base: .925rem; --fs-md: 1rem;
  --fs-lg: 1.15rem; --fs-xl: 1.35rem; --fs-2xl: 1.75rem; --fs-hero: 2.5rem;
  --fw-semibold: 500; --fw-bold: 600; --fw-bolder: 700;

  /* Formas (Metronic: 0.475rem padrão, 0.625rem em cards) */
  --radius-sm: .425rem; --radius: .475rem; --radius-lg: .625rem; --radius-full: 999px;

  /* Marca padrão: azul Metronic. Cada projeto sobrescreve em brands/<marca>.css
     O #1b84ff/#056ee9 do Metronic escureceu (mesmo matiz) até o branco passar 4,5:1: era 3,63:1 */
  --primary: #1774e2; --primary-active: #0461cf; --primary-light: #e9f3ff; --primary-inverse: #fff;
  --input-focus-ring: rgba(27,132,255,.14);

  /* Semânticas. --*-inverse é o texto sobre a cor sólida (botão, hover do light-*) */
  --success: #17c653; --success-active: #04b440; --success-light: #dfffea;
  --success-inverse: var(--dark); /* o branco fica em 2,27:1 (claro) e 3,31:1 (escuro) */
  --info: #7239ea;    --info-active: #5014d0;    --info-light: #f8f5ff;
  --warning: #f6c000; --warning-active: #dead00; --warning-light: #fff8dd;
  --warning-inverse: var(--dark); /* texto sobre --warning: o branco fica em 1,69:1 (claro) e 2,63:1 (escuro); o --dark passa de 5,4:1 nos dois */
  --danger: #e32452;  --danger-active: #c61741;  --danger-light: #ffeef3; --danger-inverse: #fff; /* era #f8285a/#d81a48: branco em 3,86:1 */
  --dark: #1e2129;    --dark-light: #f9f9f9;

  /* Neutros */
  --bg-app: #fcfcfc; --bg-body: #ffffff; --surface: #ffffff;
  --gray-100: #f9f9f9; --gray-200: #f1f1f4; --gray-300: #dbdfe9; --gray-400: #c4cada;
  --gray-500: #99a1b7; --gray-600: #78829d; --gray-700: #4b5675; --gray-800: #252f4a; --gray-900: #071437;
  --text: var(--gray-900); --text-muted: var(--gray-500); --border: var(--gray-200); --border-dashed: var(--gray-300);
  /* Campos: fundo levemente acinzentado + borda visível (o #F9F9F9 puro sumia no card branco) */
  --input-solid: #f3f4f7; --input-border: #dfe2ea;

  /* Sombras (Metronic é quase flat) */
  --shadow-card: 0 3px 4px 0 rgba(0,0,0,.03);
  --shadow-dropdown: 0 0 50px 0 rgba(82,63,105,.15);
  --shadow-hover: 0 8px 24px -6px rgba(0,0,0,.1);

  /* Layout */
  --sidebar-w: 265px; --sidebar-w-min: 80px; --header-h: 74px;
  --sidebar-bg: #131313; --sidebar-text: #9a9cae; --sidebar-text-active: #ffffff;
  --sidebar-hover: rgba(255,255,255,.05); --sidebar-active: #1c1c1c; --sidebar-border: #26272f;
  --sidebar-btn-bg: #101010; --sidebar-btn-border: #313131;
  --header-bg: #ffffff; --header-border: var(--gray-200);
  --content-max: 1760px; /* telas largas: as laterais não podem sobrar (pedido do usuário) */
}

/* ---------- Modo escuro ---------- */
[data-theme="dark"] {
  color-scheme: dark; /* barras de rolagem e controles nativos escuros */
  --primary: #006ae6; --primary-active: #0e73ea; --primary-light: #172331; /* hover era #107eff: branco em 3,85:1 */
  --input-focus-ring: rgba(0,106,230,.22);
  --success: #00a261; --success-light: #1f212a;
  --success-inverse: var(--bg-body); /* o --dark daqui (#272a34) fica em 4,32:1 */
  --info: #883fff; --info-light: #272134;
  --warning: #c59a00; --warning-light: #242320;
  --danger: #e22854; --danger-light: #302024; /* era #e42855: branco em 4,44:1 */
  --dark: #272a34; --dark-light: #1e2027;

  --bg-app: #0f1014; --bg-body: #15171c; --surface: #15171c;
  --gray-100: #1b1c22; --gray-200: #26272f; --gray-300: #363843; --gray-400: #464852;
  --gray-500: #636674; --gray-600: #808290; --gray-700: #9a9cae; --gray-800: #b5b7c8; --gray-900: #f5f5f5;
  /* Apelidos do bloco claro, repetidos (ver o cabeçalho): sem isto, numa prévia escura dentro de
     página clara o --text chegava como #071437. O --success-inverse e o --header-border não entram:
     têm valor próprio neste bloco. */
  --text: var(--gray-900); --text-muted: var(--gray-500); --border: var(--gray-200); --border-dashed: var(--gray-300);
  --warning-inverse: var(--dark);
  --input-solid: #1d1f26; --input-border: #30323d;
  --shadow-card: none;
  --shadow-dropdown: 0px 0px 30px rgba(0,0,0,.3);
  --sidebar-bg: #0d0e12; --sidebar-active: #1b1c22; --sidebar-border: #1e2027;
  --header-bg: #15171c; --header-border: #1e2027;
}

/* ---- src/components/base.css ---- */
/* Base: reset leve, tipografia e utilitários mínimos. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font-sans);font-size:var(--fs-base);color:var(--gray-700);background:var(--bg-app);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
[hidden]{display:none!important}
.ti{line-height:1}
.text-muted{color:var(--text-muted)} .text-dark{color:var(--gray-900)} .text-primary{color:var(--primary)}
.fw-bold{font-weight:var(--fw-bold)} .fw-bolder{font-weight:var(--fw-bolder)}
.fs-7{font-size:var(--fs-sm)} .fs-8{font-size:var(--fs-xs)}
.text-end{text-align:right!important}
.separator{border-top:1px dashed var(--border-dashed);margin:1.5rem 0}
.section-title{font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--gray-900);margin:0 0 .25rem}
.section-sub{color:var(--gray-500);font-size:var(--fs-sm);margin:0 0 1.25rem}
.link-title{color:var(--gray-800);font-weight:var(--fw-bold);font-size:var(--fs-md)} .link-title:hover{color:var(--primary)}
.up{color:var(--success)} .down{color:var(--danger)}
kbd,.kbd-hint{display:inline-flex;align-items:center;justify-content:center;min-width:1.4rem;padding:.1rem .35rem;border-radius:4px;border:1px solid var(--gray-300);border-bottom-width:2px;background:var(--surface);font-family:var(--font-sans);font-size:.7rem;font-weight:var(--fw-bold);color:var(--gray-600);margin-right:.2rem}
[data-motion="reduce"] *{transition:none!important;animation:none!important}

/* ---- src/components/buttons.css ---- */
/* Botões (padrão Metronic: sólido, light-*, ícone, com indicador de progresso). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:1px solid transparent;border-radius:var(--radius);padding:.7rem 1.1rem;font-size:var(--fs-base);font-weight:var(--fw-semibold);line-height:1.4;transition:all .15s ease;background:transparent;color:var(--gray-700);white-space:nowrap}
.btn:disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
.btn .ti{font-size:1.15rem}
.btn-sm{padding:.5rem .85rem;font-size:var(--fs-sm)}
.btn-primary{background:var(--primary);color:var(--primary-inverse)} .btn-primary:hover{background:var(--primary-active)}
.btn-danger{background:var(--danger);color:var(--danger-inverse)} .btn-danger:hover{background:var(--danger-active)}
.btn-warning{background:var(--warning);color:var(--warning-inverse)} .btn-warning:hover{background:var(--warning-active)}
.btn-light{background:var(--gray-100);color:var(--gray-700)} .btn-light:hover{background:var(--gray-200);color:var(--primary)}
.btn-light-primary{background:var(--primary-light);color:var(--primary)} .btn-light-primary:hover{background:var(--primary);color:var(--primary-inverse)}
.btn-light-danger{background:var(--danger-light);color:var(--danger)} .btn-light-danger:hover{background:var(--danger);color:var(--danger-inverse)}
.btn-light-success{background:var(--success-light);color:var(--success)} .btn-light-success:hover{background:var(--success);color:var(--success-inverse)}
.btn-icon{width:40px;height:40px;padding:0}
.btn-icon .ti{font-size:1.45rem}
.btn-icon.btn-sm{width:32px;height:32px} .btn-icon.btn-sm .ti{font-size:1.1rem}
.btn-active-light:hover{background:var(--gray-100);color:var(--primary)}
.btn-custom{border:1px dashed var(--sidebar-btn-border);background:var(--sidebar-btn-bg);color:var(--sidebar-text)} .btn-custom:hover{color:#fff;border-color:#555}
.btn .count{display:inline-flex;align-items:center;justify-content:center;min-width:1.2rem;height:1.2rem;border-radius:99px;background:var(--primary);color:var(--primary-inverse);font-size:.7rem;padding:0 .3rem}
.btn-primary .count{background:var(--primary-inverse);color:var(--primary)}

/* Indicador de progresso: VUI.ui.busy(botao) alterna data-indicator */
.indicator-progress{display:none;align-items:center;gap:.5rem}
[data-indicator="on"] .indicator-label{display:none}
[data-indicator="on"] .indicator-progress{display:inline-flex}
.spinner{display:inline-block;width:1rem;height:1rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:vui-spin .7s linear infinite}
@keyframes vui-spin{to{transform:rotate(360deg)}}

/* ---- src/components/content.css ---- */
/* Conteúdo: cards, stat widgets, badges, symbol, tabela, alertas, empty state, chips, abas. */

/* Cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);display:flex;flex-direction:column;min-width:0}
.card-flush{border:0}
[data-theme="dark"] .card-flush{border:1px solid var(--border)}
.card-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;min-height:70px;padding:.75rem 2rem;border-bottom:1px solid var(--border)}
.card-header.border-0{border-bottom:0}
.card-title{display:flex;align-items:center;gap:.75rem;margin:0;font-size:1.2rem;font-weight:var(--fw-bold);color:var(--gray-900)}
.card-sub{display:block;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--gray-500);margin-top:.25rem}
.card-toolbar{display:flex;align-items:center;gap:.6rem}
.card-body{padding:1.5rem 2rem}
.card-body.pt-0{padding-top:0}
.hover-elevate-up{transition:transform .2s ease,box-shadow .2s ease}
.hover-elevate-up:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}

/* Stat widgets */
.grid-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem;margin-bottom:1.5rem}
.stat{flex-direction:row;align-items:center;justify-content:space-between;padding:1.6rem 1.75rem}
.stat-num{display:block;font-size:var(--fs-2xl);font-weight:var(--fw-bolder);color:var(--gray-900);line-height:1.1}
.stat-label{display:block;color:var(--gray-500);font-weight:var(--fw-semibold);margin-top:.3rem}
.stat-delta{display:inline-flex;align-items:center;gap:.15rem;font-size:var(--fs-xs);font-weight:var(--fw-bold);margin-top:.5rem}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.35rem .55rem;font-size:var(--fs-xs);font-weight:var(--fw-bold);border-radius:var(--radius-sm);line-height:1;white-space:nowrap}
.badge-light{background:var(--gray-100);color:var(--gray-800)}
.badge-light-primary{background:var(--primary-light);color:var(--primary)}
.badge-light-success{background:var(--success-light);color:var(--success)}
.badge-light-info{background:var(--info-light);color:var(--info)}
.badge-light-warning{background:var(--warning-light);color:var(--warning)}
.badge-light-danger{background:var(--danger-light);color:var(--danger)}

/* Symbol / avatar */
.symbol{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius);font-weight:var(--fw-bold);font-size:1rem;overflow:hidden}
.symbol-circle{border-radius:50%}
.symbol-50{width:50px;height:50px} .symbol-35{width:35px;height:35px;font-size:.9rem}
.bg-light-primary{background:var(--primary-light);color:var(--primary)} .bg-light-success{background:var(--success-light);color:var(--success)}
.bg-light-info{background:var(--info-light);color:var(--info)} .bg-light-warning{background:var(--warning-light);color:var(--warning)} .bg-light-danger{background:var(--danger-light);color:var(--danger)}

/* Tabela nativa (table-row-dashed) */
.table{width:100%;border-collapse:collapse}
.table th{text-align:left;font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.04em;color:var(--gray-500);padding:.9rem .75rem}
.table td{padding:1rem .75rem;vertical-align:middle;color:var(--gray-600);font-weight:var(--fw-semibold)}
.table-row-dashed tr{border-bottom:1px dashed var(--border-dashed)}
.table-row-dashed tbody tr:last-child{border-bottom:0}
.table tbody tr{transition:background .15s ease}
.table tbody tr:hover{background:var(--gray-100)}

/* Alertas */
.alert{display:flex;gap:1rem;align-items:flex-start;padding:1.1rem 1.25rem;border-radius:var(--radius);border:1px dashed}
.alert>.ti{font-size:1.75rem;flex-shrink:0}
.alert b{display:block;color:var(--gray-900);margin-bottom:.15rem}
.alert-primary{background:var(--primary-light);border-color:var(--primary);color:var(--gray-800)} .alert-primary>.ti{color:var(--primary)}
.alert-success{background:var(--success-light);border-color:var(--success);color:var(--gray-800)} .alert-success>.ti{color:var(--success)}
.alert-warning{background:var(--warning-light);border-color:var(--warning);color:var(--gray-800)} .alert-warning>.ti{color:var(--warning)}
.alert-danger{background:var(--danger-light);border-color:var(--danger);color:var(--gray-800)} .alert-danger>.ti{color:var(--danger)}

/* Empty state */
.empty{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:3rem 1rem;color:var(--gray-500);text-align:center}
.empty>.ti{font-size:3rem;color:var(--gray-300)}

/* Chip (tags, filtros ativos) e referência a tarefa (T#…) */
.chip{display:inline-flex;align-items:center;gap:.3rem;background:var(--primary-light);color:var(--primary);border-radius:var(--radius-sm);padding:.3rem .5rem;font-size:var(--fs-sm);font-weight:var(--fw-semibold)}
.chip i{cursor:pointer;opacity:.7} .chip i:hover{opacity:1}
.tref{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:.8rem;font-weight:600;background:var(--primary-light);color:var(--primary);padding:.05rem .4rem;border-radius:var(--radius-sm);cursor:pointer}

/* Abas */
.nav-tabs{display:flex;gap:1.75rem;border-bottom:1px solid var(--border);margin-bottom:1.5rem;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.nav-tab{padding:.85rem 0 .8rem;font-weight:var(--fw-semibold);color:var(--gray-500);border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;transition:all .15s ease}
.nav-tab:hover{color:var(--primary)}
.nav-tab.active{color:var(--primary);border-bottom-color:var(--primary)}

/* Barra de ações fixa no rodapé do formulário */
.sticky-actions{position:sticky;bottom:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.5rem;background:var(--surface);border:1px solid var(--border);box-shadow:0 -8px 24px -12px rgba(0,0,0,.12);border-radius:var(--radius-lg) var(--radius-lg) 0 0;margin-top:1.5rem}
.dirty-dot{display:inline-flex;align-items:center;gap:.4rem;font-weight:var(--fw-semibold);color:var(--warning);font-size:var(--fs-sm)}
.dirty-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--warning)}

/* Notice: aviso tracejado com ícone grande (status de agente, tabela de preço vigente, avisos de tela) */
.notice{display:flex;gap:1rem;align-items:center;padding:1.1rem 1.4rem;border-radius:var(--radius);border:1px dashed}
.notice>.ti{font-size:2rem;flex-shrink:0}
.notice h4{margin:0 0 .15rem;font-size:var(--fs-md);color:var(--gray-900);font-weight:var(--fw-bold)}
.notice .txt{color:var(--gray-600);font-weight:var(--fw-semibold);font-size:var(--fs-sm)}
.notice-primary{background:var(--primary-light);border-color:var(--primary)} .notice-primary>.ti{color:var(--primary)}
.notice-success{background:var(--success-light);border-color:var(--success)} .notice-success>.ti{color:var(--success)}
.notice-warning{background:var(--warning-light);border-color:var(--warning)} .notice-warning>.ti{color:var(--warning)}
.notice-danger{background:var(--danger-light);border-color:var(--danger)} .notice-danger>.ti{color:var(--danger)}

/* Progresso: <div class="progress success"><i style="width:60%"></i></div> */
.progress{height:6px;border-radius:99px;background:var(--gray-200);overflow:hidden}
.progress>i{display:block;height:100%;border-radius:99px;background:var(--primary);transition:width .3s ease}
.progress.success>i{background:var(--success)} .progress.warning>i{background:var(--warning)} .progress.danger>i{background:var(--danger)}

/* Anel de nota/risco: <div class="ring" style="--v:72;--c:var(--danger)"><b>72<small>risco</small></b></div> */
.ring{--c:var(--primary);--v:0;width:64px;height:64px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:conic-gradient(var(--c) calc(var(--v)*1%),var(--gray-200) 0);position:relative}
.ring::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--surface)}
.ring b{position:relative;font-size:1.15rem;color:var(--gray-900);line-height:1;text-align:center}
.ring b small{display:block;font-size:.55rem;color:var(--gray-500);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.04em;margin-top:.15rem}
.ring-sm{width:44px;height:44px} .ring-sm::before{inset:4px} .ring-sm b{font-size:.85rem}
.ring-lg{width:96px;height:96px} .ring-lg::before{inset:8px} .ring-lg b{font-size:1.75rem} .ring-lg b small{font-size:.65rem}

/* Grupo de avatares sobrepostos */
.symbol-group{display:inline-flex;align-items:center}
.symbol-group .symbol{border:2px solid var(--surface);margin-left:-.6rem;width:32px;height:32px;font-size:.75rem}
.symbol-group .symbol:first-child{margin-left:0}

/* Stepper (wizards e ficha pública). Estados no .stepper-item: current, completed, lock.
   Horizontal: itens lado a lado; vertical: intercale <div class="stepper-line"></div>. */
.stepper{display:flex;align-items:center;gap:1rem 2rem;flex-wrap:nowrap;overflow-x:auto}
.stepper.stepper-v{flex-direction:column;align-items:stretch;gap:0}
.stepper-item{display:flex;align-items:center;gap:1rem;cursor:pointer;flex:0 0 auto}
.stepper-icon{width:40px;height:40px;border-radius:var(--radius);display:grid;place-items:center;background:var(--primary-light);color:var(--primary);font-weight:var(--fw-bolder);font-size:1.1rem;flex-shrink:0;transition:all .15s ease}
.stepper-item .stepper-check{display:none}
.stepper-title{color:var(--gray-800);font-weight:var(--fw-bold);font-size:1.075rem}
.stepper-desc{color:var(--gray-500);font-weight:var(--fw-semibold);font-size:var(--fs-sm)}
.stepper-line{height:40px;border-left:1px dashed var(--gray-300);margin:.35rem 0 .35rem 20px}
.stepper-item.current .stepper-icon{background:var(--primary);color:var(--primary-inverse)}
.stepper-item.current .stepper-title{color:var(--gray-900)}
.stepper-item.completed .stepper-num{display:none} .stepper-item.completed .stepper-check{display:inline}
.stepper-item.completed .stepper-title{color:var(--gray-500)}
.stepper-item.lock{cursor:not-allowed;opacity:.55}
@container (max-width:1400px){ .stepper:not(.stepper-v) .stepper-desc{display:none} }

/* Separador com texto ("ou entre com") */
.separator-text{display:flex;align-items:center;gap:1rem;color:var(--gray-500);font-weight:var(--fw-semibold);font-size:var(--fs-sm);margin:1.75rem 0}
.separator-text::before,.separator-text::after{content:"";flex:1;border-top:1px solid var(--border)}

/* Utilitários de destaque */
.link-primary{color:var(--primary);font-weight:var(--fw-semibold);cursor:pointer;text-decoration:none} .link-primary:hover{color:var(--primary-active)}
.fs-2hx{font-size:2.25rem;font-weight:var(--fw-bolder);color:var(--gray-900);line-height:1.1}

/* ---- src/components/forms.css ---- */
/* Formulários: campos, validação, select, switch, checkbox em cartão, grupos e cartões de opção. */
.form-control{width:100%;border:1px solid var(--gray-300);background:var(--surface);color:var(--gray-700);border-radius:var(--radius);padding:.7rem 1rem;font:inherit;font-weight:var(--fw-semibold);transition:all .15s ease;outline:none}
.form-control:focus{border-color:var(--gray-400)}
.form-control-solid{background:var(--input-solid);border-color:var(--input-border)}
.form-control-solid:focus{background:var(--surface);border-color:var(--primary);box-shadow:0 0 0 3px var(--input-focus-ring)}
.form-label{display:block;font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--gray-900);margin-bottom:.5rem}
.required::after{content:" *";color:var(--danger)}
.form-text{font-size:var(--fs-sm);color:var(--gray-500);margin-top:.4rem}
select.form-control{appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2399a1b7' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 1rem center;background-size:12px;padding-right:2.5rem}
textarea.form-control{min-height:90px;resize:vertical}

/* Linha de campo + validação (VUI.forms.validar) */
.fv-row{margin-bottom:1.5rem}
.fv-row:last-child{margin-bottom:0}
.invalid-feedback{display:none;font-size:var(--fs-sm);color:var(--danger);margin-top:.4rem;font-weight:var(--fw-semibold)}
.is-invalid .form-control{border-color:var(--danger)!important;background:var(--surface)}
.is-invalid .invalid-feedback{display:block}
.is-valid .form-control{border-color:var(--success)!important}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.25rem}
.row-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 1.25rem}

/* Busca com ícone */
.search-wrap{position:relative}
.search-wrap>.ti{position:absolute;left:1rem;top:50%;transform:translateY(-50%);font-size:1.15rem;color:var(--gray-500)}
.search-wrap .form-control{padding-left:2.75rem;width:260px}
.search-wrap .kbd-hint{position:absolute;right:.75rem;top:50%;transform:translateY(-50%)}

/* Grupo campo + botão */
.input-group{display:flex}
.input-group .form-control{border-top-right-radius:0;border-bottom-right-radius:0}
.input-group .btn{border-top-left-radius:0;border-bottom-left-radius:0}

/* Switch */
.switch{display:inline-flex;align-items:center;gap:.75rem;cursor:pointer;font-weight:var(--fw-semibold);color:var(--gray-800)}
.switch input{appearance:none;width:3.25rem;height:1.75rem;border-radius:var(--radius-full);background:var(--gray-200);position:relative;cursor:pointer;transition:all .15s ease;flex-shrink:0;margin:0}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:calc(1.75rem - 6px);height:calc(1.75rem - 6px);border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15);transition:all .15s ease}
.switch input:checked{background:var(--primary)}
.switch input:checked::after{left:calc(100% - 1.75rem + 3px)}
.switch input:disabled{opacity:.5;cursor:not-allowed}

/* Checkbox em cartão (módulos, permissões, aceites) */
.check{display:flex;align-items:center;gap:.65rem;cursor:pointer;font-weight:var(--fw-semibold);color:var(--gray-700);padding:.55rem .75rem;border-radius:var(--radius);border:1px dashed var(--gray-300);transition:all .15s ease}
.check:hover{border-color:var(--primary)}
.check input{appearance:none;width:1.4rem;height:1.4rem;border-radius:.35rem;background:var(--gray-200);flex-shrink:0;margin:0;cursor:pointer;display:grid;place-content:center;transition:all .15s ease}
.check input:checked{background:var(--primary)}
.check input:checked::after{content:"";width:.4rem;height:.7rem;border:solid var(--primary-inverse);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.check:has(input:checked){border-style:solid;border-color:var(--primary);background:var(--primary-light);color:var(--primary)}
.check .ti{font-size:1.2rem}
.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.6rem}

/* Cartões de opção (radio) */
.opt-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.opt-card{display:flex;gap:.75rem;align-items:flex-start;padding:1rem;border:1px dashed var(--gray-300);border-radius:var(--radius);cursor:pointer;transition:all .15s ease}
.opt-card:hover{border-color:var(--primary)}
.opt-card input{display:none}
.opt-card>.ti{font-size:1.6rem;color:var(--gray-500)}
.opt-card b{display:block;color:var(--gray-800)}
.opt-card span{font-size:var(--fs-xs);color:var(--gray-500);font-weight:var(--fw-semibold)}
.opt-card:has(input:checked){border-style:solid;border-color:var(--primary);background:var(--primary-light)}
.opt-card:has(input:checked)>.ti{color:var(--primary)}

/* Campo transparente (telas de login/auth sobre fundo branco) */
.form-control.bg-transparent{background:transparent;border-color:var(--gray-300)}
.form-control.bg-transparent:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--input-focus-ring)}

/* ---- src/components/overlays.css ---- */
/* Sobreposições: dropdown, modal, drawer, toast e paleta Ctrl+K. */

/* Dropdown */
.dropdown{position:absolute;z-index:100;min-width:240px;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-dropdown);padding:.75rem 0;opacity:0;transform:translateY(6px);pointer-events:none;transition:all .15s ease}
.dropdown.show{opacity:1;transform:none;pointer-events:auto}
.dd-item{display:flex;align-items:center;gap:.65rem;padding:.6rem 1.25rem;margin:0 .6rem;border-radius:var(--radius);color:var(--gray-700);font-weight:var(--fw-semibold);cursor:pointer;transition:all .15s ease}
.dd-item:hover,.dd-item.active{background:var(--gray-100);color:var(--primary)}
.dd-item .ti{font-size:1.2rem}
.dd-sep{height:1px;background:var(--border);margin:.6rem 0}
.dd-head{display:flex;align-items:center;gap:.9rem;padding:.4rem 1.6rem .8rem}
.dd-title{padding:.4rem 1.6rem;font-weight:var(--fw-bold);color:var(--gray-900);font-size:1rem}
.dd-seg{display:flex;gap:.35rem;padding:.2rem 1.25rem .4rem}
.dd-seg button{flex:1;display:flex;flex-direction:column;align-items:center;gap:.25rem;border:1px dashed var(--gray-300);background:transparent;color:var(--gray-600);border-radius:var(--radius);padding:.5rem;font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
.dd-seg button .ti{font-size:1.25rem}
.dd-seg button.active{border-style:solid;border-color:var(--primary);color:var(--primary);background:var(--primary-light)}

/* Modal. data-static: só fecha pelo ✕ (não fecha clicando fora nem com Esc) */
.modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding:4vh 1rem;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .2s ease;overflow:auto}
.modal.show{opacity:1;pointer-events:auto}
.modal-dialog{width:100%;max-width:720px;background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-dropdown);transform:translateY(-16px);transition:transform .2s ease}
.modal-sm .modal-dialog{max-width:440px}
.modal-lg .modal-dialog{max-width:980px}
.modal.show .modal-dialog{transform:none}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 2rem;border-bottom:1px solid var(--border)}
.modal-header h2{margin:0;font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--gray-900)}
.modal-body{padding:2rem}
.modal-footer{display:flex;justify-content:flex-end;gap:.75rem;padding:1.25rem 2rem;border-top:1px solid var(--border)}

/* Drawer lateral */
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:1000;width:min(560px,100%);background:var(--surface);box-shadow:var(--shadow-dropdown);display:flex;flex-direction:column;transform:translateX(105%);transition:transform .25s ease}
.drawer.show{transform:none}
.drawer-head{display:flex;align-items:center;gap:1rem;padding:1.25rem 1.5rem;border-bottom:1px solid var(--border)}
.drawer-body{flex:1;overflow:auto;padding:1.75rem 2rem}
.drawer-foot{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:1.25rem 2rem;border-top:1px solid var(--border)}
.vui-backdrop{position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .2s ease}
.vui-backdrop.show{opacity:1;pointer-events:auto}

/* Toast */
.vui-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;transition:all .2s ease;background:var(--gray-900);color:var(--bg-body);padding:.75rem 1.25rem;border-radius:var(--radius);font-weight:var(--fw-semibold);z-index:9500;display:flex;gap:.5rem;align-items:center;pointer-events:none}
.vui-toast.show{opacity:1;transform:translate(-50%,0)}

/* Paleta de comandos (Ctrl+K) */
.palette-wrap{position:fixed;inset:0;z-index:9000;display:none}
.palette-wrap.show{display:block}
.palette-backdrop{position:absolute;inset:0;background:rgba(15,16,20,.45);backdrop-filter:blur(2px)}
.palette{position:relative;width:min(640px,calc(100vw - 2rem));margin:12vh auto 0;background:var(--surface);border-radius:var(--radius-lg);box-shadow:0 24px 60px -12px rgba(0,0,0,.35);overflow:hidden;animation:vui-pal .15s ease}
@keyframes vui-pal{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
.palette-in{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;border-bottom:1px solid var(--border)}
.palette-in .ti{font-size:1.3rem;color:var(--gray-500)}
.palette-in input{flex:1;border:0;outline:none;background:transparent;font:inherit;font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--gray-900)}
.palette-in input::placeholder{color:var(--gray-500);font-weight:500}
.palette-list{max-height:min(420px,55vh);overflow:auto;padding:.5rem}
.palette-grp{padding:.65rem .75rem .35rem;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;font-weight:var(--fw-bold);color:var(--gray-500)}
.palette-it{display:flex;align-items:center;gap:.8rem;padding:.55rem .75rem;border-radius:var(--radius);cursor:pointer}
.palette-it .symbol{background:var(--gray-100);color:var(--gray-600)}
.palette-it .symbol .ti{font-size:1.1rem}
.palette-it .grow{flex:1;min-width:0}
.palette-it b{display:block;color:var(--gray-800);font-weight:var(--fw-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.palette-it span:not(.symbol){display:block;font-size:var(--fs-xs);color:var(--gray-500);font-weight:var(--fw-semibold)}
.palette-it.sel{background:var(--primary-light)}
.palette-it.sel b{color:var(--primary)}
.palette-it.sel .symbol{background:var(--primary);color:var(--primary-inverse)}
.palette-enter{color:var(--primary);opacity:0;font-size:1rem}
.palette-it.sel .palette-enter{opacity:1}
.palette-foot{display:flex;gap:1.25rem;padding:.65rem 1.25rem;border-top:1px solid var(--border);background:var(--gray-100);font-size:var(--fs-xs);color:var(--gray-500);font-weight:var(--fw-semibold)}

/* ---- src/components/widgets.css ---- */
/* Widgets (v0.3): timeline, notificações, block UI, image input, medidor de senha, tooltip,
   acordeão, estrelas, ribbon, pulse, bullets, voltar ao topo, barra fixa, matriz de permissões,
   cabeçalho de perfil e página de erro. */

/* Timeline / feed de atividade.
   <div class="timeline"><div class="timeline-item">
     <div class="timeline-icon bg-light-primary"><i class="ti ti-message"></i></div>
     <div class="timeline-content"><div class="timeline-head"><b>Título</b><span class="timeline-time">há 2 h</span></div>
       <div class="timeline-body">Texto…</div></div></div></div>
   Variante .timeline-label: hora à esquerda + ponto colorido (<span class="timeline-when">09:12</span><span class="timeline-dot" style="--c:var(--success)"></span>). */
.timeline{display:flex;flex-direction:column}
.timeline-item{position:relative;display:flex;gap:1rem;padding-bottom:1.5rem}
.timeline-item:last-child{padding-bottom:0}
.timeline-item::before{content:"";position:absolute;left:19px;top:44px;bottom:4px;border-left:1px dashed var(--gray-300)}
.timeline-item:last-child::before{display:none}
.timeline-icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-size:1.2rem}
:where(.timeline-icon){background:var(--gray-100);color:var(--gray-600)} /* :where = cor padrão que um bg-light-* sobrescreve */
.timeline-content{flex:1;min-width:0;padding-top:.45rem}
.timeline-head{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.timeline-head b{color:var(--gray-900);font-weight:var(--fw-bold)}
.timeline-time{font-size:var(--fs-xs);color:var(--gray-500);font-weight:var(--fw-semibold);white-space:nowrap}
.timeline-body{margin-top:.35rem;color:var(--gray-600);font-weight:var(--fw-semibold);font-size:var(--fs-sm);line-height:1.6}
.timeline-body .card,.timeline-box{margin-top:.6rem;border:1px dashed var(--gray-300);border-radius:var(--radius);padding:.85rem 1rem;background:transparent;box-shadow:none}
.timeline-label .timeline-item{gap:.85rem;align-items:flex-start;padding-bottom:1.15rem}
.timeline-label .timeline-item::before{left:calc(3.5rem + .85rem + 5px);top:18px;bottom:-2px;border-left:2px solid var(--gray-200)}
.timeline-when{width:3.5rem;flex-shrink:0;text-align:right;font-weight:var(--fw-bold);color:var(--gray-800);font-size:var(--fs-sm)}
.timeline-dot{--c:var(--primary);width:12px;height:12px;margin-top:4px;border-radius:50%;flex-shrink:0;border:3px solid var(--c);background:var(--surface);position:relative;z-index:1}
.timeline-label .timeline-content{padding-top:0;color:var(--gray-700);font-weight:var(--fw-semibold);font-size:var(--fs-sm)}

/* Central de notificações (dropdown do sino no header) */
.notif{width:min(400px,calc(100vw - 2rem));padding:0;overflow:hidden}
.notif-head{background:var(--primary);color:var(--primary-inverse);padding:1.4rem 1.6rem 0;background-image:radial-gradient(circle at 100% 0,rgba(255,255,255,.18),transparent 55%)}
.notif-head h3{margin:0;font-size:1.15rem;font-weight:var(--fw-bold);display:flex;align-items:center;gap:.5rem}
.notif-head h3 small{font-size:var(--fs-xs);opacity:.75;font-weight:var(--fw-semibold)}
.notif-tabs{display:flex;gap:1.5rem;margin-top:1rem}
.notif-tabs a{padding:.75rem 0;color:color-mix(in srgb,var(--primary-inverse) 70%,transparent);font-weight:var(--fw-semibold);border-bottom:2px solid transparent;cursor:pointer}
.notif-tabs a.active,.notif-tabs a:hover{color:var(--primary-inverse);border-bottom-color:var(--primary-inverse)}
.notif-list{max-height:min(380px,55vh);overflow:auto;padding:.5rem 0}
.notif-item{display:flex;gap:.9rem;align-items:flex-start;padding:.75rem 1.6rem;cursor:pointer;transition:background .15s ease}
.notif-item:hover{background:var(--gray-100)}
.notif-item .grow{flex:1;min-width:0}
.notif-item b{display:block;color:var(--gray-900);font-weight:var(--fw-bold);font-size:var(--fs-sm)}
.notif-item p{margin:.15rem 0 0;color:var(--gray-600);font-size:var(--fs-sm);font-weight:var(--fw-semibold);line-height:1.45}
.notif-item .when{font-size:var(--fs-xs);color:var(--gray-500);font-weight:var(--fw-semibold);white-space:nowrap}
.notif-item.nova b::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--primary);margin-left:.4rem;vertical-align:middle}
.notif-foot{display:flex;justify-content:space-between;padding:.85rem 1.6rem;border-top:1px solid var(--border);font-size:var(--fs-sm)}
.notif .empty{padding:2.5rem 1rem}
.bell-dot{position:relative}
.bell-dot::after{content:"";position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 2px var(--header-bg)}

/* Block UI: carregamento sobre um card/tabela. VUI.ui.bloquear(el, "Carregando…") / liberar(el) */
.vui-blocked{position:relative}
.vui-block{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--surface) 70%,transparent);border-radius:inherit;animation:vui-fade .15s ease}
.vui-block-msg{display:inline-flex;align-items:center;gap:.65rem;padding:.75rem 1.1rem;border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-dropdown);color:var(--gray-700);font-weight:var(--fw-semibold);font-size:var(--fs-sm)}
.vui-block-msg .spinner{color:var(--primary)}
@keyframes vui-fade{from{opacity:0}to{opacity:1}}

/* Image input (avatar): <div class="image-input" data-vui-image><div class="image-input-wrapper"></div>…</div> */
.image-input{position:relative;display:inline-block;border-radius:var(--radius-lg);width:125px;height:125px;flex-shrink:0}
.image-input-circle,.image-input-circle .image-input-wrapper{border-radius:50%}
.image-input-wrapper{width:100%;height:100%;border-radius:var(--radius-lg);background:var(--gray-100) center/cover no-repeat;box-shadow:0 .5rem 1.5rem .5rem rgba(0,0,0,.075);border:3px solid var(--surface);display:grid;place-items:center;color:var(--gray-400);font-size:2.5rem;font-weight:var(--fw-bolder)}
.image-input-btn{position:absolute;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--surface);color:var(--gray-600);box-shadow:0 .1rem 1rem .25rem rgba(0,0,0,.08);border:0;cursor:pointer;font-size:.95rem;transition:color .15s ease}
.image-input-btn:hover{color:var(--primary)}
.image-input-btn[data-acao="trocar"]{top:-10px;right:-10px}
.image-input-btn[data-acao="remover"]{bottom:-10px;right:-10px}
.image-input:not(.tem-imagem) [data-acao="remover"]{display:none}
.image-input.tem-imagem .image-input-wrapper{font-size:0}
.image-input-hint{display:block;margin-top:.75rem;font-size:var(--fs-xs);color:var(--gray-500);font-weight:var(--fw-semibold)}

/* Medidor de força de senha: <input data-vui-senha> + <div class="pw-meter"><i></i><i></i><i></i><i></i></div> */
.pw-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:.65rem}
.pw-meter i{height:5px;border-radius:99px;background:var(--gray-200);transition:background .2s ease}
.pw-meter[data-nivel="1"] i:nth-child(-n+1){background:var(--danger)}
.pw-meter[data-nivel="2"] i:nth-child(-n+2){background:var(--warning)}
.pw-meter[data-nivel="3"] i:nth-child(-n+3){background:var(--primary)}
.pw-meter[data-nivel="4"] i{background:var(--success)}
.pw-hint{display:block;margin-top:.45rem;font-size:var(--fs-xs);color:var(--gray-500);font-weight:var(--fw-semibold)}

/* Tooltip (data-vui-tip="texto") */
.vui-tip{position:fixed;z-index:9600;max-width:280px;padding:.45rem .7rem;border-radius:var(--radius);background:var(--gray-900);color:var(--bg-body);font-size:var(--fs-xs);font-weight:var(--fw-semibold);line-height:1.45;pointer-events:none;opacity:0;transition:opacity .12s ease}
.vui-tip.show{opacity:1}
[data-theme="dark"] .vui-tip{background:#2b2d38;color:#f5f5f5;box-shadow:var(--shadow-dropdown)}

/* Acordeão com <details>: <div class="accordion"><details class="acc"><summary>Pergunta</summary><div class="acc-body">…</div></details></div> */
.accordion{display:flex;flex-direction:column}
.acc{border-bottom:1px dashed var(--border-dashed)}
.acc:last-child{border-bottom:0}
.acc>summary{display:flex;align-items:center;gap:1rem;padding:1.1rem 0;cursor:pointer;list-style:none;font-weight:var(--fw-bold);font-size:1.05rem;color:var(--gray-800);transition:color .15s ease}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary::before{content:"";width:1.4rem;height:1.4rem;flex-shrink:0;border-radius:var(--radius-sm);background-color:var(--gray-100);background-image:linear-gradient(var(--gray-600),var(--gray-600)),linear-gradient(var(--gray-600),var(--gray-600));background-repeat:no-repeat;background-size:10px 2px,2px 10px;background-position:center;transition:all .2s ease}
.acc[open]>summary::before{background-image:linear-gradient(var(--primary-inverse),var(--primary-inverse));background-size:10px 2px;background-color:var(--primary)}
.acc>summary:hover,.acc[open]>summary{color:var(--primary)}
.acc-body{padding:0 0 1.25rem 2.4rem;color:var(--gray-600);font-weight:var(--fw-semibold);line-height:1.7}

/* Estrelas (CSAT): VUI.ui.estrelas(4) ou <div class="rating"><i class="ti ti-star-filled on"></i>…</div>.
   Entrada: <div class="rating rating-input"><input type="radio" name="n" value="5" id="r5"><label for="r5">…</label>…</div> (ordem 5→1) */
.rating{display:inline-flex;gap:.15rem;align-items:center;color:var(--gray-300);font-size:1.15rem}
.rating .on{color:var(--warning)}
.rating-input{flex-direction:row-reverse;justify-content:flex-end}
.rating-input input{position:absolute;opacity:0;width:0;height:0}
.rating-input label{cursor:pointer;color:var(--gray-300);font-size:1.5rem;line-height:1;transition:color .1s ease}
.rating-input label:hover,.rating-input label:hover~label,.rating-input input:checked~label{color:var(--warning)}

/* Ribbon: .ribbon (no card) + .ribbon-label (faixa que sai da borda) ou .ribbon-corner (triângulo no canto) */
.ribbon{position:relative}
.ribbon-label{position:absolute;top:1rem;right:-.5rem;z-index:2;display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .85rem;background:var(--c,var(--primary));color:var(--primary-inverse);font-size:var(--fs-xs);font-weight:var(--fw-bold);border-radius:var(--radius-sm) 0 0 var(--radius-sm);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.ribbon-label::after{content:"";position:absolute;right:0;bottom:-.5rem;border-top:.5rem solid color-mix(in srgb,var(--c,var(--primary)) 60%,#000);border-right:.5rem solid transparent}
.ribbon-corner{position:absolute;top:0;right:0;z-index:2;width:58px;height:58px;overflow:hidden;border-top-right-radius:var(--radius-lg)}
.ribbon-corner::before{content:"";position:absolute;top:0;right:0;border-top:58px solid var(--c,var(--primary));border-left:58px solid transparent}
.ribbon-corner .ti{position:absolute;top:8px;right:8px;color:var(--primary-inverse);font-size:1.1rem}

/* Pulse "ao vivo": <span class="pulse pulse-success"></span> */
.pulse{--c:var(--primary);position:relative;display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--c);flex-shrink:0}
.pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--c);animation:vui-pulse 1.6s ease-out infinite}
.pulse-success{--c:var(--success)} .pulse-warning{--c:var(--warning)} .pulse-danger{--c:var(--danger)} .pulse-info{--c:var(--info)}
@keyframes vui-pulse{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.6);opacity:0}}
[data-motion="reduce"] .pulse::after{animation:none;opacity:.35}

/* Bullets de legenda e lista */
.bullet-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c,var(--primary));flex-shrink:0}
.bullet-bar{display:inline-block;width:4px;align-self:stretch;min-height:2rem;border-radius:99px;background:var(--c,var(--primary));flex-shrink:0}
.legend{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--gray-600)}
.legend span{display:inline-flex;align-items:center;gap:.45rem}

/* Número de destaque com caixa tracejada (overview de perfil/projeto) */
.stat-box{display:inline-flex;flex-direction:column;gap:.15rem;min-width:125px;padding:.75rem 1rem;border:1px dashed var(--gray-300);border-radius:var(--radius)}
.stat-box b{font-size:1.45rem;font-weight:var(--fw-bolder);color:var(--gray-900);line-height:1.2;display:flex;align-items:center;gap:.35rem}
.stat-box>span{font-size:var(--fs-sm);color:var(--gray-500);font-weight:var(--fw-semibold)}

/* Barra fixa logo abaixo do header (filtros/ações que acompanham a rolagem) */
.sticky-bar{position:sticky;top:var(--header-h);z-index:30;background:var(--bg-app);margin:-2rem -2rem 1.5rem;padding:1rem 2rem;border-bottom:1px solid var(--border)}
[data-density="compacta"] .sticky-bar{top:60px;margin:-1.25rem -1.5rem 1.25rem;padding:.75rem 1.5rem}
@container (max-width:991px){ .sticky-bar{margin:-1.25rem -1.25rem 1.25rem;padding:.75rem 1.25rem} } /* acompanha o padding menor do .content */
@container (max-width:600px){ .sticky-bar{position:static} } /* no celular a barra ocuparia a tela toda */

/* Voltar ao topo (criado pelo JS quando a área principal rola) */
.scrolltop{position:fixed;right:1.5rem;bottom:1.5rem;z-index:90;width:38px;height:38px;border-radius:var(--radius);display:grid;place-items:center;border:0;background:var(--primary);color:var(--primary-inverse);font-size:1.25rem;cursor:pointer;opacity:0;transform:translateY(10px);pointer-events:none;transition:all .2s ease;box-shadow:var(--shadow-hover)}
.scrolltop.show{opacity:.85;transform:none;pointer-events:auto}
.scrolltop:hover{opacity:1}

/* Matriz de permissões (módulo × ação): cabeçalho e 1ª coluna fixos */
.perm-matrix{overflow:auto;max-height:70vh;border:1px solid var(--border);border-radius:var(--radius)}
.perm-matrix table{width:100%;border-collapse:separate;border-spacing:0}
.perm-matrix th,.perm-matrix td{padding:.75rem 1rem;border-bottom:1px dashed var(--border-dashed);text-align:center;white-space:nowrap;background:var(--surface)}
.perm-matrix thead th{position:sticky;top:0;z-index:2;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;font-weight:var(--fw-bold);color:var(--gray-500);border-bottom:1px solid var(--border)}
.perm-matrix th:first-child,.perm-matrix td:first-child{position:sticky;left:0;z-index:1;text-align:left;font-weight:var(--fw-semibold);color:var(--gray-800);min-width:220px}
.perm-matrix thead th:first-child{z-index:3}
.perm-matrix .perm-grupo td{background:var(--gray-100);font-weight:var(--fw-bold);color:var(--gray-900);text-align:left;font-size:var(--fs-sm)}
.perm-matrix td:first-child small{display:block;color:var(--gray-500);font-weight:var(--fw-semibold);font-size:var(--fs-xs);margin-top:.1rem}
.perm-matrix tbody tr:hover td{background:var(--gray-100)}
.perm-matrix input[type=checkbox]{width:1.15rem;height:1.15rem;accent-color:var(--primary);cursor:pointer;vertical-align:middle}
.perm-matrix .herdado{position:relative}
.perm-matrix .herdado::after{content:"";position:absolute;top:.45rem;right:.45rem;width:5px;height:5px;border-radius:50%;background:var(--info)}

/* Cabeçalho de perfil (Minha conta, ficha de cliente, usuário) */
.profile-hd{padding:2rem 2rem 0}
.profile-top{display:flex;gap:1.75rem;flex-wrap:wrap}
.profile-top .grow{flex:1;min-width:260px}
.profile-name{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:0 0 .4rem;font-size:1.45rem;font-weight:var(--fw-bolder);color:var(--gray-900)}
.profile-meta{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;color:var(--gray-500);font-weight:var(--fw-semibold);font-size:var(--fs-sm)}
.profile-meta span{display:inline-flex;align-items:center;gap:.3rem}
.profile-stats{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem}
.profile-side{display:flex;flex-direction:column;align-items:flex-end;gap:.75rem;min-width:220px}
.profile-hd .nav-tabs{margin:1.75rem 0 0;border-bottom:0;gap:2rem}
.profile-hd .nav-tab{padding:1.1rem 0}
@container (max-width:700px){ .profile-side{align-items:stretch;width:100%} .profile-hd{padding:1.25rem 1.25rem 0} }

/* Página de erro / manutenção (no layout público ou sozinha) */
.error-page{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.5rem;padding:3rem 1rem}
.error-code{font-size:clamp(4rem,12vw,7.5rem);font-weight:800;line-height:1;letter-spacing:-.04em;background:linear-gradient(135deg,var(--primary),var(--info));-webkit-background-clip:text;background-clip:text;color:transparent}
.error-page h1{margin:.75rem 0 0;font-size:var(--fs-2xl);color:var(--gray-900);font-weight:var(--fw-bolder)}
.error-page p{max-width:520px;margin:.25rem 0 1.25rem;color:var(--gray-600);font-weight:var(--fw-semibold);line-height:1.6}
.error-page .symbol{width:96px;height:96px;font-size:3rem;border-radius:50%;margin-bottom:.5rem}

/* Kanban (com SortableJS; ver plugins/sortable.css) */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:1.25rem;overflow-x:auto;padding-bottom:.5rem}
.kanban-col{display:flex;flex-direction:column;min-height:200px}
.kanban-head{display:flex;align-items:center;gap:.6rem;padding:1rem 1.15rem;margin-bottom:1rem;font-weight:var(--fw-bold);font-size:1.05rem;color:var(--gray-900);background:var(--surface);border-radius:var(--radius);border-top:3px solid var(--c,var(--primary));box-shadow:var(--shadow-card)}
[data-theme="dark"] .kanban-head{border:1px solid var(--border);border-top:3px solid var(--c,var(--primary))}
.kanban-head .badge{margin-left:auto}
.kanban-list{flex:1;display:flex;flex-direction:column;gap:.85rem;min-height:60px;border-radius:var(--radius);transition:background .15s ease}
.kanban-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.1rem 1.15rem;box-shadow:var(--shadow-card);cursor:grab;transition:border-color .15s ease,box-shadow .15s ease}
.kanban-card:hover{border-color:var(--primary);box-shadow:var(--shadow-hover)}
.kanban-card b{display:block;color:var(--gray-900);font-weight:var(--fw-bold);margin:.5rem 0 .35rem;line-height:1.4}

/* Textarea que cresce (data-vui-autosize) */
textarea[data-vui-autosize]{resize:none;overflow:hidden;min-height:2.75rem;max-height:var(--autosize-max,320px)}

/* A confirmação sempre fica acima de drawers e modais abertos (ela nasce de um clique dentro deles) */
.modal[role="alertdialog"]{z-index:1100}

/* ---- src/components/operacao.css ---- */
/* Operação (v0.4, sketches 018 e 022): controle segmentado, chips de filtro, KPI que filtra, de-para
   (sugestões, vínculo), aviso com desfazer, monitor de fila (tentativas, auto-atualizar), JSON, linhas
   de código com erro, lista de erros de validação e diff por palavra. */

/* Controle segmentado (troca de visão, de fila, de modo) */
.seg{display:inline-flex;background:var(--input-solid);border:1px solid var(--input-border);border-radius:var(--radius);padding:3px;max-width:100%;overflow-x:auto}
.seg button{border:0;background:transparent;color:var(--gray-600);font:inherit;font-weight:var(--fw-semibold);font-size:var(--fs-sm);padding:.45rem .85rem;border-radius:calc(var(--radius) - 2px);display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;cursor:pointer}
.seg button:hover{color:var(--gray-800)}
.seg button.on,.seg button[aria-pressed="true"]{background:var(--surface);color:var(--primary);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.seg button .badge{padding:.15rem .4rem}

/* Chips de filtro com contagem: <button class="chip-filtro on">A decidir <b>7</b></button> */
.chip-filtro{border:1px dashed var(--gray-300);background:transparent;color:var(--gray-600);font:inherit;font-weight:var(--fw-semibold);font-size:var(--fs-sm);padding:.4rem .75rem;border-radius:var(--radius);display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;transition:all .15s ease}
.chip-filtro:hover{border-color:var(--primary);color:var(--primary)}
.chip-filtro b{font-size:var(--fs-xs);background:var(--gray-100);color:var(--gray-700);padding:.1rem .4rem;border-radius:var(--radius-sm)}
.chip-filtro.on{border-style:solid;border-color:var(--primary);background:var(--primary-light);color:var(--primary)}
.chip-filtro.on b{background:var(--primary);color:var(--primary-inverse)}

/* KPI que filtra a lista: <div class="card card-flush kpi-filtro sel" style="--c:var(--danger)"> */
.kpi-filtro{--c:var(--primary);position:relative;padding:1.2rem 1.35rem;display:flex;flex-direction:column;gap:.1rem;cursor:pointer;border:1px solid transparent;transition:all .15s ease}
.kpi-filtro:hover{border-color:var(--gray-300)}
.kpi-filtro.sel{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent)}
.kpi-filtro .kpi-topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.kpi-filtro .kpi-n{font-size:1.9rem;font-weight:var(--fw-bolder);color:var(--gray-900);line-height:1.1}
.kpi-filtro .kpi-l{color:var(--gray-500);font-weight:var(--fw-semibold);font-size:var(--fs-sm)}
.kpi-grid{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:1.25rem;margin-bottom:1.5rem}
@container (max-width:1100px){ .kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@container (max-width:700px){ .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* De-para: linha (esquerda → direita), sugestões e vínculo */
.depara{display:flex;flex-direction:column;container-type:inline-size}  /* reage à largura do próprio card */
.depara-lin{display:grid;grid-template-columns:28px minmax(200px,1fr) 24px minmax(300px,1.6fr) auto;gap:1rem;align-items:center;padding:1.1rem 1.4rem;border-bottom:1px dashed var(--border-dashed)}
.depara-lin:last-child{border-bottom:0}
.depara-lin.apontado{animation:vui-apontado 1.6s ease}
@keyframes vui-apontado{0%,60%{background:var(--warning-light)}100%{background:transparent}}
.depara-esq b{display:block;color:var(--gray-900);font-weight:var(--fw-bold)}
.depara-esq span{font-size:var(--fs-xs);color:var(--gray-500);font-weight:var(--fw-semibold)}
.depara-seta{color:var(--gray-400);font-size:1.25rem;text-align:center}
.depara-acoes{display:flex;gap:.4rem;justify-content:flex-end}
.sugestoes{display:flex;flex-wrap:wrap;gap:.5rem}
/* origem da sugestão = cor: exata (success), parecida (warning), só o sistema (info) */
.sugestao{--c:var(--gray-400);max-width:100%;display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .7rem;border:1px dashed var(--gray-300);border-radius:var(--radius);background:transparent;cursor:pointer;font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--gray-800);text-align:left;transition:all .15s ease}
.sugestao::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);flex-shrink:0}
.sugestao:hover{border-color:var(--primary)}
.sugestao.on{border-style:solid;border-color:var(--primary);background:var(--primary-light);color:var(--primary)}
.sugestao small{font-size:var(--fs-xs);color:var(--gray-500);font-weight:var(--fw-semibold)}
.sugestao .conflito{display:block;color:var(--warning);font-size:var(--fs-xs)}
.sugestao[disabled]{cursor:default;opacity:.7}
.sug-exata{--c:var(--success)} .sug-parecida{--c:var(--warning)} .sug-sistema{--c:var(--info)}
.vui-mark,.sugestao mark{background:color-mix(in srgb,var(--warning) 28%,transparent);color:inherit;border-radius:2px;padding:0 1px}
.vinculo{display:inline-flex;align-items:center;gap:.65rem;padding:.5rem .8rem;border-radius:var(--radius);background:var(--success-light);color:var(--gray-800);font-weight:var(--fw-semibold);font-size:var(--fs-sm)}
.vinculo>.ti{color:var(--success);font-size:1.1rem}
.vinculo small{display:block;color:var(--gray-500);font-size:var(--fs-xs)}
.depara-vazio{color:var(--gray-500);font-size:var(--fs-sm);font-weight:var(--fw-semibold);display:inline-flex;align-items:center;gap:.4rem}
@container (max-width:780px){ .depara-lin{grid-template-columns:28px minmax(0,1fr)} .depara-seta{display:none} .depara-lin>:nth-child(4),.depara-acoes{grid-column:2} .depara-acoes{justify-content:flex-start} }

/* Aviso com desfazer (VUI.ui.desfazer) */
.vui-snack{position:fixed;left:50%;bottom:24px;z-index:9500;display:flex;align-items:center;gap:1rem;padding:.7rem .8rem .7rem 1rem;border-radius:var(--radius);background:var(--gray-900);color:var(--bg-body);font-weight:var(--fw-semibold);box-shadow:var(--shadow-dropdown);transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:all .2s ease;max-width:calc(100vw - 2rem)}
[data-theme="dark"] .vui-snack{background:#2b2d38;color:#f5f5f5}
.vui-snack.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.vui-snack-t{width:24px;height:24px;flex-shrink:0}
.vui-snack-t circle{fill:none;stroke:currentColor;stroke-width:3;stroke-dasharray:63;transform:rotate(-90deg);transform-origin:center;opacity:.85}
.vui-snack button{border:0;background:transparent;font:inherit;color:color-mix(in srgb,var(--primary) 55%,#fff);font-weight:var(--fw-bold);padding:.35rem .6rem;border-radius:var(--radius-sm);cursor:pointer}
.vui-snack button:hover{background:rgba(255,255,255,.1)}

/* Monitor de fila: tentativas em bolinhas e auto-atualizar com anel */
.tentativas{--c:var(--primary);display:inline-flex;gap:3px;align-items:center}
.tentativas i{width:7px;height:7px;border-radius:50%;background:var(--gray-300)}
.tentativas i.on{background:var(--c)}
.tentativas small{margin-left:.4rem;color:var(--gray-500);font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
.tentativas.esgotou{--c:var(--danger)}
.auto-atualizar{display:inline-flex;align-items:center;gap:.6rem;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--gray-600)}
.auto-atualizar .switch input{width:2.4rem;height:1.35rem}
.auto-atualizar .switch input::after{width:calc(1.35rem - 6px);height:calc(1.35rem - 6px)}
.auto-atualizar .switch input:checked::after{left:calc(100% - 1.35rem + 3px)}
.auto-anel{width:22px;height:22px}
.auto-anel circle{fill:none;stroke-width:3}
.auto-anel .fundo{stroke:var(--gray-200)}
.auto-anel .resto{stroke:var(--primary);stroke-dasharray:57;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset 1s linear}
.erro-linha{color:var(--danger);display:block;max-width:440px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:var(--fw-semibold)}
.motivo-linha{color:var(--gray-500);display:block;max-width:440px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:var(--fw-semibold)}
.erro-box{font-family:var(--font-mono);font-size:.78rem;line-height:1.6;background:var(--danger-light);color:var(--gray-800);border:1px dashed var(--danger);border-radius:var(--radius);padding:.85rem 1rem;white-space:pre-wrap;word-break:break-word}

/* JSON com números de linha (VUI.ui.json). .usado destaca os campos que a aplicação lê */
.vui-json{margin:0;padding:1rem 0;background:var(--gray-100);border-radius:var(--radius);font:12.5px/1.7 var(--font-mono);color:var(--gray-800);max-height:520px;overflow:auto;counter-reset:vui-ln}
.vui-json .ln{display:block;padding-right:1rem;white-space:pre}
.vui-json .ln::before{counter-increment:vui-ln;content:counter(vui-ln);display:inline-block;width:2.6rem;padding-right:.9rem;text-align:right;color:var(--gray-400);user-select:none}
.vui-json .ln.usado{background:color-mix(in srgb,var(--primary) 10%,transparent);box-shadow:inset 3px 0 0 var(--primary)}
.vui-json .k{color:var(--info)} .vui-json .s{color:var(--success)} .vui-json .n{color:var(--warning)} .vui-json .b{color:var(--danger)}

/* Linhas de código com erro (VUI.ui.linhas): visualização com gutter, para validador e trechos */
.vui-linhas{display:flex;font:12.5px/1.75 var(--font-mono);background:var(--input-solid);border:1px solid var(--input-border);border-radius:var(--radius);max-height:460px;overflow:auto}
.vui-linhas .g{padding:.75rem 0;text-align:right;color:var(--gray-400);user-select:none;border-right:1px solid var(--input-border);flex-shrink:0}
.vui-linhas .g div{padding:0 .75rem 0 .9rem}
.vui-linhas .g div.er{color:var(--danger);font-weight:700;background:color-mix(in srgb,var(--danger) 12%,transparent)}
.vui-linhas pre{margin:0;padding:.75rem 1rem;flex:1;color:var(--gray-800)}
.vui-linhas pre div{white-space:pre;min-height:1.75em}
.vui-linhas pre div.er{background:color-mix(in srgb,var(--danger) 10%,transparent);text-decoration:underline wavy var(--danger);text-decoration-skip-ink:none;text-underline-offset:3px}
.vui-linhas pre div.foco{outline:2px solid var(--danger);outline-offset:-1px;border-radius:2px}

/* Lista de erros de validação: <div class="val-erros"><div class="val-erro on" data-linha="5"><span class="pos">5:14</span><div class="m">msg<small>dica</small></div></div></div> */
.val-erros{display:flex;flex-direction:column;gap:.15rem}
.val-erro{display:flex;gap:.85rem;align-items:flex-start;padding:.85rem 1rem;border-radius:var(--radius);cursor:pointer;border:1px solid transparent}
.val-erro:hover{background:var(--gray-100)}
.val-erro.on{border-color:var(--danger);background:var(--danger-light)}
.val-erro .pos{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--danger);font-weight:600;white-space:nowrap;padding-top:.15rem}
.val-erro .m{color:var(--gray-800);font-weight:var(--fw-semibold);font-size:var(--fs-sm);line-height:1.5}
.val-erro .m small{display:block;color:var(--gray-500);font-weight:var(--fw-semibold);margin-top:.15rem}

/* Diff (VUI.ui.diff): lado a lado ou unificado, com destaque por palavra */
.vui-diff{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;font:12.5px/1.7 var(--font-mono)}
.vui-diff .hunk{padding:.35rem 1rem;background:var(--gray-100);color:var(--gray-500);font-size:var(--fs-xs);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.vui-diff .hunk:first-child{border-top:0}
.vui-diff .cols{display:grid;grid-template-columns:1fr 1fr}
.vui-diff .cols>div{min-width:0}
.vui-diff .cols>div+div{border-left:1px solid var(--border)}
.vui-diff .l{display:flex;white-space:pre-wrap;word-break:break-word;min-height:1.7em}
.vui-diff .l .pre{width:1.2rem;flex-shrink:0;text-align:center;color:var(--gray-400)}
.vui-diff .l .tx{flex:1;padding:0 .75rem}
.vui-diff .l.del{background:color-mix(in srgb,var(--danger) 9%,transparent)} .vui-diff .l.del .pre{color:var(--danger)}
.vui-diff .l.add{background:color-mix(in srgb,var(--success) 10%,transparent)} .vui-diff .l.add .pre{color:var(--success)}
.vui-diff .l.vaz{background:repeating-linear-gradient(135deg,transparent 0 6px,var(--gray-100) 6px 12px)}
.vui-diff .l.ctx .tx{color:var(--gray-500)}
.vui-diff del{background:color-mix(in srgb,var(--danger) 28%,transparent);text-decoration:line-through;text-decoration-color:var(--danger);border-radius:2px}
.vui-diff ins{background:color-mix(in srgb,var(--success) 30%,transparent);text-decoration:none;border-radius:2px}
@container (max-width:700px){ .vui-diff .cols{grid-template-columns:1fr} .vui-diff .cols>div+div{border-left:0;border-top:1px dashed var(--border)} }

/* ---- src/components/regras.css ---- */
/* Regras e modelos (v0.5, sketch 019): barra de alterações pendentes, matriz de decisão, evidência
   do histórico, chips de alternar, frase que explica a regra, campos de modelo e prévia preenchida,
   e o lote previsto pelo simulador. */

/* Barra de alterações pendentes (VUI.ui.alteracoes): um salvar só para a página inteira */
.alteracoes{position:sticky;bottom:0;z-index:25;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.25rem;padding:.9rem 1.4rem;border-radius:var(--radius-lg);background:var(--gray-900);color:var(--bg-body);box-shadow:var(--shadow-dropdown)}
[data-theme="dark"] .alteracoes{background:#2b2d38;color:#f5f5f5}
.alteracoes[hidden]{display:none}
.alteracoes>.ti{font-size:1.3rem}
.alteracoes .alt-txt{flex:1;min-width:200px;font-weight:var(--fw-semibold)}
.alteracoes .alt-txt small{display:block;opacity:.7;font-weight:500;margin-top:.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alteracoes .btn-alt{background:transparent;color:inherit;border:1px solid rgba(255,255,255,.25)}
.alteracoes .btn-alt:hover{background:rgba(255,255,255,.08)}

/* Matriz de decisão (linha × coluna), cabeçalho e 1ª coluna fixos */
.matriz-wrap{overflow:auto}
.matriz{width:100%;border-collapse:separate;border-spacing:0}
.matriz th,.matriz td{border-bottom:1px dashed var(--border-dashed);padding:.75rem .7rem;vertical-align:middle;background:var(--surface)}
.matriz thead th{position:sticky;top:0;z-index:2;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--gray-500);font-weight:var(--fw-bold);text-align:center;border-bottom:1px solid var(--border)}
.matriz thead th .ti{display:block;font-size:1.2rem;margin:0 auto .25rem;color:var(--gray-400)}
.matriz th:first-child,.matriz td:first-child{position:sticky;left:0;z-index:1;text-align:left;min-width:240px;box-shadow:inset -1px 0 0 var(--border)}
.matriz thead th:first-child{z-index:3}
.matriz-rot b{display:block;color:var(--gray-900);font-weight:var(--fw-bold)}
.matriz-rot span{font-size:var(--fs-xs);color:var(--gray-500);font-weight:var(--fw-semibold)}
.matriz tr.sub td{background:color-mix(in srgb,var(--gray-100) 60%,var(--surface))}
.matriz tr.sub .matriz-rot{padding-left:1.4rem;position:relative}
.matriz tr.sub .matriz-rot::before{content:"";position:absolute;left:.35rem;top:-.4rem;width:.7rem;height:1.2rem;border-left:2px solid var(--gray-300);border-bottom:2px solid var(--gray-300);border-bottom-left-radius:6px}
.matriz tr.inativa td:not(:first-child){opacity:.45}
.matriz-cel{width:100%;min-height:56px;border:1px dashed transparent;border-radius:var(--radius);background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;cursor:pointer;padding:.4rem;font:inherit;transition:all .15s ease}
.matriz-cel:hover{border-color:var(--gray-300);background:var(--gray-100)}
.matriz-cel .vazio{color:var(--gray-300);font-size:1.1rem}
.matriz-cel:hover .vazio{color:var(--primary)}
.matriz-cel .nome{font-size:var(--fs-xs);font-weight:var(--fw-bold)}
.matriz-cel .meta{font-size:.7rem;color:var(--gray-500);font-weight:var(--fw-semibold);text-align:center;line-height:1.3}
.matriz-cel.on{background:var(--primary-light);border-style:solid;border-color:color-mix(in srgb,var(--primary) 35%,transparent)}
.matriz-cel.on .nome{color:var(--primary)}
.matriz-cel.sug{border-color:var(--success);background:var(--success-light)} .matriz-cel.sug .nome{color:var(--success)}
.matriz-cel.tira{border-style:dashed;border-color:var(--danger);background:var(--danger-light)} .matriz-cel.tira .nome{color:var(--danger);text-decoration:line-through}
.matriz-cel.mudou{box-shadow:0 0 0 2px var(--warning)}
.prio-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:.25rem;vertical-align:middle;background:var(--c,var(--gray-400))}

/* Evidência do histórico: <div class="evidencia" style="--c:var(--success)">…<div class="evidencia-barra"><i style="width:90%"></i></div>63 de 70 (90%)</div> */
.evidencia{--c:var(--success);font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--gray-600)}
.evidencia-barra{height:5px;border-radius:99px;background:var(--gray-200);overflow:hidden;margin:.35rem 0}
.evidencia-barra i{display:block;height:100%;background:var(--c)}

/* Chips de alternar (checkbox): <div class="chips-toggle"><label><input type="checkbox" checked>CNPJ</label></div> */
.chips-toggle{display:flex;flex-wrap:wrap;gap:.4rem}
.chips-toggle label{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .6rem;border:1px dashed var(--gray-300);border-radius:var(--radius);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--gray-600);cursor:pointer;transition:all .15s ease}
.chips-toggle label:hover{border-color:var(--primary)}
.chips-toggle label:has(input:checked){border-style:solid;border-color:var(--primary);background:var(--primary-light);color:var(--primary)}
.chips-toggle.sem-caixa input{display:none}
.chips-toggle input{accent-color:var(--primary)}

/* Frase que explica a regra em português */
.frase-regra{font-size:1.15rem;color:var(--gray-700);font-weight:var(--fw-semibold);line-height:1.6}
.frase-regra b{color:var(--gray-900)}

/* Modelo com campos: botões de campo, título renderizado e prévia */
.campos-modelo{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}
.campos-modelo button{border:1px dashed var(--gray-300);background:transparent;border-radius:var(--radius-sm);padding:.2rem .45rem;font-family:var(--font-mono);font-size:.72rem;color:var(--gray-600);cursor:pointer}
.campos-modelo button:hover{border-color:var(--primary);color:var(--primary)}
.titulo-modelo{font-family:var(--font-mono);font-size:.78rem;color:var(--gray-700);background:var(--gray-100);border-radius:var(--radius-sm);padding:.4rem .55rem;word-break:break-word}
.previa-modelo{border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.15rem;background:var(--surface)}
.previa-modelo .t{font-weight:var(--fw-bold);color:var(--gray-900);margin-bottom:.6rem}
.previa-modelo .d{font-size:var(--fs-sm);color:var(--gray-700);line-height:1.7}
.previa-modelo .d span{color:var(--gray-500)}
.campo-vazio{color:var(--warning);font-style:italic}
.campo-desconhecido{background:color-mix(in srgb,var(--danger) 18%,transparent);color:var(--danger);border-radius:2px;padding:0 2px}

/* Lote previsto (simulador): cartões de tarefa */
.lote-previsto{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.85rem}
.tarefa-prev{border:1px solid var(--border);border-radius:var(--radius);padding:.9rem 1rem;background:var(--surface)}
.tarefa-prev .h{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.tarefa-prev b{color:var(--gray-900);font-size:var(--fs-sm)}
.tarefa-prev .por{font-size:var(--fs-xs);color:var(--gray-500);font-weight:var(--fw-semibold)}
.tarefa-prev.extra{border-style:dashed;border-color:var(--info)}

/* ---- src/components/documento.css ---- */
/* Documento para imprimir (v0.6, sketch 023): mesa com barra + palco cinza + folha A4 sempre clara,
   partes da folha (timbre, quadro, destaque, tabela, totais, passos, assinaturas, rodapé) e a impressão
   por clone (VUI.ui.imprimir), que não corta documentos de várias páginas. */

/* Mesa: documento + painel lateral opcional */
.doc-mesa{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:1.25rem;align-items:start}
.doc-mesa.sem-lado{grid-template-columns:1fr}
@container (max-width:1150px){ .doc-mesa{grid-template-columns:1fr} }
.doc-barra{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.85rem 1.25rem;border-bottom:1px solid var(--border)}
.doc-barra .doc-estado{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--gray-600);margin-right:auto}
.doc-palco{--z:.85;background:var(--gray-200);padding:2rem 1.5rem;overflow:auto;border-radius:0 0 var(--radius-lg) var(--radius-lg);display:flex;flex-direction:column;align-items:center;gap:1.5rem}
[data-theme="dark"] .doc-palco{background:#0b0c10}

/* A folha: A4, sempre clara (o JS põe data-theme="light" + a marca atual). Unidades em mm/pt de propósito. */
.folha{page:folha;width:210mm;min-height:297mm;background:#fff;color:#1e2129;box-shadow:0 4px 24px rgba(0,0,0,.12);padding:16mm 16mm 14mm;font-size:10pt;line-height:1.5;zoom:var(--z,1);position:relative;display:flex;flex-direction:column}
.folha *{border-color:#e4e6ef}
.folha-timbre{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding-bottom:6mm;border-bottom:2px solid var(--primary)}
.folha-marca{display:flex;align-items:center;gap:.7rem}
.folha-marca .lg{width:12mm;height:12mm;border-radius:2.5mm;background:var(--primary);color:var(--primary-inverse);display:grid;place-items:center;font-weight:800;font-size:13pt;letter-spacing:-.03em;overflow:hidden}
.folha-marca .lg img{width:100%;height:100%;object-fit:contain}
.folha-marca b{display:block;font-size:13pt;color:#071437;letter-spacing:-.01em}
.folha-marca span{font-size:8pt;color:#78829d}
.folha-timbre .dados{text-align:right;font-size:8pt;color:#78829d;line-height:1.55}
.folha-titulo{margin:7mm 0 1mm;font-size:17pt;font-weight:700;color:#071437;letter-spacing:-.02em}
.folha-sub{color:#78829d;font-size:9pt;margin-bottom:6mm}
.folha-bloco-t{font-size:7.5pt;text-transform:uppercase;letter-spacing:.07em;color:var(--primary);font-weight:700;margin-bottom:1.5mm}
.folha-quadro{display:grid;grid-template-columns:repeat(var(--n,4),1fr);border:1px solid #e4e6ef;border-radius:2mm;margin-bottom:6mm}
.folha-quadro>div{padding:2.6mm 3.2mm;border-right:1px solid #e4e6ef}
.folha-quadro>div:last-child{border-right:0}
.folha-quadro span{display:block;font-size:7pt;text-transform:uppercase;letter-spacing:.06em;color:#99a1b7;font-weight:600}
.folha-quadro b{font-size:9.5pt;color:#071437}
.folha-destaque{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-radius:2mm;overflow:hidden;margin-bottom:7mm;background:color-mix(in srgb,var(--primary) 7%,#fff);border:1px solid color-mix(in srgb,var(--primary) 25%,#fff);break-inside:avoid}
.folha-destaque>div{padding:4mm}
.folha-destaque>div+div{border-left:1px dashed color-mix(in srgb,var(--primary) 30%,#fff)}
.folha-destaque span{display:block;font-size:7.5pt;color:#4b5675;font-weight:600}
.folha-destaque b{display:block;font-size:15pt;color:#071437;letter-spacing:-.02em;margin-top:.5mm}
.folha-destaque .mais{color:#d81a48} .folha-destaque .menos{color:#04b440}
.folha-destaque small{display:block;font-size:7.5pt;color:#78829d}
.folha-tabela{width:100%;border-collapse:collapse;font-size:9pt;margin-bottom:5mm}
.folha-tabela thead{display:table-header-group}  /* repete o cabeçalho em cada página */
.folha-tabela th{text-align:left;font-size:7pt;text-transform:uppercase;letter-spacing:.06em;color:#99a1b7;font-weight:700;padding:2mm;border-bottom:1.5px solid #071437}
.folha-tabela td{padding:2.3mm 2mm;border-bottom:1px solid #eef0f6;vertical-align:top}
.folha-tabela tr{break-inside:avoid}
.folha-tabela .n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.folha-tabela .apagada td{color:#99a1b7}
.folha-tabela .sub td{padding-top:0;color:#78829d;font-size:8pt}
.folha-tabela .sub ul{margin:0;padding-left:4mm}
.folha-tag{display:inline-block;font-size:6.5pt;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.3mm 1.4mm;border-radius:1mm;background:#dfffea;color:#02842d;margin-left:1.5mm;vertical-align:middle}
.folha-tag.azul{background:#e9f3ff;color:#0461cf} .folha-tag.ambar{background:#fff8dd;color:#926c00}
.folha-totais{margin-left:auto;width:96mm;font-size:9pt;break-inside:avoid}
.folha-totais .r{display:flex;justify-content:space-between;padding:1.4mm 0;color:#4b5675}
.folha-totais .r b{color:#071437;font-variant-numeric:tabular-nums}
.folha-totais .r.forte{border-top:1.5px solid #071437;margin-top:1mm;padding-top:2.2mm;font-size:11pt;color:#071437;font-weight:700}
.folha-totais .r.mais b{color:#d81a48} .folha-totais .r.menos b{color:#04b440}
.folha-lista{margin-top:7mm;break-inside:avoid}
.folha-lista ol,.folha-lista ul{margin:0;padding-left:4.5mm;color:#4b5675;font-size:8.5pt}
.folha-lista li{margin-bottom:1mm}
.folha-intro{background:#f9f9f9;border-left:3px solid var(--primary);padding:3mm 4mm;color:#4b5675;font-size:9.5pt;margin-bottom:3mm}
.folha-passo{display:grid;grid-template-columns:9mm 1fr;gap:4mm;padding:4mm 0;border-bottom:1px solid #eef0f6;break-inside:avoid;position:relative}
.folha-passo .num{width:9mm;height:9mm;border-radius:50%;background:var(--primary);color:var(--primary-inverse);display:grid;place-items:center;font-weight:700;font-size:10pt}
.folha-passo h3{margin:1.5mm 0 1mm;font-size:11pt;color:#071437}
.folha-passo p{margin:0;color:#4b5675;font-size:9.5pt;white-space:pre-wrap}
.folha-passo .tela{margin-top:3mm;border:1px solid #e4e6ef;border-radius:2mm;overflow:hidden;max-width:150mm}
.folha-passo .tela img,.folha-passo .tela svg{display:block;width:100%;height:auto}
.folha-assinaturas{display:grid;grid-template-columns:1fr 1fr;gap:14mm;margin-top:14mm;break-inside:avoid}
.folha-assinaturas div{border-top:1px solid #4b5675;padding-top:1.5mm;font-size:8pt;color:#4b5675;text-align:center}
.folha-rodape{margin-top:auto;padding-top:6mm;display:flex;justify-content:space-between;gap:1rem;font-size:7pt;color:#99a1b7;border-top:1px solid #eef0f6}

/* Texto ajustável antes de imprimir (data-vui-editar-doc liga/desliga) */
.folha .ed[contenteditable="true"]{outline:1px dashed color-mix(in srgb,var(--primary) 55%,transparent);outline-offset:2px;border-radius:2px;cursor:text}
.folha .ed[contenteditable="true"]:hover,.folha .ed[contenteditable="true"]:focus{outline-style:solid;background:color-mix(in srgb,var(--primary) 5%,transparent)}

/* Impressão: só o clone em #vui-imprimir; a página nomeada "folha" não afeta outras impressões */
#vui-imprimir{display:none}
@page folha{size:A4;margin:0}
@media print{
  html.vui-imprimindo,html.vui-imprimindo body{background:#fff!important;height:auto!important;overflow:visible!important}
  html.vui-imprimindo body>*:not(#vui-imprimir){display:none!important}
  html.vui-imprimindo #vui-imprimir{display:block}
  #vui-imprimir .folha{zoom:1!important;box-shadow:none;margin:0;width:auto;min-height:auto;padding:14mm 16mm 12mm;break-after:page}
  #vui-imprimir .folha:last-child{break-after:auto}
  #vui-imprimir .ed{outline:0!important;background:none!important}
  #vui-imprimir .so-tela{display:none!important}
  #vui-imprimir *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---- src/components/ranking.css ---- */
/* Ranking e configuração (v0.7, sketch 021): pódio, barra de composição, variação de posição,
   escopo de uma configuração, menu de configuração por assunto e barra de sequência (volta). */

/* Pódio 2-1-3: <div class="podio"><div class="podio-item p2">…</div><div class="podio-item p1">…</div><div class="podio-item p3">…</div></div> */
.podio{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:1.25rem;align-items:end;margin-bottom:1.5rem}
.podio-item{--m:var(--gray-400);position:relative;text-align:center;padding:1.75rem 1.25rem 1.4rem;border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-card);overflow:hidden;transition:transform .15s ease}
[data-theme="dark"] .podio-item{border:1px solid var(--border)}
.podio-item[data-vui-tip],.podio-item[role="button"],a.podio-item{cursor:pointer}
.podio-item:hover{transform:translateY(-3px)}
.podio-item::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--m)}
.podio-item.p1{--m:#f6c000;padding-top:2.4rem;background:linear-gradient(180deg,color-mix(in srgb,var(--m) 14%,var(--surface)),var(--surface) 55%)}
.podio-item.p2{--m:#a1a5b7} .podio-item.p3{--m:#cd7f32}
.podio-item .podio-av{width:72px;height:72px;margin:0 auto .85rem;border-radius:50%;display:grid;place-items:center;font-size:1.4rem;font-weight:700;color:#fff;background:var(--c,var(--primary));box-shadow:0 0 0 4px var(--surface),0 0 0 7px var(--m);overflow:hidden}
.podio-item .podio-av img{width:100%;height:100%;object-fit:cover}
.podio-item.p1 .podio-av{width:92px;height:92px;font-size:1.75rem}
.podio-item .podio-coroa{position:absolute;top:.6rem;left:50%;transform:translateX(-50%);color:var(--m);font-size:1.6rem}
.podio-item .podio-pos{position:absolute;top:.85rem;left:.95rem;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.85rem;background:var(--m);color:#fff}
.podio-item b{display:block;color:var(--gray-900);font-size:1.05rem}
.podio-item .podio-valor{font-size:1.75rem;font-weight:800;color:var(--gray-900);letter-spacing:-.02em;margin-top:.4rem;line-height:1.1}
.podio-item .podio-valor small{font-size:.8rem;color:var(--gray-500);font-weight:600;letter-spacing:0}
@container (max-width:700px){ .podio{grid-template-columns:1fr} .podio-item.p1{order:-1} }

/* Variação de posição ou valor: <span class="delta up"><i class="ti ti-arrow-up"></i>2</span> */
.delta{display:inline-flex;align-items:center;gap:.15rem;font-size:var(--fs-xs);font-weight:700}
.delta.up{color:var(--success)} .delta.down{color:var(--danger)} .delta.eq{color:var(--gray-400)}

/* Barra de composição: de onde vem um total (VUI.ui.composicao) */
.barra-composta{display:flex;height:10px;border-radius:99px;overflow:hidden;background:var(--gray-100)}
.barra-composta i{display:block;height:100%}
.barra-composta-neg{display:flex;justify-content:flex-end;height:4px;margin-top:3px}
.barra-composta-neg i{display:block;height:100%;background:var(--danger);border-radius:99px}

/* Escopo de uma configuração: global (todos os setores) × setor */
.escopo{display:inline-flex;align-items:center;gap:.3rem;font-size:var(--fs-xs);font-weight:var(--fw-bold);padding:.25rem .5rem;border-radius:var(--radius-sm);white-space:nowrap}
.escopo.global{background:var(--info-light);color:var(--info)}
.escopo.setor{background:var(--primary-light);color:var(--primary)}

/* Menu de configuração por assunto (coluna à esquerda) */
.config-grid{display:grid;grid-template-columns:250px minmax(0,1fr);gap:1.25rem;align-items:start}
@container (max-width:1000px){ .config-grid{grid-template-columns:1fr} }
.config-nav{position:sticky;top:calc(var(--header-h) + 1rem);padding:.6rem}
.config-nav a{display:flex;align-items:center;gap:.7rem;padding:.65rem .8rem;border-radius:var(--radius);font-weight:var(--fw-semibold);color:var(--gray-700);cursor:pointer;font-size:var(--fs-sm);text-decoration:none}
.config-nav a:hover{background:var(--gray-100);color:var(--primary)}
.config-nav a.on,.config-nav a[aria-current="true"]{background:var(--primary-light);color:var(--primary)}
.config-nav a .ti{font-size:1.2rem}
.config-nav a .config-fim{margin-left:auto;font-size:.95rem;color:var(--gray-400)}
.config-nav .config-sep{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--gray-500);font-weight:var(--fw-bold);padding:.9rem .8rem .35rem}
@container (max-width:1000px){ .config-nav{position:static} }

/* Linha de opção com switch à esquerda */
.opcao{display:flex;align-items:center;gap:1rem;padding:.85rem 0;border-bottom:1px dashed var(--border-dashed)}
.opcao:last-child{border-bottom:0}
.opcao .opcao-txt{flex:1;min-width:0}
.opcao .opcao-txt b{display:block;color:var(--gray-900);font-size:var(--fs-sm)}
.opcao .opcao-txt span{font-size:var(--fs-xs);color:var(--gray-500);font-weight:var(--fw-semibold)}

/* Sequência com tempo total (cenas da TV, rotação de painéis) */
.sequencia{display:flex;height:14px;border-radius:99px;overflow:hidden;margin:.5rem 0 .4rem;background:var(--gray-100)}
.sequencia i{display:block;height:100%;border-right:2px solid var(--surface)}
.sequencia i:last-child{border-right:0}

/* ---- src/components/midia.css ---- */
/* Mídia (v0.8, sketch 020): capa, player sincronizado, fila com origem, cartões de votação,
   prévia de voz (onda) e o modo quiosque (tela de celular aberta pelo QR da TV). */

/* Capa gerada (sem imagem): <span class="capa" style="--h:210"><i class="ti ti-music"></i></span> */
.capa{--h:220;width:44px;height:44px;border-radius:var(--radius);display:grid;place-items:center;color:rgba(255,255,255,.85);background:linear-gradient(135deg,hsl(var(--h) 70% 45%),hsl(calc(var(--h) + 40) 75% 30%));flex-shrink:0;position:relative;overflow:hidden;font-size:1.1rem}
.capa::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.25),transparent 50%)}
.capa img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}

/* Player: palco escuro + controles. .pausado para a animação do equalizador */
.player-midia{overflow:hidden}
.player-palco{position:relative;padding:1.75rem;display:flex;gap:1.5rem;align-items:center;background:linear-gradient(135deg,#131313,#1e1e2d);color:#fff}
.player-palco .capa{width:150px;height:150px;font-size:3.5rem;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.player-eq{position:absolute;bottom:.75rem;left:.75rem;display:flex;gap:3px;align-items:flex-end;height:18px;z-index:2}
.player-eq i{width:4px;background:#fff;border-radius:2px;animation:vui-eq 1s ease-in-out infinite}
.player-eq i:nth-child(2){animation-delay:.2s} .player-eq i:nth-child(3){animation-delay:.4s} .player-eq i:nth-child(4){animation-delay:.1s}
@keyframes vui-eq{0%,100%{height:5px}50%{height:18px}}
.player-midia.pausado .player-eq i,[data-motion="reduce"] .player-eq i{animation:none;height:5px}
.player-info{flex:1;min-width:0}
.player-info small{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#9a9cae}
.player-info h2{margin:.5rem 0 .2rem;font-size:1.6rem;font-weight:700;letter-spacing:-.02em;color:#fff;line-height:1.2}
.player-info .artista{color:#c4cada;font-weight:600}
.player-prog{margin-top:1.25rem}
.player-prog .barra{height:5px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden}
.player-prog .barra i{display:block;height:100%;background:#fff;border-radius:99px;transition:width .9s linear}
.player-prog .t{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:#9a9cae;font-weight:600;margin-top:.4rem;font-variant-numeric:tabular-nums}
.player-ctrl{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:1rem 1.5rem;border-bottom:1px solid var(--border)}
.btn-play{width:52px;height:52px;border-radius:50%;border:0;background:var(--primary);color:var(--primary-inverse);font-size:1.5rem;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 16px color-mix(in srgb,var(--primary) 40%,transparent);flex-shrink:0}
.btn-play:hover{background:var(--primary-active)}
.player-vol{display:flex;align-items:center;gap:.6rem;color:var(--gray-500)}
.player-vol input{width:130px;accent-color:var(--primary)}
.player-estado{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:.15rem;font-size:var(--fs-xs);font-weight:600;color:var(--gray-500)}
@container (max-width:600px){ .player-palco{flex-direction:column;text-align:center} .player-estado{margin-left:0;align-items:flex-start} }

/* Fila com origem e tempo até tocar */
.fila-midia .fm-item{display:grid;grid-template-columns:28px 44px minmax(0,1fr) auto;gap:.85rem;align-items:center;padding:.75rem 1.5rem;border-bottom:1px dashed var(--border-dashed)}
.fila-midia .fm-item:last-child{border-bottom:0}
.fila-midia .fm-n{text-align:center;font-weight:800;color:var(--gray-400)}
.fila-midia b{display:block;color:var(--gray-900);font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila-midia .fm-sub{font-size:var(--fs-xs);font-weight:600;color:var(--gray-500)}
.fila-midia .fm-eta{font-size:var(--fs-xs);font-weight:700;color:var(--gray-500);text-align:right;white-space:nowrap}
.origem{display:inline-flex;align-items:center;gap:.25rem;font-size:.68rem;font-weight:700;padding:.12rem .4rem;border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:.03em}
.origem.voto{background:var(--danger-light);color:var(--danger)} .origem.pauta{background:var(--info-light);color:var(--info)} .origem.sorteio{background:var(--gray-100);color:var(--gray-500)}

/* Cartões de votação: .on = seu voto, .travado = já votou (sem limite: não use .travado) */
.votos-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem}
@container (max-width:600px){ .votos-grid{grid-template-columns:1fr} }
.voto-card{position:relative;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;background:var(--surface);transition:all .15s ease;text-align:left;padding:0;font:inherit;color:inherit}
.voto-card:hover{border-color:var(--primary);transform:translateY(-2px)}
.voto-card .capa{width:100%;height:96px;border-radius:0;font-size:2rem}
.voto-card .voto-lider{position:absolute;top:.5rem;left:.5rem;z-index:2}
.voto-card .voto-corpo{padding:.75rem .85rem .85rem}
.voto-card b{display:block;color:var(--gray-900);font-size:var(--fs-sm);line-height:1.35;min-height:2.7em}
.voto-card .voto-barra{height:5px;border-radius:99px;background:var(--gray-100);overflow:hidden;margin:.55rem 0 .35rem}
.voto-card .voto-barra i{display:block;height:100%;background:var(--danger)}
.voto-card .voto-rodape{display:flex;justify-content:space-between;font-size:var(--fs-xs);font-weight:700;color:var(--gray-500)}
.voto-card.on{border-color:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 18%,transparent)}
.voto-card.travado{cursor:default;transform:none}
.voto-card.travado:not(.on){opacity:.55}

/* Prévia de voz: "como vai soar" + onda que anima enquanto toca */
.previa-voz{border-radius:var(--radius-lg);padding:1.1rem 1.2rem;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 10%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--primary) 25%,transparent)}
.previa-voz .fala{font-size:1.05rem;font-weight:600;color:var(--gray-900);line-height:1.5;margin:.4rem 0 .9rem}
.previa-voz .fala b{color:var(--primary)}
.onda{display:flex;align-items:center;gap:2px;height:26px;flex:1}
.onda i{flex:1;background:var(--primary);opacity:.35;border-radius:2px}
.onda.toca i{animation:vui-onda 1s ease-in-out infinite}
@keyframes vui-onda{0%,100%{opacity:.35}50%{opacity:1}}
[data-motion="reduce"] .onda.toca i{animation:none;opacity:.8}

/* Quiosque (tela aberta pelo QR, sem login): escuro fixo, alvos de toque grandes. Use num <body class="quiosque"> */
.quiosque{background:#0f1014;color:#f5f5f5;font-size:16px;min-height:100vh;-webkit-tap-highlight-color:transparent}
.quiosque .q-cab{padding:1.25rem 1.25rem .75rem;display:flex;align-items:center;gap:.75rem}
.quiosque .q-cab .lg{width:38px;height:38px;border-radius:10px;background:var(--primary);display:grid;place-items:center;font-weight:800;color:var(--primary-inverse)}
.quiosque .q-cab b{display:block;font-size:1.05rem} .quiosque .q-cab span{font-size:.8rem;color:#9a9cae}
.quiosque .q-agora{margin:0 1.25rem 1rem;padding:.85rem;border-radius:16px;background:#1b1c22;display:flex;gap:.85rem;align-items:center}
.quiosque .q-agora .capa{width:56px;height:56px;font-size:1.3rem;border-radius:12px}
.quiosque .q-agora small{font-size:.72rem;color:#9a9cae;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.quiosque .q-agora b{display:block;font-size:1rem;margin-top:.15rem}
.quiosque h3{margin:.5rem 1.25rem .6rem;font-size:1.15rem}
.q-opcao{display:flex;gap:1rem;align-items:center;margin:0 1.25rem .75rem;padding:.75rem;border-radius:18px;background:#1b1c22;border:2px solid transparent;cursor:pointer;transition:transform .1s ease;text-align:left;color:inherit;font:inherit;width:calc(100% - 2.5rem);min-height:64px}
.q-opcao:active{transform:scale(.98)}
.q-opcao .capa{width:84px;height:64px;font-size:1.6rem;border-radius:12px}
.q-opcao b{display:block;font-size:1.05rem;line-height:1.3}
.q-opcao span{font-size:.85rem;color:#9a9cae;font-weight:600}
.q-opcao .q-marca{margin-left:auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#26272f;font-size:1.2rem;flex-shrink:0}
.q-opcao.on{border-color:#f8285a;background:#2a1a20} .q-opcao.on .q-marca{background:#f8285a}
.quiosque .q-ok{margin:.5rem 1.25rem 1rem;padding:1rem;border-radius:16px;background:#12321f;color:#7ee2a8;font-weight:600;display:flex;gap:.6rem;align-items:center}
.quiosque .q-busca{margin:0 1.25rem 1rem;position:relative}
.quiosque .q-busca input{width:100%;padding:1rem 1rem 1rem 2.8rem;border-radius:16px;border:1px solid #30323d;background:#1b1c22;color:#fff;font-size:1rem;font-family:inherit}
.quiosque .q-busca .ti{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:#9a9cae;font-size:1.2rem}
.quiosque .q-rodape{padding:1rem 1.25rem;text-align:center;font-size:.78rem;color:#636674}

/* ---- src/components/tv.css ---- */
/* TV (v0.9, sketch 017): moldura única de 1920×1080 que escala inteira, com tokens escuros próprios,
   escala de severidade (ok / atenção / elevado / crítico / silêncio) e peças de cena legíveis a 3 m.
   Piso: texto ≥ 18px, rótulo ≥ 15px, número de destaque ≥ 64px. Montada por VUI.tv.montar(). */

.vui-tv-host{position:relative;width:100%;height:100%;background:#000;overflow:hidden}
.vui-tv-host.tela{position:fixed;inset:0;z-index:1}
.vui-tv{--tv-bg:#0b0c14;--tv-s1:#12131f;--tv-s2:#181a29;--tv-bd:#262a40;--tv-tx:#eef0fb;--tv-mt:#a3a7c0;--tv-mt2:#7d82a3;
  --ok:#34d399;--watch:#f5c451;--elev:#ff9a4d;--crit:#ff5470;--silencio:#a78bfa;--marca:var(--primary);
  position:absolute;top:0;left:0;width:1920px;height:1080px;transform-origin:0 0;background:var(--tv-bg);color:var(--tv-tx);font-family:Inter,sans-serif;display:grid;grid-template-rows:96px 1fr 64px;overflow:hidden;cursor:none}
.vui-tv *{box-sizing:border-box}
.vui-tv:hover{cursor:default}

/* Cabeçalho */
.tv-cab{display:flex;align-items:center;gap:22px;padding:0 40px;border-bottom:1px solid var(--tv-bd);background:linear-gradient(180deg,#10111c,var(--tv-bg))}
.tv-logo{width:56px;height:56px;border-radius:14px;background:var(--marca);display:grid;place-items:center;font-weight:800;font-size:22px;color:#fff;flex-shrink:0;overflow:hidden}
.tv-logo img{width:100%;height:100%;object-fit:contain}
.tv-ident b{display:block;font-size:30px;font-weight:700;letter-spacing:-.01em;line-height:1.1}
.tv-ident span{font-size:18px;color:var(--tv-mt);font-weight:500}
.tv-chips{display:flex;gap:12px;margin-left:12px}
.tv-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--tv-s2);border:1px solid var(--tv-bd);font-size:17px;font-weight:600;color:var(--tv-mt)}
.tv-chip b{color:var(--tv-tx)}
.tv-chip .mini{width:90px;height:6px;border-radius:99px;background:var(--tv-bd);overflow:hidden}
.tv-chip .mini i{display:block;height:100%;background:var(--marca)}
.tv-dir{margin-left:auto;display:flex;align-items:center;gap:26px}
.tv-estado{display:inline-flex;align-items:center;gap:10px;font-size:17px;font-weight:600;padding:8px 14px;border-radius:999px}
.tv-estado.vivo{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.tv-estado.velho{color:var(--watch);background:color-mix(in srgb,var(--watch) 14%,transparent)}
.tv-estado.fora{color:var(--crit);background:color-mix(in srgb,var(--crit) 14%,transparent)}
.tv-estado .tv-dot{width:10px;height:10px;border-radius:50%;background:currentColor;position:relative}
.tv-estado.vivo .tv-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid currentColor;animation:vui-tvp 1.6s ease-out infinite}
@keyframes vui-tvp{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.tv-clima{font-size:20px;font-weight:600;color:var(--tv-mt);display:flex;align-items:center;gap:8px}
.tv-clima .ti{font-size:28px;color:var(--watch)}
.tv-hora{text-align:right}
.tv-hora b{display:block;font-size:40px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.tv-hora span{font-size:16px;color:var(--tv-mt);font-weight:500}

/* Palco e cena (crossfade) */
.tv-palco{position:relative;overflow:hidden}
.tv-cena{position:absolute;inset:0;padding:36px 40px 28px;opacity:0;transition:opacity .8s ease;display:flex;flex-direction:column}
.tv-cena.on{opacity:1}
.tv-titulo{display:flex;align-items:baseline;gap:18px;margin-bottom:26px}
.tv-titulo h1{margin:0;font-size:44px;font-weight:800;letter-spacing:-.02em}
.tv-titulo span{font-size:22px;color:var(--tv-mt);font-weight:500}
.tv-faixa{position:absolute;left:40px;right:40px;bottom:20px;display:flex;align-items:center;gap:14px;padding:14px 20px;border-radius:14px;font-size:19px;font-weight:600;z-index:5}
.tv-faixa.velho{background:color-mix(in srgb,var(--watch) 16%,var(--tv-s1));color:var(--watch);border:1px solid color-mix(in srgb,var(--watch) 35%,transparent)}
.tv-faixa.fora{background:color-mix(in srgb,var(--crit) 16%,var(--tv-s1));color:#ffc2cd;border:1px solid color-mix(in srgb,var(--crit) 40%,transparent)}
.tv-faixa .ti{font-size:28px}
.tv-vazio{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;color:var(--tv-mt);font-size:24px}
.tv-vazio .ti{font-size:80px;color:var(--tv-bd)}
.tv-vazio b{font-size:36px;color:var(--tv-tx)}

/* Rodapé: progresso + ticker + som */
.tv-rod{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:0 28px;border-top:1px solid var(--tv-bd);background:var(--tv-s1)}
.tv-prog{display:flex;align-items:center;gap:14px}
.tv-prog .segs{display:flex;gap:6px}
.tv-prog .segs i{width:46px;height:8px;border-radius:99px;background:var(--tv-bd);overflow:hidden;position:relative}
.tv-prog .segs i.feito{background:color-mix(in srgb,var(--marca) 55%,var(--tv-bd))}
.tv-prog .segs i b{position:absolute;inset:0;width:0;background:var(--marca)}
.tv-prog .nome{font-size:18px;font-weight:600;color:var(--tv-mt);white-space:nowrap}
.tv-prog .nome b{color:var(--tv-tx)}
.tv-prog .pausa{font-size:16px;font-weight:700;color:var(--watch);display:inline-flex;gap:6px;align-items:center}
.tv-ticker{overflow:hidden;white-space:nowrap;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.tv-ticker .rolo{display:inline-block;padding-left:100%;animation:vui-tick var(--dur,48s) linear infinite;font-size:20px;font-weight:500;color:var(--tv-mt)}
.tv-ticker .rolo b{color:var(--watch);font-weight:700;margin-right:10px}
.tv-ticker .rolo .sep{margin:0 22px;color:var(--tv-bd)}
@keyframes vui-tick{to{transform:translateX(-100%)}}
.tv-som{display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;border-radius:999px;background:var(--tv-s2);border:1px solid var(--tv-bd)}
.tv-som[hidden]{display:none}
.tv-som .capa{width:40px;height:40px;border-radius:10px;font-size:20px}
.tv-som b{display:block;font-size:16px;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-som span{font-size:14px;color:var(--tv-mt);font-weight:600}
.tv-som .voz{display:flex;align-items:center;gap:3px;height:24px}
.tv-som .voz i{width:4px;border-radius:2px;background:var(--silencio);animation:vui-vz 1s ease-in-out infinite}
.tv-som .voz i:nth-child(2){animation-delay:.15s}.tv-som .voz i:nth-child(3){animation-delay:.3s}.tv-som .voz i:nth-child(4){animation-delay:.45s}
@keyframes vui-vz{0%,100%{height:6px}50%{height:22px}}

/* Peças de cena */
.tv-kpis{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:22px}
.tv-kpi{background:var(--tv-s1);border:1px solid var(--tv-bd);border-radius:20px;padding:26px 28px;position:relative;overflow:hidden}
.tv-kpi::before{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:var(--c,var(--marca))}
.tv-kpi span{display:block;font-size:20px;color:var(--tv-mt);font-weight:600}
.tv-kpi b{display:block;font-size:72px;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin-top:6px;font-variant-numeric:tabular-nums}
.tv-kpi small{display:block;font-size:18px;color:var(--tv-mt);font-weight:500;margin-top:4px}
.tv-sobe{color:var(--ok)} .tv-desce{color:var(--crit)}
.tv-linha{display:grid;grid-template-columns:16px 1fr auto;gap:18px;align-items:center;padding:18px 22px;border-radius:16px;background:var(--tv-s1);border:1px solid var(--tv-bd);margin-bottom:12px}
.tv-linha .d{width:16px;height:16px;border-radius:50%;background:var(--c,var(--marca))}
.tv-linha b{display:block;font-size:26px;font-weight:700}
.tv-linha span{font-size:19px;color:var(--tv-mt);font-weight:500}
.tv-linha .v{font-size:38px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--c,var(--tv-tx))}
.tv-tag{display:inline-block;font-size:15px;font-weight:800;padding:3px 9px;border-radius:7px;margin-left:8px;vertical-align:middle;letter-spacing:.04em;background:var(--c,var(--marca));color:#fff}
.tv-barra{display:grid;grid-template-columns:260px 1fr 220px;gap:26px;align-items:center;margin-bottom:16px}
.tv-barra .nm{font-size:26px;font-weight:700}
.tv-barra .bw{height:58px;border-radius:14px;background:var(--tv-s1);overflow:hidden}
.tv-barra .bw i{display:flex;align-items:center;height:100%;padding-left:20px;font-size:26px;font-weight:800;color:#0b0c14;background:var(--c,var(--watch));border-radius:14px}
.tv-barra .vl{font-size:30px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.tv-ok{--c:var(--ok)} .tv-atencao{--c:var(--watch)} .tv-elevado{--c:var(--elev)} .tv-critico{--c:var(--crit)} .tv-silencio{--c:var(--silencio)}

/* ---- src/layouts/shell.css ---- */
/* ============================================================
   Shell: estrutura comum + 3 layouts escolhidos por usuário
     .app.l-escuro  (A, padrão)  sidebar preta, título no header
     .app.l-toolbar (B)          sidebar #1e1e2d + faixa de toolbar
     .app.l-claro   (C)          sidebar clara, recolhível
   + layout público (.app-public) para telas abertas por link.
   A raiz .vui-root é o container das container queries: o responsivo
   reage à largura da área do app, não da janela.
   ============================================================ */
.vui-root{container-type:inline-size;height:100vh;background:var(--bg-app)}
.app{display:flex;height:100%;position:relative;overflow:hidden}
.sb{width:var(--sidebar-w);flex-shrink:0;display:flex;flex-direction:column;transition:width .2s ease,transform .25s ease;z-index:50}
.main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:auto}
.hd{height:var(--header-h);flex-shrink:0;display:flex;align-items:center;gap:1rem;padding:0 2rem;background:var(--header-bg);border-bottom:1px solid var(--header-border);position:sticky;top:0;z-index:40}
.content{padding:2rem;flex:1;width:100%;max-width:var(--content-max);margin:0 auto}
.ft{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;padding:1rem 2rem;color:var(--gray-500);font-weight:var(--fw-semibold);font-size:var(--fs-sm)}
.ft a:hover{color:var(--primary)}
.navbar{display:flex;align-items:center;gap:.35rem;margin-left:auto;position:relative}
.navbar .dropdown{top:52px;right:0}
.dot-badge{position:relative} .dot-badge::after{content:"";position:absolute;top:9px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 2px var(--header-bg)}
.page-title h1{margin:0;font-size:var(--fs-xl);font-weight:var(--fw-bolder);color:var(--gray-900);line-height:1.2}
.breadcrumb{display:flex;align-items:center;gap:.35rem;list-style:none;margin:0 0 .35rem;padding:0;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--gray-600)}
/* Título longo no header não empurra o navbar para fora da tela (celular) */
.page-title{min-width:0}
.page-title h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.breadcrumb li{white-space:nowrap}
.breadcrumb{overflow:hidden}
.breadcrumb a:hover{color:var(--primary)}
.breadcrumb .ti{font-size:.95rem}
.breadcrumb li:last-child{color:var(--gray-500)}
.mobile-toggle{display:none}
.scrim{display:none}
.ws-logo{width:40px;height:40px;border-radius:var(--radius);background:var(--primary);color:var(--primary-inverse);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.05rem;letter-spacing:-.03em;flex-shrink:0;overflow:hidden}
.ws-logo img{width:100%;height:100%;object-fit:contain}

/* Menu lateral */
.sb-nav{flex:1;overflow-y:auto;scrollbar-width:thin}
.menu{padding:0 .75rem}
.menu-section{padding:1.4rem 1rem .5rem;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;font-weight:var(--fw-bold)}
.menu-link{display:flex;align-items:center;gap:.8rem;padding:.6rem 1rem;margin:.1rem 0;border-radius:var(--radius);font-weight:var(--fw-semibold);cursor:pointer;transition:all .15s ease;white-space:nowrap}
.menu-icon{display:inline-flex;width:1.75rem;justify-content:center;flex-shrink:0} .menu-icon .ti{font-size:1.4rem}
.menu-title{flex:1;overflow:hidden;text-overflow:ellipsis}
.menu-arrow{transition:transform .2s ease;font-size:1rem}
.menu-item.open>.menu-link .menu-arrow{transform:rotate(90deg)}
.menu-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s ease}
.menu-item.open>.menu-sub{grid-template-rows:1fr}
.menu-sub>div{overflow:hidden}
.menu-sub .menu-link{padding:.5rem 1rem .5rem 1.4rem}
.menu-sub .menu-sub .menu-link{padding-left:2.6rem}
.menu-sub .menu-item.open>.menu-link .menu-arrow{transform:rotate(90deg)}
.bullet{display:inline-flex;width:1.75rem;justify-content:center;flex-shrink:0}
.bullet::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.6}
.menu-count{font-size:var(--fs-xs);font-weight:var(--fw-bold);padding:.15rem .45rem;border-radius:var(--radius-sm)}

/* ---------- A: sidebar escura (demo39) ---------- */
.l-escuro .sb{background:var(--sidebar-bg);color:var(--sidebar-text)}
.l-escuro .sb-head{padding:2rem 1.5rem 1rem}
.ws-btn{width:100%;display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;border-radius:var(--radius);text-align:left}
.ws-name{display:block;color:#fff;font-weight:var(--fw-bold);font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.04em}
.ws-sub{display:block;color:#636674;font-weight:var(--fw-bold);font-size:var(--fs-sm)}
.l-escuro .sb-nav{padding:1rem 0;scrollbar-color:#2a2a2a transparent}
.l-escuro .menu-link{color:var(--sidebar-text)}
.l-escuro .menu-link:hover{color:#fff;background:var(--sidebar-hover)}
.l-escuro .menu-link.active{color:#fff;background:var(--sidebar-active)}
.l-escuro .menu-link.active .menu-icon,.l-escuro .menu-link:hover .menu-icon{color:var(--primary)}
.l-escuro .menu-section{color:#4b4d57}
.l-escuro .menu-count{background:#1f2129;color:#9a9cae}
.l-escuro .sb-foot{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.75rem 1.75rem;border-top:1px solid var(--sidebar-border);position:relative}
.l-escuro .sb-foot .dropdown{bottom:70px;left:16px;top:auto;right:auto}

/* ---------- B: com toolbar (demo1) ---------- */
.l-toolbar .sb{background:#1e1e2d;color:#9d9da6}
[data-theme="dark"] .l-toolbar .sb{background:#0d0e12}
.l-toolbar .sb-head{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;border-bottom:1px dashed #393945}
.l-toolbar .logo{display:flex;align-items:center;gap:.6rem;color:#fff;font-weight:var(--fw-bolder);font-size:1.2rem;letter-spacing:-.02em}
.l-toolbar .logo .ws-logo{width:32px;height:32px;font-size:.85rem}
.l-toolbar .sb-nav{padding:.5rem 0 1.5rem;scrollbar-color:#2b2b40 transparent}
.l-toolbar .menu-section{color:#565674}
.l-toolbar .menu-link{color:#9d9da6}
.l-toolbar .menu-link:hover{color:#fff}
.l-toolbar .menu-link:hover .menu-icon{color:var(--primary)}
.l-toolbar .menu-link.active{background:#2a2a3c;color:#fff}
.l-toolbar .menu-link.active .menu-icon{color:var(--primary)}
.l-toolbar .menu-count{background:#2b2b40;color:#9d9da6}
.l-toolbar .min-btn{width:30px;height:30px;border-radius:var(--radius);background:#2b2b40;color:#9d9da6;border:0;display:flex;align-items:center;justify-content:center}
.l-toolbar .min-btn:hover{color:var(--primary)}
.l-toolbar.min .min-btn .ti{transform:rotate(180deg)}
.l-toolbar.min .sb-head{justify-content:center;padding:0}
.l-toolbar.min .sb-head .logo{display:none}
.l-toolbar .toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding:1.5rem 2rem;background:var(--surface);border-bottom:1px solid var(--border)}
.l-toolbar .toolbar .breadcrumb{margin:.35rem 0 0}
.l-toolbar .hd .search-wrap .form-control{width:300px}

/* ---------- C: sidebar clara ---------- */
.l-claro .sb{background:var(--surface);border-right:1px solid var(--border)}
.l-claro .sb-head{height:var(--header-h);display:flex;align-items:center;gap:.65rem;padding:0 1.5rem;border-bottom:1px solid var(--border);font-weight:var(--fw-bolder);color:var(--gray-900);font-size:1.15rem}
.l-claro .sb-head .ws-logo{width:34px;height:34px;font-size:.85rem}
.l-claro .sb-nav{padding:1rem 0}
.l-claro .menu-section{color:var(--gray-500)}
.l-claro .menu-link{color:var(--gray-700)}
.l-claro .menu-link:hover{background:var(--gray-100);color:var(--primary)}
.l-claro .menu-link.active{background:var(--primary-light);color:var(--primary)}
.l-claro .menu-link .menu-icon{color:var(--gray-500)}
.l-claro .menu-link:hover .menu-icon,.l-claro .menu-link.active .menu-icon{color:var(--primary)}
.l-claro .menu-count{background:var(--gray-100);color:var(--gray-600)}
.l-claro .sb-card{margin:1rem;padding:1.1rem;border-radius:var(--radius-lg);background:var(--primary-light);color:var(--primary);font-weight:var(--fw-semibold);font-size:var(--fs-sm)}
.l-claro .sb-card b{display:block;color:var(--gray-900);font-size:var(--fs-base);margin-bottom:.25rem}
.l-claro.min .sb-head{justify-content:center;padding:0}
.l-claro.min .sb-head span,.l-claro.min .sb-card{display:none}
.user-chip{display:flex;align-items:center;gap:.65rem;padding:.3rem .4rem .3rem .3rem;border-radius:var(--radius);cursor:pointer}
.user-chip:hover{background:var(--gray-100)}

/* Menu recolhido (B e C) */
.app.min .sb{width:var(--sidebar-w-min)}
.app.min .sb .menu-title,.app.min .sb .menu-arrow,.app.min .sb .menu-section,.app.min .sb .menu-sub,.app.min .sb .menu-count{display:none}

/* ---------- Layout público (sem menu): telas abertas por link com token ---------- */
.app-public{height:100%;overflow:auto;background:var(--bg-app);display:flex;flex-direction:column}
.pub-hd{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 2rem;background:var(--header-bg);border-bottom:1px solid var(--header-border)}
.pub-brand{display:flex;align-items:center;gap:.75rem}
.pub-brand b{display:block;color:var(--gray-900);font-weight:var(--fw-bolder)}
.pub-brand span:not(.ws-logo){display:block;color:var(--gray-500);font-size:var(--fs-sm);font-weight:var(--fw-semibold)}
.pub-help{display:inline-flex;align-items:center;gap:.4rem;color:var(--gray-600);font-weight:var(--fw-semibold);font-size:var(--fs-sm);margin-right:.5rem}
.pub-content{flex:1;width:100%;max-width:var(--content-max);margin:0 auto;padding:2rem 3rem}

/* ---------- Densidade compacta ---------- */
[data-density="compacta"]{--fs-base:.875rem}
[data-density="compacta"] .table td{padding:.55rem .75rem}
[data-density="compacta"] .table th{padding:.6rem .75rem}
[data-density="compacta"] .card-body{padding:1.1rem 1.5rem}
[data-density="compacta"] .card-header{min-height:56px;padding:.5rem 1.5rem}
[data-density="compacta"] .btn{padding:.5rem .9rem}
[data-density="compacta"] .btn-icon{padding:0}
[data-density="compacta"] .form-control{padding:.5rem .85rem}
[data-density="compacta"] .content{padding:1.25rem 1.5rem}
[data-density="compacta"] .hd{height:60px}
[data-density="compacta"] .menu-link{padding:.45rem 1rem}
[data-density="compacta"] .grid-stats{gap:1rem}
[data-density="compacta"] .stat{padding:1.1rem 1.25rem}
[data-density="compacta"] .fv-row{margin-bottom:1rem}

/* ---------- Responsivo (pela largura da área do app) ---------- */
@container (max-width: 1100px){ .grid-stats{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container (max-width: 991px){
  .sb{position:absolute;top:0;bottom:0;left:0;transform:translateX(-100%)}
  .app.drawer-open .sb{transform:none}
  .app.drawer-open .scrim{display:block;position:absolute;inset:0;background:rgba(0,0,0,.35);z-index:45}
  .mobile-toggle{display:inline-flex}
  .hd{padding:0 1rem} .content{padding:1.25rem} .l-toolbar .toolbar{padding:1.25rem}
  .hide-mobile{display:none!important}
  .app.min .sb{width:var(--sidebar-w)}
  .row-3{grid-template-columns:minmax(0,1fr)}
}
@container (max-width: 600px){
  .grid-stats{grid-template-columns:1fr}
  .card-header,.card-body{padding-left:1.25rem;padding-right:1.25rem}
  .card-toolbar{flex-wrap:wrap}
  .search-wrap .form-control{width:100%}
  .col-hide{display:none}
  .page-title h1{font-size:var(--fs-lg)}
  .row,.opt-cards{grid-template-columns:minmax(0,1fr)}
  .modal-body,.modal-header,.modal-footer,.drawer-body{padding-left:1.25rem;padding-right:1.25rem}
  .sticky-actions{flex-wrap:wrap;padding:.85rem 1rem}
  .sticky-actions>div{flex:1;justify-content:flex-end}
  .pub-hd{padding:.75rem 1rem} .pub-content{padding:1.25rem 1rem}
}