/* ============================================================================
   CRM + Projetos (Relacionamento) — estilos da view
   Namespacing: tudo prefixado com .rel-* e escopado sob #crm-view / #projetos-view
   para não colidir com o styles.css global. Cores herdam os tokens de tema do
   app (--bg-*, --text-*, --accent-color) e adaptam dark/light automaticamente.

   Paleta semântica: a lima (--accent-color) é a única cor vibrante; estados
   usam tons terrosos dessaturados (argila/areia/ardósia/malva) que recuam no
   fundo escuro. Definidos como vars locais ao escopo abaixo.
   ============================================================================ */

#crm-view, #projetos-view {
    /* Semânticos terrosos — baixa saturação, só a lima destaca */
    --rel-accent: var(--accent-color, #E5F75A);
    --rel-accent-2: var(--accent-dark, #C5E83C);
    --rel-accent-dim: rgba(229, 247, 90, .12);
    --rel-pos: #C5E83C;   --rel-pos-bg: rgba(197, 232, 60, .10);   /* positivo / ganho / no prazo */
    --rel-slate: #8298AD; --rel-slate-bg: rgba(130, 152, 173, .12);/* info / em andamento */
    --rel-sand: #C2A669;  --rel-sand-bg: rgba(194, 166, 105, .12); /* atenção / revisão */
    --rel-clay: #C07B6E;  --rel-clay-bg: rgba(192, 123, 110, .12); /* risco / atrasado */
    --rel-dusty: #A594AC; --rel-dusty-bg: rgba(165, 148, 172, .12);/* revisão */
    --rel-neutral: #8A8A8A; --rel-neutral-bg: rgba(138, 138, 138, .10);

    --rel-card: var(--bg-card, #1c1c1c);
    --rel-elev: var(--bg-highlight, #2a2a2a);
    --rel-border: var(--border-color, #2e2e2e);
    --rel-ink: var(--text-primary, #fff);
    --rel-muted: var(--text-secondary, #9a9a9a);
    --rel-dim: var(--text-tertiary, #6a6a6a);
    --rel-r-sm: var(--radius-sm, .75rem);
    --rel-r-md: var(--radius-md, 1.1rem);
}

/* ---------- Header da view ---------- */
.rel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.rel-head h2 { font-size: 1.35rem; letter-spacing: -.02em; display: flex; align-items: center; gap: .55rem; margin: 0; color: var(--rel-ink); }
.rel-head .rel-tenant { font-size: .72rem; color: var(--rel-dim); border: 1px solid var(--rel-border); padding: .2rem .55rem; border-radius: 99px; }
.rel-head-actions { display: flex; align-items: center; gap: .6rem; }

.rel-btn { border: none; border-radius: .7rem; padding: .55rem .95rem; font-size: .85rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; transition: .15s; }
.rel-btn-primary { background: var(--rel-accent); color: #000; }
.rel-btn-primary:hover { filter: brightness(1.08); }
.rel-btn-ghost { background: var(--rel-card); color: var(--rel-ink); border: 1px solid var(--rel-border); }
.rel-btn-ghost:hover { background: var(--rel-elev); }

/* ---------- Toggle de visão (seg) ---------- */
.rel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.rel-seg { display: inline-flex; background: var(--rel-card); border: 1px solid var(--rel-border); border-radius: .8rem; padding: .25rem; }
.rel-seg button { border: none; background: none; color: var(--rel-muted); font-size: .85rem; font-weight: 600; padding: .45rem .9rem; border-radius: .6rem; cursor: pointer; display: flex; align-items: center; gap: .4rem; transition: .15s; }
.rel-seg button.active { background: var(--rel-accent-dim); color: var(--rel-accent-2); }
.rel-toolbar .rel-filters { display: flex; align-items: center; gap: .6rem; }
.rel-chip { font-size: .75rem; color: var(--rel-muted); background: var(--rel-card); border: 1px solid var(--rel-border); padding: .35rem .7rem; border-radius: 99px; display: inline-flex; gap: .4rem; align-items: center; }

/* ---------- KPIs ---------- */
.rel-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; margin-bottom: 1.2rem; }
.rel-kpi { background: var(--rel-card); border: 1px solid var(--rel-border); border-radius: var(--rel-r-md); padding: 1rem 1.1rem; }
.rel-kpi .rel-lbl { font-size: .72rem; color: var(--rel-dim); text-transform: uppercase; letter-spacing: .06em; }
.rel-kpi .rel-val { font-size: 1.5rem; font-weight: 700; margin-top: .35rem; letter-spacing: -.02em; color: var(--rel-ink); }
.rel-kpi .rel-delta { font-size: .74rem; margin-top: .25rem; color: var(--rel-muted); }

/* ---------- Kanban ---------- */
.rel-board { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .5rem; align-items: flex-start; }
/* Coluna theme-aware: escura no dark, clara no light. Cards brancos saltam nos dois. */
.rel-col { flex: 0 0 286px; background: #1A1A1D; border: 1px solid var(--rel-border); border-radius: var(--rel-r-md); padding: .8rem; display: flex; flex-direction: column; gap: .7rem; min-height: 160px; }
[data-theme="light"] .rel-col { background: #E4E4E4; }
.rel-col-head { display: flex; align-items: center; justify-content: space-between; padding: .1rem .2rem; }
/* texto do cabeçalho: claro no dark, escuro no light (legível em cada coluna) */
.rel-col-head .rel-t { display: flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600; color: #FAFAFA; }
[data-theme="light"] .rel-col-head .rel-t { color: #1a1a1a; }
.rel-col-head .rel-sum { font-size: .72rem; color: #8a8a8e; }
[data-theme="light"] .rel-col-head .rel-sum { color: #555; }
.rel-count { font-size: .7rem; color: var(--rel-muted); background: var(--rel-elev); padding: .1rem .45rem; border-radius: 99px; }

.rel-card { background: var(--rel-card); border: 1px solid var(--rel-border); border-radius: var(--rel-r-sm); padding: .8rem; cursor: pointer; transition: .15s; display: flex; flex-direction: column; gap: .55rem; }
.rel-card:hover { border-color: #555; transform: translateY(-2px); }
.rel-card.rel-drag-over { border-color: var(--rel-accent); }
.rel-card .rel-co { font-weight: 600; font-size: .88rem; letter-spacing: -.01em; color: var(--rel-ink); }
.rel-card .rel-money { color: var(--rel-accent-2); font-weight: 700; font-size: .95rem; }
.rel-card .rel-meta { font-size: .74rem; color: var(--rel-dim); }
.rel-card .rel-foot { display: flex; align-items: center; justify-content: space-between; }
.rel-card .rel-stageage { font-size: .68rem; color: var(--rel-dim); display: flex; align-items: center; gap: .3rem; }
.rel-card .rel-stageage i { opacity: .8; }
.rel-card .rel-lastnote { font-size: .68rem; color: var(--rel-dim); display: flex; align-items: center; gap: .3rem; border-top: 1px dashed var(--rel-border); padding-top: .45rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel-card .rel-lastnote i { opacity: .8; flex-shrink: 0; }
.rel-tag { font-size: .68rem; padding: .12rem .5rem; border-radius: 99px; font-weight: 600; align-self: flex-start; }
.rel-prio { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.rel-check { font-size: .7rem; color: var(--rel-dim); display: flex; align-items: center; gap: .3rem; }
.rel-due { font-size: .7rem; color: var(--rel-dim); display: inline-flex; align-items: center; gap: .3rem; }
.rel-due.rel-late { color: var(--rel-clay); }

.rel-av { width: 22px; height: 22px; border-radius: 50%; background: var(--rel-elev); display: grid; place-items: center; font-size: .62rem; color: var(--rel-muted); border: 1px solid var(--rel-border); }
.rel-avs { display: flex; }
.rel-avs .rel-av:not(:first-child) { margin-left: -7px; }

/* ============================================================================
   Board CLARO (estilo Trello) — cards brancos, texto escuro, sombra sutil.
   Vale p/ CRM e Projetos (compartilham .rel-board). Valores fixos de propósito:
   é um board deliberadamente claro, independente do tema dark/light do app.
   ============================================================================ */
.rel-col-head .rel-count { background: rgba(255,255,255,.10); color: #cfcfd2; }
[data-theme="light"] .rel-col-head .rel-count { background: #fff; color: #44546F; }
.rel-board .rel-card {
    background: #FFFFFF;
    border-color: rgba(9, 30, 66, .04);
    box-shadow: 0 1px 1px rgba(9, 30, 66, .25), 0 0 1px rgba(9, 30, 66, .12);
}
.rel-board .rel-card:hover {
    background: #FFFFFF;
    border-color: rgba(9, 30, 66, .10);
    box-shadow: 0 4px 8px rgba(9, 30, 66, .18);
    transform: translateY(-1px);
}
.rel-board .rel-card .rel-co { color: #172B4D; }
.rel-board .rel-card .rel-money { color: #5C7A0E; }
.rel-board .rel-card .rel-meta,
.rel-board .rel-card .rel-stageage,
.rel-board .rel-card .rel-check,
.rel-board .rel-card .rel-due { color: #5E6C84; }
.rel-board .rel-card .rel-due.rel-late { color: #C9372C; }
.rel-board .rel-card .rel-lastnote { color: #5E6C84; border-top-color: #EBECF0; }
.rel-board .rel-card .rel-tag { background: #EBECF0; color: #44546F; }
.rel-board .rel-card .rel-av { background: #DFE1E6; color: #44546F; border-color: transparent; }

/* ---------- Tabela (lista) ---------- */
.rel-table-wrap { background: var(--rel-card); border: 1px solid var(--rel-border); border-radius: var(--rel-r-md); overflow: hidden; overflow-x: auto; }
.rel-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.rel-table thead th { text-align: left; padding: .85rem 1rem; color: var(--rel-dim); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--rel-border); font-weight: 600; white-space: nowrap; }
.rel-table tbody td { padding: .8rem 1rem; border-bottom: 1px solid var(--rel-border); color: var(--rel-ink); }
.rel-table tbody tr { cursor: pointer; transition: .12s; }
.rel-table tbody tr:hover { background: var(--rel-elev); }
.rel-table tbody tr:last-child td { border-bottom: none; }
.rel-stage { font-size: .72rem; font-weight: 600; padding: .2rem .55rem; border-radius: 99px; white-space: nowrap; }

/* ---------- Cards de cliente / projeto ---------- */
.rel-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1rem; }
.rel-clientcard { background: var(--rel-card); border: 1px solid var(--rel-border); border-radius: var(--rel-r-md); padding: 1.1rem; cursor: pointer; transition: .15s; display: flex; flex-direction: column; gap: .8rem; }
.rel-clientcard:hover { border-color: #555; transform: translateY(-2px); }
.rel-clientcard .rel-cc-top { display: flex; align-items: center; gap: .7rem; }
.rel-logo { width: 42px; height: 42px; border-radius: .7rem; background: var(--rel-accent-dim); color: var(--rel-accent-2); display: grid; place-items: center; font-weight: 700; flex-shrink: 0; }
.rel-clientcard .rel-name { font-weight: 600; color: var(--rel-ink); }
.rel-clientcard .rel-sub { font-size: .76rem; color: var(--rel-dim); }
.rel-clientcard .rel-stats { display: flex; gap: 1.2rem; font-size: .76rem; color: var(--rel-muted); }
.rel-clientcard .rel-stats b { display: block; color: var(--rel-ink); font-size: .95rem; }
.rel-health { font-size: .68rem; font-weight: 600; padding: .18rem .55rem; border-radius: 99px; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.rel-progress { height: 6px; border-radius: 6px; background: var(--rel-elev); overflow: hidden; }
.rel-progress > i { display: block; height: 100%; border-radius: 6px; }
.rel-pf { display: flex; align-items: center; justify-content: space-between; font-size: .74rem; color: var(--rel-dim); }
.rel-next { font-size: .76rem; color: var(--rel-dim); border-top: 1px solid var(--rel-border); padding-top: .6rem; }
.rel-next b { color: var(--rel-ink); font-weight: 500; }

/* ---------- Cronograma (gantt-lite) ---------- */
.rel-gantt { background: var(--rel-card); border: 1px solid var(--rel-border); border-radius: var(--rel-r-md); padding: 1.2rem 1.4rem; overflow-x: auto; }
.rel-gantt-head { display: grid; grid-template-columns: 180px repeat(6, 1fr); font-size: .7rem; color: var(--rel-dim); text-transform: uppercase; letter-spacing: .05em; padding-bottom: .7rem; border-bottom: 1px solid var(--rel-border); min-width: 640px; }
.rel-gantt-row { display: grid; grid-template-columns: 180px 1fr; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--rel-border); min-width: 640px; }
.rel-gantt-row:last-child { border-bottom: none; }
.rel-gname { font-size: .84rem; font-weight: 600; color: var(--rel-ink); }
.rel-gname small { display: block; font-weight: 400; color: var(--rel-dim); font-size: .72rem; }
.rel-gtrack { position: relative; height: 26px; }
.rel-gbar { position: absolute; height: 26px; border-radius: 7px; display: flex; align-items: center; padding: 0 .6rem; font-size: .72rem; font-weight: 600; color: #000; white-space: nowrap; overflow: hidden; }
.rel-today { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--rel-accent); opacity: .6; }

/* ---------- Estado vazio ---------- */
.rel-empty { text-align: center; padding: 3rem 1rem; color: var(--rel-dim); }
/* `> i` (filho direto) p/ não afetar o ícone do botão aninhado no estado vazio */
.rel-empty > i { font-size: 3rem; opacity: .3; display: block; margin-bottom: .6rem; }
.rel-col-empty { font-size: .78rem; color: var(--rel-dim); text-align: center; padding: 1rem 0; }

/* ---------- Slide-over (painel de detalhe) — anexado ao body ---------- */
.rel-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: .25s; z-index: 1090; }
.rel-overlay.open { opacity: 1; visibility: visible; }
.rel-panel { position: fixed; top: 0; right: 0; height: 100vh; width: min(94vw, 460px); background: var(--bg-secondary, #161616); border-left: 1px solid var(--border-color, #2e2e2e); box-shadow: 0 10px 40px rgba(0, 0, 0, .5); z-index: 1100; transform: translateX(100%); transition: transform .3s cubic-bezier(.4, 0, .2, 1); display: flex; flex-direction: column; --rel-accent: var(--accent-color, #E5F75A); --rel-accent-2: var(--accent-dark, #C5E83C); --rel-ink: var(--text-primary, #fff); --rel-muted: var(--text-secondary, #9a9a9a); --rel-dim: var(--text-tertiary, #6a6a6a); --rel-border: var(--border-color, #2e2e2e); --rel-card: var(--bg-card, #1c1c1c); }
.rel-panel.open { transform: translateX(0); }
.rel-panel-head { padding: 1.3rem 1.4rem; border-bottom: 1px solid var(--rel-border); }
.rel-panel-head .rel-ph-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.rel-panel-head .rel-ph-title { font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; color: var(--rel-ink); }
.rel-panel-head .rel-ph-sub { color: var(--rel-dim); font-size: .8rem; margin-top: .2rem; }
.rel-x { background: var(--rel-card); border: 1px solid var(--rel-border); color: var(--rel-muted); width: 32px; height: 32px; border-radius: .6rem; cursor: pointer; font-size: 1rem; flex-shrink: 0; }
.rel-x:hover { background: var(--bg-highlight, #2a2a2a); color: var(--rel-ink); }
.rel-ph-deal { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; }
.rel-ph-deal .rel-v { font-size: 1.5rem; font-weight: 700; color: var(--rel-accent-2); }
.rel-stage-select { margin-left: auto; background: var(--rel-card); color: var(--rel-ink); border: 1px solid var(--rel-border); border-radius: .6rem; padding: .4rem .6rem; font-size: .8rem; }
.rel-linkpill { display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; color: var(--rel-slate, #8298AD); background: rgba(130, 152, 173, .12); padding: .3rem .6rem; border-radius: 99px; margin-top: .6rem; }

.rel-panel-body { flex: 1; overflow-y: auto; padding: 1.2rem 1.4rem; display: flex; flex-direction: column; gap: 1.4rem; }
.rel-field { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; padding: .55rem 0; border-bottom: 1px dashed var(--rel-border); }
.rel-field .rel-k { color: var(--rel-dim); }
.rel-field .rel-fv { text-align: right; color: var(--rel-ink); }
.rel-sec-t { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--rel-dim); display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.rel-sec-t::after { content: ""; flex: 1; height: 1px; background: var(--rel-border); }

.rel-checklist { display: flex; flex-direction: column; gap: .5rem; }
.rel-ck { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--rel-ink); cursor: pointer; }
.rel-ck .rel-box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--rel-border); display: grid; place-items: center; font-size: .7rem; flex-shrink: 0; color: transparent; }
.rel-ck.done .rel-box { background: var(--rel-accent); border-color: var(--rel-accent); color: #000; }
.rel-ck.done span { color: var(--rel-dim); text-decoration: line-through; }

.rel-timeline { display: flex; flex-direction: column; gap: 0; position: relative; padding-left: 1.3rem; }
.rel-timeline::before { content: ""; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 2px; background: var(--rel-border); }
.rel-tl { position: relative; padding: .1rem 0 1.1rem; }
.rel-tl::before { content: ""; position: absolute; left: -1.3rem; top: .25rem; width: 12px; height: 12px; border-radius: 50%; background: var(--bg-secondary, #161616); border: 2px solid var(--rel-accent); }
.rel-tl.muted::before { border-color: var(--rel-dim); }
.rel-tl .rel-when { font-size: .7rem; color: var(--rel-dim); }
.rel-tl .rel-what { font-size: .85rem; margin-top: .15rem; color: var(--rel-ink); }
.rel-tl .rel-who { font-size: .74rem; color: var(--rel-muted); }
.rel-note-del { background: none; border: none; color: var(--rel-dim); cursor: pointer; font-size: .72rem; margin-left: .4rem; padding: 0 .15rem; opacity: .55; line-height: 1; }
.rel-note-del:hover { color: var(--rel-clay); opacity: 1; }
.rel-empty-mini { font-size: .82rem; color: var(--rel-dim); }

.rel-compose { display: flex; gap: .5rem; margin-top: .4rem; }
.rel-compose input { flex: 1; background: var(--rel-card); border: 1px solid var(--rel-border); border-radius: .6rem; padding: .55rem .8rem; color: var(--rel-ink); font-size: .82rem; outline: none; }
.rel-compose input:focus { border-color: var(--rel-accent); }
/* compose de interação — caixa grande estilo card (data + botão "+" dentro) */
.rel-compose-note { margin-top: .5rem; background: var(--rel-card); border: 1px solid var(--rel-border); border-radius: 1rem; padding: .8rem; display: flex; flex-direction: column; gap: .7rem; }
.rel-compose-note textarea { width: 100%; min-height: 92px; resize: vertical; background: transparent; border: none; outline: none; color: var(--rel-ink); font-family: inherit; font-size: .85rem; line-height: 1.45; }
.rel-compose-note textarea::placeholder { color: var(--rel-dim); }
.rel-note-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.rel-note-foot [data-note-date] { background: var(--rel-elev); border: 1px solid var(--rel-border); border-radius: 99px; padding: .4rem .8rem; color: var(--rel-muted); font-size: .78rem; outline: none; color-scheme: dark; }
.rel-note-add { width: 46px; height: 34px; border: none; border-radius: 99px; background: var(--rel-accent); color: #000; cursor: pointer; display: grid; place-items: center; font-size: 1.15rem; transition: .15s; flex-shrink: 0; }
.rel-note-add:hover { filter: brightness(1.08); }

/* Autocomplete (sugestões em card) — Nome, Responsável */
.rel-ac { position: relative; }
.rel-ac-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin-top: 4px; background: var(--rel-card); border: 1px solid var(--rel-border); border-radius: .6rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); max-height: 210px; overflow-y: auto; padding: .25rem; }
.rel-ac-menu[hidden] { display: none; }
.rel-ac-item { padding: .5rem .6rem; font-size: .84rem; color: var(--rel-ink); cursor: pointer; border-radius: .45rem; }
.rel-ac-item:hover { background: var(--rel-elev); }

.rel-panel-foot { padding: 1rem 1.4rem; border-top: 1px solid var(--rel-border); display: flex; gap: .6rem; }
.rel-panel-foot .rel-btn { flex: 1; justify-content: center; }

/* ---------- Modal de formulário (novo/editar) ---------- */
.rel-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); backdrop-filter: blur(2px); display: none; align-items: center; justify-content: center; z-index: 1110; padding: 1rem; }
.rel-modal-overlay.open { display: flex; }
.rel-modal { background: var(--bg-secondary, #161616); border: 1px solid var(--border-color, #2e2e2e); border-radius: var(--radius-md, 1.1rem); width: min(92vw, 480px); max-height: 88vh; overflow-y: auto; padding: 1.4rem; --rel-ink: var(--text-primary, #fff); --rel-dim: var(--text-tertiary, #6a6a6a); --rel-border: var(--border-color, #2e2e2e); --rel-card: var(--bg-card, #1c1c1c); --rel-accent: var(--accent-color, #E5F75A); }
.rel-modal h3 { margin: 0 0 1.1rem; font-size: 1.15rem; color: var(--rel-ink); }
.rel-formgrid { display: grid; gap: .9rem; }
.rel-fg { display: flex; flex-direction: column; gap: .35rem; }
.rel-fg label { font-size: .74rem; color: var(--rel-dim); text-transform: uppercase; letter-spacing: .04em; }
.rel-fg input, .rel-fg select { background: var(--rel-card); border: 1px solid var(--rel-border); border-radius: .6rem; padding: .55rem .75rem; color: var(--rel-ink); font-size: .88rem; outline: none; }
.rel-fg input:focus, .rel-fg select:focus { border-color: var(--rel-accent); }
.rel-fg-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.rel-modal-foot { display: flex; gap: .6rem; margin-top: 1.3rem; }
.rel-modal-foot .rel-btn { flex: 1; justify-content: center; }

/* ---------- Toast leve ---------- */
.rel-toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--bg-card, #1c1c1c); border: 1px solid var(--border-color, #2e2e2e); color: var(--text-primary, #fff); padding: .7rem 1.1rem; border-radius: .7rem; font-size: .85rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); opacity: 0; transition: .25s; z-index: 1200; pointer-events: none; }
.rel-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 880px) {
    #crm-view .rel-kpis, #projetos-view .rel-kpis { grid-template-columns: repeat(2, 1fr); }
}