/* =====================================================================
   Dashboard Operacional — quadro, cartões e mapa de lojas
   ===================================================================== */
:root {
  --p-processo: #0f807e;
  --p-pessoas: #3f7d9c;
  --p-produto: #b5622e;
  --p-proposito: #6d5bb0;
  --late: #c03535;
  --soon: #a86b00;
  --col-bg: color-mix(in srgb, var(--plane) 70%, var(--surface-1));
}
:root[data-theme="dark"] { --p-processo:#35c3c1; --p-pessoas:#8fc0d6; --p-produto:#ec9a6a; --p-proposito:#b1a2f0; --late:#ff8a8a; --soon:#fab219; --col-bg:#0f1617; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) { --p-processo:#35c3c1; --p-pessoas:#8fc0d6; --p-produto:#ec9a6a; --p-proposito:#b1a2f0; --late:#ff8a8a; --soon:#fab219; --col-bg:#0f1617; }
}

/* ------------------------------ barra de filtros ------------------------------ */
.op-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.op-bar select, .op-bar input { width: auto; min-width: 140px; padding: 7px 10px; font-size: .85rem; }
.op-bar input[type="search"] { min-width: 180px; flex: 1 1 180px; }
.seg { display: inline-flex; background: var(--surface-1); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: .82rem; font-weight: 550; padding: 5px 11px; border-radius: 7px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); }
.chip-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--text-secondary); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; cursor: pointer; background: var(--surface-1); user-select: none; }
.chip-toggle input { width: auto; margin: 0; }
.chip-toggle:has(input:checked) { border-color: var(--late); color: var(--late); }
.filtro-ativo { display: inline-flex; gap: 6px; align-items: center; font-size: .8rem; background: var(--brand-soft); color: var(--brand-strong); border-radius: 999px; padding: 4px 6px 4px 11px; font-weight: 600; }
.filtro-ativo button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 4px; }

/* ----------------------------------- quadro ----------------------------------- */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(262px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: start; scroll-snap-type: x proximity; }
.kcol { background: var(--col-bg); border: 1px solid var(--border); border-radius: 14px; display: flex; flex-direction: column; max-height: 76vh; min-height: 140px; scroll-snap-align: start; }
.kcol-head { display: flex; align-items: center; gap: 8px; padding: 11px 13px 9px; font-size: .8rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); }
.kcol-head .count { margin-left: auto; font-variant-numeric: tabular-nums; background: var(--surface-1); border: 1px solid var(--border); border-radius: 999px; padding: 0 8px; font-size: .75rem; color: var(--text-primary); }
.kcol-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.kcol[data-col="em_andamento"] .dot, .kcol[data-col="andamento"] .dot { background: #e0a20d; }
.kcol[data-col="revisao"] .dot { background: var(--p-proposito); }
.kcol[data-col="aguardando_cliente"] .dot, .kcol[data-col="aguardando"] .dot { background: #ec835a; }
.kcol[data-col="concluido"] .dot { background: var(--good); }
.kcol[data-col="a_fazer"] .dot, .kcol[data-col="planejado"] .dot { background: var(--accent); }
.kcol-body { padding: 4px 9px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.kcol.drop-over { outline: 2px dashed var(--brand); outline-offset: -4px; background: var(--brand-soft); }
.kcol-add { margin: 0 9px 10px; border: 1px dashed var(--line); background: transparent; color: var(--text-secondary); border-radius: 10px; padding: 7px; font: inherit; font-size: .82rem; cursor: pointer; }
.kcol-add:hover { border-color: var(--brand); color: var(--brand); }
.kcol-empty { font-size: .8rem; color: var(--muted); text-align: center; padding: 14px 6px; }

.kcard { background: var(--surface-1); border: 1px solid var(--border); border-radius: 11px; padding: 10px 11px 9px; box-shadow: 0 1px 2px rgba(0,0,0,.05); cursor: pointer; transition: box-shadow .12s, transform .12s; border-left: 3px solid transparent; }
.kcard:hover, .kcard:focus-visible { box-shadow: 0 6px 18px rgba(0,0,0,.10); outline: none; }
.kcard.dragging { opacity: .45; transform: rotate(1.5deg); }
.kcard.prio-b-urgente { border-left-color: var(--late); }
.kcard.prio-b-alta { border-left-color: var(--p-produto); }
.kcard-top { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-bottom: 6px; }
.pilar-tag { font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--pc); background: color-mix(in srgb, var(--pc) 13%, transparent); border-radius: 5px; padding: 1px 6px; }
.kcard-cat { font-size: .72rem; color: var(--muted); }
.kprio { font-size: .68rem; font-weight: 700; border-radius: 5px; padding: 1px 6px; }
.kprio-urgente { color: var(--late); background: color-mix(in srgb, var(--late) 12%, transparent); }
.kprio-alta { color: var(--p-produto); background: color-mix(in srgb, var(--p-produto) 12%, transparent); }
.kpriv { font-size: .68rem; font-weight: 650; color: var(--muted); border: 1px dashed var(--line); border-radius: 5px; padding: 0 5px; }
.kcard-title { font-size: .9rem; font-weight: 600; line-height: 1.32; margin: 0 0 4px; }
.knum { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; font-size: .8rem; }
.kcard-sub { font-size: .76rem; color: var(--text-secondary); margin-bottom: 4px; }
.kcard-prog { display: flex; align-items: center; gap: 8px; font-size: .74rem; color: var(--text-secondary); margin-top: 5px; font-variant-numeric: tabular-nums; }
.kcard-prog > span:first-child { min-width: 72px; }
.mini-bar { flex: 1; height: 5px; background: var(--grid); border-radius: 99px; overflow: hidden; }
.mini-bar span { display: block; height: 100%; background: var(--brand-chart); border-radius: 99px; }
.kcard-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; min-height: 22px; }
.kdue { font-size: .74rem; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.kdue.late { color: var(--late); }
.kdue.soon { color: var(--soon); }
.kdue.ok { color: var(--good); }
.kcom { font-size: .74rem; color: var(--muted); }
.avatar { width: 22px; height: 22px; border-radius: 50%; color: #fff; display: inline-grid; place-items: center; font-size: .62rem; font-weight: 700; letter-spacing: .02em; flex: none; }

/* ---------------------------------- lista ---------------------------------- */
.dl-row td { vertical-align: top; }
.dl-row .kdue { white-space: nowrap; }

/* ------------------------------- mapa de lojas ------------------------------- */
.mapa { border-collapse: separate; border-spacing: 4px; font-size: .8rem; min-width: 100%; }
.mapa th { font-weight: 650; color: var(--text-secondary); text-align: left; padding: 4px 6px; white-space: nowrap; font-size: .76rem; }
.mapa thead th { text-align: center; }
.mcell { text-align: center; border-radius: 9px; padding: 7px 4px; min-width: 86px; cursor: pointer; border: 1px solid var(--border); background: var(--surface-1); transition: transform .1s; }
.mcell:hover, .mcell:focus-visible { transform: translateY(-1px); outline: none; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.mcell b { display: block; font-size: 1.05rem; }
.mcell small { display: block; color: var(--muted); font-size: .68rem; }
.mcell.vazio { background: transparent; border: 1px dashed var(--grid); cursor: default; }
.mcell.busy, .mtile.busy { background: color-mix(in srgb, #e0a20d 12%, var(--surface-1)); border-color: color-mix(in srgb, #e0a20d 35%, transparent); }
.mcell.wait, .mtile.wait { background: color-mix(in srgb, #ec835a 13%, var(--surface-1)); border-color: color-mix(in srgb, #ec835a 40%, transparent); }
.mcell.late, .mtile.late { background: color-mix(in srgb, var(--late) 12%, var(--surface-1)); border-color: color-mix(in srgb, var(--late) 45%, transparent); }
.mcell.late small { color: var(--late); font-weight: 650; }
.mcell.done, .mtile.done { background: color-mix(in srgb, var(--good) 10%, var(--surface-1)); }
.mcell.sel, .mtile.sel { outline: 2px solid var(--brand); outline-offset: 1px; }
.mapa-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.mtile { text-align: left; border: 1px solid var(--border); border-radius: 11px; padding: 10px 12px; background: var(--surface-1); cursor: pointer; font: inherit; color: var(--text-primary); display: flex; flex-direction: column; gap: 2px; }
.mt-n { font-weight: 600; font-size: .86rem; }
.mt-v { font-size: .78rem; color: var(--text-secondary); }
.late-t { color: var(--late); font-weight: 650; }
.legenda { display: flex; flex-wrap: wrap; gap: 12px; font-size: .74rem; color: var(--muted); margin-top: 10px; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; border: 1px solid var(--border); }

/* ------------------------------ pilares (4 Ps) ------------------------------ */
.pilares { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pilar-box { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--surface-1); border-top: 3px solid var(--pc); }
.pilar-box .k { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pc); }
.pilar-box .v { font-size: 1.35rem; font-weight: 680; margin-top: 2px; font-variant-numeric: tabular-nums; }
.pilar-box .s { font-size: .75rem; color: var(--text-secondary); }

/* ------------------------------ diálogo demanda ------------------------------ */
dialog.dlg-wide { max-width: 880px; }
.dd-grid { display: grid; gap: 0 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.lojas-pick { border: 1px solid var(--line); border-radius: var(--r-md); max-height: 260px; overflow: auto; padding: 6px 10px; }
.lojas-pick .grp { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 8px 0 3px; }
.lojas-pick label { display: flex; align-items: center; gap: 8px; font-size: .85rem; padding: 3px 0; cursor: pointer; }
.lojas-pick input { width: auto; margin: 0; }
.quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.quick button { border: 1px solid var(--line); background: var(--surface-1); color: var(--text-secondary); border-radius: 999px; font: inherit; font-size: .75rem; padding: 3px 10px; cursor: pointer; }
.quick button:hover { border-color: var(--brand); color: var(--brand); }
.chk-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.chk-item { display: flex; gap: 8px; align-items: center; font-size: .88rem; }
.chk-item input[type="checkbox"] { width: auto; margin: 0; }
.chk-item input[type="text"] { padding: 5px 8px; font-size: .86rem; }
.chk-item.done span { text-decoration: line-through; color: var(--muted); }
.chk-item .x { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 1rem; }
.loja-st { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; font-size: .85rem; max-height: 280px; overflow: auto; }
.loja-st select { padding: 4px 8px; font-size: .8rem; width: auto; }
.lst-feito { color: var(--good); } .lst-em_andamento { color: #b07d00; } .lst-pendente { color: var(--muted); }
.thread { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.msg { border: 1px solid var(--border); border-radius: 12px; padding: 8px 11px; font-size: .86rem; background: var(--plane); }
.msg.cli { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 25%, transparent); }
.msg.int { border-style: dashed; }
.msg .who { font-size: .74rem; color: var(--muted); margin-bottom: 2px; }
.msg .who b { color: var(--text-secondary); }
.sec-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 18px 0 8px; }

/* ------------------------------------ links ------------------------------------ */
.link-copy { display: flex; gap: 6px; align-items: center; }
.link-copy code { font-size: .74rem; color: var(--muted); word-break: break-all; }

@media (max-width: 640px) {
  .board { grid-auto-columns: 84%; }
  .op-bar select, .op-bar input { min-width: 0; flex: 1 1 140px; }
}
.op-bar .chip-toggle input { min-width: 0; flex: none; width: auto; padding: 0; }
.op-bar .chip-toggle { flex: none; }

/* ===================== v4: plataformas, evolução, tela cheia ===================== */
[hidden] { display: none !important; }
.wrap.wide { max-width: 1680px; }
.ptag { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 700; letter-spacing: .02em; border-radius: 5px; padding: 1px 7px; white-space: nowrap; border: 1px solid transparent; }
.pl-ifood   { background: #ea1d2c; color: #fff; }
.pl-99      { background: #ffd600; color: #2a2300; }
.pl-keeta   { background: #00a650; color: #fff; }
.pl-proprio { background: #1f6fd1; color: #fff; }
.pl-outra   { background: var(--plane); color: var(--text-secondary); border-color: var(--line); }
.kcard-plats { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 6px; }

.evo { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.evo-track { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.evo-seg { height: 6px; border-radius: 3px; background: var(--grid); }
.evo-seg.on { background: var(--brand-chart); }
.evo-done .evo-seg.on { background: var(--good); }
.evo-txt { font-size: .72rem; font-weight: 650; color: var(--text-secondary); min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.evo-done .evo-txt { color: var(--good); }
.evo-lg { flex-direction: column; align-items: stretch; gap: 6px; }
.evo-lg .evo-seg { height: 10px; border-radius: 5px; }
.evo-labels { display: grid; grid-template-columns: repeat(5, 1fr); font-size: .74rem; color: var(--muted); }
.evo-labels span { text-align: center; }
.evo-labels span:first-child { text-align: left; } .evo-labels span:last-child { text-align: right; }
.evo-labels .on { color: var(--text-secondary); font-weight: 600; }
.evo-labels .cur { color: var(--brand); font-weight: 750; }
.evo-done .evo-labels .cur { color: var(--good); }

/* seletor de evolução (diálogo) */
.evo-pick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.evo-pick button { border: 1px solid var(--line); background: var(--surface-1); color: var(--text-secondary); border-radius: 10px; padding: 9px 4px; font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.evo-pick button.on { background: color-mix(in srgb, var(--brand) 14%, var(--surface-1)); border-color: var(--brand); color: var(--brand-strong); }
.evo-pick button.cur { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.evo-pick button.cur.fim { background: var(--good); border-color: var(--good); color: #fff; }
.plat-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.plat-pick label { cursor: pointer; }
.plat-pick input { position: absolute; opacity: 0; pointer-events: none; }
.plat-pick .ptag { font-size: .8rem; padding: 5px 12px; border-radius: 999px; opacity: .35; }
.plat-pick input:checked + .ptag { opacity: 1; box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 4px currentColor; }
.plat-pick input:focus-visible + .ptag { outline: 2px solid var(--brand); }

/* quadro sem rolagem lateral: todas as colunas cabem na tela */
.board { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-columns: unset; overflow: visible; scroll-snap-type: none; }
.board.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kcol { max-height: none; }
.kcol-head { padding: 10px 10px 8px; font-size: .74rem; }
.kcol-body { padding: 4px 7px 9px; }
.kcard { padding: 9px 10px 8px; }
@media (max-width: 1250px) { .board, .board.cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .board, .board.cols-4 { grid-template-columns: 1fr; } }

/* visão geral por cliente */
.clientes-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.ctile { text-align: left; font: inherit; color: var(--text-primary); background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 7px; transition: box-shadow .12s, transform .12s; }
.ctile:hover, .ctile:focus-visible { box-shadow: 0 8px 22px rgba(0,0,0,.10); transform: translateY(-1px); outline: none; }
.ctile.vazio { opacity: .62; }
.ctile.alerta { border-color: color-mix(in srgb, var(--late) 50%, transparent); }
.ctile-h { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ctile-h b { font-size: .95rem; }
.ctile-h small { font-size: .72rem; color: var(--muted); white-space: nowrap; }
.ctile-plats { display: flex; flex-wrap: wrap; gap: 4px; min-height: 18px; }
.ctile-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ctile-nums div { background: var(--plane); border-radius: 8px; padding: 4px 6px; text-align: center; }
.ctile-nums b { display: block; font-size: 1rem; font-variant-numeric: tabular-nums; }
.ctile-nums span { font-size: .64rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.ctile-nums .late b { color: var(--late); }
.ctile-nums .wait b { color: #c4622f; }
.tipo-chip { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); background: var(--accent-soft); border-radius: 5px; padding: 1px 6px; }

/* ficha do cliente */
dialog.dlg-ficha { max-width: 1040px; }
.ficha-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--grid); margin: 4px 0 16px; }
.ficha-tabs button { border: 0; background: transparent; font: inherit; font-weight: 600; font-size: .9rem; color: var(--text-secondary); padding: 9px 14px; border-bottom: 2px solid transparent; cursor: pointer; }
.ficha-tabs button[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); }
.loja-card { border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 12px; background: var(--surface-1); }
.loja-card.inativa { opacity: .6; }
.loja-head { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.loja-head h3 { font-size: 1rem; }
.plat-row { border: 1px solid var(--grid); border-left: 4px solid var(--plc, var(--line)); border-radius: 10px; padding: 10px 12px; margin-top: 8px; background: color-mix(in srgb, var(--plane) 55%, var(--surface-1)); }
.plat-row.pl-row-ifood { --plc: #ea1d2c; } .plat-row.pl-row-99 { --plc: #ffd600; } .plat-row.pl-row-keeta { --plc: #00a650; } .plat-row.pl-row-canal_proprio { --plc: #1f6fd1; }
.plat-row .grid { display: grid; gap: 0 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.plat-row .field { margin-bottom: 10px; }
.plat-row .field input, .plat-row .field select, .plat-row .field textarea { padding: 7px 9px; font-size: .86rem; }
.plat-row .field textarea { min-height: 54px; }
.plat-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; cursor: pointer; user-select: none; }
.switch input { appearance: none; -webkit-appearance: none; width: 36px; height: 20px; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; transition: background .15s; margin: 0; padding: 0; border: 0; flex: none; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.switch input:checked { background: var(--good); }
.switch input:checked::after { left: 18px; }
.senha-wrap { display: flex; gap: 4px; }
.senha-wrap input { flex: 1; }
.senha-wrap button { flex: none; border: 1px solid var(--line); background: var(--surface-1); border-radius: 8px; padding: 0 8px; cursor: pointer; font-size: .78rem; color: var(--text-secondary); }
.print-box { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.print-box img { width: 120px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); cursor: zoom-in; background: var(--plane); }
.print-box .vazio { width: 120px; height: 80px; border-radius: 8px; border: 1px dashed var(--line); display: grid; place-items: center; font-size: .72rem; color: var(--muted); text-align: center; }
.restrito { font-size: .7rem; font-weight: 700; color: #b5552a; text-transform: uppercase; letter-spacing: .04em; }
.link-row { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--grid); }
.link-row:last-child { border-bottom: 0; }
.link-row .t { font-weight: 600; font-size: .9rem; }
.link-row code { display: block; font-size: .74rem; color: var(--muted); word-break: break-all; margin-top: 2px; }
.cli-tbl .plats { display: flex; flex-wrap: wrap; gap: 3px; }
@media (max-width: 640px) { .link-row { grid-template-columns: 1fr; } .evo-pick { grid-template-columns: repeat(3, 1fr); } }
.ctile { min-width: 0; }
.ctile-nums div { min-width: 0; overflow: hidden; padding: 4px 2px; }
.ctile-nums span { display: block; font-size: .6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.parados { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 4px; }
.pchip { border: 1px solid var(--border); background: var(--surface-1); color: var(--text-secondary); border-radius: 999px; padding: 4px 11px; font: inherit; font-size: .78rem; cursor: pointer; }
.pchip:hover { border-color: var(--brand); color: var(--brand); }
.pchip small { color: var(--muted); }

.kresp { font-size: .66rem; font-weight: 700; color: #fff; background: #25a55f; border-radius: 5px; padding: 1px 6px; }
.kpend { font-size: .76rem; background: color-mix(in srgb, #ec835a 12%, var(--surface-1)); border: 1px solid color-mix(in srgb, #ec835a 35%, transparent); color: var(--text-primary); border-radius: 8px; padding: 5px 8px; margin: 2px 0 6px; }
.btn-wa { background: #25a55f; color: #fff; border-color: #25a55f; }
.btn-wa:hover { filter: brightness(1.06); }
.pend-box { border: 1px solid color-mix(in srgb, #ec835a 45%, transparent); background: color-mix(in srgb, #ec835a 10%, var(--surface-1)); border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; }
.pend-box b { color: #b5552a; }
.confirm-box { border: 1px solid color-mix(in srgb, var(--good) 40%, transparent); background: color-mix(in srgb, var(--good) 8%, var(--surface-1)); border-radius: 12px; padding: 12px 14px; margin: 14px 0; }

.mod-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.mod-pick label { cursor: pointer; }
.mod-pick input { position: absolute; opacity: 0; pointer-events: none; }
.mod-pick span { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; font-size: .84rem; font-weight: 600; color: var(--text-secondary); background: var(--surface-1); }
.mod-pick input:checked + span { background: color-mix(in srgb, var(--mc) 16%, var(--surface-1)); border-color: var(--mc); color: var(--text-primary); }
.mod-pick input:disabled + span { opacity: .7; cursor: default; }
.kit-mod { margin-top: 14px; }
.kit-mod h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--mc); margin-bottom: 6px; }
.kit-item { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 7px 10px; border: 1px solid var(--grid); border-radius: 10px; margin-bottom: 5px; font-size: .86rem; }
.kit-item input { width: auto; margin: 0; }
.kit-item .q { font-size: .7rem; font-weight: 700; border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.kit-item .q-cli { background: color-mix(in srgb, #ec835a 15%, transparent); color: #b5552a; }
.kit-item .q-eq { background: var(--brand-soft); color: var(--brand-strong); }
.kit-item .sub { font-size: .76rem; color: var(--muted); }
.kit-item.ja { opacity: .55; }
.mtag { font-size: .66rem; font-weight: 700; border-radius: 5px; padding: 1px 6px; color: var(--mc); background: color-mix(in srgb, var(--mc) 12%, transparent); }
.jornada { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.jor { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surface-1); }
.jor .k { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--mc); }
.jor .v { font-size: .8rem; color: var(--text-secondary); margin: 2px 0 6px; }
.jor .bar { height: 8px; border-radius: 99px; background: var(--grid); overflow: hidden; }
.jor .bar span { display: block; height: 100%; background: var(--mc); border-radius: 99px; }
.form-q { margin-bottom: 12px; }
.form-q .lbl { font-size: .86rem; font-weight: 600; margin-bottom: 5px; display: block; }
.form-op { display: flex; flex-wrap: wrap; gap: 6px; }
.form-op label { cursor: pointer; }
.form-op input { position: absolute; opacity: 0; pointer-events: none; }
.form-op span { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: .84rem; }
.form-op input:checked + span { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.resp-box { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--plane); margin: 10px 0 4px; }
.resp-box dt { font-size: .76rem; color: var(--muted); margin-top: 8px; }
.resp-box dd { margin: 2px 0 0; font-size: .88rem; white-space: pre-wrap; }

.kcta { margin-top: 6px; font-size: .76rem; font-weight: 700; color: #b5552a; }
.reg-item { border-left: 3px solid var(--line); padding: 6px 0 8px 12px; margin-bottom: 8px; }
.reg-item.novo { border-left-color: #ec835a; }
.reg-item .meta { font-size: .74rem; color: var(--muted); }
.badge-novo { font-size: .66rem; font-weight: 700; color: #fff; background: #ec835a; border-radius: 999px; padding: 1px 7px; }