/* ooptIA · Web.App — componentes de UI (botões, cards, KPIs, listas, tags, formulários, conversas do Otto…).
   Nomes de classe iguais aos dos mockups (base.css/extra.css) para a tradução tela → código ser direta. */

/* ---------- grades de componentes (g2, g3, split, col, rowx estão em base.css) ---------- */
.g4, .g5 { display: grid; gap: var(--entreBlocos); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--e8); }
.lbl { font: var(--tipoCabecalhoTabela); letter-spacing: .12em; text-transform: uppercase; color: var(--textoSuave); }

/* ---------- cabeçalho da página ---------- */
.page-head { display: flex; align-items: center; gap: var(--e16); flex-wrap: wrap; }
.page-head h2 { font-size: 21px; }
.page-head .sub { color: var(--textoSuave); font-size: 13px; }
.page-head .actions { margin-left: auto; display: flex; gap: var(--e8); flex-wrap: wrap; }

/* ---------- botões (OoBotao, doc 08 §5.1) ----------
   Estados: normal · sobre (véu de 4%) · foco (anel de 2px primaria) · pressionado (véu de 8%)
   · desativado (neutroSuave/textoSuave) · carregando (três pontos, mesma largura) · erro (borda erro). */
.btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border: 1px solid transparent; border-radius: var(--r10);
    height: 38px; padding: 0 14px;
    font-family: var(--display); font-weight: 700; font-size: 13px; line-height: 1;
    background-color: var(--blue); color: var(--sobrePrimaria); white-space: nowrap; text-decoration: none; cursor: pointer;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform .06s;
}
.btn:hover { background-image: linear-gradient(var(--hover-veil), var(--hover-veil)); }
.btn:active { background-image: linear-gradient(var(--press-veil), var(--press-veil)); transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; box-shadow: none; border-radius: var(--r-md); }
.btn svg.ic { width: 17px; height: 17px; flex: none; }
.btn.sec { background-color: var(--surface); color: var(--ink); border-color: var(--line); }
.btn.ghost { background-color: var(--blue-soft); color: var(--blue-text); }
.btn.wa { background-color: var(--ok-soft); color: var(--ok-text); }
.btn.danger { background-color: var(--bad-soft); color: var(--bad-text); }
.btn.big { height: 50px; padding: 0 20px; font-size: 15px; border-radius: var(--r-lg); }
.btn.sm { height: 30px; padding: 0 10px; font-size: 11.5px; border-radius: var(--r-sm); gap: 5px; }
.btn.sm svg.ic { width: 14px; height: 14px; }
.btn.full { width: 100%; }
.btn.btn-ic { padding: 0; width: 38px; }
.btn.sm.btn-ic { width: 30px; }
.btn.big.btn-ic { width: 50px; }
.btn .btn-l { overflow: hidden; text-overflow: ellipsis; }
.btn .kbd { margin-left: 2px; }
.btn:not(.sec):not(.ghost):not(.wa):not(.danger) .kbd { background: transparent; color: inherit; border-color: var(--sobrePrimariaBorda); }
.btn[disabled], .btn.is-disabled {
    background-color: var(--mist); background-image: none; color: var(--subtle); border-color: transparent;
    cursor: not-allowed; pointer-events: none; transform: none;
}
.btn .oo-dots { display: none; }
.btn.is-loading { cursor: progress; pointer-events: none; }
.btn.is-loading > :not(.oo-dots) { visibility: hidden; }
.btn.is-loading .oo-dots { display: inline-flex; position: absolute; inset: 0; align-items: center; justify-content: center; }
.btn.is-error { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }

/* três pontos animados (carregando) */
.oo-dots { gap: 4px; }
.oo-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: oo-dot 1s infinite ease-in-out; }
.oo-dots i:nth-child(2) { animation-delay: .15s; }
.oo-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes oo-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

/* OoTeclaAtalho · kbd: só na web */
.kbd {
    display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
    font-family: var(--body); font-size: 10px; font-weight: 600; line-height: 1;
    border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--muted);
}
.kbds { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; color: var(--muted); }
@media (max-width: 1099.98px) { .kbd, .kbds { display: none; } }

/* OoBotaoMais · .plus: redondo de 50, primaria, sombra de ação */
.oo-mais {
    width: 50px; height: 50px; border-radius: 50%; border: 0; flex: none; cursor: pointer;
    background-color: var(--blue); color: var(--sobrePrimaria); display: inline-grid; place-items: center;
    box-shadow: var(--shadow-primary); transition: transform .06s;
}
.oo-mais svg.ic { width: 26px; height: 26px; }
.oo-mais:hover { background-image: linear-gradient(var(--hover-veil), var(--hover-veil)); }
.oo-mais:active { transform: scale(.96); }
.oo-mais:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; box-shadow: var(--shadow-primary); border-radius: 50%; }

.icon-btn {
    display: inline-grid; place-items: center; flex: none;
    width: 38px; height: 38px; border-radius: var(--r10);
    border: 0; background: none; color: var(--textoSuave); cursor: pointer;
    transition: background var(--duracaoPadrao) var(--curvaEntrada), color var(--duracaoPadrao) var(--curvaEntrada);
}
.icon-btn:hover { background: var(--fundo); color: var(--texto); }
.side .icon-btn, .side .icon-btn:hover { color: var(--sobreNoiteApagado); }
.side .icon-btn:hover { background: var(--sobreNoiteRealce); color: var(--sobreNoite); }

/* ---------- avatar ---------- */
.av {
    width: 32px; height: 32px; border-radius: 50%; flex: none;
    background: var(--avatar); color: var(--sobrePrimaria); display: inline-grid; place-items: center;
    font-family: var(--fonteTitulo); font-weight: 700; font-size: 12px;
}
button.av { border: 0; cursor: pointer; }

/* ---------- card ---------- */
.card {
    background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r14);
    padding: 14px var(--e16); min-width: 0;
}
.card > h3, .card-h { display: flex; align-items: center; gap: var(--e8); font-size: 15px; margin-bottom: 10px; }
.card > h3 small, .card-h small { margin-left: auto; font-family: var(--fonteCorpo); font-weight: 400; color: var(--textoSuave); font-size: 12px; }
.card > h3 svg.ic { color: var(--primariaTexto); }
.card.orc { border-color: var(--orcamentoBorda); border-left: var(--larguraFaixaLateral) solid var(--atencao); background: var(--degradeOrcamento); }

/* ---------- KPIs ---------- */
.kpi { background: var(--superficie); border: 1px solid var(--borda); border-radius: 13px; padding: 11px 13px; min-width: 0; }
.kpi span { font-size: 11px; color: var(--textoSuave); font-family: var(--fonteTitulo); font-weight: 600; display: block; }
.kpi b { font-family: var(--fonteTitulo); font-size: 20px; letter-spacing: -0.02em; display: block; margin-top: 2px; white-space: nowrap; }
.kpi small { font-size: 10.5px; color: var(--textoSuave); display: block; }
.kpi small.kpi-cmp { margin-top: 2px; }
.kpi small.kpi-cmp.melhor { color: var(--sucessoTexto); }
.kpi small.kpi-cmp.pior { color: var(--erroTexto); }
.kpi.tot small.kpi-cmp.melhor, .kpi.tot small.kpi-cmp.pior { color: inherit; }
.kpi.tot { background: var(--noite); color: var(--sobreNoite); border-color: var(--noite); }
.kpi.tot span, .kpi.tot small { color: var(--sobreNoiteLegenda); }
.kpi.and { border-style: dashed; }

/* ---------- barra de progresso ---------- */
.bar { height: 7px; border-radius: 9px; background: var(--neutroSuave); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--degradeProgresso); border-radius: inherit; }
.metam { flex: 1; max-width: 300px; font-size: 11.5px; color: var(--textoSuave); min-width: 0; }
.metam b { color: var(--texto); font-family: var(--fonteTitulo); }
.metam .bar { margin-top: 5px; }

/* ---------- linhas de lista ---------- */
.li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--borda); min-width: 0; }
.li:first-of-type { border-top: 0; }
.li .t { min-width: 0; flex: 1; }
.li .t b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li .t span { font-size: 11.5px; color: var(--textoSuave); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li > b { white-space: nowrap; }
.li .acts { display: flex; gap: 4px; flex: none; }

.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--primaria); flex: none; }
.dot.a { background: var(--atencao); } .dot.r { background: var(--erro); } .dot.g { background: var(--sucesso); } .dot.n { background: var(--bordaForte); }

/* ---------- tags ---------- */
.tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10.5px; font-weight: 700; font-family: var(--fonteTitulo);
    padding: 2px 8px; border-radius: var(--pilula);
    background: var(--primariaSuave); color: var(--primariaTexto); white-space: nowrap;
}
.tag svg.ic { width: 12px; height: 12px; }
.tag.a { background: var(--atencaoSuave); color: var(--atencaoTexto); }
.tag.r { background: var(--erroSuave); color: var(--erroTexto); }
.tag.g { background: var(--sucessoSuave); color: var(--sucessoTexto); }
.tag.n { background: var(--neutroSuave); color: var(--textoSuave); }

/* ---------- chips / opções ---------- */
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
    border: 1.5px solid var(--borda); background: var(--superficie); color: var(--texto);
    border-radius: var(--r10); padding: 7px 11px;
    font-family: var(--fonteTitulo); font-weight: 600; font-size: 12.5px; white-space: nowrap; cursor: pointer;
}
.chip.on, .chip[aria-pressed="true"] { border-color: var(--primaria); background: var(--primariaSuave); color: var(--primariaTexto); }
.opt { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--borda); border-radius: 11px; padding: 9px 12px; background: var(--superficie); cursor: pointer; }
.opt.on { border-color: var(--primaria); background: var(--primariaSuave); }
.opt i { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--bordaForte); flex: none; }
.opt.on i { border-color: var(--primaria); background: radial-gradient(var(--primaria) 45%, var(--superficie) 50%); }
.opt b { font-family: var(--fonteTitulo); font-size: 12.5px; }
.opt span { margin-left: auto; font-weight: 700; }

/* ---------- campos ---------- */
.fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fld label { font-size: 11.5px; color: var(--textoSuave); font-weight: 600; }
.fld .in, .fld input, .fld select, .fld textarea {
    border: 1px solid var(--borda); background: var(--superficie); color: var(--texto);
    border-radius: 9px; padding: 8px 10px; min-height: 38px; width: 100%; outline: none;
}
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--primaria); }
.fld .in { display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; }
.fld .auto, .fld input.auto { background: var(--lido); border-color: var(--lidoBorda); }
.fld .warn, .fld input.warn { background: var(--atencaoSuave); border-color: var(--atencao); }
.fld .hint { font-size: 11px; color: var(--textoSuave); }
.fld .err { font-size: 11px; color: var(--erroTexto); }

/* ---------- passos (wizard de venda/O.S.) ---------- */
.steps { display: flex; gap: 6px; align-items: center; flex: none; }
.st { display: flex; align-items: center; gap: 6px; font-family: var(--fonteTitulo); font-weight: 600; font-size: 12px; color: var(--textoSuave); white-space: nowrap; }
.st i { width: 22px; height: 22px; border-radius: 50%; background: var(--superficie); border: 1.5px solid var(--borda); display: grid; place-items: center; font-style: normal; font-size: 11px; }
.st.done i { background: var(--sucesso); border-color: var(--sucesso); color: var(--sobrePrimaria); }
.st.on { color: var(--texto); }
.st.on i { background: var(--primaria); border-color: var(--primaria); color: var(--sobrePrimaria); }
.steps em { width: 18px; height: 2px; background: var(--borda); }

/* ---------- abas ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); overflow-x: auto; flex: none; }
.tabs a, .tabs button { padding: 8px 12px; font-family: var(--fonteTitulo); font-weight: 600; font-size: 12.5px; color: var(--textoSuave); white-space: nowrap; text-decoration: none; border: 0; background: none; border-bottom: 2px solid transparent; cursor: pointer; }
.tabs .on, .tabs [aria-selected="true"] { color: var(--primariaTexto); border-bottom-color: var(--primaria); }

/* ---------- blocos informativos ---------- */
.what { background: var(--primariaSuave); border: 1px solid var(--primariaBorda); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; }
.what b { font-family: var(--fonteTitulo); display: block; margin-bottom: 4px; }
.tile { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r14); padding: 13px; display: flex; gap: 11px; align-items: flex-start; min-width: 0; text-decoration: none; color: inherit; }
.tile .ib { width: 38px; height: 38px; border-radius: 11px; background: var(--primariaSuave); color: var(--primariaTexto); display: grid; place-items: center; flex: none; }
.tile b { font-family: var(--fonteTitulo); font-size: 13.5px; display: block; }
.tile span { font-size: 11.5px; color: var(--textoSuave); display: block; }
a.tile:hover { border-color: var(--primariaBorda); }
.ph { background: repeating-linear-gradient(135deg, var(--neutroSuave), var(--neutroSuave) 9px, var(--fundo) 9px, var(--fundo) 18px); border: 1px dashed var(--bordaForte); border-radius: 12px; display: grid; place-items: center; color: var(--textoSuave); text-align: center; font-size: 12px; padding: 10px; }

/* ---------- agenda do dia (faixa) ---------- */
.agd { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-left: 4px solid var(--primaria); flex-wrap: wrap; row-gap: 4px; }
.agd b { font-family: var(--fonteTitulo); font-size: 12.5px; }
.agd .muted { font-size: 11.5px; }

/* ---------- orçamentos ---------- */
.orcw { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; align-items: center; }
.orcn { display: grid; gap: 6px; }
.orcn > div { background: var(--atencaoSuave); border-radius: 10px; padding: 6px 10px; display: flex; align-items: baseline; gap: 7px; }
.orcn b { font-family: var(--fonteTitulo); font-size: 17px; letter-spacing: -0.02em; }
.orcn span { font-size: 11px; color: var(--atencaoTexto); white-space: nowrap; }
.orcn .hot { background: var(--erroSuave); }
.orcn .hot span, .orcn .hot b { color: var(--erroTexto); }

/* ---------- tabela ---------- */
.tbl-wrap { overflow-x: auto; border-radius: var(--r14); }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-size: 11px; color: var(--textoSuave); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--borda); white-space: nowrap; font-family: var(--fonteTitulo); position: sticky; top: 0; background: var(--superficie); }
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--fundo); }
.tbl .c { text-align: center; } .tbl .r { text-align: right; }

/* ---------- interruptor e checkbox ---------- */
.sw { width: 34px; height: 20px; border-radius: 99px; background: var(--bordaForte); position: relative; flex: none; display: inline-block; border: 0; cursor: pointer; transition: background var(--duracaoPadrao) var(--curvaEntrada); }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--sobrePrimaria); transition: left var(--duracaoRapida) var(--curvaEntrada); }
.sw.on, .sw[aria-checked="true"] { background: var(--primaria); }
.sw.on::after, .sw[aria-checked="true"]::after { left: 16px; }

/* ---------- kanban de O.S. ---------- */
.kan { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 10px; overflow-x: auto; }
.kc { background: var(--superficieColuna); border-radius: 13px; padding: 9px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kc > b { font-family: var(--fonteTitulo); font-size: 12px; display: flex; gap: 6px; align-items: center; }
.kc > b small { margin-left: auto; color: var(--textoSuave); font-weight: 600; }
.oc { background: var(--superficie); border: 1px solid var(--borda); border-radius: 11px; padding: 8px 10px; font-size: 12px; }
.oc.late { border-left: 4px solid var(--erro); }
.oc b { font-size: 12.5px; display: block; }
.oc > span { color: var(--textoSuave); display: block; }

/* ---------- conversa com o Otto ---------- */
.msg { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raioBalaoOtto); padding: 9px 11px; font-size: 12.5px; max-width: 96%; }
.msg.me { align-self: flex-end; background: var(--primaria); color: var(--sobrePrimaria); border: 0; border-radius: var(--raioBalaoMeu); }
.msg .src { display: block; margin-top: 5px; font-size: 10.5px; color: var(--textoSuave); }
.acard { border: 1.5px solid var(--atencao); background: var(--superficie); border-radius: 13px; padding: 10px 11px; font-size: 12.5px; }
.acard > b { font-family: var(--fonteTitulo); display: flex; gap: 7px; align-items: center; margin-bottom: 6px; }
.acard dl { margin: 0 0 8px; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; }
.acard dt { color: var(--textoSuave); }
.acard dd { margin: 0; font-weight: 600; }
.mic { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--atencao); color: var(--noite); display: grid; place-items: center; flex: none; cursor: pointer; }
.mic:hover { filter: brightness(1.05); }

/* ---------- modal ---------- */
.ov { position: fixed; inset: 0; background: var(--veu); display: grid; place-items: center; z-index: var(--camadaJanela); padding: var(--e16); }
.ov[hidden] { display: none; }
.modal { background: var(--superficie); color: var(--texto); border-radius: var(--r22); padding: 26px; width: 640px; max-width: 100%; max-height: calc(100dvh - 32px); overflow: auto; box-shadow: var(--sombraJanela); }
.modal h3 { font-size: 22px; }
.ask { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.ask > a, .ask > button { border: 2px solid var(--borda); border-radius: 18px; padding: 18px 14px; text-align: center; position: relative; background: var(--superficie); color: inherit; text-decoration: none; cursor: pointer; }
.ask .v { border-color: var(--primaria); background: var(--primariaSuave); }
.ask .o { border-color: var(--atencao); background: var(--atencaoSuave); }
.ask small { display: block; color: var(--textoSuave); font-size: 12px; }
.ask b { font-family: var(--fonteTitulo); font-size: 21px; display: block; margin: 4px 0; }
.ask u { text-decoration: none; font-family: var(--fonteTitulo); font-weight: 700; font-size: 13px; display: block; }
.ask kbd { position: absolute; top: 9px; right: 11px; font-size: 10.5px; border: 1px solid var(--borda); border-radius: 5px; padding: 0 6px; background: var(--superficie); color: var(--textoSuave); }

/* ---------- estado vazio ---------- */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--e8); padding: var(--e32) var(--e16); color: var(--textoSuave); }
.empty h3 { color: var(--texto); font-size: 18px; }
.empty p { max-width: 46ch; }

/* ---------- carregando ---------- */
.skel { background: linear-gradient(90deg, var(--neutroSuave) 25%, var(--fundo) 50%, var(--neutroSuave) 75%); background-size: 200% 100%; border-radius: var(--r8); animation: skel var(--duracaoEsqueleto) linear infinite; min-height: 12px; }
@keyframes skel { to { background-position: -200% 0; } }

/* ---------- responsivo dos componentes ---------- */
/* tablet (600–1099): a coluna de resumo encolhe; indicadores rápidos seguem 5 em linha (doc 08 §3) */
@media (max-width: 1099.98px) {
    .split { grid-template-columns: minmax(0, 1fr) 280px; }
}
@media (max-width: 839.98px) {
    .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* celular (< 600) */
@media (max-width: 599.98px) {
    .g2, .g3 { grid-template-columns: minmax(0, 1fr); }
    .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .g5 .tot { grid-column: 1 / -1; }
    .orcw { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .orcn { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .orcn > div { flex-direction: column; align-items: flex-start; gap: 0; padding: 5px 8px; min-width: 0; }
    .orcn span { white-space: normal; line-height: 1.2; font-size: 10.5px; }
    .ask { grid-template-columns: 1fr; }
    .ask kbd { display: none; }
    .page-head .actions { width: 100%; margin-left: 0; }
    .page-head .actions .btn { flex: 1; }
    .metam { max-width: none; flex-basis: 100%; }
    .steps .st span { display: none; }
    .steps .st.on span { display: inline; }
}

/* ---------- toast ---------- */
.toasts { position: fixed; left: 50%; bottom: var(--e24); transform: translateX(-50%); z-index: var(--camadaAviso); display: flex; flex-direction: column; gap: var(--e8); align-items: center; pointer-events: none; }
.toast { background: var(--noite); color: var(--sobreNoite); padding: var(--e10) var(--e16); border-radius: var(--r12); font: var(--tipoCorpo); box-shadow: var(--sombraBalao); animation: menu-in var(--duracaoPadrao) var(--curvaEntrada); transition: opacity var(--duracaoPadrao) var(--curvaSaida); }
.toast.ok { background: var(--sucesso); } .toast.bad { background: var(--erro); }
.toast.out { opacity: 0; }
@media (max-width: 599.98px) { .toasts { bottom: calc(var(--barraInferior) + var(--acoes-h) + var(--e16)); width: calc(100% - 2 * var(--e16)); } }

/* Ícones e marca vivem aqui (não em shell.css) porque os layouts sem shell (_LayoutWizard, _LayoutPublico) também os usam. */
/* ---------- ícones ---------- */
svg.ic {
    width: 20px; height: 20px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
svg.ic.ic-sm { width: 16px; height: 16px; }
svg.ic.ic-lg { width: 24px; height: 24px; }

/* ---------- wordmark ---------- */
.wm { font-family: var(--fonteTitulo); font-weight: 800; letter-spacing: -0.035em; line-height: 1; white-space: nowrap; display: inline-flex; align-items: baseline; }
.wm .ia { background: var(--degradeMarca); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wm svg { height: .6em; width: 1.2em; margin-right: .03em; overflow: visible; align-self: center; }


/* ---------- espaço de foto (<oo-espaco-foto>, mockup .ph) ----------
   data-estado: vazio | carregando | enviando | pronto | erro */
.oo-foto { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.oo-foto-area { position: relative; overflow: hidden; padding: 0; max-width: 100%; }
.oo-foto-previa { width: 100%; height: 100%; object-fit: contain; background: var(--surface-sunken); }
.oo-foto-vazio { display: grid; justify-items: center; gap: var(--sp-1); padding: var(--sp-3); }
.oo-foto-vazio svg.ic { width: 26px; height: 26px; color: var(--subtle); }
.oo-foto-vazio b { font-family: var(--display); font-size: var(--fs-sm); color: var(--ink); }
.oo-foto-vazio span { max-width: 260px; }
.oo-foto-progresso { position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); height: 6px; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.oo-foto-progresso > span { display: block; height: 100%; width: 0; background: var(--blue); transition: width var(--dur) var(--ease); }
.oo-foto[data-estado="carregando"] .oo-foto-area { animation: oo-foto-pulso 1.2s ease-in-out infinite; }
.oo-foto[data-estado="pronto"] .oo-foto-area { border-style: solid; border-color: var(--line); }
.oo-foto[data-estado="erro"] .oo-foto-area { border-color: var(--bad); }
.oo-foto-status { margin: 0; min-height: 1em; font-size: var(--fs-xs); color: var(--muted); }
.oo-foto[data-estado="erro"] .oo-foto-status { color: var(--bad-text); }
.oo-foto[data-estado="pronto"] .oo-foto-status { color: var(--ok-text); }
.oo-foto-remover { color: var(--bad-text); }
@keyframes oo-foto-pulso { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
    .oo-foto[data-estado="carregando"] .oo-foto-area { animation: none; }
    .oo-foto-progresso > span { transition: none; }
}
@media (max-width: 599.98px) { .oo-foto-acoes .btn { flex: 1 1 auto; } }


/* ---------- tempo real e fragmentos guardados (core/eventos.js, core/guarda.js) ---------- */
/* Aviso discreto: o tempo real é um extra; sem ele as telas continuam funcionando. Nunca só por cor: há texto. */
.tempo-real { position: fixed; left: 50%; top: calc(var(--top-h) + var(--sp-2)); transform: translateX(-50%); z-index: var(--z-toast); max-width: min(560px, calc(100% - 32px)); display: flex; align-items: center; gap: var(--sp-2); padding: 8px 14px; border-radius: var(--r-pill); background: var(--amber-soft); color: var(--amber-text); font-size: var(--fs-xs); box-shadow: var(--shadow-sm); }
.tempo-real::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.tempo-real[data-tipo="sem-internet"] { background: var(--bad-soft); color: var(--bad-text); }
.tempo-real[data-tipo="sem-internet"]::before { background: var(--bad); }
.tempo-real[hidden] { display: none; }
[data-fragmento][aria-busy="true"]:empty { min-height: 64px; border-radius: var(--r-md); background: var(--surface-sunken); }
.frag-erro { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--bad-soft); color: var(--bad-text); font-size: var(--fs-sm); }
@media (max-width: 599.98px) { .tempo-real { top: auto; bottom: calc(var(--bnav-h) + var(--sp-4)); } }


/* =====================================================================
   Componentes Oo* — parte 1 (task 7204, doc 08 §5.1–§5.4 e §6.1)
   TagHelpers em Components/Ui; catálogo vivo em /catalogo (só desenvolvimento).
   Pontos de quebra (doc 08 §3): web ≥ 1100 · tablet 600–1099 · celular < 600.
   ===================================================================== */

/* foco visível: anel de 2px primaria em todo interativo do catálogo */
.chip:focus-visible, .tab:focus-visible, .tile:focus-visible, a.kpi:focus-visible, .li-a:focus-visible,
.th-sort:focus-visible, .tbl tr.is-link:focus-visible, .card-h a:focus-visible, .tabpanel:focus-visible,
.oo-busca input:focus-visible {
    outline: 2px solid var(--blue); outline-offset: 2px; box-shadow: none; border-radius: var(--r-sm);
}

/* ---------- OoCartao ---------- */
.card.pad-c { padding: 10px 12px; }
.card.pad-0 { padding: 0; overflow: hidden; }
.card.pad-0 > .card-h { padding: 12px 14px 0; }
.card.att { border-color: var(--amber); background: linear-gradient(180deg, var(--amber-soft), var(--surface) 60%); }
.card-h svg.ic { color: var(--blue-text); }
.card-h small a { text-decoration: none; font-weight: 600; }
.card-h small a:hover { text-decoration: underline; }
.card.pad-0 .tbl-wrap { border-radius: 0; }
.oo-skel-lines { display: grid; gap: 10px; padding: 4px 0; }
.oo-skel-lines .skel { display: block; height: 14px; }
.oo-skel-lines .skel:nth-child(2) { width: 82%; }
.oo-skel-lines .skel:nth-child(3) { width: 64%; }
.oo-erro { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--r-md); background: var(--bad-soft); color: var(--bad-text); font-size: 12.5px; }
.oo-erro > svg.ic { width: 18px; height: 18px; flex: none; }
.oo-erro > span { flex: 1; min-width: 12ch; }

/* ---------- OoAtalho (tile) ---------- */
.tile { position: relative; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.tile .tt { min-width: 0; flex: 1; }
.tile > .tag { flex: none; }
a.tile:hover { background-image: linear-gradient(var(--hover-veil), var(--hover-veil)); }
a.tile:active { background-image: linear-gradient(var(--press-veil), var(--press-veil)); }
.tile.is-disabled { background: var(--mist); color: var(--subtle); }
.tile.is-disabled .ib { background: var(--surface); color: var(--subtle); }
.tile.is-disabled span { color: var(--subtle); }

/* ---------- Tela de opções (.oo-opcoes): um cartão grande por operação, feito para o toque ----------
   Usada nas entradas de área (Produtos, Estoque, Atender, Dinheiro, Configurações, Equipe, lente de grau, tipo do
   produto e fluxo da O.S.). Ícone grande no alto, etiqueta de pendência no canto, título e resumo embaixo. O cartão
   inteiro é o alvo do toque e responde: sobe ao passar o ponteiro e afunda ao tocar.
   As classes de módulo (.pro-opcoes, .loja-cartoes, .pro-tipos) valem como .oo-opcoes: a tela não depende de
   recompilar a view para ganhar o cartão.
   Web: três colunas. Tablet: duas. Celular: uma, com o ícone ao lado do texto. */
:is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e16); }
:is(.oo-opcoes-2, .loja-cartoes-2) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) .tile {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; gap: var(--e16) var(--e12);
    align-items: start; min-height: 216px; padding: 28px; border-radius: var(--r18); box-shadow: var(--shadow-sm);
    -webkit-tap-highlight-color: transparent;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
:is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) .tile .ib {
    grid-area: 1 / 1; width: 76px; height: 76px; border-radius: var(--r22);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
:is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) .tile .ib svg.ic { width: 36px; height: 36px; }
:is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) .tile .tag { grid-area: 1 / 2; justify-self: end; }
:is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) .tile .tt { grid-area: 2 / 1 / 3 / -1; align-self: end; min-width: 0; }
:is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) .tile b { font-size: 23px; line-height: 1.2; letter-spacing: -0.01em; color: var(--texto); }
:is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) .tile .tt > span { font-size: 15px; line-height: 1.45; margin-top: var(--e6); }
:is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) a.tile, :is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) button.tile { cursor: pointer; }
:is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) button.tile { width: 100%; font: inherit; text-align: left; }
:is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) .tile:focus-visible { outline: var(--anelFoco); outline-offset: var(--anelFocoAfastamento); border-radius: var(--r18); }
@media (hover: hover) {
    :is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) a.tile:hover, :is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) button.tile:hover { border-color: var(--primaria); box-shadow: var(--sombraBalao); transform: translateY(-3px); }
    :is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) a.tile:hover .ib, :is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) button.tile:hover .ib { background: var(--primaria); color: var(--sobrePrimaria); }
}
:is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) a.tile:active, :is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) button.tile:active { border-color: var(--primaria); box-shadow: var(--shadow-sm); transform: scale(.98); }
:is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) a.tile:active .ib, :is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) button.tile:active .ib { background: var(--primaria); color: var(--sobrePrimaria); }
/* O cartão por onde mais se passa: na cor primária. */
:is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) .tile.is-principal { border-color: var(--primaria); background-color: var(--primariaSuave); }
:is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) .tile.is-principal .ib { background: var(--primaria); color: var(--sobrePrimaria); }
/* Sem destino (tela que ainda não existe) ou desativado: não promete o toque. */
:is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) div.tile { box-shadow: none; }
:is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) .tile.is-disabled b { color: inherit; }

@media (max-width: 1099.98px) {
    :is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e12); }
    :is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) .tile { min-height: 176px; padding: var(--e24); }
    :is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) .tile .ib { width: 64px; height: 64px; border-radius: var(--r18); }
    :is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) .tile .ib svg.ic { width: 30px; height: 30px; }
    :is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) .tile b { font-size: 20px; }
}
@media (max-width: 599.98px) {
    :is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos), :is(.oo-opcoes-2, .loja-cartoes-2) { grid-template-columns: minmax(0, 1fr); gap: var(--e10); }
    :is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) .tile { grid-template-rows: auto; gap: var(--e8) var(--e14); align-items: center; min-height: 96px; padding: var(--e16); border-radius: var(--r14); }
    :is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) .tile .ib { width: 56px; height: 56px; border-radius: var(--r14); }
    :is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) .tile .ib svg.ic { width: 26px; height: 26px; }
    :is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) .tile .tt { grid-area: 1 / 2; align-self: center; }
    :is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) .tile .tag { grid-area: 2 / 2; justify-self: start; }
    :is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) .tile b { font-size: 17px; }
    :is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) .tile .tt > span { font-size: 13px; margin-top: var(--e2); }
    :is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) .tile:focus-visible { border-radius: var(--r14); }
}
@media (prefers-reduced-motion: reduce) {
    :is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) .tile, :is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) .tile .ib { transition: none; }
    :is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) a.tile:hover, :is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) button.tile:hover, :is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) a.tile:active, :is(.oo-opcoes, .pro-opcoes, .loja-cartoes, .pro-tipos) button.tile:active { transform: none; }
}

/* ---------- OoDuasColunas ---------- */
.g2.g2-top { align-items: start; }
.split { grid-template-columns: minmax(0, 1fr) 270px; }
@media (max-width: 1099.98px) { .split { grid-template-columns: minmax(0, 1fr) 290px; } }
@media (max-width: 839.98px) { .split, .g2.g2-top { grid-template-columns: minmax(0, 1fr); } }

/* ---------- OoIndicador / OoIndicadoresRapidos ---------- */
a.kpi { color: inherit; text-decoration: none; display: block; transition: border-color var(--dur) var(--ease); }
a.kpi:hover { border-color: var(--blue-soft-line); background-image: linear-gradient(var(--hover-veil), var(--hover-veil)); }
a.kpi.tot:hover { border-color: var(--navy-2); }
.kpi.is-loading b.skel { height: 22px; width: 70%; margin-top: 4px; }
.kpi .kpi-err { color: var(--bad-text); }
.kpi.is-error { border-color: var(--bad); }
@media (min-width: 600px) and (max-width: 1023.98px) {
    .g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
    .g5 .kpi { padding: 9px 10px; }
    .g5 .kpi b { font-size: 17px; }
}
@media (max-width: 599.98px) {
    .g5 .kpi.tot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 8px 12px; }
    .g5 .kpi.tot b { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
}

/* ---------- OoTresNumeros ---------- */
.num3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.num3 > div { border-radius: 12px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.num3 span { font-size: 11px; color: var(--muted); font-family: var(--display); font-weight: 600; display: block; }
.num3 b { font-family: var(--display); font-size: 20px; letter-spacing: -0.02em; white-space: nowrap; }
.num3 .falta { background: var(--amber-soft); border-color: var(--amber); }
.num3 .falta b { color: var(--amber-text); }
@media (max-width: 599.98px) {
    .num3 { gap: 6px; }
    .num3 > div { padding: 8px 9px; }
    .num3 b { font-size: 15.5px; }
}

/* ---------- OoMeta ---------- */
@media (min-width: 600px) { .metam { max-width: 290px; } }

/* ---------- OoAvatar ---------- */
.av { overflow: hidden; }
.av img { width: 100%; height: 100%; object-fit: cover; }
.av.av-sm { width: 24px; height: 24px; font-size: 10px; }
.av.av-lg { width: 44px; height: 44px; font-size: 16px; }
.av.av-c0 { background: var(--blue); color: var(--sobrePrimaria); }
.av.av-c1 { background: var(--navy-2); color: var(--sobreNoite); }
.av.av-c2 { background: var(--ok); color: var(--navy); } /* branco sobre "sucesso" dá 3,1: nunca texto (doc 08 §11) */
.av.av-c3 { background: var(--amber); color: var(--navy); }
.av.av-c4 { background: var(--cyan); color: var(--navy); }

/* ---------- OoLinha ---------- */
.li { min-height: 52px; position: relative; }
.lis > .li:first-child { border-top: 0; }
.li .li-v { font-family: var(--display); font-size: 13px; white-space: nowrap; flex: none; }
.li .li-a { color: inherit; text-decoration: none; }
.li.is-link .li-a::after { content: ""; position: absolute; inset: 0; }
.li.is-link:hover { background-image: linear-gradient(var(--hover-veil), var(--hover-veil)); }
.li .acts { position: relative; z-index: 1; align-items: center; }
.li[hidden], .tbl tr[hidden] { display: none !important; }

/* ---------- OoAbas ---------- */
.tabs { scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs .tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; font-family: var(--display); font-weight: 600; font-size: 12.5px; color: var(--muted); white-space: nowrap; text-decoration: none; border: 0; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; border-radius: 0; }
.tabs .tab:hover { color: var(--ink); background-image: linear-gradient(var(--hover-veil), var(--hover-veil)); }
.tabs .tab.on, .tabs .tab[aria-selected="true"], .tabs .tab[aria-current="page"] { color: var(--blue-text); border-bottom-color: var(--blue); }
.tabs .tab[disabled], .tabs .tab[aria-disabled="true"] { color: var(--subtle); cursor: not-allowed; background: none; }
.tab-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--mist); color: var(--muted); font-size: 10.5px; font-weight: 700; }
.tab.on .tab-n, .tab[aria-selected="true"] .tab-n, .tab[aria-current="page"] .tab-n { background: var(--blue-soft); color: var(--blue-text); }
.tabpanel { padding-top: var(--sp-3); }
.tabpanel[hidden] { display: none; }

/* ---------- OoChip / OoChips ---------- */
.chip { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; text-decoration: none; min-height: 36px; transition: border-color var(--dur) var(--ease); }
.chip:hover { background-image: linear-gradient(var(--hover-veil), var(--hover-veil)); }
.chip:active { background-image: linear-gradient(var(--press-veil), var(--press-veil)); }
.chip.on, .chip[aria-current="true"] { border-color: var(--blue); background-color: var(--blue-soft); color: var(--blue-text); }
.chip.off { opacity: .45; text-decoration: line-through; cursor: help; }
.chip[disabled] { background-color: var(--mist); color: var(--subtle); cursor: not-allowed; border-color: var(--line); }
.chip small { font-family: var(--body); font-weight: 400; font-size: 11px; color: var(--muted); }
.chip-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px; border-radius: var(--r-pill); background: var(--mist); color: var(--muted); font-size: 10.5px; font-weight: 700; }
.chip.on .chip-n { background: var(--surface); color: var(--blue-text); }
@media (max-width: 599.98px) {
    .chips.chips-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .chips.chips-scroll::-webkit-scrollbar { display: none; }
    .chip { min-height: 44px; flex: none; }
}

/* ---------- OoTabela ---------- */
.tbl th, .tbl td { height: 40px; padding-top: 0; padding-bottom: 0; vertical-align: middle; }
.tbl th { background: var(--surface-sunken); color: var(--muted); z-index: 1; }
.tbl tr[data-ponto] > td:first-child::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: middle; background: var(--blue); }
.tbl tr[data-ponto="a"] > td:first-child::before { background: var(--amber); }
.tbl tr[data-ponto="r"] > td:first-child::before { background: var(--bad); }
.tbl tr[data-ponto="g"] > td:first-child::before { background: var(--ok); }
.tbl tr[data-ponto="n"] > td:first-child::before { background: var(--line-strong); }
.tbl td .td-c b { font-family: var(--display); }
.th-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.th-sort:hover { color: var(--ink); }
.th-sort.on { color: var(--blue-text); }
.th-sort .ic-sort { width: 14px; height: 14px; opacity: .55; }
.th-sort.on .ic-sort { opacity: 1; }
.tbl tr.is-link { cursor: pointer; }
.tbl tbody tr.is-link:hover td { background: var(--bg); }
.tbl .tbl-msg td { height: auto; padding: 0; white-space: normal; }
.tbl tbody .tbl-msg:hover td { background: none; }
.tbl-vazio, .oo-lista-vazio { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 22px 14px; color: var(--muted); font-size: 13px; text-align: center; }
.oo-lista-vazio[hidden] { display: none; }
.tbl .tbl-msg .oo-erro { margin: 10px; }
.tbl-skel .skel { display: block; height: 12px; width: 70%; }
.tbl-mais { display: flex; justify-content: center; padding: 10px; }
.tbl-mais.is-done { display: none; }
/* Páginas numeradas de uma lista (_OoPaginacao; RN-EST-043, RN-CLI-039): quantidade, total e os números, embaixo da tabela. */
.oo-pag { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e10) var(--e16); padding: var(--e12) var(--e16); border-top: 1px solid var(--borda); font-size: 13px; }
.oo-pag-por { display: flex; align-items: center; gap: var(--e8); color: var(--textoSuave); }
.oo-pag-por .in { width: auto; height: 34px; padding: 0 28px 0 10px; font-size: 13px; }
.oo-pag-total { color: var(--textoSuave); }
.oo-pag-n { display: flex; align-items: center; gap: var(--e4); margin-left: auto; }
.oo-pag-num, .oo-pag-seta {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 34px; height: 34px; padding: 0 10px;
    border-radius: var(--r8); color: var(--texto); text-decoration: none; font-weight: 600;
}
.oo-pag-num:hover, .oo-pag-seta:hover { background: var(--primariaSuave); }
.oo-pag-num:focus-visible, .oo-pag-seta:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }
.oo-pag-num.on { background: var(--primaria); color: var(--sobrePrimaria); }
.oo-pag-reti { min-width: 20px; text-align: center; color: var(--textoSuave); }
@media (max-width: 599.98px) {
    .oo-pag { justify-content: space-between; }
    .oo-pag-n { margin-left: 0; width: 100%; justify-content: center; }
    .oo-pag-seta span { display: none; }
    .oo-pag-num, .oo-pag-seta { min-width: 40px; height: 40px; }
}

@media (max-width: 599.98px) {
    /* celular: a tabela vira OoLinha (ponto, título, subtítulo, valor, ação) — nunca rola de lado */
    .tbl-wrap { overflow: visible; }
    .tbl, .tbl tbody { display: block; }
    .tbl caption, .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .tbl tr {
        display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "p t v" "p s a"; column-gap: 10px; align-items: center;
        min-height: 60px; padding: 8px 2px; border-top: 1px solid var(--line);
    }
    .tbl tbody tr:first-child { border-top: 0; }
    .tbl tr::before { content: ""; grid-area: p; width: 0; }
    .tbl tr[data-ponto]::before { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
    .tbl tr[data-ponto="a"]::before { background: var(--amber); }
    .tbl tr[data-ponto="r"]::before { background: var(--bad); }
    .tbl tr[data-ponto="g"]::before { background: var(--ok); }
    .tbl tr[data-ponto="n"]::before { background: var(--line-strong); }
    .tbl td { display: block; height: auto; padding: 0; border: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left !important; font-size: 11.5px; color: var(--muted); }
    .tbl tr[data-ponto] > td:first-child::before { display: none; }
    .tbl tbody tr:hover td { background: none; }
    .tbl tr.tbl-msg, .tbl tr.tbl-skel { display: block; min-height: 0; }
    .tbl tr.tbl-msg td, .tbl tr.tbl-skel td { display: block !important; }
    .tbl tr.tbl-skel td + td { display: none !important; }
    .tbl tr.tbl-skel td { padding: 12px 0; }
    .tbl tr.tbl-msg::before, .tbl tr.tbl-skel::before { display: none; }
}

/* ---------- _OoLista (padrão 6.1) ---------- */
.oo-lista { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.oo-lista-h { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.oo-lista-h h2 { font-size: 19px; }
.oo-lista-h .sub { color: var(--muted); font-size: 12.5px; }
.oo-lista-tt { min-width: 0; flex: 1; }
.oo-lista-acao { margin-left: auto; }
/* Ações a mais no topo (ex.: "Exportar"): à esquerda da principal. */
.oo-lista-sec { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.oo-lista-sec + .oo-lista-acao { margin-left: var(--sp-2); }
.oo-lista-f { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; min-width: 0; }
.oo-lista > * { min-width: 0; }
.oo-lista-f .chips { flex: 1; min-width: 0; }
.oo-busca { position: relative; flex: 0 1 320px; min-width: 220px; }
.oo-busca svg.ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
.oo-busca input { width: 100%; height: 38px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); padding: 0 12px 0 36px; outline: none; }
.oo-busca input:hover { border-color: var(--line-strong); }
.oo-busca input:focus { border-color: var(--blue); }
.oo-lista-c { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; min-width: 0; }
.oo-lista-c > .lis { padding: 0 14px; }
@media (max-width: 599.98px) {
    .oo-lista-f { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
    .oo-busca { flex: none; min-width: 0; }
    .oo-lista-f > .chips { max-width: 100%; }
    .oo-busca input { height: 44px; }
    .oo-lista-c { padding: 0 12px; }
    /* a ação principal vai para a barra de ações, acima da barra inferior */
    .oo-lista-acao {
        position: fixed; left: 0; right: 0; bottom: var(--bnav-h); z-index: var(--z-float);
        padding: 10px 12px; background: var(--surface); border-top: 1px solid var(--line); margin: 0;
    }
    .oo-lista-acao .btn { width: 100%; height: 48px; }
    .oo-lista:has(.oo-lista-acao) { padding-bottom: 72px; }
}

/* =====================================================================
   Pedido de autorização (doc 06; doc 08 §5.1 BotaoPermitido) — janela do oo-botao-permitido e sino do topo.
   Marcação: Views/Shared/_OoAutorizacao.cshtml e Topbar; comportamento: js/core/autorizacao.js.
   ===================================================================== */
.aut { display: flex; flex-direction: column; gap: var(--e14); }
.aut-oque { margin: 0; font: var(--tipoCorpo); color: var(--textoSuave); }
.aut-modos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); padding: var(--e4); background: var(--fundo); border-radius: var(--r12); }
.aut-modo {
    display: flex; align-items: center; justify-content: center; gap: var(--e8); min-height: 44px; padding: var(--e8) var(--e10);
    border: 0; border-radius: var(--r10); background: none; color: var(--textoSuave); font: var(--tipoRotulo); font-size: 12.5px; cursor: pointer;
}
.aut-modo.on { background: var(--superficie); color: var(--primariaTexto); box-shadow: var(--sombraBalao); }
.aut-modo:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }
.aut-modo:disabled { opacity: .5; cursor: default; }
.aut-painel { display: flex; flex-direction: column; gap: var(--e14); }
.aut [hidden] { display: none; }

.aut-carregando { display: grid; gap: var(--e8); }
.aut-carregando i { height: 52px; border-radius: var(--r12); background: var(--fundo); animation: aut-pulso 1.2s ease-in-out infinite; }
.aut-vazio, .aut-explica { margin: 0; font: var(--tipoCorpo); color: var(--textoSuave); }

.aut-lista { display: grid; gap: var(--e8); max-height: 220px; overflow-y: auto; padding: 2px; }
.aut-quem {
    display: flex; align-items: center; gap: var(--e12); width: 100%; min-height: 52px; padding: var(--e8) var(--e12);
    border: var(--bordaPadrao); border-radius: var(--r12); background: var(--superficie); color: var(--texto); text-align: left; cursor: pointer;
}
.aut-quem:hover { border-color: var(--bordaForte); }
.aut-quem.on { border-color: var(--primaria); background: var(--primariaSuave); box-shadow: 0 0 0 1px var(--primaria); }
.aut-quem:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }
.aut-quem:disabled { opacity: .55; cursor: default; }
.aut-quem-n { display: flex; flex-direction: column; min-width: 0; }
.aut-quem-n b { font: var(--tipoCorpo); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aut-quem-n small { font: var(--tipoLegenda); font-size: 11px; color: var(--textoSuave); }

.aut-pin { display: flex; flex-direction: column; align-items: center; gap: var(--e12); position: relative; }
/* O campo recebe o teclado físico; quem mostra o que foi digitado são as bolinhas. */
.aut-pin-campo { position: absolute; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; }
.aut-dots { display: flex; gap: var(--e14); padding: var(--e8) var(--e12); border-radius: var(--pilula); }
.aut-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--bordaForte); }
.aut-dots i.on { background: var(--primaria); border-color: var(--primaria); }
.aut-pin-campo:focus-visible ~ .aut-dots { outline: 2px solid var(--primaria); outline-offset: 2px; }
.aut-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e8); width: 100%; max-width: 280px; }
.aut-pad button {
    height: 52px; border-radius: var(--r14); border: var(--bordaPadrao); background: var(--superficie);
    font: var(--tipoNumero); color: var(--texto); cursor: pointer; display: grid; place-items: center;
}
.aut-pad button:hover { border-color: var(--bordaForte); }
.aut-pad button:active { background: var(--primariaSuave); }
.aut-pad button:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }
.aut.is-ocupado .aut-pad, .aut.is-ocupado .aut-lista { opacity: .55; pointer-events: none; }
.aut.is-erro .aut-dots { animation: aut-nao .3s; }

.aut-espera, .aut-recusa { display: flex; flex-direction: column; align-items: center; gap: var(--e10); text-align: center; padding: var(--e8) 0; }
.aut-pulso { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--primariaSuave); color: var(--primariaTexto); animation: aut-pulso 1.4s ease-in-out infinite; }
.aut-espera-t { margin: 0; font: var(--tipoCorpo); font-weight: 600; color: var(--texto); }
.aut-msg { margin: 0; padding: var(--e10) var(--e12); border-radius: var(--r10); background: var(--erroSuave); color: var(--erroTexto); font: var(--tipoCorpo); }
/* Esperando a resposta, as abas não trocam mais. */
.aut.is-esperando .aut-modos { opacity: .5; pointer-events: none; }

@keyframes aut-pulso { 50% { opacity: .55; } }
@keyframes aut-nao { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .aut-carregando i, .aut-pulso, .aut.is-erro .aut-dots { animation: none; } }

/* ---------- sino: pedidos que esta pessoa pode responder ---------- */
.top-sino > .icon-btn { position: relative; }
.sino-n {
    position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; padding: 0 var(--e4); border-radius: var(--pilula);
    background: var(--erro); color: var(--sobrePrimaria); font: var(--tipoLegenda); font-weight: 700; line-height: 16px; text-align: center;
}
.sino-n[hidden] { display: none; }
.top-sino.tem > .icon-btn { color: var(--texto); }
.menu.sino { width: min(340px, calc(100vw - 24px)); padding: var(--e6); }
.sino-l { display: grid; gap: var(--e6); max-height: min(60vh, 420px); overflow-y: auto; }
.sino-vazio { margin: 0; padding: var(--e12) var(--e10); font: var(--tipoCorpo); color: var(--textoSuave); }
.sino-i { display: grid; gap: var(--e4); padding: var(--e10); border: var(--bordaPadrao); border-radius: var(--r12); background: var(--superficie); }
.sino-i > b { font: var(--tipoCorpo); font-weight: 600; color: var(--texto); }
.sino-i > span { font: var(--tipoCorpo); color: var(--texto); }
.sino-i > small { font: var(--tipoLegenda); font-size: 11px; color: var(--textoSuave); }
.sino-a { display: flex; gap: var(--e8); margin-top: var(--e6); }
.sino-a .btn { flex: 1; }
.sino-r { display: grid; gap: var(--e6); margin-top: var(--e6); }
.sino-r input { width: 100%; min-height: 38px; padding: 0 var(--e10); border: var(--bordaPadrao); border-radius: var(--r10); background: var(--superficie); color: var(--texto); font: var(--tipoCorpo); }
.sino-r input:focus-visible { outline: 2px solid var(--primaria); outline-offset: 1px; }
.sino-i [hidden] { display: none; }
@media (max-width: 599.98px) {
    /* No celular o menu abre na largura da tela, logo abaixo do topo. */
    .top-sino { position: static; }
    .menu.sino { position: fixed; top: calc(var(--top-h-celular) + env(safe-area-inset-top, 0px) + 4px); right: 12px; left: 12px; width: auto; }
}

/* C1 · pergunta inicial (#nova-venda): janela na web e no tablet, tela cheia no celular. */
.ov-pergunta .modal { text-align: center; }
.ov-pergunta-d { margin-top: var(--e8); }
.ov-pergunta-a { justify-content: center; margin-top: var(--e16); }
.ov-pergunta .at-rasc-j { text-align: left; margin-top: var(--e16); border-top: 1px solid var(--borda); padding-top: var(--e12); }
.ov-pergunta .at-rasc-t { font: var(--tipoTituloCartao); margin: 0 0 var(--e8); }
@media (max-width: 599.98px) {
    .ov-pergunta { padding: 0; }
    .ov-pergunta .modal { width: 100%; height: 100dvh; max-height: none; border-radius: 0; display: flex; flex-direction: column; justify-content: center; }
}

/* ---------- página de erro de uma operação (Views/Shared/OoErro) ---------- */
.oo-erro-pagina { display: grid; gap: var(--e16); max-width: 640px; }
.oo-erro-acoes { display: flex; flex-wrap: wrap; gap: var(--e8); margin: 0; }

/* ---------- oo-carrossel: os cartões do resumo (RN-IND-030), no Início e no Painel da loja ----------
   Cinco cartões por página na web larga, três no tablet e dois e um pedaço do próximo no celular (o pedaço
   mostra que dá para arrastar). A faixa anda devagar pelo components.js (.is-andando); sem script, rola com o dedo.
   O encaixe por cartão fica só no toque: no mouse, ele brigaria com a faixa andando. */
.oo-carr { position: relative; min-width: 0; }
.oo-carr-trilho {
    --por-pagina: 5;
    display: grid; grid-auto-flow: column; gap: var(--e8);
    grid-auto-columns: calc((100% - (var(--por-pagina) - 1) * var(--e8)) / var(--por-pagina));
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; padding-bottom: 2px;
}
.oo-carr-trilho::-webkit-scrollbar { display: none; }
@media (pointer: coarse) { .oo-carr-trilho:not(.is-andando) { scroll-snap-type: x mandatory; } }
.oo-carr-trilho > .kpi { scroll-snap-align: start; }
.oo-carr-trilho > .kpi small { white-space: normal; }
.oo-carr-trilho:focus-visible { outline: var(--anelFoco); outline-offset: var(--anelFocoAfastamento); border-radius: 13px; }
.oo-carr-ctl { display: flex; align-items: center; justify-content: flex-end; gap: var(--e8); margin-top: var(--e6); }
.oo-carr-ctl[hidden] { display: none; }
.oo-carr-seta {
    width: 28px; height: 28px; padding: 0; display: inline-grid; place-items: center; cursor: pointer;
    border: 1px solid var(--borda); border-radius: 50%; background: var(--superficie); color: var(--texto);
}
.oo-carr-seta:hover { border-color: var(--blue-soft-line); }
.oo-carr-pontos { display: inline-flex; align-items: center; gap: 6px; }
.oo-carr-ponto { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: var(--borda); cursor: pointer; transition: width var(--dur) var(--ease); }
.oo-carr-ponto[aria-current="true"] { width: 18px; background: var(--primaria); }
.oo-carr-seta:focus-visible, .oo-carr-ponto:focus-visible { outline: var(--anelFoco); outline-offset: var(--anelFocoAfastamento); }
/* Cartão que pede ação: âmbar (atenção) ou vermelho (alerta). */
.kpi.is-atencao { border-color: var(--atencao); background: var(--atencaoSuave); }
.kpi.is-atencao b { color: var(--atencaoTexto); }
.kpi.is-alerta { border-color: var(--erro); background: var(--erroSuave); }
.kpi.is-alerta b { color: var(--erroTexto); }
/* O "i" do cartão (oo-indicador ajuda="…"): no canto de cima, à direita. O balão é do components.js ([data-oo-ajuda]),
   preso à janela, porque o trilho do carrossel corta o que sai do cartão. */
.kpi.tem-ajuda { position: relative; }
.kpi.tem-ajuda > span:first-child { padding-right: 20px; }
.kpi-i {
    position: absolute; top: 7px; right: 7px; width: 18px; height: 18px; display: grid; place-items: center;
    border: 1px solid var(--borda); border-radius: 50%; background: var(--superficie); color: var(--textoSuave);
    font: 700 11px/1 var(--fonteTitulo); font-style: normal; cursor: help; user-select: none;
}
.kpi-i:hover, .kpi-i:focus-visible, .kpi-i.is-aberto { border-color: var(--primaria); color: var(--primaria); }
.kpi-i:focus-visible { outline: var(--anelFoco); outline-offset: var(--anelFocoAfastamento); }
.kpi.tot .kpi-i { background: transparent; border-color: var(--sobreNoiteLegenda); color: var(--sobreNoiteLegenda); }
.kpi.tot .kpi-i:hover, .kpi.tot .kpi-i:focus-visible, .kpi.tot .kpi-i.is-aberto { border-color: var(--sobreNoite); color: var(--sobreNoite); }
.kpi.is-atencao .kpi-i, .kpi.is-alerta .kpi-i { background: transparent; }
/* Área de toque maior que o desenho. */
.kpi-i::after { content: ""; position: absolute; inset: -9px; }
/* O "i" da opção (oo-opcao ajuda="…"): logo depois do nome, o mesmo desenho do "i" do cartão. */
/* Seletor mais forte que o ".opt i" e o ".opt:has(:checked) i" (a bolinha do rádio), que pegariam o "i" também. */
.opt i.opt-ajuda, .opt:has(.oo-opt-in:checked) i.opt-ajuda {
    position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 6px; vertical-align: 1px;
    border: 1px solid var(--borda); border-radius: 50%; background: var(--superficie); color: var(--textoSuave);
    font: 700 11px/1 var(--fonteTitulo); font-style: normal; cursor: help; user-select: none;
}
.opt i.opt-ajuda:hover, .opt i.opt-ajuda:focus-visible, .opt i.opt-ajuda.is-aberto,
.opt:has(.oo-opt-in:checked) i.opt-ajuda:hover, .opt:has(.oo-opt-in:checked) i.opt-ajuda.is-aberto { border-color: var(--primaria); color: var(--primaria); }
.opt-ajuda:focus-visible { outline: var(--anelFoco); outline-offset: var(--anelFocoAfastamento); }
.opt-ajuda::after { content: ""; position: absolute; inset: -9px; }
.oo-ajuda {
    /* A quebra de linha do texto separa a explicação do exemplo. */
    white-space: pre-line;
    position: fixed; z-index: var(--z-popover); max-width: min(280px, calc(100vw - 16px)); padding: var(--e8) var(--e10);
    background: var(--noite); color: var(--sobreNoite); border-radius: var(--r12); box-shadow: var(--sombraBalao);
    font: var(--tipoCorpo); font-size: 12.5px; line-height: 1.4; pointer-events: none;
}
@media (max-width: 1099.98px) { .oo-carr-trilho { --por-pagina: 3; } }
@media (max-width: 599.98px) {
    .oo-carr-trilho { --por-pagina: 2.25; }
    .oo-carr-seta { display: none; }
    .oo-carr-ctl { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .oo-carr-ponto { transition: none; }
}

/* A nota na finalização: endereço do cliente para a NF-e e a situação da nota no cupom (core/nota-final.js). */
.nota-endereco { display: flex; flex-direction: column; gap: var(--e8); margin-top: var(--e8); min-width: 0; }
.nota-endereco-ok, .nota-endereco-aviso, .nota-situacao-linha { display: flex; align-items: center; gap: var(--e8); flex-wrap: wrap; margin: 0; }
.nota-endereco-ok > svg, .nota-situacao-ok > svg { color: var(--sucesso); width: 18px; height: 18px; flex: none; }
.nota-endereco-aviso { color: var(--atencaoTexto); }
.nota-endereco-aviso > svg { width: 18px; height: 18px; flex: none; }
.nota-endereco-falta { padding: var(--e12); border: 1px solid var(--atencao); border-radius: var(--r12); background: var(--atencaoSuave); }
.nota-endereco-aviso { flex-wrap: nowrap; align-items: flex-start; }
.nota-endereco-campos { border: 0; padding: 0; margin: 0; min-width: 0; }
.nota-situacao-caixa:empty { display: none; }
.nota-situacao { display: flex; flex-direction: column; gap: var(--e8); padding: var(--e12); border: 1px solid var(--borda); border-radius: var(--r12); margin: var(--e12) 0; }
.nota-situacao-rejeitada { display: flex; flex-direction: column; gap: var(--e4); color: var(--erro); }
.nota-situacao-rejeitada .muted { color: var(--textoSuave); }

/* RN-PED-078 · janela "Dar desconto" (Views/Shared/_OoDesconto.cshtml, app/js/desconto.js) */
.dsc { display: grid; gap: var(--e12); }
.dsc-agora { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e12); margin: 0; }
.dsc-agora b { font: var(--tipoTituloCartao); }
.dsc-camp { margin: calc(var(--e8) * -1) 0 0; color: var(--sucessoTexto); font: var(--tipoLegenda); }
.dsc-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e12); }
.dsc-campos .dsc-final { grid-column: 1 / -1; }
.dsc-final input { font-weight: 700; }
.dsc-in { display: flex; align-items: center; gap: var(--e6); }
.dsc-in input { flex: 1; min-width: 0; }
.dsc-pre, .dsc-suf { color: var(--textoSuave); }
.dsc-limite { display: grid; gap: var(--e6); padding: var(--e12); border-radius: var(--r10); background: var(--fundo); }
.dsc-limite p { margin: 0; font: var(--tipoLinhaSub); }
.dsc-formas { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e4); font: var(--tipoLegenda); color: var(--textoSuave); }
.dsc-barra { height: 8px; border-radius: 999px; background: var(--borda); overflow: hidden; }
.dsc-barra i { display: block; height: 100%; width: 0; background: var(--sucesso); transition: width .15s ease; }
.dsc-barra.is-forma i { background: var(--atencao); }
.dsc-barra.is-acima i { background: var(--erro); }
.dsc-aviso { margin: 0; padding: var(--e8) var(--e12); border-radius: var(--r10); font: var(--tipoLinhaSub); background: var(--atencaoSuave); color: var(--atencaoTexto); }
.dsc-aviso.is-acima { background: var(--erroSuave); color: var(--erroTexto); }
@media (max-width: 599.98px) { .dsc-campos { grid-template-columns: minmax(0, 1fr); } }

/* RN-PED-079 · a conta do desconto (Views/Shared/_OoDescontoConta.cshtml): tela, pagamento e comprovante */
.dsc-conta { margin: 0; display: grid; gap: var(--e4); }
.dsc-conta > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e12); }
.dsc-conta dt { color: var(--textoSuave); }
.dsc-conta dt small { display: block; font: var(--tipoLegenda); }
.dsc-conta dd { margin: 0; font-weight: 600; text-align: right; white-space: nowrap; }
.dsc-conta-camp dd, .dsc-conta-loja dd { color: var(--sucessoTexto); }




.dsc-economia { margin: var(--e8) 0 0; padding: var(--e8); border-radius: var(--r10); background: var(--sucessoSuave); color: var(--sucessoTexto); font-weight: 700; text-align: center; }
@media print { .dsc-economia { background: none; border: 1px solid currentColor; } }