/* ────────────────────────────────────────────────────── */
/* Variáveis CSS / Tema */
/* ────────────────────────────────────────────────────── */

/* ============================================
   ADVOGUE KANBAN - Design System CSS
   ============================================ */

/* === CSS Variables / Theme === */
:root,
[data-theme="light"] {
    --color-bg: #F8F9FB;
    --color-bg-elevated: #FFFFFF;
    --color-bg-hover: #F0F1F4;
    --color-bg-active: #E8E9ED;
    --color-bg-sidebar: #1E1F2B;
    --color-bg-sidebar-hover: #2A2B3D;
    --color-bg-sidebar-active: #3A3B4D;

    --color-text: #1A1A2E;
    --color-text-secondary: #4A4A6A;
    --color-text-muted: #8B8BA7;
    --color-text-sidebar: #C8C8D8;
    --color-text-sidebar-active: #818cf8;

    --color-border: #E2E3E8;
    --color-border-light: #F0F1F4;

    --color-primary: #6366f1;
    --color-primary-hover: #4f46e5;
    --color-primary-light: #eef2ff;
    --color-danger: #EF4444;
    --color-danger-hover: #DC2626;
    --color-success: #22C55E;
    --color-warning: #EAB308;
    --color-orange: #F97316;

    --color-card-yellow: #FEF3C7;
    --color-card-coral: #FEE2E2;
    --color-card-green: #D1FAE5;
    --color-card-teal: #CCFBF1;
    --color-card-blue: #DBEAFE;
    --color-card-purple: #EDE9FE;
    --color-card-orange: #FFEDD5;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    --sidebar-width: 240px;
    --sidebar-collapsed: 64px;
    --topbar-height: 52px;

    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="vieira"] {
    --color-bg: #F5F6FA;
    --color-bg-elevated: #FFFFFF;
    --color-bg-hover: #F0EDE6;
    --color-bg-active: #E8E0D0;
    --color-bg-sidebar: #1E1F2B;
    --color-bg-sidebar-hover: #2A2B3D;
    --color-bg-sidebar-active: #3A3B4D;

    --color-text: #1A1A1A;
    --color-text-secondary: #555555;
    --color-text-muted: #999999;
    --color-text-sidebar: #C8C8D8;
    --color-text-sidebar-active: #818cf8;

    --color-border: #E5E3DE;
    --color-border-light: #F0EDE8;

    --color-primary: #6366f1;
    --color-primary-hover: #4f46e5;
    --color-primary-light: #eef2ff;
    --color-danger: #EF4444;
    --color-danger-hover: #DC2626;
    --color-success: #22C55E;
    --color-warning: #EAB308;
    --color-orange: #F97316;

    --color-card-yellow: #FEF9EC;
    --color-card-coral: #FEF0EE;
    --color-card-green: #EDFAF3;
    --color-card-teal: #EDFAFA;
    --color-card-blue: #EEF4FE;
    --color-card-purple: #F4F0FE;
    --color-card-orange: #FFF4ED;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.07);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.10);
    --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.03);
}

/* Tema Claro — sidebar e conteúdo em tons claros (branco) */
[data-theme="claro"] {
    --color-bg: #F8F9FB;
    --color-bg-elevated: #FFFFFF;
    --color-bg-hover: #F0F1F4;
    --color-bg-active: #E8E9ED;
    --color-bg-sidebar: #FFFFFF;
    --color-bg-sidebar-hover: #eef2ff;
    --color-bg-sidebar-active: #e0e7ff;

    --color-text: #1A1A2E;
    --color-text-secondary: #4A4A6A;
    --color-text-muted: #8B8BA7;
    --color-text-sidebar: #4A4A6A;
    --color-text-sidebar-active: #4f46e5;

    --color-border: #E2E3E8;
    --color-border-light: #F0F1F4;

    --color-primary: #6366f1;
    --color-primary-hover: #4f46e5;
    --color-primary-light: #eef2ff;
    --color-danger: #EF4444;
    --color-danger-hover: #DC2626;
    --color-success: #22C55E;
    --color-warning: #EAB308;
    --color-orange: #F97316;

    --color-card-yellow: #FEF3C7;
    --color-card-coral: #FEE2E2;
    --color-card-green: #D1FAE5;
    --color-card-teal: #CCFBF1;
    --color-card-blue: #DBEAFE;
    --color-card-purple: #EDE9FE;
    --color-card-orange: #FFEDD5;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
}

/* ── Os sete tokens que nunca existiram ────────────────────────────────────

   `var(--color-bg-secondary, #f8fafc)` parece defensivo e e' o contrario: o
   token NUNCA foi declarado, entao o fallback claro vencia sempre — nos dois
   temas. Era isso que deixava a faixa de "receita prevista" branca no quadro
   escuro, e o cabecalho e o rodape claros na modal de comandos.

   O defeito e' invisivel na leitura: a linha cita uma variavel de tema e
   parece, por isso, saber do tema. So' medindo a cor no navegador com o tema
   escuro ligado e' que ele aparece.

   Sao sete nomes, em mais de duzentos lugares. Corrigir cada chamada seria
   duzentas edicoes e a proxima ainda nasceria errada — entao os nomes passam a
   EXISTIR, como apelidos dos tokens reais. `var()` dentro de propriedade
   customizada e' resolvido no uso, entao um bloco so' serve aos dois temas:
   quando `--color-bg-hover` muda, o apelido muda junto.

   Os fallbacks que estavam escritos guiaram o mapeamento: #f8fafc e #f1f5f9
   sao superficie de apoio (bg-hover), #f9fafb e' o fundo da pagina (bg), #fff
   e' superficie elevada (bg-elevated), #eef0fe e' o primario suave. */
:root,
[data-theme] {
    --color-bg-secondary: var(--color-bg-hover);
    --color-bg-subtle:    var(--color-bg-hover);
    --color-bg-muted:     var(--color-bg-hover);
    --color-bg-alt:       var(--color-bg);
    --color-bg-card:      var(--color-bg-elevated);
    --color-surface:      var(--color-bg-elevated);
    --color-primary-soft: var(--color-primary-light);
}

/* Tema Escuro — alias para dark */
[data-theme="escuro"] {
    --color-bg: #0F0F1A;
    --color-bg-elevated: #1A1A2E;
    --color-bg-hover: #252540;
    --color-bg-active: #303050;
    --color-bg-sidebar: #0A0A14;
    --color-bg-sidebar-hover: #1a1a30;
    --color-bg-sidebar-active: #252545;

    --color-text: #E8E8F0;
    --color-text-secondary: #A8A8C0;
    --color-text-muted: #6B6B88;
    --color-text-sidebar: #9090A8;
    --color-text-sidebar-active: #818cf8;

    --color-border: #2A2A44;
    --color-border-light: #1E1E38;

    --color-primary: #818cf8;
    --color-primary-hover: #6366f1;
    --color-primary-light: #1e1b4b;

    /*
     * AS CORES DE ESTADO NO ESCURO.
     *
     * Elas faltavam neste bloco — `[data-theme="escuro"]` e `[data-theme="claro"]`
     * sao seletores IRMAOS, entao o escuro nao herda nada do claro, e nao ha'
     * `:root` com estes tokens. O resultado eram 12 usos de `var(--color-danger)`
     * sem valor nenhum no tema escuro: o navegador descarta a declaracao e o
     * elemento fica com a cor herdada — um botao de excluir da cor do texto.
     *
     * Os valores sobem um passo na escala, que e' o que este arquivo ja' faz com
     * a primaria (indigo-500 no claro, indigo-400 no escuro): sobre fundo escuro,
     * o tom do claro fica abafado.
     */
    --color-danger: #F87171;
    --color-danger-hover: #EF4444;
    --color-success: #4ADE80;
    --color-warning: #FACC15;
    --color-orange: #FB923C;

    --color-card-yellow: #332D1A;
    --color-card-coral: #331A1A;
    --color-card-green: #1A3326;
    --color-card-teal: #1A3333;
    --color-card-blue: #1A2433;
    --color-card-purple: #261A33;
    --color-card-orange: #332618;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
    --shadow-card: 0 1px 3px rgba(0,0,0,0.3);
}

[data-theme="dark"] {
    --color-bg: #0F0F1A;
    --color-bg-elevated: #1A1A2E;
    --color-bg-hover: #252540;
    --color-bg-active: #303050;
    --color-bg-sidebar: #0A0A14;
    --color-bg-sidebar-hover: #1a1a30;
    --color-bg-sidebar-active: #252545;

    --color-text: #E8E8F0;
    --color-text-secondary: #A8A8C0;
    --color-text-muted: #6B6B88;
    --color-text-sidebar: #9090A8;
    --color-text-sidebar-active: #818cf8;

    --color-border: #2A2A44;
    --color-border-light: #1E1E38;

    --color-primary: #818cf8;
    --color-primary-hover: #6366f1;
    --color-primary-light: #1e1b4b;

    --color-card-yellow: #332D1A;
    --color-card-coral: #331A1A;
    --color-card-green: #1A3326;
    --color-card-teal: #1A3333;
    --color-card-blue: #1A2433;
    --color-card-purple: #261A33;
    --color-card-orange: #332618;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
    --shadow-card: 0 1px 3px rgba(0,0,0,0.3);
}
/* ────────────────────────────────────────────────────── */
/* Reset + Layout base */
/* ────────────────────────────────────────────────────── */

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
body { font-family: var(--font-family); background: var(--color-bg); color: var(--color-text); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--color-primary); text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; }
[x-cloak] { display: none !important; }

/* === Layout === */
.pw-body-wrapper {
    display: flex;
    min-height: 100vh;
}

.pw-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: margin-left var(--transition);
}

.pw-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

/* ── Os dois modos de largura de tela ───────────────────────────────────────

   Toda tela cabe num dos dois, e a escolha nao e' de gosto — e' do CONTEUDO:

   **Normal** (`pw-tela--normal`) para o que se LE': o Inicio, um formulario, um
   relatorio. A folga lateral existe para a linha de texto nao atravessar um
   monitor de vinte e sete polegadas — passando de uns oitenta caracteres, o olho
   perde a volta e reler a mesma linha vira regra.

   A folga e' PROPORCIONAL, e nao um teto de largura. Tentar resolver com
   `max-width` nao funcionava em tela retina: a janela tem cerca de mil pixels de
   CSS e um teto de 1400 nao limita nada ali. `clamp` acerta nos tres tamanhos —
   24px no telefone, onde cada pixel de conteudo conta; ~7% no meio; teto de
   120px no monitor grande.

   **Estendido** (`pw-tela--estendida`) para o que se OPERA de ponta a ponta: a
   agenda, o quadro, uma tabela larga. Ali a folga nao ajuda a ler — ela ROUBA
   coluna, e o dia 31 da agenda fica espremido para sobrar margem que ninguem
   pediu.

   O padrao do `.pw-content` continua sendo os 20px de sempre: quem nao escolher
   nenhum dos dois fica onde estava. */
.pw-tela--normal {
    max-width: 1500px;
    margin-inline: auto;
    padding-inline: clamp(24px, 7vw, 120px);
}

/* **Estendido nao e' encostar na borda.**

   Ele e' "sem a folga de LEITURA", e nao "sem folga". Elemento colado na borda
   parece CORTADO, como se a tela continuasse fora do monitor; e e' na beirada
   que moram a barra de rolagem e os gestos do trackpad, entao o ultimo cartao
   da fileira vira alvo disputado.

   Fica o respiro minimo da casa: os 20px que o `.pw-content` ja' da'. E' o modo
   das grades que crescem — quadros, areas do Drive. */
.pw-tela--estendida {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
}

/* **Tela cheia: encosta, e de proposito.**

   O terceiro modo, e o mais raro. Aqui a borda nao e' desperdicio — e' area
   util: uma agenda de mes quer a semana inteira, um quadro quer mais uma
   coluna, um editor quer a folha. Nesses casos o respiro de 20px sai do
   conteudo e nao devolve nada.

   A diferenca para o estendido nao e' de grau, e' de natureza: estendido e'
   para GRADE que cresce, tela cheia e' para superficie continua, onde o
   conteudo encosta porque ele mesmo e' a moldura. */
.pw-tela--cheia {
    max-width: none;
    margin-inline: calc(-1 * var(--pw-content-pad, 20px));
    padding-inline: 0;
}
/* A tela cheia vinda de `ModosDeLargura`: a propria area de conteudo sem a
   folga lateral, e nenhum embrulho no caminho. */
.pw-content--cheia { padding-inline: 0; }

/* ────────────────────────────────────────────────────── */
/* Sidebar */
/* ────────────────────────────────────────────────────── */

/* === Sidebar === */
.pw-sidebar {
    width: var(--sidebar-width);
    background: var(--color-bg-sidebar);
    color: var(--color-text-sidebar);
    display: flex;
    flex-direction: column;
    transition: width var(--transition);
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    border-right: 1px solid var(--color-border);
}

.pw-sidebar--collapsed {
    width: var(--sidebar-collapsed);
    overflow: visible;
}

.pw-sidebar--collapsed .pw-sidebar__header {
    justify-content: center;
    padding: 12px 0;
}

.pw-sidebar + .pw-main {
    margin-left: var(--sidebar-width);
}

.pw-sidebar--collapsed + .pw-main {
    margin-left: var(--sidebar-collapsed);
}

.pw-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 12px 16px;
    border-bottom: 1px solid var(--color-border);
    min-height: 52px;
    flex-shrink: 0;
}

.pw-sidebar__logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pw-sidebar__brand {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    white-space: nowrap;
}
.pw-sidebar__brand-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-sidebar-active);
    letter-spacing: -.01em;
}
.pw-sidebar__brand-segment {
    font-size: 11px;
    font-weight: 400;
    font-style: italic;
    color: var(--color-text-sidebar);
    opacity: .75;
}
.pw-sidebar__brand-version {
    font-size: 9.5px;
    color: var(--color-text-sidebar);
    opacity: .45;
    letter-spacing: .05px;
    line-height: 1;
    margin-top: 1px;
}

.pw-sidebar__title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.pw-sidebar__toggle {
    color: var(--color-text-sidebar);
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}
.pw-sidebar__toggle:hover { background: var(--color-bg-sidebar-hover); color: var(--color-text-sidebar-active); }

.pw-sidebar__nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pw-sidebar__nav { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.pw-sidebar__nav::-webkit-scrollbar { width: 3px; }
.pw-sidebar__nav::-webkit-scrollbar-track { background: transparent; }
.pw-sidebar__nav::-webkit-scrollbar-thumb { background: transparent; border-radius: 2px; transition: background .2s; }
.pw-sidebar__nav:hover { scrollbar-color: rgba(128,128,128,.3) transparent; }
.pw-sidebar__nav:hover::-webkit-scrollbar-thumb { background: rgba(128,128,128,.3); }

.pw-sidebar__link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    color: var(--color-text-sidebar);
    transition: all var(--transition);
    white-space: nowrap;
    font-weight: 500;
    font-size: 13px;
    border-left: 2px solid transparent;
}
.pw-sidebar__link:hover { background: var(--color-bg-sidebar-hover); color: var(--color-text-sidebar-active); }
/* Pai ativo: usa variáveis do tema (indigo em todas as variantes) */
.pw-sidebar__link--active {
    background: var(--color-bg-sidebar-active);
    color: var(--color-text-sidebar-active);
    border-left-color: var(--color-primary);
}
/* Sub-item ativo: tint mais claro que o pai + borda esquerda */
.pw-sidebar__link--sub.pw-sidebar__link--active {
    background: rgba(99,102,241,0.08);
    color: var(--color-primary);
    border-left-color: var(--color-primary);
}
.pw-sidebar--collapsed .pw-sidebar__link {
    border-left: 2px solid transparent;
    justify-content: center;
    padding: 8px 0;
}
.pw-sidebar--collapsed .pw-sidebar__link--active {
    border-left-color: transparent;
}

.pw-sidebar__section {
    padding: 8px 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 4px;
}

.pw-sidebar__section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    margin-bottom: 6px;
}

.pw-sidebar__calendar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
    cursor: pointer;
}
.pw-sidebar__calendar input[type="checkbox"] {
    width: 14px; height: 14px;
    accent-color: var(--color-primary);
}

.pw-sidebar__calendar-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pw-sidebar__calendar-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-sidebar__calendar-icon { flex-shrink: 0; }

/* Calendar row: label + action button */
.pw-sidebar__calendar-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
}
.pw-sidebar__calendar-row .pw-sidebar__calendar {
    flex: 1;
    min-width: 0;
}
.pw-sidebar__cal-action-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    background: var(--color-bg-sidebar-hover);
    color: var(--color-text-sidebar);
    cursor: pointer;
    border-radius: 4px;
    flex-shrink: 0;
    padding: 0;
}
.pw-sidebar__cal-action-btn:hover { background: var(--color-bg-sidebar-active); color: var(--color-text-sidebar-active); }
.pw-sidebar__calendar-row:hover .pw-sidebar__cal-action-btn,
.pw-sidebar__workspace-row:hover .pw-sidebar__cal-action-btn,
.pw-sidebar__board-row:hover .pw-sidebar__cal-action-btn { display: flex; }

/* Color picker menu */
.pw-cal-color-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    z-index: 200;
    background: var(--color-bg-card, #1e1e2e);
    border: 1px solid var(--color-border, #2d2d3d);
    border-radius: 8px;
    padding: 10px 12px;
    width: 180px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
/* position:fixed para escapar do overflow:hidden dos containers de scroll.
   Classe nomeada --fixed (não --sidebar) para não ser capturada pelo seletor
   [class*="sidebar"] do preload painel-sidebar-hide.ts do Desktop. */
.pw-cal-color-menu--fixed {
    position: fixed;
    z-index: 99999;
    background: var(--color-bg-elevated);
    border-color: var(--color-border);
}
/* Variante: posicionada relativa ao row (sem coords dinâmicas) */
.pw-cal-color-menu--row {
    position: absolute;
    right: 0;
    top: 100%;
    left: auto;
    z-index: 9999;
}
.pw-cal-color-menu__title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}
.pw-cal-color-menu__swatches {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}
.pw-cal-color-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s, border-color 0.1s, outline 0.1s;
    outline: 2px solid transparent;
    outline-offset: 1px;
}
.pw-cal-color-swatch:hover { transform: scale(1.15); }
.pw-cal-color-swatch--active {
    border-color: #fff;
    outline-color: var(--color-primary, #6366f1);
}
.pw-cal-color-menu__custom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--color-text-muted);
    cursor: pointer;
    gap: 8px;
}
.pw-cal-color-menu__custom input[type="color"] {
    width: 28px;
    height: 22px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    background: none;
}

.pw-cal-color-menu__divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 8px 0;
}
.pw-cal-color-menu__delete {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 6px 4px;
    font-size: 12.5px;
    color: var(--color-error, #ef4444);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    text-align: left;
    transition: background .15s;
}
.pw-cal-color-menu__delete:hover { background: rgba(239,68,68,.1); }
.pw-cal-color-menu__action-item {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 6px 4px;
    font-size: 12.5px;
    color: var(--color-text);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    text-align: left;
    transition: background .15s;
}
.pw-cal-color-menu__action-item:hover { background: var(--color-bg-hover); }

.pw-sidebar__board-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
    color: var(--color-text-sidebar);
    transition: color var(--transition);
}
.pw-sidebar__board-link:hover { color: var(--color-text-sidebar-active); }

.pw-sidebar__context {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 8px;
}
.pw-sidebar__context::-webkit-scrollbar { width: 4px; }
.pw-sidebar__context::-webkit-scrollbar-track { background: transparent; }
.pw-sidebar__context::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }


/* ────────────────────────────────────────────────────── */
/* Finance Sidebar Navigation */
/* ────────────────────────────────────────────────────── */

/* Back row */
.pw-sidebar__finance-back-row {
    padding: 6px 8px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.pw-sidebar__finance-back {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    transition: all var(--transition);
    white-space: nowrap;
}
.pw-sidebar__finance-back:hover {
    background: var(--color-bg-sidebar-hover);
    color: var(--color-text-sidebar-active);
}
/* collapsed: center the icon */
.pw-sidebar--collapsed .pw-sidebar__finance-back {
    justify-content: center;
    padding: 6px;
}

/* Finance nav scroll container */
.pw-sidebar__finance-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 0 12px;
    display: flex;
    flex-direction: column;
}
.pw-sidebar__finance-nav::-webkit-scrollbar { width: 4px; }
.pw-sidebar__finance-nav::-webkit-scrollbar-track { background: transparent; }
.pw-sidebar__finance-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

/* Group container */
.pw-sidebar__fgroup {
    padding: 6px 0 2px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.pw-sidebar__fgroup:first-child { border-top: none; }

/* Group label */
.pw-sidebar__fgroup-label {
    padding: 4px 14px 2px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* Nav link */
.pw-sidebar__flink {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 10px;
    margin: 1px 6px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-sidebar);
    transition: all var(--transition);
    white-space: nowrap;
    text-decoration: none;
}
.pw-sidebar__flink:hover {
    background: var(--color-bg-sidebar-hover);
    color: var(--color-text-sidebar-active);
}
.pw-sidebar__flink--active {
    background: var(--color-bg-sidebar-active);
    color: var(--color-text-sidebar-active);
}
.pw-sidebar__flink--sub {
    font-size: 12.5px;
}

/* Icon */
.pw-sidebar__flink-icon {
    flex-shrink: 0;
    opacity: 0.75;
}
.pw-sidebar__flink:hover .pw-sidebar__flink-icon,
.pw-sidebar__flink--active .pw-sidebar__flink-icon {
    opacity: 1;
}

/* Collapsed: center icons, hide labels */
.pw-sidebar--collapsed .pw-sidebar__flink {
    justify-content: center;
    margin: 1px 4px;
    padding: 7px 6px;
}
.pw-sidebar--collapsed .pw-sidebar__fgroup {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 4px 0 2px;
}

/* ── Sidebar collapsed: captions + flyout à direita ────────────────────── */
/* Layout coluna: ícone + caption abaixo */
.pw-sidebar--collapsed .pw-sidebar__link {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 6px 2px !important;
    gap: 2px !important;
    min-height: 48px;
    height: auto !important;
    line-height: 1;
}
/* Caption: span direta do link (menus simples) */
.pw-sidebar--collapsed .pw-sidebar__link > span {
    display: block !important;
    font-size: 8px !important;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 58px;
    font-weight: 500;
    opacity: 0.75;
    margin-top: 1px;
}
/* Dropdown: container interno com ícone+span */
.pw-sidebar--collapsed .pw-sidebar__link > div {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    width: 100%;
}
/* Caption dos dropdowns (span dentro do div interno) */
.pw-sidebar--collapsed .pw-sidebar__link > div > span {
    display: block !important;
    font-size: 8px !important;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 58px;
    font-weight: 500;
    opacity: 0.75;
    margin-top: 1px;
}
/* Flyout: painel flutuante à direita — position:fixed, top via JS */
.pw-sidebar--collapsed .pw-sidebar__submenu {
    position: fixed;
    left: var(--sidebar-collapsed, 64px);
    top: 0; /* sobrescrito por JS no @click */
    min-width: 0;
    width: max-content;
    max-width: 200px;
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 0 !important;
    background: var(--color-bg-sidebar);
    border-radius: 0 10px 10px 0;
    box-shadow: 4px 0 24px rgba(0,0,0,0.28);
    border: 1px solid var(--color-border);
    border-left: none;
    z-index: 9999;
}
.pw-sidebar--collapsed .pw-sidebar__submenu .pw-sidebar__link {
    justify-content: flex-start !important;
    padding: 7px 12px !important;
    gap: 8px;
    border-left: 2px solid transparent !important;
    white-space: nowrap;
    overflow: hidden !important;
    position: relative;
}
.pw-sidebar--collapsed .pw-sidebar__submenu .pw-sidebar__link svg {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0;
}
.pw-sidebar--collapsed .pw-sidebar__submenu .pw-sidebar__link span {
    display: inline !important;
    font-size: 12px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Badges ocultos na sidebar collapsed ─────────────────────────────────── */
.pw-sidebar--collapsed [id^="cw-badge"],
.pw-sidebar--collapsed #grupos-unread-badge {
    display: none !important;
}

/* ── Pre-Alpine: evitar flash da sidebar expandida ──────────────────────── */
[data-sb-col="1"] .pw-sidebar {
    width: var(--sidebar-collapsed) !important;
    overflow: visible !important;
    transition: none !important;
}
[data-sb-col="1"] .pw-sidebar + .pw-main {
    margin-left: var(--sidebar-collapsed) !important;
    transition: none !important;
}

:root { --sidebar-collapsed: 56px; }

/**
 * O TEXTO do logotipo some junto com a barra, antes do Alpine.
 *
 * `x-show` so' age depois que o Alpine carrega. Ate' la' a barra ja' estava
 * estreita (regra acima) mas o "Anyflow / Web" continuava desenhado — e, sem
 * lugar onde caber, ele transbordava por cima do titulo da pagina. O print
 * mostrava "Anyflow Juridico" e "Dashboard" impressos um sobre o outro.
 *
 * Mesma tecnica do resto deste bloco: o que o Alpine vai esconder, o CSS ja'
 * esconde — e o `x-show` apenas confirma.
 */
[data-sb-col="1"] .pw-sidebar__logo > div {
    display: none !important;
}

/* ── Footer version/plan row: hidden when collapsed (no Alpine flicker) ─── */
[data-sb-col=1] .pw-sidebar-footer-row,
.pw-sidebar--collapsed .pw-sidebar-footer-row {
    display: none !important;
}
/* ────────────────────────────────────────────────────── */
/* Top Bar */
/* ────────────────────────────────────────────────────── */

/* === Top Bar === */
.pw-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--topbar-height);
    padding: 0 20px;
    background: var(--color-bg-elevated);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.pw-topbar__left { display: flex; align-items: center; gap: 12px; }
.pw-topbar__title { font-size: 16px; font-weight: 600; }
.pw-topbar__center { display: flex; align-items: center; gap: 8px; }
.pw-topbar__right { display: flex; align-items: center; gap: 10px; }

/* ────────────────────────────────────────────────────── */
/* Botões */
/* ────────────────────────────────────────────────────── */

/* === Buttons === */
.pw-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 13px;
    transition: all var(--transition);
    white-space: nowrap;
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    color: var(--color-text);
}
.pw-btn:hover { background: var(--color-bg-hover); }

.pw-btn--primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.pw-btn--primary:hover { background: var(--color-primary-hover); }

.pw-btn--danger { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.pw-btn--danger:hover { background: var(--color-danger-hover); }

.pw-btn--ghost { background: transparent; border-color: transparent; }
.pw-btn--ghost:hover { background: var(--color-bg-hover); }

.pw-btn--sm { padding: 5px 10px; font-size: 12px; }
.pw-btn--full { width: 100%; justify-content: center; }
.pw-btn--active { background: var(--color-primary-light); color: var(--color-primary); border-color: var(--color-primary); }

.pw-btn--google {
    background: #fff;
    color: #333;
    border: 1px solid #ddd;
    padding: 10px 20px;
}
.pw-btn--google:hover { background: #f5f5f5; }

.pw-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    transition: all var(--transition);
}
.pw-btn-icon:hover { background: var(--color-bg-hover); color: var(--color-text); }
.pw-btn-icon--sm { width: 24px; height: 24px; }
.pw-btn-icon--xs { width: 20px; height: 20px; }

.pw-btn-group {
    display: flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.pw-btn-group .pw-btn {
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--color-border);
}
.pw-btn-group .pw-btn:last-child { border-right: none; }

/* ────────────────────────────────────────────────────── */
/* Avatar, Formulários, Switch */
/* ────────────────────────────────────────────────────── */

/* === Avatar === */
.pw-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    flex-shrink: 0;
}
.pw-avatar--sm { width: 28px; height: 28px; font-size: 11px; }

/* === Forms === */
.pw-form-group { margin-bottom: 14px; }
.pw-form-row { display: flex; gap: 14px; }
.pw-form-row .pw-form-group { flex: 1; }

/* O rotulo e o campo sao os do `x-ui.texto` (aprovado em 13/09/2026): quem
   ainda escreve `pw-label`/`pw-input` a' mao ganha o mesmo desenho, e as telas
   antigas nao destoam das novas enquanto nao sao reescritas. */
.pw-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.pw-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg);
    color: var(--color-text);
    transition: border-color .15s, box-shadow .15s;
    outline: none;
    font-size: 13px;
    line-height: 20px;
}
.pw-input:hover:not(:focus):not(:disabled) { border-color: color-mix(in srgb, var(--color-text-muted) 55%, var(--color-border)); }
.pw-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent); }
.pw-input:disabled { background: color-mix(in srgb, var(--color-border) 35%, var(--color-bg)); color: var(--color-text-muted); cursor: not-allowed; }
.pw-input--sm { padding: 5px 8px; font-size: 12px; }
.pw-input--error { border-color: #ef4444 !important; }
.pw-input--error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.15) !important; }
.pw-field-error { margin: 3px 0 0; font-size: 11px; color: #ef4444; }
.pw-input--flat { border: none; background: transparent; padding: 2px 4px; }
.pw-input--flat:focus { background: var(--color-bg); border: 1px solid var(--color-primary); }
.pw-textarea { resize: vertical; min-height: 80px; }

.pw-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
}
.pw-checkbox-label input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--color-primary);
}

.pw-color-picker {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.pw-color-dot {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition);
}
.pw-color-dot:hover { transform: scale(1.15); }
.pw-color-dot--active { border-color: var(--color-text); box-shadow: var(--shadow-md); }

/* === Switch === */
.pw-switch {
    position: relative;
    display: inline-block;
    width: 36px; height: 20px;
}
.pw-switch input { opacity: 0; width: 0; height: 0; }
.pw-switch__slider {
    position: absolute;
    inset: 0;
    background: var(--color-bg-active);
    border-radius: 10px;
    transition: var(--transition);
    cursor: pointer;
}
.pw-switch__slider::before {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    left: 2px; bottom: 2px;
    background: white;
    border-radius: 50%;
    transition: var(--transition);
}
.pw-switch input:checked + .pw-switch__slider { background: var(--color-primary); }
.pw-switch input:checked + .pw-switch__slider::before { transform: translateX(16px); }

/* ────────────────────────────────────────────────────── */
/* Modais */
/* ────────────────────────────────────────────────────── */

/* === Modals === */
.pw-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.pw-modal {
    background: var(--color-bg-elevated);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}
.pw-modal--lg { max-width: 640px; }

.pw-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}
.pw-modal__header h2 { font-size: 16px; font-weight: 600; }
/* O titulo da modal nao tinha regra: a de Metas saia em letra comum, sem peso. */
.pw-modal__title { font-size: 15px; font-weight: 700; color: var(--color-text); }

.pw-modal__body { padding: 20px; }

.pw-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--color-border);
    margin-top: 0;
}

/* ────────────────────────────────────────────────────── */
/* Alertas, Painéis, Badges, Dropdown */
/* ────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════
   pw-search — Caixa de busca reutilizável
   Uso: <x-search-box model="query" placeholder="Buscar..." />
   Largura padrão controlável via --pw-search-w / --pw-search-w-open
   ════════════════════════════════════════════════════════ */
.pw-search {
    --pw-search-w:      160px;
    --pw-search-w-open: 260px;
    position: relative;
    display: flex;
    align-items: center;
    width: var(--pw-search-w);
    height: 32px;
    background: var(--color-bg-hover);
    border: 1.5px solid var(--color-border);
    border-radius: 20px;
    padding: 0 8px 0 10px;
    gap: 6px;
    transition: width 260ms cubic-bezier(0.4,0,0.2,1),
                border-color 200ms ease,
                background 200ms ease,
                box-shadow 200ms ease;
    cursor: text;
}
.pw-search:hover {
    border-color: var(--color-text-muted);
    background: var(--color-bg-elevated);
}
.pw-search--focused {
    width: var(--pw-search-w-open);
    border-color: var(--color-primary);
    background: var(--color-bg-elevated);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}
.pw-search__icon {
    color: var(--color-text-muted);
    flex-shrink: 0;
    transition: color 200ms ease;
    pointer-events: none;
}
.pw-search--focused .pw-search__icon { color: var(--color-primary); }
.pw-search__input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: var(--color-text);
    min-width: 0;
    line-height: 1;
}
.pw-search__input::placeholder { color: var(--color-text-muted); }
.pw-search__kbd {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-family: inherit;
    color: var(--color-text-muted);
    background: var(--color-bg-active);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 1px 5px;
    line-height: 1.6;
    flex-shrink: 0;
    pointer-events: none;
    white-space: nowrap;
}
.pw-search__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: var(--color-text-muted);
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background 150ms ease, transform 150ms ease;
}
.pw-search__clear:hover {
    background: var(--color-text-secondary);
    transform: scale(1.1);
}
@keyframes pw-fade-in {
    from { opacity: 0; transform: scale(0.7); }
    to   { opacity: 1; transform: scale(1); }
}
.pw-fade-in { animation: pw-fade-in 150ms ease forwards; }

/* ════════════════════════════════════════════════════════
   pw-filter — Barra de filtros pill (selects + clear link)
   Uso: <div class="pw-filter-pill"><select class="pw-filter-select" onchange="this.form.submit()">...</select></div>
        <a class="pw-filter-clear">Limpar N filtros</a>
   ════════════════════════════════════════════════════════ */
.pw-filter-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 32px;
    background: var(--color-bg-hover);
    border: 1.5px solid var(--color-border);
    border-radius: 20px;
    padding: 0 28px 0 12px;
    transition: border-color 200ms ease, background 200ms ease;
}
.pw-filter-pill:hover { border-color: var(--color-text-muted); background: var(--color-bg-elevated); }
.pw-filter-pill::after {
    content: '';
    pointer-events: none;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--color-text-muted);
}
.pw-filter-select {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: var(--color-text);
    cursor: pointer;
    white-space: nowrap;
    max-width: 180px;
}
.pw-filter-clear {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
    color: var(--color-text-muted);
    border: 1.5px solid var(--color-border);
    border-radius: 20px;
    background: var(--color-bg-hover);
    text-decoration: none;
    transition: all 200ms ease;
    white-space: nowrap;
}
.pw-filter-clear:hover { color: #dc2626; border-color: #dc2626; background: var(--color-bg-elevated); }

/* === Alerts === */
.pw-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    margin: 10px 20px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
}
/* Os quatro tons do aviso.

   Eram dois, e os dois em hexadecimal fixo: verde-claro com texto verde-escuro.
   No tema escuro esse par vira um bloco claro gritando no meio da tela, com o
   texto quase do tom do proprio fundo. Cor fixa na folha nao sabe do tema.

   Agora cada tom nasce da variavel semantica correspondente, misturada com o
   fundo: o mesmo par de regras serve aos dois temas porque o `--color-bg` muda
   junto. `--info` e `--warn` NAO existiam — a tela de roteamento ja' pedia
   `pw-alert--info`, e o aviso de "nenhum numero cadastrado" saia sem cor
   nenhuma, indistinguivel de texto solto. */
.pw-alert--success { background: color-mix(in srgb, var(--color-success) 14%, var(--color-bg)); color: var(--color-text); border: 1px solid color-mix(in srgb, var(--color-success) 32%, transparent); }
.pw-alert--error   { background: color-mix(in srgb, var(--color-danger)  14%, var(--color-bg)); color: var(--color-text); border: 1px solid color-mix(in srgb, var(--color-danger)  32%, transparent); }
.pw-alert--warn    { background: color-mix(in srgb, var(--color-warning) 14%, var(--color-bg)); color: var(--color-text); border: 1px solid color-mix(in srgb, var(--color-warning) 32%, transparent); }
.pw-alert--info    { background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg)); color: var(--color-text); border: 1px solid color-mix(in srgb, var(--color-primary) 28%, transparent); }

/* === Panels === */
.pw-panel {
    background: var(--color-bg-elevated);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}
.pw-panel--danger { border-color: var(--color-danger); }

.pw-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border-light);
}
.pw-panel__header h3 { font-size: 14px; font-weight: 600; }

.pw-panel__body { padding: 14px 18px; }

/* === Badges === */
.pw-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}
.pw-badge--none { background: var(--color-bg-hover); color: var(--color-text-muted); }
.pw-badge--low { background: #D1FAE5; color: #065F46; }
.pw-badge--medium { background: #FEF3C7; color: #92400E; }
.pw-badge--high { background: #FFEDD5; color: #9A3412; }
.pw-badge--urgent { background: #FEE2E2; color: #991B1B; }
.pw-badge--running { background: var(--color-primary); color: #fff; animation: pulse 2s infinite; }
.pw-badge--count { background: var(--color-bg-hover); color: var(--color-text-muted); min-width: 20px; text-align: center; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

/* === Dropdown === */
.pw-dropdown { position: relative; }
.pw-dropdown__menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    min-width: 160px;
    z-index: 200;
    padding: 4px;
}
.pw-dropdown__item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--color-text);
    text-align: left;
    transition: all var(--transition);
}
.pw-dropdown__item:hover { background: var(--color-bg-hover); }
.pw-dropdown__item--danger { color: var(--color-danger); }
.pw-dropdown__divider { border: none; border-top: 1px solid var(--color-border); margin: 4px 0; }

.pw-sidebar__brand-version {
    display: block;
    font-size: 9.5px;
    opacity: 0.45;
    letter-spacing: .05px;
    line-height: 1;
    margin-top: 1px;
}

/* ────────────────────────────────────────────────────── */
/* Dashboard */
/* ────────────────────────────────────────────────────── */

/* === Dashboard === */
.pw-dashboard { max-width: 1400px; margin: 0 auto; }

.pw-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.pw-stat-card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow-sm);
}

.pw-stat-card__icon {
    width: 44px; height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pw-stat-card__icon--blue { background: #DBEAFE; color: #2563EB; }
.pw-stat-card__icon--green { background: #D1FAE5; color: #059669; }
.pw-stat-card__icon--purple { background: #EDE9FE; color: #7C3AED; }
.pw-stat-card__icon--orange { background: #FFEDD5; color: #EA580C; }

.pw-stat-card__value { display: block; font-size: 20px; font-weight: 700; }
.pw-stat-card__label { display: block; font-size: 12px; color: var(--color-text-muted); }

.pw-dashboard__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

/* === Event Items (Dashboard) === */
.pw-event-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border-light);
}
.pw-event-item:last-child { border-bottom: none; }
.pw-event-item__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pw-event-item__content { flex: 1; min-width: 0; }
.pw-event-item__title { display: block; font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-event-item__time { display: block; font-size: 11px; color: var(--color-text-muted); }

/* === Card Items (Dashboard) === */
.pw-card-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border-light);
}
.pw-card-item:last-child { border-bottom: none; }
.pw-card-item__priority { width: 4px; height: 28px; border-radius: 2px; flex-shrink: 0; }
.pw-card-item__content { flex: 1; }
.pw-card-item__title { display: block; font-weight: 500; font-size: 13px; }
.pw-card-item__meta { display: block; font-size: 11px; color: var(--color-text-muted); }

/* === Time Items (Dashboard) === */
.pw-time-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--color-border-light);
}
.pw-time-item:last-child { border-bottom: none; }
.pw-time-item__duration { font-weight: 700; font-size: 14px; color: var(--color-primary); min-width: 60px; }
.pw-time-item__desc { flex: 1; font-size: 13px; }


/* ────────────────────────────────────────────────────────
   Finance Module — iframe + sidebar sub-navigation
   ──────────────────────────────────────────────────────── */

/* Finance iframe wrapper */
.pw-finance-frame {
    flex: 1;
    display: flex;
    min-height: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-elevated);
}

.pw-finance-frame__iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    flex: 1;
    min-height: calc(100vh - var(--topbar-height) - 48px);
}

/* Finance sidebar — back button */
.pw-sidebar__finance-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.pw-sidebar__finance-back {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--color-text-muted);
    transition: color var(--transition);
    cursor: pointer;
}
.pw-sidebar__finance-back:hover { color: var(--color-text-sidebar); }

.pw-sidebar__finance-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    padding-left: 2px;
}

/* Finance sidebar links */
.pw-sidebar__finance-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    font-size: 13px;
    color: var(--color-text-sidebar);
    border-radius: var(--radius-md);
    margin: 1px 6px;
    transition: all var(--transition);
    cursor: pointer;
}
.pw-sidebar__finance-link:hover { background: var(--color-bg-sidebar-hover); color: #fff; }
.pw-sidebar__finance-link--active { background: var(--color-bg-sidebar-active); color: var(--color-text-sidebar-active); }
.pw-sidebar__finance-link--dashboard {
    margin: 6px 6px 2px;
    font-weight: 600;
}
.pw-sidebar__finance-link svg { flex-shrink: 0; opacity: 0.8; }
.pw-sidebar__finance-link--active svg { opacity: 1; }
/* ────────────────────────────────────────────────────── */
/* Calendário, Minicalendário, FullCalendar */
/* ────────────────────────────────────────────────────── */

/* === Calendar Page === */
.pw-calendar-page { height: calc(100vh - var(--topbar-height) - 40px); display: flex; flex-direction: column; }

.pw-calendar-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.pw-calendar-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}
.pw-calendar-nav__title { font-weight: 600; font-size: 15px; min-width: 200px; text-align: center; }

.pw-calendar-split {
    flex: 1;
    display: flex;
    gap: 0;
    min-height: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-elevated);
}

.pw-calendar-split__board {
    width: 260px;
    border-right: 1px solid var(--color-border);
    overflow-y: auto;
    flex-shrink: 0;
    transition: width var(--transition);
}
.pw-calendar-split__board--hidden { width: 0; border-right: none; overflow: hidden; }

.pw-calendar-split__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    background: var(--color-bg-hover);
    border-right: 1px solid var(--color-border);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--transition);
}
.pw-calendar-split__toggle:hover { background: var(--color-bg-active); color: var(--color-text); }

.pw-calendar-split__calendar { flex: 1; padding: 8px; min-width: 0; }

/* Mini Calendar */
.pw-mini-cal {
    padding: 10px 10px 8px;
    border-bottom: 1px solid var(--color-border-light);
    user-select: none;
}

.pw-mini-cal__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.pw-mini-cal__nav span {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text);
}

.pw-mini-cal__nav button {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    transition: all var(--transition);
    cursor: pointer;
}
.pw-mini-cal__nav button:hover { background: var(--color-bg-hover); color: var(--color-text); }

.pw-mini-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
}

.pw-mini-cal__dow {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-align: center;
    padding: 2px 0 4px;
    text-transform: uppercase;
}

.pw-mini-cal__day {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: background var(--transition), color var(--transition);
}
.pw-mini-cal__day:hover:not(.pw-mini-cal__day--empty) {
    background: var(--color-bg-hover);
    color: var(--color-text);
}
.pw-mini-cal__day--empty { cursor: default; }
.pw-mini-cal__day--today {
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
}
.pw-mini-cal__day--today:hover { background: var(--color-primary-dark, var(--color-primary)); }
.pw-mini-cal__day--selected:not(.pw-mini-cal__day--today) {
    background: var(--color-primary-muted, rgba(99,102,241,0.2));
    color: var(--color-primary);
    font-weight: 600;
}
.pw-mini-cal__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-primary);
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
}
.pw-mini-cal__day--today .pw-mini-cal__dot {
    background: rgba(255,255,255,0.8);
}

/* Board Mini Panel */
.pw-board-mini__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border-light);
    position: sticky;
    top: 0;
    background: var(--color-bg-elevated);
    z-index: 5;
}
.pw-board-mini__header h3 { font-size: 13px; font-weight: 600; }

.pw-board-mini__body {
    overflow-y: auto;
    flex: 1;
    padding: 8px 10px;
}
.pw-board-mini__body .pw-sidebar__calendar-row {
    padding: 2px 0;
    border-radius: var(--radius-sm);
}
.pw-board-mini__body .pw-sidebar__calendar-row:hover {
    background: var(--color-bg-hover);
}
.pw-board-mini__body .pw-sidebar__calendar {
    padding: 4px 6px;
    font-size: 13px;
}
.pw-board-mini__body .pw-sidebar__cal-action-btn {
    background: transparent;
    color: var(--color-text-muted);
    margin-right: 2px;
}
.pw-board-mini__body .pw-sidebar__section-label {
    padding: 10px 6px 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.pw-board-mini__section { padding: 8px 10px; }
.pw-board-mini__board-name {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    margin-bottom: 4px;
}

.pw-board-mini__list { margin-bottom: 4px; }

.pw-board-mini__card {
    padding: 6px 8px;
    margin: 2px 0;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    font-size: 12px;
    cursor: grab;
    transition: all var(--transition);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pw-board-mini__card:hover { background: var(--color-bg-hover); box-shadow: var(--shadow-sm); }

/* FullCalendar Overrides */
.fc { font-family: var(--font-family) !important; }
.fc .fc-toolbar { margin-bottom: 8px !important; }
.fc .fc-toolbar-title { font-size: 16px !important; font-weight: 600 !important; }
.fc .fc-button { border-radius: var(--radius-md) !important; font-size: 12px !important; }
.fc .fc-button-primary {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}
.fc .fc-daygrid-day { transition: background var(--transition); }
.fc .fc-daygrid-day:hover { background: var(--color-bg-hover); }
.fc .fc-event {
    border-radius: var(--radius-sm) !important;
    border: none !important;
    padding: 2px 5px !important;
    font-size: 12px !important;
    cursor: pointer !important;
}
/* 2-line events: title + time in month view */
.fc .fc-daygrid-event {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 1px 2px !important;
}
.fc .fc-daygrid-event .fc-event-main {
    overflow: hidden !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 2px 4px !important;
    height: auto !important;
}
.fc .fc-daygrid-event-harness {
    height: auto !important;
    overflow: visible !important;
}
.pw-fc-event-wrapper {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}
.pw-fc-event-title {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    font-size: 12px;
    color: #fff;
}
.pw-fc-event-time {
    font-size: 10px;
    opacity: 0.9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    color: rgba(255,255,255,0.85);
}
/* Completed event: faded + strikethrough title */
/* O esmaecido do concluido vai no corpo, nao no wrapper: o checkbox precisa
   continuar legivel para dar pra desmarcar. */
.fc .pw-fc-event-wrapper--done .pw-fc-event-corpo {
    opacity: 0.45;
}
.fc .pw-fc-event-wrapper--done .pw-fc-event-title {
    text-decoration: line-through;
}

/* List view — forçar texto legível (FullCalendar aplica --fc-event-text-color:#fff inline) */
#fullcalendar .fc-list-event td,
#fullcalendar .fc-list-event td span,
#fullcalendar .fc-list-event td a {
    color: var(--color-text, #1a1a2e) !important;
}

/* Feriados nacionais — fundo colorido + label */
/* Feriado nacional — evento bloco cobrindo o dia */
.pw-fc-holiday-label {
    font-size: 11px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    width: 100%;
}

/* Fim de semana — fundo diferenciado (dayGrid + timeGrid) */
:root {
    --pw-weekend-bg: rgba(255, 255, 255, 0.03);
    --pw-today-bg: rgba(99, 102, 241, 0.08);
}
.fc .fc-day-sat,
.fc .fc-day-sun {
    background-color: var(--pw-weekend-bg);
}
.fc .fc-timegrid-col.fc-day-sat,
.fc .fc-timegrid-col.fc-day-sun {
    background-color: var(--pw-weekend-bg);
}
.fc .fc-day-today {
    background-color: var(--pw-today-bg) !important;
}
.fc .fc-timegrid-col.fc-day-today {
    background-color: var(--pw-today-bg) !important;
}
.fc .fc-col-header-cell.fc-day-sat .fc-col-header-cell-cushion,
.fc .fc-col-header-cell.fc-day-sun .fc-col-header-cell-cushion {
    color: var(--color-text-muted);
}

.fc .fc-daygrid-day-number { font-size: 13px; color: var(--color-text); padding: 4px 8px; }
.fc .fc-col-header-cell-cushion { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; }
.fc .fc-scrollgrid { border-color: var(--color-border) !important; }
.fc td, .fc th { border-color: var(--color-border-light) !important; }
.fc .fc-timegrid-slot { height: 40px !important; }

/* ────────────────────────────────────────────────────── */
/* Páginas de quadro e Kanban Board */
/* ────────────────────────────────────────────────────── */

/* === Board Pages === */
.pw-boards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.pw-board-card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition);
    box-shadow: var(--shadow-sm);
}
.pw-board-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.pw-board-card__header {
    padding: 20px;
    color: #fff;
}
.pw-board-card__header h3 { font-size: 16px; font-weight: 600; }

.pw-board-card__body { padding: 14px; }
.pw-board-card__stats { font-size: 12px; color: var(--color-text-muted); margin-top: 8px; }

.pw-board-card--new {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    border: 2px dashed var(--color-border);
    cursor: pointer;
    gap: 8px;
    color: var(--color-text-muted);
    font-size: 14px;
}
.pw-board-card--new:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); }

/* === Kanban Board === */
.pw-board-page { height: calc(100vh - var(--topbar-height) - 40px); display: flex; flex-direction: column; }

.pw-board-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-shrink: 0;
}
.pw-board-header__info { display: flex; align-items: center; gap: 10px; }
.pw-board-header__dot { width: 12px; height: 12px; border-radius: 50%; }
.pw-board-header h2 { font-size: 18px; }

/**
 * O quadro.
 *
 * **Os mesmos 20px do resto do sistema, nas duas laterais.** A primeira lista
 * nascia encostada na borda da janela, enquanto a faixa de numeros logo acima
 * ja' respirava — e era essa diferenca que se via, nao a falta de espaco em si:
 * duas coisas empilhadas comecando em lugares diferentes. Vinte pixels e' o que
 * o Dashboard e o Workflow usam, e repetir o valor e' o que faz as telas
 * parecerem a mesma casa.
 *
 * O `gap` entre as listas nao muda: o que se pediu foi descolar das bordas, e
 * nao afastar as listas umas das outras.
 *
 * **O `::after` existe porque `padding-right` sozinho nao chega ao fim.** Numa
 * faixa que rola na horizontal, o recuo da direita e' aplicado a' caixa, e nao
 * ao conteudo rolado: chegando ao fim da rolagem, a ultima lista encosta na
 * borda assim mesmo. Um espacador com largura propria e' conteudo — e conteudo
 * a rolagem respeita.
 */
.pw-kanban {
    flex: 1;
    display: flex;
    gap: 14px;
    overflow-x: auto;
    background: var(--pw-quadro-fundo);
    padding-left: 20px;
    padding-right: 20px;
    /* A coluna encostava na barra de cima. Enquanto o quadro nao tinha fundo
       proprio isso passava — nao havia o que separar; agora que a mesa e' uma
       superficie, a coluna precisa POUSAR nela, e nao nascer colada na borda.

       Nao muda a conta da altura: as colunas sao `max-height: 100%` contra a
       caixa de conteudo deste container, que o padding ja' encolheu. */
    padding-top: 12px;
    padding-bottom: 12px;
    min-height: 0;
}

.pw-kanban::after {
    content: '';
    /* `flex: 0 0` para nao encolher junto com as listas quando elas apertam. */
    flex: 0 0 1px;
    align-self: stretch;
}

/* A coluna precisa se ler como coluna.
   Antes: fundo `--color-bg` (#F8F9FB) sobre pagina quase da mesma cor, com
   borda `--color-border-light` (#F0F1F4) — tres tons vizinhos, e o limite da
   lista sumia. Os cards, sendo brancos, eram a unica coisa visivel, entao a
   coluna so' existia enquanto houvesse card dentro.
   Agora: borda no tom cheio e uma sombra rasa, que separa sem pesar. */
/* UMA COLUNA, E NAO TRES CAIXAS.
   A lista era: caixa com borda (a lista) contendo um cabecalho branco em cima
   de uma area cinza (os cards) contendo caixas brancas com borda (os cards).
   Quatro superficies para duas informacoes.

   Agora a coluna inteira e' UM tom — cabecalho, area de cards e o botao de
   adicionar, tudo no mesmo cinza — e o unico branco da tela e' o card. E' o
   que faz o card ler como objeto sobre a mesa em vez de retangulo dentro de
   retangulo. A borda saiu junto: o proprio tom ja' recorta a coluna contra o
   fundo do quadro. */
.pw-kanban__list {
    flex-shrink: 0;
    width: 280px;
    background: var(--pw-lista-fundo);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 0 0 1px rgba(15, 23, 42, .015);
    display: flex;
    flex-direction: column;
    max-height: 100%;
}

.pw-kanban__list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px 8px;
    /* Sem fio: o cabecalho e a area de cards sao a MESMA superficie agora, e
       um fio entre eles voltaria a dividir a coluna em dois andares. O que
       separa e' o card branco que comeca logo abaixo. */
    flex-shrink: 0;
}

.pw-kanban__list-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 650;
    font-size: 12.5px;
    letter-spacing: -.01em;
    min-width: 0;
}
/* AS DUAS CONTAGENS DO QUADRO USAM A MESMA PASTILHA.
   A da lista e a da fila dizem a mesma especie de coisa — quantos cards ha'
   aqui — e precisam ser reconheciveis como o mesmo elemento, em tamanhos
   diferentes por hierarquia (a lista e' o titulo, a fila e' subtitulo).

   A pastilha e' de tinta do proprio texto, e nao um cinza fixo: assim ela
   acompanha o tema e nunca aparece como um retangulo de cor estranha sobre a
   coluna. `tabular-nums` porque numeros empilhados em colunas diferentes so'
   se comparam de relance quando os digitos tem a mesma largura. */
.pw-kanban__list-header .pw-badge--count,
.pw-card-group-label__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    background: color-mix(in srgb, var(--color-text) 8%, transparent);
    color: color-mix(in srgb, var(--color-text) 52%, transparent);
}
.pw-kanban__list-header .pw-badge--count {
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 7px;
    min-width: 21px;
    height: 17px;
}

.pw-kanban__list-actions { display: flex; gap: 2px; }

.pw-kanban__list-drag-handle {
    cursor: grab;
    color: var(--color-text-muted);
    padding: 2px 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.pw-kanban__list-drag-handle:hover { color: var(--color-text); background: var(--color-bg-hover); }
.pw-kanban__list-drag-handle:active { cursor: grabbing; }

.pw-kanban__list--dragging { opacity: 0.4; }
.pw-kanban__list--drag-over { outline: 2px solid var(--color-primary); outline-offset: -2px; }

/* A AREA DOS CARDS E' MAIS ESCURA QUE ELES.
   `--color-bg` (#F8F9FB) contra `--color-bg-elevated` (#FFF) sao 3% de
   diferenca: o cartao branco nao subia da lista, so' ficava do lado dela. Com
   o fundo puxado para a cor da borda, o branco passa a ler como elevado — que
   e' o que a sombra sozinha nao conseguia dizer.

   `color-mix` e nao um hexadecimal: a mistura acompanha o tema. */
.pw-kanban__cards {
    flex: 1;
    overflow-y: auto;
    background: transparent;
    /* Calha menor na horizontal: 8px de cada lado somavam 16px de vazio numa
       coluna de 280px. Na vertical o espaco FICA — e' por ele que passa o
       indicador de "solta aqui" quando se arrasta. */
    padding: 6px 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 40px;
}

/* MODO PAGINA: janela baixa demais para o scroll por lista fazer sentido.
   Menos de tres cards visiveis por coluna e' pior que rolar a pagina — cada
   lista vira um poco estreito e o operador perde a sequencia. A classe entra
   por JS (ajustarScrollDoQuadro) e devolve o comportamento antigo. */
.pw-board-page--rola-pagina { height: auto !important; }
.pw-board-page--rola-pagina .pw-kanban { overflow-y: visible; }
.pw-board-page--rola-pagina .pw-kanban__list { max-height: none; }
.pw-board-page--rola-pagina .pw-kanban__cards { overflow-y: visible; }
/* A pilula nao serve aqui: nao ha' dobra dentro da lista. */
.pw-board-page--rola-pagina .pw-kanban__mais { display: none !important; }

/* "Deslize para ver mais" — pilula flutuante no fim da lista.
   `sticky` dentro do container que rola: acompanha o fim da area visivel em
   vez de ficar presa no fim do CONTEUDO, que so' apareceria depois de rolar
   tudo, quando ja' nao serve para nada.
   `order` alto porque ela e' escrita como PRIMEIRO filho (o fechamento da
   lista fica muito abaixo no blade) e precisa ser desenhada por ultimo. */
.pw-kanban__mais {
    order: 999;
    position: sticky;
    bottom: 0;
    align-self: center;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: -30px;          /* flutua SOBRE o ultimo card, nao empurra a lista */
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .01em;
    color: var(--color-text-muted);
    background: var(--color-bg-elevated, #fff);
    /* Sombra de contorno em vez de borda + sombra: a pastilha flutua SOBRE um
       card branco, e a borda cinza sobre branco desenhava um segundo retangulo
       bem no meio do texto que ela ja' esta' cobrindo. */
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-border) 70%, transparent),
                0 4px 10px rgba(15, 23, 42, .10);
    cursor: pointer;
    user-select: none;
    transition: color .15s, border-color .15s, transform .15s;
}
.pw-kanban__mais:hover {
    color: var(--color-text);
    border-color: var(--color-primary, #6366f1);
    transform: translateY(-1px);
}

.pw-kanban__card {
    /* SEM BORDA, so' sombra.
       O card tinha borda E sombra E cantos E a barra de prioridade: quatro
       recursos para dizer "isto e' um cartao", dentro de uma lista que tambem
       tem borda e sombra. O resultado era caixa dentro de caixa, com o mesmo
       peso nas duas — e a borda (#F0F1F4) era clara demais para separar,
       forte o bastante para competir. */
    background: var(--color-bg-elevated);
    /* Canto maior porque o card ficou mais denso: com pouco respiro interno,
       o canto duro faz o conteudo parecer espremido contra a quina. */
    border-radius: 10px;
    /* A esquerda tem folga a mais porque e' onde mora a barra de prioridade
       (5px a 8px): com 10px de padding o texto encostava nela com 2px de
       respiro e lia como se estivesse DENTRO da barra. */
    padding: 8px 10px 9px 15px;
    cursor: pointer;
    /* `all` animava tambem o que muda no arraste e no x-show; a lista inteira
       piscava a cada re-render. So' o que o hover mexe. */
    transition: box-shadow .15s ease, transform .15s ease;
    position: relative;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
/* O ANEL SUBSTITUI A BORDA.
   A borda marcava TODOS os cards o tempo todo; o anel marca o card sob o
   ponteiro. Mesma linha de 1px, so' que dita alguma coisa. */
.pw-kanban__card:hover {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 26%, transparent),
                0 4px 12px rgba(15, 23, 42, .09);
    transform: translateY(-1px);
}
.pw-kanban__card:active { transform: translateY(0); }
.pw-kanban__card--dragging {
    opacity: 0.4;
    transition: none !important;
}
#__card-drag-preview { flex-shrink: 0; box-sizing: border-box; }
/* Coluna vazia era um vazio cinza sem explicacao. O tracejado diz que ali
   se SOLTA um card — a unica coisa que aquela area faz. */
.pw-kanban__empty-drop {
    min-height: 68px;
    border-radius: 9px;
    border: 1px dashed color-mix(in srgb, var(--color-border) 75%, transparent);
    transition: background 0.15s, border-color 0.15s;
}
.pw-kanban__empty-drop.pw-card-group-zone--drag-over { background: var(--color-primary-light, rgba(59,130,246,.08)); }

/* DE PAREDE A MARCA.
   Colada na quina e de cima a baixo, a barra lia como BORDA do card — mais um
   contorno onde acabamos de tirar um. Recuada e com as duas pontas
   arredondadas ela volta a ser o que sempre foi: um sinal de prioridade. */
.pw-kanban__card-priority {
    position: absolute;
    left: 5px; top: 9px; bottom: 9px;
    width: 3px;
    border-radius: 3px;
}

.pw-kanban__card-body { padding-left: 4px; /* overridden below */ }

.pw-kanban__card-header {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.pw-kanban__card-check {
    width: 18px; height: 18px;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    transition: all var(--transition);
}
.pw-kanban__card-check:hover { border-color: var(--color-primary); }
.pw-kanban__card-check--done { background: var(--color-success); border-color: var(--color-success); color: #fff; }

.pw-kanban__card-title { font-size: 13px; font-weight: 500; line-height: 1.4; }

.pw-kanban__card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--color-text-muted);
}

.pw-kanban__card-meta span {
    display: flex;
    align-items: center;
    gap: 3px;
}

.pw-kanban__card-actions {
    position: absolute;
    top: 6px; right: 6px;
    display: none;
}
.pw-kanban__card:hover .pw-kanban__card-actions { display: flex; }

/* ============================================================
   Capa do card (redesign fluido, inspirado na modal) — .pw-cc
   ============================================================ */
.pw-cc { display: flex; flex-direction: column; gap: 3px; }
/* padding-right reserva o canto superior direito para o botão do timesheet (hover) */
.pw-cc__kicker { display: flex; align-items: center; gap: 7px; min-height: 15px; padding-right: 20px; }
.pw-cc__type {
    font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pw-cc__title {
    font-size: 13.5px; font-weight: 600; letter-spacing: -.012em; color: var(--color-text); line-height: 1.32;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Quando a tarja nao existe, o titulo passa a ser a primeira linha do card —
   e o canto superior direito e' de quem aparece no hover (o botao de tempo).
   Sem esta reserva o botao cobre o fim do nome da parte justamente enquanto o
   ponteiro esta' em cima, que e' quando se esta' lendo. */
/* `:first-of-type`, E NAO `:first-child`.
   Escrevi `:first-child` e a regra NUNCA valeu — o botao de cronometro seguiu
   cobrindo o fim do nome da parte no hover. A tarja e' um `<template x-if>`, e
   template E' um elemento no DOM: ele e' o primeiro filho, renderize ou nao.

   `:first-of-type` conta so' entre DIVs, e resolve os dois casos, porque o
   Alpine insere a tarja resolvida DEPOIS do template: com tarja, a primeira div
   e' a tarja e o titulo nao reserva nada (a tarja ja' reservou o canto); sem
   tarja, a primeira div e' o proprio titulo. */
.pw-cc__title:first-of-type { padding-right: 22px; }
.pw-cc__title strong { color: var(--color-primary); font-weight: 750; }
.pw-cc__title.pw-text-strikethrough { text-decoration: line-through; text-decoration-color: var(--color-text-muted); color: var(--color-text-muted); }
.pw-cc__acao {
    font-size: 11px; color: color-mix(in srgb, var(--color-text) 52%, transparent); margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* A LINHA DOS AUTOS QUEBRA — PORQUE A CONTA NAO FECHA.
   Espremi os tres dados numa linha so' para ganhar altura, e a conta desmente:
   numa coluna de 280px sobram 243px uteis dentro do card; o numero do processo
   come 165 e o selo do tribunal com os separadores come 54. Restam OITO pixels
   para a comarca — um caractere. Foi o que a tela mostrou: "· Á.", "· G...".

   Reticencia so' presta quando o pedaco que sobra ainda diz alguma coisa. Uma
   letra nao diz: e' sujeira ocupando o lugar do dado. Entao a comarca desce
   para a linha seguinte, com `row-gap` curto — custa ~14px nos cards que tem
   comarca, e esse e' o preco honesto de um dado que nao cabe. */
.pw-cc__line {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap; row-gap: 3px;
    min-width: 0; margin-top: 2px;
}
/* Comarca de nome longo ("Sao Jose do Rio Preto, SP") ainda pode estourar a
   linha inteira — ai' a reticencia serve, porque o que sobra continua legivel. */
.pw-cc__city { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-cc__cnj {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px;
    color: var(--color-text); letter-spacing: -.02em; font-variant-numeric: tabular-nums; opacity: .82;
}
.pw-cc__cnj--none { font-family: inherit; font-style: italic; color: var(--color-text-muted); font-size: 10.5px; opacity: 1; }
.pw-cc__sep { width: 3px; height: 3px; border-radius: 50%; background: var(--color-border); flex: none; }
.pw-cc__trib {
    display: inline-flex; align-items: center; font-size: 9.5px; font-weight: 700; letter-spacing: .03em;
    padding: 2px 6px; border-radius: 5px; text-transform: uppercase;
    background: color-mix(in srgb, var(--color-border) 45%, transparent);
    color: var(--color-text-muted);
}
.pw-cc__city { font-size: 10.5px; color: var(--color-text-muted); }
.pw-cc__chip {
    display: inline-flex; align-items: center; font-size: 9.5px; font-weight: 700; padding: 2px 8px;
    border-radius: 20px; letter-spacing: .02em; text-transform: uppercase; margin-left: auto;
}
.pw-cc__chip--ativo { background: #ccfbf1; color: #0f766e; }
.pw-cc__foot {
    display: flex; align-items: center; gap: 8px; margin-top: 6px;
    /* SEM FIO NENHUM. Ele cortava o card em dois blocos de peso igual, e o
       card ja' tem uma divisao: o bloco de identificacao (cinza, referencia)
       e o rodape (colorido, acao). O espaco separa; o fio dividia. */
}
/* TRES NIVEIS, E NAO DOIS.
   A coluna era #F1F2F5 sobre uma tela #F8F9FB: sete unidades de diferenca. Na
   pratica havia UM nivel — tela e coluna eram a mesma superficie, e so' o card
   se destacava. Sem a coluna recortada, o quadro nao parece feito de colunas;
   parece cards espalhados sobre um fundo.

   Agora a MESA e' o tom mais escuro, a coluna e' clara sobre ela, e o card e'
   branco sobre a coluna. Cada degrau tem uns dez pontos, que e' o minimo para
   se enxergar sem virar listra.

   Os dois temas nao podem sair da mesma formula. No claro se ESCURECE a mesa
   misturando a borda no fundo; no escuro nao ha' como escurecer (#0F0F1A ja' e'
   o chao), entao a mesa fica no fundo puro e quem sobe e' a coluna, indo em
   direcao ao tom do card. Uma formula so' inverteria a hierarquia no escuro —
   a mesa ficaria mais clara que a coluna. */
:root {
    --pw-quadro-fundo: color-mix(in srgb, var(--color-border) 58%, var(--color-bg));
    --pw-lista-fundo:  color-mix(in srgb, var(--color-border) 12%, var(--color-bg));
}
[data-theme="escuro"] {
    --pw-quadro-fundo: var(--color-bg);
    --pw-lista-fundo:  color-mix(in srgb, var(--color-bg-elevated) 52%, var(--color-bg));
}

/* AS QUATRO CORES DE URGENCIA, EM UM LUGAR SO'.
   Elas aparecem em dois sitios — o selo de prazo do card e o ponto do
   separador da fila — e TEM que ser as mesmas nos dois, senao a cor deixa de
   ser um codigo e vira enfeite. Como token, tambem sobrevivem ao tema escuro:
   #dc2626 sobre #0F0F1A e' quase ilegivel, e a versao clara so' existe porque
   o valor mora aqui e nao espalhado por seis regras. */
:root {
    --pw-urg-vencido:   #dc2626;
    --pw-urg-hoje:      #ea580c;
    --pw-urg-proximo:   #b45309;
    --pw-urg-audiencia: #0f766e;
}
[data-theme="escuro"] {
    --pw-urg-vencido:   #f87171;
    --pw-urg-hoje:      #fb923c;
    --pw-urg-proximo:   #fbbf24;
    --pw-urg-audiencia: #2dd4bf;
}

/* O UNICO ELEMENTO COLORIDO DO CARD.
   O card inteiro e' cinza e preto de proposito — para que a cor, quando
   aparece, signifique uma coisa so': quanto falta. */
.pw-cc__prazo {
    display: inline-flex; align-items: center; gap: 4px; flex: none;
    font-size: 10.5px; font-weight: 700; letter-spacing: .005em;
    padding: 2px 8px 2px 6px; border-radius: 999px; white-space: nowrap;
    color: var(--color-text-muted);
    background: color-mix(in srgb, currentColor 13%, transparent);
}
.pw-cc__prazo svg { width: 11px; height: 11px; opacity: .9; }
.pw-cc__prazo[data-estado="vencido"] {
    color: var(--pw-urg-vencido);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pw-urg-vencido) 30%, transparent);
}
.pw-cc__prazo[data-estado="hoje"]     { color: var(--pw-urg-hoje); }
.pw-cc__prazo[data-estado="proximo"]  { color: var(--pw-urg-proximo); }
.pw-cc__prazo[data-estado="agendado"] {
    color: color-mix(in srgb, var(--color-text) 50%, transparent);
    background: color-mix(in srgb, var(--color-border) 42%, transparent);
}
.pw-cc__metric { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--color-text-muted); font-weight: 600; }
.pw-cc__metric svg { width: 11px; height: 11px; }
.pw-cc__metric--done { color: #15803d; }
.pw-cc__tags { margin-left: auto; display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

/* ---- Capa de LEAD (variante rica do .pw-cc) ---- */
.pw-cc--lead { --lk-g:#15803d; --lk-g-bg:#dcfce7; --lk-y:#b45309; --lk-y-bg:#fef3c7; --lk-r:#b91c1c; --lk-r-bg:#fee2e2; }
.pw-cc--lead .lk-cc-score { margin-left: auto; flex: none; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 20px; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.pw-cc__signals { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; row-gap: 5px; }
.lk-cc-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 20px; letter-spacing: .01em; white-space: nowrap; }
.lk-cc-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.lk-cc-pill--danger { background: #fee2e2; color: #b91c1c; animation: lk-blink 1.1s step-end infinite; }
.lk-cc-pill--warn { background: #fef3c7; color: #b45309; }
.lk-cc-dot--pulse { animation: lk-pulse 1.4s ease-in-out infinite; }
@keyframes lk-blink { 0%, 100% { opacity: 1; } 60% { opacity: .2; } }
@keyframes lk-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(1.35); } }
.pw-cc__foot--lead { flex-wrap: wrap; row-gap: 6px; gap: 8px; }
.lk-cc-receita { font-size: 12px; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; }
.lk-cc-ticket { font-size: 9px; font-weight: 800; letter-spacing: .05em; padding: 2px 6px; border-radius: 5px; }
.lk-cc-ticket--high { background: #fef3c7; color: #b45309; }
.lk-cc-ticket--alto { background: #ede9fe; color: #6d28d9; }
.lk-cc-ticket--medio { background: #dbeafe; color: #1d4ed8; }
.lk-cc-ticket--baixo { background: #f1f5f9; color: #64748b; }
.lk-cc-tag { font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 20px; letter-spacing: .02em; }
.lk-cc-tag--green { background: #dcfce7; color: #15803d; }
.lk-cc-tag--red { background: #fee2e2; color: #b91c1c; }
.lk-cc-tag--teal { background: #ccfbf1; color: #0f766e; }
.lk-cc-tag--dark { background: #1f2937; color: #f9fafb; }
.lk-cc-tag--amber { background: #fef3c7; color: #b45309; }
.lk-cc-dias { font-size: 10.5px; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; }
.lk-cc-dias--warn { color: #b45309; }

/* Estágio do lead — stepper + perdas (CRM Pipeline) */
.pw-modal .pw-lead-stepper { display: flex; gap: 6px; margin-bottom: 10px; }
.pw-modal .pw-lead-step {
    flex: 1; min-width: 0; border: 1px solid var(--color-border); background: var(--color-bg-elevated);
    border-radius: 10px; padding: 9px 6px; font: inherit; font-size: 12px; font-weight: 600;
    color: var(--color-text-muted); cursor: pointer; text-align: center; transition: all .15s ease; line-height: 1.2;
}
.pw-modal .pw-lead-step small { display: block; font-size: 9px; font-weight: 800; letter-spacing: .05em; opacity: .65; margin-bottom: 2px; }
.pw-modal .pw-lead-step:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pw-modal .pw-lead-step--done { background: var(--color-primary-light); border-color: transparent; color: var(--color-primary); }
.pw-modal .pw-lead-step--cur { background: var(--color-primary); border-color: transparent; color: #fff; box-shadow: 0 4px 12px -3px rgba(99,102,241,.5); }
.pw-modal .pw-lead-step--cur small { opacity: .85; }
.pw-modal .pw-lead-loss { display: flex; flex-wrap: nowrap; gap: 5px; overflow-x: auto; }
.pw-modal .pw-loss-chip {
    font: inherit; font-size: 10.5px; font-weight: 600; padding: 4px 10px; border-radius: 20px; white-space: nowrap; flex: none;
    border: 1px solid var(--color-border); background: var(--color-bg-elevated); color: var(--color-text-muted);
    cursor: pointer; transition: all .15s ease;
}
.pw-modal .pw-loss-chip:hover { border-color: #dc2626; color: #dc2626; }
.pw-modal .pw-loss-chip--on { background: #fee2e2; border-color: transparent; color: #b91c1c; }

/* Qualificação — anel de score + barras (CRM Pipeline, fase 2) */
.pw-modal .pw-qual-summary { display: flex; align-items: center; gap: 16px; margin-bottom: 15px; }
.pw-modal .pw-qual-ring {
    --p: 0; width: 58px; height: 58px; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: conic-gradient(var(--color-primary) calc(var(--p) * 1%), var(--color-border) 0);
}
.pw-modal .pw-qual-ring b { width: 44px; height: 44px; border-radius: 50%; background: var(--color-bg-elevated); display: grid; place-items: center; font-size: 15px; font-weight: 800; color: var(--color-text); }
.pw-modal .pw-qual-bars { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pw-modal .pw-qual-bar { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; }
.pw-modal .pw-qual-bar span { font-size: 11px; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; }
.pw-modal .pw-qual-bar__t { height: 7px; border-radius: 5px; background: var(--color-border); overflow: hidden; }
.pw-modal .pw-qual-bar__f { height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--color-primary), #8b8ff7); transition: width .3s ease; }

/* Atendimento — anel de progresso geral (fase 3) */
.pw-modal .pw-atd-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 12px 14px; background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: 12px; }
.pw-modal .pw-atd-progress__t { display: flex; flex-direction: column; min-width: 0; }
.pw-modal .pw-atd-progress__t b { font-size: 13px; font-weight: 700; color: var(--color-text); }
.pw-modal .pw-atd-progress__t span { font-size: 11.5px; color: var(--color-text-muted); margin-top: 1px; }

/* Seções do CRM (Identificação/Rastreabilidade/Qualificação) — padrão header indigo + divisória */
.pw-modal .pw-lead-sec { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: 14px; padding: 15px 17px; margin-bottom: 14px; }
.pw-modal .pw-lead-sec__h { display: flex; align-items: center; gap: 8px; padding-bottom: 11px; margin-bottom: 15px; border-bottom: 1px solid var(--color-border); }
.pw-modal .pw-lead-sec__n { width: 19px; height: 19px; border-radius: 50%; background: var(--color-primary); color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 800; flex: none; }
.pw-modal .pw-lead-sec__t { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--color-primary); }

/* Atendimento — biblioteca de técnicas agrupada por fase (padrão de cartão acionável) */
.pw-modal .pw-atd-track { height: 10px; border-radius: 6px; background: var(--color-border); overflow: hidden; }
.pw-modal .pw-atd-track__f { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--color-primary), #8b8ff7); transition: width .35s ease; }
.pw-modal .pw-grouplbl { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); margin: 16px 2px 6px; }
.pw-modal .pw-grouplbl:first-child { margin-top: 2px; }
.pw-modal .pw-tlist { display: flex; flex-direction: column; gap: 9px; }
.pw-modal .pw-tcard { display: flex; gap: 12px; align-items: flex-start; background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: 12px; padding: 12px 14px; transition: opacity .15s; }
.pw-modal .pw-tcard--ok { opacity: .74; }
.pw-modal .pw-tcard__k { width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--color-primary-light); color: var(--color-primary); font-weight: 800; font-size: 12px; }
.pw-modal .pw-tcard--ok .pw-tcard__k { background: rgba(34,197,94,.16); color: #16a34a; }
.pw-modal .pw-tcard--skip .pw-tcard__k { background: rgba(217,119,6,.16); color: #d97706; }
.pw-modal .pw-tcard__b { flex: 1; min-width: 0; }
.pw-modal .pw-tcard__t { font-size: 13.5px; font-weight: 650; color: var(--color-text); }
.pw-modal .pw-tcard__d { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; line-height: 1.45; }
.pw-modal .pw-tcard__a { display: flex; gap: 6px; flex: none; padding-top: 1px; }
.pw-modal .pw-minibtn { font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); cursor: pointer; white-space: nowrap; transition: all .15s; }
.pw-modal .pw-minibtn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pw-modal .pw-minibtn--ok { background: #16a34a; border-color: transparent; color: #fff; }
.pw-modal .pw-minibtn--ok:hover { background: #15803d; border-color: transparent; color: #fff; }

/* Negociação — perfis (pills) + cartões Quando usar / Como aplicar */
.pw-modal .pw-neg-lbl { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--color-primary); margin: 6px 2px 10px; }
.pw-modal .pw-profiles { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.pw-modal .pw-prof { font-size: 12px; font-weight: 600; padding: 7px 13px; border-radius: 20px; border: 1px solid var(--color-border); color: var(--color-text-muted); background: var(--color-bg-elevated); cursor: pointer; transition: all .15s; }
.pw-modal .pw-prof:hover { border-color: #7c3aed; color: #7c3aed; }
.pw-modal .pw-prof--on { background: rgba(124,58,237,.14); color: #7c3aed; border-color: transparent; }
.pw-modal .pw-obcard { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: 12px; padding: 13px 15px; margin-bottom: 10px; border-left: 3px solid #7c3aed; }
.pw-modal .pw-obcard__t { font-size: 14px; font-weight: 700; color: var(--color-text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pw-modal .pw-obcard__meta { display: flex; gap: 16px; margin-top: 9px; flex-wrap: wrap; }
.pw-modal .pw-obcard__meta > div { flex: 1; min-width: 160px; }
.pw-modal .pw-obcard__meta .k { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 3px; }
.pw-modal .pw-obcard__meta .t { font-size: 12.5px; color: var(--color-text); line-height: 1.45; }
.pw-modal .pw-obchip { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px; }
.pw-modal .pw-obchip--valor { background: var(--color-primary-light); color: var(--color-primary); }
.pw-modal .pw-obchip--timing { background: rgba(217,119,6,.16); color: #b45309; }
.pw-modal .pw-obchip--emocional { background: rgba(34,197,94,.16); color: #15803d; }
.pw-modal .pw-obchip--confianca { background: rgba(29,78,216,.16); color: #1d4ed8; }
.pw-modal .pw-obcard__empty { text-align: center; padding: 22px 12px; color: var(--color-text-muted); font-size: 12.5px; }

.pw-kanban__cards--drag-over {
    background: rgba(99,102,241,0.08);
    border-radius: var(--radius-md);
    outline: 2px dashed var(--color-primary);
    outline-offset: -2px;
}

/* ---- Card Groups ---- */
/* O SEPARADOR E' FAIXA DA LISTA, NAO ROTULO SOLTO.
   Antes ele flutuava entre dois cartoes, com um filete acima que parecia
   fechar o grupo anterior em vez de abrir o proximo. Agora ocupa a largura
   inteira da coluna (a margem negativa cancela a calha) e ACOMPANHA A ROLAGEM:
   numa lista de trinta processos, saber em que grupo se esta' deixa de exigir
   rolar de volta ate' o titulo. */
/* ESTRUTURA, E NAO RUIDO.
   Era texto cinza-maiusculo sobre fundo cinza, no MESMO tom do texto
   secundario dos cards — lia como mais uma linha de miudezas. Agora tem tres
   partes: um ponto que da' a cor semantica da fila, o rotulo, e a contagem
   encostada na direita (que so' se obtinha contando card a card).

   O fio de baixo saiu: o card branco que comeca logo abaixo ja' e' a
   separacao, e o fio somava uma terceira divisao horizontal por fila. */
.pw-card-group-label {
    position: sticky;
    top: -6px;                       /* cola no topo, descontada a calha */
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 46%, transparent);
    background: var(--pw-lista-fundo);
    padding: 10px 10px 6px;
    margin: 3px -6px 0;              /* sangra ate' a borda da lista */
}
.pw-card-group-label__dot {
    width: 5px; height: 5px; border-radius: 50%; flex: none;
    background: var(--pw-grupo, var(--color-border));
}
.pw-card-group-label__txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-card-group-label__n {
    margin-left: auto;
    font-size: 9.5px;
    font-weight: 700;
    padding: 0 6px;
    min-width: 18px;
    height: 15px;
}
/* A MESMA cor do selo de prazo do card. Uma fila chamada "Prazo Recursal" e um
   card que vence em tres dias tem que usar o mesmo ambar, senao a cor vira
   enfeite: o operador aprende a ler a cor uma vez, e ela vale no quadro todo. */
.pw-card-group-label[data-grupo="audiencia"] { --pw-grupo: var(--pw-urg-audiencia); }
.pw-card-group-label[data-grupo="recursal"]  { --pw-grupo: var(--pw-urg-proximo); }
.pw-card-group-label[data-grupo="comum"]     { --pw-grupo: var(--pw-urg-vencido); }
.pw-card-group-label[data-grupo="outros"]    { --pw-grupo: color-mix(in srgb, var(--color-text) 22%, transparent); }
/* O primeiro nao precisa do respiro de cima: o cabecalho da lista ja' o da'. */
.pw-kanban__cards > .pw-card-group-label:first-child { margin-top: 0; }
.pw-card-group-zone { min-height: 4px; display: flex; flex-direction: column; gap: 8px; }
.pw-card-group-zone--drag-over {
    background: rgba(99,102,241,0.08);
    border-radius: var(--radius-md);
    outline: 2px dashed var(--color-primary);
    outline-offset: -2px;
}

.pw-kanban__drag-handle {
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
    width: 16px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    color: var(--color-text-muted);
    opacity: 0;
    border-radius: 3px;
    z-index: 2;
    transition: opacity 0.15s;
}
.pw-kanban__drag-handle:active { cursor: grabbing; }
.pw-kanban__card:hover .pw-kanban__drag-handle { opacity: 0.5; }
.pw-kanban__card-body { padding-left: 16px; }

.pw-kanban__add-card {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: 12px;
    transition: all var(--transition);
    width: 100%;
    text-align: left;
}
/* O botao vive DENTRO da coluna cinza. Sem fundo proprio ele e' so' texto, e
   o hover e' o unico momento em que precisa parecer clicavel. */
.pw-kanban__add-card {
    font-weight: 600;
    color: color-mix(in srgb, var(--color-text) 42%, transparent);
    margin-top: 2px;
}
.pw-kanban__add-card:hover {
    background: color-mix(in srgb, var(--color-bg-elevated) 70%, transparent);
    color: var(--color-text);
}

/* Sortable ghost */
.sortable-ghost { opacity: 0.4; }
.sortable-chosen { box-shadow: var(--shadow-lg); }

/* ────────────────────────────────────────────────────── */
/* Página de Tempo, indicador e timer flutuante */
/* ────────────────────────────────────────────────────── */

/* === Time Tracking Page === */
.pw-time-stats {
    display: flex;
    gap: 24px;
    padding: 16px 20px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
}
.pw-time-stats__item { text-align: center; }
.pw-time-stats__label { display: block; font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.pw-time-stats__value { display: block; font-size: 22px; font-weight: 700; color: var(--color-primary); }

.pw-timer-control {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
}
.pw-timer-control__input { flex: 1; }
.pw-timer-control__display { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 100px; text-align: center; }

.pw-period-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--color-border);
}
.pw-period-tab {
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--transition);
}
.pw-period-tab:hover { color: var(--color-text); }
.pw-period-tab--active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* Bar Chart */
.pw-bar-chart { display: flex; gap: 8px; align-items: flex-end; height: 160px; }
.pw-bar-chart__item { flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; height: 100%; }
.pw-bar-chart__bar-container { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.pw-bar-chart__bar { width: 60%; background: var(--color-primary); border-radius: var(--radius-sm) var(--radius-sm) 0 0; min-height: 4px; transition: height 0.5s ease; }
.pw-bar-chart__label { font-size: 10px; color: var(--color-text-muted); margin-top: 4px; }
.pw-bar-chart__value { font-size: 10px; font-weight: 600; margin-top: 2px; }

/* Context Items */
.pw-context-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--color-border-light); }
.pw-context-item:last-child { border-bottom: none; }
.pw-context-item__info { min-width: 160px; }
.pw-context-item__name { display: block; font-weight: 500; font-size: 13px; }
.pw-context-item__bar-wrapper { flex: 1; height: 8px; background: var(--color-bg); border-radius: 4px; overflow: hidden; }
.pw-context-item__bar { height: 100%; background: var(--color-primary); border-radius: 4px; transition: width 0.5s ease; }
.pw-context-item__time { font-weight: 600; font-size: 13px; min-width: 60px; text-align: right; }

/* Table */
.pw-table { width: 100%; border-collapse: collapse; }
.pw-table th { text-align: left; font-size: 11px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; padding: 8px; border-bottom: 1px solid var(--color-border); }
.pw-table td { padding: 8px; font-size: 13px; border-bottom: 1px solid var(--color-border-light); }

/* === Timer Indicator === */
.pw-timer-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--color-primary-light);
    border-radius: 20px;
    cursor: pointer;
    transition: all var(--transition);
}
.pw-timer-indicator:hover { background: var(--color-primary); color: #fff; }
.pw-timer-indicator__dot {
    width: 8px; height: 8px;
    background: var(--color-danger);
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}
.pw-timer-indicator__time { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* === Floating Timer === */
.pw-floating-timer {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 300px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 500;
    overflow: hidden;
}
.pw-floating-timer__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--color-primary);
    color: #fff;
}
.pw-floating-timer__header .pw-btn-icon { color: #fff; }
.pw-floating-timer__title { font-weight: 600; font-size: 13px; }
.pw-floating-timer__body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.pw-floating-timer__display { font-size: 32px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; color: var(--color-primary); }
.pw-floating-timer__controls { display: flex; justify-content: center; }
.pw-floating-timer__footer {
    display: flex;
    justify-content: space-between;
    padding: 8px 14px;
    border-top: 1px solid var(--color-border);
    font-size: 12px;
}

/* ────────────────────────────────────────────────────── */
/* Configurações e Checklist */
/* ────────────────────────────────────────────────────── */

/* === Settings === */
.pw-settings-page { max-width: 680px; }

.pw-integration-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-radius: var(--radius-md);
    background: var(--color-bg);
}
.pw-integration-status--connected { background: #D1FAE5; }
.pw-integration-status__info { display: flex; align-items: center; gap: 10px; }

.pw-calendars-list { margin-top: 16px; }
.pw-calendars-list h4 { font-size: 13px; margin-bottom: 8px; }

.pw-calendar-setting {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}
.pw-calendar-setting span:nth-child(2) { flex: 1; font-size: 13px; }

.pw-theme-selector { display: flex; gap: 16px; }
.pw-theme-option {
    text-align: center;
    cursor: pointer;
    padding: 8px;
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    transition: all var(--transition);
}
.pw-theme-option--active { border-color: var(--color-primary); }

.pw-theme-preview {
    width: 120px; height: 80px;
    border-radius: var(--radius-md);
    display: flex;
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.pw-theme-preview--light  { background: #F8F9FB; }
.pw-theme-preview--claro  { background: #F8F9FB; }
.pw-theme-preview--escuro { background: #0F0F1A; }
.pw-theme-preview--dark   { background: #0F0F1A; }
.pw-theme-preview--vieira { background: #F5F6FA; }
.pw-theme-preview__sidebar { width: 30%; }
.pw-theme-preview--light  .pw-theme-preview__sidebar { background: #1E1F2B; }
.pw-theme-preview--claro  .pw-theme-preview__sidebar { background: #FFFFFF; border-right: 2px solid #E2E3E8; }
.pw-theme-preview--escuro .pw-theme-preview__sidebar { background: #0A0A14; }
.pw-theme-preview--dark   .pw-theme-preview__sidebar { background: #0A0A14; }
.pw-theme-preview--vieira .pw-theme-preview__sidebar { background: #FFFFFF; border-right: 2px solid #E5E3DE; }
.pw-theme-preview__main { flex: 1; }

/* === Checklist === */
.pw-checklist__item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
}
.pw-checklist__item input[type="checkbox"] { flex-shrink: 0; }
.pw-checklist__item .pw-input { flex: 1; }

/* ────────────────────────────────────────────────────── */
/* Páginas de autenticação */
/* ────────────────────────────────────────────────────── */

/* === Auth Pages === */
.pw-auth-body { display: flex; min-height: 100vh; background: var(--color-bg); align-items: center; justify-content: center; }
.pw-auth-container { width: 100%; max-width: 400px; padding: 20px; }
.pw-auth-card {
    background: var(--color-bg-elevated);
    padding: 32px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
}
.pw-auth-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.pw-auth-logo h1 { font-size: 24px; font-weight: 700; }
.pw-auth-footer { text-align: center; margin-top: 16px; font-size: 13px; }

/* ────────────────────────────────────────────────────── */
/* pw-data-table — Tabela de dados padrão                */
/* Uso:                                                   */
/*   <div class="pw-data-table">                          */
/*     <table>                                            */
/*       <thead><tr>                                      */
/*         <th><a class="pw-sort-th" href="...">          */
/*           Col <span class="pw-sort-icon [asc|desc]">   */
/*             <i class="pw-sort-up"></i>                 */
/*             <i class="pw-sort-down"></i>               */
/*           </span></a></th>                             */
/*       </tr></thead>                                    */
/*       <tbody>                                          */
/*         <tr class="pw-data-table__row--clickable">     */
/*           <td class="pw-data-table__id">1</td>         */
/*           <td class="pw-data-table__primary">Nome</td> */
/*           <td class="pw-data-table__muted">Data</td>   */
/*           <td class="pw-data-table__num">R$ 100</td>   */
/*           <td class="pw-data-table__actions">          */
/*             <button class="pw-btn-icon">...</button>   */
/*           </td>                                        */
/*         </tr>                                          */
/*       </tbody>                                         */
/*     </table>                                           */
/*   </div>                                               */
/*   <x-table-pagination :paginator="$items" />           */
/* ────────────────────────────────────────────────────── */

/* === Sort header (global — substitui sort-th inline em cada blade) === */
.pw-sort-th {
    display: inline-flex;
    align-items: center;
    gap: 0;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    text-decoration: none;
    color: inherit;
    font-weight: 600;
}
.pw-sort-th:hover { opacity: 0.75; }

.pw-sort-icon {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    vertical-align: middle;
    margin-left: 5px;
    opacity: .3;
}
.pw-sort-icon.asc  .pw-sort-up,
.pw-sort-icon.desc .pw-sort-down { opacity: 1; }
.pw-sort-up, .pw-sort-down { display: block; width: 0; height: 0; }
.pw-sort-up   { border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid currentColor; }
.pw-sort-down { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }

/* === Wrapper === */
.pw-data-table {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    /*
     * SEM `overflow:hidden` — ele PRENDIA o cabecalho fixo.
     *
     * Um elemento `sticky` gruda no ancestral que ROLA, e `overflow:hidden`
     * cria um desses. Como o container tem a altura da tabela inteira, o
     * cabecalho "grudava" no topo dele — que sai da tela junto com a primeira
     * linha. A regra estava escrita e nao fazia nada.
     *
     * Ele estava ali para o canto arredondado nao vazar; isso agora vem das
     * celulas das pontas, abaixo. E o menu de acoes, que era o outro motivo
     * para clipar, virou `fixed`.
     */
    box-shadow: var(--shadow-sm);
}

/* O arredondamento que o `overflow:hidden` dava, agora nas quinas da tabela. */
.pw-data-table thead tr:first-child th:first-child { border-top-left-radius:  var(--radius-lg); }
.pw-data-table thead tr:first-child th:last-child  { border-top-right-radius: var(--radius-lg); }
.pw-data-table tbody tr:last-child td:first-child  { border-bottom-left-radius:  var(--radius-lg); }
.pw-data-table tbody tr:last-child td:last-child   { border-bottom-right-radius: var(--radius-lg); }

/* === Table === */
.pw-data-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

/* === Header === */
.pw-data-table thead tr {
    border-bottom: 1.5px solid var(--color-border);
    background: transparent;
}
/* CABECALHO FIXO: TENTADO E RETIRADO — fica o registro para nao se repetir.

   `position:sticky` gruda no ancestral que ROLA. Aqui ha' `.pw-content` com
   `overflow:auto` entre a tabela e a janela: o cabecalho passa a grudar no topo
   DELE, que e' mais alto que a tela e desce junto com a rolagem da janela. O
   resultado e' uma regra que existe e nao faz nada — medido: `sticky` aplicado
   e o `<th>` a 388px acima da janela depois de rolar.

   Tirar `overflow:hidden` de `.pw-data-table` (feito, e mantido) nao bastou: o
   `.pw-content` continua prendendo, e ele e' o casco de TODAS as telas — mexer
   nele por causa desta valeria uma verificacao que nao cabe aqui.

   Melhor sem a regra do que com uma que promete e nao entrega. */
.pw-data-table th {
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    color: var(--color-primary);
    white-space: nowrap;
}
.pw-data-table th a { color: inherit; text-decoration: none; }

/* === Rows === */
.pw-data-table tbody tr {
    border-bottom: 1px solid var(--color-border-light, rgba(0,0,0,.06));
    transition: background 150ms ease;
}
.pw-data-table tbody tr:last-child { border-bottom: none; }
.pw-data-table tbody tr:hover { background: var(--color-bg-hover); }
.pw-data-table tbody tr.pw-data-table__row--clickable { cursor: pointer; }

/* === Cells === */
.pw-data-table td {
    padding: 12px 14px;
    vertical-align: middle;
    color: var(--color-text);
}

/* === Cell modifiers === */
.pw-data-table__id {
    color: var(--color-text-muted);
    font-size: 11px;
    width: 48px;
    white-space: nowrap;
}
.pw-data-table__primary { font-weight: 600; }
.pw-data-table__muted   { color: var(--color-text-muted); font-size: 12px; }
.pw-data-table__mono    { font-family: monospace; font-size: 12px; color: var(--color-text-muted); }
.pw-data-table__num     { font-weight: 600; }
.pw-data-table__sm      { font-size: 12px; }

/* === Action buttons (end of row, appear on hover) === */
.pw-data-table__actions {
    width: 1px;
    white-space: nowrap;
    padding-right: 10px !important;
    padding-left: 8px !important;
    opacity: 0;
    /* Delay no desaparecimento: botões ficam visíveis por 400ms após o mouse sair,
       dando tempo de alcançá-los sem que sumam no caminho. */
    transition: opacity 150ms ease 400ms;
}
.pw-data-table tbody tr:hover .pw-data-table__actions,
.pw-data-table__actions:hover {
    opacity: 1;
    transition: opacity 100ms ease 0ms; /* aparece imediatamente */
}
.pw-data-table__actions .pw-btn-icon { vertical-align: middle; }

/* === Empty state === */
.pw-data-table__empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-muted);
    font-size: 14px;
}

/* === Pagination footer === */
.pw-table-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 13px;
    color: var(--color-text-muted);
    flex-wrap: wrap;
}
.pw-table-foot__total {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
}
.pw-table-foot .pw-filter-pill {
    height: 28px;
    padding: 0 24px 0 10px;
}
.pw-table-foot .pw-filter-pill::after {
    right: 8px;
    border-left-width: 3px;
    border-right-width: 3px;
    border-top-width: 4px;
}
.pw-table-foot .pw-filter-select { font-size: 12px; }
.pw-table-foot__links { margin-left: auto; }
.pw-table-foot__links nav { display: flex; }
/* ────────────────────────────────────────────────────── */
/* Utilitários + Responsivo */
/* ────────────────────────────────────────────────────── */

/* === Utilities === */
.pw-text-muted { color: var(--color-text-muted); }
.pw-text-danger { color: var(--color-danger); }
.pw-text-bold { font-weight: 600; }
.pw-text-center { text-align: center; }
.pw-text-xs { font-size: 11px; }
.pw-text-strikethrough { text-decoration: line-through; opacity: 0.6; }

.pw-spin { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* === Responsive === */
@media (max-width: 768px) {
    .pw-sidebar { width: var(--sidebar-collapsed); }
    .pw-sidebar + .pw-main { margin-left: var(--sidebar-collapsed); }
    .pw-calendar-split__board { display: none; }
    .pw-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .pw-kanban__list { width: 260px; }
    .pw-form-row { flex-direction: column; }
}

/* ────────────────────────────────────────────────────── */
/* Áreas de trabalho e quadros na sidebar */
/* ────────────────────────────────────────────────────── */

/* === Workspace Page === */
.pw-workspace-page { padding: 0; }

.pw-workspace-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.pw-workspace-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text);
}

/* Workspace Tabs */
.pw-workspace-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.pw-workspace-tabs::-webkit-scrollbar { display: none; }

.pw-workspace-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    position: relative;
}
.pw-workspace-tab:hover { color: var(--color-text); background: var(--color-bg-hover); }
.pw-workspace-tab--active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 600;
}
.pw-workspace-tab__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.pw-workspace-tab__actions {
    display: inline-flex;
    gap: 2px;
    margin-left: 4px;
    opacity: 0;
    transition: opacity var(--transition);
}
.pw-workspace-tab:hover .pw-workspace-tab__actions { opacity: 1; }

/* Workspace Section */
.pw-workspace-section {
    margin-bottom: 36px;
}
.pw-workspace-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.pw-workspace-section__name {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pw-workspace-section__name h2 {
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text);
}
.pw-workspace-section__icon {
    width: 32px; height: 32px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pw-workspace-badge {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-bg-hover);
    padding: 2px 6px;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Boards empty state */
.pw-boards-empty {
    padding: 20px;
    color: var(--color-text-muted);
    font-size: 13px;
}

/* === Sidebar Workspace === */
.pw-sidebar__section--workspaces { /* layout handled by pw-sidebar__context */ }

.pw-sidebar__workspace { margin-bottom: 2px; }

/* Row containers para hover dos action buttons */
.pw-sidebar__workspace-row {
    display: flex;
    align-items: center;
    position: relative;
}
.pw-sidebar__workspace-row .pw-sidebar__workspace-toggle { flex: 1; }
.pw-sidebar__workspace-row:hover .pw-sidebar__cal-action-btn { display: flex; }

.pw-sidebar__board-row {
    display: flex;
    align-items: center;
    position: relative;
}
.pw-sidebar__board-row .pw-sidebar__board-link { flex: 1; }
.pw-sidebar__board-row:hover .pw-sidebar__cal-action-btn { display: flex; }

.pw-sidebar__workspace-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-sidebar);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition);
    text-align: left;
}
.pw-sidebar__workspace-toggle:hover { background: var(--color-bg-sidebar-hover); }

.pw-sidebar__workspace-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pw-sidebar__workspace-chevron {
    flex-shrink: 0;
    transition: transform var(--transition);
    color: var(--color-text-muted);
}
.pw-sidebar__workspace-chevron--open { transform: rotate(180deg); }

.pw-sidebar__workspace-boards { padding-left: 20px; }

.pw-sidebar__board-link {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    font-size: 12px;
    color: var(--color-text-sidebar);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background var(--transition);
}
.pw-sidebar__board-link:hover { background: var(--color-bg-sidebar-hover); color: var(--color-text-sidebar-active); }
.pw-sidebar__board-link--active { background: var(--color-bg-sidebar-active); color: var(--color-text-sidebar-active); }

.pw-sidebar__board-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.pw-sidebar__board-empty {
    display: block;
    padding: 4px 8px;
    font-size: 11px;
    color: var(--color-text-muted);
    font-style: italic;
}

/* Small danger icon button */
.pw-btn-icon--xs {
    width: 20px !important; height: 20px !important;
    padding: 3px !important;
    border-radius: var(--radius-sm) !important;
}
.pw-btn-icon--danger { color: var(--color-danger) !important; }

/* ────────────────────────────────────────────────────── */
/* Modal de card — campos gerais */
/* ────────────────────────────────────────────────────── */

/* ============================================
   TAREFA 2 — NOVOS ESTILOS
   ============================================ */

/* Modal XL */
.pw-modal--xl { width: 900px; max-width: 95vw; }

/* Modal Tabs */
.pw-modal-tabs-wrapper {
    display: flex;
    align-items: center;
    background: var(--color-bg-elevated);
    border-bottom: 1px solid var(--color-border);
}
.pw-tabs-chevron {
    flex-shrink: 0;
    width: 26px; height: 100%;
    min-height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none;
    color: var(--color-text-muted);
    font-size: 18px; line-height: 1;
    cursor: pointer; border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}
.pw-tabs-chevron:hover { background: rgba(0,0,0,.08); color: var(--color-text); }
.pw-modal-tabs {
    display: flex;
    gap: 2px;
    padding: 0 4px;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
}
.pw-modal-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition), border-color var(--transition);
}
.pw-modal-tab:hover { color: var(--color-text); }
.pw-modal-tab--active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* ── Modal: rail vertical de navegação (substitui as abas horizontais) ── */
.pw-modal-shell { display: flex; align-items: stretch; }
.pw-modal-rail {
    flex: 0 0 210px;
    align-self: flex-start;
    position: sticky;
    top: 0;
    max-height: 90vh;
    overflow-y: auto;
    padding: 12px 8px 16px;
    background: var(--color-bg-elevated);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 1px;
    z-index: 3;
}
.pw-modal-rail::-webkit-scrollbar { width: 8px; }
.pw-modal-rail::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 8px; }
.pw-modal-rail__group {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding: 12px 10px 5px;
}
.pw-modal-rail__group:first-child { padding-top: 2px; }
.pw-rail-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.pw-rail-item__icon { flex: 0 0 auto; width: 16px; height: 16px; color: var(--color-text-muted); transition: color .12s ease; }
.pw-rail-item__lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-rail-item:hover { background: rgba(99,102,241,.08); }
.pw-rail-item--active { background: var(--color-primary-light); color: var(--color-primary); font-weight: 600; }
.pw-rail-item--active .pw-rail-item__icon { color: var(--color-primary); }
.pw-rail-item .pw-badge--count { margin-left: auto; flex: 0 0 auto; }
.pw-modal-main { flex: 1 1 auto; min-width: 0; }
@media (max-width: 640px) {
    .pw-modal-rail { flex-basis: 168px; }
}

/* Checklist full-width */
.pw-checklist--full { display: flex; flex-direction: column; gap: 6px; }
.pw-checklist__item--full {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.pw-checklist__check { flex-shrink: 0; margin-top: 3px; width: 16px; height: 16px; cursor: pointer; }
.pw-checklist__content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pw-checklist__item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.pw-checklist__date-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-muted);
    font-size: 12px;
}
.pw-checklist__remove { flex-shrink: 0; align-self: flex-start; }

/* Flow button */
.pw-btn--xs {
    padding: 3px 8px !important;
    font-size: 11px !important;
    height: auto !important;
}
.pw-btn--flow {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    background: var(--color-bg-elevated);
    cursor: pointer;
    transition: all var(--transition);
}
.pw-btn--flow:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pw-btn--flow--active { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); }

/* Progress bar */
.pw-checklist__progress { display: flex; align-items: center; gap: 8px; }
.pw-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--color-border);
    border-radius: 3px;
    overflow: hidden;
}
.pw-progress-bar__fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: 3px;
    transition: width 300ms ease;
}

/* Members */
.pw-members-group { margin-bottom: 20px; }
.pw-members-group__header h4 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 12px;
}
.pw-members-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.pw-member-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.pw-member-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pw-member-avatar--supervisor { background: var(--color-orange); }
.pw-member-name { flex: 1; font-size: 13px; }
.pw-member-add { display: flex; gap: 8px; align-items: center; }

/* Custom Fields */
.pw-custom-fields { display: flex; flex-direction: column; gap: 8px; }
.pw-custom-field {
    display: grid;
    grid-template-columns: 1fr 1fr auto auto;
    gap: 8px;
    align-items: center;
}
.pw-field-preview {
    display: flex;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--color-border-light);
    font-size: 13px;
}
.pw-field-preview__name { color: var(--color-text-muted); font-weight: 500; flex-shrink: 0; }
.pw-field-preview__value { color: var(--color-text); }

/* Labels */
.pw-labels-section { display: flex; flex-direction: column; gap: 12px; }
.pw-labels-list { display: flex; flex-direction: column; gap: 6px; }
.pw-label-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 13px;
    transition: background var(--transition);
}
.pw-label-option:hover { background: var(--color-bg-hover); }
.pw-label-option input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; }
.pw-label-dot { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }
.pw-new-label__form .pw-form-row { align-items: center; }
.pw-color-input {
    width: 40px; height: 32px;
    padding: 2px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: none;
}

/* Card Links */
.pw-links-section { margin-bottom: 8px; }
.pw-links-list { display: flex; flex-direction: column; gap: 6px; }
.pw-link-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 13px;
}
.pw-link-item__title { flex: 1; }
.pw-priority-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pw-link-add { margin-top: 8px; }
.pw-link-search { margin: 8px 0 4px; }
.pw-link-results {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    max-height: 200px;
    overflow-y: auto;
}
.pw-link-result {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    text-align: left;
    background: var(--color-bg-elevated);
    border: none;
    cursor: pointer;
    transition: background var(--transition);
}
.pw-link-result:hover { background: var(--color-bg-hover); }

/* Divider */
.pw-divider { height: 1px; background: var(--color-border); margin: 12px 0; }

/* Text utilities */
.pw-text-xs { font-size: 11px; }
.pw-text-sm { font-size: 12px; }

/* Section actions */
.pw-modal__section-actions { display: flex; justify-content: flex-end; padding-top: 8px; border-top: 1px solid var(--color-border-light); }

/* Subcard Modal */
.pw-modal-overlay--subcard { z-index: 1100; }
.pw-subcard-header { flex-direction: column; align-items: flex-start; gap: 4px; position: relative; }
.pw-subcard-header .pw-btn-icon { position: absolute; top: 0; right: 0; }
.pw-subcard-parent {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--color-text-muted);
}
.pw-subcard-parent__label { font-weight: 500; }
.pw-subcard-parent__title {
    font-weight: 600;
    color: var(--color-primary);
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pw-subcard-item-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
}

/* Loading state */
.pw-loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px;
    color: var(--color-text-muted);
    font-size: 13px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.pw-spin { animation: spin 1s linear infinite; }

/* Settings Labels CRUD */
.pw-labels-mgmt { display: flex; flex-direction: column; gap: 6px; }
.pw-label-item--editable,
.pw-label-item--fixo {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
/* Item DO SISTEMA nas listas do financeiro: mesma caixa, sem ações, e um
   fundo levemente rebaixado dizendo que não se edita (14/09/2026). */
.pw-label-item--fixo { background: color-mix(in srgb, var(--color-border) 22%, transparent); }
/* SUBCATEGORIAS, indentadas sob a categoria (14/09/2026): mesma linha, um
   passo para dentro e uma seta dizendo "filha de". */
.pw-sublista { border-top: 1px solid var(--color-border); background: var(--color-bg-elevated, var(--color-bg)); }
.pw-sublista__item + .pw-sublista__item { border-top: 1px dashed var(--color-border); }
.pw-sublista__seta { color: var(--color-text-muted); font-size: 13px; margin-right: 2px; }
.pw-sublista .pw-label-item__actions, .pw-label-item--fixo .pw-label-item__actions { opacity: 1; }
.pw-label-item__view {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
}
.pw-label-item__actions {
    display: flex;
    gap: 4px;
    margin-left: auto;
    opacity: 0;
    transition: opacity var(--transition);
}
.pw-label-item--editable:hover .pw-label-item__actions { opacity: 1; }
.pw-label-item__edit { padding: 8px; background: var(--color-bg-hover); }
.pw-new-label-form { padding: 12px; background: var(--color-bg-hover); border-radius: var(--radius-md); }
.pw-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Input xs */
.pw-input--xs {
    padding: 2px 6px;
    height: 26px;
    font-size: 11px;
}

.pw-btn-icon--danger:hover { background: var(--color-danger) !important; color: white !important; }

/* ============================================================
   Sub-tabs (TimeSheet / Anotações)
   ============================================================ */
.pw-subtabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 16px;
}
.pw-subtab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color .15s, border-color .15s;
}
.pw-subtab:hover { color: var(--color-text); }
.pw-subtab--active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.pw-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--color-text-muted);
    margin: 0 0 10px;
}
.pw-modal__header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.pw-modal__header-deactivate {
    font-size: 12px;
    color: var(--color-danger, #ef4444);
    border-color: var(--color-danger, #ef4444);
    padding: 4px 10px;
    opacity: 0.8;
}
.pw-modal__header-deactivate:hover { opacity: 1; }

/* ────────────────────────────────────────────────────── */
/* Modal de card — seções judiciais (pedidos, andamentos, audiências, etc.) */
/* ────────────────────────────────────────────────────── */

/* ===== Judicial Card Legal Info ===== */
.pw-kanban__card-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.pw-kanban__card-title strong {
    font-weight: 700;
    color: var(--color-primary, #6366f1);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
}

.pw-kanban__card-legal {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 2px;
}

.pw-kanban__card-legal-cnj {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 10px;
    color: var(--color-text-muted);
    background: var(--color-border-light);
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    letter-spacing: 0.02em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pw-kanban__card-legal-meta {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.pw-kanban__card-legal-tribunal {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-primary, #6366f1);
    background: color-mix(in srgb, var(--color-primary, #6366f1) 10%, transparent);
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
}

.pw-kanban__card-legal-location {
    font-size: 10px;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 3px;
}

.pw-kanban__card-legal-location::before {
    content: '·';
    opacity: 0.4;
}

/* Title readonly in modal */
.pw-kanban__card-title-readonly {
    padding: 8px 12px;
    background: var(--color-bg-subtle, rgba(0,0,0,0.03));
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    cursor: default;
}

.pw-kanban__card-title-readonly strong {
    color: var(--color-primary, #6366f1);
    font-weight: 700;
}

/* ===== Tab Pedidos ===== */
.pw-pedidos {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0;
}

.pw-pedidos__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 20px;
    color: var(--color-text-muted);
    text-align: center;
}

.pw-pedidos__empty svg { opacity: 0.35; }
.pw-pedidos__empty p { font-size: 13px; margin: 0; }

.pw-pedido-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    transition: border-color 0.15s;
}

.pw-pedido-item:hover { border-color: var(--color-primary, #6366f1); }

.pw-pedido-item__number {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-primary, #6366f1) 12%, transparent);
    color: var(--color-primary, #6366f1);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pw-pedido-item__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pw-pedido-item__descricao {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.5;
}

.pw-pedido-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.pw-pedido-item__valor,
.pw-pedido-item__honorarios {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--color-text-muted);
}

.pw-pedido-item__valor svg { color: #22c55e; }
.pw-pedido-item__honorarios svg { color: var(--color-primary, #6366f1); }

.pw-pedido-item__valor--sem {
    font-size: 11px;
    font-style: italic;
    color: var(--color-text-muted);
    opacity: 0.7;
}

/* ============================================================
   Card Timer Widget (Tempo Tab)
   ============================================================ */
.pw-card-timer-widget {
    background: #f8fafc;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    margin-bottom: 16px;
}
.pw-timer-display-large {
    font-size: 36px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    letter-spacing: 2px;
    margin-bottom: 12px;
}
.pw-timer-controls-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}
.pw-timer-stop-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    text-align: left;
    margin-top: 8px;
}
.pw-timer-stop-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.pw-timer-total {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 8px;
}

/* ============================================================
   Time Sessions List
   ============================================================ */
.pw-time-sessions { margin-bottom: 16px; }
.pw-time-session {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 6px;
    background: #ffffff;
}
.pw-time-session__info { flex: 1; }
.pw-time-session__desc {
    display: block;
    font-size: 13px;
    color: var(--color-text);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}
.pw-time-session__meta {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 2px;
    font-size: 12px;
    color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   CARD MODAL — estilo "mockup" (rail vertical + painéis polidos).
   Escopo: .pw-modal → não afeta o resto do app. Apenas VISUAL: toda a
   estrutura/funcionalidade Alpine dos painéis permanece intacta. Reestiliza
   classes COMPARTILHADAS, então o novo estilo aplica em TODOS os painéis.
   ═══════════════════════════════════════════════════════════════════════ */

/* Rótulos de seção → subhead com divisória (Registros de tempo, Partes, Faturas…) */
.pw-modal .pw-section-label {
    display: flex; align-items: center; gap: 10px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--color-text-muted);
    margin: 22px 0 12px;
}
.pw-modal .pw-section-label::after {
    content: ""; flex: 1; height: 1px; background: var(--color-border);
}

/* Menu de ações da lista (action button "⋮" no header do kanban) */
.pw-list-menu-wrap { position: relative; display: inline-flex; }
.pw-list-menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
    min-width: 240px; padding: 6px;
    background: var(--color-bg-elevated); border: 1px solid var(--color-border);
    border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.14);
    display: flex; flex-direction: column; gap: 2px;
}
.pw-list-menu__item {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 8px 10px; border: none; background: none; cursor: pointer;
    font-size: 12.5px; color: var(--color-text); border-radius: 7px; text-align: left;
}
.pw-list-menu__item:hover { background: var(--color-bg-hover); }
.pw-list-menu__item > svg { flex-shrink: 0; color: var(--color-text-muted); }
.pw-list-menu__item__lbl { flex: 1; }
.pw-list-menu__item__check { color: var(--color-primary) !important; }
.pw-list-menu__item--danger { color: #dc2626; }
.pw-list-menu__item--danger > svg { color: #dc2626; }
.pw-list-menu__item--danger:hover { background: rgba(220,38,38,.08); }

/* Header padrão de rail: título uppercase + divisória fluida + ação opcional.
   Mesma estética do .pw-section-label, mas comporta um botão à direita. */
.pw-modal .pw-rail-head {
    display: flex; align-items: center; gap: 12px;
    margin: 6px 0 14px;
}
.pw-modal .pw-rail-head__t {
    font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--color-text-muted);
    white-space: nowrap; flex-shrink: 0;
}
.pw-modal .pw-rail-head__line {
    flex: 1; height: 1px; background: var(--color-border);
}
/* Ação à direita do subheader da rail (ex.: "+ Cobrança") */
.pw-modal .pw-rail-head__btn {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
    padding: 4px 10px; border-radius: 7px; cursor: pointer;
    border: 1px solid var(--color-border); background: var(--color-bg-elevated);
    font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--color-text-muted);
    transition: background .12s, color .12s, border-color .12s;
}
.pw-modal .pw-rail-head__btn:hover {
    background: var(--color-bg-hover); color: var(--color-text); border-color: var(--color-text-muted);
}

/* Ações inline nas linhas de cobrança */
.pw-modal .pw-cob-act {
    width: 24px; height: 24px; border: none; background: none; cursor: pointer; border-radius: 5px;
    color: var(--color-text-muted); vertical-align: middle;
}
.pw-modal .pw-cob-act:hover { background: var(--color-bg-hover); color: var(--color-text); }
.pw-modal .pw-cob-act--danger:hover { color: var(--color-danger); }

/* Lançamento de cobrança dentro da modal do card */
.pw-modal .pw-cob-overlay {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(0,0,0,.42); display: flex; align-items: center; justify-content: center; padding: 20px;
}
.pw-modal .pw-cob-modal {
    background: var(--color-bg-elevated); border: 1px solid var(--color-border);
    border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,.24);
    width: 100%; max-width: 620px; max-height: 88vh; display: flex; flex-direction: column;
}
.pw-modal .pw-cob-modal__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--color-border);
    font-size: 14px; font-weight: 700; color: var(--color-text);
}
.pw-modal .pw-cob-modal__body { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
/* As outras cobranças pagas pelo mesmo crédito: uma linha por cobrança, com o
   saldo que ela deve à direita. */
.pw-rec-outras { display: flex; flex-direction: column; gap: 4px; }
.pw-rec-outra { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--color-border);
    border-radius: 8px; font-size: 12.5px; cursor: pointer; }
.pw-rec-outra span { flex: 1; min-width: 0; }
.pw-rec-outra b { font-variant-numeric: tabular-nums; }
.pw-modal .pw-cob-modal__foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 18px; border-top: 1px solid var(--color-border);
}
/* ── Recorte de imagem nas conversas ──────────────────────────────────────
   A janela de corte é um retângulo sobre a imagem: arrasta pelo meio, redimensiona
   pelos cantos. A sombra em volta é `box-shadow` gigante em vez de quatro divs —
   o vazio da janela fica exato, sem quatro cálculos que precisam concordar. */
.cn-crop {
    position: fixed; inset: 0; z-index: 2400; background: rgba(0,0,0,.62);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.cn-crop__caixa {
    background: var(--color-bg-elevated); border: 1px solid var(--color-border);
    border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,.3);
    display: flex; flex-direction: column; gap: 0;
    max-width: min(880px, 94vw); max-height: 90vh; overflow: hidden;
}
.cn-crop__topo {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 14px; border-bottom: 1px solid var(--color-border);
    font-size: 13px; font-weight: 600; color: var(--color-text);
}
.cn-crop__topo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cn-crop__palco {
    position: relative; overflow: hidden; background: #111;
    display: flex; align-items: center; justify-content: center;
    /* `touch-action: none` senão o navegador rola a página em vez de arrastar. */
    touch-action: none; user-select: none;
    min-height: 220px; max-height: 62vh;
}
.cn-crop__img { display: block; max-width: 100%; max-height: 62vh; object-fit: contain; }

.cn-crop__janela {
    position: absolute; cursor: move;
    border: 1.5px solid #fff; box-shadow: 0 0 0 9999px rgba(0,0,0,.5);
}
.cn-crop__alca {
    position: absolute; width: 14px; height: 14px; background: #fff; border-radius: 2px;
    border: 1px solid rgba(0,0,0,.25);
}
.cn-crop__alca--nw { left: -7px; top: -7px;    cursor: nwse-resize; }
.cn-crop__alca--ne { right: -7px; top: -7px;   cursor: nesw-resize; }
.cn-crop__alca--sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
.cn-crop__alca--se { right: -7px; bottom: -7px;cursor: nwse-resize; }

.cn-crop__pe {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px; border-top: 1px solid var(--color-border);
}
.cn-crop__dica {
    flex: 1; font-size: 11.5px; color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Drive dentro da conversa ─────────────────────────────────────────── */
.cn-drive { padding: 12px 14px; overflow-y: auto; max-height: 60vh; }
.cn-drive__busca {
    width: 100%; padding: 8px 11px; margin-bottom: 10px;
    border: 1px solid var(--color-border); border-radius: 8px;
    background: var(--color-bg); color: var(--color-text); font-size: 13px; font-family: inherit;
}
.cn-drive__titulo {
    font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--color-text-muted); margin: 12px 0 5px;
}
.cn-drive__item {
    display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left;
    padding: 8px 10px; margin-bottom: 3px; cursor: pointer;
    background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 8px;
    font: inherit; color: var(--color-text);
}
.cn-drive__item:hover:not(:disabled) { background: var(--color-bg-hover); }

/* ── Diretorio, e a trilha de onde se esta' ──────────────────────────────
   A pasta se distingue do arquivo pelo ICONE e pela seta, nao por cor: o
   operador precisa saber, antes de clicar, se aquilo abre ou envia — e enviar
   ao cliente nao tem desfazer. */
.cn-drive__dir {
    display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
    padding: 9px 10px; margin-bottom: 3px; cursor: pointer;
    background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 8px;
    font: inherit; color: var(--color-text);
}
.cn-drive__dir:hover { background: var(--color-bg-hover); }
.cn-drive__dir svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--color-text-muted); }
.cn-drive__dir::after {
    content: '›'; margin-left: auto; padding-left: 6px;
    color: var(--color-text-muted); font-size: 15px; line-height: 1;
}

.cn-drive__caminho {
    display: flex; align-items: center; gap: 10px;
    margin: 2px 0 10px; padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
}
.cn-drive__voltar {
    flex: 0 0 auto; padding: 4px 9px; cursor: pointer;
    background: transparent; border: 1px solid var(--color-border); border-radius: 7px;
    font: inherit; font-size: 12px; color: var(--color-text);
}
.cn-drive__voltar:hover { background: var(--color-bg-hover); }
.cn-drive__aqui {
    font-size: 12px; color: var(--color-text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cn-drive__item:disabled { opacity: .5; cursor: default; }
.cn-drive__nome  { font-size: 13px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-drive__pasta { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; }
.cn-drive__titulo { display: flex; align-items: center; }
.cn-drive__conta {
    margin-left: 7px; font-size: 10px; font-weight: 700; letter-spacing: 0;
    padding: 1px 7px; border-radius: 999px;
    background: var(--color-bg-hover); color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.cn-drive__vazio { font-size: 12px; color: var(--color-text-muted); padding: 6px 2px; margin: 0; }

/* ── Recibos já emitidos, no fim da rail de Cobranças ──────────────────── */
.pw-modal .rec-emitido {
    display: grid; grid-template-columns: auto auto 1fr auto auto auto;
    align-items: center; gap: 12px; padding: 8px 0;
    border-top: 1px solid var(--color-border); font-size: 12px; color: var(--color-text);
}
.pw-modal .rec-emitido__id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700;
    letter-spacing: .06em; white-space: nowrap;
}
.pw-modal .rec-emitido__data { color: var(--color-text-muted); white-space: nowrap;
                               font-variant-numeric: tabular-nums; }
.pw-modal .rec-emitido__qtd  { color: var(--color-text-muted); font-size: 11px; }
.pw-modal .rec-emitido__valor { font-weight: 600; white-space: nowrap;
                                font-variant-numeric: tabular-nums; }
.pw-modal .rec-emitido__sem { font-size: 11px; color: var(--color-text-muted); font-style: italic; }

/* ── Emissão de recibo (modal da rail de Cobranças) ────────────────────── */
/* Mesma familia visual da modal de cobranca, por isso o prefixo curto e o
   escopo em .pw-modal: fora dela estas regras nao devem alcancar nada. */
.pw-modal .rec-cobs { display: flex; flex-direction: column; gap: 5px; }
.pw-modal .rec-cob {
    display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 10px;
    padding: 7px 10px; border: 1px solid var(--color-border); border-radius: 8px;
    background: var(--color-bg); cursor: pointer; font-size: 12px; color: var(--color-text);
}
.pw-modal .rec-cob--on { border-color: var(--color-primary); background: var(--color-bg-elevated); }
.pw-modal .rec-cob__d { color: var(--color-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pw-modal .rec-cob__v { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pw-modal .rec-cob__s {
    font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    padding: 2px 7px; border-radius: 9px; background: #dcfce7; color: #166534; white-space: nowrap;
}
.pw-modal .rec-item {
    display: grid; grid-template-columns: 104px 1fr auto; gap: 8px; align-items: start; margin-bottom: 7px;
}
.pw-modal .rec-item__d { font-variant-numeric: tabular-nums; }
.pw-modal .rec-item__t { resize: vertical; line-height: 1.45; font-family: inherit; }
.pw-modal .rec-item__v {
    font-size: 12px; font-weight: 600; white-space: nowrap; padding-top: 9px;
    font-variant-numeric: tabular-nums; color: var(--color-text);
}
.pw-modal .rec-total {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-top: 9px; margin-top: 3px; border-top: 1px solid var(--color-border);
    font-size: 12px; color: var(--color-text-muted);
}
.pw-modal .rec-total strong { font-size: 15px; color: var(--color-text); font-variant-numeric: tabular-nums; }

.pw-modal .pw-cob-toggle { display: flex; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; }
.pw-modal .pw-cob-toggle__btn {
    flex: 1; padding: 8px 12px; border: none; background: var(--color-bg); cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--color-text-muted);
}
.pw-modal .pw-cob-toggle__btn--on { background: var(--color-primary); color: #fff; }

/* Cronômetro (TimeSheet) — card refinado, display tabular, total em destaque */
.pw-modal .pw-card-timer-widget {
    background: var(--color-bg);
    border-radius: 12px;
    padding: 20px 18px;
}
.pw-modal .pw-timer-display-large {
    font-size: 34px; font-weight: 750; letter-spacing: normal;
}
.pw-modal .pw-timer-total strong {
    color: var(--color-text); font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Botões semânticos → soft (mais elegantes que o sólido; usados no timer, listas…) */
.pw-modal .pw-btn--success { background: #e7f6ec; color: #15803d; border-color: transparent; }
.pw-modal .pw-btn--warning { background: #fef3e2; color: #b45309; border-color: transparent; }
.pw-modal .pw-btn--danger  { background: #fdeaea; color: #b91c1c; border-color: transparent; }
.pw-modal .pw-btn--success:hover { background: #d7efdf; }
.pw-modal .pw-btn--warning:hover { background: #fbe7c9; }
.pw-modal .pw-btn--danger:hover  { background: #fbdada; }

/* Registros de tempo → cards, duração em destaque à direita */
.pw-modal .pw-time-session { padding: 11px 13px; border-radius: 10px; }
.pw-modal .pw-time-session__meta strong {
    color: var(--color-text); font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Contadores/badges → pílula tabular consistente com o rail */
.pw-modal .pw-badge--count {
    font-variant-numeric: tabular-nums; font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────────────
   CONTEÚDO DOS PAINÉIS — estilo mockup (cards, subheads, pílulas soft, grid).
   Só propriedades VISUAIS (bg/borda/raio/padding/cor/fonte) — nunca display/
   flex — para não alterar o layout/funcionalidade dos painéis.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Cards de item (partes, audiências, tarefas, contratos, andamentos) ── */
.pw-modal .pw-parte-item,
.pw-modal .pw-audiencia-item,
.pw-modal .pw-contrato-item,
.pw-modal .pw-andamento-item,
.pw-modal .pw-checklist__item,
.pw-modal .pw-task-item {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 11px 13px;
    margin-bottom: 7px;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.pw-modal .pw-parte-item:hover,
.pw-modal .pw-audiencia-item:hover,
.pw-modal .pw-contrato-item:hover,
.pw-modal .pw-andamento-item:hover {
    border-color: var(--color-primary-light);
    box-shadow: 0 1px 0 var(--color-border);
}
.pw-modal .pw-parte-item__nome,
.pw-modal .pw-audiencia-item__text { font-size: 13.5px; font-weight: 600; }

/* ── Cabeçalhos de polo (Partes) → subhead leve com tinta ── */
.pw-modal .pw-partes-polo__header {
    display: flex; align-items: center; gap: 8px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: 7px 4px; margin: 18px 0 10px; border-radius: 0;
    background: none; border: none;
    border-bottom: 1px solid var(--color-border);
}
.pw-modal .pw-partes-polo__header--ativo    { color: #15803d; border-bottom-color: #cdeed6; }
.pw-modal .pw-partes-polo__header--passivo  { color: #b91c1c; border-bottom-color: #f4d4d4; }
.pw-modal .pw-partes-polo__header .pw-badge--count { margin-left: auto; }

/* ── Pílulas soft (badges de parte, modalidade, tipo, status) ── */
.pw-modal .pw-parte-item__badge {
    font-size: 10px; font-weight: 800; letter-spacing: .04em;
    padding: 2px 6px; border-radius: 5px;
    background: var(--color-primary-light); color: var(--color-primary);
}
.pw-modal .pw-parte-item__citada {
    font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; border: none; cursor: pointer;
}
.pw-modal .pw-parte-item__citada--sim { background: #e7f6ec; color: #15803d; }
.pw-modal .pw-parte-item__citada--nao { background: var(--color-bg); color: var(--color-text-muted); }
.pw-modal .pw-audiencia-modalidade-badge {
    font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px;
}
.pw-modal .pw-audiencia-modalidade-badge--pres { background: #e7f6ec; color: #15803d; }
.pw-modal .pw-audiencia-modalidade-badge--tele { background: var(--color-primary-light); color: var(--color-primary); }

/* ── Seções de Compromissos (Audiências/Reuniões/Prazos/Tarefas) → subhead ── */
.pw-modal .pw-audiencias-section__header {
    margin: 20px 0 10px; padding-bottom: 0;
}
.pw-modal .pw-audiencias-section__title {
    font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--color-text-muted);
}
.pw-modal .pw-audiencias-section__title svg { color: var(--color-primary); }
.pw-modal .pw-audiencias-section__count {
    font-variant-numeric: tabular-nums; font-weight: 700;
    background: var(--color-primary-light); color: var(--color-primary);
    border-radius: 20px; padding: 0 7px; font-size: 10.5px;
}

/* ── Checkbox arredondado com accent ── */
.pw-modal .pw-checklist__check {
    width: 17px; height: 17px; accent-color: var(--color-primary); border-radius: 5px;
}

/* ── Grid de campos (Visão geral) → label uppercase + valor ── */
.pw-modal .pw-judicial-panel__item-label {
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--color-text-muted);
}
.pw-modal .pw-judicial-panel__item-value { font-size: 14px; color: var(--color-text); }
.pw-modal .pw-judicial-panel__item-value--money { font-weight: 700; font-variant-numeric: tabular-nums; }
.pw-modal .pw-judicial-panel__party {
    background: var(--color-bg-elevated); border: 1px solid var(--color-border);
    border-radius: 10px; padding: 11px 13px;
}
.pw-modal .pw-judicial-panel__party-name { font-size: 13.5px; font-weight: 600; }
.pw-modal .pw-judicial-panel__party-role { font-size: 11.5px; color: var(--color-text-muted); }

/* ── Andamentos / Contratos: metadados tabulares e badges soft ── */
.pw-modal .pw-andamento-item__date,
.pw-modal .pw-contrato-item__date { font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.pw-modal .pw-andamento-badge {
    font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px;
    background: var(--color-primary-light); color: var(--color-primary);
}

/* ── Botões "copiar número do processo" no header (Núm. / Format.) ── */
.pw-modal .pw-modal__header-processo-num {
    display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap;
    position: relative;
}
/* Número clicável (gatilho do popover de tribunal) */
.pw-cnj-num-trigger {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: none; padding: 0; cursor: pointer;
    font-family: monospace; font-size: 13px; font-weight: 600;
    color: var(--color-text); letter-spacing: .2px;
    border-bottom: 1px dashed var(--color-border);
}
.pw-cnj-num-trigger:hover { color: var(--color-primary); border-bottom-color: var(--color-primary); }
/* Popover "acessar sistema do tribunal" */
.pw-cnj-popover {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
    min-width: 240px; max-width: 300px;
    background: var(--color-bg-elevated); border: 1px solid var(--color-border);
    border-radius: 12px; box-shadow: 0 12px 32px -8px rgba(15,23,42,.28), 0 0 0 1px rgba(15,23,42,.03);
    padding: 8px; display: flex; flex-direction: column; gap: 4px;
}
.pw-cnj-popover__head {
    display: flex; align-items: center; gap: 7px;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--color-text-muted); padding: 4px 6px 6px;
}
.pw-cnj-popover__head svg { color: var(--color-text-muted); flex: none; }
.pw-cnj-popover__btn {
    display: flex; align-items: center; gap: 8px;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 13px; font-weight: 600; text-decoration: none;
    color: var(--color-primary); background: var(--color-primary-light);
    border: 1px solid transparent; border-radius: 8px; padding: 9px 11px;
    transition: background .12s ease, color .12s ease;
}
.pw-cnj-popover__btn:hover { background: var(--color-primary); color: #fff; }
.pw-cnj-popover__btn svg { flex: none; opacity: .8; }
.pw-cnj-popover__empty {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 12px; color: var(--color-text-muted); font-style: italic; padding: 6px;
}

/* ── Header do card reorganizado (estilo mockup): kicker · título · subtítulo ── */
.pw-modal .pw-modal__header-info {
    display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.pw-modal .pw-modal__header-kicker { display: flex; align-items: center; gap: 8px; }
.pw-modal .pw-modal__header-dot {
    width: 9px; height: 9px; border-radius: 50%; flex: none;
    background: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light);
}
.pw-modal .pw-modal__header-processo-tipo {
    font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--color-text-muted); background: none; padding: 0;
}
.pw-modal .pw-modal__header-lead-chip {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: #fff; background: #7c3aed; padding: 2px 7px; border-radius: 20px;
}
.pw-modal .pw-modal__header-title {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin: 2px 0 1px;
    font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2;
    color: var(--color-text);
}
.pw-modal .pw-modal__header-title-party--client { color: var(--color-primary); }
.pw-modal .pw-modal__header-title-sep { color: var(--color-text-muted); font-weight: 400; }
.pw-modal .pw-modal__header-title-cliente {
    align-self: center;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--color-primary); background: var(--color-primary-light);
    padding: 2px 7px; border-radius: 20px;
}
.pw-modal .pw-modal__header-subtitle {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 13px; color: var(--color-text-muted);
}
.pw-modal .pw-modal__header-subtitle-trib {
    display: inline-flex; align-items: center; gap: 8px; font-family: monospace; letter-spacing: .2px;
}
.pw-modal .pw-modal__header-subtitle-dot { opacity: .55; }
/* Comarca no header — sem monospace, para não competir com o número do processo */
.pw-modal .pw-modal__header-subtitle-local {
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.pw-modal .pw-modal__header-subtitle-local > .pw-modal__header-subtitle-dot { margin-right: 3px; }
.pw-modal .pw-modal__header-subtitle-status { font-style: italic; }

/* ── Botão "atualizar card" no header (refresh sem recarregar a página) ── */
.pw-modal__header-refresh { color: var(--color-text-muted); }
.pw-modal__header-refresh:hover { color: var(--color-primary); }
.pw-modal__header-refresh:disabled { cursor: default; opacity: .8; }
.pw-modal__header-refresh.is-loading svg { animation: spin .8s linear infinite; }
.pw-cnj-copy {
    display: inline-flex; align-items: center; gap: 3px;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: normal;
    color: var(--color-primary); background: var(--color-primary-light);
    border: 1px solid transparent; border-radius: 5px;
    padding: 3px 7px; cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.pw-cnj-copy:hover { background: var(--color-primary); color: #fff; }
.pw-cnj-copy svg { flex: none; }
.pw-cnj-copy--ok, .pw-cnj-copy--ok:hover {
    background: #e7f6ec; color: #15803d; border-color: #22c55e;
}

/* ============================================================
   Undo Toast
   ============================================================ */
.pw-undo-toast {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--color-text-muted);
}

/* ============================================================
   Contratante — cartão de identidade do cliente pagante (Visão geral)
   ============================================================ */
.pw-modal .pw-contratante {
    display: flex; align-items: center; gap: 13px;
    padding: 12px 14px; margin-bottom: 16px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    position: relative;
    transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}
.pw-modal .pw-contratante:hover {
    border-color: var(--color-primary);
    box-shadow: 0 3px 12px rgba(99, 102, 241, .10);
}
.pw-modal .pw-contratante__avatar {
    width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center; flex-shrink: 0;
    background: linear-gradient(135deg, #6366f1, #8b8ef8);
    color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .3px;
    box-shadow: 0 2px 7px rgba(99, 102, 241, .28);
}
.pw-modal .pw-contratante__avatar--empty {
    background: var(--color-bg, #f3f4f6);
    color: var(--color-text-muted);
    box-shadow: none;
}
.pw-modal .pw-contratante__info {
    display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1;
}
.pw-modal .pw-contratante__label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--color-primary);
}
.pw-modal .pw-contratante__name {
    font-size: 15px; font-weight: 600; color: var(--color-text); line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pw-modal .pw-contratante__name--empty {
    color: var(--color-text-muted); font-weight: 500; font-style: italic;
}
.pw-modal .pw-contratante__edit {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
    padding: 6px 11px; border-radius: 8px;
    border: 1px solid var(--color-border); background: transparent;
    color: var(--color-text-muted); font-size: 12px; font-weight: 600;
    cursor: pointer; transition: all .15s ease;
}
.pw-modal .pw-contratante__edit:hover {
    background: var(--color-primary-light); color: var(--color-primary);
    border-color: var(--color-primary);
}

/* ============================================================
   Confirmação de fechamento — overlay custom sobre a modal
   ============================================================ */
.pw-confirm {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(10, 10, 20, .55);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.pw-confirm__dialog {
    width: 380px; max-width: calc(100vw - 40px);
    padding: 26px 24px 20px;
    text-align: center;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .38);
}
.pw-confirm__icon {
    width: 48px; height: 48px; border-radius: 50%;
    display: grid; place-items: center; margin: 0 auto 14px;
    background: var(--color-primary-light); color: var(--color-primary);
}
.pw-confirm__dialog--danger .pw-confirm__icon {
    background: rgba(220, 38, 38, .12); color: #dc2626;
}
.pw-confirm__title {
    font-size: 17px; font-weight: 700; color: var(--color-text); margin: 0 0 6px;
}
.pw-confirm__text {
    font-size: 13.5px; color: var(--color-text-muted); line-height: 1.5; margin: 0 0 22px;
}
/* Campo do dialogo: existe para substituir o window.prompt() nativo. */
.pw-confirm__input { width: 100%; margin: -8px 0 20px; text-align: left; }
.pw-confirm__actions { display: flex; gap: 10px; justify-content: center; }
.pw-confirm__actions .pw-btn { min-width: 116px; justify-content: center; }

/* ============================================================
   Dados do Processo — cartão de formulário (Visão geral)
   ============================================================ */
.pw-modal .pw-proc-card {
    margin-top: 4px;
    padding: 16px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 12px;
}
.pw-modal .pw-proc-card__header {
    display: flex; align-items: center; gap: 7px;
    margin-bottom: 15px; padding-bottom: 11px;
    border-bottom: 1px solid var(--color-border);
    font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--color-primary);
}
.pw-modal .pw-proc-card__header svg { flex-shrink: 0; }
.pw-modal .pw-proc-card__grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 13px 14px;
}
/* "salvando…" no cabecalho: o campo grava sozinho ao sair, e sem sinal nenhum
   o usuario nao sabe se a edicao pegou. */
.pw-modal .pw-proc-card__saving {
    margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: .04em;
    text-transform: none; color: var(--color-text-muted);
}
/* Rodape com o que nao se edita aqui: solicitante vem do contratante e status
   acompanha a lista do board. Some da grade, mas continua a' vista. */
.pw-modal .pw-proc-card__foot {
    display: flex; flex-wrap: wrap; gap: 6px 20px;
    margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-border);
    font-size: 11.5px; color: var(--color-text-muted);
}
.pw-modal .pw-proc-card__foot strong { font-weight: 600; color: var(--color-text-muted); }
.pw-modal .pw-proc-card .pw-input:disabled { background: var(--color-bg); color: var(--color-text-muted); }

/* Toggle de prazos ignorados (rail Prazos) */
.pw-modal .pw-ignored-toggle { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.pw-modal .pw-ignored-toggle__badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
    font-size: 11px; font-weight: 700; background: #fee2e2; color: #b91c1c;
    font-variant-numeric: tabular-nums;
}
.pw-modal .pw-ignored-toggle__btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
    border-radius: 8px; border: 1px solid var(--color-border); background: transparent;
    color: var(--color-text-muted); font-size: 12px; font-weight: 600; cursor: pointer;
    transition: all .15s ease;
}
.pw-modal .pw-ignored-toggle__btn:hover {
    background: var(--color-bg-hover); color: var(--color-text); border-color: var(--color-text-muted);
}

/* ============================================================
   Comments Section
   ============================================================ */
/* Anotações é painel próprio: o comentários é o 1º bloco, então sem margin-top
   extra (o espaçamento do topo vem do .pw-section-label, igual aos outros painéis). */
.pw-comments-section { margin-top: 0; }
.pw-comment {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    align-items: flex-start;
}
.pw-comment__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-primary, #6366f1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.pw-comment__body { flex: 1; }
.pw-comment__header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.pw-comment__header strong { font-size: 13px; }
.pw-comment__time { font-size: 11px; color: var(--color-text-muted); }
.pw-comment__content {
    font-size: 13px;
    color: var(--color-text);
    line-height: 1.5;
    background: #f8fafc;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}
.pw-comment__footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.pw-comment__actions { display: flex; gap: 8px; margin-left: auto; }

/* ============================================================
   Activity Log
   ============================================================ */
.pw-activity-log { display: flex; flex-direction: column; gap: 8px; }
.pw-activity-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.pw-activity-item__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e2e8f0;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}
.pw-activity-item__body { flex: 1; }
.pw-activity-item__desc {
    font-size: 13px;
    color: var(--color-text);
    margin: 0 0 2px;
}
.pw-activity-item__time {
    font-size: 11px;
    color: var(--color-text-muted);
}

/* ============================================================
   Details tab: inline members + labels sections
   ============================================================ */
.pw-details-section-header {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
}
.pw-details-section-header svg { color: var(--color-text-muted); flex-shrink: 0; }
.pw-details-section-header h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}
.pw-member-add {
    display: flex;
    gap: 6px;
    align-items: center;
}
.pw-member-add select { flex: 1; }
.pw-labels-inline { }

/* ============================================================
   Judicial Panel — card modal details
   ============================================================ */
/* Wrapper transparente: apenas agrupa. A moldura de card fica nos blocos internos
   (Contratante e a grade de meta), evitando o efeito de "card dentro de card". */
.pw-judicial-panel {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    margin-bottom: 16px;
}

/* CNJ header bar */
.pw-judicial-panel__cnj {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: var(--color-primary, #6366f1);
    color: #fff;
}
.pw-judicial-panel__cnj-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: .85;
}
.pw-judicial-panel__cnj-num {
    font-size: 15px;
    font-weight: 700;
    font-family: monospace;
    letter-spacing: .5px;
}

/* Section label */
.pw-judicial-panel__section {
    padding: 14px 18px 0;
}
.pw-judicial-panel__label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--color-text-muted);
    margin: 0 0 10px;
}

/* Parties */
.pw-judicial-panel__parties {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}
.pw-judicial-panel__party {
    flex: 1;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: #f8fafc;
    position: relative;
}
.pw-judicial-panel__party--ativo {
    border-right: 1px solid var(--color-border);
}
.pw-judicial-panel__party--client {
    background: color-mix(in srgb, var(--color-primary, #6366f1) 6%, transparent);
}
.pw-judicial-panel__party-role {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--color-text-muted);
}
.pw-judicial-panel__party-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}
.pw-judicial-panel__party--client .pw-judicial-panel__party-name {
    color: var(--color-primary, #6366f1);
}
.pw-judicial-panel__party-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--color-primary, #6366f1);
    background: color-mix(in srgb, var(--color-primary, #6366f1) 12%, transparent);
    border-radius: 4px;
    padding: 1px 6px;
    width: fit-content;
    margin-top: 2px;
}
.pw-judicial-panel__party-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    font-size: 18px;
    font-weight: 300;
    color: var(--color-text-muted);
    background: #f8fafc;
    flex-shrink: 0;
}

/* Meta grid */
.pw-judicial-panel__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-bg-elevated);
    margin-top: 0;
}
.pw-judicial-panel__item {
    padding: 10px 18px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-bottom: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
}
.pw-judicial-panel__item:nth-child(even) {
    border-right: none;
}
.pw-judicial-panel__item:last-child,
.pw-judicial-panel__item:nth-last-child(2):nth-child(odd) {
    border-bottom: none;
}
.pw-judicial-panel__item-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--color-text-muted);
}
.pw-judicial-panel__item-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.4;
}
.pw-judicial-panel__item-value--badge {
    display: inline-flex;
    background: color-mix(in srgb, #3b82f6 12%, transparent);
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 5px;
    width: fit-content;
}
.pw-judicial-panel__item-value--money {
    font-weight: 700;
    color: #16a34a;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   Trello-style Card Toolbar
   ============================================================ */
.pw-card-toolbar {
    display: flex;
    align-items: flex-start;
    /* 6 campos (Lista, Departamento, Etiquetas, Responsável, Supervisor, Cor)
       precisam caber numa linha só — daí o gap menor e os selects encolhíveis. */
    gap: 16px;
    padding: 10px 20px 12px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    flex-wrap: wrap;
}

.pw-card-toolbar__group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pw-card-toolbar__section-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--color-text-muted);
}

.pw-card-toolbar__row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* Dropdown wrapper — relative anchor */
.pw-card-toolbar__dropdown-wrap {
    position: relative;
}

/* + add button */
.pw-card-toolbar__add-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px dashed var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.pw-card-toolbar__add-btn:hover {
    border-color: var(--color-primary, #6366f1);
    color: var(--color-primary, #6366f1);
    background: color-mix(in srgb, var(--color-primary, #6366f1) 8%, transparent);
}

/* Label pills in toolbar */
.pw-tlabel-pill {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
    transition: filter .12s;
}
.pw-tlabel-pill:hover { filter: brightness(.9); }

/* Member avatars in toolbar */
.pw-tavatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-primary, #6366f1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    border: 2px solid #ffffff;
    transition: transform .12s;
    flex-shrink: 0;
}
.pw-tavatar:hover { transform: scale(1.08); }
.pw-tavatar--supervisor { background: #7c3aed; }
.pw-tavatar--sm { width: 24px; height: 24px; font-size: 9px; border: none; cursor: default; }

/* Color swatch in toolbar */
.pw-tcolor-current {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 2px solid var(--color-border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .12s;
}
.pw-tcolor-current:hover { border-color: var(--color-primary, #6366f1); }
.pw-tcolor-current--empty { background: #ffffff; color: var(--color-text-muted); }

/* ============================================================
   Toolbar Dropdown panel
   ============================================================ */
.pw-toolbar-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 200;
    width: 240px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
    overflow: hidden;
}
.pw-toolbar-dropdown--color { width: 200px; }

.pw-toolbar-dropdown__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--color-border);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.pw-toolbar-dropdown__body {
    padding: 8px;
    max-height: 260px;
    overflow-y: auto;
}

.pw-toolbar-dropdown__sub {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--color-text-muted);
    padding: 0 4px 4px;
    margin: 0;
}

.pw-toolbar-dropdown__footer {
    padding: 8px;
    border-top: 1px solid var(--color-border);
}

.pw-toolbar-dropdown__new-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 8px;
    border-radius: 6px;
    background: transparent;
    border: none;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background .12s, color .12s;
    text-align: left;
}
.pw-toolbar-dropdown__new-btn:hover {
    background: var(--color-bg-hover);
    color: var(--color-text);
}

/* Label row in dropdown */
.pw-tlabel-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .1s;
    margin-bottom: 3px;
}
.pw-tlabel-row:hover { background: var(--color-bg-hover); }

.pw-tlabel-row__pill {
    flex: 1;
    height: 28px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.pw-tlabel-row__check {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary, #6366f1);
    flex-shrink: 0;
}

/* Member row in dropdown */
.pw-tmember-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 4px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .1s;
    margin-bottom: 2px;
}
.pw-tmember-row:hover { background: var(--color-bg-hover); }

.pw-tmember-row__name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pw-tmember-row__role {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
}
.pw-tmember-row__role--resp { background: #dbeafe; color: #1d4ed8; }
.pw-tmember-row__role--sup  { background: #ede9fe; color: #6d28d9; }

/* Color grid in dropdown */
.pw-tcolor-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
}

.pw-tcolor-dot {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .1s, border-color .1s;
}
.pw-tcolor-dot:hover { transform: scale(1.1); }
.pw-tcolor-dot--active { border-color: var(--color-text) !important; }
.pw-tcolor-dot--none {
    background: var(--color-bg-hover) !important;
    border: 1.5px dashed var(--color-border) !important;
    color: var(--color-text-muted);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   Pedidos — form + item actions + total
   ============================================================ */
.pw-pedido-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 8px;
    background: var(--color-bg-elevated, #fff);
}
.pw-pedido-item__actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .15s;
}
.pw-pedido-item:hover .pw-pedido-item__actions { opacity: 1; }

.pw-pedidos__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--color-bg, #f8f9fb);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-top: 4px;
    font-size: 13px;
    color: var(--color-text-muted);
}
.pw-pedidos__total strong {
    color: #16a34a;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pw-pedido-add-btn-wrap {
    margin-top: 12px;
}

/* Formulário de pedido */
.pw-pedido-form {
    margin-top: 12px;
    padding: 16px;
    background: var(--color-bg, #f8f9fb);
    border: 1px solid var(--color-border);
    border-radius: 10px;
}
.pw-pedido-form__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 14px;
}
.pw-pedido-form__row {
    margin-bottom: 12px;
}
.pw-pedido-form__toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text);
    cursor: pointer;
}
.pw-pedido-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

/* Input with prefix/suffix */
.pw-input-prefix-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.pw-input-prefix,
.pw-input-suffix {
    position: absolute;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    pointer-events: none;
    user-select: none;
}
.pw-input-prefix { left: 10px; }
.pw-input-suffix { right: 10px; }
.pw-input--prefixed { padding-left: 28px !important; }

/* ============================================================
   Board Filter Button
   ============================================================ */
.pw-filter-toggle {
    position: relative;
    gap: 6px;
}
.pw-filter-toggle--active {
    background: var(--color-primary-light, #eef0ff);
    color: var(--color-primary, #6366f1);
    border-color: var(--color-primary, #6366f1);
}
.pw-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--color-primary, #6366f1);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

/* ============================================================
   Filter Panel
   ============================================================ */
.pw-filter-panel {
    background: var(--color-bg-elevated, #fff);
    border-bottom: 1px solid var(--color-border);
    padding: 0 20px;
    overflow: hidden;
}
.pw-filter-panel__inner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    align-items: end;
    gap: 10px 14px;
    padding: 14px 0;
}

.pw-filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.pw-filter-group--wide { grid-column: span 2; }
.pw-filter-group--xs   { min-width: 0; }
.pw-filter-group--actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    grid-column: 1 / -1;
    justify-content: flex-end;
    padding-bottom: 1px;
    border-top: 1px solid var(--color-border);
    padding-top: 10px;
    margin-top: 2px;
}

.pw-filter-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.pw-filter-label svg { flex-shrink: 0; opacity: .7; }

.pw-filter-result {
    font-size: 12px;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.pw-filter-result span {
    font-weight: 700;
    color: var(--color-primary, #6366f1);
}

/* Slide transition */
[x-cloak] { display: none !important; }
.pw-filter-panel[x-show] { transition: max-height .2s ease, opacity .2s ease; }

/* ==================== LOCK TOGGLE ==================== */
.pw-lock-toggle { gap: 6px; }
.pw-lock-toggle--active {
    color: var(--color-warning, #f59e0b) !important;
    background: rgba(245,158,11,.1) !important;
}
.pw-lock-toggle--active:hover {
    background: rgba(245,158,11,.18) !important;
}

/* ==================== LISTS LOCKED TOAST ==================== */
.pw-lists-locked-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--color-bg-elevated, #fff);
    border: 1.5px solid var(--color-warning, #f59e0b);
    color: var(--color-warning, #f59e0b);
    border-radius: 10px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 8px 30px rgba(0,0,0,.18);
    white-space: nowrap;
}
.pw-toast-slide { transition: opacity .2s ease, transform .2s ease; }
.pw-toast-hidden { opacity: 0; transform: translateX(-50%) translateY(12px); }
.pw-toast-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ==================== ARCHIVED CARDS MODAL ==================== */
.pw-archived-list { display: flex; flex-direction: column; gap: 8px; }
.pw-archived-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--color-bg-hover, #f8f9fb);
    border: 1px solid var(--color-border, #e5e7eb);
}
.pw-archived-item__info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}
.pw-archived-item__type {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted, #9ca3af);
}
.pw-archived-item__title {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text, #1a202c);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pw-archived-item__date {
    font-size: 12px;
    color: var(--color-text-muted, #9ca3af);
}

/* ==================== TAB TAREFAS / CHECKLIST ==================== */
.pw-checklist-tab { padding: 4px 0; }

.pw-checklist-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.pw-checklist-progress__bar {
    flex: 1;
    height: 6px;
    background: var(--color-border, #e5e7eb);
    border-radius: 99px;
    overflow: hidden;
}
.pw-checklist-progress__fill {
    height: 100%;
    background: var(--color-success, #22c55e);
    border-radius: 99px;
    transition: width .3s ease;
}
.pw-checklist-progress__label {
    font-size: 12px;
    color: var(--color-text-muted, #9ca3af);
    white-space: nowrap;
}

.pw-checklist--tab { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }

.pw-checklist--tab .pw-checklist__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    background: var(--color-bg-hover, #f8f9fb);
    border: 1px solid transparent;
    transition: border-color .15s;
}
.pw-checklist--tab .pw-checklist__item:hover { border-color: var(--color-border, #e5e7eb); }
.pw-checklist--tab .pw-checklist__item--done { opacity: .65; }

.pw-checklist__check { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--color-success, #22c55e); cursor: pointer; }

.pw-checklist__text { flex: 1; background: transparent; border: none; outline: none; font-size: 14px; }
.pw-checklist__text--done { text-decoration: line-through; color: var(--color-text-muted, #9ca3af); }

.pw-checklist-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 0 16px;
    color: var(--color-text-muted, #9ca3af);
    font-size: 14px;
}

.pw-checklist-tab__add {
    margin-top: 4px;
    width: 100%;
    justify-content: center;
    border: 1.5px dashed var(--color-border, #e5e7eb);
    border-radius: 7px;
    color: var(--color-text-muted, #9ca3af);
}
.pw-checklist-tab__add:hover {
    border-color: var(--color-primary, #6366f1);
    color: var(--color-primary, #6366f1);
    background: rgba(99,102,241,.05);
}
.pw-checklist-tab__actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.pw-checklist-tab__actions .pw-btn {
    flex: 1;
    justify-content: center;
    border: 1.5px dashed var(--color-border, #e5e7eb);
    border-radius: 7px;
    color: var(--color-text-muted, #9ca3af);
}
.pw-checklist-tab__actions .pw-btn:hover {
    border-color: var(--color-primary, #6366f1);
    color: var(--color-primary, #6366f1);
    background: rgba(99,102,241,.05);
}

/* ==================== TASK SECTIONS & GROUPS ==================== */
.pw-task-section { margin-bottom: 16px; }

.pw-task-section__header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 6px 0 8px;
    border-bottom: 1.5px solid var(--color-border, #e5e7eb);
    margin-bottom: 8px;
}
.pw-task-section__header--pending { color: var(--color-warning, #f59e0b); border-color: rgba(245,158,11,.3); }
/* Variante clicavel (concluidas recolhiveis nas Tarefas): mesmo visual do
   cabecalho, sem a aparencia de botao. */
.pw-task-section__header--btn {
    width: 100%; background: none; font: inherit; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; cursor: pointer; text-align: left;
    border: none; border-bottom: 1.5px solid rgba(34,197,94,.3);
}
.pw-task-section__header--done    { color: var(--color-success, #22c55e); border-color: rgba(34,197,94,.3); }
.pw-task-section__count {
    margin-left: auto;
    background: currentColor;
    color: #fff;
    border-radius: 99px;
    padding: 1px 7px;
    font-size: 11px;
    line-height: 1.6;
    opacity: .85;
}

.pw-task-group { margin-bottom: 10px; }
.pw-task-group__header {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted, #9ca3af);
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 2px 4px 4px;
}

.pw-task-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    border: 1px solid transparent;
    margin-bottom: 4px;
    background: var(--color-bg-hover, #f8f9fb);
    transition: border-color .15s;
}
.pw-task-item:hover { border-color: var(--color-border, #e5e7eb); }
.pw-task-item--done { opacity: .65; }
.pw-task-item .pw-checklist__check { margin-top: 3px; flex-shrink: 0; }

.pw-task-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }

.pw-task-item__row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pw-task-item__row .pw-checklist__text { flex: 1; }

.pw-task-item__date-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.pw-task-due {
    font-size: 12px;
    padding: 2px 6px;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 5px;
    background: transparent;
    color: var(--color-text, #1a202c);
    outline: none;
    cursor: pointer;
}
.pw-task-due:focus { border-color: var(--color-primary, #6366f1); }

.pw-task-prazo-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 99px;
    white-space: nowrap;
    flex-shrink: 0;
}
.pw-task-prazo-badge--comum    { background: rgba(99,102,241,.12); color: var(--color-primary, #6366f1); }
.pw-task-prazo-badge--recursal { background: rgba(239,68,68,.12);  color: #ef4444; }

.pw-task-calendar-badge {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: var(--color-success, #22c55e);
    font-weight: 600;
}

/* ==================== ADD TASK FORM ==================== */
.pw-add-task-form {
    border: 1.5px solid var(--color-primary, #6366f1);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
}
.pw-add-task-form__header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: rgba(99,102,241,.06);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary, #6366f1);
    border-bottom: 1px solid rgba(99,102,241,.15);
}
.pw-add-task-form__body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.pw-add-task-form__row { display: flex; gap: 12px; }
.pw-add-task-form__footer {
    padding: 10px 14px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-bg-hover, #f8f9fb);
}

.pw-label-optional { font-weight: 400; font-size: 11px; color: var(--color-text-muted, #9ca3af); margin-left: 4px; }

.pw-prazo-toggle { display: flex; border: 1px solid var(--color-border, #e5e7eb); border-radius: 6px; overflow: hidden; }
.pw-prazo-btn {
    flex: 1;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted, #9ca3af);
    transition: background .15s, color .15s;
}
.pw-prazo-btn--active { background: var(--color-primary, #6366f1); color: #fff; }

/* ==================== ANDAMENTOS ==================== */
/* Partes tab */
.pw-partes-tab { padding: 4px 0; display: flex; flex-direction: column; gap: 20px; }
.pw-partes-polo { }
.pw-partes-polo__header { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 6px 10px; border-radius: 6px; margin-bottom: 8px; }
.pw-partes-polo__header--ativo { background: #dcfce7; color: #15803d; }
.pw-partes-polo__header--passivo { background: #fee2e2; color: #b91c1c; }
.pw-partes-empty { font-size: 12px; color: var(--color-text-muted); padding: 0 4px; }
.pw-parte-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 7px; background: var(--color-bg); margin-bottom: 6px; }
.pw-parte-item__info { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; }
.pw-parte-item__badge { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 9999px; flex-shrink: 0; }
.pw-parte-item__badge--pf { background: #dbeafe; color: #1e40af; }
.pw-parte-item__badge--pj { background: #fef3c7; color: #92400e; }
.pw-parte-item__nome { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-parte-item__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pw-parte-item__doc { font-size: 11px; color: var(--color-text-muted); font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Alterar titular do contrato (finance/contratos/show) */
.fin-titular-edit {
    display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
    border-radius: 7px; border: 1px solid var(--color-border); background: var(--color-bg-elevated);
    color: var(--color-text-muted); cursor: pointer; transition: all .15s ease; flex: none;
}
.fin-titular-edit:hover { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-light); }
.fin-titular-picker {
    position: absolute; top: 100%; left: 0; margin-top: 8px; z-index: 50; width: 340px; max-width: 90vw;
    background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,.16); overflow: hidden;
}
.fin-titular-picker__search {
    width: 100%; border: none; border-bottom: 1px solid var(--color-border); padding: 10px 13px;
    font-size: 13px; outline: none; background: transparent; color: var(--color-text);
}
.fin-titular-picker__opts { max-height: 300px; overflow-y: auto; padding: 4px; }
.fin-titular-picker__opt {
    padding: 8px 11px; font-size: 13px; border-radius: 8px; cursor: pointer; color: var(--color-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fin-titular-picker__opt:hover { background: var(--color-primary-light); color: var(--color-primary); }
.fin-titular-picker__empty { padding: 12px; font-size: 12px; color: var(--color-text-muted); text-align: center; }
.pw-parte-item__citada { flex-shrink: 0; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 9999px; border: none; cursor: pointer; transition: background .15s, color .15s; }
.pw-parte-item__citada--sim { background: #dcfce7; color: #15803d; }
.pw-parte-item__citada--sim:hover { background: #bbf7d0; }
.pw-parte-item__citada--nao { background: #f1f5f9; color: #64748b; }
.pw-parte-item__citada--nao:hover { background: #e2e8f0; }

.pw-andamentos { padding: 4px 0; }
.pw-andamentos__list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }

.pw-andamento-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--color-bg-hover, #f8f9fb);
    border: 1px solid var(--color-border, #e5e7eb);
}
.pw-andamento-item__date {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary, #6366f1);
    white-space: nowrap;
    min-width: 80px;
    padding-top: 2px;
}
.pw-andamento-item__body { flex: 1; min-width: 0; }
.pw-andamento-item__tipo { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pw-andamento-item__tipo strong { font-size: 14px; font-weight: 600; color: var(--color-text, #1a202c); }
.pw-andamento-item__grupo {
    font-size: 11px;
    color: var(--color-text-muted, #9ca3af);
    margin-top: 2px;
}
.pw-andamento-item__msg {
    font-size: 13px;
    color: var(--color-text, #374151);
    margin-top: 4px;
    white-space: pre-wrap;
}
.pw-andamento-item__anotacao {
    font-size: 12px;
    color: var(--color-text-muted, #9ca3af);
    margin-top: 3px;
    white-space: pre-wrap;
    font-style: italic;
}
.pw-andamento-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .3px;
    padding: 1px 7px;
    border-radius: 20px;
    line-height: 18px;
}
.pw-andamento-badge--manual {
    background: #ede9fe;
    color: #6d28d9;
}
.pw-andamento-badge--pub {
    background: #d1fae5;
    color: #065f46;
}
.pw-andamento-badge--datajud {
    background: #dbeafe;
    color: #1d4ed8;
}
.pw-andamento-item__actions { display: flex; gap: 4px; flex-shrink: 0; }

.pw-andamento-form {
    border: 1.5px solid var(--color-primary, #6366f1);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
}
.pw-andamento-form__header {
    padding: 10px 14px;
    background: rgba(99,102,241,.06);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary, #6366f1);
    border-bottom: 1px solid rgba(99,102,241,.15);
}
.pw-andamento-form__body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.pw-andamento-form__footer {
    padding: 10px 14px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-bg-hover, #f8f9fb);
}

/* ── Modal header with process number ── */
.pw-modal__header { position: relative; }
.pw-modal__header--processo {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 20px 10px;
    gap: 4px;
    border-bottom: 2px solid var(--color-primary, #6366f1);
    background: linear-gradient(135deg, rgba(99,102,241,.05) 0%, transparent 60%);
}
/* Pin action buttons to top-right in --processo mode (column layout) */
.pw-modal__header--processo .pw-modal__header-actions {
    position: absolute;
    top: 10px;
    right: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 1;
}
.pw-modal__header-info { padding-right: 150px; display: flex; flex-direction: column; gap: 4px; }
.pw-modal__header-processo-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.pw-modal__header-processo-tipo {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: white;
    background: var(--color-primary, #6366f1);
    border-radius: 4px;
    padding: 2px 7px;
    flex-shrink: 0;
}
.pw-modal__header-processo-num {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted, #64748b);
    font-family: monospace;
    letter-spacing: 0.2px;
}
.pw-modal__header-processo-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-primary, #6366f1);
    background: rgba(99,102,241,.1);
    border: 1px solid rgba(99,102,241,.2);
    border-radius: 4px;
    padding: 1px 6px;
}
.pw-modal__header-title-main {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text, #1a202c);
    line-height: 1.3;
}
.pw-modal__header-partes {
    font-size: 12px;
    color: var(--color-text-muted, #64748b);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 1px;
}
.pw-modal__header-partes-sep {
    font-weight: 700;
    color: var(--color-text-muted, #94a3b8);
    font-size: 13px;
}
.pw-modal__header-partes-polo {
    display: flex;
    align-items: center;
    gap: 4px;
}
.pw-modal__header-partes-polo--client {
    color: var(--color-text, #1a202c);
    font-weight: 500;
}
.pw-modal__header-partes-role {
    font-weight: 600;
    color: var(--color-text-muted, #9ca3af);
    font-size: 11px;
}
.pw-modal__header-partes-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #10b981;
    color: white;
    border-radius: 3px;
    padding: 1px 5px;
}

/* ── Judicial panel compact (details tab, no CNJ header) ── */
.pw-judicial-panel--compact .pw-judicial-panel__cnj { display: none; }

/* ── Details meta row (última consulta in details tab) ── */
.pw-details-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0 10px;
    font-size: 13px;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    margin-bottom: 12px;
}
.pw-details-meta-label {
    font-weight: 600;
    color: var(--color-text-muted, #9ca3af);
    white-space: nowrap;
}
.pw-details-meta-value {
    color: var(--color-text, #1a202c);
}

/* ── Andamentos consulta row ── */
.pw-andamentos__consulta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: var(--color-bg-hover, #f8f9fb);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.pw-andamentos__consulta-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}
.pw-andamentos__consulta-label {
    font-weight: 600;
    color: var(--color-text-muted, #9ca3af);
}
.pw-andamentos__consulta-date {
    font-weight: 500;
    color: var(--color-text, #1a202c);
}
.pw-andamentos__consultado-btn {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

/* ── Toolbar list select ── */
.pw-toolbar-list-select {
    min-width: 0;
    width: 100%;
    max-width: 180px;
    font-size: 13px;
}
.pw-card-toolbar__group--lista {
    flex: 1 1 130px;
    min-width: 110px;
    max-width: 190px;
}

/* ── Task due date read-only display ── */
.pw-task-due-display {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--color-text-muted, #64748b);
}

/* ── Edit task form variant ── */
.pw-add-task-form--edit {
    border-color: var(--color-border, #e5e7eb);
    margin: 4px 0 8px;
}
.pw-add-task-form--edit .pw-add-task-form__header {
    background: var(--color-bg-hover, #f8f9fb);
    color: var(--color-text-muted, #64748b);
    border-bottom-color: var(--color-border, #e5e7eb);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Audiências section (tarefas tab) ── */
.pw-audiencias-section {
    margin-bottom: 4px;
    padding-bottom: 4px;
}
.pw-audiencias-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 2px 0;
}
.pw-audiencias-section__title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-primary, #6366f1);
}
.pw-audiencias-section__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--color-primary, #6366f1);
    color: white;
    font-size: 10px;
    font-weight: 700;
}
.pw-audiencias-section__add {
    font-size: 11px;
    padding: 3px 8px;
}
.pw-audiencias-section__empty {
    font-size: 12px;
    color: var(--color-text-muted, #9ca3af);
    padding: 6px 0 4px;
    margin: 0;
}

/* ── Estado vazio das rails da Agenda ────────────────────────────────────────
   Uma forma só para Audiências, Prazos, Reuniões e Tarefas. Cada rail tinha a
   sua: uma frase solta aqui, um ícone gigante ali, e Prazos chegava a mostrar
   DOIS estados vazios ao mesmo tempo. Ícone, título, uma linha dizendo para que
   serve a rail e a ação — sempre na mesma ordem. */
.pw-modal .pw-agenda-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 3px; padding: 34px 20px 30px;
}
.pw-modal .pw-agenda-empty__icon {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-bottom: 9px; border-radius: 50%;
    background: var(--color-bg); color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}
.pw-modal .pw-agenda-empty__title { font-size: 13.5px; font-weight: 600; color: var(--color-text); margin: 0; }
.pw-modal .pw-agenda-empty__hint {
    font-size: 11.5px; line-height: 1.5; color: var(--color-text-muted);
    margin: 0 0 13px; max-width: 300px;
}

/* ── Audiência item ── */
.pw-audiencia-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 6px;
    margin-bottom: 3px;
    background: var(--color-bg-hover, #f8f9fb);
    border: 1px solid var(--color-border, #e5e7eb);
    transition: border-color 0.15s;
}
.pw-audiencia-item:hover { border-color: var(--color-primary, #6366f1); }
.pw-audiencia-item--done {
    opacity: 0.55;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid transparent;
}
.pw-audiencia-item__left {
    padding-top: 2px;
}
.pw-audiencia-item__body {
    flex: 1;
    min-width: 0;
}
.pw-audiencia-item__row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.pw-audiencia-item__text {
    font-size: 13px;
    font-weight: 500;
    flex: 1;
    min-width: 0;
    color: var(--color-text, #1a202c);
}
.pw-audiencia-item__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 3px;
    flex-wrap: wrap;
}
.pw-audiencia-item__local {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--color-text-muted, #64748b);
}
.pw-audiencia-modalidade-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 4px;
    padding: 1px 6px;
    white-space: nowrap;
}
.pw-audiencia-modalidade-badge--pres {
    background: #dcfce7;
    color: #166534;
}
.pw-audiencia-modalidade-badge--tele {
    background: #eff6ff;
    color: #1d4ed8;
}
[data-theme=dark] .pw-audiencia-modalidade-badge--pres { background: #166534; color: #dcfce7; }
[data-theme=dark] .pw-audiencia-modalidade-badge--tele { background: #1e3a5f; color: #93c5fd; }

/* ── Section divider between audiências and tarefas ── */
.pw-section-divider {
    height: 1px;
    background: var(--color-border, #e5e7eb);
    margin: 12px 0;
}

/* ── Pedidos polo header ── */
.pw-pedido-polo-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 6px 4px 4px;
    margin-top: 4px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.pw-pedido-polo-header--ativo { color: #1d4ed8; }
.pw-pedido-polo-header--passivo { color: #b45309; }
[data-theme=dark] .pw-pedido-polo-header--ativo { color: #93c5fd; }
[data-theme=dark] .pw-pedido-polo-header--passivo { color: #fbbf24; }

/* ── Pedido status toggle ── */
.pw-pedido-status-toggle {
    display: flex;
    gap: 0;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--color-border, #e5e7eb);
    margin-top: 6px;
    width: 100%;
}
.pw-pedido-status-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 6px;
    font-size: 11px;
    font-weight: 500;
    background: var(--color-bg, #fff);
    color: var(--color-text-muted, #6b7280);
    border: none;
    border-right: 1px solid var(--color-border, #e5e7eb);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}
.pw-pedido-status-btn:last-child { border-right: none; }
.pw-pedido-status-btn:hover { background: var(--color-bg-hover, #f3f4f6); color: var(--color-text, #111); }
.pw-pedido-status-btn--active.pw-pedido-status-btn--sem { background: #f3f4f6; color: #374151; font-weight: 700; }
.pw-pedido-status-btn--active.pw-pedido-status-btn--proc { background: #dcfce7; color: #166534; font-weight: 700; }
.pw-pedido-status-btn--active.pw-pedido-status-btn--imp { background: #fee2e2; color: #991b1b; font-weight: 700; }
[data-theme=dark] .pw-pedido-status-btn { background: var(--color-surface, #1e293b); color: var(--color-text-muted, #94a3b8); }
[data-theme=dark] .pw-pedido-status-btn--active.pw-pedido-status-btn--proc { background: #14532d; color: #86efac; }
[data-theme=dark] .pw-pedido-status-btn--active.pw-pedido-status-btn--imp { background: #450a0a; color: #fca5a5; }

/* ── Kanban card group divider ── */
.pw-kanban__group-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
    margin: 4px 0;
}
.pw-kanban__group-divider::before,
.pw-kanban__group-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border, #e2e8f0);
}
.pw-kanban__group-divider span {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted, #94a3b8);
    white-space: nowrap;
}
.pw-kanban__card--no-pending {
    opacity: 0.8;
}
.pw-kanban__card--no-pending:hover { opacity: 1; }

/* ── Editor toolbar SVG icon style improvements ── */
.pw-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    background: var(--color-bg-hover, #f8f9fb);
    border: 1px solid var(--color-border, #e5e7eb);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
}
.pw-editor-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    color: var(--color-text-muted, #6b7280);
    transition: background 0.1s, color 0.1s;
}
.pw-editor-btn:hover {
    background: var(--color-border, #e5e7eb);
    color: var(--color-text, #111827);
}
.pw-editor-divider {
    display: inline-block;
    width: 1px;
    height: 16px;
    background: var(--color-border, #d1d5db);
    margin: 0 3px;
}
.pw-rich-editor {
    border-radius: 0 0 6px 6px;
    border-top: none;
    min-height: 80px;
}

/* ── Faturas Tab ── */
.pw-faturas {
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pw-faturas__empty {
    text-align: center;
    color: var(--color-text-muted, #94a3b8);
    font-size: 0.875rem;
    padding: 24px 0;
}
.pw-faturas__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pw-fatura-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--color-bg-hover, #f8f9fb);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    gap: 12px;
}
.pw-fatura-item__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.pw-fatura-item__id {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--color-primary, #6366f1);
}
.pw-fatura-item__cliente {
    font-size: 0.875rem;
    color: var(--color-text, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pw-fatura-item__date {
    font-size: 0.75rem;
    color: var(--color-text-muted, #94a3b8);
}
.pw-fatura-item__remove {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-text-muted, #94a3b8);
    transition: background 0.15s, color 0.15s;
}
.pw-fatura-item__remove:hover {
    background: #fee2e2;
    color: #ef4444;
}
.pw-fatura-add-form {
    padding: 12px;
    background: var(--color-bg-hover, #f8f9fb);
    border: 1px dashed var(--color-border, #e5e7eb);
    border-radius: 8px;
}
.pw-fatura-add-form__loading,
.pw-fatura-add-form__empty {
    font-size: 0.875rem;
    color: var(--color-text-muted, #94a3b8);
    margin: 0;
}
.pw-fatura-add-form__row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.pw-fatura-add-form__select {
    flex: 1;
    min-width: 180px;
}
.pw-fatura-add-btn-wrap {
    padding-top: 4px;
}
.pw-fatura-item__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.pw-fatura-item__open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: var(--color-text-muted, #94a3b8);
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
}
.pw-fatura-item__open:hover {
    background: #e0e7ff;
    color: #6366f1;
}

/* Card tags: prazo / recurso / audiência / label */
.pw-kanban__card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 10px 8px;
}
.pw-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.pw-tag--prazo {
    background: rgba(217, 119, 6, 0.12);
    color: #b45309;
}
.pw-tag--recurso {
    background: rgba(37, 99, 235, 0.1);
    color: #1d4ed8;
}
.pw-tag--audiencia {
    background: rgba(5, 150, 105, 0.1);
    color: #047857;
}

/* Duration row in task/audiência forms */
.pw-duracao-row { display: flex; align-items: center; gap: 4px; }
.pw-duracao-num { width: 52px !important; text-align: center; }
.pw-duracao-unit { font-size: 12px; color: var(--color-text-muted); }

/* Searchable Select Component */
.pw-ss { position: relative; }
.pw-ss__trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border: 1px solid var(--color-border, #e5e7eb); border-radius: 6px; background: var(--color-bg, #fff); cursor: pointer; font-size: 13px; color: var(--color-text, #111827); min-height: 36px; transition: border-color .15s; }
.pw-ss__trigger:hover { border-color: var(--color-primary, #6366f1); }
.pw-ss--sm .pw-ss__trigger { padding: 5px 8px; font-size: 12px; min-height: 30px; }
.pw-ss__placeholder { color: var(--color-text-muted, #9ca3af); }
/* A seta vem do catálogo (`voltar`), como no `ui.seletor`: ela aponta para a
   ESQUERDA, e -90° a faz descer. Um desenho só para todos os seletores da
   casa — o chevron à mão divergia em cada tela (13/09/2026). */
.pw-ss__chevron { flex-shrink: 0; display: flex; color: var(--color-text-muted, #9ca3af); }
.pw-ss__chevron svg { transform: rotate(-90deg); transition: transform .15s; }
.pw-ss--aberto .pw-ss__chevron svg { transform: rotate(90deg); }
.pw-ss__dropdown { position: fixed; min-width: 220px; background: var(--color-bg, #fff); border: 1px solid var(--color-border, #e5e7eb); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 9999; overflow: hidden; min-width: 220px; }
.pw-ss__search { width: 100%; border: none; border-bottom: 1px solid var(--color-border, #e5e7eb); padding: 8px 12px; font-size: 13px; outline: none; background: var(--color-bg-alt, #f9fafb); color: var(--color-text, #111827); }
.pw-ss__options { max-height: 220px; overflow-y: auto; }
.pw-ss__option { padding: 8px 12px; font-size: 13px; cursor: pointer; color: var(--color-text, #111827); transition: background .1s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-ss__option:hover { background: var(--color-bg-alt, #f3f4f6); }
.pw-ss__option--active { background: rgba(99,102,241,.08); color: var(--color-primary, #6366f1); font-weight: 500; }
.pw-ss__option--clear { color: var(--color-text-muted, #9ca3af); font-size: 12px; border-bottom: 1px solid var(--color-border, #e5e7eb); }
.pw-ss__empty { padding: 10px 12px; font-size: 12px; color: var(--color-text-muted, #9ca3af); text-align: center; }

/* Dropdown de resultados da busca do board (ancorada abaixo do campo) */
.pw-search__dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 340px;
    max-width: 82vw;
}
.pw-search__dropdown .pw-ss__options { max-height: 360px; }
.pw-search__result {
    display: flex; flex-direction: column; gap: 2px;
    white-space: normal; padding: 9px 12px; line-height: 1.3;
}
.pw-search__result-title {
    font-size: 13px; font-weight: 600; color: var(--color-text, #111827);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pw-search__result-meta {
    font-size: 11px; color: var(--color-text-muted, #9ca3af);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pw-search__result-list { font-weight: 600; }

/* Prazo fields */
.pw-input--readonly { background: var(--color-bg-alt, #f9fafb); color: var(--color-text-muted, #6b7280); cursor: default; }
.pw-prazo-limite-badge { display: inline-block; background: #dbeafe; color: #1d4ed8; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; }

/* ── Aliases para aba Contratos (renomeado de Faturas) ── */
.pw-contratos                { @extend .pw-faturas; }
.pw-contratos__empty         { @extend .pw-faturas__empty; }
.pw-contratos__list          { @extend .pw-faturas__list; }
.pw-contrato-item            { @extend .pw-fatura-item; }
.pw-contrato-item__info      { @extend .pw-fatura-item__info; }
.pw-contrato-item__id        { @extend .pw-fatura-item__id; }
.pw-contrato-item__cliente   { @extend .pw-fatura-item__cliente; }
.pw-contrato-item__date      { @extend .pw-fatura-item__date; }
.pw-contrato-item__actions   { @extend .pw-fatura-item__actions; }
.pw-contrato-item__open      { @extend .pw-fatura-item__open; }
.pw-contrato-item__open:hover{ @extend .pw-fatura-item__open:hover; }
.pw-contrato-item__remove    { @extend .pw-fatura-item__remove; }
.pw-contrato-item__remove:hover { @extend .pw-fatura-item__remove:hover; }
.pw-contrato-add-form        { @extend .pw-fatura-add-form; }
.pw-contrato-add-form__loading { @extend .pw-fatura-add-form__loading; }
.pw-contrato-add-form__empty { @extend .pw-fatura-add-form__empty; }
.pw-contrato-add-form__row   { @extend .pw-fatura-add-form__row; }

/* ── Aliases para aba "Contratos" (renomeado de Faturas) ── */
.pw-contratos {
    padding: 4px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pw-contratos__empty {
    text-align: center;
    color: var(--color-text-muted, #94a3b8);
    font-size: 0.875rem;
    padding: 24px 0;
}
.pw-contratos__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pw-contrato-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--color-bg-hover, #f8f9fb);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    gap: 12px;
}
.pw-contrato-item__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.pw-contrato-item__id {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--color-primary, #6366f1);
}
.pw-contrato-item__cliente {
    font-size: 0.875rem;
    color: var(--color-text, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pw-contrato-item__date {
    font-size: 0.75rem;
    color: var(--color-text-muted, #94a3b8);
}
.pw-contrato-item__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.pw-contrato-item__open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: var(--color-text-muted, #94a3b8);
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
}
.pw-contrato-item__open:hover {
    background: #e0e7ff;
    color: #6366f1;
}
.pw-contrato-item__remove {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-text-muted, #94a3b8);
    transition: background 0.15s, color 0.15s;
}
.pw-contrato-item__remove:hover {
    background: #fee2e2;
    color: #ef4444;
}
.pw-contrato-add-form {
    padding: 12px;
    background: var(--color-bg-hover, #f8f9fb);
    border: 1px dashed var(--color-border, #e5e7eb);
    border-radius: 8px;
}
.pw-contrato-add-form__loading,
.pw-contrato-add-form__empty {
    font-size: 0.875rem;
    color: var(--color-text-muted, #94a3b8);
    margin: 0;
}
.pw-contrato-add-form__row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Badge de tipo no extrato do cliente. A forma mora aqui porque o :style do
   Alpine (usado para a cor por grupo) substitui o atributo style inteiro. */
.cl-tipo-badge {
    display: inline-flex; align-items: center; white-space: nowrap;
    padding: 3px 10px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .02em; line-height: 1.4;
}

/* Barra compacta de relatório na rail Andamentos. O detalhe (consulta,
   destinatários, teste) vive em /cards/{id}/relatorios. */
.pw-modal .pw-rel-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 11px 13px; margin-bottom: 4px;
    background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: 10px;
}
.pw-modal .pw-rel-bar__switch {
    position: relative; width: 44px; height: 24px; border-radius: 12px;
    border: none; cursor: pointer; flex-shrink: 0; outline: none; transition: background .2s;
}
.pw-modal .pw-rel-bar__switch > span {
    position: absolute; top: 2px; width: 20px; height: 20px; border-radius: 50%;
    background: var(--color-bg-elevated); box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .2s;
}
.pw-modal .pw-rel-bar__info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 160px; }
.pw-modal .pw-rel-bar__title { font-size: 12px; font-weight: 600; color: var(--color-text); }
.pw-modal .pw-rel-bar__sub { font-size: 11px; color: var(--color-text-muted); line-height: 1.4; }
.pw-modal .pw-rel-bar__send { flex-shrink: 0; }
.pw-modal .pw-rel-bar__err { font-size: 11px; color: var(--color-danger, #ef4444); margin: 4px 0 0; }
/* Devolucao do relatorio. Ambar quando se resolve sozinha (caixa cheia, reenvio
   automatico) e vermelho quando exige que alguem troque o endereco: sao acoes
   diferentes, e uma cor so' faria o usuario tratar as duas do mesmo jeito. */
.pw-modal .pw-rel-alert {
    display: flex; align-items: center; gap: 7px; margin-top: 6px; padding: 8px 11px;
    font-size: 11.5px; line-height: 1.45; border-radius: 8px;
    background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
}
.pw-modal .pw-rel-alert--grave { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.pw-modal .pw-rel-alert__link {
    margin-left: auto; flex-shrink: 0; border: none; background: none; padding: 0;
    font-size: 11px; font-weight: 600; color: inherit; text-decoration: underline; cursor: pointer;
}
/* Correcao do endereco, em etapas dentro da propria barra */
.pw-modal .pw-rel-fix {
    margin-top: 6px; padding: 11px 13px; border-radius: 8px;
    background: var(--color-bg-elevated); border: 1px solid var(--color-border);
}
.pw-modal .pw-rel-fix__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pw-modal .pw-rel-fix__title { font-size: 12px; font-weight: 600; color: var(--color-text); }
.pw-modal .pw-rel-fix__hint { font-size: 11px; color: var(--color-text-muted); line-height: 1.5; margin: 0 0 8px; }
.pw-modal .pw-rel-fix__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pw-modal .pw-rel-fix__row .pw-input { flex: 1; min-width: 190px; }
.pw-modal .pw-rel-fix__ok { font-size: 11.5px; color: #15803d; flex: 1; margin: 0; }
/* Ponto pulsante: a espera pelo veredito do provedor e' o unico momento em que
   nao ha' nada para o usuario fazer, e o silencio parece travamento. */
.pw-modal .pw-rel-fix__dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--color-primary); margin-right: 5px; animation: pwPulse 1.2s ease-in-out infinite;
}
@keyframes pwPulse { 0%,100% { opacity: .25 } 50% { opacity: 1 } }
/* Ação DataJud no subheader do histórico */
.pw-modal .pw-rail-head__btn--datajud { color: #1d4ed8; border-color: #bfdbfe; }
.pw-modal .pw-rail-head__btn--datajud:hover { background: #eff6ff; color: #1e40af; border-color: #93c5fd; }
.pw-modal .pw-rail-head__btn:disabled { opacity: .6; cursor: wait; }

/* "EM BREVE" NAO E' "OCUPADO".
   A regra `:disabled` acima serve ao botao que esta' processando — dai o
   `cursor: wait`. O botao que anuncia um caminho que ainda nao abriu precisa
   dizer outra coisa: fica apagado e inerte, sem prometer que algo acontece. */
.pw-modal .pw-rail-head__btn--breve,
.pw-modal .pw-rail-head__btn--breve:disabled { opacity: .45; cursor: default; }
.pw-modal .pw-rail-head__btn--breve:hover { background: var(--color-bg-elevated); }

/* O lado de abertura dos dropdowns da barra é decidido em runtime por
   ajustarDropdownBarra(), que mede o espaço real dentro da modal. */

/* ────────────────────────────────────────────────────────────────
   Grade de formulário e título de seção.
   As classes eram usadas em 10+ telas (modais de cadastro, configurações)
   e NUNCA tiveram CSS: tudo empilhava numa coluna só, e o título de seção
   saía como texto solto, menor que os rótulos em caixa alta logo abaixo.
   ──────────────────────────────────────────────────────────────── */
.pw-form-grid {
    display: grid;
    gap: 12px 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}
.pw-form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pw-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pw-form-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* min-width:0 impede que select e input estourem a coluna */
.pw-form-grid > .pw-form-group { min-width: 0; }
.pw-form-grid .pw-input,
.pw-form-grid .pw-ss { width: 100%; max-width: 100%; }

@media (max-width: 860px) {
    .pw-form-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .pw-form-grid,
    .pw-form-grid--2,
    .pw-form-grid--3,
    .pw-form-grid--4 { grid-template-columns: 1fr; }
    /* spans deixam de fazer sentido em coluna única */
    .pw-form-grid > .pw-form-group { grid-column: auto !important; }
}

/* Cabeçalho de seção: precisa ler ACIMA dos rótulos, que são caixa alta */
.pw-form-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -.005em;
}
.pw-form-section-title:first-child { margin-top: 0; }
.pw-form-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

/* Prazo fatal na linha do prazo: é a data legal, distinta do agendamento */
.pw-modal .pw-prazo-fatal-chip {
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
    padding: 1px 7px; border-radius: 999px; margin-right: 8px;
    background: #fbeaec; color: #b02a37; border: 1px solid #f5c2c7;
    font-size: 10.5px; font-weight: 700;
}

/* ── Contagem para o prazo fatal no evento do calendário ──────────
   Coluna estreita à direita, só em eventos com prazo fatal definido.
   Fundo próprio (não translúcido) para não se confundir com a cor do evento,
   e faixa de urgência que se lê antes do número. Pisca abaixo de 4 dias. */
/* row + stretch precisam vir explícitos: a regra base do wrapper e' flex-direction:column,
   e sem sobrescrever as duas o selo cai embaixo como faixa horizontal. */
.pw-fc-event-wrapper { display: flex; flex-direction: row; align-items: stretch; gap: 0; }
.pw-fc-event-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }

/* Para o selo encostar na borda direita nao basta margem negativa: o FullCalendar
   aplica padding em DUAS camadas (.fc-event 2px 5px + .fc-event-main 2px 4px) e o
   valor muda por view. Entao zeramos os dois quando ha' coluna de prazo fatal e
   devolvemos o respiro no corpo do evento -- assim cola em qualquer view. */
.fc .fc-event:has(.pw-fc-fatal),
.fc .fc-event:has(.pw-fc-fatal) .fc-event-main { padding: 0 !important; }
/* O recuo da esquerda vai no WRAPPER, nao no corpo: o checkbox mora fora do corpo
   e, com o padding la' dentro, colava na borda. 9px = os mesmos 5px do .fc-event
   + 4px do .fc-event-main que os eventos sem coluna recebem.
   O vertical fica no corpo, senao a coluna do prazo deixa de encostar no topo/base. */
.fc .fc-event:has(.pw-fc-fatal) .pw-fc-event-wrapper { padding-left: 9px; }
.fc .fc-event:has(.pw-fc-fatal) .pw-fc-event-corpo { padding: 4px 0; }
/* O checkbox tambem esta' fora do corpo, entao nao recebe o padding-top dele:
   1px (base) + os 4px do corpo = mesma altura da primeira linha do titulo. */
.fc .fc-event:has(.pw-fc-fatal) .pw-fc-check { margin-top: 5px; }

.pw-fc-fatal {
    flex-shrink: 0;
    align-self: stretch;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 1px;
    width: 34px; min-width: 34px;
    margin: 0;
    border-left: 1px solid rgba(255, 255, 255, .55);
    /* acompanha o arredondamento do proprio evento no canto direito */
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: #fff;
    font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1;
}
.pw-fc-fatal__num { font-size: 13px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
/* sem uppercase: o "1d" do vencido virava "1D" e a unidade em minusculo le' melhor */
.pw-fc-fatal__lbl {
    font-size: 7.5px; font-weight: 700; line-height: 1;
    letter-spacing: .04em; opacity: .82;
}
/* HOJE / VENC nao sao numeros: cabem na largura so' em corpo menor */
.pw-fc-fatal--palavra .pw-fc-fatal__num { font-size: 9px; letter-spacing: .02em; }
/* Abas Futuros/Passados: o evento e' uma linha de tabela sobre fundo claro, entao
   o selo solido do calendario fica pesado demais. Aqui ele vira um badge discreto,
   com fundo tingido e o texto na propria cor da urgencia.
   Os !important e o prefixo #fullcalendar existem porque a regra de legibilidade da
   list view (#fullcalendar .fc-list-event td span) forca a cor de TODO span da celula
   com !important — sem isso o texto do selo sai preto. */
.pw-fc-list-titulo { display: inline-flex; align-items: center; gap: 9px; }

#fullcalendar .fc-list-event .pw-fc-fatal--inline {
    display: inline-flex; flex-direction: row; align-items: baseline; gap: 4px;
    width: auto; min-width: 0; height: auto;
    padding: 2.5px 8px; margin: 0;
    border: 1px solid transparent; border-radius: 7px;
    vertical-align: middle; box-shadow: none;
}
#fullcalendar .fc-list-event .pw-fc-fatal--inline .pw-fc-fatal__num {
    color: inherit !important;
    font-size: 11px; font-weight: 700; letter-spacing: 0;
}
#fullcalendar .fc-list-event .pw-fc-fatal--inline .pw-fc-fatal__lbl {
    color: inherit !important;
    font-size: 8.5px; font-weight: 600; letter-spacing: .06em; opacity: .72;
}
#fullcalendar .fc-list-event .pw-fc-fatal--inline.pw-fc-fatal--palavra .pw-fc-fatal__num {
    font-size: 10px; letter-spacing: .04em;
}

#fullcalendar .fc-list-event .pw-fc-fatal--inline.pw-fc-fatal--ok {
    background: #f8fafc; border-color: #e2e8f0; color: #475569 !important;
}
#fullcalendar .fc-list-event .pw-fc-fatal--inline.pw-fc-fatal--atencao {
    background: #fffbeb; border-color: #fde68a; color: #b45309 !important;
}
#fullcalendar .fc-list-event .pw-fc-fatal--inline.pw-fc-fatal--critico {
    background: #fef2f2; border-color: #fecaca; color: #b91c1c !important;
}
#fullcalendar .fc-list-event .pw-fc-fatal--inline.pw-fc-fatal--atrasado {
    background: #fff1f2; border-color: #fda4af; color: #9f1239 !important;
}

.pw-fc-fatal--ok       { background: #1f2937; }
.pw-fc-fatal--atencao  { background: #b45309; }
.pw-fc-fatal--critico  { background: #dc2626; }
.pw-fc-fatal--atrasado { background: #6b0f1a; }

/* Checkbox de concluir: desliza da esquerda no hover do evento e empurra o texto.
   Anima largura + margem (nao display) para o conteudo acompanhar sem salto; fica
   fixo e preenchido quando o evento ja' esta' concluido. */
.pw-fc-check {
    box-sizing: border-box;
    flex: 0 0 auto; align-self: flex-start;
    width: 0; height: 14px; margin: 1px 0 0 0; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 0 solid rgba(255, 255, 255, .85); border-radius: 4px;
    background: rgba(255, 255, 255, .14);
    color: #fff; cursor: pointer; overflow: hidden;
    opacity: 0; transform: translateX(-8px);
    transition: width .18s cubic-bezier(.2,.7,.3,1), margin-right .18s cubic-bezier(.2,.7,.3,1),
                opacity .15s ease, transform .18s cubic-bezier(.2,.7,.3,1),
                background-color .15s ease, border-color .15s ease;
}
/* So' o hover (ou o foco por teclado) revela — inclusive em evento ja' concluido,
   que ja' se identifica pelo titulo tachado e esmaecido. */
.fc-event:hover .pw-fc-check,
.pw-fc-check:focus-visible {
    width: 14px; margin-right: 6px;
    border-width: 1.5px;
    opacity: 1; transform: translateX(0);
}
.pw-fc-check svg { opacity: .5; transition: opacity .12s; }
.pw-fc-check:hover { background: rgba(255, 255, 255, .3); }
.pw-fc-check:hover svg { opacity: .95; }
.pw-fc-check--on {
    background: #fff; border-color: #fff; color: #15803d;
}
.pw-fc-check--on svg { opacity: 1; }

/* Sem animacao para quem desativou movimento no sistema */
@media (prefers-reduced-motion: reduce) {
    .pw-fc-check { transition: none; transform: none; }
}

/* Prazo fatal na véspera ou vencido (<= 1 dia): pisca o evento inteiro, não só o selo
 *
 * **Anima OPACIDADE, e não `filter`/`box-shadow`.**
 *
 * A versão anterior animava `filter: brightness()` junto com `box-shadow`: as
 * duas mais caras que existem. `filter` obriga o navegador a repintar o
 * elemento inteiro a cada quadro, e `box-shadow` repinta também a área ao redor
 * dele. Num mês cheio, com dezenas de prazos vencidos ao mesmo tempo, isso é a
 * grade inteira sendo repintada sessenta vezes por segundo — o ventilador do
 * computador subindo por causa de um aviso visual.
 *
 * Aqui a moldura é um pseudo-elemento FIXO, e o que pulsa é só a opacidade
 * dele. Opacidade e transform são as duas propriedades que o navegador resolve
 * na placa de vídeo, sem repintar nada: o custo deixa de crescer com o número
 * de eventos.
 *
 * `will-change` avisa antes, para a camada já nascer separada em vez de ser
 * promovida no primeiro quadro — é onde aparecia o engasgo ao trocar de mês.
 */
.fc-event.pw-fc-evento-alerta { position: relative; }

.fc-event.pw-fc-evento-alerta::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(220, 38, 38, .55);
    pointer-events: none;
    opacity: 0;
    will-change: opacity;
    animation: pw-evento-piscando 1.15s ease-in-out infinite;
}

@keyframes pw-evento-piscando {
    0%, 100% { opacity: 0; }
    50%      { opacity: 1; }
}

/* Quem desativa animações no sistema não deve levar o calendário pulsando */
@media (prefers-reduced-motion: reduce) {
    .fc-event.pw-fc-evento-alerta::after {
        animation: none;
        opacity: 1;   /* a moldura fica, parada: o aviso continua sem o pulso */
    }
}


/* Barra do contratante na aba Partes de diligencias */
.pw-ct-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap;
    padding: 10px 12px; margin-bottom: 14px;
    background: var(--color-bg-secondary, #f8fafc);
    border: 1px solid var(--color-border, #e5e7eb); border-radius: 10px;
}
.pw-ct-bar__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pw-ct-bar__rotulo {
    font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--color-text-muted, #6b7280);
}
.pw-ct-bar__nome {
    font-size: 13px; font-weight: 600; color: var(--color-text, #1a1a2e);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pw-ct-bar__opcoes {
    display: inline-flex; padding: 2px; gap: 2px;
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb); border-radius: 8px;
}
.pw-ct-bar__op {
    padding: 5px 10px; border: 0; border-radius: 6px; cursor: pointer;
    background: transparent; color: var(--color-text-muted, #6b7280);
    font-size: 11.5px; font-weight: 600; white-space: nowrap;
    transition: background-color .12s, color .12s;
}
.pw-ct-bar__op:hover { background: var(--color-bg-secondary, #f1f5f9); }
.pw-ct-bar__op--on {
    background: var(--color-primary, #6366f1); color: #fff;
}
.pw-ct-bar__op--on:hover { background: var(--color-primary, #6366f1); }


/* Arrastar partes entre os polos */
.pw-partes-lista { min-height: 34px; }
.pw-parte-item { cursor: grab; }
.pw-parte-item:active { cursor: grabbing; }
.pw-parte-item--ghost {
    opacity: .45;
    background: var(--color-bg-secondary, #f1f5f9);
    border-style: dashed;
}
.pw-parte-item--arrastando {
    box-shadow: 0 8px 20px rgba(0, 0, 0, .14);
}
/* alvo de soltura visivel mesmo quando o polo esta' vazio */
.pw-partes-lista:empty::after {
    content: 'Solte aqui para mover a parte';
    display: block; padding: 9px 12px;
    border: 1px dashed var(--color-border, #e5e7eb); border-radius: 8px;
    color: var(--color-text-muted, #9ca3af); font-size: 12px; text-align: center;
}


/* Selo de polo da parte diligenciada */
.pw-polo-tag {
    margin-left: 8px; padding: 2px 7px; border-radius: 999px;
    font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    border: 1px solid transparent; white-space: nowrap;
}
.pw-polo-tag--ativo   { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.pw-polo-tag--passivo { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }


/* Selo de evento vindo de calendário externo (Google) no cabeçalho do card */
.pw-google-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px; margin-left: 8px;
    border: 1px solid #fbbf24; border-radius: 999px;
    background: #fffbeb; color: #92400e;
    font-size: 10px; font-weight: 700; letter-spacing: .03em;
    white-space: nowrap; cursor: help;
}

.pw-google-chip__del {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; margin-left: 2px; padding: 0;
    border: 0; border-radius: 50%; cursor: pointer;
    background: transparent; color: #b45309;
    transition: background-color .12s, color .12s;
}
.pw-google-chip__del:hover { background: #b91c1c; color: #fff; }

/* Lista de eventos do Google vinculados ao card */
.pw-ev-ext {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; margin-top: 6px;
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
}
.pw-ev-ext__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pw-ev-ext__titulo {
    font-size: 12.5px; font-weight: 600; color: var(--color-text, #1a1a2e);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pw-ev-ext__meta { font-size: 11px; color: #92400e; }


/* ── Tooltip de resumo do evento (hover no corpo do evento) ───────────────── */
.pw-ev-tip {
    position: fixed; z-index: 9999;
    max-width: 340px; min-width: 220px;
    padding: 0; overflow: hidden;
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .08);
    opacity: 0; visibility: hidden; transform: translateY(-4px) scale(.98);
    transition: opacity .14s ease, transform .14s ease, visibility .14s;
    /* nunca rouba clique nem hover: o checkbox de concluir e o proprio evento
       continuam totalmente acessiveis mesmo com o cartao aberto por cima */
    pointer-events: none;
}
.pw-ev-tip--on { opacity: 1; visibility: visible; transform: none; }

/* faixa da cor do proprio evento: liga o cartao ao bloco de origem */
.pw-ev-tip::before {
    content: ''; display: block; height: 3px;
    background: var(--pw-tip-cor, #6366f1);
}
.pw-ev-tip__titulo {
    padding: 10px 13px 8px;
    font-size: 13px; font-weight: 650; line-height: 1.35;
    color: var(--color-text, #1a1a2e);
}
.pw-ev-tip__partes {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
    padding: 0 13px 9px;
    font-size: 12px; line-height: 1.35;
    color: var(--color-text-muted, #6b7280);
}
.pw-ev-tip__parte { overflow-wrap: anywhere; }
/* mesmo destaque do cabeçalho da modal: o polo do cliente vem em negrito */
.pw-ev-tip__parte--cliente { color: var(--color-text, #1a1a2e); font-weight: 650; }
.pw-ev-tip__vs { opacity: .5; font-size: 11px; }

.pw-ev-tip__corpo {
    padding: 0 13px 10px;
    display: flex; flex-direction: column; gap: 6px;
}
.pw-ev-tip__linha {
    display: flex; align-items: flex-start; gap: 7px;
    font-size: 12px; line-height: 1.4;
    color: var(--color-text-muted, #6b7280);
}
.pw-ev-tip__linha svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px; opacity: .7; }
.pw-ev-tip__linha--urgente { color: #b91c1c; font-weight: 600; }
.pw-ev-tip__linha--urgente svg { opacity: 1; }
.pw-ev-tip__linha--atencao { color: #b45309; font-weight: 600; }
.pw-ev-tip__linha--atencao svg { opacity: 1; }
.pw-ev-tip__linha--ok { color: #047857; }
.pw-ev-tip__desc {
    margin: 0 13px 10px; padding-top: 9px;
    border-top: 1px solid var(--color-border, #e5e7eb);
    font-size: 11.5px; line-height: 1.5;
    color: var(--color-text-muted, #6b7280);
    /* pre-line: honra as quebras do texto e ainda quebra linha comprida
       sozinha. Sem isto, assunto, aviso e contato saem numa frase so'. */
    white-space: pre-line;
    overflow-wrap: anywhere;
}
/* variante sem corpo: a contagem so' tem titulo + explicacao */
.pw-ev-tip__desc--solo { border-top: 0; padding-top: 0; margin-top: -2px; }

.pw-ev-tip__rodape {
    padding: 7px 13px;
    background: var(--color-bg-secondary, #f8fafc);
    border-top: 1px solid var(--color-border, #e5e7eb);
    font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: var(--color-text-muted, #9ca3af);
}

@media (prefers-reduced-motion: reduce) {
    .pw-ev-tip { transition: opacity .01s, visibility .01s; transform: none; }
}


/* Prazo fatal original + restaurar */
.pw-fatal-orig {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-top: 6px; padding: 6px 9px;
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 7px;
    font-size: 11.5px; color: #92400e;
}
.pw-fatal-orig svg { flex-shrink: 0; opacity: .8; }
.pw-fatal-orig__btn {
    margin-left: auto; padding: 3px 9px;
    border: 1px solid #f59e0b; border-radius: 6px; cursor: pointer;
    background: #fff; color: #92400e;
    font-size: 11px; font-weight: 600;
    transition: background-color .12s, color .12s;
}
.pw-fatal-orig__btn:hover { background: #f59e0b; color: #fff; }

.pw-fatal-alterado {
    margin-left: 5px; padding: 1px 5px;
    border-radius: 4px; background: #fef3c7; color: #92400e;
    font-size: 9.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    cursor: help;
}


/* Seletor de natureza + papel do quick create */
.pw-qc-tipos { display: flex; flex-direction: column; gap: 7px; }
.pw-qc-tipos__linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pw-qc-tipos__rotulo {
    min-width: 62px;
    font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--color-text-muted, #6b7280);
}
.pw-qc-tipos__grupo { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.pw-qc-tipos__grupo button {
    padding: 4px 10px; cursor: pointer;
    border: 1px solid var(--color-border, #e5e7eb); border-radius: 999px;
    background: var(--color-bg, #fff); color: var(--color-text-muted, #6b7280);
    font-size: 11.5px; font-weight: 600; white-space: nowrap;
    transition: background-color .12s, color .12s, border-color .12s;
}
.pw-qc-tipos__grupo button:hover { background: var(--color-bg-secondary, #f8fafc); }
.pw-qc-tipos__grupo button.active {
    background: var(--color-primary, #6366f1); border-color: var(--color-primary, #6366f1); color: #fff;
}


/* ── Número do processo com painel de detalhes (telas de documentos) ───────── */
.dnp { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.dnp__chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 7px; border-radius: 7px; cursor: pointer;
    border: 1px solid transparent;
    transition: background-color .12s, border-color .12s;
}
.dnp__chip:hover, .dnp__chip--on {
    background: var(--color-bg-secondary, #f1f5f9);
    border-color: var(--color-border, #e5e7eb);
}
.dnp__num {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; letter-spacing: -.02em; color: var(--color-text, #1a1a2e);
}
.dnp__chevron { opacity: .5; transition: transform .15s; flex-shrink: 0; }
.dnp__copiar {
    border: 0; background: transparent; cursor: pointer; padding: 2px;
    line-height: 0; color: var(--color-text-muted, #9ca3af); border-radius: 5px;
}
.dnp__copiar:hover { background: var(--color-bg-secondary, #f1f5f9); color: var(--color-text, #1a1a2e); }

.dnp__painel {
    position: fixed; z-index: 9999; width: 364px; max-width: calc(100vw - 16px);
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb); border-radius: 12px;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .08);
    overflow: hidden;
}
.dnp__partes {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    padding: 12px 14px;
    background: var(--color-bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.dnp__polo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dnp__polo-rot {
    display: flex; align-items: center; gap: 5px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--color-text-muted, #6b7280);
}
.dnp__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.dnp__dot--ativo   { background: #22c55e; }
.dnp__dot--passivo { background: #f97316; }
.dnp__polo-nome {
    font-size: 12px; line-height: 1.35; color: var(--color-text, #1a1a2e);
    overflow-wrap: anywhere;
}
/* o polo do cliente vem em negrito, como no cabeçalho da modal do card */
.dnp__polo-nome--cliente { font-weight: 650; }

.dnp__lista {
    display: grid; grid-template-columns: auto 1fr; gap: 7px 14px;
    margin: 0; padding: 12px 14px;
}
.dnp__lista dt {
    font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--color-text-muted, #6b7280); white-space: nowrap; padding-top: 1px;
}
.dnp__lista dd {
    margin: 0; font-size: 12.5px; line-height: 1.35;
    color: var(--color-text, #1a1a2e); overflow-wrap: anywhere;
}

.dnp__completar {
    display: flex; align-items: center; gap: 6px;
    padding: 9px 14px; text-decoration: none;
    background: var(--color-bg-secondary, #f8fafc);
    border-top: 1px solid var(--color-border, #e5e7eb);
    color: var(--color-primary, #6366f1);
    font-size: 11.5px; font-weight: 600; line-height: 1.3;
}
.dnp__completar:hover { background: var(--color-bg, #fff); text-decoration: underline; }


/* Uso da cota de e-mail */
.pw-mail-uso { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.pw-mail-uso__item {
    padding: 12px 14px; border: 1px solid var(--color-border, #e5e7eb); border-radius: 10px;
    background: var(--color-bg-secondary, #f8fafc);
}
.pw-mail-uso__rot {
    display: block; font-size: 10px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--color-text-muted, #6b7280);
}
.pw-mail-uso__num { display: block; margin: 4px 0 8px; font-size: 20px; font-weight: 700; color: var(--color-text, #1a1a2e); }
.pw-mail-uso__num small { font-size: 12px; font-weight: 500; color: var(--color-text-muted, #9ca3af); }
.pw-mail-uso__barra { height: 5px; border-radius: 99px; background: var(--color-border, #e5e7eb); overflow: hidden; }
.pw-mail-uso__barra i { display: block; height: 100%; background: var(--color-primary, #6366f1); border-radius: 99px; }

/* ── Movimentação da tarefa ──────────────────────────────────────────────────
   O histórico mora DENTRO da tarefa. A aba Andamentos continua vendo tudo (a
   movimentação é andamento do processo), marcada com a tarefa de origem; a aba
   Atividade é o log do card e não se mistura com isto. */
.pw-modal .pw-tarefa-mov {
    margin: -2px 0 10px; padding: 12px 13px;
    background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 9px;
}
.pw-modal .pw-tarefa-mov__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.pw-modal .pw-tarefa-mov__titulo { font-size: 12px; font-weight: 600; color: var(--color-text); }

/* Trilha do ciclo: as oito etapas em sequência, para o operador ver onde está
   e o que falta sem abrir o histórico. */
.pw-modal .pw-tarefa-mov__trilha { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 11px; }
.pw-modal .pw-tarefa-mov__etapa {
    font-size: 9.5px; font-weight: 600; letter-spacing: .02em; padding: 3px 7px; border-radius: 20px;
    background: var(--color-bg-elevated); border: 1px solid var(--color-border); color: var(--color-text-muted);
    white-space: nowrap;
}
.pw-modal .pw-tarefa-mov__etapa--feita { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.pw-modal .pw-tarefa-mov__etapa--atual { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.pw-modal .pw-tarefa-mov__form {
    display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 10px;
}
.pw-modal .pw-tarefa-mov__form input { grid-column: span 2; }
.pw-modal .pw-tarefa-mov__form button { grid-column: span 2; justify-self: end; }
/* O par "Cancelar edicao" + "Salvar" ocupa a linha inteira, alinhado a' direita.
   A regra acima manda todo `button` ocupar as duas colunas; aqui quem ocupa e' a
   caixa, e os botoes voltam a ter largura propria. */
.pw-modal .pw-tarefa-mov__acoes {
    grid-column: span 2; display: flex; align-items: center; justify-content: flex-end; gap: 10px;
}
.pw-modal .pw-tarefa-mov__acoes button { grid-column: auto; }

/* Quando e cobranca dividem uma linha. A regra acima manda todo `input` ocupar
   as duas colunas — o que serve para a observacao, que e' texto longo, e nao
   para estes dois, que sao curtos e se leem juntos: "isto aconteceu tal dia e
   pagou tal cobranca". Especificidade maior, e nao !important. */
.pw-modal .pw-tarefa-mov__form .pw-mov-quando { grid-column: span 1; }
.pw-modal .pw-tarefa-mov__form .pw-mov-cobranca { grid-column: span 1; }

/* O vinculo na linha do historico: discreto, mas identificavel — e' o que o
   recibo vai imprimir naquela cobranca. */
/* A linha que esta' sendo editada, para o operador nao perder de vista qual
   delas o formulario de cima esta' mexendo. */
.pw-modal .pw-tarefa-mov__linha--editando {
    background: var(--color-bg-hover); border-left: 2px solid var(--color-primary);
    padding-left: 7px; margin-left: -9px;
}
.pw-modal .pw-tarefa-mov__cob {
    font-size: 9.5px; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
    padding: 1px 7px; border-radius: 9px;
    background: var(--color-bg-hover); color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

.pw-modal .pw-tarefa-mov__linha {
    display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
    padding: 6px 0; border-top: 1px solid var(--color-border); font-size: 11.5px;
}
.pw-modal .pw-tarefa-mov__grupo {
    font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--color-text-muted);
}
.pw-modal .pw-tarefa-mov__tipo { font-weight: 600; color: var(--color-text); }
.pw-modal .pw-tarefa-mov__obs { color: var(--color-text-muted); }
.pw-modal .pw-tarefa-mov__quando { margin-left: auto; font-size: 10.5px; color: var(--color-text-muted); }
/* Exceção não é etapa: é o que travou. Precisa saltar da lista. */
.pw-modal .pw-tarefa-mov__linha--excecao .pw-tarefa-mov__tipo { color: #b45309; }
.pw-modal .pw-badge--warn {
    background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
    font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 20px; text-transform: uppercase;
}

/* Parte diligenciada: era uma caixa com borda e 3 linhas de altura para exibir
   um nome. Vira uma linha, como o Contratante logo acima. */
.pw-modal .pw-parte-linha { display: flex; align-items: center; }
.pw-modal .pw-parte-linha .pw-judicial-panel__party {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 9px 12px; border-radius: 9px;
    background: var(--color-bg); border: 1px solid var(--color-border);
}
.pw-modal .pw-parte-linha .pw-judicial-panel__party-role {
    font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--color-text-muted); white-space: nowrap;
}
.pw-modal .pw-parte-linha .pw-judicial-panel__party-name { font-size: 13px; }

/* Selo do lancamento manual. Discreto, mas visivel: e' o que separa estimativa
   digitada de medicao do cronometro na hora de faturar. */
.pw-modal .pw-badge-manual {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 20px;
    font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text-muted);
    cursor: help;
}

/* Ancora do tooltip: o proprio label do campo. O tracejado avisa que ha'
   explicacao ali; sem ele ninguem passaria o mouse. O balao em si e' o
   #pw-tip do layout — o app ja' tinha um, e um segundo mecanismo mostrava
   dois baloes por campo. */
/* Vale fora da modal do card tambem: o contrato usa .ctr-modal e ficaria sem o
   tracejado, com tooltip que ninguem descobre. */
.pw-label[data-tip] {
    display: inline-flex; align-items: center; gap: 4px;
    cursor: help; border-bottom: 1px dashed var(--color-border);
    padding-bottom: 1px;
}
.pw-label[data-tip]:hover { border-bottom-color: var(--color-primary); color: var(--color-primary); }

/* ── Item da tarefa ──────────────────────────────────────────────────────────
   Tinha classe emprestada da audiencia, feita para um bloco com duas linhas de
   meta: o checkbox ganhava padding-top para acompanhar, e numa tarefa sem meta
   ele ficava descolado do texto, com os botoes soltos na direita.
   Aqui e' grade de tres colunas: marca, conteudo, acoes — cada uma alinhada
   pelo topo do texto, nao pelo centro da caixa. */
.pw-modal .pw-tarefa-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    transition: border-color .12s ease, background .12s ease;
}
.pw-modal .pw-tarefa-item:hover { border-color: var(--color-primary-light); }
/* Com o painel aberto, a linha e o painel viram um bloco so' */
.pw-modal .pw-tarefa-item--aberta {
    border-color: var(--color-primary-light);
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    margin-bottom: 0; border-bottom-color: transparent;
}
.pw-modal .pw-tarefa-item__check { margin: 1px 0 0; flex-shrink: 0; }
.pw-modal .pw-tarefa-item__corpo { min-width: 0; }
.pw-modal .pw-tarefa-item__texto {
    display: block; font-size: 13px; font-weight: 500; line-height: 1.35;
    color: var(--color-text); overflow-wrap: anywhere;
}
.pw-modal .pw-tarefa-item__meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 5px 10px; margin-top: 5px;
}
.pw-modal .pw-tarefa-item__meta:empty { display: none; }
.pw-modal .pw-tarefa-item__data {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; color: var(--color-text-muted);
}
/* Estagio na propria linha: sem ele, saber onde a tarefa esta' exigia abrir o painel */
.pw-modal .pw-tarefa-item__estagio {
    font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    padding: 2px 7px; border-radius: 20px;
    background: var(--color-primary-light); color: var(--color-primary);
}
.pw-modal .pw-tarefa-item__obs {
    font-size: 11px; color: var(--color-text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px;
}
/* Acoes so' aparecem no hover: em repouso a linha e' leitura, nao um painel de botoes */
.pw-modal .pw-tarefa-item__acoes {
    display: flex; align-items: center; gap: 2px;
    opacity: 0; transition: opacity .12s ease;
}
.pw-modal .pw-tarefa-item:hover .pw-tarefa-item__acoes,
.pw-modal .pw-tarefa-item--aberta .pw-tarefa-item__acoes { opacity: 1; }
/* Toque nao tem hover: ali as acoes ficam sempre visiveis */
@media (hover: none) { .pw-modal .pw-tarefa-item__acoes { opacity: 1; } }

/* O painel encaixa embaixo da linha aberta */
.pw-modal .pw-tarefa-item--aberta + .pw-tarefa-mov {
    margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0;
    border-color: var(--color-primary-light);
}

/* Orgao no header da diligencia: mesmo destaque que ele tem no card do quadro */
.pw-modal .pw-modal__header-orgao {
    font-size: 10px; font-weight: 700; letter-spacing: .04em;
    padding: 1px 6px; border-radius: 5px;
    background: var(--color-primary-light); color: var(--color-primary);
}

/* Gatilho "Detalhes": mesma forma do chip do numero, sem a cara de dado —
   ali nao ha' numero para exibir, so' o convite a abrir o painel. */
.dnp__chip--detalhes {
    border: 1px dashed var(--color-border); background: none;
    color: var(--color-text-muted); cursor: pointer;
}
.dnp__chip--detalhes:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── Linha do tempo da atividade ─────────────────────────────────────────────
   Era uma lista corrida de linhas iguais: para saber quando algo aconteceu,
   era preciso ler a data de cada uma. Com o dia como cabecalho e um fio ligando
   os eventos, a leitura vira "o que houve em tal dia" — e o icone diz o tipo do
   ato antes de ler o texto. */
.pw-tl { display: flex; flex-direction: column; gap: 20px; }
.pw-tl__dia { position: relative; }
.pw-tl__dia-rot {
    display: flex; align-items: center; gap: 9px; margin-bottom: 12px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--color-text-muted);
}
.pw-tl__dia-rot::after {
    content: ''; flex: 1; height: 1px; background: var(--color-border);
}

.pw-tl__item { position: relative; display: flex; gap: 12px; padding-bottom: 15px; }
/* O fio liga um evento ao seguinte e para no ultimo do dia */
.pw-tl__item::before {
    content: ''; position: absolute; left: 11px; top: 24px; bottom: 0;
    width: 1px; background: var(--color-border);
}
.pw-tl__item:last-child { padding-bottom: 0; }
.pw-tl__item:last-child::before { display: none; }

.pw-tl__no {
    position: relative; z-index: 1; flex-shrink: 0;
    width: 23px; height: 23px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-bg-elevated); border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}
/* Cor por natureza do ato: criacao, movimento, dinheiro, agenda, remocao */
.pw-tl__no--criado     { background: #eef2ff; border-color: #c7d2fe; color: #4f46e5; }
.pw-tl__no--movido     { background: #eff6ff; border-color: #bfdbfe; color: #2563eb; }
.pw-tl__no--feito      { background: #ecfdf5; border-color: #a7f3d0; color: #059669; }
.pw-tl__no--agenda     { background: #fff7ed; border-color: #fed7aa; color: #ea580c; }
.pw-tl__no--remocao    { background: #fef2f2; border-color: #fecaca; color: #dc2626; }
.pw-tl__no--tempo      { background: #f5f3ff; border-color: #ddd6fe; color: #7c3aed; }
.pw-tl__no--andamento  { background: #f0fdfa; border-color: #99f6e4; color: #0d9488; }
.pw-tl__no--comentario { background: #fdf4ff; border-color: #f5d0fe; color: #a21caf; }

.pw-tl__corpo { flex: 1; min-width: 0; padding-top: 2px; }
.pw-tl__desc {
    margin: 0; font-size: 13px; line-height: 1.45; color: var(--color-text);
    overflow-wrap: anywhere;
}
.pw-tl__preview {
    margin: 4px 0 0; padding: 7px 10px; border-radius: 7px;
    background: var(--color-bg); border-left: 2px solid var(--color-border);
    font-size: 11.5px; line-height: 1.5; color: var(--color-text-muted);
}
.pw-tl__quem {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 3px;
    font-size: 11px; color: var(--color-text-muted);
}
.pw-tl__ponto { opacity: .5; }

/* ── A linha que representa varias ──────────────────────────────────────────
   A contagem anda junto do texto, e nao do horario: ela qualifica O QUE
   aconteceu ("sincronizou 143 vezes"), nao quando. */
.pw-tl__vezes {
    margin-left: 5px; font-weight: 400; color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* O convite para ver o resto. Discreto de proposito: e' um caminho a mais na
   tela, nao uma acao que se espera de quem so' passou os olhos no dia. */
.pw-tl__mais {
    display: inline-flex; align-items: center; gap: 3px; margin-left: 6px;
    padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: 11px; color: var(--color-primary);
}
.pw-tl__mais:hover { text-decoration: underline; }
.pw-tl__mais svg { transition: transform .15s ease; }

.pw-tl__detalhes {
    margin: 6px 0 0; padding: 7px 10px; list-style: none;
    border-radius: 7px; border-left: 2px solid var(--color-border);
    background: var(--color-bg);
    font-size: 11.5px; line-height: 1.6; color: var(--color-text-muted);
}
.pw-tl__detalhes li {
    display: flex; align-items: baseline; gap: 8px;
    overflow-wrap: anywhere;
}
.pw-tl__det-hora {
    margin-left: auto; flex: none; opacity: .7;
    font-variant-numeric: tabular-nums;
}
.pw-tl__det-resto { opacity: .7; font-style: italic; }

/* Titulo acessivel do modal: existe para o leitor de tela anunciar de que card
   se trata; visualmente o cabecalho ja' diz isso. */
.pw-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Fuso horário do evento ────────────────────────────────────────────────
   Regra de leitura: o horário grande é SEMPRE o do usuário — o mesmo que a
   agenda desenha. O relógio de origem vem abaixo e nunca aparece sozinho,
   sempre colado ao nome do lugar. Um número solto seria lido no fuso errado,
   que é justamente o erro que este bloco existe para impedir. */
.pw-fuso {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 2px 8px 2px 6px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.pw-fuso__icone { flex: 0 0 auto; opacity: .7; }
.pw-fuso__hora  { font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }
.pw-fuso__local { color: var(--color-text-muted); }

/* Dentro do formulário o aviso é mais largo e não deve virar pílula */
.pw-fuso--bloco {
    display: flex;
    border-radius: 8px;
    padding: 8px 10px;
    white-space: normal;
}

/* ── Agenda de atendimento (agendamento passivo) ───────────────────────────
   O link público fica no topo porque é o produto final da tela: o usuário vem
   aqui para obter um endereço que possa mandar ao cliente. Escondê-lo numa aba
   faria a tela parecer configuração sem desfecho. */
.pw-atend { max-width: 860px; width: 100%; }
.pw-atend__sub { margin: 2px 0 0; font-size: 12.5px; color: var(--color-text-muted); }

.pw-atend__link {
    display: flex; align-items: center; gap: 14px;
    margin: 0 0 10px; padding: 12px 14px;   /* dentro da aba, sem margem lateral */
    border: 1px solid var(--color-border); border-radius: 10px;
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
    transition: opacity .15s, background .15s;
}
.pw-atend__link--off { opacity: .62; background: transparent; }
.pw-atend__link-corpo { flex: 1; min-width: 0; }
.pw-atend__link-tipo {
    display: block; margin: 0 0 3px; font-size: 13px; font-weight: 600;
    color: var(--color-text);
}
.pw-atend__link-url { display: flex; align-items: center; font-size: 13px; }
.pw-atend__link-base { color: var(--color-text-muted); white-space: nowrap; }
.pw-atend__link-slug {
    flex: 1; min-width: 60px; border: none; background: transparent;
    padding: 2px 4px; font: inherit; font-weight: 600; color: var(--color-text);
    border-bottom: 1px dashed var(--color-border);
}
.pw-atend__link-slug:focus { outline: none; border-bottom-color: var(--color-primary); }
.pw-atend__link-nota { margin: 4px 0 0; font-size: 11.5px; color: var(--color-text-muted); }
.pw-atend__link-nota--erro { color: #dc2626; }

/* Interruptor */
.pw-atend__switch { position: relative; display: inline-block; width: 38px; height: 22px; flex: 0 0 auto; cursor: pointer; }
.pw-atend__switch input { opacity: 0; width: 0; height: 0; }
.pw-atend__switch span {
    position: absolute; inset: 0; border-radius: 999px;
    background: var(--color-border); transition: background .15s;
}
.pw-atend__switch span::before {
    content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px;
    border-radius: 50%; background: #fff; transition: transform .15s;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.pw-atend__switch input:checked + span { background: var(--color-primary); }
.pw-atend__switch input:checked + span::before { transform: translateX(16px); }
.pw-atend__switch--sm { width: 32px; height: 19px; }
.pw-atend__switch--sm span::before { width: 13px; height: 13px; }
.pw-atend__switch--sm input:checked + span::before { transform: translateX(13px); }

.pw-atend__tabs { display: flex; gap: 2px; margin: 16px 20px 0; border-bottom: 1px solid var(--color-border); }
.pw-atend__tab {
    padding: 9px 14px; border: none; background: none; cursor: pointer;
    font-size: 13px; color: var(--color-text-muted);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pw-atend__tab:hover { color: var(--color-text); }
.pw-atend__tab--on { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; }
.pw-atend__body { max-height: 62vh; overflow-y: auto; }

.pw-atend__ajuda {
    margin: 0 0 14px; font-size: 12.5px; line-height: 1.55; color: var(--color-text-muted);
}
.pw-atend__vazio { text-align: center; padding: 28px 12px; }
.pw-atend__vazio p { margin: 0 0 6px; font-size: 13.5px; }
.pw-atend__vazio-dica { font-size: 12.5px; color: var(--color-text-muted); margin-bottom: 14px !important; }

.pw-atend__card {
    border: 1px solid var(--color-border); border-radius: 10px;
    padding: 14px; margin-bottom: 12px; transition: opacity .15s;
}
.pw-atend__card--off { opacity: .55; }
.pw-atend__card-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pw-atend__card-nome {
    flex: 1; border: none; background: transparent; font-size: 15px; font-weight: 600;
    color: var(--color-text); padding: 2px 0; border-bottom: 1px dashed transparent;
}
.pw-atend__card-nome:hover  { border-bottom-color: var(--color-border); }
.pw-atend__card-nome:focus  { outline: none; border-bottom-color: var(--color-primary); }

.pw-atend__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.pw-atend__grid-larga { grid-column: 1 / -1; }
.pw-atend__num { display: flex; align-items: center; gap: 6px; }
.pw-atend__num input[type="number"] { width: 72px; }
.pw-atend__num span { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.pw-atend__num select { width: auto; }

/* A regra em português: o número sozinho não diz o que vai acontecer. */
.pw-atend__resumo {
    margin: 12px 0 0; padding: 8px 10px; border-radius: 6px;
    background: var(--color-bg); font-size: 12.5px; line-height: 1.5;
    color: var(--color-text-muted);
}

.pw-atend__previa { margin-top: 10px; }
.pw-atend__previa-corpo { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.pw-atend__previa-vazio { font-size: 12.5px; color: #b45309; margin: 0; }
.pw-atend__previa-dia { display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; }
.pw-atend__previa-data { min-width: 110px; color: var(--color-text-muted); }
/* capitalize maiusculiza TODA palavra e produzia "Seg, 10 De Ago". So' a inicial. */
.pw-atend__previa-data::first-letter { text-transform: uppercase; }
.pw-atend__previa-horas { display: flex; flex-wrap: wrap; gap: 4px; }
.pw-atend__previa-horas em {
    font-style: normal; padding: 1px 6px; border-radius: 4px;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    font-variant-numeric: tabular-nums;
}
.pw-atend__previa-horas b { font-size: 11.5px; color: var(--color-text-muted); align-self: center; }

.pw-atend__dia {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 10px 12px; border-radius: 8px; margin-bottom: 6px;
    border: 1px solid transparent;
}
.pw-atend__dia--on { border-color: var(--color-border); background: var(--color-bg); }
.pw-atend__dia-nome { min-width: 74px; font-size: 13px; font-weight: 500; }
.pw-atend__dia-horas { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pw-atend__dia-horas input[type="time"] { width: 106px; }
.pw-atend__ate { font-size: 12px; color: var(--color-text-muted); }
.pw-atend__dia-off { font-size: 12.5px; color: var(--color-text-muted); }
.pw-atend__almoco { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--color-text-muted); cursor: pointer; margin-left: 4px; }

.pw-atend__excecao-nova { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pw-atend__excecao {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-bottom: 1px solid var(--color-border); font-size: 13px;
}
.pw-atend__excecao:last-child { border-bottom: none; }
.pw-atend__excecao-data { min-width: 96px; font-variant-numeric: tabular-nums; }
.pw-atend__excecao-motivo { flex: 1; color: var(--color-text-muted); font-size: 12.5px; }

.pw-atend__chave {
    margin-top: 10px; padding: 12px 14px; border-radius: 10px;
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    border: 1px solid var(--color-border);
}
.pw-atend__chave code {
    display: block; font-size: 12.5px; word-break: break-all;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pw-atend__chave p { margin: 8px 0 0; font-size: 12px; color: var(--color-text-muted); }

/* Formato do atendimento: escolha explícita, não deduzida do nome. */
.pw-atend__formato { display: inline-flex; gap: 4px; margin-bottom: 14px; padding: 3px;
    background: var(--color-bg); border-radius: 8px; }
.pw-atend__formato-op {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border: none; border-radius: 6px; cursor: pointer;
    background: transparent; color: var(--color-text-muted);
    font: inherit; font-size: 12.5px; transition: background .12s, color .12s;
}
.pw-atend__formato-op:hover { color: var(--color-text); }
.pw-atend__formato-op--on {
    background: var(--color-surface, #fff); color: var(--color-primary); font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

/* Quem atende cada tipo. */
.pw-atend__equipe { margin-top: 14px; }
.pw-atend__equipe-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pw-atend__pessoa {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border: 1px solid var(--color-border); border-radius: 999px;
    font-size: 12.5px; cursor: pointer; transition: border-color .12s, background .12s;
}
.pw-atend__pessoa--on {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.pw-atend__equipe-aviso { margin: 8px 0 0; font-size: 12px; color: #b45309; }
.pw-atend__equipe-nota { margin: 6px 0 0; font-size: 12px; color: var(--color-text-muted); line-height: 1.5; }

/* Setas de preferência entre os dias. */
.pw-atend__ordem { display: inline-flex; flex-direction: column; gap: 1px; margin-right: 2px; }
.pw-atend__ordem button {
    border: none; background: none; cursor: pointer; padding: 0 3px;
    font-size: 10px; line-height: 1.1; color: var(--color-text-muted);
}
.pw-atend__ordem button:hover:not(:disabled) { color: var(--color-primary); }
.pw-atend__ordem button:disabled { opacity: .25; cursor: default; }

/* Importação de feriados. */
.pw-atend__feriados {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 14px; margin-bottom: 16px;
    border: 1px solid var(--color-border); border-radius: 10px;
}
.pw-atend__feriados > div:first-child { flex: 1; min-width: 220px; }
.pw-atend__feriados strong { font-size: 13.5px; }
.pw-atend__feriados p { margin: 3px 0 0; font-size: 12.5px; color: var(--color-text-muted); line-height: 1.5; }
.pw-atend__feriados select { width: auto; }

/* Linha de informações do item de agenda (reunião, audiência).
   Uma linha por natureza, na ordem em que se decide: QUANDO, COM QUEM, ONDE. */
.pw-agenda-item__meta {
    display: flex; flex-direction: column; gap: 3px; margin-top: 4px;
    font-size: 12px; color: var(--color-text-muted);
}
.pw-agenda-item__meta > span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.pw-agenda-item__meta svg { flex: 0 0 auto; opacity: .65; }
.pw-agenda-item__quando { font-variant-numeric: tabular-nums; color: var(--color-text); }
.pw-agenda-item__com    > span,
.pw-agenda-item__onde   > span,
.pw-agenda-item__onde   > a {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pw-agenda-item__onde a { color: var(--color-primary); text-decoration: none; }
.pw-agenda-item__onde a:hover { text-decoration: underline; }

/* Fuso do compromisso: campo fixo, não link. Ver e alterar no mesmo controle. */
.pw-fuso-campo select { max-width: 100%; }
.pw-fuso-campo--outro { border-color: var(--color-primary); }
.pw-fuso-campo__nota { margin: 5px 0 0; font-size: 11.5px; }

/* Aba Configuração: blocos nomeados.
   Antes os temas e o "abrir no meu site" flutuavam soltos entre dois cartões,
   sem titulo nem moldura — pareciam sobra de outra seção. Cada assunto agora e'
   um bloco com cabeçalho, e a mesma moldura vale para os três. */
.pw-atend__bloco { margin: 0 0 20px; }
.pw-atend__bloco:last-child { margin-bottom: 0; }
.pw-atend__bloco-cab { margin: 0 0 10px; }
.pw-atend__bloco-cab h4 {
    margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--color-text-muted);
}
.pw-atend__bloco-cab p {
    margin: 5px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--color-text-muted);
}

/* Campo dentro do bloco: rotulo curto + controle. */
.pw-atend__campo { margin: 0 0 14px; }
.pw-atend__campo:last-child { margin-bottom: 0; }
.pw-atend__campo-rot {
    display: block; margin: 0 0 7px; font-size: 12px; font-weight: 600;
    color: var(--color-text);
}

.pw-atend__chave-linha {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 10px;
}
.pw-atend__chave-estado { flex: 1; font-size: 12.5px; color: var(--color-text-muted); }

/* Aparência da página pública: temas + modo embutido. */
.pw-atend__temas { display: flex; gap: 8px; flex-wrap: wrap; }
.pw-atend__tema {
    display: flex; align-items: center; gap: 7px;
    padding: 6px 11px 6px 7px; border: 1px solid var(--color-border); border-radius: 999px;
    background: transparent; color: inherit; cursor: pointer; font: inherit; font-size: 12.5px;
}
.pw-atend__tema--on { border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; }
.pw-atend__tema-amostra { width: 15px; height: 15px; border-radius: 4px; flex: 0 0 auto; }
.pw-atend__tema-amostra--classico  { background: #1e3a5f; }
.pw-atend__tema-amostra--moderno   { background: #0f766e; }
.pw-atend__tema-amostra--minimal   { background: #1f2937; }
.pw-atend__tema-amostra--editorial { background: #7c2d12; }
.pw-atend__modo { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; cursor: pointer; }
.pw-atend__modo small { display: block; color: var(--color-text-muted); margin-top: 2px; line-height: 1.5; }
.pw-atend__embed {
    display: flex; align-items: center; gap: 10px; margin-top: 10px;
    padding: 10px 12px; border-radius: 8px; background: var(--color-bg);
}
.pw-atend__embed code {
    flex: 1; min-width: 0; font-size: 11.5px; word-break: break-all;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Barra de progresso das escritas. Fica no topo, acima de tudo, e some sozinha.
   Indeterminada de propósito: não sabemos quanto falta, e uma barra que finge
   saber é pior do que uma que só diz "estou trabalhando". */
.pw-ocupado {
    position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 2147483000;
    opacity: 0; transition: opacity .15s; pointer-events: none;
    background: color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.pw-ocupado--on { opacity: 1; }
.pw-ocupado::after {
    content: ""; position: absolute; inset: 0; width: 34%;
    background: var(--color-primary);
    animation: pw-ocupado-anda 1.1s ease-in-out infinite;
}
@keyframes pw-ocupado-anda {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(340%); }
}
@media (prefers-reduced-motion: reduce) {
    .pw-ocupado::after { animation: none; width: 100%; opacity: .5; }
}

/* Anotacao ainda em transito: esmaecida para dizer "chegou, mas nao confirmou"
   sem tirar o texto da tela. */
.pw-comment--enviando { opacity: .55; }

/* Status do autosalvamento. Discreto de propósito: informa quando se procura,
   sem competir com o texto que está sendo escrito. */
.pw-rascunho-status {
    display: flex; align-items: center; gap: 6px;
    margin: 6px 0 0; font-size: 11.5px; color: var(--color-text-muted);
}
.pw-rascunho-status svg { opacity: .6; flex: 0 0 auto; }
.pw-rascunho-status button {
    margin-left: auto; border: none; background: none; cursor: pointer; padding: 0;
    font: inherit; font-size: 11.5px; color: var(--color-text-muted);
    text-decoration: underline; white-space: nowrap;
}
.pw-rascunho-status button:hover { color: #dc2626; }

/* ═══════════════════════════════════════════════════════════════════════════
   Triagem do atendimento marcado pelo cliente
   ═══════════════════════════════════════════════════════════════════════════
   Duas decisoes em sequencia — o que e' este contato, e quem e' a pessoa — com
   a ficha do cliente fixa no topo. Os numeros das etapas nao sao enfeite: quem
   tria precisa saber o que ja' respondeu sem ter de reler tudo. */

/* Coluna flex com o corpo rolando por dentro: sem isto o conteudo empurrava o
   rodape para fora da area visivel e o botao de confirmar so' aparecia depois de
   rolar a modal inteira — a mesma armadilha do aviso escondido no agendamento
   publico. A acao tem de estar sempre a' vista. */
.pw-tri {
    max-width: 640px; width: 100%;
    display: flex; flex-direction: column;
    max-height: min(88vh, 860px);
}
.pw-tri .pw-modal__header,
.pw-tri .pw-modal__footer { flex: none; }
.pw-tri__sub { margin: 2px 0 0; font-size: 12.5px; color: var(--color-text-muted); }
.pw-tri__body {
    display: flex; flex-direction: column;
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
}

/* Botao desligado tem de PARECER desligado. Sem isto ele fica identico ao
   ativo: o usuario clica, nada acontece, e nada explica por que. */
.pw-tri .pw-btn:disabled { opacity: .45; cursor: not-allowed; }

.pw-tri__vazio {
    margin: 0; padding: 24px 0; text-align: center;
    font-size: 13px; color: var(--color-text-muted);
}
.pw-tri__vazio--inline { padding: 10px 0 0; text-align: left; font-size: 12px; }

/* ── Ficha: o que o cliente informou ─────────────────────────────────────── */
.pw-tri__ficha {
    padding: 14px 16px; margin: 0 0 20px;
    background: var(--color-bg); border: 1px solid var(--color-border);
    border-radius: 10px;
}
.pw-tri__ficha-topo { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.pw-tri__nome { font-size: 15px; font-weight: 650; color: var(--color-text); }
.pw-tri__selo {
    padding: 2px 8px; border-radius: 999px;
    background: var(--color-primary-light); color: var(--color-primary-hover);
    font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
}
/* Cores separam o que muda a decisao (lead novo x cliente voltando) do que e'
   so' procedencia (site x WhatsApp) — o canal nao deve competir por atencao. */
.pw-tri__selo--novo    { background: #DCFCE7; color: #15803D; }
.pw-tri__selo--cliente { background: #DBEAFE; color: #1D4ED8; }
.pw-tri__selo--origem  { background: var(--color-bg-active); color: var(--color-text-muted); }
.pw-tri__ficha-linhas { display: flex; flex-direction: column; gap: 6px; }
.pw-tri__linha {
    display: flex; align-items: center; gap: 7px;
    font-size: 12.5px; color: var(--color-text-secondary);
}
.pw-tri__linha svg { width: 13px; height: 13px; flex: none; color: var(--color-text-muted); }

.pw-tri__assunto {
    margin: 12px 0 0; padding: 10px 12px;
    background: var(--color-bg-elevated); border: 1px solid var(--color-border-light);
    border-radius: 8px;
}
.pw-tri__assunto-rot {
    display: block; margin: 0 0 4px;
    font-size: 10px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--color-text-muted);
}
/* pre-wrap: o cliente escreve em paragrafos, e colapsa-los transformava o
   assunto numa frase corrida sem pe' nem cabeca. */
.pw-tri__assunto p {
    margin: 0; font-size: 12.5px; line-height: 1.55;
    color: var(--color-text); white-space: pre-wrap;
}

/* ── Etapas ──────────────────────────────────────────────────────────────── */
.pw-tri__passo { margin: 0 0 22px; }
.pw-tri__passo:last-of-type { margin-bottom: 0; }
.pw-tri__passo-cab { display: flex; align-items: center; gap: 9px; margin: 0 0 11px; }
.pw-tri__passo-cab h4 { margin: 0; font-size: 13.5px; font-weight: 650; color: var(--color-text); }
.pw-tri__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; flex: none; border-radius: 50%;
    background: var(--color-bg-active); color: var(--color-text-muted);
    font-size: 11px; font-weight: 700;
    transition: background .15s, color .15s;
}
.pw-tri__num--ok { background: var(--color-primary); color: #fff; }

/* ── As duas saidas ──────────────────────────────────────────────────────── */
.pw-tri__opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .pw-tri__opcoes { grid-template-columns: 1fr; } }

.pw-tri__opcao {
    display: flex; align-items: flex-start; gap: 10px; text-align: left;
    padding: 12px 13px; cursor: pointer;
    background: var(--color-bg-elevated);
    border: 1.5px solid var(--color-border); border-radius: 10px;
    transition: border-color .15s, background .15s;
}
.pw-tri__opcao:hover { border-color: var(--color-text-muted); }
.pw-tri__opcao--on { border-color: var(--color-primary); background: var(--color-primary-light); }
.pw-tri__opcao-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; flex: none; border-radius: 8px;
    background: var(--color-bg-active); color: var(--color-text-secondary);
}
.pw-tri__opcao--on .pw-tri__opcao-ico { background: var(--color-primary); color: #fff; }
.pw-tri__opcao-ico svg { width: 15px; height: 15px; }
.pw-tri__opcao-txt { display: flex; flex-direction: column; gap: 3px; }
.pw-tri__opcao-txt strong { font-size: 13px; font-weight: 620; color: var(--color-text); }
.pw-tri__opcao-txt small { font-size: 11.5px; line-height: 1.45; color: var(--color-text-muted); }

/* ── Campos e listas de escolha ──────────────────────────────────────────── */
.pw-tri__campo { margin: 12px 0 0; }
.pw-tri__rot {
    display: block; margin: 0 0 6px;
    font-size: 11px; font-weight: 650; letter-spacing: .03em;
    text-transform: uppercase; color: var(--color-text-muted);
}
.pw-tri__opc { font-weight: 500; text-transform: none; letter-spacing: 0; }

/* Rolagem propria: a lista cresce com a busca e, sem teto, empurrava o rodape
   da modal para fora da tela. */
.pw-tri__lista {
    display: flex; flex-direction: column; gap: 5px;
    margin: 8px 0 0; max-height: 190px; overflow-y: auto;
    /* Folga contra o rodape da modal: sem ela o ultimo resultado encosta nos
       botoes e parece cortado, mesmo com a lista inteira carregada. */
    scroll-margin-bottom: 72px;
}
.pw-tri__sugestoes { display: flex; flex-direction: column; gap: 5px; margin: 0 0 14px; }

.pw-tri__linha-sel {
    display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left;
    padding: 9px 11px; cursor: pointer;
    background: var(--color-bg-elevated);
    border: 1.5px solid var(--color-border); border-radius: 8px;
    transition: border-color .15s, background .15s;
}
.pw-tri__linha-sel:hover { border-color: var(--color-text-muted); }
.pw-tri__linha-sel--on { border-color: var(--color-primary); background: var(--color-primary-light); }
.pw-tri__linha-sel-nome { font-size: 12.5px; font-weight: 600; color: var(--color-text); }
.pw-tri__linha-sel-meta {
    display: flex; align-items: center; gap: 7px;
    font-size: 11px; color: var(--color-text-muted);
}

.pw-tri__tag {
    padding: 1px 6px; border-radius: 4px;
    background: var(--color-bg-active); color: var(--color-text-secondary);
    font-size: 10px; font-weight: 600;
}
/* Coincidencia por e-mail ou telefone e' identidade; nome parecido e' palpite.
   A cor separa as duas para ninguem confirmar duplicata no automatico. */
.pw-tri__tag--forte { background: #DCFCE7; color: #15803D; }

/* ── Abas buscar/cadastrar ───────────────────────────────────────────────── */
.pw-tri__abas {
    display: flex; gap: 4px; margin: 0 0 11px; padding: 3px;
    background: var(--color-bg); border-radius: 8px;
}
.pw-tri__aba {
    flex: 1; padding: 6px 10px; cursor: pointer;
    background: none; border: none; border-radius: 6px;
    font-size: 12px; font-weight: 600; color: var(--color-text-muted);
    transition: background .15s, color .15s;
}
.pw-tri__aba--on { background: var(--color-bg-elevated); color: var(--color-text); box-shadow: var(--shadow-sm); }

.pw-tri__tipos { display: flex; gap: 6px; margin: 0 0 12px; }
.pw-tri__tipo {
    padding: 5px 12px; cursor: pointer;
    background: var(--color-bg-elevated);
    border: 1.5px solid var(--color-border); border-radius: 999px;
    font-size: 11.5px; font-weight: 600; color: var(--color-text-secondary);
    transition: border-color .15s, background .15s, color .15s;
}
.pw-tri__tipo--on { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary-hover); }

.pw-tri__grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }

/* ── O CLIENTE RECONHECIDO ────────────────────────────────────────────────
   Mesmo desenho do contratante na ficha do processo: iniciais em disco, o
   rótulo pequeno acima do nome, e a ação à direita. Repetir o padrão é o que
   faz o operador reconhecer "isto é um cadastro" sem ler — e inventar um
   quinto jeito de mostrar pessoa vinculada é como o sistema perde unidade. */
.pw-cliente-card { display:flex; align-items:center; gap:12px; padding:12px 14px; margin-bottom:12px;
                   border:1px solid var(--color-border); border-radius:var(--radius-lg);
                   background:var(--color-bg-elevated); }
.pw-cliente-card__ini { width:44px; height:44px; flex:0 0 44px; border-radius:50%;
                        background:var(--color-primary); color:#fff; font-weight:700; font-size:14px;
                        display:flex; align-items:center; justify-content:center; letter-spacing:.5px; }
.pw-cliente-card__txt { display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.pw-cliente-card__rot { font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
                        color:var(--color-primary); }
.pw-cliente-card__nome { font-size:15px; font-weight:700; color:var(--color-text);
                         white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pw-cliente-card__sub { font-size:12px; color:var(--color-text-muted); }
.pw-cliente-card__acoes { display:flex; gap:6px; flex:0 0 auto; }

/* O PAPEL PINTA O CARTAO.
   A palavra "Parte Adversaria" resolve depois de lida; a cor resolve antes.
   Num cartao que abre uma ligacao, essa diferenca e' o que separa falar com a
   pessoa certa de falar demais com a errada.
   Cliente fica na cor da casa — e' o caso comum, e destacar todo mundo nao
   destaca ninguem. */
.pw-cliente-card--parte_adversaria .pw-cliente-card__ini { background:#B91C1C; }
.pw-cliente-card--parte_adversaria .pw-cliente-card__rot { color:#B91C1C; }
.pw-cliente-card--parte_adversaria { border-color:#FECACA; }
.pw-cliente-card--advogados .pw-cliente-card__ini { background:#7C3AED; }
.pw-cliente-card--advogados .pw-cliente-card__rot { color:#7C3AED; }
.pw-cliente-card--terceiros .pw-cliente-card__ini,
.pw-cliente-card--espolio   .pw-cliente-card__ini { background:#6B7280; }
.pw-cliente-card--terceiros .pw-cliente-card__rot,
.pw-cliente-card--espolio   .pw-cliente-card__rot { color:#6B7280; }

/* A busca ocupa o LUGAR do cartao, e nao um espaco abaixo dele: as duas coisas
   respondem a mesma pergunta ("quem e'?"), e lado a lado o operador leria o
   cartao antigo como se ainda valesse enquanto escolhe o novo. */
.pw-cliente-busca { border:1px solid var(--color-border); border-radius:var(--radius-lg);
                    background:var(--color-bg-elevated); padding:10px; margin-bottom:12px; }
.pw-cliente-busca__topo { display:flex; gap:8px; align-items:center; }
.pw-cliente-busca__topo .pw-input { flex:1; }
.pw-cliente-busca__lista { display:flex; flex-direction:column; gap:2px; margin-top:8px;
                           max-height:210px; overflow-y:auto; }
.pw-cliente-busca__item { display:flex; flex-direction:column; align-items:flex-start; gap:1px;
                          width:100%; padding:7px 9px; border:0; border-radius:var(--radius-md);
                          background:transparent; text-align:left; cursor:pointer; }
.pw-cliente-busca__item:hover { background:var(--color-bg-hover); }
.pw-cliente-busca__item strong { font-size:13px; color:var(--color-text); font-weight:600; }
.pw-cliente-busca__item span { font-size:11px; color:var(--color-text-muted); }

/* Desligar o vinculo e' destrutivo o bastante para nao se parecer com escolher
   um da lista — mas nao e' perigoso: o dado volta com um clique. Dai o texto
   vermelho sem o peso de um botao cheio. */
.pw-cliente-busca__soltar { display:block; width:100%; margin-top:8px; padding:7px;
                            border:1px dashed var(--color-border); border-radius:var(--radius-md);
                            background:transparent; color:#B91C1C; font-size:12px; cursor:pointer; }
.pw-cliente-busca__soltar:hover { background:#FEF2F2; border-color:#FECACA; }

/* Ficha nao encontrada e' o caso RARO: quase todo recado chega com o telefone
   que o cadastro ja tem. Um botao cheio aqui prometeria trabalho a fazer em
   toda tela; este so' se oferece a quem procura. */
.pw-cliente-ligar { display:block; width:100%; margin-top:10px; padding:8px;
                    border:1px dashed var(--color-border); border-radius:var(--radius-md);
                    background:transparent; color:var(--color-text-muted); font-size:12px;
                    cursor:pointer; }
.pw-cliente-ligar:hover { color:var(--color-primary); border-color:var(--color-primary); }
@media (max-width: 560px) { .pw-tri__grade { grid-template-columns: 1fr; } }
.pw-tri__grade .pw-tri__campo { margin: 0; }

.pw-tri__nota { margin: 10px 0 0; font-size: 11.5px; color: var(--color-text-muted); }
.pw-tri__aviso {
    margin: 12px 0 0; padding: 9px 11px;
    background: #FEF3C7; border: 1px solid #FDE68A; border-radius: 8px;
    font-size: 12px; line-height: 1.5; color: #92400E;
}
.pw-tri__erro {
    margin: 14px 0 0; padding: 9px 11px;
    background: #FEE2E2; border: 1px solid #FECACA; border-radius: 8px;
    font-size: 12.5px; color: #B91C1C;
}

/* Empurra os botoes para a direita e explica o desfecho — o usuario nao devia
   ter de clicar para descobrir onde o compromisso vai parar. */
.pw-tri__rodape { margin-right: auto; font-size: 11.5px; color: var(--color-text-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   Marcação NOVO / LEAD na grade
   ═══════════════════════════════════════════════════════════════════════════
   Mesma faixa e o MESMO desenho do contador de prazo fatal: fundo chapado,
   palavra branca em cima, marca menor embaixo. Ali embaixo o prazo escreve
   "2d"; aqui vai uma estrela amarela, que e' o que se enxerga de relance num
   mes cheio, quando a palavra ainda esta' pequena demais para ser lida.

   Duas marcacoes so'. Vinculado a caso existente nao recebe nenhuma: cliente
   que ja' e' cliente nao e' lead, e marcar todos encheria o mes de selo sem
   informacao — a ausencia passa a significar "ja' resolvido". */

/* Primeira linha, e maior que o "2d" do prazo: aqui o icone e' o destaque, nao
   um rodape da palavra. Amarelo em ambos os estados — a estrela significa
   OPORTUNIDADE; quem diz em que pe' ela esta' e' o fundo e a palavra. */
.pw-fc-tri__estrela {
    display: flex; align-items: center; justify-content: center;
    opacity: 1; margin-bottom: 1px;
}
.pw-fc-tri__estrela svg { width: 14px; height: 14px; display: block; }

/* Fundo grafite nos dois estados, e nao ambar/verde.
   Duas razoes. A primeira: a faixa do prazo ja' e' uma escala de cor
   (cinza -> ambar -> vermelho -> vinho) e um selo colorido ao lado dela seria
   lido como mais um grau de urgencia, que nao e'. A segunda: o evento por baixo
   muda de cor conforme o calendario, e so' um fundo escuro e neutro se destaca
   igual sobre roxo, azul, verde ou laranja.
   Quem carrega o estado e' a ESTRELA — e sobre grafite ela brilha de verdade. */
.pw-fc-tri { background: #111827; }
.pw-fc-tri--novo .pw-fc-tri__estrela svg { fill: #FDE047; }   /* por triar */
.pw-fc-tri--lead .pw-fc-tri__estrela svg { fill: #34D399; }   /* ja' no funil */
/* PEND e' outra coisa: nao ha' atendimento marcado ainda, so' o pedido. Laranja
   separa "falta marcar" de "falta classificar". */
.pw-fc-tri--pend .pw-fc-tri__estrela svg { fill: #FB923C; }
/* CANC nao pede acao nenhuma — e' registro do que NAO houve. Cinza justamente
   por isso: a estrela apagada e' o unico selo que nao chama, e chamar seria
   pedir trabalho por um compromisso que deixou de existir. */
.pw-fc-tri--canc .pw-fc-tri__estrela svg { fill: #9CA3AF; }
/* DESC e' o recado que o escritorio decidiu NAO retornar — decisao tomada, e nao
   compromisso que caiu. Cinza pela mesma razao do CANC (nao pede acao), mas com
   a palavra propria: quem le a agenda precisa distinguir "o cliente desmarcou"
   de "nos dispensamos o retorno". */
.pw-fc-tri--desc .pw-fc-tri__estrela svg { fill: #9CA3AF; }

/* NOVO pulsa devagar porque e' trabalho parado esperando alguem. LEAD nao pulsa:
   ja' foi resolvido, e marca que pisca para sempre vira ruido que o olho aprende
   a ignorar. */
.pw-fc-tri--novo .pw-fc-tri__estrela svg {
    animation: pw-tri-brilho 2.4s ease-in-out infinite;
    transform-origin: center;
}
@keyframes pw-tri-brilho {
    0%, 100% { transform: scale(1);    opacity: .85; }
    50%      { transform: scale(1.22); opacity: 1;   }
}
@media (prefers-reduced-motion: reduce) {
    .pw-fc-tri--novo .pw-fc-tri__estrela svg { animation: none; }
}

/* ── Selo de papel: SUP e DEL ────────────────────────────────────────────────
   Irmaos do selo de triagem, e de proposito: mesma faixa, mesmo fundo grafite,
   mesmo corpo de duas linhas. O que muda e' o assunto — triagem fala do ESTADO
   do atendimento, papel fala de QUEM RESPONDE. Por isso o desenho e' uma
   pessoa, e nao uma estrela: o olho separa os dois sem precisar ler.

   Azul para supervisao (quem acompanha) e violeta para delegacao (quem
   recebeu). Nenhum dos dois e' quente: ninguem aqui esta' atrasado, e cor de
   urgencia ao lado da faixa de prazo seria lida como mais um grau dela. */
.pw-fc-papel__icone svg { width: 13px; height: 13px; }
.pw-fc-papel--sup .pw-fc-papel__icone svg { fill: #93C5FD; }
.pw-fc-papel--del .pw-fc-papel__icone svg { fill: #C4B5FD; }

/* Nao pulsa. Papel nao e' pendencia: e' um fato do compromisso, e marca que
   pisca para sempre vira ruido que o olho aprende a ignorar. */

/* Quando a coluna da direita ja' foi tomada pelo prazo, o selo desce para o
   corpo — menor, deitado, sem roubar a linha do titulo. */
.pw-fc-event-wrapper > .pw-fc-papel.pw-fc-fatal--inline {
    align-self: flex-start; margin: 2px 0 0 4px;
}

/* A quem eu deleguei. Nao e' selo: e' informacao de leitura, e vai no corpo,
   abaixo do horario, com a seta indicando que o trabalho saiu daqui. */
.pw-fc-delegado-nome {
    opacity: .9; font-weight: 600; letter-spacing: .01em;
}
.pw-fc-delegado-nome--inline { margin-left: 6px; font-size: 11px; }

#fullcalendar .fc-list-event .pw-fc-tri--inline.pw-fc-papel--sup {
    background: #EFF6FF; border-color: #93C5FD; color: #1D4ED8 !important;
}
#fullcalendar .fc-list-event .pw-fc-tri--inline.pw-fc-papel--del {
    background: #F5F3FF; border-color: #C4B5FD; color: #6D28D9 !important;
}

/* Abas Futuros/Passados: pilula ao lado do titulo, como o contador faz ali. */
#fullcalendar .fc-list-event .pw-fc-tri--inline.pw-fc-tri--novo {
    background: #FFFBEB; border-color: #FCD34D; color: #B45309 !important;
}
#fullcalendar .fc-list-event .pw-fc-tri--inline.pw-fc-tri--lead {
    background: #ECFDF5; border-color: #6EE7B7; color: #047857 !important;
}
#fullcalendar .fc-list-event .pw-fc-tri--inline.pw-fc-tri--pend {
    background: #FFF7ED; border-color: #FDBA74; color: #C2410C !important;
}
#fullcalendar .fc-list-event .pw-fc-tri--inline.pw-fc-tri--canc,
#fullcalendar .fc-list-event .pw-fc-tri--inline.pw-fc-tri--desc {
    background: #F3F4F6; border-color: #D1D5DB; color: #6B7280 !important;
}

/* Anotação de cancelado na modal de triagem. Fica dentro da ficha, colada aos
   dados do compromisso a que se refere. */
.pw-tri__cancelado {
    display: flex; align-items: flex-start; gap: 8px;
    margin-top: 12px; padding: 10px 12px;
    background: #FEF2F2; border: 1px solid #FECACA; border-radius: 8px;
    color: #991B1B; font-size: 13px; line-height: 1.45;
}
.pw-tri__cancelado svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }

/* Cancelar o ATENDIMENTO não pode ter o mesmo peso de "Fechar", que está ao
   lado e só sai da modal. Vermelho no texto, sem preencher o botão: é uma ação
   destrutiva, não a ação principal da tela. */
.pw-tri__btn-cancelar { color: #B91C1C; }
.pw-tri__btn-cancelar:hover:not(:disabled) { background: #FEF2F2; border-color: #FECACA; }
#fullcalendar .fc-list-event .pw-fc-tri--inline .pw-fc-tri__estrela svg { width: 10px; height: 10px; }

/* ── Atendimento: espaço reservado para as dicas ──────────────────────────────
   As frases sob cada bloco se alternam conforme o que está marcado. Sem altura
   reservada o painel inteiro pulava a cada clique, e o clique seguinte caía no
   controle errado — foi assim que marcar um endereço parecia não funcionar. */
.pw-atend__dica { min-height: 20px; margin: 8px 0 0; }
.pw-atend__dica--dupla { min-height: 34px; }
.pw-atend__dica > p { margin: 0; }

/* Lembretes: uma linha por aviso, como no Google Agenda. */
.pw-atend__lembretes { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pw-atend__lembrete { display: flex; align-items: center; gap: 6px; }
.pw-atend__lembrete input[type="number"] { width: 62px; }
.pw-atend__lembrete select { width: auto; }
.pw-atend__lembrete span { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }

/* Pessoas x Departamentos: alternância dentro do bloco "Quem atende". */
/* width:fit-content com display:flex — inline-flex fazia as abas subirem para a
   linha do rotulo, e "QUEM ATENDE Pessoas Departamentos" lia-se como uma frase. */
.pw-atend__abas-mini {
    display: flex; width: fit-content; gap: 3px; margin: 2px 0 9px; padding: 3px;
    background: var(--color-bg); border-radius: 7px;
}
.pw-atend__aba-mini {
    padding: 4px 12px; cursor: pointer;
    background: none; border: none; border-radius: 5px;
    font-size: 11.5px; font-weight: 600; color: var(--color-text-muted);
    transition: background .15s, color .15s;
}
.pw-atend__aba-mini--on {
    background: var(--color-bg-elevated); color: var(--color-text);
    box-shadow: var(--shadow-sm);
}

/* Lista de departamentos: uma por linha, com recuo mostrando a hierarquia.
   Empilhada e nao em grade porque o recuo so' se le' com as linhas alinhadas
   a' esquerda — em colunas, "sob quem" deixa de aparecer. */
.pw-atend__deps {
    display: flex; flex-direction: column; gap: 2px;
    max-height: 220px; overflow-y: auto;
    border: 1px solid var(--color-border); border-radius: 8px; padding: 6px;
}
.pw-atend__dep {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 10px; border-radius: 6px; cursor: pointer;
    font-size: 12.5px; color: var(--color-text);
    transition: background .12s;
}
.pw-atend__dep:hover { background: var(--color-bg-hover); }
.pw-atend__dep--on   { background: var(--color-primary-light); color: var(--color-primary-hover); font-weight: 600; }
.pw-atend__dep input { flex: none; }
.pw-atend__dep-qtd {
    margin-left: auto; font-size: 11px; font-weight: 500;
    color: var(--color-text-muted); white-space: nowrap;
}
/* Area sem ninguem lotado nao oferece horario nenhum: o numero avisa antes de o
   cliente descobrir na tela vazia. */
.pw-atend__dep-qtd--zero { color: #b45309; }

/* Grade de horários na marcação do pedido de contato. */
.pw-tri__horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.pw-tri__hora {
    padding: 9px 4px; cursor: pointer;
    background: var(--color-bg-elevated);
    border: 1.5px solid var(--color-border); border-radius: 7px;
    font-size: 12.5px; font-weight: 600; color: var(--color-text);
    font-variant-numeric: tabular-nums;
    transition: border-color .13s, background .13s, color .13s;
}
.pw-tri__hora:hover { border-color: var(--color-text-muted); }
.pw-tri__hora--on {
    border-color: var(--color-primary); background: var(--color-primary);
    color: #fff;
}

/* Explicação do atendimento personalizado: três passos numerados.
   Existe porque é a funcionalidade que trabalha sem ninguém olhando — operador
   que não sabe que ela existe não confere a tarefa que ela cria, e o cliente
   fica esperando um retorno que não vem. */
.pw-atend__fluxo {
    display: flex; flex-direction: column; gap: 10px;
    margin: 12px 0 0; padding: 13px 15px;
    background: var(--color-bg); border-radius: 10px;
}
.pw-atend__fluxo-passo { display: flex; align-items: flex-start; gap: 10px; }
.pw-atend__fluxo-passo p {
    margin: 1px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--color-text-secondary);
}
.pw-atend__fluxo-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 19px; height: 19px; flex: none; border-radius: 50%;
    background: var(--color-primary); color: #fff;
    font-size: 10.5px; font-weight: 700;
}
/* Amostra do selo, com a cor real da grade: o operador reconhece na agenda o
   que leu aqui. */
.pw-atend__selo-ex {
    display: inline-block; padding: 1px 6px; border-radius: 4px;
    background: #111827; color: #fff;
    font-size: 9.5px; font-weight: 800; letter-spacing: .05em; vertical-align: middle;
}
.pw-atend__selo-ex--pend { box-shadow: inset 0 0 0 1.5px #FB923C; }
.pw-atend__selo-ex--lead { box-shadow: inset 0 0 0 1.5px #34D399; }

/* Pedido adiado: vermelho, ao lado do título. Quatro adiamentos é um cliente
   esperando há quase uma semana — cor de rotina esconderia isso. */
.pw-tri__selo--atraso { background: #FEE2E2; color: #B91C1C; margin-left: 10px; }

/* Em que fuso as horas da tela estão. Discreto: é referência, não conteúdo —
   mas presente, porque sem ele o usuário não sabe se lê o relógio dele. */
.pw-fuso-nota {
    flex: none; padding: 2px 8px; border-radius: 999px;
    background: var(--color-bg-active); color: var(--color-text-muted);
    font-size: 10.5px; font-weight: 600; white-space: nowrap; cursor: help;
}

/* ── Configuração dos relatórios, dentro da modal ─────────────────────────── */
.pw-relcfg { display: flex; flex-direction: column; gap: 18px; padding: 4px 0 0; }
.pw-relcfg__bloco {
    padding: 14px 16px;
    background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 10px;
}
.pw-relcfg__cab { margin: 0 0 12px; }
.pw-relcfg__cab h4 {
    margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--color-text-muted);
}
.pw-relcfg__cab p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--color-text-muted); }

.pw-relcfg__linha {
    display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px;
    font-size: 12.5px; color: var(--color-text);
}
.pw-relcfg__rot { color: var(--color-text-muted); }
.pw-relcfg__nota { margin: 8px 0 0; font-size: 11.5px; color: var(--color-text-muted); }

.pw-relcfg__dests { display: flex; flex-direction: column; gap: 6px; }
.pw-relcfg__dest {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    padding: 8px 11px; border-radius: 8px;
    background: var(--color-bg-elevated); border: 1px solid var(--color-border-light);
}
.pw-relcfg__dest-nome { font-size: 12.5px; font-weight: 600; color: var(--color-text); }
.pw-relcfg__dest-mail { font-size: 11.5px; color: var(--color-text-muted); }

/* Alinhado pela base para o botão encostar na linha dos campos, não flutuar. */
.pw-relcfg__teste { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.pw-relcfg__teste .pw-tri__campo { margin: 0; }

/* Recusa do servidor no cancelar/desfazer. Ocupa a linha do rodape da modal de
   triagem, que ali e' texto de apoio e some sem falta quando ha' o que avisar. */
.pw-tri__rodape--erro { color: #B91C1C; font-weight: 500; }

/* ══════════════════════════════════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════════════════════════════════

   TUDO aqui vive dentro de @media (max-width: 900px). Acima disso não há
   uma única declaração: a tela normal do Anyflow não muda um pixel.

   O layout do app é de desktop por construção — barra lateral `fixed` de
   largura fixa e `.pw-main` compensando com `margin-left`. No celular isso
   come metade da tela e o conteúdo fica espremido numa coluna de 100px.

   A adaptação é a de sempre em app com barra fixa: a barra sai da tela e
   volta por cima do conteúdo quando chamada, com um fundo escuro atrás
   que também serve de área de toque para fechar.
   ══════════════════════════════════════════════════════════════════════ */

/* Fora do mobile, nem o botão nem o fundo existem. */
.pw-topbar__burger { display: none; }
.pw-sidebar-scrim  { display: none; }

@media (max-width: 900px) {

    /* ── A barra lateral vira gaveta ─────────────────────────────────── */

    .pw-sidebar {
        /* Nunca a tela toda: a faixa que sobra mostra que há conteúdo atrás
           e dá onde tocar para fechar. */
        width: min(84vw, 300px);
        transform: translateX(-100%);
        transition: transform var(--transition);
        z-index: 1000;
        border-right: none;
    }

    .pw-sidebar--mobile-open {
        transform: translateX(0);
        box-shadow: 0 0 40px rgba(0, 0, 0, .28);
    }

    /* "Recolhida" é conceito de desktop: lá a barra fica estreita e só com
       ícones, para devolver espaço à página. Numa gaveta isso não faz
       sentido — ela já está escondida, e abrir um menu de ícones de 8px no
       celular é abrir um menu ilegível. Aqui ela é sempre larga.

       Os !important acompanham os originais; sem eles as regras de
       --collapsed venceriam por especificidade igual e ordem anterior. */
    .pw-sidebar--collapsed { width: min(84vw, 300px); overflow: hidden; }

    .pw-sidebar--collapsed .pw-sidebar__header { justify-content: space-between; padding: 12px 14px 12px 16px; }

    .pw-sidebar--collapsed .pw-sidebar__link,
    .pw-sidebar--collapsed .pw-sidebar__link > div {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        padding: 9px 16px !important;
        min-height: 0;
    }
    .pw-sidebar--collapsed .pw-sidebar__link > div { padding: 0 !important; }

    .pw-sidebar--collapsed .pw-sidebar__link > span,
    .pw-sidebar--collapsed .pw-sidebar__link > div > span {
        font-size: 13px !important;
        max-width: none;
        text-align: left;
        opacity: 1;
        margin-top: 0;
    }

    .pw-sidebar--collapsed .pw-sidebar__flink { justify-content: flex-start; margin: 1px 8px; padding: 7px 10px; }
    .pw-sidebar--collapsed .pw-sidebar__finance-back { justify-content: flex-start; padding: 6px 12px; }

    /* Submenu volta a ser parte da lista. Fixo, como no desktop recolhido,
       ele abriria fora da gaveta — sobre o conteúdo, sem relação visível
       com o item que o abriu. */
    .pw-sidebar--collapsed .pw-sidebar__submenu {
        position: static;
        max-width: none;
        width: auto;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: transparent;
    }

    /* ── O conteúdo ocupa a tela inteira ─────────────────────────────── */

    .pw-sidebar + .pw-main,
    .pw-sidebar--collapsed + .pw-main { margin-left: 0; }

    .pw-sidebar-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 999;
        background: rgba(0, 0, 0, .45);
    }

    /* ── Topbar ──────────────────────────────────────────────────────── */

    .pw-topbar__burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border: none;
        background: transparent;
        color: var(--color-text);
        border-radius: 8px;
        cursor: pointer;
        /* 40px é o mínimo confortável para o dedo; abaixo disso erra-se o
           alvo e o menu não abre. */
        -webkit-tap-highlight-color: transparent;
    }
    .pw-topbar__burger:active { background: var(--color-bg-hover); }

    .pw-topbar {
        flex-wrap: wrap;
        gap: 8px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .pw-topbar__left  { gap: 6px; min-width: 0; }
    .pw-topbar__title {
        font-size: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* O centro costuma carregar filtros e busca: some da linha do título e
       ganha a largura toda, senão fica com 40px e nada cabe. */
    .pw-topbar__center { order: 3; width: 100%; flex-wrap: wrap; }
    .pw-topbar__right  { margin-left: auto; gap: 6px; flex-wrap: wrap; }

    /* Nome do operador e escritório: é a informação mais dispensável da
       barra, e a que mais ocupa espaço. */
    /* !important porque a pill traz display:flex inline, que vence sem ele. */
    .pw-user-context-pill { display: none !important; }

    /* ── Elementos largos ────────────────────────────────────────────── */

    /* Tabela não encolhe: quem manda ela caber quebra as colunas uma sobre a
       outra. Rola na horizontal DENTRO do próprio bloco, e a página continua
       rolando só na vertical. */
    .pw-table-wrap,
    .pw-table-container,
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .pw-table { min-width: 640px; }

    /* Modal ocupa a tela com folga nas bordas; centrado e com largura de
       desktop, sobra tarja e falta conteúdo. */
    .pw-modal {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        max-height: calc(100vh - 32px);
        overflow-y: auto;
    }

    /* Grades de cartões viram coluna única. */
    .pw-grid-2, .pw-grid-3, .pw-grid-4 { grid-template-columns: 1fr; }

    /* ── Topbar: caber, não empilhar ─────────────────────────────────── */

    /* "Sincronizar" e "Timesheet" viram só ícone. O texto é o que empurrava a
       barra de ícones para uma segunda e terceira linha; o ícone sozinho
       continua clicável e o `title` continua dizendo o que é. */
    .pw-topbar__label { display: none !important; }

    /* Sem conteúdo, o centro ainda ocupava uma linha inteira em branco por
       causa do width:100% acima. */
    .pw-topbar__center:empty { display: none; }

    /* ── Cabeçalho do board ──────────────────────────────────────────── */

    /* A busca ganha a linha inteira, acima dos botões: com 180px espremidos
       entre eles não se lê o que foi digitado, e é o campo mais usado da tela.
       Os botões quebram abaixo, em duas linhas curtas em vez de cinco.

       Sem `overflow` aqui de propósito: rolagem horizontal criaria contexto de
       recorte e o dropdown de resultados da busca sairia cortado. */
    .pw-board-header { flex-wrap: wrap; gap: 8px; }

    .pw-board-header__actions { width: 100%; gap: 6px; }

    .pw-board-header__actions .pw-search {
        order: -1;
        width: 100%;
        flex-shrink: 1 !important;
        --pw-search-w: 100%;
        --pw-search-w-open: 100%;
    }

    .pw-board-header__actions .pw-search__dropdown { max-width: calc(100vw - 32px); }

    /* O corpo nunca rola na horizontal: é o sintoma clássico de um elemento
       largo escapando, e vira a página inteira deslizando de lado. */
    body { overflow-x: hidden; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BOTOES
   ══════════════════════════════════════════════════════════════════════════

   As telas de calculo usavam `.btn`, `.btn-primary` e `.btn-secondary` sem que
   nenhuma delas existisse em lugar algum — os botoes saiam como texto sublinhado
   solto, indistinguiveis de um link. Ficaram assim porque a classe foi escrita
   por quem esperava um framework que nunca entrou.

   Sao tres niveis, e a diferenca entre eles e' de PESO, nao de cor: primario
   preenchido, secundario com contorno, fantasma so' texto. Quem olha a tela deve
   saber em um passar de olhos qual e' a acao principal.
   ────────────────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid transparent;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    font-family: inherit;
    white-space: nowrap;
    text-decoration: none;

    cursor: pointer;
    user-select: none;
    transition: background .15s, border-color .15s, box-shadow .15s, transform .06s;
}

/* O icone acompanha o texto e nunca o empurra. */
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Afunda 1px no clique. E' o unico retorno tatil que um botao web consegue dar,
   e sem ele o usuario clica de novo achando que nao pegou. */
.btn:active { transform: translateY(1px); }

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.btn:disabled,
.btn.is-disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

/* Primario — a acao que a tela existe para fazer. Um por tela. */
.btn-primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
.btn-primary:hover {
    background: color-mix(in srgb, var(--color-primary) 88%, #000);
    border-color: color-mix(in srgb, var(--color-primary) 88%, #000);
    color: #fff;
    text-decoration: none;
}

/* Secundario — contorno. Acoes que acompanham a principal sem disputar com ela. */
.btn-secondary {
    background: var(--color-bg-elevated, #fff);
    color: var(--color-text);
    border-color: var(--color-border);
}
.btn-secondary:hover {
    background: var(--color-bg-hover);
    border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
    color: var(--color-text);
    text-decoration: none;
}

/* Fantasma — voltar, cancelar. Sem borda ate' o hover. */
.btn-ghost {
    background: none;
    color: var(--color-text-muted);
    border-color: transparent;
}
.btn-ghost:hover {
    background: var(--color-bg-hover);
    color: var(--color-text);
    text-decoration: none;
}

/* Destrutivo — contorno vermelho, preenchido so' no hover.
   Vermelho solido em repouso puxa o olho justamente para o que nao se quer
   clicar por engano. */
.btn-danger {
    background: none;
    color: #dc2626;
    border-color: color-mix(in srgb, #dc2626 35%, transparent);
}
.btn-danger:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
    text-decoration: none;
}

/* Tamanhos. */
.btn-sm { padding: 6px 11px; font-size: 12px; border-radius: 7px; gap: 5px; }
.btn-sm svg { width: 13px; height: 13px; }
.btn-lg { padding: 11px 20px; font-size: 14px; border-radius: 9px; }

/* Grupo de botoes, com o espaco ja' resolvido. */
.btn-grupo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── "Novo Evento": a lista de tipos ────────────────────────────────────────
   O botão era um só e criava um "evento genérico"; o Agendamento vivia num
   botão irmão. Isso dividia a mesma pergunta em dois lugares — quem queria
   marcar algo precisava saber de antemão se aquilo era "evento" ou
   "agendamento". Agora a pergunta é uma e a resposta lista as opções. */
.pw-dropdown { position: relative; display: inline-flex; }

.pw-tipos-evento {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    min-width: 288px;
    padding: 6px;
    border-radius: 12px;
    background: var(--color-bg-elevated, #fff);
    border: 1px solid var(--color-border, #e2e3e8);
    /* Sombra larga e rasa: separa do que está por baixo sem parecer uma janela
       flutuando longe da página. */
    box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
}

/* O item "Agendamento" virou <a> — ele leva para Configuracoes, e link que se
   comporta como botao deve ao menos PARECER com os irmaos. Sem o seletor aqui,
   ele sairia sem estilo nenhum no meio dos outros tres. */
.pw-tipos-evento button,
.pw-tipos-evento > a {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: 8px;
    background: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}
.pw-tipos-evento button:hover,
.pw-tipos-evento > a:hover { background: var(--color-bg-subtle); }
.pw-tipos-evento > a { text-decoration: none; color: inherit; }

/* O ponto colorido é o mesmo código de cor das agendas: quem já usa o sistema
   reconhece o tipo antes de ler o rótulo. */
.pw-tipo-cor {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pw-tipos-evento strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text, #1a1a2e);
}
.pw-tipos-evento small {
    display: block;
    font-size: 11px;
    color: var(--color-text-muted, #8b8ba7);
    margin-top: 1px;
}

/* ══════════════════════════════════════════════════════════════════════════
   O sistema de componentes — `ui-*`

   **Extraido do que ja' funcionava, e nao inventado ao lado.** O painel do
   escritorio ja' tinha um conjunto proprio e bem resolvido (`db-card`,
   `db-tab`, `db-table`), so' que trancado numa tela. Enquanto ficasse la', a
   proxima tela a precisar de um cartao escreveria o seu — e e' assim que um
   sistema acaba com quatro cartoes que quase combinam.

   As medidas vem da escala do aplicativo (`src/core/ui/theme.ts`): espacos
   multiplos de 4, raios e pesos de fonte fechados. A paleta ja' era comum aos
   dois — o tema do aplicativo foi copiado deste arquivo, anos atras.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Cartao de secao ────────────────────────────────────────────────────── */
.ui-cartao {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 14px);
    overflow: hidden;
}
.ui-cartao--plano { background: transparent; border-color: transparent; }

.ui-cartao__topo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--color-border);
}
.ui-cartao--plano .ui-cartao__topo { border-bottom: 0; padding-left: 0; padding-right: 0; }

.ui-cartao__icone { display: flex; color: var(--color-text-muted); flex: 0 0 auto; }
.ui-cartao__titulos { min-width: 0; flex: 1; }

/* Maiusculas pequenas com espacamento: o titulo precisa nomear a secao sem
   competir com os numeros que vem abaixo, que sao o que se veio ler. */
.ui-cartao__titulo {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--color-text-muted);
}
.ui-cartao__apoio { margin: 2px 0 0; font-size: 11.5px; color: var(--color-text-muted); opacity: .85; }
.ui-cartao__acao { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.ui-cartao__corpo { flex: 1; min-height: 0; }

/* Rodape: o "ver tudo" da secao. Centralizado e separado por linha, para nao
   se confundir com mais um item da lista logo acima. */
.ui-cartao__rodape {
    padding: 10px 18px;
    border-top: 1px solid var(--color-border);
    text-align: center;
    font-size: 12.5px;
}

/* O cartao precisa poder encolher dentro de uma grade: sem `min-width: 0` o
   conteudo largo (uma tabela, um numero comprido) empurra a coluna e estoura a
   grade inteira para fora da tela. */
.ui-cartao { min-width: 0; }

/* ── Numero com rotulo ──────────────────────────────────────────────────── */
.ui-numero {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 18px;
    border-bottom: 1px solid var(--color-border-light, var(--color-border));
    text-decoration: none;
    color: inherit;
}
.ui-numero:last-child { border-bottom: 0; }
.ui-numero--linkado:hover { background: var(--color-primary-soft, #eef0fe); }

.ui-numero__rotulo { font-size: 13px; color: var(--color-text-muted); min-width: 0; }
.ui-numero__rotulo small { display: block; font-size: 11px; opacity: .8; }

/* `tabular-nums` e' o que mantem a virgula na mesma coluna. Sem isso, digitos
   de larguras diferentes fazem a coluna dancar, e o olho perde a comparacao
   que a coluna existe para permitir. */
.ui-numero__valor {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Tom SEMANTICO, e nao decorativo: entrada, saida, e o que exige decisao. */
.ui-numero--bom    .ui-numero__valor { color: #059669; }
.ui-numero--ruim   .ui-numero__valor { color: #dc2626; }
.ui-numero--alerta .ui-numero__valor { color: var(--color-warning, #d97706); }

/* ── Lista com barra proporcional ───────────────────────────────────────── */
.ui-barras { list-style: none; margin: 0; padding: 0; }
.ui-barras__item + .ui-barras__item { border-top: 1px solid var(--color-border-light, var(--color-border)); }
.ui-barras__link {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 11px 18px;
    text-decoration: none;
    color: inherit;
}
a.ui-barras__link:hover { background: var(--color-primary-soft, #eef0fe); }
.ui-barras__linha { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ui-barras__nome {
    font-size: 13px;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ui-barras__valor { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.ui-barras__trilho { height: 4px; border-radius: 2px; background: var(--color-bg-subtle, #f1f3f7); overflow: hidden; }
.ui-barras__preenche { display: block; height: 4px; border-radius: 2px; background: var(--color-primary); }

/* ── Pilulas ────────────────────────────────────────────────────────────────
   **Pilula, e nao aba sublinhada.** Sao modos de ver a MESMA coisa — o painel
   inteiro, recortado por assunto —, e nao secoes diferentes de conteudo. E' a
   forma que o aplicativo usa, e ja' e' a do hub e a do assistente aqui. */
.ui-pilulas {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.ui-pilulas::-webkit-scrollbar { display: none; }

/* **Centralizada — com `safe`, que e' o detalhe que importa.**

   `justify-content: center` numa faixa que ROLA tem uma armadilha: quando o
   conteudo fica maior que o espaco, o excedente transborda para os DOIS lados,
   e o inicio da fila sai pela esquerda — fora da area rolavel, inalcancavel. A
   primeira pilula simplesmente nao existe mais para quem esta' numa tela
   estreita.

   `safe center` centraliza enquanto cabe e volta a alinhar pela esquerda quando
   nao cabe. */
.ui-pilulas--centro { justify-content: safe center; }

.ui-pilula {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 8px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--color-bg-subtle, #f1f3f7);
    color: var(--color-text-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, color .12s;
}
.ui-pilula:hover { color: var(--color-text); }
.ui-pilula--on { background: var(--color-primary); color: #fff; font-weight: 700; }
.ui-pilula--on:hover { color: #fff; }
.ui-pilula svg { opacity: .8; }
.ui-pilula--on svg { opacity: 1; }

/* ── Campo de busca ─────────────────────────────────────────────────────── */
/* **O icone e' ancorado, e nao apoiado.**

   Ele era `absolute` sem `top`: ficava onde o fluxo o tivesse deixado, o que
   funciona por coincidencia enquanto o campo tem a altura prevista — e sai do
   lugar assim que o pai muda de padding ou de altura, que e' exatamente o que
   acontece ao reusar a busca dentro do seletor. `top: 50%` com translacao
   centraliza seja qual for a altura. */
.ui-busca { position: relative; display: flex; align-items: center; }
.ui-busca__icone {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
    pointer-events: none;
}
.ui-busca input {
    width: 100%;
    min-height: 38px;
    padding: 8px 34px 8px 34px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-bg-elevated);
    color: var(--color-text);
    font: inherit;
    font-size: 13.5px;
}
.ui-busca input::placeholder { color: var(--color-text-muted); }
.ui-busca input:focus { outline: none; border-color: var(--color-primary); }

/* Limpar e' alvo proprio: apagar com a tecla exige apagar letra por letra. */
.ui-busca__limpar {
    position: absolute;
    right: 6px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}
.ui-busca__limpar:hover { background: var(--color-bg-subtle, #f1f3f7); color: var(--color-text); }

/* ── Vazio ──────────────────────────────────────────────────────────────────
   **Diz o que fazer, e nao so' que nao ha' nada.** "Nenhum resultado" deixa a
   pessoa parada; "Nenhum resultado para 'silva' — tente outro termo" devolve o
   proximo passo. Quem escreve a mensagem preenche o `slot`. */
.ui-vazio {
    margin: 0;
    padding: 28px 20px;
    text-align: center;
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.5;
}
.ui-vazio--linha { padding: 16px 18px; text-align: left; }

/* ── Campo de formulario ────────────────────────────────────────────────── */
.ui-campo { display: flex; flex-direction: column; gap: 6px; }

/* O rotulo e' o mesmo do campo de texto e do combobox: caixa alta, 11px. */
.ui-campo__rotulo {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.ui-campo__obrig { color: #ef4444; margin-left: 2px; }

/* O FORMULARIO: campos em coluna, com o mesmo respiro entre eles, e linhas que
   dividem a largura e empilham no telefone. Substitui a margem de cada
   `pw-form-group`, que somava diferente conforme o campo tinha dica ou nao. */
.ui-form { display: flex; flex-direction: column; gap: 16px; }
.ui-form__linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; align-items: start; }
.ui-form__rotulo { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 6px; }

/* Dica e erro ocupam o MESMO lugar, abaixo e colado ao campo. Acima do rotulo,
   o erro se lia como titulo da secao e a pessoa corrigia o campo errado. */
.ui-campo__dica { margin: 0; font-size: 11.5px; color: var(--color-text-muted); line-height: 1.4; }
.ui-campo__erro { margin: 0; font-size: 11.5px; color: var(--color-danger, #dc2626); line-height: 1.4; }
.ui-campo--erro .ui-seletor__gatilho,
.ui-campo--erro .ui-texto__caixa,
.ui-campo--erro .pw-input { border-color: var(--color-danger, #dc2626); }

/* ── Campo de texto e area de texto (x-ui.texto, x-ui.area) ───────────────
   **A MESMA CAIXA DO COMBOBOX** (aprovada em 13/09/2026): rotulo em caixa alta,
   borda de 1px, raio de 8px, 38px de altura, anel de foco na cor primaria e a
   tarja vermelha do obrigatorio. Lado a lado no formulario, campo de texto e
   lista nao podem parecer de dois sistemas. */
.ui-texto { display:flex; flex-direction:column; gap:6px; min-width:0; }
.ui-texto__rotulo { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--color-text-muted); }
.ui-texto__rotulo--obrig::after { content:' *'; color:#ef4444; }

.ui-texto__caixa {
    display:flex; align-items:center; gap:0;
    border:1px solid var(--color-border); border-radius:8px;
    background:var(--color-bg); min-height:38px;
    transition:border-color .15s, box-shadow .15s;
    cursor:text;
}
.ui-texto__caixa:hover { border-color:color-mix(in srgb, var(--color-text-muted) 55%, var(--color-border)); }
.ui-texto__caixa:focus-within { border-color:var(--color-primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 12%,transparent); }

/* Obrigatorio e VAZIO: a tarja some sozinha quando se escreve. E' CSS, e por
   isso vale tambem para o valor posto por x-model, que nao dispara `input`. */
.ui-texto__caixa--obrig:has(.ui-texto__campo:placeholder-shown) { border-left:3px solid #ef4444; }

.ui-texto__campo {
    flex:1; min-width:0; width:100%; border:0; outline:0; background:transparent; box-shadow:none;
    color:var(--color-text); font:inherit; font-size:13px; line-height:20px; padding:8px 12px; margin:0;
}
.ui-texto__campo::placeholder { color:var(--color-text-muted); opacity:1; }
.ui-texto__icone { display:flex; padding-left:12px; color:var(--color-text-muted); flex-shrink:0; }
.ui-texto__icone + .ui-texto__campo { padding-left:8px; }
.ui-texto__caixa:focus-within .ui-texto__icone { color:var(--color-primary); }
.ui-texto__prefixo, .ui-texto__sufixo { align-self:stretch; display:flex; align-items:center; padding:0 10px; font-size:12px; font-weight:600; color:var(--color-text-muted); flex-shrink:0; white-space:nowrap; }
.ui-texto__prefixo { border-right:1px solid var(--color-border); }
.ui-texto__sufixo  { border-left:1px solid var(--color-border); }
.ui-texto__campo--numero { font-variant-numeric:tabular-nums; }

/* O "x" e' o mesmo botao do combobox. Some com o campo vazio — pelo CSS. */
.ui-texto__limpar { width:26px; height:26px; flex-shrink:0; display:flex; align-items:center; justify-content:center; margin-right:6px; padding:0; background:none; border:none; cursor:pointer; color:var(--color-text-muted); border-radius:50%; transition:background .12s, color .12s; }
.ui-texto__limpar:hover { background:color-mix(in srgb,#ef4444 12%,transparent); color:#ef4444; }
.ui-texto__caixa:has(.ui-texto__campo:placeholder-shown) .ui-texto__limpar,
.ui-texto__caixa:has(.ui-texto__campo:disabled) .ui-texto__limpar { display:none; }

.ui-texto__dica { margin:0; font-size:11.5px; color:var(--color-text-muted); line-height:1.4; display:flex; justify-content:space-between; gap:12px; }
.ui-texto__erro { margin:0; font-size:11.5px; color:var(--color-danger, #dc2626); line-height:1.4; }
.ui-texto--erro .ui-texto__caixa { border-color:var(--color-danger, #dc2626); }
.ui-texto--erro .ui-texto__caixa:focus-within { box-shadow:0 0 0 3px color-mix(in srgb,var(--color-danger, #dc2626) 14%,transparent); }
.ui-texto--erro .ui-texto__icone { color:var(--color-danger, #dc2626); }

.ui-texto__caixa--sm { min-height:32px; border-radius:6px; }
.ui-texto__caixa--sm .ui-texto__campo { padding:5px 10px; font-size:12px; }
.ui-texto__caixa--sm .ui-texto__icone { padding-left:10px; }
.ui-texto__caixa--sm .ui-texto__icone + .ui-texto__campo { padding-left:6px; }

.ui-texto__caixa:has(.ui-texto__campo:disabled) { background:color-mix(in srgb, var(--color-border) 35%, var(--color-bg)); cursor:not-allowed; }
.ui-texto__campo:disabled { color:var(--color-text-muted); cursor:not-allowed; -webkit-text-fill-color:var(--color-text-muted); }

/* Area: a mesma caixa, cresce com o texto ate' 240px e depois rola. */
.ui-texto__caixa--area { align-items:stretch; }
.ui-texto__caixa--area .ui-texto__campo { resize:none; min-height:84px; max-height:240px; line-height:1.5; padding:10px 12px; overflow-y:auto; }
.ui-texto__caixa--area .ui-texto__campo--redimensiona { resize:vertical; }
.ui-texto__contador { font-variant-numeric:tabular-nums; white-space:nowrap; margin-left:auto; }
.ui-texto__contador--perto { color:#d97706; font-weight:600; }
.ui-texto__contador--estourou { color:var(--color-danger, #dc2626); font-weight:600; }

/* ── Formulario de pagamento (Nova despesa, aprovado em 13/09/2026) ────────
   Segmento (Dinheiro | Cartao), fichas, lista de escolha com bandeira, faturas
   e a tabela de parcelas. Moravam na tela de despesas; vieram para ca' para a
   biblioteca mostrar a peca de verdade, e a proxima tela de pagamento usar a
   mesma. Prefixo `ndp-` mantido: renomear agora so' trocaria um nome por outro. */
.pw-radio-card { flex:1;display:flex;align-items:flex-start;gap:8px;padding:10px 11px;border:1.5px solid var(--color-border);
    border-radius:10px;cursor:pointer;background:var(--color-bg-elevated); }
.pw-radio-card--on { border-color:var(--color-primary);background:var(--color-primary-soft,rgba(99,102,241,.07)); }
.pw-radio-card input { margin-top:2px;accent-color:var(--color-primary); }
.pw-radio-card b { display:block;font-size:13px;font-weight:600; }
.pw-radio-card small { display:block;font-size:11px;color:var(--color-text-muted);margin-top:1px; }
.pw-escolha { display:grid;gap:6px; }
.pw-escolha__item { display:flex;align-items:center;gap:11px;padding:9px 11px;border:1.5px solid var(--color-border);
    border-radius:10px;cursor:pointer;background:var(--color-bg-elevated);transition:border-color .12s,background .12s;
    position:relative;max-width:100%;box-sizing:border-box;overflow:hidden; }
.pw-escolha__item:hover { border-color:var(--color-primary); }
.pw-escolha__item--on { border-color:var(--color-primary);background:var(--color-primary-soft,rgba(99,102,241,.07)); }
.pw-escolha__item input { position:absolute;opacity:0;width:0;height:0; }
.pw-escolha__texto { display:flex;flex-direction:column;min-width:0;flex:1;gap:1px; }
.pw-escolha__texto b { font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:6px;min-width:0; }
.pw-escolha__texto b > span:first-child,.pw-escolha__texto b { white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.pw-escolha__texto small { font-size:11.5px;color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.pw-escolha__pfpj { font-style:normal;font-size:10px;font-weight:700;letter-spacing:.04em;padding:1px 6px;border-radius:99px;
    background:var(--color-primary-soft,rgba(99,102,241,.1));color:var(--color-primary); }
.pw-escolha__final { font-family:"SF Mono",Menlo,Consolas,monospace;font-weight:500;font-size:12.5px;color:var(--color-text-muted); }
/* ── NOVA DESPESA em blocos (ndp-) ─────────────────────────────────── */
.ndp-corpo { padding-top:4px; }
.ndp-sec { padding:14px 0;border-bottom:1px solid var(--color-border); }
.ndp-sec:last-of-type { border-bottom:0; }
.ndp-tit { margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--color-text-muted); }
.ndp-rot { margin:14px 0 6px;font-size:12px;font-weight:600;color:var(--color-text-muted); }
.ndp-rot span { font-weight:500; }
.ndp-dica { font-size:11.5px;color:var(--color-text-muted);margin-top:4px; }
.ndp-num { font-variant-numeric:tabular-nums;font-weight:600; }
.ndp-seg { display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--color-bg-subtle,#f1f2f7);padding:4px;border-radius:11px; }
.ndp-seg button { height:38px;border:0;border-radius:8px;background:transparent;color:var(--color-text-muted);font:inherit;font-weight:650;cursor:pointer; }
.ndp-seg button[aria-pressed="true"] { background:var(--color-bg-elevated);color:var(--color-text);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px var(--color-border); }
/* R$ | % ao lado do rótulo (14/09/2026): o mesmo segmento da biblioteca, no
   tamanho de etiqueta — ele divide a linha com o texto do campo. */
.pw-seg-unidade { display:inline-flex;gap:2px;background:var(--color-bg-subtle,#f1f2f7);padding:2px;border-radius:7px; }
.pw-seg-unidade button { height:20px;min-width:28px;padding:0 7px;border:0;border-radius:5px;background:transparent;color:var(--color-text-muted);font:inherit;font-size:11px;font-weight:700;cursor:pointer;line-height:20px; }
.pw-seg-unidade button[aria-pressed="true"] { background:var(--color-bg-elevated);color:var(--color-primary);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px var(--color-border); }
.ndp-chips { display:flex;flex-wrap:wrap;gap:6px;align-items:center; }
.ndp-chip { height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--color-border);background:var(--color-bg-elevated);color:var(--color-text-muted);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;font-variant-numeric:tabular-nums; }
.ndp-chip[aria-pressed="true"] { background:var(--color-primary);border-color:var(--color-primary);color:#fff; }
.ndp-outro-n { width:70px;height:30px;border-radius:999px;border:1px solid var(--color-border);background:var(--color-bg-elevated);color:var(--color-text);text-align:center;font:inherit;font-weight:600; }
.ndp-faturas { display:grid;grid-template-columns:repeat(4,1fr);gap:6px; }
@media (max-width:640px){ .ndp-faturas { grid-template-columns:1fr 1fr; } }
.ndp-fatura { padding:8px 10px;border:1.5px solid var(--color-border);border-radius:10px;background:var(--color-bg-elevated);cursor:pointer;text-align:left;font:inherit;color:inherit; }
.ndp-fatura b { display:block;font-size:12.5px; }
.ndp-fatura small { display:block;color:var(--color-text-muted);font-size:11px; }
.ndp-fatura em { display:inline-block;margin-top:3px;font-style:normal;font-size:10px;font-weight:700;padding:0 6px;border-radius:5px;background:#fdf3e2;color:#b45309; }
.ndp-fatura em.ndp-passada { background:var(--color-bg-subtle,#f1f2f7);color:var(--color-text-muted); }
.ndp-fatura[aria-pressed="true"] { border-color:var(--color-primary);background:var(--color-primary-soft,rgba(99,102,241,.07)); }
.ndp-outra { margin-top:8px;display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap; }
.ndp-outra small { font-size:11.5px;color:var(--color-text-muted);padding-bottom:10px; }
.ndp-parcelas { margin-top:10px;border:1px solid var(--color-border);border-radius:10px;overflow:hidden; }
.ndp-p { display:grid;grid-template-columns:48px 1fr 140px;align-items:center;gap:10px;padding:6px 12px;border-top:1px solid var(--color-border);font-variant-numeric:tabular-nums;font-size:13px; }
.ndp-p:first-child { border-top:0; }
.ndp-p--cab { background:var(--color-bg-subtle,#f1f2f7);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-muted); }
.ndp-p-num { font-weight:700;color:var(--color-text-muted); }
.ndp-p-val { height:32px;width:100%;border:1px solid var(--color-border);border-radius:8px;background:var(--color-bg-elevated);color:var(--color-text);text-align:right;padding:0 10px;font:inherit;font-weight:650;font-variant-numeric:tabular-nums; }
.ndp-p-val--editada { border-color:var(--color-primary);background:var(--color-primary-soft,rgba(99,102,241,.07)); }
.ndp-p-val--ruim { border-color:#dc2626;color:#dc2626; }
.ndp-p-val[readonly] { background:var(--color-bg-subtle,#f1f2f7);color:var(--color-text-muted);cursor:not-allowed; }
.ndp-p-trava { display:block;font-size:10.5px;color:var(--color-text-muted);text-align:right; }
.ndp-p-rodape { display:flex;justify-content:space-between;gap:10px;padding:8px 12px;background:var(--color-bg-subtle,#f1f2f7);font-size:12px;border-top:1px solid var(--color-border); }
.ndp-bate { color:#0f8a5f; }
.ndp-ruim { color:#dc2626; }
.ndp-trava { margin-top:8px;padding:8px 12px;border-radius:9px;background:rgba(220,38,38,.08);color:#dc2626;font-size:12.5px;font-weight:600; }
.ndp-aviso { margin-top:10px;padding:8px 12px;border-radius:9px;background:var(--color-bg-subtle,#f1f2f7);color:var(--color-text-muted);font-size:12px; }
.ndp-aviso b { color:var(--color-text); }
.ndp-pe { display:flex;align-items:center;gap:12px;flex-wrap:wrap; }
.ndp-resumo { font-size:12px;color:var(--color-text-muted); }
.ndp-resumo b { color:var(--color-text);font-variant-numeric:tabular-nums; }
.ndp-sugestoes { position:relative; }
.ndp-sug { position:absolute;z-index:30;left:0;right:0;top:100%;margin-top:2px;max-height:220px;overflow:auto;
    background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:10px;
    box-shadow:0 12px 28px -10px rgba(20,22,40,.28); }
.ndp-sug__item { display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
    padding:9px 12px;border:0;background:none;font:inherit;font-size:13px;color:var(--color-text);
    text-align:left;cursor:pointer; }
.ndp-sug__item:hover,.ndp-sug__item:focus { background:var(--color-primary-soft,rgba(99,102,241,.08));outline:none; }
.ndp-sug__item em { font-style:normal;font-size:11px;color:var(--color-text-muted); }
.ndp-conta { color:var(--color-text-muted);font-weight:600; }
.ndp-vertodos { margin-left:8px;border:0;background:none;padding:0;font:inherit;font-size:11px;font-weight:600;color:var(--color-primary);cursor:pointer;text-transform:none;letter-spacing:0; }

/* ── Pergunta da série e detalhe do pagamento (aprovados em 13/09/2026) ────
   `x-ui.pergunta-da-serie` e `x-ui.detalhe-do-pagamento`. */
.ui-janela { width: 100%; max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.45); overflow: hidden; }
.ui-janela--p { max-width: 440px; }
.ui-janela--m { max-width: 500px; }
.ui-janela__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--color-border); flex-shrink: 0; }
.ui-janela__titulo { font-size: 15px; font-weight: 700; color: var(--color-text); }
.ui-janela__corpo { padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; min-height: 0; }
.ui-janela__pe { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--color-border); flex-wrap: wrap; flex-shrink: 0; }
.ui-janela__pe .ui-janela__esq { margin-right: auto; }

.ui-serie { display: flex; gap: 12px; align-items: flex-start; }
.ui-serie__icone { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--color-primary-soft, rgba(99,102,241,.1)); color: var(--color-primary); flex-shrink: 0; }
.ui-serie__icone--perigo { background: rgba(220,38,38,.12); color: #dc2626; }
.ui-serie__texto { margin: 0; font-size: 13.5px; color: var(--color-text-secondary); line-height: 1.5; }
.ui-serie__texto b { color: var(--color-text); font-weight: 600; }
.ui-serie__ops { display: grid; gap: 6px; }
.ui-serie__op { position: relative; display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1.5px solid var(--color-border); border-radius: 10px; cursor: pointer; background: var(--color-bg-elevated); transition: border-color .12s, background .12s; }
.ui-serie__op:hover { border-color: var(--color-primary); }
.ui-serie__op:focus-within { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.ui-serie__op input { position: absolute; opacity: 0; width: 0; height: 0; }
.ui-serie__op--on { border-color: var(--color-primary); background: var(--color-primary-soft, rgba(99,102,241,.07)); }
.ui-serie__radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--color-border); display: grid; place-items: center; flex-shrink: 0; }
.ui-serie__op--on .ui-serie__radio { border-color: var(--color-primary); }
.ui-serie__op--on .ui-serie__radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); }
.ui-serie--perigo .ui-serie__op--on { border-color: #dc2626; background: rgba(220,38,38,.07); }
.ui-serie--perigo .ui-serie__op--on .ui-serie__radio { border-color: #dc2626; }
.ui-serie--perigo .ui-serie__op--on .ui-serie__radio::after { background: #dc2626; }
.ui-serie__op-texto { display: flex; flex-direction: column; min-width: 0; }
.ui-serie__op-texto b { font-size: 13.5px; font-weight: 600; color: var(--color-text); }
.ui-serie__op-texto small { font-size: 11.5px; color: var(--color-text-muted); }
.ui-serie__nota { margin: 0; font-size: 12px; color: var(--color-text-muted); display: flex; gap: 6px; align-items: flex-start; }

.ui-pgto__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ui-pgto__nome { margin: 0; font-size: 16px; font-weight: 700; color: var(--color-text); }
.ui-pgto__sub { margin: 2px 0 0; font-size: 12.5px; color: var(--color-text-muted); }
.ui-pgto__valor { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; color: var(--color-text); }
.ui-pgto__bloco { border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; }
.ui-pgto__bloco-tit { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--color-bg-hover); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.ui-pgto__bloco-tit .ui-selo { margin-left: auto; letter-spacing: 0; text-transform: none; }
.ui-pgto__meio { display: flex; align-items: center; gap: 12px; padding: 12px; }
.ui-pgto__meio + .ui-pgto__meio { border-top: 1px solid var(--color-border); }
.ui-pgto__meio-t b { display: block; font-size: 14px; font-weight: 600; color: var(--color-text); }
.ui-pgto__meio-t small { display: block; font-size: 12px; color: var(--color-text-muted); }
.ui-pgto__final { font-family: "SF Mono", Menlo, Consolas, monospace; font-weight: 500; font-size: 12.5px; color: var(--color-text-muted); }
.ui-pgto__banco { width: 40px; height: 26px; border-radius: 4px; background: var(--color-text-secondary); color: var(--color-bg-elevated); display: grid; place-items: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.ui-pgto__dl { margin: 0; display: grid; grid-template-columns: auto 1fr; }
.ui-pgto__dl dt, .ui-pgto__dl dd { padding: 8px 12px; border-top: 1px solid var(--color-border); font-size: 13px; }
.ui-pgto__dl dt { color: var(--color-text-muted); }
.ui-pgto__dl dd { margin: 0; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--color-text); }
.ui-pgto__emissor { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; text-align: left; }
.ui-pgto__emissor small { display: block; color: var(--color-text-muted); font-weight: 400; font-size: 12px; }
.ui-pgto__aviso { margin: 0; padding: 9px 12px; border-radius: 9px; background: var(--color-bg-hover); font-size: 12px; color: var(--color-text-secondary); }
.ui-pgto__aviso b { color: var(--color-text); }
.ui-pgto__carregando { padding: 40px 0; text-align: center; color: var(--color-text-muted); font-size: 13px; }
.ui-pgto-gatilho { background: none; border: 0; padding: 2px 0; font: inherit; font-size: 12px; color: var(--color-text); cursor: pointer; text-align: left; border-bottom: 1px dashed color-mix(in srgb, var(--color-text-muted) 60%, transparent); }
.ui-pgto-gatilho:hover { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.ui-pgto-gatilho--vazio { color: var(--color-text-muted); }

/* ── Seletor com busca e criar ──────────────────────────────────────────── */
.ui-seletor { position: relative; }

/* O campo de verdade continua no formulario — invisivel, mas presente: e' ele
   que envia, que o navegador preenche e que os testes enxergam. */
.ui-seletor__real {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}

.ui-seletor__gatilho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    /* A mesma caixa do campo de texto (13/09/2026): fundo, raio, letra e anel
       de foco iguais — lado a lado no formulario, lista e texto sao uma peca so'. */
    background: var(--color-bg);
    color: var(--color-text);
    font: inherit;
    font-size: 13px;
    line-height: 20px;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.ui-seletor__gatilho:hover { border-color: color-mix(in srgb, var(--color-text-muted) 55%, var(--color-border)); }
.ui-seletor__gatilho--aberto,
.ui-seletor__gatilho:focus-visible { outline: 0; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent); }

.ui-seletor__escolhido { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-seletor__escolhido--vazio { color: var(--color-text-muted); }
/* OPCAO RICA: a figura na frente (a bandeira do cartao) e, no campo fechado,
   o apoio embaixo do titulo — quem escolheu o cartao ve' qual, e quando fecha. */
.ui-seletor__figura { display: flex; flex: 0 0 auto; }
.ui-seletor__gatilho--rico { justify-content: flex-start; padding-block: 7px; }
.ui-seletor__gatilho--rico .ui-seletor__escolhido { flex: 1 1 auto; min-width: 0; }
.ui-seletor__gatilho--rico .ui-seletor__escolhido > small { display: block; font-size: 11px; line-height: 15px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-seletor__escolhido .pw-escolha__pfpj, .ui-seletor__opcao-texto .pw-escolha__pfpj { margin-left: 4px; }
.ui-seletor__gatilho--rico .ui-seletor__seta { margin-left: auto; }
.ui-seletor__limpar { display: flex; margin-left: auto; padding: 2px; border-radius: 6px; color: var(--color-text-muted); cursor: pointer; }
.ui-seletor__limpar:hover { color: var(--color-danger, #ef4444); background: color-mix(in srgb, var(--color-danger, #ef4444) 10%, transparent); }
.ui-seletor__limpar + .ui-seletor__seta { margin-left: 0; }
/* Flutuante: a posição vem do JS (`estiloDoPainel`), e o painel sai da conta
   do contêiner — senão a rolagem da modal o cortaria. */
.ui-seletor__painel--flutuante { top: auto; right: auto; }

/* A seta APONTA para onde o toque leva: a lista desce. O icone e' o de voltar,
   girado — o mesmo desenho do resto do sistema, e nao um parecido. */
.ui-seletor__seta { display: flex; color: var(--color-text-muted); transform: rotate(-90deg); transition: transform .15s; }
.ui-seletor__gatilho--aberto .ui-seletor__seta { transform: rotate(90deg); }

/* ── O <select> nativo que virou seletor (ui.js, `uiSeletorAuto`) ──────────
   O campo continua no lugar, invisivel: e' ele que o formulario envia. */
.ui-seletor__real--auto {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    opacity: 0 !important; pointer-events: none !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important;
}
.ui-seletor__gatilho--auto { width: auto; max-width: 100%; }
.ui-seletor__gatilho--sm { min-height: 32px; padding: 5px 10px; border-radius: 6px; font-size: 12.5px; line-height: 20px; }
/* A pilula da barra de filtro cede o desenho ao seletor. */
.pw-filter-pill--auto { padding: 0; border: 0; background: none; height: auto; }
.pw-filter-pill--auto:hover { background: none; }
.pw-filter-pill--auto::after { display: none; }
.ui-seletor__grupo { padding: 8px 10px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }

.ui-seletor__painel {
    position: absolute;
    z-index: 60;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    max-height: 320px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 10px);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
    overflow: hidden;
}

/* O recuo do bloco vira variavel: o icone se posiciona a partir dela, em vez de
   repetir um numero que so' bate enquanto ninguem mexer no padding. */
.ui-seletor__busca {
    --recuo: 8px;
    position: relative;
    display: flex;
    padding: var(--recuo);
    border-bottom: 1px solid var(--color-border);
}
.ui-seletor__busca .ui-busca__icone { left: calc(var(--recuo) + 11px); }
.ui-seletor__busca input {
    width: 100%;
    min-height: 34px;
    padding: 6px 10px 6px 32px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 8px);
    background: var(--color-bg);
    color: var(--color-text);
    font: inherit;
    font-size: 13px;
}
.ui-seletor__busca input:focus { outline: none; border-color: var(--color-primary); }

.ui-seletor__lista { list-style: none; margin: 0; padding: 4px; overflow-y: auto; flex: 1; min-height: 0; }

.ui-seletor__opcao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--radius-sm, 8px);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
}
/* Realce por TECLADO e por mouse sao o mesmo estado: quem desce com a seta e
   quem passa o mouse precisam ver a mesma coisa, ou a lista parece ter dois
   cursores. */
.ui-seletor__opcao--realcada { background: var(--color-primary-soft, #eef0fe); }
.ui-seletor__opcao--escolhida { font-weight: 600; }
.ui-seletor__opcao-texto { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.ui-seletor__opcao-texto small { display: block; font-size: 11px; color: var(--color-text-muted); }
.ui-seletor__marca { display: flex; color: var(--color-primary); flex: 0 0 auto; }

.ui-seletor__vazio { padding: 16px 12px; text-align: center; font-size: 12.5px; color: var(--color-text-muted); }

.ui-seletor__criar {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    /* Abaixo, e nao acima: desde 13/09/2026 o criar e' a PRIMEIRA opcao da
       lista, e a linha separa-o do que ja' existe. */
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-primary);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.ui-seletor__criar:hover { background: var(--color-primary-soft, #eef0fe); }
.ui-seletor__criar b { font-weight: 700; }
/* O "Usar" vem logo abaixo do "Cadastrar", mais discreto: é a saída para o nome
   sem cadastro, e não o convite principal. */
.ui-seletor__criar--usar { color: var(--color-text-muted); font-weight: 500; }
.ui-seletor__criar--usar b { color: var(--color-text); }

/* ── Tabela ─────────────────────────────────────────────────────────────────
   **Quem rola e' a tabela, e nao a pagina.** Uma tabela larga dentro de uma
   pagina estreita empurrava a pagina inteira para o lado — e ai' o cabecalho, o
   menu e tudo o mais saíam do lugar junto. */
.ui-tabela__caixa { width: 100%; overflow-x: auto; }

.ui-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }

.ui-tabela th {
    padding: 9px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
    background: var(--color-bg-elevated);
}

/* Numa lista de trezentas linhas, o nome da coluna some antes da metade. */
.ui-tabela__topo--fixo th { position: sticky; top: 0; z-index: 2; }

.ui-tabela td { padding: 10px 12px; border-bottom: 1px solid var(--color-border-light, var(--color-border)); }
.ui-tabela tbody tr:last-child td { border-bottom: 0; }
.ui-tabela--compacta th { padding: 7px 10px; }
.ui-tabela--compacta td { padding: 7px 10px; font-size: 12.5px; }

/* Numero a' direita e com digito de largura fixa: e' o que mantem a virgula na
   mesma coluna e faz a comparacao acontecer sem esforco. */
.ui-tabela__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.ui-tabela__linha--clicavel { cursor: pointer; }
.ui-tabela__linha--clicavel:hover td { background: var(--color-primary-soft, #eef0fe); }

/* ── Workflow: a barra das areas ────────────────────────────────────────── */
/* A busca empurra-se para a direita e para de crescer: um campo que ocupa a
   linha inteira dominaria a barra, quando o que se ve' primeiro ali sao as
   areas. */
/* A busca fica na ponta da barra das areas — com folga a' esquerda, para nao
   encostar no ultimo nome, e alinhada pelo centro da linha: sem isso ela
   assentava no fundo, junto da borda inferior, e parecia de outra faixa. */
.pw-ws-busca {
    margin-left: auto;
    flex: 0 0 auto;
    width: min(280px, 40vw);
    padding-left: 16px;
    align-self: center;
    padding-bottom: 6px;
}

/* **A area vazia vira uma linha.** Cinco areas sem quadro gastavam cinco blocos
   de tela e empurravam para baixo a unica que tinha conteudo.

   Dois lugares gastavam essa altura, e nao um: a margem que separa uma area da
   seguinte — justa quando ha' quadros, exagerada quando nao ha' nada a separar
   — e o proprio aviso, que sendo item de uma grade era ESTICADO ate' a altura
   da linha. `align-self: start` o devolve ao tamanho do que ele diz. */
/* **E ela CONTINUA na tela, mesmo vazia.**
   A tentacao seguinte e' esconder as areas sem quadro e devolver os quase
   seiscentos pixels que elas somam. Nao da': cada area e' um alvo de ARRASTE —
   e' assim que um quadro se move de Juridico para Marketing. Escondida, a area
   vazia nao pode receber nada, e a unica forma de povoa-la seria criar um
   quadro novo la' dentro. Ela encolhe ate' caber numa linha, e para por ai'. */
.pw-workspace-section--vazia { margin-bottom: 10px !important; }
.pw-workspace-section--vazia .pw-workspace-section__header { margin-bottom: 0; }

.pw-boards-empty {
    display: flex;
    align-items: center;
    align-self: start;
    gap: 10px;
    padding: 2px 2px 4px;
    font-size: 12.5px;
    color: var(--color-text-muted);
}

.pw-boards-empty__criar {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-bg-elevated);
    color: var(--color-primary);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.pw-boards-empty__criar:hover { background: var(--color-primary-soft, #eef0fe); border-color: var(--color-primary); }

/* ── Selo ───────────────────────────────────────────────────────────────────
   A etiqueta curta que qualifica sem ocupar linha. Uma altura so' e um raio
   so': a mesma palavra com dois pesos, em telas vizinhas, faz a informacao
   parecer mudar de importancia ao mudar de lugar. */
.ui-selo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: middle;
}

/* Tom SEMANTICO: classifica, resolvido, espera acao, venceu, e o do produto. */
.ui-selo--neutro { background: var(--color-bg-subtle, #f1f3f7); color: var(--color-text-muted); }
.ui-selo--bom    { background: #dcfce7; color: #15803d; }
.ui-selo--alerta { background: #fef3c7; color: #a16207; }
.ui-selo--ruim   { background: #fee2e2; color: #b91c1c; }
.ui-selo--marca  { background: var(--color-primary-soft, #eef0fe); color: var(--color-primary); }

[data-theme="dark"] .ui-selo--bom    { background: #14532d33; color: #4ade80; }
[data-theme="dark"] .ui-selo--alerta { background: #78350f33; color: #fbbf24; }
[data-theme="dark"] .ui-selo--ruim   { background: #7f1d1d33; color: #f87171; }

/* ── Arquivos: a busca em todo o Drive ──────────────────────────────────── */
/* A busca do Drive segue a mesma regra das telas de lista: a' direita. */
/* A frase e a busca na MESMA linha: nenhuma das duas precisa da largura
   inteira, e separadas sobrava uma faixa vazia entre elas do tamanho de meio
   cartao. A busca e' o segundo item visual (`order`) mas vem primeiro no HTML,
   para que no telefone — onde a linha quebra — ela fique em cima, e nao
   empurrada para baixo do primeiro cartao. */
.doc-topo {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    margin-bottom: 18px;
}
.doc-topo__frase {
    order: -1; flex: 1; min-width: 260px; margin: 0;
    font-size: 13px; color: var(--color-text-muted); line-height: 1.5;
}
.doc-busca { flex: 0 1 460px; max-width: 460px; margin: 0; }

@media (max-width: 620px) {
    .doc-busca { flex-basis: 100%; max-width: none; }
}

.doc-achados { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-border);
               border-radius: var(--radius-lg, 14px); overflow: hidden; background: var(--color-bg-elevated); }
.doc-achados li + li { border-top: 1px solid var(--color-border-light, var(--color-border)); }

.doc-achado { display: flex; align-items: center; gap: 11px; padding: 10px 14px; text-decoration: none; color: inherit; }
.doc-achado:hover { background: var(--color-primary-soft, #eef0fe); }
.doc-achado__ico { display: flex; color: var(--color-text-muted); flex: 0 0 auto; }
.doc-achado__corpo { flex: 1; min-width: 0; }
.doc-achado__nome { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Onde ele mora: dois "Peticao Inicial.pdf" sem isso sao indistinguiveis. */
.doc-achado__onde { display: block; font-size: 11.5px; color: var(--color-text-muted);
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-achado__meta { font-size: 11.5px; color: var(--color-text-muted); flex: 0 0 auto; font-variant-numeric: tabular-nums; }

/* ── Pilula de filtro ───────────────────────────────────────────────────────
   Igual a' pilula de recorte, com o numero ao lado. O numero nao e' enfeite:
   diz de antemao se vale entrar, e filtro que leva a lista vazia e' um clique
   cobrado por nada. */
.ui-pilulas--filtro { flex-wrap: wrap; overflow: visible; }
.ui-pilulas--filtro .ui-pilula { text-decoration: none; }

.ui-pilula__conta {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .07);
    font-variant-numeric: tabular-nums;
}
.ui-pilula--on .ui-pilula__conta { background: rgba(255, 255, 255, .22); }
[data-theme="dark"] .ui-pilula__conta { background: rgba(255, 255, 255, .1); }

/* ── Autenticador: cadastro pelo segredo ────────────────────────────────── */
.otp__novo { padding: 14px 16px; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 11px; }
.otp__campo { display: flex; flex-direction: column; gap: 5px; }
.otp__campo span { font-size: 11.5px; font-weight: 600; color: var(--color-text); }
.otp__campo small { font-weight: 400; color: var(--color-text-muted); }
.otp__campo code { font-size: 11px; background: var(--color-bg-subtle, #f1f3f7); padding: 1px 5px; border-radius: 4px; }
.otp__campo input {
    min-height: 36px; padding: 7px 11px;
    border: 1px solid var(--color-border); border-radius: var(--radius-md, 10px);
    background: var(--color-bg-elevated); color: var(--color-text);
    font: inherit; font-size: 13px; letter-spacing: .02em;
}
.otp__campo input:focus { outline: none; border-color: var(--color-primary); }
.otp__erro { margin: 0; font-size: 12px; color: var(--color-danger, #dc2626); }
.otp__acoes { display: flex; justify-content: flex-end; gap: 8px; }
.otp__bt {
    padding: 7px 14px; border: 1px solid var(--color-border); border-radius: 999px;
    background: var(--color-bg-elevated); color: var(--color-text);
    font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.otp__bt--primario { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.otp__bt[disabled] { opacity: .5; cursor: default; }
.otp__add {
    display: inline-flex; align-items: center; gap: 5px;
    border: 0; background: none; padding: 0;
    color: var(--color-primary); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.otp__add:hover { text-decoration: underline; }

/* ── Agenda: arrastar move, a borda de baixo estica ─────────────────────────
   Relato: arrastar um evento aumentava a duracao em vez de move-lo.

   Medido no navegador: um evento de 15 minutos tem DEZENOVE pixels de altura, e
   a alca de redimensionar do FullCalendar tem oito fixos — quarenta e dois por
   cento do evento, encostados na base. Pegar o evento em qualquer ponto abaixo
   do meio caía na alca, e o gesto de mover virava o de esticar.

   Duas medidas, e as duas sao necessarias:

   1. a alca deixa de ter altura fixa e passa a ser proporcional, com teto: em
      evento curto ela encolhe junto, em vez de tomar a peca inteira;
   2. o evento ganha altura minima, para haver corpo onde pegar. Sem isso, um
      compromisso de quinze minutos continuaria sendo uma tira fina em que nao
      ha' area neutra nenhuma. */

/* **A altura minima saiu daqui, e ela era o defeito.** Forcar 26px numa peca
   cuja faixa de grade tem 19 fazia cada evento invadir cinco pixels do
   seguinte. Medido: o evento das 476 cobria a base do que terminava em 481 — e
   como o vizinho e' pintado por cima, a alca de esticar ficava DEBAIXO dele,
   visivel e inalcancavel.

   Foi uma correcao que criou um defeito maior que o original: para dar corpo a
   um evento curto, tirou a borda de todos. A alca fina resolve o mesmo aperto
   sem mexer na geometria da grade. */

/* A alca e' medida em PIXELS, e nao em porcentagem — medido no navegador:
   `min(8px, 28%)` computava ZERO. Porcentagem de altura resolve contra a altura
   do pai, e o pai aqui nao tem altura definida; o termo vira invalido e o min()
   desaba para nada.

   O efeito passou despercebido porque parecia o conserto: arrastar em qualquer
   ponto movia o evento, que era o pedido. So' que a alca sumiu junto, e esticar
   deixou de existir em toda a agenda — um defeito trocado pelo seu oposto, que
   e' o risco de toda correcao verificada so' pelo sintoma que a motivou.

   Sete pixels contra os vinte e seis de altura minima: borda de baixo nitida, e
   dezenove pixels de corpo onde pegar para mover. */
.fc .fc-timegrid-event .fc-event-resizer-end,
.fc .fc-timegrid-event .fc-event-resizer {
    /* Cinco pixels, e nao sete: num evento de quinze minutos — dezenove pixels
       de altura — sete ja' seriam mais de um terco da peca. */
    height: 5px;

    /* **Sempre presente, e nao so' no hover.** De fabrica a alca nasce
       `display:none` e so' aparece com o ponteiro em cima. Parece detalhe, e
       nao e': o gesto passa a depender de um estado que muda sozinho, e a
       mesma acao no mesmo pixel da' resultados diferentes conforme o caminho
       que o ponteiro fez ate' ali. Transparente, ela nao aparece na tela — so'
       fica alcancavel. */
    display: block;

    /* Dentro da peca. O padrao a joga quatro pixels ABAIXO da base, invadindo o
       evento de baixo: esticar um pegava a borda do outro. */
    bottom: 0;

    /* Acima do conteudo: `.fc-event-main` e' `position:relative; z-index:2`, e
       o nosso texto vive dentro dele. Sem isto a alca existe, esta' visivel, e
       mesmo assim nao recebe o clique — foi o que a medicao mostrou: nos quatro
       pontos testados o alvo era o titulo, nunca a alca. */
    z-index: 6;
}

/* O conteudo nao vaza da peca. Medido: num evento de VINTE E CINCO pixels o
   corpo ocupava trinta e sete, onze alem da base — cobrindo a alca e o comeco
   do evento seguinte. Arrastar perto do fim de um compromisso pegava o de
   baixo, e a agenda parecia decidir sozinha o que mover. */
.fc .fc-timegrid-event { overflow: hidden; }

/* O cursor conta a historia ANTES do arraste: mao aberta no corpo, seta vertical
   so' na faixa de baixo. Descobrir a diferenca errando e' o que faz a pessoa
   desconfiar do proprio gesto.

   A especificidade precisa vencer `.fc-event.fc-event-draggable`, do proprio
   FullCalendar, que pede `pointer` — e cuja folha e' carregada DEPOIS desta.
   Empatar em especificidade nao basta quando se perde na ordem. */
.fc .fc-timegrid-event.fc-event-draggable { cursor: grab !important; }
.fc .fc-timegrid-event.fc-event-draggable:active { cursor: grabbing !important; }
.fc .fc-timegrid-event.fc-event-draggable .fc-event-resizer-end,
.fc .fc-timegrid-event.fc-event-draggable .fc-event-resizer { cursor: ns-resize !important; }

/* O `!important` aqui e' medido, e nao precaucao: com tres classes contra duas
   a regra ja' deveria vencer, e o computado continuava `pointer` — o
   FullCalendar chega ao cursor por um caminho que a cascata nao resolve. Uma
   linha de forca custa menos que outra tarde de investigacao por um ponteiro. */

/* ── Busca: o `x` nativo sai de cena ────────────────────────────────────────
   `type=search` e' o que impede o navegador de tratar o campo como login — mas
   ele traz junto um `x` proprio, que ficaria ao lado do nosso botao de limpar.
   Dois botoes para a mesma coisa, um deles sem o estilo da casa. */
.pw-search__input::-webkit-search-cancel-button,
.pw-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }


/* ── Telas de processos ─────────────────────────────────────────────────────
   Judicial, extrajudicial, diligencias, assessoria, consultoria e avulsos
   dividem a mesma forma. O estilo mora aqui, e nao em seis blocos `<style>`
   dentro das views: era assim que cada tela ganhava o seu tom de cinza e o seu
   espacamento, e a diferenca so' aparecia quando alguem abria duas lado a
   lado. */
.pw-tela { padding: 24px 32px; }
/* A tela de lista no modo NORMAL (13/09/2026, casos juridicos e chamadas): a
   folga proporcional da biblioteca. Declarado aqui, depois de `.pw-tela`, senao
   o `padding` dela vence o `padding-inline` do modo. */
.pw-tela.pw-tela--normal { max-width: 1500px; margin-inline: auto; padding-inline: clamp(24px, 7vw, 120px); }
.pw-tela.pw-tela--estendida { max-width: none; margin-inline: 0; padding-inline: 20px; }

.pw-tela__topo {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; margin-bottom: 20px;
}
.pw-tela__titulo { font-size: 20px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.pw-tela__apoio  { font-size: 13px; color: var(--color-text-muted); margin: 4px 0 0; }

.pw-tela__acoes { display: flex; align-items: center; gap: 8px; }

.pw-tela__atalho {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: var(--color-primary);
    text-decoration: none; padding: 7px 12px; border-radius: 8px;
    border: 1px solid var(--color-border, #e2e8f0);
    transition: background .15s ease, border-color .15s ease;
}
.pw-tela__atalho:hover { background: var(--color-primary-soft, #eef0fe); border-color: var(--color-primary); }

.pw-tela__barra {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    margin-bottom: 12px;
}
/* A busca empurrada para a direita da barra: os filtros ficam com o titulo,
   ela fica no canto que e' dela em toda tela. No telefone a barra quebra em
   linhas e o `auto` deixa de empurrar — a busca ocupa a largura inteira, que e'
   o que se quer quando ela e' a unica coisa na linha. */
.pw-tela__busca { margin-left: auto; }
@media (max-width: 640px) {
    .pw-tela__busca { margin-left: 0; width: 100%; }
}

.pw-tela__situacoes { margin-bottom: 16px; }

.pw-tela__vazio {
    text-align: center; padding: 56px 20px;
    color: var(--color-text-muted); font-size: 14px;
    border: 1px dashed var(--color-border, #e2e8f0); border-radius: 12px;
}

/* Numero em coluna le-se comparando, e para comparar os digitos precisam ficar
   alinhados: sem isto o "1" ocupa menos que o "8" e a coluna serpenteia. */
.pw-data-table th.pw-num, .pw-data-table td.pw-num {
    text-align: right; font-variant-numeric: tabular-nums;
}

/* A etiqueta do board e a da lista. Viviam num `<style>` dentro de cada view —
   seis copias, e a tela que esquecesse de copiar perdia o estilo sem erro
   nenhum, so' ficando feia. */
.wf-board-tag {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 600; padding: 2px 8px;
    border-radius: 10px; color: #fff; white-space: nowrap;
}
.wf-list-tag {
    display: inline-block; font-size: 11px;
    color: var(--color-text-muted); background: var(--color-bg-subtle, #f1f5f9);
    border-radius: 6px; padding: 2px 7px;
}

/* ── Capa do card de detrator ───────────────────────────────────────────────
   **Uma linha so'.** A capa tinha a propria borda a' esquerda e o card ja' tem a
   dele — as duas apareciam lado a lado, e a segunda so' dizia o que a primeira
   ja' dizia. A cor do detrator vai na borda que ja' existe (ver o `:style` do
   card em `board/show`), que e' tambem onde a cor escolhida a mao pinta: assim
   quem trocar a cor do card ve' a troca acontecer. */

.pw-cc-sev { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.pw-cc-sev__trilho {
    flex: 1; height: 4px; border-radius: 2px;
    background: var(--color-bg-subtle, #f1f5f9); overflow: hidden;
}
/* Do ambar ao vermelho: a cor acompanha a gravidade, entao a barra diz duas
   coisas ao mesmo tempo — o quanto, e o quao grave e' esse quanto. */
.pw-cc-sev__barra { height: 100%; background: linear-gradient(90deg, #f59e0b, #ef4444); }
.pw-cc-sev__n {
    font-size: 10px; font-weight: 700; color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ── A ficha do detrator dentro do card ─────────────────────────────────────
   O mesmo desenho da Central, para quem conhece uma reconhecer a outra. */
.det-ficha {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; margin-bottom: 12px;
    border: 1px solid var(--color-border, #e5e7eb); border-radius: 12px;
    background: var(--color-bg-elevated, #fff);
}
.det-ficha__avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #fee2e2; color: #b91c1c; font-weight: 700; font-size: 16px;
}
.det-ficha__nome { font-size: 15px; font-weight: 700; color: var(--color-text); }
.det-ficha__selos { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; }

.det-selo {
    font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
    background: var(--color-bg-subtle, #f1f5f9); color: var(--color-text-muted);
    text-transform: capitalize;
}
.det-selo--classe { background: #fef3c7; color: #a16207; }
.det-selo--risco  { background: #ffedd5; color: #c2410c; }

.det-kpis { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 10px; margin-bottom: 16px; }
.det-kpi {
    padding: 12px 14px; border-radius: 10px;
    border: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-bg-elevated, #fff);
}
/* A borda colorida a' esquerda e' o que liga os tres cartoes: cada um tem a sua,
   e a cor diz do que ele trata antes de o rotulo ser lido. */
.det-kpi--nps { border-left: 3px solid #ef4444; }
.det-kpi--sev { border-left: 3px solid #f59e0b; }
.det-kpi__val { font-size: 22px; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; }
.det-kpi__rot {
    font-size: 10px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--color-text-muted); margin-top: 4px;
}
.det-kpi__barra { display: flex; align-items: center; gap: 10px; }
.det-kpi__trilho { flex: 1; height: 6px; border-radius: 3px; background: var(--color-bg-subtle, #e5e7eb); overflow: hidden; }
.det-kpi__fill { height: 100%; background: linear-gradient(90deg, #f59e0b, #ef4444); }
.det-kpi__n { font-size: 20px; font-weight: 700; color: #ea580c; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) { .det-kpis { grid-template-columns: 1fr; } }

/* ── Menu de acoes da modal do card ─────────────────────────────────────────
   Eram tres botoes na barra do cabecalho (Pasta, Duplicar, Excluir) e um quarto
   no rodape, repetindo o Duplicar. Quatro alvos na mesma faixa, dois deles para
   a mesma acao — e o mais perigoso do tamanho dos outros. */
.pw-modal__acoes { position: relative; display: inline-flex; }

.pw-modal__acoes-menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 70;
    min-width: 190px; padding: 5px;
    background: var(--color-bg-elevated, #fff);
    border: 1px solid var(--color-border, #e5e7eb); border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
}
.pw-modal__acoes-menu button {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 8px 10px; border: none; background: none; border-radius: 7px;
    font-size: 13px; color: var(--color-text); text-align: left; cursor: pointer;
}
.pw-modal__acoes-menu button:hover { background: var(--color-bg-subtle, #f3f4f6); }
.pw-modal__acoes-menu button:disabled { opacity: .5; cursor: default; }

.pw-modal__acoes-sep { height: 1px; margin: 4px 6px; background: var(--color-border, #e5e7eb); }

/* Apagar fica separado e em vermelho: e' a unica accao dali que nao se desfaz. */
.pw-modal__acoes-perigo { color: var(--color-danger, #dc2626) !important; }
.pw-modal__acoes-perigo:hover { background: #fee2e2 !important; }


/* ── O aviso de que o navegador preencheu a busca sozinho ───────────────────
   O Chrome nao avisa por evento quando preenche um campo na abertura da pagina:
   o campo simplesmente ja' nasce escrito. O unico sinal que ele da' e' o
   pseudo-estado `:-webkit-autofill` — e uma animacao declarada nele DISPARA um
   `animationstart` de verdade.

   Esta animacao nao anima nada. Ela existe para ser ouvida pelo `pw-busca.js`,
   que apaga o valor e impede a busca de rodar com o e-mail de acesso dentro. */
@keyframes pwAutofillDetectado { from { outline-color: transparent } to { outline-color: transparent } }

input.pw-search__input:-webkit-autofill,
input[type="search"]:-webkit-autofill,
input[data-busca]:-webkit-autofill {
    animation-name: pwAutofillDetectado;
    animation-duration: .001s;
}


/* ── O toaster ──────────────────────────────────────────────────────────────
   Um so' desenho, tres tons — e o tom muda o COMPORTAMENTO, nao so' a cor:
   neutro e bom somem sozinhos, ruim espera o "x". Ver a biblioteca. */
.pw-toasters {
    position: fixed; right: 20px; bottom: 20px; z-index: 99999;
    display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
    /* A pilha nao pega clique; cada cartao pega o seu. Sem isto, a coluna
       invisivel cobriria o canto da tela inteiro. */
    pointer-events: none;
}

.pw-toaster {
    pointer-events: auto;
    position: relative;
    overflow: hidden;                 /* a barra de vida segue o raio do cartão */
    display: flex; align-items: flex-start; gap: 11px;
    width: 348px; max-width: calc(100vw - 40px); box-sizing: border-box;
    padding: 13px 13px 13px 14px;
    border: 1px solid var(--color-border, #e2e8f0);
    /* A barra da esquerda e' o tom. Mesma gramatica dos cards do quadro: a cor
       na borda, e nao no fundo — fundo colorido brigaria com o texto. */
    border-left: 3px solid var(--tom, var(--color-primary, #4f46e5));
    border-radius: 12px;
    background: var(--color-bg-elevated, #fff);
    color: var(--color-text, #1e293b);
    /* SOMBRA EM DUAS CAMADAS: uma rasa que assenta o cartão na superfície e uma
       larga e fraca que o descola dela. Uma sombra só, forte, deixa o cartão
       com ar de adesivo colado na tela. */
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 12px 32px -8px rgba(15, 23, 42, .28);
    text-decoration: none;
    /* Entra deslizando E crescendo um triz: o crescimento é o que faz o cartão
       parecer chegar, e não apenas aparecer deslocado. */
    opacity: 0; transform: translateX(20px) scale(.97);
    transition: opacity .22s ease, transform .28s cubic-bezier(.22, 1, .36, 1);
}
.pw-toaster--dentro { opacity: 1; transform: translateX(0) scale(1); }

/* O tom num só lugar: a borda, o símbolo e a barra de vida bebem dele. */
.pw-toaster--neutro { --tom: var(--color-primary, #4f46e5); }
.pw-toaster--bom    { --tom: #16a34a; }
.pw-toaster--ruim   { --tom: #dc2626; }

/* ── O SÍMBOLO ──────────────────────────────────────────────────────────
   Numa roda do tom, bem clara: o desenho tem de se ler de relance, e um ícone
   solto no meio do texto some entre as letras. */
.pw-toaster__ico {
    flex: none; width: 30px; height: 30px; padding: 3px;
    box-sizing: border-box; border-radius: 50%;
    color: var(--tom);
    background: color-mix(in srgb, var(--tom) 11%, transparent);
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .pw-toaster__ico { background: var(--color-bg-subtle, #f1f5f9); }
}

.pw-toaster__ico--girando { animation: pw-toaster-gira 900ms linear infinite; }

@keyframes pw-toaster-gira { to { transform: rotate(360deg); } }

/* ── A BARRA DE VIDA ────────────────────────────────────────────────────
   Encolhe até zero no prazo do cartão. Fica no rodapé e é fina de propósito:
   é informação de canto de olho, não um elemento a mais para ler. */
.pw-toaster__vida {
    position: absolute; left: 0; bottom: 0; height: 2px;
    width: 100%; transform-origin: left center;
    background: var(--tom); opacity: .5;
    animation: pw-toaster-vida linear forwards;
}

@keyframes pw-toaster-vida { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.pw-toaster__corpo  { flex: 1; min-width: 0; }
.pw-toaster__titulo { margin: 0 0 2px; font-size: 13px; font-weight: 700; line-height: 1.35; }
.pw-toaster__texto  { margin: 0; font-size: 12px; line-height: 1.45; color: var(--color-text-muted, #64748b); }
.pw-toaster__link   { margin: 6px 0 0; font-size: 11px; font-weight: 700; color: var(--color-primary, #4f46e5); }

/* "Tentar novamente" e' um BOTAO, e nao um link decorado: ele nao leva a lugar
   nenhum, refaz o que falhou. */
.pw-toaster__acao {
    margin-top: 9px; padding: 5px 11px; cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--tom) 35%, transparent);
    border-radius: 7px;
    background: color-mix(in srgb, var(--tom) 8%, transparent);
    font: inherit; font-size: 11.5px; font-weight: 700; color: var(--tom);
    transition: background .15s ease, border-color .15s ease;
}
.pw-toaster__acao:hover {
    background: color-mix(in srgb, var(--tom) 15%, transparent);
    border-color: var(--tom);
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .pw-toaster__acao { border-color: var(--tom); background: none; }
}

.pw-toaster__fechar {
    flex: none; margin: -2px -2px 0 0; padding: 4px;
    border: 0; background: none; cursor: pointer; line-height: 0;
    color: var(--color-text-muted, #64748b); border-radius: 6px;
}
.pw-toaster__fechar:hover { background: var(--color-bg-subtle, #f1f5f9); color: var(--color-text, #1e293b); }

@media (prefers-reduced-motion: reduce) {
    .pw-toaster { transition: none; }
    /* O giro e a barra param; o aviso continua sendo aviso. Quem pediu menos
       movimento não pediu menos informação — só o símbolo deixa de rodar. */
    .pw-toaster__ico--girando { animation: none; }
    .pw-toaster__vida { animation: none; transform: scaleX(1); opacity: .25; }
}


/* ── O hub de Configuracoes ─────────────────────────────────────────────────
   O estilo vivia dentro da propria view, em `@push('styles')` — 380 linhas de
   CSS no meio do HTML. Aqui ele fica com o resto e pode ser reusado; e a view
   voltou a caber numa tela. */
.conf-hub { display: flex; flex-direction: column; gap: 30px; padding-bottom: 32px; }
.conf-hub__cabeca { margin-bottom: -6px; }

.conf-section__title {
    font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--color-text-muted); margin-bottom: 11px; padding-left: 2px;
}

/* `auto-fill` com minimo: em tela estreita vira uma coluna sozinho, sem media
   query — e o cartao nunca fica menor que o texto que carrega. */
.conf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 12px;
}

.conf-card {
    display: flex; align-items: flex-start; gap: 13px;
    padding: 15px 17px;
    background: var(--color-bg-elevated, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    text-decoration: none; color: var(--color-text);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.conf-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .07);
}

/* O icone herda a cor do tema, e nao uma por cartao. Eram quarenta cores
   escolhidas uma a uma: viravam um mosaico em que nada se destacava, e o
   contraste no tema escuro dependia da sorte de cada escolha. */
.conf-card__icon {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--color-primary-soft, #eef0fe);
    color: var(--color-primary);
}

.conf-card__txt   { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.conf-card__title { font-size: 13.5px; font-weight: 650; line-height: 1.3; }
.conf-card__desc  { font-size: 12px; color: var(--color-text-muted); line-height: 1.45; }

@media (prefers-reduced-motion: reduce) { .conf-card { transition: none; } }

/* ── Telefone (VoIP) — as quatro telas ─────────────────────────────────────
   O estilo estava inteiro em `style=` dentro do Blade, com cor em
   hexadecimal. Cor em hexadecimal na marcacao nao sabe do tema claro nem do
   escuro: o verde do "Atende" era o mesmo nos dois, e num deles ficava
   ilegivel. Aqui tudo passa pelas variaveis do tema. */
.voip-abas { display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.voip-abas .pw-btn { display:inline-flex; align-items:center; gap:6px; }

.voip-op__lista { display:flex; flex-direction:column; gap:10px; }
.voip-op {
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    padding:14px 16px; border-radius:10px;
    background:var(--color-bg-hover); border:1px solid var(--color-border);
}
.voip-op__quem { display:flex; align-items:center; gap:10px; cursor:pointer; flex:1; min-width:200px; }
.voip-op__marca { width:16px; height:16px; cursor:pointer; accent-color:var(--color-primary); }
.voip-op__foto { width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.voip-op__inicial {
    width:36px; height:36px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:var(--color-primary); color:var(--color-on-primary, #fff);
    font-weight:600; font-size:14px;
}
.voip-op__nome  { font-weight:500; font-size:14px; }
.voip-op__email { font-size:12px; }
.voip-op__acesso { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.voip-op__dado {
    display:flex; align-items:center; gap:6px;
    font-size:12px; font-family:var(--font-mono, monospace);
    padding:5px 10px; border-radius:6px;
    background:var(--color-bg); border:1px solid var(--color-border);
}
.voip-op__rotulo { color:var(--color-text-muted); }
.voip-op__icone {
    background:none; border:none; padding:0; cursor:pointer;
    color:var(--color-text-muted); display:flex; align-items:center;
}
.voip-op__icone:hover { color:var(--color-text); }
.voip-op__rodape { display:flex; justify-content:flex-end; gap:10px; }

/* ── Herança visível na árvore de departamentos ────────────────────────────
   A regra "quem responde pela diretoria alcança tudo abaixo" existia só num
   aviso em cinza no pé da lista: as filhas apareciam em branco e a tela
   mostrava o contrário do que o sistema fazia. Estes dois estados fazem a
   herança e a exceção terem forma. */
.pes-chk__nota {
    font-style: normal; font-size: 10px; font-weight: 600;
    padding: 1px 6px; border-radius: 999px; letter-spacing: .02em;
    background: var(--color-bg-hover); color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}
.pes-chk__nota--fora {
    color: var(--color-danger);
    border-color: color-mix(in srgb, var(--color-danger) 35%, transparent);
    background: color-mix(in srgb, var(--color-danger) 8%, transparent);
}
/* Herdado é marcado, mas com traço mais leve: vale, e não foi decidido aqui. */
.pes-chk--herda > span { color: var(--color-text-muted); }
.pes-chk--herda > input { opacity: .65; }
/* Fora do alcance fica riscado — a exceção precisa ser lida de relance. */
.pes-chk--fora > span { text-decoration: line-through; color: var(--color-text-muted); }

/* ── Busca do hub de Configurações ─────────────────────────────────────────
   O campo fica à direita do título, como em toda tela do sistema. Numa tela
   estreita ele desce para baixo do texto em vez de espremer as duas colunas. */
.conf-hub__linha { display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap; }
.conf-hub__linha > div:first-child { flex:1 1 320px; min-width:0; }
.conf-hub__busca { flex:0 0 auto; min-width:260px; margin-left:auto; padding-top:4px; }
.conf-hub__vazio { font-size:13px; color:var(--color-text-muted); padding:28px 2px; max-width:60ch; line-height:1.6; }
@media (max-width: 640px) { .conf-hub__busca { min-width:100%; margin-left:0; } }

/* ── A terceira opção de tema: "Sistema" ───────────────────────────────────
   A prévia é dividida na diagonal — metade clara, metade escura. Um quadro
   cinza não diria nada; a diagonal mostra que a escolha é "os dois, conforme
   o computador". */
.pw-theme-preview--sistema {
    background: linear-gradient(135deg, #F8F9FB 0 50%, #0F0F1A 50% 100%);
}
.pw-theme-preview--sistema .pw-theme-preview__sidebar { background: transparent; }
.pw-theme-preview--sistema .pw-theme-preview__main    { background: transparent; }

/* O marcador de selecionado saiu do `style=` inline repetido em cada botão. */
.pw-theme-option__marca {
    position: absolute; top: 6px; right: 6px;
    width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-primary); color: var(--color-on-primary, #fff);
}
.pw-theme-option { position: relative; }

/* O tocador do áudio da ligação. Discreto: ele é conferência, não protagonista. */
.voip-ouvir { height: 30px; max-width: 280px; margin-left: 10px; vertical-align: middle; }
.pes-col--exp { flex:0 0 150px; }
.exp-apagar { margin-top:10px; padding-top:10px; border-top:1px solid var(--color-border); }

/* ══════════════════════════════════════════════════════════════════════════
   AS COLUNAS DO FINANCEIRO — um vocabulario so' para todas as telas.

   Nasceram dentro de `finance/clientes/show.blade.php`, onde a padronizacao de
   colunas foi feita primeiro. Ficando la', cada tela nova do financeiro
   reinventava o tamanho da fonte e o alinhamento do numero — e duas listas do
   mesmo sistema pareciam de sistemas diferentes.

   Aqui elas valem para a lista de repasses, a de recebiveis, a de cobrancas e
   para o que vier. A tela do cliente continua definindo o que e' SEU (a arvore
   do extrato, os selos de status); o que e' vocabulario comum mora aqui.
   ══════════════════════════════════════════════════════════════════════════ */

/* Codigo/numero da transacao. Monospace para o olho achar a diferenca entre
   dois codigos parecidos sem soletrar caractere a caractere. */
.lc-cod { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
          color: var(--color-text-muted); white-space: nowrap; }

/* Conta de destino: informacao de rota, nao de situacao — por isso discreta. */
.lc-conta { font-size: 11px; font-weight: 600; white-space: nowrap; }
.lc-conta--banca   { color: #3b82f6; }
.lc-conta--cliente { color: #f59e0b; }

/* Dinheiro: `tabular-nums` alinha as casas decimais em coluna, que e' o que
   permite comparar valores de relance. Vale para data pelo mesmo motivo. */
.lc-valor { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lc-data  { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lc-nota  { font-size: 12px; color: var(--color-text-muted); }

/* "3/14" — a posicao da parcela, colada na natureza que ela qualifica. */
.lc-parcela { margin-left: 6px; font-size: 11px; font-weight: 600; padding: 1px 7px;
              border-radius: 999px; background: var(--color-bg-hover); color: var(--color-text);
              border: 1px solid var(--color-border);
              font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Filtro de mes do financeiro ─────────────────────────────────────────
   O campo e as setas formam UMA peca: separados por gap, a seta parece um
   botao solto ao lado de um campo, e nao o par "anterior / proximo" que ela e'. */
.ui-filtro-mes { display: inline-flex; align-items: center; gap: 2px; }
.ui-filtro-mes__campo { min-width: 150px; }
.ui-filtro-mes__seta {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 30px; border-radius: 7px;
    border: 1px solid var(--color-border); background: var(--color-bg);
    color: var(--color-text-muted); font-size: 15px; line-height: 1;
    text-decoration: none; flex: 0 0 auto;
}
.ui-filtro-mes__seta:hover { background: var(--color-bg-hover); color: var(--color-text); }

/* ── Faixa de totais do financeiro ───────────────────────────────────────
   O destaque e a tira dividem o mesmo cartao: o numero grande resume, os
   pequenos explicam. `auto` na segunda coluna deixa a tira ocupar so' o que
   precisa — esticada, os itens ficariam boiando longe uns dos outros. */
.ui-kpis {
    display: grid; grid-template-columns: 1fr auto; gap: 0;
    background: var(--color-bg-elevated); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); overflow: hidden; margin-bottom: 14px;
}
.ui-kpis__destaque { padding: 14px 20px; border-right: 1px solid var(--color-border); }
.ui-kpis__rotulo {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--color-text-muted); margin-bottom: 5px;
}
.ui-kpis__valor { font-size: 26px; font-weight: 800; letter-spacing: -.3px; line-height: 1;
                  font-variant-numeric: tabular-nums; }
.ui-kpis__apoio { font-size: 10px; color: var(--color-text-muted); margin-top: 4px; }

.ui-kpis__tira { display: flex; align-items: stretch; flex-wrap: wrap; overflow-x: auto; }
.ui-kpis__item {
    padding: 14px 18px; display: flex; flex-direction: column; justify-content: center;
    border-right: 1px solid var(--color-border);
}
.ui-kpis__item:last-child { border-right: 0; }
.ui-kpis__item-rotulo {
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; margin-bottom: 3px;
}
.ui-kpis__item-valor { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* No telefone o cartao vira coluna: lado a lado, o destaque ficaria com 40px. */
@media (max-width: 720px) {
    .ui-kpis { grid-template-columns: 1fr; }
    .ui-kpis__destaque { border-right: 0; border-bottom: 1px solid var(--color-border); }
}


/* ── Tooltip de campo (pw-tip) ──────────────────────────────────────────────
   Estava só no @push('styles') da tela do board, e a marcação é usada por
   card-modal, lead-modal e lead-pipeline-form — que aparecem em outras telas.
   Fora do board o "?" saía sem estilo e a caixa ficava visível solta. Componente
   do sistema mora no CSS do sistema.

   Abre por CLIQUE, não por hover: o texto precisa dar tempo de ser lido, e no
   toque não existe hover. O evento `open-tip` fecha os outros, senão a tela
   acumula caixas abertas. */
/* ── Field tooltip ───────────────────────────────── */
.pw-tip{position:relative;display:inline-flex;align-items:center}
.pw-tip__btn{width:14px;height:14px;border-radius:50%;background:#94a3b8;color:#fff;font-size:9px;font-weight:700;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;padding:0}
.pw-tip__btn:hover{background:#64748b}
.pw-tip__box{position:absolute;left:0;top:calc(100% + 5px);background:#1e293b;color:#f1f5f9;font-size:11px;line-height:1.5;padding:8px 10px;border-radius:6px;width:230px;z-index:200;box-shadow:0 4px 16px rgba(0,0,0,.25);font-weight:400}
.pw-tip__box::before{content:'';position:absolute;top:-4px;left:10px;width:8px;height:8px;background:#1e293b;transform:rotate(45deg)}
.pw-tip__box--right{right:0;left:auto}
.pw-tip__box--right::before{left:auto;right:10px}

/* ── COBRAR NA CONVERSA ────────────────────────────────────────────────────
   Reusa `.cn-drive__dir` e `.cn-drive__item` de propósito: são a mesma
   gramática — o que abre outro nível tem seta, o que age não tem. Repetir as
   regras aqui faria as duas folhas divergirem na primeira correção. */
.cn-drive__dir i, .cn-drive__item i {
    display: block; font-style: normal; font-size: 11px;
    color: var(--color-text-muted); margin-top: 2px;
}
.cn-drive__dir span, .cn-drive__item span { min-width: 0; }

/* A taxa desenhada SOB a receita que a gerou. Recuo e tom mais fraco: ela e'
   consequencia da linha de cima, e nao um movimento a parte que alguem precise
   conciliar. */
.cc-linha--filha { background: var(--color-bg-subtle); }
.cc-linha--filha td { padding-top: 4px; padding-bottom: 4px; border-top: 0; }
.cc-filha__traco { color: var(--color-text-muted); margin-right: 6px; font-size: 12px; }
.cc-filha__texto { font-size: 12px; color: var(--color-text-muted); }
.cc-filha__valor { font-size: 12px; color: #b45309; white-space: nowrap; }

/* ── AS TAXAS DO PROVEDOR, na configuracao ──────────────────────────────
   Dobrada por padrao: sao cinquenta campos, e quem entra ali para trocar a
   conta bancaria nao quer a tabela inteira na frente. */
.pg-taxas { margin: 4px 0 8px; border: 1px solid var(--color-border); border-radius: 10px; }
.pg-taxas > summary {
    cursor: pointer; padding: 10px 12px; font-size: 13px; font-weight: 600;
    color: var(--color-text); list-style: none;
}
.pg-taxas > summary::-webkit-details-marker { display: none; }
.pg-taxas > summary::before { content: '▸ '; color: var(--color-text-muted); }
.pg-taxas[open] > summary::before { content: '▾ '; }
.pg-taxas > summary small { font-weight: 400; color: var(--color-text-muted); margin-left: 6px; }
.pg-taxas > *:not(summary) { padding: 0 12px; }
.pg-taxas > *:last-child { padding-bottom: 12px; }

/* A tabela rola sozinha: cinco canais nao cabem numa tela estreita, e sem
   isto a PAGINA inteira passaria a rolar de lado. */
.pg-taxas__rolagem { overflow-x: auto; }
.pg-taxas__tabela { width: 100%; min-width: 620px; }
.pg-taxas__tabela td, .pg-taxas__tabela th { font-size: 12px; }
.pg-taxas__tabela td small { display: block; font-size: 10px; }
.pg-taxas__campo {
    width: 84px; text-align: right; padding: 5px 8px; font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* Os chips de filtro das solicitacoes: ligados sao solidos, desligados sao
   contorno — a diferenca precisa ser legivel de relance, porque e' ela que
   explica por que a lista esta' do tamanho que esta'. */
.solic-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.solic-chip {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    padding: 4px 10px; border-radius: 20px; font: inherit; font-size: 11.5px;
    font-weight: 600; color: var(--color-text-muted);
    background: transparent; border: 1px solid var(--color-border);
}
.solic-chip:hover { background: var(--color-bg-hover); }
.solic-chip--on {
    background: var(--color-primary-light); border-color: var(--color-primary);
    color: var(--color-primary-hover);
}
.solic-chip em {
    font-style: normal; font-size: 10px; font-weight: 700; padding: 0 5px;
    border-radius: 8px; background: rgba(0,0,0,.07);
}

/* A LISTA DA COBRANCA respira mais que a do Drive, de proposito.
   La' os itens sao arquivos de uma pasta — muitos, e a densidade ajuda a
   varrer. Aqui sao decisoes de dinheiro, tres ou quatro por tela, e cada
   linha tem duas alturas de texto: com 3px de folga elas encostam e o
   subtitulo de uma parece o titulo da seguinte. O respiro vem do `gap` do
   container, e nao do `margin` do item, para nao somar com o do Drive. */
.cn-cob__lista { display: flex; flex-direction: column; gap: 7px; }
.cn-cob__lista > .cn-drive__dir,
.cn-cob__lista > .cn-drive__item { margin-bottom: 0; padding: 11px 12px; }
.cn-cob__lista > .cn-drive__voltar { align-self: flex-start; margin-bottom: 4px; }

/* "em breve" no menu do cifrao: diz que a opcao vem, sem parecer quebrada. */
.cn-cob__breve {
    display: inline-block; margin-left: 6px; padding: 1px 6px;
    border-radius: 5px; background: var(--color-bg-hover);
    border: 1px solid var(--color-border);
    font-style: normal; font-size: 10px; font-weight: 600;
    color: var(--color-text-muted); vertical-align: middle;
}

/* O caminho do agrupamento fica ABAIXO da lista e com outra forma: ele nao e'
   mais um lancamento para escolher, e' outra maneira de escolher. */
.cn-cob__juntar {
    width: 100%; margin-top: 3px; padding: 10px; cursor: pointer;
    background: transparent; border: 1px dashed var(--color-border);
    border-radius: 9px; font: inherit; font-size: 12.5px; font-weight: 600;
    color: var(--color-primary);
}
.cn-cob__juntar:hover { background: var(--color-bg-hover); }

/* A linha do contrato: alias em cima, data e pendencias embaixo, valor a'
   direita. O `b` precisa ser bloco — o `.cn-drive__dir` e' flex, e sem isto o
   alias e o subtitulo ficariam lado a lado. */
.cn-drive__dir span b { display: block; font-size: 13px; font-weight: 600; }
.cn-cob__cifra {
    flex: 0 0 auto; margin-left: auto; padding-left: 10px;
    font-style: normal; font-size: 13.5px; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* A seta do `::after` vem depois do valor: sem zerar a margem automatica dela,
   as duas disputam o espaco e o valor cola no chevron. */
.cn-cob__cifra + *, .cn-drive__dir:has(.cn-cob__cifra)::after { margin-left: 6px; }

/* O rodape da folha do recibo: o aviso a' esquerda empurra os botoes. */
.cn-cob__pe {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px; border-top: 1px solid var(--color-border);
}
.cn-cob__pe span {
    flex: 1; min-width: 0; font-size: 11.5px; color: var(--color-text-muted);
    line-height: 1.4;
}

.cn-cob__check {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    padding: 11px 12px; border-radius: 9px;
    background: var(--color-bg); border: 1px solid var(--color-border);
}
.cn-cob__check:hover { background: var(--color-bg-hover); }
.cn-cob__check--on { border-color: var(--color-primary); background: var(--color-primary-light); }
.cn-cob__check input { flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--color-primary); }
.cn-cob__check span { flex: 1; min-width: 0; }
.cn-cob__check b { display: block; font-size: 13px; font-weight: 500; }
.cn-cob__check i {
    display: block; font-style: normal; font-size: 11px;
    color: var(--color-text-muted); margin-top: 2px;
}
.cn-cob__check em {
    flex: 0 0 auto; font-style: normal; font-size: 13.5px; font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Item que ja' esta' num recibo vivo: continua a' vista, e nao clicavel.
   Some-lo faria o operador procurar uma parcela que ele sabe que existe. */
.cn-cob__check--travado { opacity: .55; cursor: default; }
.cn-cob__check--travado:hover { background: var(--color-bg); }

/* O selo de "pago" na linha do recibo. */
.cn-cob__selo {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 5px;
    background: #dcfce7; color: #166534;
    font-style: normal; font-size: 10px; font-weight: 600; vertical-align: middle;
}

.cn-cob__total {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-top: 4px; padding: 11px 12px; border-radius: 9px;
    background: var(--color-bg-hover);
}
.cn-cob__total span { font-size: 12px; color: var(--color-text-muted); }
.cn-cob__total b { font-size: 17px; font-variant-numeric: tabular-nums; }

/* O que esta' sendo cobrado, na tela da forma: confere-se antes de gerar. */
.cn-cob__itens {
    display: flex; flex-direction: column; gap: 4px;
    padding: 10px 12px; border-radius: 9px; background: var(--color-bg-hover);
}
.cn-cob__itens p {
    margin: 0; display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; font-size: 12.5px;
}
.cn-cob__itens em {
    font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}

.cn-cob__atual {
    display: inline-block !important; margin-left: 6px; padding: 1px 6px;
    border-radius: 5px; background: #fef3c7; color: #92400e;
    font-size: 10px; font-weight: 600;
}

.cn-cob__forma { display: flex; flex-direction: column; gap: 11px; }

.cn-cob__resumo {
    margin: 0; display: flex; align-items: baseline; gap: 8px;
    padding: 10px 12px; border-radius: 9px; background: var(--color-bg-hover);
}
.cn-cob__resumo b { font-size: 17px; font-variant-numeric: tabular-nums; }
.cn-cob__resumo span { font-size: 12px; color: var(--color-text-muted); }

.cn-cob__formas { display: flex; gap: 7px; flex-wrap: wrap; }
.cn-cob__opcao {
    flex: 1; min-width: 92px; padding: 9px 10px; cursor: pointer;
    border: 1px solid var(--color-border); border-radius: 9px;
    background: var(--color-bg-elevated); font: inherit; font-size: 12.5px;
    font-weight: 600; color: var(--color-text);
}
.cn-cob__opcao--on {
    border-color: var(--color-primary); background: var(--color-primary-light);
    color: var(--color-primary-hover);
}
/* As formas que ainda não existem ficam à vista, apagadas: dizem que virão, e
   evitam a pergunta "só tem PIX?". */
.cn-cob__opcao:disabled { opacity: .5; cursor: default; }
.cn-cob__opcao i {
    display: block; font-style: normal; font-size: 10px; font-weight: 400;
    color: var(--color-text-muted);
}

.cn-cob__rot { font-size: 11.5px; color: var(--color-text-muted); margin: 2px 0 -6px; }
/* A LISTA DE GATEWAYS: uma linha por conta, com a bolinha de escolha. Linhas,
   e não pastilhas lado a lado, porque o nome é longo ("Mercado Pago ·
   Escritório") e quebraria em duas numa pastilha estreita. */
.cn-cob__contas { display: flex; flex-direction: column; gap: 6px; }
/* O bloco que só existe com gateway (prazo e taxa) conserva o espaçamento da
   folha, em vez de colar os filhos um no outro. */
.cn-cob__comgateway { display: flex; flex-direction: column; gap: 12px; }
/* Os dois grupos recolhidos (gateways, contas): o cabeçalho diz o que está
   escolhido, e a lista abre por baixo. */
.cn-cob__grupos { display: flex; flex-direction: column; gap: 6px; }
.cn-cob__grupo { border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg-elevated); overflow: hidden; }
.cn-cob__grupo--escolhido { border-color: var(--color-primary); }
.cn-cob__grupo-cab { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 11px; text-align: left;
    background: none; border: 0; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--color-text); }
.cn-cob__grupo-cab > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cn-cob__grupo-cab i { font-style: normal; font-size: 11px; color: var(--color-text-muted); }
.cn-cob__grupo-cab em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--color-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-cob__grupo-cab svg { color: var(--color-text-muted); transition: transform .15s; flex-shrink: 0; }
.cn-cob__grupo .cn-cob__contas { padding: 0 8px 8px; }
.cn-cob__conta:disabled { opacity: .55; cursor: default; }
.cn-cob__conta-nome small { display: block; font-size: 11px; font-weight: 400; color: var(--color-text-muted); }
.cn-cob__conta {
    display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
    padding: 9px 11px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600;
    border: 1px solid var(--color-border); border-radius: 9px;
    background: var(--color-bg-elevated); color: var(--color-text);
}
.cn-cob__conta--on { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary-hover); }
.cn-cob__conta:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.cn-cob__radio {
    width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%;
    border: 1.5px solid var(--color-border-strong, var(--color-text-muted)); background: var(--color-bg-elevated);
}
.cn-cob__conta--on .cn-cob__radio { border-color: var(--color-primary); box-shadow: inset 0 0 0 3px var(--color-bg-elevated); background: var(--color-primary); }
.cn-cob__conta-nome { flex: 1; min-width: 0; }
.cn-cob__padrao {
    flex-shrink: 0; font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 99px;
    background: var(--color-bg-hover, #eef1f5); color: var(--color-text-muted);
}
.cn-cob__valor { display: flex; align-items: center; gap: 8px; }
.cn-cob__valor span { font-size: 14px; font-weight: 600; color: var(--color-text-muted); }
.cn-cob__valor input {
    flex: 1; padding: 9px 11px; border: 1px solid var(--color-border); border-radius: 9px;
    background: var(--color-bg-elevated); color: var(--color-text);
    font: inherit; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.cn-cob__prazo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cn-cob__prazo select {
    padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 8px;
    background: var(--color-bg-elevated); color: var(--color-text); font: inherit; font-size: 13px;
}
.cn-cob__nota { margin: 0; font-size: 11.5px; color: var(--color-text-muted); line-height: 1.45; }

/* A TAXA ADMINISTRATIVA — caixa de marcar com o valor do lado.
   Alvo grande de propósito: é uma decisão sobre dinheiro, e uma caixa de 13px
   ao lado de um texto clicável é o tipo de controle que se marca sem querer. */
.cn-cob__taxa {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-subtle);
  cursor: pointer;
  font-size: 12.5px;
  line-height: 1.4;
}
.cn-cob__taxa input { margin-top: 1px; width: 15px; height: 15px; flex: none; cursor: pointer; }
.cn-cob__taxa span  { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cn-cob__taxa em    { font-style: normal; font-weight: 600; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.cn-cob__taxa:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft, var(--color-bg-subtle)); }
.cn-cob__taxa:has(input:checked) em { color: var(--color-primary); }
.cn-cob__erro {
    margin: 0; padding: 9px 11px; border-radius: 9px; font-size: 12.5px;
    background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b;
}
.cn-cob__enviar { width: 100%; justify-content: center; }

/* ── A BARRA DE PROGRESSO DA NAVEGACAO ────────────────────────────────────────
 *
 * O padrao do Turbo sao tres pixels de azul fixo (#0076ff) — fino demais para
 * ser notado, e de uma cor que nao e' a da casa. Clicar num link e nao ver nada
 * acontecer faz clicar de novo.
 *
 * Quatro pixels, a cor primaria e um brilho na ponta: ela passa a ser vista
 * pelo canto do olho, que e' tudo o que uma barra de progresso precisa fazer.
 * O aviso em cartao (ver `pw-turbo.js`) cobre a navegacao que demora; esta
 * barra cobre o instante do clique.
 */
.turbo-progress-bar {
    height: 4px;
    background: linear-gradient(90deg,
        var(--color-primary, #6366f1) 0%,
        var(--color-primary-hover, #4f46e5) 60%,
        var(--color-primary, #6366f1) 100%);
    box-shadow: 0 0 10px rgba(99, 102, 241, .65);
}

/* ── Seletor de pessoa (x-ui.seletor-pessoa) ──────────────────────────────── */
.ui-seletor-pessoa { position: relative; min-width: 0; }
.ui-seletor-pessoa__novo {
    margin-top: 8px; padding: 10px; display: flex; flex-direction: column; gap: 8px;
    border: 1px solid var(--color-border); border-radius: var(--radius-md, 10px);
    background: var(--color-bg-elevated);
}
.ui-seletor-pessoa__rotulo { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--color-text-muted); }
.ui-seletor-pessoa__acoes { display: flex; gap: 6px; }