/*
 * IAdvogar — Tokens de design centralizados
 * ------------------------------------------------------------------
 * Antes: cada HTML redeclarava este bloco inteiro dentro de um
 * <style type="text/tailwindcss"> próprio (drift real: --radius era
 * 0.75rem em clients.html, 0.5rem em auth/subscription e ausente em
 * dashboard.html). Agora todo HTML carrega este arquivo via
 * <link rel="stylesheet"> e mantém no próprio <style> só o que for
 * específico daquela página.
 *
 * IMPORTANTE — mecanismo de tema: os valores abaixo em :root são o
 * tema ESCURO (padrão da aplicação, <html class="dark">). O tema claro
 * e as variantes "Escuro Suave"/"Claro Suave" vêm LOGO EM SEGUIDA,
 * neste mesmo arquivo — antes ficavam numa string dentro de um
 * React.useEffect de components/Sidebar.js, o que fazia toda tela
 * nascer escura e piscar para clara depois que o Babel compilava, e
 * deixava escuras para sempre as páginas que não carregam o Sidebar
 * (auth, admin, subscription, update-password, index, o portal de
 * documentos, termos e política).
 *
 * Quem escolhe a classe continua sendo o seletor de tema do menu
 * lateral (components/Sidebar.js: classList.toggle('dark', …) +
 * data-theme-variant, gravando em localStorage nas chaves
 * iadvogar_theme_mode / iadvogar_theme). Para a PRIMEIRA pintura,
 * cada .html tem no <head>, antes deste <link>, um <script> síncrono
 * minúsculo que lê essas mesmas chaves e já aplica a classe.
 * Exceção de propósito: index.html (a landing) NÃO tem o script — ela foi
 * desenhada só para o escuro (text-gray-300/400 fixos) e continua escura
 * mesmo para quem salvou o tema claro.
 *
 * A cor de destaque (<style id="accent-color-styles">, injetada em
 * runtime pelo Sidebar) usa os mesmos seletores ":root" e
 * ":root:not(.dark)" com a mesma especificidade e entra no <head>
 * depois deste arquivo — por isso continua vencendo o dourado padrão.
 */

:root {
    --background: #212121;
    --foreground: #ececec;
    --card: #2f2f2f;
    --card-foreground: #ececec;
    --popover: #2f2f2f;
    --popover-foreground: #ececec;
    --primary: #c2a052;
    --primary-foreground: #ffffff;
    --secondary: #2f2f2f;
    --secondary-foreground: #ececec;
    --muted: #2f2f2f;
    --muted-foreground: #b4b4b4;
    --accent: #383838;
    --accent-foreground: #ececec;
    --border: #424242;
    --input: #424242;
    --ring: #c2a052;
    --radius: 0.75rem;
}

/* Tema "Claro" (padrão claro). Paleta com tom quente (papel), revisada
   pra não ficar "estourada" de branco — fundo e cartão ficam mais
   próximos um do outro, com a separação vindo mais da borda do que de
   um salto grande de luminosidade. */
:root:not(.dark) {
    --background: #e8e2d2;
    --foreground: #26211a;
    --card: #f2ecdd;
    --card-foreground: #26211a;
    --popover: #f2ecdd;
    --popover-foreground: #26211a;
    --primary: #ad7f34;
    --primary-foreground: #ffffff;
    --secondary: #ddd4bd;
    --secondary-foreground: #26211a;
    --muted: #ddd4bd;
    --muted-foreground: #6d6252;
    --accent: #ddd4bd;
    --accent-foreground: #26211a;
    --border: #cfc2a0;
    --input: #cfc2a0;
    --ring: #ad7f34;
}

/* Variantes extras de tema ("Escuro Suave" e "Claro Suave"). Usam um
   atributo no <html> (data-theme-variant) combinado com .dark pra ganhar
   mais especificidade do que as paletas padrão acima — assim sempre
   vencem, não importa a ordem. */
:root.dark[data-theme-variant="escuro-suave"] {
    --background: #262220;
    --foreground: #f0ece6;
    --card: #322d2a;
    --card-foreground: #f0ece6;
    --popover: #322d2a;
    --popover-foreground: #f0ece6;
    --secondary: #3a332e;
    --secondary-foreground: #f0ece6;
    --muted: #3a332e;
    --muted-foreground: #b6ac9f;
    --accent: #3d3733;
    --accent-foreground: #f0ece6;
    --border: #4a433d;
    --input: #4a433d;
}
:root:not(.dark)[data-theme-variant="claro-suave"] {
    --background: #e7e5e0;
    --foreground: #2b2a27;
    --card: #f0eee9;
    --card-foreground: #2b2a27;
    --popover: #f0eee9;
    --popover-foreground: #2b2a27;
    --secondary: #dcd9d1;
    --secondary-foreground: #2b2a27;
    --muted: #dcd9d1;
    --muted-foreground: #6b6860;
    --accent: #dcd9d1;
    --accent-foreground: #2b2a27;
    --border: #cac6ba;
    --input: #cac6ba;
}

/* Equivalente ao antigo `@layer base { * { @apply border-[var(--border)] } }`.
   O seletor precisa ser `html *` (e não `*`) porque o preflight do Tailwind
   emite `*, ::before, ::after { border-color: rgb(229,231,235) }` SEM camada
   e DEPOIS deste arquivo no <head>: com `*` puro (especificidade 0,0,0) o
   preflight vencia por ordem e as bordas sem classe de cor voltavam pro cinza
   claro do Tailwind. `html *` (0,0,1) vence o preflight e continua perdendo
   para qualquer classe utilitária (0,1,0). */
html * {
    border-color: var(--border);
}

/* Só o que é 100% igual em toda página (cor/fonte). margin/padding,
   overflow-hidden, antialiased e transition-colors variam de página pra
   página no HTML original (ex.: politica-de-privacidade.html e
   termos-de-uso.html não tinham m-0/p-0) — por isso ficam no <style>
   residual de cada HTML, não aqui, pra não alterar nada visualmente. */
body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* ------------------------------------------------------------------
 * Scrollbar customizada (igual em todas as páginas)
 * ------------------------------------------------------------------ */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--muted-foreground);
}

/* ------------------------------------------------------------------
 * Animações
 * ------------------------------------------------------------------ */
@keyframes fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: fade-in 0.25s ease-out;
}

/* ------------------------------------------------------------------
 * Botões shadcn (hoje só existiam em auth.html/chat.html/subscription.html/
 * update-password.html — mantidos com o mesmo nome e valores para não
 * quebrar quem já usa essas classes)
 * ------------------------------------------------------------------ */
.shadcn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    height: 2.5rem;
    padding: 0.5rem 1rem;
}
.shadcn-btn:active {
    transform: scale(0.98);
}
.shadcn-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--ring);
}
.shadcn-btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}
.shadcn-btn-primary {
    background-color: var(--primary);
    color: var(--primary-foreground);
}
.shadcn-btn-primary:hover {
    opacity: 0.9;
}
.shadcn-btn-secondary {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
}
.shadcn-btn-secondary:hover {
    opacity: 0.8;
}
.shadcn-btn-ghost:hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
}
.shadcn-input {
    display: flex;
    height: 2.5rem;
    width: 100%;
    border-radius: 0.375rem;
    border: 1px solid var(--input);
    background-color: transparent;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}
.shadcn-input::placeholder {
    color: var(--muted-foreground);
}
.shadcn-input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--ring);
}

/* ------------------------------------------------------------------
 * Novos utilitários (D-1): equivalentes às strings Tailwind já usadas
 * à mão nas telas internas (ex.: botão primário de clients-app.js:2230,
 * estado vazio de clients-app.js:2241-2247). Uso gradual — não força
 * refatoração do JSX existente agora.
 * ------------------------------------------------------------------ */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: var(--primary);
    color: var(--primary-foreground);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}
.btn-primary:hover {
    opacity: 0.9;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: var(--card);
    color: var(--foreground);
    border: 1px solid var(--border);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn-secondary:hover {
    background-color: var(--accent);
}

.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: #ef4444; /* red-500, igual ao confirmModal de clients-app.js:4678 */
    color: #ffffff;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}
.btn-danger:hover {
    background-color: #dc2626; /* red-600 */
}

.card {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    background-color: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
}
.badge-success {
    background-color: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}
.badge-danger {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}
.badge-neutral {
    background-color: var(--accent);
    color: var(--muted-foreground);
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
    background-color: var(--card);
    border-radius: 0.75rem;
    border: 1px solid var(--border);
}
.empty-state-icon {
    width: 4rem;
    height: 4rem;
    background-color: var(--background);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    color: var(--muted-foreground);
}
.empty-state-title {
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.empty-state-desc {
    color: var(--muted-foreground);
    margin-bottom: 1rem;
}

/* ------------------------------------------------------------------
 * Fontes da peça no editor (Quill) — pedido do dono: "mais fontes no
 * editor". A lista está em components/RichTextEditorModal.js
 * (EDITOR_FONTES); aqui ficam o DESENHO de cada família no texto
 * (.ql-font-<id>, a classe que o Quill escreve no HTML) e o RÓTULO de
 * cada opção dentro do seletor da barra — sem estas regras o menu
 * mostraria "Sans Serif" e nada mais, porque o CSS do tema Snow só traz
 * rótulo para serif/monospace.
 *
 * P2-1 — cada seletor abaixo começa com `html` DE PROPÓSITO. Na maioria das
 * telas este arquivo é carregado depois do quill.snow.min.css e venceria por
 * ordem, mas em financial.html não há <link> de Quill nenhum: o tema é
 * injetado em RUNTIME (financial-app.js, ensureRichTextEditorLoaded), ou seja,
 * DEPOIS deste arquivo. Com a especificidade empatada quem vencia era o tema,
 * e a barra da Proposta Comercial ficava com os rótulos e os ícones do Snow.
 * O `html` (um seletor de tipo a mais) faz estas regras vencerem em qualquer
 * ordem, e continua perdendo para qualquer classe utilitária.
 *
 * A família padrão (Arial) é a AUSÊNCIA de classe: ela é aplicada no
 * próprio .ql-editor pelo JS, não por uma classe de trecho.
 * ------------------------------------------------------------------ */
html .ql-font-times { font-family: 'Times New Roman', Times, serif; }
html .ql-font-calibri { font-family: Calibri, Candara, 'Segoe UI', sans-serif; }
html .ql-font-georgia { font-family: Georgia, 'Times New Roman', serif; }
html .ql-font-garamond { font-family: Garamond, 'EB Garamond', 'Times New Roman', serif; }
html .ql-font-courier { font-family: 'Courier New', Courier, monospace; }

/* O seletor precisa caber "Times New Roman" — o padrão do tema Snow tem
   108px e cortava o nome no meio. */
html .ql-snow .ql-picker.ql-font {
    width: 148px;
}
html .ql-snow .ql-picker.ql-font .ql-picker-label::before,
html .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: 'Arial';
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
html .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="times"]::before,
html .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="times"]::before {
    content: 'Times New Roman';
    font-family: 'Times New Roman', Times, serif;
}
html .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="calibri"]::before,
html .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="calibri"]::before {
    content: 'Calibri';
    font-family: Calibri, Candara, 'Segoe UI', sans-serif;
}
html .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="georgia"]::before,
html .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="georgia"]::before {
    content: 'Georgia';
    font-family: Georgia, 'Times New Roman', serif;
}
html .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="garamond"]::before,
html .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="garamond"]::before {
    content: 'Garamond';
    font-family: Garamond, 'EB Garamond', 'Times New Roman', serif;
}
html .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="courier"]::before,
html .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="courier"]::before {
    content: 'Courier New';
    font-family: 'Courier New', Courier, monospace;
}

/* ------------------------------------------------------------------
 * AUD-1.12 — "Alinhar à esquerda" de verdade
 * ------------------------------------------------------------------
 * A folha do editor é JUSTIFICADA por padrão (é o padrão de uma peça, e
 * é o que utils/export.js gera). No Quill 1.3.6, "esquerda" era a
 * AUSÊNCIA de classe — ou seja, era o próprio padrão: o parágrafo
 * alinhado à esquerda era salvo sem marca nenhuma e reabria justificado.
 * Agora 'left' entra na whitelist do formato `align`
 * (registrarAlinhamentoEsquerda, em components/RichTextEditorModal.js) e
 * vira esta classe, que o tema Snow não traz.
 * ------------------------------------------------------------------ */
html .ql-editor .ql-align-left {
    text-align: left;
}

/* ------------------------------------------------------------------
 * AUD-1.22 — TEMA ESCURO DA BARRA DO QUILL
 * ------------------------------------------------------------------
 * O tema Snow fixa stroke/color em #444 (cinza-escuro). Todas as
 * páginas do sistema abrem com <html class="dark"> e a barra foi movida
 * para um contêiner de fundo escuro (toolbarSlotRef), então os ícones
 * ficavam praticamente invisíveis. Aqui eles passam a seguir as
 * variáveis do projeto — e, como são as MESMAS variáveis nos dois temas,
 * a barra continua certa no claro.
 * P2-1 — o `html` na frente de cada seletor é o que faz estas regras valerem
 * TAMBÉM em financial.html, onde o quill.snow.min.css é injetado em runtime
 * (depois deste arquivo) e, com a especificidade empatada, vencia por ordem:
 * os ícones da barra continuavam #444 sobre fundo escuro.
 * ------------------------------------------------------------------ */
html .ql-snow .ql-stroke,
html .ql-snow .ql-stroke-miter {
    stroke: var(--foreground);
}
html .ql-snow .ql-fill,
html .ql-snow .ql-stroke.ql-fill {
    fill: var(--foreground);
}
html .ql-snow .ql-picker,
html .ql-snow .ql-picker-label,
html .ql-snow .ql-picker-item {
    color: var(--foreground);
}
html .ql-snow .ql-picker-label,
html .ql-snow.ql-toolbar button {
    border-radius: 6px;
}
/* Lista suspensa (Fonte, Título, Alinhamento) sobre o fundo do cartão,
   e não sobre o branco fixo do tema. */
html .ql-snow .ql-picker-options {
    background-color: var(--card);
    border-color: var(--border);
    color: var(--foreground);
}
html .ql-snow .ql-picker.ql-expanded .ql-picker-label {
    border-color: var(--border);
}
/* Passar o mouse e a opção escolhida: destaque discreto, sem o azul
   fixo do tema. */
html .ql-snow.ql-toolbar button:hover,
html .ql-snow .ql-picker-item:hover,
html .ql-snow .ql-picker-label:hover {
    background-color: var(--accent);
    color: var(--foreground);
}
html .ql-snow.ql-toolbar button:hover .ql-stroke,
html .ql-snow .ql-picker-label:hover .ql-stroke,
html .ql-snow .ql-picker-item:hover .ql-stroke {
    stroke: var(--foreground);
}
html .ql-snow.ql-toolbar button:hover .ql-fill,
html .ql-snow .ql-picker-label:hover .ql-fill,
html .ql-snow .ql-picker-item:hover .ql-fill {
    fill: var(--foreground);
}
/* Formato ATIVO no trecho onde o cursor está. */
html .ql-snow.ql-toolbar button.ql-active,
html .ql-snow .ql-picker-item.ql-selected,
html .ql-snow .ql-picker-label.ql-active {
    color: var(--primary);
}
html .ql-snow.ql-toolbar button.ql-active .ql-stroke,
html .ql-snow .ql-picker-item.ql-selected .ql-stroke,
html .ql-snow .ql-picker-label.ql-active .ql-stroke {
    stroke: var(--primary);
}
html .ql-snow.ql-toolbar button.ql-active .ql-fill,
html .ql-snow .ql-picker-item.ql-selected .ql-fill,
html .ql-snow .ql-picker-label.ql-active .ql-fill {
    fill: var(--primary);
}

/* ------------------------------------------------------------------
 * P-R1 — BOTÕES DE RECUO (sublista) NA BARRA DO QUILL
 * ------------------------------------------------------------------
 * "Aumentar/Diminuir recuo" só valem dentro de um item de lista (e o
 * teto é o 3º nível, que é o que o Salvar e a exportação guardam), então
 * eles ganham `disabled` conforme o cursor — quem liga e desliga é
 * atualizarBotoesDeRecuo(), em components/RichTextEditorModal.js. O tema
 * Snow não prevê botão desligado: sem isto, o botão apagado continuaria
 * acendendo no hover, como se ainda fizesse alguma coisa.
 * ------------------------------------------------------------------ */
html .ql-snow.ql-toolbar button[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}
html .ql-snow.ql-toolbar button[disabled]:hover {
    background-color: transparent;
}
html .ql-snow.ql-toolbar button[disabled]:hover .ql-stroke {
    stroke: var(--foreground);
}
html .ql-snow.ql-toolbar button[disabled]:hover .ql-fill {
    fill: var(--foreground);
}

/* ------------------------------------------------------------------
 * P-R1 — A BARRA DO EDITOR NO CELULAR
 * ------------------------------------------------------------------
 * Fonte + Título + negrito/itálico/sublinhado + alinhamento + duas
 * listas + dois recuos + limpar não cabem em 375 px.
 *
 * R6-P0-1 — NADA DE `overflow` AQUI. A barra chegou a ROLAR DE LADO,
 * mas o Quill Snow abre as listas suspensas (Fonte, Título, Alinhamento)
 * com `position: absolute; top: 100%` dentro do `.ql-picker`: qualquer
 * ancestral com overflow diferente de `visible` RECORTA esse popup, e os
 * três seletores ficavam inutilizáveis no celular. E não adianta pedir
 * `overflow-y: visible` com `overflow-x: auto` — pela especificação o
 * navegador converte o eixo `visible` em `auto` quando o outro rola.
 *
 * Então a barra QUEBRA EM LINHAS (flex-wrap) com os grupos compactos:
 * são ~34 px a mais empurrando a folha para baixo, muito menos ruim do
 * que um seletor de fonte que não abre. Todos os botões (inclusive os
 * dois de recuo) continuam visíveis, sem rolagem escondida.
 * A classe vem do slot em RichTextEditorModal.js.
 * ------------------------------------------------------------------ */
@media (max-width: 639px) {
    html .editor-barra-quill .ql-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        row-gap: 4px;
    }
    html .editor-barra-quill .ql-toolbar .ql-formats {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        margin-right: 8px;
    }
}

/* ==========================================================
   Faixa de aviso de manutenção programada
   ==========================================================
   components/Sidebar.js publica a altura da faixa amarela em
   --faixa-manutencao (0px quando não há aviso). A faixa é "fixed" no topo
   e cobriria o cabeçalho de cada tela, então o shell de cada página
   reserva esse espaço no topo. Com box-sizing: border-box (preflight do
   Tailwind), a altura total continua 100dvh — só a área de conteúdo
   encolhe.

   Os shells das telas internas são sempre um filho direto de #root com
   "flex h-[100dvh] ..." (dashboard, clientes, financeiro, prazos,
   modelos, estúdio, casos, relatórios, notícias, calculadora, perfil,
   notificações, secretária, chat) ou "flex h-screen ..." (parceiros). */
:root { --faixa-manutencao: 0px; }

body > #root > .h-screen,
body > #root > [class*="h-[100dvh]"] {
    padding-top: var(--faixa-manutencao, 0px);
}

/* ==========================================================
   Largura da barra lateral (--sidebar-w) e trilho de ícones
   ==========================================================
   CONTRATO COM AS TELAS: a largura da barra lateral NÃO é mais o
   literal 260px. Quem precisar deslocar algo pela barra (uma faixa
   fixa no topo, um cabeçalho grudado, um rodapé de ações) usa
   `md:left-[var(--sidebar-w)]` / `md:pl-[var(--sidebar-w)]` —
   nunca `md:left-[260px]`.

   Entre 768px e 1279.98px (tablet deitado, notebook pequeno, janela
   não maximizada) a barra vira um TRILHO só de ícones de 4.5rem
   (72px): assim a tela ganha ~188px e para de cortar cabeçalho, abas
   e botões. A partir de 1280px a barra volta aos 260px de sempre, e
   abaixo de 768px ela continua sendo a gaveta que desliza por cima
   (largura própria, w-[min(280px,86vw)], não usa esta variável).

   Faixas de conteúdo disponíveis para as telas, já descontada a barra:
   690px em 768 → 1200px em 1279 (trilho) e 1020px em 1280 (barra
   inteira de volta). */
:root { --sidebar-w: 260px; }

@media (min-width: 768px) and (max-width: 1279.98px) {
    :root { --sidebar-w: 4.5rem; }
}

/* Esconde a barra de rolagem SEM tirar a rolagem — para faixas de
   abas que passam do tamanho da tela e rolam na horizontal (o
   "arrasta para o lado" continua valendo, só não aparece a barrinha
   cortando o desenho). Chrome/Safari pelo pseudo-elemento, Firefox
   por scrollbar-width, Edge antigo por -ms-overflow-style. */
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* ==========================================================
   Guia contextual por tela (components/GuiaTela.js)
   ==========================================================
   Duas peças: o PAINEL "Como funciona" (gaveta à direita no desktop,
   folha inferior no celular) e o TOUR guiado (máscara escura com
   recorte no elemento em destaque + cartão explicativo ao lado).

   Por que CSS aqui e não só Tailwind: as animações de entrada
   (gaveta/folha/cartão), o recorte da máscara e a transição suave do
   quadrado de destaque não se escrevem com classes utilitárias. As
   cores saem todas das variáveis de tema já definidas neste arquivo,
   então os quatro temas (escuro, escuro suave, claro, claro suave)
   funcionam sem regra extra.

   Camadas: o painel e o tour usam z-index 120 (o Guia de Uso do menu
   lateral usa 110 e os modais das telas usam 100), para ficarem por
   cima de tudo quando abertos. */

@keyframes guia-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes guia-entra-direita {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes guia-entra-baixo {
    from { opacity: 0; transform: translateY(32px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes guia-entra-cartao {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

/* Fundo escurecido, comum ao painel e ao tour */
.guia-fundo {
    animation: guia-fade 0.18s ease-out;
}

/* Gaveta do painel: entra pela direita no desktop, de baixo no celular */
.guia-painel {
    animation: guia-entra-direita 0.22s ease-out;
}
@media (max-width: 639px) {
    .guia-painel {
        animation: guia-entra-baixo 0.24s ease-out;
    }
}

/* ---------- Tour ----------
   A máscara é feita com QUATRO retângulos (topo, base, esquerda,
   direita) em volta do alvo, em vez de um box-shadow gigante no
   próprio elemento: assim não se depende do "stacking context" nem do
   overflow do elemento destacado (vários ficam dentro de listas com
   rolagem, onde o box-shadow seria cortado). O buraco no meio fica
   clicável e visível sem alterar nada no elemento original. */
.guia-tour-mascara {
    position: fixed;
    background: rgba(0, 0, 0, 0.62);
    z-index: 230;
    transition: all 0.18s ease-out;
}
:root:not(.dark) .guia-tour-mascara {
    background: rgba(15, 15, 15, 0.45);
}

/* Moldura em volta do alvo (só visual, não captura clique) */
.guia-tour-recorte {
    position: fixed;
    z-index: 231;
    pointer-events: none;
    border-radius: 0.6rem;
    border: 2px solid var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent);
    transition: all 0.18s ease-out;
}

/* Cartão com o texto do passo */
.guia-tour-cartao {
    position: fixed;
    z-index: 232;
    width: min(340px, calc(100vw - 32px));
    background: var(--card);
    color: var(--foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
    animation: guia-entra-cartao 0.16s ease-out;
}

/* Quem pediu menos movimento no sistema não recebe nenhuma animação —
   tudo aparece direto, já no lugar final. */
@media (prefers-reduced-motion: reduce) {
    .guia-fundo,
    .guia-painel,
    .guia-tour-cartao {
        animation: none;
    }
    .guia-tour-mascara,
    .guia-tour-recorte {
        transition: none;
    }
}

/* ==========================================================
   Responsividade global (Auditoria 4 — 1ª passada)
   ==========================================================
   Regras que valem para TODAS as telas e que não dá para escrever
   com classes utilitárias tela a tela. Ficam aqui, no fim do
   arquivo, para vencerem por ordem o que vier antes — e, onde o
   Tailwind do CDN (injetado depois deste <link>) empataria em
   especificidade, os seletores começam com "html " de propósito.

   --------------------------------------------------------
   1) Área segura (iPhone com barra de gestos / notch)
   --------------------------------------------------------
   Todos os .html passaram a ter viewport-fit=cover: sem isto o
   conteúdo passa a desenhar POR BAIXO do indicador de gestos e da
   faixa de status. As variáveis abaixo dão a medida pronta para
   quem precisar, e --fab-bottom ganha o recuo de baixo por padrão.

   --fab-bottom: contrato entre as telas com barra fixa no rodapé
   (Chat em app.js, Estúdio em StudioShell.js) e qualquer elemento
   flutuante ancorado embaixo. Essas telas publicam um valor PRÓPRIO
   em style inline no <html>, que sempre vence esta regra; onde
   ninguém publica, vale este padrão, que já soma a área segura em
   vez do literal 6rem colado no indicador de gestos. (Hoje a
   bolinha do Assistente está ancorada no meio da lateral direita,
   não no rodapé, então ninguém consome a variável — ela continua
   publicada porque é o que mede a barra inferior de cada tela.) */
:root {
    --area-segura-b: env(safe-area-inset-bottom, 0px);
    --area-segura-t: env(safe-area-inset-top, 0px);
    --area-segura-l: env(safe-area-inset-left, 0px);
    --area-segura-r: env(safe-area-inset-right, 0px);
    --fab-bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
}

/* Utilitárias para barras/folhas grudadas nas bordas. Somem sozinhas
   em aparelho sem notch, porque env() vale 0px lá.

   O prefixo "html" existe por causa da ORDEM: o Tailwind do CDN injeta
   o <style> dele DEPOIS deste <link>, então uma classe simples aqui
   perderia para um "p-3" no mesmo elemento. Justamente por isso estas
   utilitárias só devem ir em elemento SEM padding do Tailwind naquele
   lado — quando há um, o lugar certo é um style inline com
   calc(<base> + env(...)), que vence os dois. */
html .area-segura-inferior { padding-bottom: env(safe-area-inset-bottom, 0px); }
html .area-segura-superior { padding-top: env(safe-area-inset-top, 0px); }
html .area-segura-lados {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* --------------------------------------------------------
   2) 100dvh / 100svh com plano B
   --------------------------------------------------------
   Navegador antigo simplesmente DESCARTA a declaração com dvh/svh e
   o elemento fica com altura automática — o shell de tela cheia
   desmonta. Declarar vh antes e dvh depois, na mesma regra, resolve
   nos dois mundos. O seletor usa ~= (palavra exata) e não *=, senão
   "min-h-[100dvh]" também casaria e ganharia altura fixa. */
html [class~="h-[100dvh]"] { height: 100vh; height: 100dvh; }
html [class~="min-h-[100dvh]"] { min-height: 100vh; min-height: 100dvh; }
html [class~="min-h-[100svh]"] { min-height: 100vh; min-height: 100svh; }

/* --------------------------------------------------------
   3) Alvo de toque mínimo (G10 / WCAG 2.5.5)
   --------------------------------------------------------
   Só em aparelho de toque (pointer: coarse) — no computador, com
   mouse, os botões de 24px continuam iguais, para não inchar as
   telas densas. Botões de ícone com p-1/p-1.5 espalhados pelo
   sistema (76 deles) passam a ter 44px de área clicável sem mudar
   o desenho: o ícone continua do mesmo tamanho, o que cresce é a
   caixa.

   Exceções de propósito:
   - .ql-toolbar (barra do Quill): 11 controles × 44px viraria 3
     linhas e comeria a folha justamente no celular, onde ela já é
     apertada. Fica para a 2ª passada, junto com a reforma da barra.
   - .alvo-compacto: escotilha de saída para casos pontuais
     (fichas de cor, contadores) que não devem crescer. */
@media (pointer: coarse) {
    html button:not(.alvo-compacto):not([class*="text-[9px]"]):not([class*="text-[10px]"]):not([class*="text-[11px]"]):not([class*="py-0.5"]):not([class*="py-1 "]),
    html a[role="button"]:not(.alvo-compacto),
    html [role="tab"]:not(.alvo-compacto),
    html summary:not(.alvo-compacto) {
        min-height: 44px;
        min-width: 44px;
    }
    /* A exceção do Quill vem como regra SEPARADA (e não como
       :not(.ql-toolbar button) na de cima) porque :not() com
       combinador é Selectors 4: em navegador antigo o seletor
       inteiro seria descartado e ninguém ganharia área de toque. */
    html .ql-toolbar button, html .ql-toolbar .ql-picker-label {
        min-height: 0;
        min-width: 0;
    }
    /* Botão com texto que ocupa a linha inteira não precisa de
       min-width (já é largo) e não pode virar quadrado. */
    html button.w-full, html a[role="button"].w-full { min-width: 0; }
    /* Dentro de tabela a linha não deve dobrar de altura por causa
       de um ícone; 40px ainda passa do mínimo prático de toque. */
    html td button:not(.alvo-compacto), html th button:not(.alvo-compacto) {
        min-height: 40px;
        min-width: 40px;
    }
}

/* --------------------------------------------------------
   4) Texto corrido não deve passar de ~90 caracteres
   -------------------------------------------------------- */
.texto-corrido { max-width: 72ch; }
