/* Mesa · app.css — tokens claro/escuro + componentes.
   Classes curtas; o HTML de cada componente está na página /kit (copie de lá).
   Celular = largura < 900 px. Base 13 px, IBM Plex Sans/Mono.
   Seção 19 = edição na tela (editavel.js): propriedade que edita no clique, "+ Novo", página lateral, quadro com arrastar.
   Seção 21 = telas do Mesa v3 (Ofertas, Tarefas, Senhas, Cartões): quadro, item aberto, planilha. */

/* ───────────────── 1. Tokens ───────────────── */
:root,
[data-theme="claro"] {
    --canvas: oklch(0.93 0.004 250);
    --bg: oklch(0.982 0.002 250);
    --panel: oklch(0.997 0.001 250);
    --soft: oklch(0.955 0.003 250);
    --line: oklch(0.905 0.004 250);
    --ink: oklch(0.23 0.012 250);
    --mute: oklch(0.52 0.012 250);
    --acc: oklch(0.56 0.11 165);
    --acc-bg: oklch(0.95 0.03 165);
    --acc-ink: oklch(0.42 0.09 165);
    --red: oklch(0.56 0.16 25);
    --red-bg: oklch(0.95 0.03 25);
    --red-ink: oklch(0.45 0.14 25);
    --amber: oklch(0.72 0.13 75);
    --amber-bg: oklch(0.95 0.04 80);
    --amber-ink: oklch(0.47 0.1 65);
    --blue: oklch(0.56 0.12 255);
    --blue-bg: oklch(0.95 0.025 255);
    --blue-ink: oklch(0.44 0.11 255);
    --veil: oklch(0.2 0.01 250 / 0.35);
    --sombra: 0 10px 28px oklch(0.2 0.01 250 / 0.12), 0 1px 3px oklch(0.2 0.01 250 / 0.08);
    /* marca da caixa de seleção (cor = --bg do tema) */
    --chk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.3l2.8 2.8 6-6.2' fill='none' stroke='%23f8f9fa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="claro"]) {
        --canvas: oklch(0.13 0.005 250);
        --bg: oklch(0.175 0.006 250);
        --panel: oklch(0.21 0.007 250);
        --soft: oklch(0.25 0.008 250);
        --line: oklch(0.3 0.009 250);
        --ink: oklch(0.94 0.004 250);
        --mute: oklch(0.7 0.01 250);
        --acc: oklch(0.72 0.11 165);
        --acc-bg: oklch(0.3 0.05 165);
        --acc-ink: oklch(0.86 0.08 165);
        --red: oklch(0.68 0.15 25);
        --red-bg: oklch(0.3 0.06 25);
        --red-ink: oklch(0.86 0.08 25);
        --amber: oklch(0.78 0.12 75);
        --amber-bg: oklch(0.32 0.05 75);
        --amber-ink: oklch(0.88 0.08 80);
        --blue: oklch(0.7 0.11 255);
        --blue-bg: oklch(0.3 0.05 255);
        --blue-ink: oklch(0.86 0.06 255);
        --veil: oklch(0.08 0.005 250 / 0.62);
        --sombra: 0 10px 28px oklch(0.05 0.005 250 / 0.5), 0 1px 3px oklch(0.05 0.005 250 / 0.4);
        --chk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.3l2.8 2.8 6-6.2' fill='none' stroke='%23131518' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        color-scheme: dark;
    }
}

[data-theme="escuro"] {
    --canvas: oklch(0.13 0.005 250);
    --bg: oklch(0.175 0.006 250);
    --panel: oklch(0.21 0.007 250);
    --soft: oklch(0.25 0.008 250);
    --line: oklch(0.3 0.009 250);
    --ink: oklch(0.94 0.004 250);
    --mute: oklch(0.7 0.01 250);
    --acc: oklch(0.72 0.11 165);
    --acc-bg: oklch(0.3 0.05 165);
    --acc-ink: oklch(0.86 0.08 165);
    --red: oklch(0.68 0.15 25);
    --red-bg: oklch(0.3 0.06 25);
    --red-ink: oklch(0.86 0.08 25);
    --amber: oklch(0.78 0.12 75);
    --amber-bg: oklch(0.32 0.05 75);
    --amber-ink: oklch(0.88 0.08 80);
    --blue: oklch(0.7 0.11 255);
    --blue-bg: oklch(0.3 0.05 255);
    --blue-ink: oklch(0.86 0.06 255);
    --veil: oklch(0.08 0.005 250 / 0.62);
    --sombra: 0 10px 28px oklch(0.05 0.005 250 / 0.5), 0 1px 3px oklch(0.05 0.005 250 / 0.4);
    --chk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.3l2.8 2.8 6-6.2' fill='none' stroke='%23131518' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    color-scheme: dark;
}

:root {
    --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
}

/* ───────────────── 2. Base ───────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.3;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
h1, h2, h3, h4 { font-weight: 600; }
a { color: var(--acc-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--acc-bg); color: var(--ink); }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
code, kbd, pre, samp { font-family: var(--mono); }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ───────────────── 3. Utilitários ───────────────── */
.mono { font-family: var(--mono); }
.mute { color: var(--mute); }
.peq { font-size: 12px; }          /* 12 px */
.mini { font-size: 11.5px; }       /* 11,5 px: legenda, ajuda */
.b5 { font-weight: 500; }
.b6 { font-weight: 600; }
.t-red { color: var(--red-ink); }
.t-amber { color: var(--amber-ink); }
.t-acc { color: var(--acc-ink); }
.t-blue { color: var(--blue-ink); }
.a-ink, .a-ink:hover { color: var(--ink); }
.direita { text-align: right; }
.centro { text-align: center; }
.nowrap { white-space: nowrap; }
.corta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.esp { flex: 1 1 auto; }                         /* espaçador em flex */
.flex { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pilha { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pilha-8 { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.apagado { opacity: .55; }
.vh {                                            /* visível só para leitor de tela */
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--mute); }
.dot-8 { width: 8px; height: 8px; }
.dot-acc { background: var(--acc); }
.dot-amber { background: var(--amber); }
.dot-red { background: var(--red); }
.dot-blue { background: var(--blue); }
.dot-mute { background: var(--line); }
.dot-ink { background: var(--ink); }
.so-mob { display: none !important; }            /* aparece só no celular (.so-desk: só no desktop) */
.form-inline { display: inline-flex; margin: 0; }

/* ───────────────── 4. Moldura do app (layout/app.php) ───────────────── */
.app {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}
.logo { width: 18px; height: 18px; border-radius: 5px; background: var(--ink); flex: none; }

/* Barra lateral */
.side {
    position: sticky; top: 0;
    height: 100vh; height: 100dvh;
    overflow-y: auto;
    display: flex; flex-direction: column;
    padding: 14px 10px;
    background: var(--panel);
    border-right: 1px solid var(--line);
}
.side-marca { display: flex; align-items: center; gap: 8px; padding: 4px 8px 10px; color: var(--ink); font-weight: 600; font-size: 14px; }
.side-marca:hover { text-decoration: none; }
.side-nav { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; }
.side-h {
    font-family: var(--mono); font-size: 10.5px; font-weight: 500;
    text-transform: uppercase; letter-spacing: .06em; color: var(--mute);
    padding: 14px 8px 4px;
}
.side-item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 6px 8px; border-radius: 6px; font-size: 13px; color: var(--ink);
}
.side-item:hover { background: var(--soft); text-decoration: none; }
.side-item.on { background: var(--soft); font-weight: 600; }
.badge {
    font-family: var(--mono); font-size: 10.5px; font-weight: 500; line-height: 1.3;
    min-width: 20px; text-align: center; padding: 2px 6px; border-radius: 9px;
    background: var(--soft); color: var(--mute);
}
.side-item.on .badge { background: var(--panel); }
.badge-red, .side-item.on .badge-red { background: var(--red); color: var(--panel); }
.side-pe { display: flex; align-items: center; gap: 8px; padding: 10px 8px 2px; border-top: 1px solid var(--line); margin-top: 10px; }
.side-eu { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; color: var(--ink); font-size: 13px; }
.side-eu:hover { text-decoration: none; }
.side-eu span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-sair { background: none; border: 0; padding: 2px 0; font-size: 12px; color: var(--mute); }
.side-sair:hover { color: var(--ink); text-decoration: none; }

/* Coluna principal */
.main { display: flex; flex-direction: column; min-width: 0; }

/* Barra de cima (desktop) */
.topbar {
    position: sticky; top: 0; z-index: 30;
    height: 52px; flex: none;
    display: flex; align-items: center; gap: 12px;
    padding: 0 24px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}
.busca { flex: 1 1 auto; max-width: 420px; position: relative; display: flex; }
.busca input {
    width: 100%; height: 32px; padding: 0 34px 0 10px;
    border: 1px solid var(--line); border-radius: 7px;
    background: var(--bg); color: var(--ink); font-size: 13px;
}
.busca input::placeholder { color: var(--mute); opacity: 1; }
.busca input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--soft); }
.kbd {
    font-family: var(--mono); font-size: 11px; line-height: 1.2; color: var(--mute);
    border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px;
}
.busca .kbd { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.busca input:focus + .kbd { display: none; }
.top-chip {
    height: 26px; padding: 0 10px; border-radius: 13px;
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 500; white-space: nowrap;
    background: var(--acc-bg); color: var(--acc-ink);
}
.top-chip .dot { background: var(--acc); }
.top-chip.com-acao { padding-right: 3px; }
.top-chip-acao {
    height: 20px; padding: 0 9px; border: 0; border-radius: 10px;
    background: var(--panel); color: var(--ink); font-size: 12px; font-weight: 600;
}
.top-chip-acao:hover { background: var(--bg); }
.chip-amber { background: var(--amber-bg); color: var(--amber-ink); }
.chip-amber .dot { background: var(--amber); }
.chip-red { background: var(--red-bg); color: var(--red-ink); }
.chip-red .dot { background: var(--red); }
.chip-blue { background: var(--blue-bg); color: var(--blue-ink); }
.chip-blue .dot { background: var(--blue); }

/* Conteúdo */
.conteudo { padding: 20px 24px 40px; min-width: 0; flex: 1 1 auto; }
.chip-barra { display: none; }

/* Mensagens flash (topo do conteúdo) */
.flashes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.flash {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--panel); font-size: 12.5px;
}
.flash .dot { background: var(--acc); }
.flash-aviso .dot { background: var(--amber); }
.flash-erro { background: var(--red-bg); border-color: transparent; color: var(--red-ink); font-weight: 500; }
.flash-erro .dot { background: var(--red); }

/* Cabeçalho e barra do celular (escondidos no desktop) */
.ptop, .mnav { display: none; }

/* ───────────────── 5. Página ───────────────── */
.pagina { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pagina.estreita { max-width: 760px; }
.pagina-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 32px; }
.pagina-cab h1 { font-size: 20px; font-weight: 600; letter-spacing: 0; }
.pagina-cab .n, .n-cab { font-family: var(--mono); font-size: 12px; color: var(--mute); font-weight: 400; }
.pagina-cab .sub { font-family: var(--mono); font-size: 12px; color: var(--mute); }
.migalha { font-size: 12px; color: var(--mute); }
/* cabeçalho de item aberto: foto + título 22 px + linha de menus + ações */
.pagina-cab.detalhe { gap: 16px; flex-wrap: nowrap; }
.pagina-cab.detalhe h1 { font-size: 22px; }
.cab-bloco { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-width: 0; }
.cab-linha { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.cab-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.cab-acoes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Abas de página (Minha conta | Usuários): títulos de 20 px com sublinhado; no celular viram seg */
.abas { display: flex; align-items: flex-end; gap: 22px; border-bottom: 1px solid var(--line); min-width: 0; }
.abas > a:not(.btn) { display: flex; align-items: baseline; gap: 8px; padding-bottom: 9px; font-size: 20px; font-weight: 600; color: var(--mute); white-space: nowrap; }
.abas > a:not(.btn):hover { color: var(--ink); text-decoration: none; }
.abas > a.on:not(.btn) { color: var(--ink); border-bottom: 2px solid var(--ink); margin-bottom: -1px; }
.abas .n { font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--mute); }
.abas > .esp { align-self: stretch; }
.abas > .btn, .abas > .btns { margin-bottom: 8px; }

/* Grades de página */
.colunas { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.colunas.c320 { grid-template-columns: minmax(0, 1fr) 320px; }
.colunas.c360 { grid-template-columns: 360px minmax(0, 1fr); }
.duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }

/* Bloco = título de bloco + painel */
.bloco { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bloco-titulo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12px; color: var(--mute); }
.bloco-titulo h2 { font-size: 12px; font-weight: 600; color: inherit; }
.bloco-titulo.t-red { color: var(--red-ink); }
.bloco-acao { font-weight: 400; display: flex; gap: 8px; align-items: center; }
.bloco-acao a { color: var(--ink); font-weight: 500; }

/* ───────────────── 6. Painel e linhas ───────────────── */
.painel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.painel-cab {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 12px;
}
.painel-cab h2, .painel-cab .t { font-size: 12px; font-weight: 600; color: var(--mute); }
.painel-cab a:not(.btn), .painel-cab .lk { color: var(--ink); font-weight: 500; }
.painel-corpo { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.painel-corpo > .painel-t { font-size: 12px; font-weight: 600; color: var(--mute); }
.painel-rodape { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 12px; }
.painel.oculta { overflow: hidden; }
.texto { line-height: 1.5; text-wrap: pretty; }

/* Linha dentro de painel: [princ (tit + sub)] [meio] [lado] */
.linha {
    display: flex; align-items: center; gap: 12px;
    min-height: 40px; padding: 9px 14px;
    border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--ink);
}
.linha:last-child { border-bottom: 0; }
a.linha:hover { background: var(--bg); text-decoration: none; }
.linha-princ { display: flex; flex-direction: column; gap: 2px; flex: 1 1 0; min-width: 0; }
.linha .tit { font-weight: 500; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
a.tit, .linha a.tit { color: var(--ink); }
.linha .sub, .sub-l { font-size: 11.5px; color: var(--mute); }
.linha .sub.mono, .sub-l.mono { font-size: 11px; }
.linha .rot { color: var(--mute); width: 92px; flex: none; }        /* rótulo à esquerda (Integrações) */
.linha .lado { display: flex; align-items: center; gap: 8px; flex: none; }
.linha.topo { align-items: flex-start; }

/* Lista rótulo → valor (dl()) */
.dl { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; }
.dl > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.dl dt { color: var(--mute); }
.dl dd { min-width: 0; overflow-wrap: anywhere; }
.dl dd.mono, .dl .mono { font-size: 12px; }
.dl a.mono { font-size: 11.5px; }

/* Referência (tipo + nome), ex.: "produto · Mini projetor HY300" */
.ref {
    display: inline-flex; align-items: center; gap: 6px; max-width: 230px;
    height: 22px; padding: 0 8px; border: 1px solid var(--line); border-radius: 5px;
    background: var(--bg); font-size: 12px; color: var(--ink); white-space: nowrap; vertical-align: middle;
}
a.ref:hover { border-color: var(--mute); text-decoration: none; }
.ref .tipo { font-family: var(--mono); font-size: 10.5px; color: var(--mute); flex: none; }
.ref .nome { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ───────────────── 7. Tabela responsiva (.tbl) ───────────────── */
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th {
    text-align: left; font-weight: 400; font-size: 11.5px; color: var(--mute);
    padding: 8px 5px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.tbl td { padding: 9px 5px; border-bottom: 1px solid var(--line); vertical-align: middle; line-height: 1.35; }
.tbl th:first-child, .tbl td:first-child { padding-left: 14px; }
.tbl th:last-child, .tbl td:last-child { padding-right: 14px; }
.tbl > tbody:last-child > tr:last-child > td { border-bottom: 0; }
.tbl .num, .tbl th.num { text-align: right; font-family: var(--mono); font-size: 11.5px; white-space: nowrap; }
.tbl th.num { font-family: var(--sans); }
.tbl .mono { font-size: 11.5px; }
.tbl .tit { font-weight: 500; }
.tbl td:first-child a:not(.btn), .tbl a.tit { color: var(--ink); }
.tbl .sub { display: block; font-size: 11.5px; color: var(--mute); margin-top: 2px; }
.tbl .sub.mono { font-size: 11px; }
.tbl .acoes { text-align: right; white-space: nowrap; }
.tbl .acoes > * + * { margin-left: 6px; }
.tbl .encolhe { width: 1%; white-space: nowrap; }
.tbl tr.grupo td {
    background: var(--soft); padding-top: 5px; padding-bottom: 5px;
    font-size: 12px; font-weight: 600;
}
.tbl tr.grupo td .mute { font-weight: 400; }
.tbl tr.apagada td { opacity: .5; }
.tbl tr.marcada td:first-child { box-shadow: inset 2px 0 0 var(--amber); }
.tbl tr.realce td { background: var(--bg); }
.tbl tfoot td { border-top: 1px solid var(--line); border-bottom: 0; padding-top: 10px; padding-bottom: 10px; }
.tbl-rolagem { overflow-x: auto; }
.tbl-vazio td { padding: 10px 12px 12px !important; }
.tracejado { border: 1px dashed var(--line); border-radius: 7px; min-height: 120px; }

/* ───────────────── 8. Botões ───────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 32px; padding: 0 12px;
    border: 1px solid var(--line); border-radius: 7px;
    background: var(--panel); color: var(--ink);
    font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap;
    text-decoration: none; cursor: pointer; user-select: none;
}
.btn:hover { background: var(--soft); text-decoration: none; }
.btn:active { transform: translateY(.5px); }
.btn-primario { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn-primario:hover { background: var(--ink); opacity: .88; }
.btn-perigo { color: var(--red-ink); }
.btn-primario.btn-perigo { background: var(--red); border-color: var(--red); color: var(--panel); }
.btn-acc { background: var(--acc); border-color: var(--acc); color: var(--panel); }
.btn-acc:hover { background: var(--acc); opacity: .9; }
.btn-pequeno { height: 26px; padding: 0 10px; border-radius: 6px; font-size: 12px; }
.btn-medio { height: 30px; font-size: 12px; }
.btn-alto { height: 36px; }
.btn-bloco { display: flex; width: 100%; }
.btn-link { height: auto; padding: 0; border: 0; background: none; font-size: 12px; font-weight: 500; }
.btn-link:hover { background: none; text-decoration: underline; }
.btn:disabled, .btn[aria-disabled="true"] {
    background: var(--soft); border-color: var(--soft); color: var(--mute); cursor: not-allowed; opacity: 1;
}
.btn .mute { font-weight: 400; }
.btns { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Menu suspenso: <details class="menu"> (filtros "Status ▾", "+ Novo") */
.menu { position: relative; display: inline-flex; }
.btn-menu {
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 10px;
    border: 1px solid var(--line); border-radius: 7px;
    background: var(--panel); color: var(--ink); font-size: 12px; white-space: nowrap;
}
.btn-menu:hover { background: var(--soft); }
.btn-menu.on { border-color: var(--ink); font-weight: 500; }
.btn-menu.pequeno { height: 26px; border-radius: 6px; }
.btn-menu .seta { color: var(--mute); font-size: 9px; }
.menu[open] > .btn-menu { background: var(--soft); }
.menu-lista {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
    min-width: 190px; max-height: min(420px, 70vh); overflow-y: auto;
    padding: 4px 0; background: var(--panel);
    border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--sombra);
    display: flex; flex-direction: column; font-size: 12.5px;
}
.menu:not([open]) > .menu-lista { display: none; }
.menu.direita .menu-lista { left: auto; right: 0; }
.menu-lista a, .menu-lista button {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 6px 12px; color: var(--ink); background: none; border: 0; text-align: left; white-space: nowrap;
}
.menu-lista a:hover, .menu-lista button:hover { background: var(--soft); text-decoration: none; }
.menu-lista a.on { font-weight: 600; }
.menu-lista .n { font-family: var(--mono); font-size: 11px; color: var(--mute); }
.menu-h {
    font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--mute); padding: 8px 12px 3px; border-top: 1px solid var(--line); margin-top: 4px;
}
.menu-h:first-child { border-top: 0; margin-top: 0; }
.menu-lista hr { margin: 4px 0; }

/* ───────────────── 9. Pílula, avatar, etiqueta ───────────────── */
.pill {
    display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
    font-size: 11.5px; font-weight: 500; line-height: 1.2;
    padding: 3px 8px; border-radius: 10px; white-space: nowrap;
    background: var(--soft); color: var(--mute);
}
.pill-acc { background: var(--acc-bg); color: var(--acc-ink); }
.pill-amber { background: var(--amber-bg); color: var(--amber-ink); }
.pill-red { background: var(--red-bg); color: var(--red-ink); }
.pill-blue { background: var(--blue-bg); color: var(--blue-ink); }
.pill-mute { background: var(--soft); color: var(--mute); }
.pill-ink { background: var(--soft); color: var(--ink); }
.pill-p { font-size: 11px; padding: 2px 7px; border-radius: 9px; }   /* menor (linhas internas) */

.av {
    width: 22px; height: 22px; flex: none; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10.5px; font-weight: 600; line-height: 1;
    color: var(--panel); background: var(--acc); vertical-align: middle;
}
.av-16 { width: 16px; height: 16px; font-size: 9px; }
.av-18 { width: 18px; height: 18px; font-size: 9.5px; }
.av-20 { width: 20px; height: 20px; font-size: 10px; }
.av-36 { width: 36px; height: 36px; font-size: 15px; }
.av-acc { background: var(--acc); }
.av-blue { background: var(--blue); }
.av-amber { background: var(--amber); }
.av-red { background: var(--red); }
.av-mute { background: var(--soft); color: var(--mute); border: 1px solid var(--line); }
.quem { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }   /* avatar + nome */

.tag {
    display: inline-block; vertical-align: middle;
    font-family: var(--mono); font-size: 10.5px; line-height: 1.25;
    padding: 2px 5px; border: 1px solid var(--line); border-radius: 4px;
    color: var(--mute); white-space: nowrap;
}
.tag-riscada { text-decoration: line-through; }
.tags { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }

/* ───────────────── 10. Controle segmentado e chips ───────────────── */
.seg {
    display: inline-flex; gap: 2px; padding: 2px; border-radius: 7px;
    background: var(--soft); font-size: 12px; flex: none; max-width: 100%;
}
.seg > a, .seg > .seg-op > span {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 5px 10px; border-radius: 5px; color: var(--ink); white-space: nowrap;
}
.seg > a:hover { text-decoration: none; background: color-mix(in oklch, var(--panel) 50%, transparent); }
.seg > a.on { background: var(--panel); font-weight: 500; }
.seg .n { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--mute); }
/* seg de formulário (rádios): ocupa a largura, 34 px, inativos em cinza */
.seg-campo { display: flex; width: 100%; height: 34px; }
.seg-op { flex: 1 1 0; display: flex; position: relative; min-width: 0; cursor: pointer; }
.seg-op > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.seg-op > span { flex: 1; padding: 0 8px; color: var(--mute); font-size: 12px; }
.seg-op:hover > span { color: var(--ink); }
.seg-op > input:checked + span { background: var(--panel); color: var(--ink); font-weight: 500; }
.seg-op > input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: -2px; }
.seg-op.desab { cursor: not-allowed; opacity: .45; }
.seg-op.desab:hover > span { color: var(--mute); }
.tem-erro .seg-campo { box-shadow: inset 0 0 0 1px var(--red); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.chip {
    display: inline-flex; align-items: center; gap: 6px; flex: none;
    height: 28px; padding: 0 11px; border: 1px solid var(--line); border-radius: 14px;
    background: var(--panel); color: var(--ink); font-size: 12px; white-space: nowrap;
}
.chip:hover { text-decoration: none; border-color: var(--mute); }
.chip .n { font-family: var(--mono); font-size: 11px; opacity: .7; }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 500; }
.chip .x { margin-left: 1px; }

/* ───────────────── 11. Formulário ───────────────── */
.form-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; align-items: start; }
.form-grade.g1 { grid-template-columns: minmax(0, 1fr); }
.form-grade.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grade.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: 1 / -1; }
.form-grade.g1 .span-2 { grid-column: auto; }
.form-pilha { display: flex; flex-direction: column; gap: 14px; }
.form-painel { padding: 16px; display: flex; flex-direction: column; gap: 20px; }
.form-grupo { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.form-secao { font-size: 12px; font-weight: 600; color: var(--mute); }
.form-acoes { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.form-linha {                                          /* adição rápida numa linha (Tarefas, vazio) */
    display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap;
    padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
}
.form-linha > .campo, .form-linha > .inp-flex { flex: 1 1 160px; }
.form-linha > .btn { height: 34px; }
.form-linha.compacta { align-items: center; }                 /* 32 px (adição rápida de tarefa) */
.form-linha.compacta .inp, .form-linha.compacta .inp-caixa, .form-linha.compacta > .btn, .form-linha.compacta .btn-menu, .form-linha.compacta .seg-campo { height: 32px; }

.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rotulo, .campo > label:not([class]) { font-size: 12px; font-weight: 500; color: var(--ink); }
.opc { font-weight: 400; color: var(--mute); }
.ajuda { font-size: 11.5px; color: var(--mute); line-height: 1.35; }
.erro-msg { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--red-ink); }
.erro-msg::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex: none; }

.inp {
    width: 100%; height: 34px; padding: 0 10px;
    border: 1px solid var(--line); border-radius: 7px;
    background: var(--bg); color: var(--ink);
    font-size: 13px; line-height: 1.3;
    transition: border-color .12s, box-shadow .12s;
}
.inp::placeholder { color: var(--mute); opacity: 1; }
.inp:hover { border-color: color-mix(in oklch, var(--line) 50%, var(--mute)); }
.inp:focus, .inp-caixa:focus-within { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--soft); }
.inp.mono, .inp-caixa .mono { font-family: var(--mono); font-size: 12.5px; }
.inp:disabled, .inp[readonly] { background: var(--soft); color: var(--mute); }
textarea.inp { height: auto; min-height: 64px; padding: 8px 10px; resize: vertical; line-height: 1.45; }
input[type="date"].inp, input[type="month"].inp { font-family: var(--mono); font-size: 12.5px; }
input[type="number"].inp { font-family: var(--mono); font-size: 12.5px; }
.tem-erro .inp, .tem-erro .inp-caixa, .inp.erro { border-color: var(--red); }
.tem-erro .inp:focus, .tem-erro .inp-caixa:focus-within { box-shadow: 0 0 0 3px var(--red-bg); }

/* select com seta própria */
.sel { position: relative; display: block; min-width: 0; }
.sel > select.inp { appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer; }
.sel::after {
    content: "▾"; position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
    color: var(--mute); font-size: 10px; pointer-events: none;
}
select.inp option { background: var(--panel); color: var(--ink); }

/* caixa com prefixo/sufixo: R$, .myshopify.com */
.inp-caixa {
    display: flex; align-items: center; gap: 8px;
    height: 34px; padding: 0 10px;
    border: 1px solid var(--line); border-radius: 7px; background: var(--bg);
}
.inp-caixa > input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; padding: 0; background: none; outline: none; }
.inp-caixa > input::placeholder { color: var(--mute); opacity: 1; }
.inp-caixa .pref, .inp-caixa .suf { font-family: var(--mono); font-size: 11.5px; color: var(--mute); flex: none; }
.inp-caixa .pref { font-size: 12.5px; }

/* caixa de seleção e rádio */
.chk {
    appearance: none; -webkit-appearance: none; flex: none; margin: 0;
    width: 16px; height: 16px; border: 1.5px solid var(--mute); border-radius: 4px;
    background: var(--bg) center / 14px 14px no-repeat; cursor: pointer; vertical-align: middle;
}
.chk:checked { background-color: var(--ink); border-color: var(--ink); background-image: var(--chk); }
.chk:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rad {
    appearance: none; -webkit-appearance: none; flex: none; margin: 0;
    width: 14px; height: 14px; border: 1.5px solid var(--mute); border-radius: 50%;
    background: var(--bg); cursor: pointer;
}
.rad:checked { border: 4.5px solid var(--ink); }
.rad:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.chk:disabled, .rad:disabled { opacity: .45; cursor: not-allowed; }
.chk-linha { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; cursor: pointer; min-height: 22px; }
.chk-linha.mute { color: var(--mute); }
.checks { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; min-height: 34px; }
.checks-grupo { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 8px; align-items: start; }
.checks-grupo > .tag { justify-self: start; margin-top: 6px; }
.checks-grupos { display: flex; flex-direction: column; gap: 8px; }
/* caixas (checks com borda, ex.: contas de anúncio) */
.checks.caixas { gap: 6px; min-height: 0; }
.checks.caixas .chk-linha {
    height: 28px; padding: 0 9px; gap: 6px; font-size: 12px;
    border: 1px solid var(--line); border-radius: 6px; background: var(--bg);
}
.checks.caixas .chk { width: 13px; height: 13px; border-radius: 3px; background-size: 11px 11px; }
.checks.caixas .chk-linha:has(.chk:checked) { border-color: var(--ink); }

/* rádios em cartão (opção com descrição) */
.radios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.radios.r1 { grid-template-columns: minmax(0, 1fr); }
.radios.r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.radio-cartao {
    display: flex; gap: 8px; align-items: flex-start; min-width: 0;
    padding: 9px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); cursor: pointer;
}
.radio-cartao .rad { margin-top: 1px; }
.radio-cartao:has(.rad:checked) { border: 1.5px solid var(--ink); padding: 8.5px 9.5px; }
.radio-cartao.desab { opacity: .45; cursor: not-allowed; }
.rc-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rc-t { font-weight: 400; }
.radio-cartao:has(.rad:checked) .rc-t, .radio-cartao:has(.rc-d) .rc-t { font-weight: 500; }
.rc-t .mono { font-weight: 400; color: var(--mute); font-size: 11.5px; margin-left: 4px; }
.rc-d { font-size: 11.5px; color: var(--mute); }

/* arquivo */
.arquivo {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    height: 34px; padding: 0 10px; border: 1px dashed var(--line); border-radius: 7px;
    background: var(--bg); cursor: pointer; min-width: 0;
}
.arquivo:hover { border-color: var(--mute); }
.arquivo:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px var(--soft); }
.arquivo > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.arquivo-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.arquivo-dica { font-size: 11.5px; color: var(--mute); flex: none; }

/* código de 6 dígitos desenhado como 6 caixas (um input só) */
.codigo { position: relative; width: 292px; height: 50px; }
.codigo-caixas { position: absolute; inset: 0; display: flex; gap: 8px; pointer-events: none; }
.codigo-caixas > span { width: 42px; height: 50px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.codigo-caixas > span.foco { border: 1.5px solid var(--ink); box-shadow: 0 0 0 3px var(--soft); }
.codigo > input {
    position: relative; z-index: 1; display: block; width: 100%; height: 100%;
    border: 0; background: transparent; outline: none; overflow: hidden;
    font-family: var(--mono); font-size: 22px; font-weight: 500;
    letter-spacing: 36.8px; padding: 0 0 0 14.4px; caret-color: var(--ink);
}
.codigo:not(.js) > input:focus ~ .codigo-caixas > span { border-color: var(--ink); }
.codigo.erro .codigo-caixas > span { border: 1.5px solid var(--red); box-shadow: none; }
.codigo.bloq .codigo-caixas > span { background: var(--soft); }

/* ───────────────── 12. Alertas e avisos ───────────────── */
/* Linha "Pede ação": <div class="painel alertas"><a class="alerta" href> … */
.alertas { display: flex; flex-direction: column; }
.alerta {
    display: grid; grid-template-columns: 8px minmax(0, 1fr) auto auto; gap: 12px; align-items: center;
    padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--ink);
}
.alerta:last-child { border-bottom: 0; }
a.alerta:hover { background: var(--bg); text-decoration: none; }
.alerta .dot { width: 8px; height: 8px; }
.alerta-t { font-weight: 500; min-width: 0; }
.alerta-d { font-size: 12px; color: var(--mute); white-space: nowrap; }
.alerta .btn { height: 26px; padding: 0 10px; border-radius: 6px; font-size: 12px; }

/* Aviso em faixa (exige ação): .aviso.aviso-amber / -red / -acc */
.aviso {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 7px; font-size: 12.5px;
    background: var(--soft); color: var(--ink);
}
.aviso b { font-weight: 600; }
.aviso .aviso-txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 0; min-width: 0; }
.aviso .btn { flex: none; }
.aviso-amber { background: var(--amber-bg); color: var(--amber-ink); }
.aviso-red { background: var(--red-bg); color: var(--red-ink); }
.aviso-acc { background: var(--acc-bg); color: var(--acc-ink); }
.aviso-blue { background: var(--blue-bg); color: var(--blue-ink); }
.aviso .dot { background: currentColor; }

/* Linha de microtexto que muda comportamento (ex.: CVV) */
.micro { font-size: 11.5px; color: var(--mute); }

/* Estado vazio: uma linha curta + ação */
.vazio { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 12px; color: var(--mute); }

/* ───────────────── 13. Foto ───────────────── */
.foto {
    display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden;
    width: 34px; height: 34px; border-radius: 6px;
    background: repeating-linear-gradient(135deg, var(--soft) 0 4px, var(--panel) 4px 8px);
    border: 1px solid var(--line);
    font-family: var(--mono); font-size: 10px; color: var(--mute);
}
.foto.tem { background: var(--soft); }
.foto > img { width: 100%; height: 100%; object-fit: cover; }

/* ───────────────── 14. Quadro de etapas (6 colunas) ───────────────── */
.quadro { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: start; }
.quadro-col { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 9px; background: var(--soft); min-width: 0; }
.quadro-col.morto { opacity: .6; }
.quadro-cab { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px; font-size: 12px; font-weight: 600; }
.quadro-cab .n { font-family: var(--mono); font-weight: 400; color: var(--mute); }
.quadro-vazio { height: 120px; border: 1px dashed var(--line); border-radius: 7px; }
.quadro-abas { display: none; }
.quadro-nota { font-size: 11.5px; color: var(--mute); }

.cartao-produto {
    display: grid; grid-template-columns: 18px minmax(0, 1fr) auto;
    grid-template-areas: "foto foto foto" "nome nome nome" "av loja loja" "tags tags dias";
    gap: 7px 6px; align-items: center;
    padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 7px;
    color: var(--ink);
}
a.cartao-produto:hover { border-color: var(--mute); text-decoration: none; }
.cartao-produto.atrasado { border-color: var(--red); }
.cartao-produto > .foto { grid-area: foto; width: 100% !important; height: 56px !important; border-radius: 5px !important; }
.cp-nome { grid-area: nome; font-weight: 500; font-size: 12.5px; line-height: 1.3; }
.cartao-produto > .av { grid-area: av; width: 18px; height: 18px; font-size: 9.5px; }
.cp-loja { grid-area: loja; font-size: 11.5px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-tags { grid-area: tags; display: flex; gap: 4px; flex-wrap: wrap; align-items: center; min-height: 0; }
.cp-tags .tag { font-size: 10px; padding: 2px 4px; }
.cp-dias { grid-area: dias; font-family: var(--mono); font-size: 10.5px; color: var(--mute); justify-self: end; }
.cartao-produto.atrasado .cp-dias { color: var(--red-ink); }

/* ───────────────── 15. Diálogo como página ───────────────── */
.dialogo {
    width: 100%; max-width: 380px; margin: 24px auto;
    background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
    display: flex; flex-direction: column;
}
.dialogo.medio { max-width: 460px; }
.dialogo.largo { max-width: 540px; }
.dialogo.xlargo { max-width: 640px; }
.dialogo > form { display: flex; flex-direction: column; margin: 0; }
.dialogo-cab {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.dialogo-cab h1 { font-size: 15px; font-weight: 600; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.dialogo-cab h1 .sub { font-size: 12px; font-weight: 400; color: var(--mute); }
.dialogo-cab h1 .sub.mono { font-size: 11.5px; }
.fechar {
    width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center;
    border-radius: 6px; color: var(--mute); font-size: 17px; line-height: 1;
}
.fechar:hover { background: var(--soft); color: var(--ink); text-decoration: none; }
.dialogo-corpo { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.dialogo-rodape { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); }

/* ───────────────── 16. Caixa de marcar como botão (tarefa feita) ───────────────── */
.check {
    position: relative; flex: none; width: 15px; height: 15px; padding: 0;
    border: 1.5px solid var(--mute); border-radius: 4px; background: var(--bg); vertical-align: middle;
}
.check::before { content: ""; position: absolute; inset: -8px; }        /* área de toque maior */
.check:hover { border-color: var(--ink); }
.check.on { background: var(--acc); border-color: var(--acc); }
.check.on::after {
    content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
    border: solid var(--panel); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg);
}

/* ───────────────── 17. Login e páginas simples ───────────────── */
.auth { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.auth-cartao {
    width: 360px; max-width: 100%;
    background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
    padding: 28px; display: flex; flex-direction: column; gap: 16px;
}
.auth-cartao.largo { width: 400px; }
.auth-cartao form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.auth-marca { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--ink); }
.auth-marca:hover { text-decoration: none; }
.auth-passo { margin-left: auto; font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--mute); }
.auth-cab { display: flex; flex-direction: column; gap: 4px; }
.auth-titulo { font-size: 18px; font-weight: 600; }
.auth-sub { font-size: 12px; color: var(--mute); }
.auth-cartao .btn-primario { height: 36px; }
.auth-rodape { border-top: 1px solid var(--line); padding-top: 14px; font-size: 12px; color: var(--mute); }
.auth-links { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.auth-links .mute:hover { color: var(--ink); }
.auth-flashes { margin: 0; }

.bare { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.erro-pagina { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 420px; padding: 24px 0; }
.erro-cod { font-family: var(--mono); font-size: 13px; color: var(--mute); }
.erro-pagina h1 { font-size: 20px; font-weight: 600; }
.erro-pagina p { color: var(--mute); line-height: 1.5; }
.erro-pagina .btn { margin-top: 6px; }
.l-app .erro-pagina { margin: 40px auto 0; }

/* ───────────────── 18. Celular (< 900 px) ───────────────── */
@media (max-width: 899.98px) {
    .so-desk { display: none !important; }
    .so-mob { display: revert !important; }
    .so-mob.flex, .so-mob.btns, .so-mob.chips, .so-mob.seg, .so-mob.pilha, .so-mob.pilha-8, .so-mob.form-linha { display: flex !important; }
    .so-mob.btn, .so-mob.pill, .so-mob.ref { display: inline-flex !important; }

    .app { display: block; }
    .side, .topbar { display: none; }

    /* Cabeçalho (PhoneTop) */
    .ptop {
        position: sticky; top: 0; z-index: 50;
        display: flex; align-items: center; gap: 10px;
        height: 52px; padding: 0 16px; padding-top: env(safe-area-inset-top);
        box-sizing: content-box;
        background: var(--panel); border-bottom: 1px solid var(--line);
    }
    .ptop-titulo { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; color: var(--ink); }
    .ptop-titulo span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ptop-voltar {
        flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 4px;
        min-height: 44px; font-size: 14px; color: var(--mute);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .ptop-voltar:hover { text-decoration: none; color: var(--ink); }
    .ptop-btn {
        position: relative; width: 36px; height: 36px; flex: none;
        display: flex; align-items: center; justify-content: center;
        border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
        color: var(--mute); font-family: var(--mono); font-size: 13px;
    }
    .ptop-btn::before { content: ""; position: absolute; inset: -4px; }
    .ptop-btn:hover { text-decoration: none; }
    .ptop-btn.mais { background: var(--ink); border-color: var(--ink); color: var(--bg); font-family: var(--sans); font-size: 20px; font-weight: 400; line-height: 1; }
    /* menus viram folha presa embaixo, com véu (tocar fora fecha) */
    .menu-lista, .menu.direita .menu-lista, .ptop .menu-lista {
        position: fixed; top: auto; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom));
        z-index: 71; min-width: 0; max-height: 70vh; padding: 6px 0; border-radius: 12px; font-size: 14px;
    }
    .menu[open] > summary::before { content: ""; position: fixed; inset: 0; z-index: 70; background: var(--veil); cursor: default; }
    .menu-lista a, .menu-lista button { padding: 0 16px; }
    .ptop-acao {
        flex: none; display: flex; align-items: center; min-height: 44px; padding: 0 2px;
        background: none; border: 0; font-size: 13px; color: var(--mute);
    }
    .ptop-acao:hover { text-decoration: none; color: var(--ink); }
    .ptop-acao.forte { color: var(--acc-ink); font-weight: 600; }

    /* Barra inferior (MobileNav) */
    .mnav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        display: grid; grid-template-columns: repeat(5, 1fr);
        padding-bottom: max(14px, env(safe-area-inset-bottom));
        background: var(--panel); border-top: 1px solid var(--line);
    }
    .mnav a {
        position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
        min-height: 52px; font-size: 11px; color: var(--mute);
    }
    .mnav a:hover { text-decoration: none; }
    .mnav a::before { content: ""; position: absolute; top: 0; width: 20px; height: 3px; border-radius: 2px; background: transparent; }
    .mnav a.on { color: var(--ink); font-weight: 600; }
    .mnav a.on::before { background: var(--ink); }
    .mnav svg { width: 20px; height: 20px; }
    .mnav .badge-m {
        position: absolute; top: 6px; left: calc(50% + 6px);
        font-family: var(--mono); font-size: 9.5px; line-height: 1.3; font-weight: 400;
        padding: 1px 5px; border-radius: 8px; background: var(--red); color: var(--panel);
    }

    .conteudo { padding: 14px 16px calc(90px + env(safe-area-inset-bottom)); }
    body:has(.form-acoes, .dialogo-rodape) .mnav { display: none; }
    body:has(.form-acoes, .dialogo-rodape) .conteudo { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }

    .chip-barra {
        display: flex; align-items: stretch; height: 44px; margin-bottom: 12px; overflow: hidden;
        border: 1px solid var(--line); border-radius: 8px;
        background: var(--acc-bg); color: var(--acc-ink); font-size: 13px; font-weight: 500;
    }
    .chip-barra .chip-barra-t { flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 12px; min-width: 0; }
    .chip-barra .dot { width: 7px; height: 7px; background: var(--acc); }
    .chip-barra.chip-amber { background: var(--amber-bg); color: var(--amber-ink); }
    .chip-barra.chip-amber .dot { background: var(--amber); }
    .chip-barra.chip-red { background: var(--red-bg); color: var(--red-ink); }
    .chip-barra.chip-red .dot { background: var(--red); }
    .chip-barra form { display: flex; }
    .chip-barra button { padding: 0 20px; border: 0; border-left: 1px solid var(--line); background: var(--panel); color: var(--ink); font-weight: 600; font-size: 13px; }

    /* Página: o título fica no cabeçalho; com "voltar", aparece no corpo (18 px) */
    .pagina { gap: 14px; }
    body:not(.tem-voltar) .pagina-cab > h1:not(.fixo),
    body:not(.tem-voltar) .pagina-cab > .n { display: none; }
    .pagina-cab { min-height: 0; gap: 8px; }
    .pagina-cab:empty { display: none; }
    .pagina-cab h1, .pagina-cab.detalhe h1 { font-size: 18px; }
    .pagina-cab.detalhe { flex-wrap: wrap; gap: 12px; }
    .pagina-cab .seg { flex: 1 1 auto; }
    .pagina-cab > .esp { display: none; }
    .abas { gap: 2px; padding: 2px; border: 0; border-radius: 8px; background: var(--soft); }
    .abas > a:not(.btn) { flex: 1 1 0; justify-content: center; align-items: center; gap: 5px; min-height: 40px; padding: 0 8px; border-radius: 6px; font-size: 13px; font-weight: 400; color: var(--ink); }
    .abas > a.on:not(.btn) { background: var(--panel); border: 0; margin: 0; font-weight: 500; }
    .abas .n { font-size: 11px; }
    .abas > :not(a), .abas > a.btn { display: none; }
    .cab-acoes { width: 100%; }
    .cab-acoes .btn { flex: 1 1 0; }
    .colunas, .colunas.c320, .colunas.c360, .duas, .tres { grid-template-columns: minmax(0, 1fr); gap: 14px; }

    /* Toque: alvos ≥ 44 px */
    .btn { height: auto; min-height: 44px; padding: 0 14px; border-radius: 8px; font-size: 14px; }
    .btn-pequeno, .alerta .btn { min-height: 44px; height: auto; font-size: 13px; padding: 0 14px; }
    .btn-link { min-height: 44px; padding: 0; font-size: 13px; }
    .btn-menu, .btn-menu.pequeno { height: 44px; padding: 0 12px; border-radius: 8px; font-size: 13px; }
    .seg { display: flex; border-radius: 8px; font-size: 13px; }
    .seg > a, .seg > .seg-op > span { flex: 1 1 0; min-height: 40px; padding: 0 8px; border-radius: 6px; }
    .seg-campo { height: 44px; }
    .seg-op > span { font-size: 13px; }
    .side-item { min-height: 44px; }
    .menu-lista a, .menu-lista button { min-height: 44px; font-size: 14px; }

    /* Chips viram uma faixa rolável */
    .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
    .chips::-webkit-scrollbar { display: none; }
    .chip { height: 34px; padding: 0 12px; border-radius: 17px; border-color: transparent; background: var(--soft); font-size: 13px; }
    .chip.on { background: var(--ink); color: var(--bg); }

    /* Formulário em tela cheia, botão no rodapé */
    .form-grade, .form-grade.g3, .form-grade.g4 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .form-grade.m2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-grade .span-2, .form-grade .span-3 { grid-column: 1 / -1; }
    .form-painel { padding: 0; border: 0; background: none; gap: 22px; }
    .inp, .inp-caixa, .arquivo { height: 44px; border-radius: 8px; background: var(--panel); font-size: 16px; padding: 0 12px; }
    .inp.mono, .inp-caixa .mono, input[type="date"].inp, input[type="month"].inp, input[type="number"].inp { font-size: 15px; }
    .inp-caixa > input { font-size: 16px; }
    textarea.inp { min-height: 96px; padding: 10px 12px; }
    .chk { width: 20px; height: 20px; border-radius: 5px; background-size: 16px 16px; }
    .rad { width: 18px; height: 18px; }
    .rad:checked { border-width: 5.5px; }
    .chk-linha { min-height: 44px; font-size: 14px; gap: 10px; }
    .checks { gap: 0 18px; }
    .checks.caixas .chk-linha { height: 40px; font-size: 13px; }
    .radios, .radios.r3 { grid-template-columns: minmax(0, 1fr); }
    .radio-cartao { min-height: 56px; align-items: center; padding: 8px 12px; border-radius: 8px; background: var(--panel); }
    .radio-cartao:has(.rad:checked) { padding: 7.5px 11.5px; }
    .rc-t { font-size: 14px; }
    .rc-d { font-size: 12px; }
    .form-linha { padding: 0; border: 0; background: none; }
    .form-linha > * { flex: 1 1 100%; }
    .form-linha .inp, .form-linha .inp-caixa, .form-linha > .btn, .form-linha .btn-menu,
    .form-linha.compacta .inp, .form-linha.compacta .inp-caixa, .form-linha.compacta > .btn, .form-linha.compacta .btn-menu { height: 44px; }
    .form-linha.compacta .seg-campo { height: 44px; }
    .form-acoes, .dialogo-rodape {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
        display: flex; gap: 8px; justify-content: stretch;
        padding: 12px 16px max(24px, env(safe-area-inset-bottom));
        background: var(--panel); border-top: 1px solid var(--line);
    }
    .form-acoes .btn, .dialogo-rodape .btn { flex: 1 1 0; }
    .form-acoes .btn-primario, .dialogo-rodape .btn-primario { flex: 2 1 0; }
    .form-acoes .esp, .dialogo-rodape .esp { display: none; }

    /* Diálogo vira tela cheia */
    .dialogo, .dialogo.medio, .dialogo.largo, .dialogo.xlargo { max-width: none; margin: 0; border: 0; border-radius: 0; background: none; }
    .dialogo-cab { padding: 2px 0 14px; border: 0; }
    .dialogo-cab h1 { font-size: 18px; }
    .dialogo-cab .fechar { display: none; }
    .dialogo-corpo { padding: 0; gap: 16px; }

    /* Linhas e alertas */
    .linha { min-height: 48px; padding: 8px 12px; font-size: 13px; flex-wrap: wrap; gap: 8px 12px; }
    .linha .rot { width: auto; min-width: 84px; }
    .painel-cab { padding: 10px 12px; }
    .painel-corpo { padding: 12px; }
    .alertas { background: none; border: 0; gap: 8px; }
    .alerta {
        grid-template-columns: 8px minmax(0, 1fr); gap: 4px 10px; align-items: start;
        padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
    }
    .alerta:last-child { border-bottom: 1px solid var(--line); }
    .alerta .dot { margin-top: 5px; grid-row: span 2; }
    .alerta-d { white-space: normal; grid-column: 2; }
    .alerta .btn { grid-column: 2; justify-self: start; margin-top: 6px; }
    a.alerta .btn { display: none; }
    .aviso { flex-wrap: wrap; }
    .aviso .btn { width: 100%; }

    /* Tabela vira linhas empilhadas (cada td mostra data-l) */
    .tbl, .tbl tbody, .tbl tfoot, .tbl tr, .tbl td { display: block; width: 100%; }
    .tbl thead { display: none; }
    .tbl tr { position: relative; padding: 10px 12px; border-bottom: 1px solid var(--line); }
    .tbl > tbody:last-child > tr:last-child { border-bottom: 0; }
    .tbl td, .tbl td:first-child, .tbl td:last-child { padding: 2px 0; border: 0; font-size: 13px; }
    .tbl td:first-child { font-size: 14px; padding-right: 84px; }
    .tbl td:first-child .sub { font-size: 12px; }
    .tbl td[data-l] { display: block; text-align: right; overflow: hidden; }
    .tbl td[data-l]::before {
        content: attr(data-l); float: left; margin-right: 12px;
        font-family: var(--sans); font-size: 12px; font-weight: 400; color: var(--mute); text-align: left;
    }
    .tbl td[data-l] .flex, .tbl td[data-l] .quem { display: inline-flex; vertical-align: middle; }
    .tbl td[data-l] .pill { vertical-align: middle; }
    .tbl .sub.so-mob, .linha .sub.so-mob { display: block !important; }
    .tbl td[data-l]:empty { display: none; }
    .tbl td.num { text-align: right; }
    .tbl td.m-canto { position: absolute; top: 10px; right: 12px; width: auto; padding: 0; }
    .tbl td.m-esconde { display: none; }
    .tbl td.acoes { display: flex; flex-wrap: wrap; gap: 8px; text-align: left; padding-top: 8px; }
    .tbl td.acoes > * + * { margin-left: 0; }
    .tbl td.acoes .btn { flex: 1 1 auto; }
    .tbl tr.grupo { padding: 6px 12px; background: var(--soft); }
    .tbl tr.grupo td { background: none; padding: 0; font-size: 12px; }
    .tbl tr.apagada { opacity: .5; }
    .tbl tr.apagada td { opacity: 1; }
    .tbl tr.marcada { box-shadow: inset 2px 0 0 var(--amber); }
    .tbl tr.marcada td:first-child { box-shadow: none; }
    .tbl tfoot tr { border-top: 1px solid var(--line); }
    .tbl tfoot td { border: 0; padding-top: 2px; padding-bottom: 2px; }
    .tbl.cartoes tr { margin-bottom: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
    .tbl.cartoes > tbody:last-child > tr:last-child { border-bottom: 1px solid var(--line); margin-bottom: 0; }
    .painel:has(> .tbl.cartoes), .painel:has(> .tbl-rolagem > .tbl.cartoes) { background: none; border: 0; }
    .tbl-rolagem { overflow: visible; }

    /* Quadro: abas roláveis + uma coluna por vez */
    .quadro-abas {
        display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
        position: sticky; top: calc(53px + env(safe-area-inset-top)); z-index: 20;
        margin: -14px -16px 0; padding: 10px 16px;
        background: var(--panel); border-bottom: 1px solid var(--line);
    }
    .quadro-abas::-webkit-scrollbar { display: none; }
    .quadro-abas a {
        flex: none; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
        border-radius: 17px; background: var(--soft); color: var(--ink); font-size: 13px; white-space: nowrap;
    }
    .quadro-abas a:hover { text-decoration: none; }
    .quadro-abas a .n { font-family: var(--mono); font-size: 11px; opacity: .7; }
    .quadro-abas a.on { background: var(--ink); color: var(--bg); font-weight: 600; }
    .quadro {
        display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
        margin: 0 -16px; padding: 0 16px; scrollbar-width: none; align-items: flex-start;
    }
    .quadro::-webkit-scrollbar { display: none; }
    .quadro-col { flex: 0 0 100%; scroll-snap-align: start; scroll-margin: 0 16px; padding: 0; background: none; gap: 8px; }
    .quadro-col.morto { opacity: 1; }
    .quadro-col.morto .cartao-produto { opacity: .6; }
    .quadro-cab { display: none; }
    .cartao-produto {
        grid-template-columns: 52px minmax(0, 1fr) auto;
        grid-template-areas: "foto nome av" "foto loja dias" "foto tags dias";
        gap: 4px 12px; padding: 10px; border-radius: 9px;
    }
    .cartao-produto > .foto { width: 52px !important; height: 52px !important; border-radius: 7px !important; font-size: 0; }
    .cp-nome { font-size: 14px; }
    .cp-loja { font-size: 12px; }
    .cartao-produto > .av { width: 22px; height: 22px; font-size: 10.5px; justify-self: end; }
    .cp-dias { font-size: 11px; align-self: end; }

    /* Login no celular: sem cartão, campos 44 px */
    .auth { align-items: flex-start; padding: 56px 16px 32px; }
    .auth-cartao, .auth-cartao.largo { width: 100%; padding: 0; border: 0; background: none; border-radius: 0; }
    .auth-marca { font-size: 17px; gap: 10px; margin-bottom: 8px; }
    .auth-marca .logo { width: 22px; height: 22px; border-radius: 6px; }
    .auth-titulo { font-size: 22px; }
    .auth-sub { font-size: 13px; }
    .auth-cartao .rotulo { font-size: 13px; }
    .auth-cartao .btn-primario { min-height: 44px; font-size: 15px; margin-top: 4px; }
    .auth-rodape { border-top: 0; padding-top: 0; text-align: center; font-size: 12.5px; }
    .auth-links { flex-direction: column; align-items: center; font-size: 14px; }
    .auth-links a, .auth-links span { min-height: 44px; display: flex; align-items: center; }

    .codigo { width: 100%; max-width: 348px; height: 58px; }
    .codigo-caixas { gap: 7px; }
    .codigo-caixas > span { width: 51px; height: 58px; border-radius: 9px; background: var(--panel); }
    .codigo > input { font-size: 26px; letter-spacing: 42.4px; padding-left: 17.7px; }

    .check { width: 20px; height: 20px; border-radius: 5px; }
    .check::before { inset: -12px; }
    .check.on::after { left: 6px; top: 2px; width: 5px; height: 10px; border-width: 0 2px 2px 0; }

    .dl > div { grid-template-columns: 112px minmax(0, 1fr); }
    .dl { font-size: 13px; }
    .bare { align-items: flex-start; padding-top: 72px; }
}

/* ───────────────── 19. Edição na tela (editavel.js) ─────────────────
   Estilo Notion: clicar no valor e mudar ali. HTML pelos helpers de app/lib/editavel.php; modelos em /kit#edicao.
   .ed (propriedade) · .ed-vazio · .ed-lapis (url) · .ed-pop (menu de opções / data; no celular vira folha) · .ed-novo ("+ Novo")
   .ed-dialogo (pede motivo) · .ed-erro / .ed-toast · .peek (página lateral) · .nt-props (propriedades em 2 colunas)
   .nt-tabela (tabela leve, célula editável) · .nt-quadro (quadro leve com arrastar) · .nt-visoes (Quadro | Tabela) */

/* propriedade editável: parece texto; o fundo aparece ao passar o mouse */
.ed {
    display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% + 12px); min-width: 0; min-height: 26px;
    padding: 3px 6px; margin: -3px -6px; border-radius: 5px; cursor: pointer; vertical-align: middle;
    transition: background-color .1s;
}
.ed:hover, .ed.ed-aberto { background: var(--soft); }
.ed:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; }
.ed-v { min-width: 0; overflow-wrap: anywhere; }
.ed-vazio { color: var(--mute); opacity: .8; font-weight: 400; }
.ed[data-estado="salvando"] .ed-v { opacity: .55; }
.ed[data-estado="salvando"]::after { content: "salvando…"; flex: none; font-family: var(--sans); font-size: 11px; font-weight: 400; color: var(--mute); white-space: nowrap; }
.ed.ed-editando { cursor: text; background: none; }
.ed-ler { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ed-inp {
    width: 100%; min-width: 120px; height: 28px; padding: 0 8px; margin: -1px 0;
    border: 0; border-radius: 5px; outline: none; background: var(--panel); color: var(--ink); font: inherit;
    box-shadow: 0 0 0 1px var(--line), 0 4px 14px oklch(0.2 0.01 250 / 0.1);
}
.ed-inp.mono { font-family: var(--mono); font-size: 12.5px; }
textarea.ed-inp { display: block; height: auto; min-height: 60px; padding: 6px 8px; resize: none; line-height: 1.5; }
.ed-caixa {
    display: flex; align-items: center; gap: 6px; width: 100%; min-width: 120px; height: 28px; padding: 0 8px; margin: -1px 0;
    border-radius: 5px; background: var(--panel); box-shadow: 0 0 0 1px var(--line), 0 4px 14px oklch(0.2 0.01 250 / 0.1);
}
.ed-caixa .ed-inp { min-width: 0; height: 100%; padding: 0; margin: 0; box-shadow: none; background: none; }
.ed-pref { flex: none; font-family: var(--mono); font-size: 11.5px; color: var(--mute); }
.ed-textarea { display: flex; width: calc(100% + 12px); align-items: flex-start; }
.ed-textarea > .ed-v { white-space: pre-line; line-height: 1.55; }
/* url: o link abre; o lápis (ou clique duplo) edita */
.ed-url { cursor: default; }
.ed-url:has(> .ed-v > .ed-vazio) { cursor: pointer; }
.ed-url > .ed-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-url > .ed-v a { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in oklch, var(--mute) 45%, transparent); text-underline-offset: 3px; }
.ed-url > .ed-v a:hover { text-decoration-color: var(--ink); }
.ed-lapis {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: auto;
    padding: 0; border: 0; border-radius: 4px; background: none; color: var(--mute); opacity: 0;
}
.ed-lapis svg { width: 13px; height: 13px; }
.ed-url:hover .ed-lapis, .ed-lapis:focus-visible { opacity: 1; }
.ed-lapis:hover { background: var(--line); color: var(--ink); }
.ed-editando > .ed-lapis { display: none; }
/* caixa que conclui na hora */
.ed.ed-checkbox { margin: 0; padding: 0; min-height: 0; }
.ed-checkbox:hover { background: var(--bg); border-color: var(--ink); }
.ed-checkbox.on:hover { background: var(--acc); }
/* valor calculado (só leitura) que muda junto: [data-espelho] + data-tom */
[data-espelho][data-tom="red"] { color: var(--red-ink); }
[data-espelho][data-tom="acc"] { color: var(--acc-ink); }
[data-espelho][data-tom="amber"] { color: var(--amber-ink); }
[data-espelho][data-tom="mute"] { color: var(--mute); }

/* popover: menu de opções (pílulas como no Notion), pessoa, data com atalhos */
.ed-pop {
    position: fixed; z-index: 90; min-width: 220px; max-width: min(340px, calc(100vw - 16px));
    display: flex; flex-direction: column; gap: 4px; padding: 4px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--sombra); font-size: 13px;
}
.ed-lista { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; }
.ed-op {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 32px;
    padding: 4px 8px; border: 0; border-radius: 5px; background: none; color: var(--ink); text-align: left;
}
.ed-op:hover, .ed-op.ativo, .ed-op:focus-visible { background: var(--soft); outline: none; }
.ed-op .pill { align-self: center; }
.ed-op-ok { flex: none; width: 12px; font-size: 12px; line-height: 1; color: var(--ink); }
.ed-op.on .ed-op-ok::after { content: "✓"; }
.ed-busca { height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); outline: none; }
.ed-busca:focus { border-color: var(--ink); }
.ed-pop-data { padding: 8px; gap: 8px; min-width: 236px; }
.ed-inp-data { height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); font-family: var(--mono); font-size: 12.5px; }
.ed-inp-data:focus { outline: none; border-color: var(--ink); }
.ed-atalhos { display: flex; gap: 4px; flex-wrap: wrap; }
.ed-atalho { height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); color: var(--ink); font-size: 12px; }
.ed-atalho:hover, .ed-atalho.on { background: var(--soft); }
.ed-veu { position: fixed; inset: 0; z-index: 89; background: var(--veil); }

/* erro curto embaixo do campo · aviso no rodapé */
.ed-erro {
    position: fixed; z-index: 95; max-width: 320px; padding: 6px 10px; border-radius: 6px; pointer-events: none;
    background: var(--red-bg); color: var(--red-ink); font-size: 12px; font-weight: 500; line-height: 1.35; box-shadow: var(--sombra);
}
.ed-toast {
    position: fixed; z-index: 95; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: 420px; pointer-events: none;
    padding: 9px 14px; border-radius: 8px; background: var(--ink); color: var(--bg); font-size: 12.5px; box-shadow: var(--sombra); transition: opacity .3s;
}
.ed-toast.sai { opacity: 0; }

/* diálogo curto (ex.: soltar em Morto pede o motivo) */
.ed-dialogo-veu { position: fixed; inset: 0; z-index: 92; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--veil); }
.ed-dialogo {
    width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--sombra);
}
.ed-dialogo h2 { font-size: 15px; }
.ed-dialogo textarea.inp { min-height: 76px; }
.ed-dialogo-rodape { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* "+ Novo": linha fantasma no fim da lista; vira campo ao focar */
.ed-novo { position: relative; display: flex; align-items: center; gap: 6px; margin: 0; min-width: 0; }   /* relative: o botão .vh fica preso aqui (não alarga a página no quadro do celular) */
.ed-novo-inp {
    flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 8px; border: 0; border-radius: 5px; outline: none;
    background: none; color: var(--ink); font: inherit; font-size: 13px;
}
textarea.ed-novo-inp { height: auto; min-height: 34px; padding: 7px 8px; resize: none; line-height: 1.45; }
.ed-novo-inp::placeholder { color: var(--mute); opacity: 1; }
.ed-novo-inp:hover { background: var(--soft); }
.ed-novo-inp:focus { background: var(--panel); box-shadow: 0 0 0 1px var(--line); }
.ed-novo-inp:focus::placeholder { opacity: .55; }
.ed-novo.ed-enviando { opacity: .55; pointer-events: none; }
.ed-novo-arq { position: relative; flex: none; display: inline-flex; align-items: center; height: 28px; padding: 0 9px; border-radius: 5px; font-size: 12px; color: var(--mute); cursor: pointer; white-space: nowrap; }
.ed-novo-arq:hover { background: var(--soft); color: var(--ink); }
.ed-novo-arq > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ed-novo-arq:focus-within { outline: 2px solid var(--ink); outline-offset: 1px; }

/* página lateral (peek): abre à direita; no celular, tela cheia */
.peek {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 72; width: min(580px, 100vw);
    display: flex; flex-direction: column; background: var(--panel); border-left: 1px solid var(--line);
    box-shadow: -14px 0 36px oklch(0.2 0.01 250 / 0.12); transform: translateX(28px); opacity: 0;
    transition: transform .16s ease, opacity .16s ease;
}
.peek.aberto { transform: none; opacity: 1; }
.peek:focus { outline: none; }
.peek-cab { flex: none; display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 10px; border-bottom: 1px solid var(--line); }
.peek-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border: 0; border-radius: 5px;
    background: none; color: var(--mute); font-size: 12.5px; white-space: nowrap;
}
.peek-btn:hover { background: var(--soft); color: var(--ink); text-decoration: none; }
.peek-x { font-size: 19px; line-height: 1; }
.peek-voltar { display: none; }
.peek-corpo { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 24px 32px 56px; }
.peek-carregando { padding: 8px 0; font-size: 12.5px; color: var(--mute); }
tr.peek-atual > td { background: var(--soft); }
[data-papel].peek-atual { box-shadow: 0 0 0 2px var(--acc); border-radius: 8px; }

/* propriedades em duas colunas: rótulo cinza · valor (clica e edita) */
.nt-props { display: grid; grid-template-columns: minmax(110px, 192px) minmax(0, 1fr); column-gap: 10px; row-gap: 1px; font-size: 13px; }
.nt-props > .nt-rot { display: flex; align-items: center; gap: 7px; min-height: 32px; padding: 4px 0; color: var(--mute); min-width: 0; }
.nt-props > .nt-val { display: flex; align-items: center; min-height: 32px; min-width: 0; padding-left: 6px; }
.nt-val > .ed { display: flex; width: calc(100% + 12px); min-height: 28px; }
.nt-val > .ed-ler { padding: 0; }
.nt-calc { font-family: var(--mono); font-size: 12.5px; }
.nt-ico { width: 14px; height: 14px; flex: none; color: var(--mute); }

/* tabela leve: sem caixas, cabeçalho discreto, linha com hover, célula editável */
.nt-tabela-rolagem { position: relative; overflow-x: auto; min-width: 0; }   /* relative: o .vh do cabeçalho não alarga a página */
.nt-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.nt-tabela th {
    text-align: left; font-weight: 400; font-size: 12px; color: var(--mute); white-space: nowrap;
    padding: 6px 10px; border-bottom: 1px solid var(--line);
}
.nt-tabela td { height: 38px; padding: 3px 10px; border-bottom: 1px solid color-mix(in oklch, var(--line) 65%, transparent); vertical-align: middle; }
.nt-tabela tbody tr:hover > td { background: color-mix(in oklch, var(--soft) 60%, transparent); }
.nt-tabela td > .ed { display: flex; width: calc(100% + 12px); }
.nt-tabela .num { text-align: right; font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.nt-tabela th.num { font-family: var(--sans); }
.nt-tabela .num > .ed { justify-content: flex-end; }
/* célula vazia fica em branco (como no Notion); o "Vazio" aparece ao passar o mouse */
.nt-tabela td .ed-vazio { opacity: 0; transition: opacity .1s; }
.nt-tabela td:hover .ed-vazio, .nt-tabela td .ed:focus-visible .ed-vazio, .nt-tabela td .ed-aberto .ed-vazio { opacity: .7; }
.nt-tabela-novo { border-bottom: 1px solid color-mix(in oklch, var(--line) 65%, transparent); padding: 3px 4px; }

/* quadro leve: colunas sem caixa, cartões arrastáveis */
.nt-quadro { gap: 12px; }
.nt-quadro .quadro-col { padding: 0; gap: 6px; background: none; border-radius: 8px; transition: background-color .12s, box-shadow .12s; }
.nt-quadro .quadro-col.alvo { background: var(--soft); box-shadow: 0 0 0 6px var(--soft); }
.nt-quadro .quadro-col.morto { opacity: 1; }
.quadro-lista { display: flex; flex-direction: column; gap: 6px; min-height: 6px; }
[data-quadro] [data-papel].arrastando { opacity: .35; }
[data-quadro] [data-papel].salvando { opacity: .6; pointer-events: none; }
[data-quadro] [draggable="true"] { cursor: grab; }
[data-quadro] [draggable="true"]:active { cursor: grabbing; }

/* alternador de visão (Quadro | Tabela) */
.nt-visoes { display: inline-flex; gap: 2px; font-size: 12.5px; }
.nt-visoes > a { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 6px; color: var(--mute); }
.nt-visoes > a:hover { background: var(--soft); color: var(--ink); text-decoration: none; }
.nt-visoes > a.on { background: var(--soft); color: var(--ink); font-weight: 500; }
.nt-visoes svg { width: 14px; height: 14px; }

/* linha de tarefa editável (tarefas/_linha_ed.php: Início, produto, lojas…): caixa · título · prazo · responsável */
.tl { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto auto; gap: 4px 12px; align-items: center; min-height: 38px; padding: 4px 8px; border-radius: 6px; }
.tl:hover { background: color-mix(in oklch, var(--soft) 60%, transparent); }
.tl-corpo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tl-corpo > .ed { align-self: flex-start; }
.tl-sub { font-family: var(--mono); font-size: 11px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-prazo { font-size: 12px; white-space: nowrap; }
.tl-resp .av { display: inline-flex; }
.tl:has(> .ed-checkbox.on) .tl-corpo > .ed .ed-v { color: var(--mute); text-decoration: line-through; text-decoration-color: color-mix(in oklch, var(--mute) 60%, transparent); }
.tl:has(> .ed-checkbox.on) .tl-prazo .ed-v > span { color: var(--mute); font-weight: 400; }

@media (hover: none) {
    .ed-lapis { opacity: .7; }
}
@media (max-width: 899.98px) {
    .ed { min-height: 32px; }
    .ed-inp, .ed-busca { height: 40px; font-size: 16px; }
    .ed-inp.mono { font-size: 16px; }
    textarea.ed-inp { font-size: 16px; }
    .ed-caixa { height: 40px; }
    .ed-lapis { width: 36px; height: 36px; }
    .ed-pop.folha {
        left: 8px; right: 8px; top: auto; bottom: calc(8px + env(safe-area-inset-bottom));
        max-width: none; padding: 6px; border-radius: 12px; font-size: 14px;
    }
    .ed-pop.folha .ed-lista { max-height: 60vh; }
    .ed-op { min-height: 44px; padding: 0 12px; }
    .ed-pop-data { padding: 12px; gap: 10px; }
    .ed-inp-data { height: 44px; font-size: 16px; }
    .ed-atalho { height: 40px; padding: 0 16px; border-radius: 20px; font-size: 13px; }
    .ed-toast { bottom: calc(84px + env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); }
    .ed-dialogo-veu { align-items: flex-end; padding: 0; }
    .ed-dialogo { max-width: none; border-radius: 14px 14px 0 0; padding: 18px 16px max(18px, env(safe-area-inset-bottom)); }
    .ed-dialogo-rodape .btn { flex: 1 1 0; }
    .ed-dialogo textarea.inp { font-size: 16px; }
    .ed-novo-inp { height: 44px; font-size: 16px; }
    textarea.ed-novo-inp { min-height: 44px; padding: 11px 8px; }
    .ed-novo-arq { height: 44px; font-size: 13px; }
    html.com-peek, html.com-peek body { overflow: hidden; }
    .peek { width: 100vw; border-left: 0; box-shadow: none; transform: translateX(100%); opacity: 1; transition: transform .2s ease; }
    .peek.aberto { transform: none; }
    .peek-cab { height: 52px; padding: env(safe-area-inset-top) 8px 0; box-sizing: content-box; }
    .peek-btn { min-height: 44px; font-size: 14px; }
    .peek-x { display: none; }
    .peek-voltar { display: inline; }
    .peek-corpo { padding: 16px 16px calc(40px + env(safe-area-inset-bottom)); }
    .nt-props { grid-template-columns: minmax(96px, 120px) minmax(0, 1fr); column-gap: 6px; }
    .nt-props > .nt-rot, .nt-props > .nt-val { min-height: 44px; }
    .nt-val > .ed { min-height: 40px; }
    .nt-tabela { min-width: 880px; }
    .nt-tabela td { height: 46px; }
    .nt-tabela th:first-child, .nt-tabela td:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); }
    .nt-visoes > a { height: 40px; padding: 0 14px; font-size: 13px; }
    .tl { grid-template-columns: 20px minmax(0, 1fr) auto auto; min-height: 48px; padding: 4px 4px; gap: 4px 10px; }
    .tl-corpo > .ed { font-size: 14px; }
}

/* ───────────────── 21. Mesa v3: Ofertas, Tarefas, Senhas, Cartões ─────────────────
   Estilo Notion: menos caixas, respiro, hover sutil. Prefixos: side-/top- moldura · qd- quadro (Ofertas e Tarefas) ·
   pg- item aberto (página lateral e inteira) · of- Ofertas · ta- Tarefas · pl- planilha (Senhas, Cartões) · au-mais "Mais". */

/* moldura: ícones no menu, rodapé com Usuários, tema e Sair; título discreto na barra de cima */
.side-item { justify-content: flex-start; }
.side-ico { display: inline-flex; flex: none; width: 18px; height: 18px; color: var(--mute); }
.side-ico svg { width: 18px; height: 18px; }
.side-item.on .side-ico { color: var(--ink); }
.side-l { flex: 1 1 auto; min-width: 0; }
.side-item-p { font-size: 12.5px; color: var(--mute); }
.side-item-p.on { color: var(--ink); }
.side-pe { flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 0 2px; }
.side-tema { display: flex; gap: 2px; padding: 2px; margin: 0 8px; border-radius: 7px; background: var(--soft); }
.side-tema button { flex: 1 1 0; min-height: 22px; padding: 2px 0; border: 0; border-radius: 5px; background: none; color: var(--mute); font-size: 11.5px; }
.side-tema button:hover { color: var(--ink); }
.side-tema button.on { background: var(--panel); color: var(--ink); font-weight: 500; }
/* Espaços: seletor Compartilhado | Privado embaixo da marca */
.side-espaco { margin: 0 8px 10px; }
.side-espaco button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: 12px; min-height: 26px; }
.side-espaco button.on[value="privado"] { background: var(--amber-bg); color: var(--amber-ink); }
.au-mais-tema.side-espaco { margin: 0; }
.esp-ico { flex: none; }
.side-eu-linha { display: flex; align-items: center; gap: 8px; padding: 4px 8px 0; }
.top-titulo { font-size: 13px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.topbar { border-bottom-color: color-mix(in oklch, var(--line) 70%, transparent); }
.mnav-3 { grid-template-columns: repeat(3, 1fr) !important; }
.mnav-4 { grid-template-columns: repeat(4, 1fr) !important; }
.filtrado { display: none !important; }
.menu-lista { text-align: left; }                 /* .menu.direita não herda o .direita (texto à direita) */
.qd-col-menu .dot-mute, .qd-mover .dot-mute, .quadro-abas .dot-mute { background: var(--mute); }
.vazio-busca { font-size: 12.5px; color: var(--mute); padding: 6px 2px; }

/* busca e filtros da página */
.of-filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.of-busca { position: relative; display: flex; align-items: center; flex: 0 1 320px; min-width: 180px; }
.of-busca svg { position: absolute; left: 9px; width: 14px; height: 14px; color: var(--mute); pointer-events: none; }
.of-busca input {
    width: 100%; height: 30px; padding: 0 10px 0 30px; border: 1px solid transparent; border-radius: 7px;
    background: var(--soft); color: var(--ink); font-size: 13px;
}
.of-busca input::placeholder { color: var(--mute); opacity: 1; }
.of-busca input:focus { outline: none; background: var(--panel); border-color: var(--line); box-shadow: 0 0 0 3px var(--soft); }
.of-limpar { font-size: 12px; color: var(--mute); }
.of-limpar:hover { color: var(--ink); }

/* quadro (Ofertas e Tarefas): colunas de 272 px lado a lado, rolam de lado; cartões leves */
.qd-quadro { display: flex; gap: 14px; overflow-x: auto; align-items: flex-start; padding-bottom: 14px; }
.qd-quadro > .qd-col { flex: 1 0 236px; max-width: 340px; min-height: 140px; }
.qd-cab { justify-content: flex-start; gap: 6px; min-height: 30px; padding: 0 2px 4px; font-weight: 400; }
.qd-cab .pill { font-size: 12px; }
.qd-cab .n { font-family: var(--mono); font-size: 11.5px; color: var(--mute); }
.qd-cab .esp { flex: 1 1 auto; }
.qd-col-nome { margin: -3px -6px; }
.qd-col-nome .ed-inp { min-width: 140px; }
.qd-col-menu > summary {
    display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 5px;
    color: var(--mute); font-size: 14px; line-height: 1; opacity: 0;
}
.qd-col:hover .qd-col-menu > summary, .qd-col-menu[open] > summary, .qd-col-menu > summary:focus-visible { opacity: 1; }
.qd-col-menu > summary:hover, .qd-col-menu[open] > summary { background: var(--soft); color: var(--ink); }
.qd-col-menu .menu-lista { min-width: 220px; }
.qd-col-menu .menu-lista button:disabled { color: var(--mute); opacity: .5; cursor: default; background: none; }
.qd-cores { display: flex; gap: 4px; padding: 4px 10px 6px; }
.menu-lista .qd-cor { width: 30px; height: 30px; padding: 0; justify-content: center; border: 1px solid transparent; border-radius: 7px; }
.menu-lista .qd-cor.on { border-color: var(--ink); }
.menu-lista .qd-cor .dot-mute { background: var(--mute); }
.qd-cartao {
    position: relative; min-width: 0; border-radius: 8px; background: var(--panel); border: 1px solid var(--line);
    box-shadow: 0 1px 2px oklch(0.2 0.01 250 / 0.05); transition: background-color .1s, box-shadow .1s;
}
.qd-cartao:hover { background: color-mix(in oklch, var(--panel) 80%, var(--soft)); }
.qd-link { display: flex; flex-direction: column; gap: 5px; padding: 9px 30px 9px 10px; color: var(--ink); -webkit-user-drag: none; }
.qd-link:hover { text-decoration: none; }
.qd-tit { font-size: 13px; font-weight: 500; line-height: 1.32; overflow-wrap: anywhere; }
.qd-nicho { font-size: 11.5px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qd-nicho:empty { display: none; }
.qd-pe { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 18px; }
.qd-dom { font-family: var(--mono); font-size: 10.5px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.qd-pe > .av { margin-left: auto; }
.qd-mover { position: absolute; top: 5px; right: 5px; }
.qd-mover > summary {
    display: flex; align-items: center; justify-content: center; width: 22px; height: 22px;
    border-radius: 5px; color: var(--mute); font-size: 14px; line-height: 1; opacity: 0;
}
.qd-cartao:hover .qd-mover > summary, .qd-mover[open] > summary, .qd-mover > summary:focus-visible { opacity: 1; }
.qd-mover > summary:hover, .qd-mover[open] > summary { background: var(--soft); color: var(--ink); }
.qd-mover .menu-lista { min-width: 170px; }
.qd-novo .ed-novo-inp { height: 30px; font-size: 12.5px; }
.qd-quadro > .qd-col-nova { flex: 0 0 150px; min-height: 0; padding-top: 34px; }
.qd-aba-nova { display: none !important; }
.ta-cartao.atrasada { box-shadow: inset 2px 0 0 var(--red), 0 1px 2px oklch(0.2 0.01 250 / 0.05); }
.ta-cartao.feita .qd-tit { color: var(--mute); text-decoration: line-through; text-decoration-color: color-mix(in oklch, var(--mute) 60%, transparent); }
.ta-prazo { font-size: 11.5px; color: var(--mute); white-space: nowrap; }
.ta-prazo.t-red { color: var(--red-ink); font-weight: 600; }
.ta-mais { display: block; padding: 4px 8px; font-size: 12px; color: var(--mute); }
.ta-mais:hover { color: var(--ink); }
.ta-pagina { gap: 14px; }

/* item aberto (página lateral e inteira): título grande, propriedades, seções sem caixa */
.pg-pagina { width: 100%; max-width: 820px; margin: 0 auto; gap: 18px; }
.pg { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.pg-titulo { width: 100%; font-size: 30px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.pg-titulo .ed { margin: -4px -8px; padding: 4px 8px; width: calc(100% + 16px); }
.pg-titulo .ed-inp { height: auto; padding: 2px 8px; font-size: inherit; font-weight: inherit; line-height: 1.25; }
.peek-corpo .pg-titulo { font-size: 26px; }
.pg-props { margin-top: -10px; }
.pg-sec { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pg-h {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
    font-size: 12px; font-weight: 600; color: var(--mute);
}
.pg-n { font-family: var(--mono); font-size: 11px; font-weight: 400; }
.pg-texto { display: flex; width: calc(100% + 12px); min-height: 32px; align-items: flex-start; font-size: 13.5px; }
.pg-tarefas { display: flex; flex-direction: column; margin: 0 -8px; }
.pg-pe { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--mute); }
.pg-pe .esp { flex: 1 1 auto; }
.pg-link { font-size: 12px; color: var(--ink); }
.pg-excluir { padding: 4px 8px; border: 0; border-radius: 5px; background: none; color: var(--mute); font-size: 12px; }
.pg-excluir:hover { background: var(--red-bg); color: var(--red-ink); }

/* links da oferta */
.of-links { display: flex; flex-direction: column; }
.of-links-lote { display: contents; }
.of-link {
    display: grid; grid-template-columns: minmax(96px, 170px) minmax(0, 1fr) auto; gap: 10px; align-items: center;
    min-height: 36px; padding: 1px 4px; margin: 0 -4px; border-radius: 6px;
}
.of-link:hover { background: color-mix(in oklch, var(--soft) 60%, transparent); }
.of-link-rot { font-weight: 500; }
.of-link-rot .ed-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.of-link-url { font-family: var(--mono); font-size: 12px; min-width: 0; }
.of-link-acoes { display: flex; gap: 2px; opacity: 0; }
.of-link:hover .of-link-acoes, .of-link:focus-within .of-link-acoes { opacity: 1; }
.of-link-btn {
    display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px;
    border: 0; border-radius: 5px; background: none; color: var(--mute); font-size: 12px; white-space: nowrap;
}
.of-link-btn:hover { background: var(--soft); color: var(--ink); text-decoration: none; }
.of-link-btn.copiado { color: var(--acc-ink); }
.of-link-x { font-size: 15px; }
.of-link-x:hover { color: var(--red-ink); background: var(--red-bg); }
.of-link-novo .ed-novo-inp { font-family: var(--mono); font-size: 12.5px; }

/* ofertas: página, tabela, começo */
.of-pagina { gap: 12px; }
.of-cab .nt-visoes { margin-left: 6px; }
.of-comece { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 10px; color: var(--mute); }
.of-tabela .of-c-tit { min-width: 280px; }
.of-tit-cel { display: flex; align-items: center; gap: 8px; min-width: 0; }
.of-tit-ed { flex: 1 1 auto; font-weight: 500; }
.of-c-dom { font-family: var(--mono); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.nt-abrir {
    flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 7px;
    border: 1px solid var(--line); border-radius: 5px; background: var(--panel); font-size: 11.5px; color: var(--mute); opacity: 0;
}
.nt-tabela tr:hover .nt-abrir, .nt-abrir:focus-visible { opacity: 1; }
.nt-abrir:hover { color: var(--ink); text-decoration: none; background: var(--soft); }

/* ideias: lista (mesma cara da tabela de ofertas); contagem discreta no menu; Ideia no painel */
.side-n { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--mute); }
.id-linha { cursor: pointer; }
.id-tabela .id-c-tit { min-width: 280px; }
.id-tabela .id-c-anuncios { width: 110px; }
.id-tabela .id-c-dom { width: 340px; }
.id-tabela .of-c-dom { max-width: 340px; }
.id-tabela .id-c-acoes { width: 1%; white-space: nowrap; text-align: right; }
.id-tit { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 3px 0; color: var(--ink); }
.id-tit:hover { text-decoration: none; }
.id-tit-t { font-weight: 500; line-height: 1.32; overflow-wrap: break-word; }
.id-nicho { font-size: 11.5px; color: var(--mute); }
.id-nicho:empty { display: none; }
.id-acoes { display: inline-flex; align-items: center; gap: 4px; }
.id-btn {
    flex: none; height: 22px; padding: 0 7px; border: 1px solid var(--line); border-radius: 5px;
    background: var(--panel); color: var(--mute); font-size: 11.5px; white-space: nowrap; opacity: 0;
}
.nt-tabela tr:hover .id-btn, .id-linha:focus-within .id-btn, .id-linha.peek-atual .id-btn { opacity: 1; }
.id-btn:hover { background: var(--soft); color: var(--ink); }
.id-btn[aria-busy="true"] { opacity: .5; }
.id-x { border-color: transparent; background: none; font-size: 15px; line-height: 1; }
.id-x:hover { background: var(--red-bg); color: var(--red-ink); }
.pg-ideia { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pg-ideia > .pill { align-self: center; }
.pg-subir { height: 26px; }
.pg-para-ideias { padding: 4px 8px; border: 0; border-radius: 5px; background: none; color: var(--mute); font-size: 12px; }
.pg-para-ideias:hover { background: var(--soft); color: var(--ink); }
.of-imp-ideias { font-size: 12.5px; }
.of-imp-acoes:has(.of-imp-ideias .chk:checked) .of-imp-padrao { display: none; }

/* importar */
.of-imp { max-width: 980px; gap: 14px; }
.of-imp-texto { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.of-imp-caixa { min-height: 280px; font-size: 12.5px; line-height: 1.55; }
.of-imp-texto.recolhido .of-imp-caixa { min-height: 160px; }
.of-imp-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.of-imp-acoes .esp { flex: 1 1 auto; }
.of-imp-padrao { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.of-imp-padrao .inp { width: auto; min-width: 150px; height: 30px; }
.of-imp-det > summary { padding: 6px 0; font-size: 12.5px; color: var(--ink); }
.of-imp-det > summary::before { content: "▸"; display: inline-block; margin-right: 6px; font-size: 10px; transition: transform .12s; }
.of-imp-det[open] > summary::before { transform: rotate(90deg); }
.of-imp-det[open] { display: flex; flex-direction: column; gap: 8px; }
.of-imp-lista { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.of-imp-item { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.of-imp-item:has(.chk:not(:checked)) .of-imp-corpo { opacity: .45; }
.of-imp-check { padding-top: 9px; }
.of-imp-corpo { display: flex; flex-direction: column; gap: 6px; min-width: 0; transition: opacity .12s; }
.of-imp-linha1 { display: grid; grid-template-columns: minmax(0, 1fr) 150px 170px; gap: 8px; }
.of-imp-tit { font-weight: 500; }
.of-imp-links { min-height: 0; padding: 6px 10px; font-size: 12px; line-height: 1.5; resize: vertical; }
.of-imp-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.of-imp-previa .form-acoes { margin-top: 14px; }
.of-imp-previa .form-acoes .esp { flex: 1 1 auto; }

/* planilha (Senhas, Cartões) */
.pl-pagina { gap: 12px; }
.pl-tabela .pl-c1 { min-width: 200px; }
.pl-forte { font-weight: 500; }
.pl-tabela td:not(.pl-obs) .ed-v { white-space: nowrap; }
.pl-copia { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pl-copia > .ed { flex: 1 1 auto; min-width: 0; }
.pl-copia > .ed .ed-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-btn {
    flex: none; height: 22px; padding: 0 7px; border: 1px solid var(--line); border-radius: 5px;
    background: var(--panel); color: var(--mute); font-size: 11.5px; opacity: 0;
}
.nt-tabela tr:hover .pl-btn, .pl-btn:focus-visible, .pl-btn.copiado { opacity: 1; }
.pl-btn:hover { background: var(--soft); color: var(--ink); }
.pl-btn.copiado { color: var(--acc-ink); border-color: var(--acc); }
.pl-tabela .pl-x { width: 76px; text-align: right; white-space: nowrap; }
.pl-espaco { border-color: transparent; padding: 0 6px; display: inline-flex; align-items: center; vertical-align: middle; }
.pl-espaco svg { display: block; }
.pl-excluir { border-color: transparent; padding: 0 7px; font-size: 15px; line-height: 1; }
.pl-excluir:hover { background: var(--red-bg); color: var(--red-ink); }
.pl-obs { min-width: 200px; }
.pl-tabela td > .ed-textarea { min-height: 28px; }
.pl-tabela td > .ed-textarea > .ed-v { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ct-tabela .num > .ed { justify-content: flex-end; }

/* Regras: filtros em duas linhas de chips; título quebra linha; detalhe inteiro (sem cortar em 2 linhas) */
.rg-filtros { display: flex; flex-direction: column; gap: 6px; }
.rg-tabela .rg-c-tit { min-width: 220px; }
.rg-tabela .rg-c-tit .ed-v { white-space: normal; }
.rg-tabela td.rg-c-det > .ed-textarea > .ed-v { display: block; -webkit-line-clamp: none; overflow: visible; }
.rg-tabela td { vertical-align: top; }

/* Rodando: resumo em números, um painel por destino (oferta) com as campanhas */
.rd-pagina { gap: 14px; }
.rd-resumo { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.rd-kpi { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); min-width: 0; }
.rd-kpi-v { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-kpi-r { font-size: 12px; color: var(--mute); }
.rd-destino { overflow: hidden; }
.rd-dest-cab { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px 4px; }
.rd-dest-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.rd-dest-t h2 { font-size: 15px; font-weight: 600; }
.rd-dest-t h2 a { color: var(--ink); }
.rd-url { font-family: var(--mono); font-size: 12px; color: var(--mute); overflow-wrap: anywhere; }
.rd-dest-n { font-size: 12px; color: var(--mute); white-space: nowrap; }
.rd-metricas { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 8px 14px 12px; }
.rd-metricas > div { display: flex; flex-direction: column; gap: 1px; }
.rd-m-r { font-size: 11.5px; color: var(--mute); }
.rd-m-v { font-size: 13.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.rd-tabela td.num, .rd-tabela th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-camp { min-width: 260px; }
@media (max-width: 760px) {
    .rd-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rd-resumo .rd-kpi:first-child { grid-column: 1 / -1; }
    .rd-dest-cab { flex-direction: column; gap: 4px; }
    .rd-camp { min-width: 200px; }
}

/* "Mais" (celular) */
.au-mais .linha { min-height: 48px; }
.au-mais-ico { display: inline-flex; width: 20px; height: 20px; color: var(--mute); }
.au-mais-ico svg { width: 20px; height: 20px; }
.au-mais-tema { margin: 0; min-width: 210px; }
.au-mais-tema button { min-height: 32px; font-size: 13px; }

@media (hover: none) {
    .qd-mover > summary, .qd-col-menu > summary, .nt-abrir, .pl-btn, .of-link-acoes, .id-btn { opacity: 1; }
}
@media (max-width: 899.98px) {
    /* quadro: abas fixas, uma coluna por tela, cabeçalho da coluna visível (renomear/cor), "⋯" de 44 px */
    .qd-quadro { gap: 16px; padding-bottom: 0; }
    .qd-quadro > .qd-col, .qd-quadro > .qd-col-nova { flex: 0 0 100%; max-width: none; min-height: 0; padding-top: 0; }
    .qd-quadro .qd-cab { display: flex; min-height: 40px; }
    .qd-col-menu > summary { width: 40px; height: 40px; font-size: 18px; opacity: 1; }
    .qd-aba-nova { display: flex !important; }
    .qd-link { padding: 12px 52px 12px 12px; gap: 6px; }
    .qd-tit { font-size: 14px; }
    .qd-nicho, .ta-prazo { font-size: 12.5px; }
    .qd-dom { font-size: 11.5px; }
    .qd-mover { top: 2px; right: 2px; }
    .qd-mover > summary { width: 44px; height: 44px; font-size: 18px; opacity: 1; }
    .qd-novo .ed-novo-inp { height: 44px; font-size: 16px; }
    .quadro-abas .dot { width: 7px; height: 7px; }
    .of-busca { flex: 1 1 100%; }
    .of-busca input { height: 40px; font-size: 16px; }
    .of-filtros .btn-menu { height: 40px; }
    /* item aberto */
    .pg { gap: 22px; }
    .pg-titulo, .peek-corpo .pg-titulo { font-size: 22px; }
    .of-link { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "rot acoes" "url url"; gap: 0 8px; padding: 6px 0; margin: 0; }
    .of-link-rot { grid-area: rot; }
    .of-link-url { grid-area: url; }
    .of-link-acoes { grid-area: acoes; opacity: 1; }
    .of-link-btn { min-width: 40px; height: 40px; font-size: 13px; }
    .pg-excluir, .pg-para-ideias { min-height: 44px; }
    /* importar */
    .of-imp-linha1 { grid-template-columns: minmax(0, 1fr); }
    .of-imp-caixa { min-height: 220px; font-size: 15px; }
    .of-imp-padrao { flex-wrap: wrap; }
    /* planilha: rola de lado, 1ª coluna fixa, células de 46 px, botões de 36 px */
    .pl-tabela { min-width: 980px; }
    .pl-btn { height: 36px; padding: 0 10px; font-size: 12.5px; opacity: 1; }
    .pl-excluir { width: 40px; font-size: 18px; }
    .pl-tabela .pl-c1 { min-width: 0; width: 132px; max-width: 132px; }
    .pl-tabela .pl-c1 .ed-v { overflow: hidden; text-overflow: ellipsis; }
    .side-tema button { min-height: 36px; }
    /* ideias: rola de lado com o título fixo; botões de 40 px */
    .id-tabela { min-width: 620px; }
    .id-tabela .id-c-tit { min-width: 170px; width: 170px; }
    .id-tabela .id-c-dom { width: 170px; }
    .id-tabela .of-c-dom { max-width: 170px; }
    .id-tit-t { font-size: 14px; }
    .id-nicho { font-size: 12.5px; }
    .id-btn { height: 40px; padding: 0 12px; font-size: 13px; opacity: 1; }
    .id-x { width: 40px; font-size: 18px; }
    .au-mais .side-n { font-size: 12px; margin-right: 4px; }
}

/* ───────────────── 20. Impressão ───────────────── */
@media print {
    .side, .topbar, .ptop, .mnav, .flashes, .form-acoes, .dialogo-rodape, .chip-barra { display: none !important; }
    .app { display: block; }
    body { background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; scroll-behavior: auto !important; }
}