:root {
  --bg: #f2f4fa; --card: #fff; --text: #16213d; --muted: #5f6983; --line: #e3e7f1;
  --brand: #1a3cb8; --brand-2: #15319a; --brand-soft: #e9eefc;
  --good: #1e8a4c; --good-soft: #e5f5ec; --bad: #c0392b; --bad-soft: #fcebea;
  --warn: #b7791f; --warn-soft: #fdf4e3; --info: #2563a8; --info-soft: #e8f0fb;
  /* menu lateral: degradê da cor da marca (igual ao portal C3 Móvel); marca própria troca --brand e --side-2 */
  --side: #1a3cb8; --side-2: #0f2270; --side-text: #dbe3ff; --radius: 14px; --sombra: 0 4px 16px rgba(20,40,110,.06);
  /* superfícies e bordas que o modo noite troca (ver bloco "Modo noite" no fim) */
  --link: var(--brand); --link-2: var(--brand-2);
  --card-line: #e8ecf5; --card-2: #f8fafc; --card-3: #fbfdff; --chip: #eef1f5; --chip-text: #4a5568; --code: #f1f4f8;
  --field: #fff; --field-line: #cfd8e3; --label: #374151; --ghost-line: #cdd7f6;
  --good-line: #b7e2c8; --bad-line: #f2c1bb; --info-line: #c4d7f0; --warn-line: #f0c987;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.35rem; margin: 0; font-weight: 650; }
h2 { font-size: 1.05rem; margin: 0 0 .75rem; font-weight: 650; }
h3 { margin: 0 0 .5rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.nowrap { white-space: nowrap; }

/* shell */
.shell { display: flex; min-height: 100vh; }
.side { width: 250px; background: linear-gradient(180deg, var(--brand), var(--side-2)); color: var(--side-text); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; flex-shrink: 0; }
.brand { display: flex; gap: .7rem; align-items: center; padding: 1.25rem 1.2rem; }
.brand strong { display: block; color: #fff; font-size: 1rem; }
.brand small { display: block; font-size: .78rem; opacity: .75; }
.logo { height: 40px; width: auto; max-width: 40px; object-fit: contain; flex-shrink: 0; }
.brand.big .logo { height: 52px; max-width: 52px; }
/* logo próprio de revenda (horizontal): ocupa a largura e o nome fica embaixo */
.brand.logo-proprio { flex-direction: column; align-items: flex-start; gap: .4rem; }
.brand.logo-proprio .logo { max-width: 190px; height: auto; max-height: 56px; }
.brand.big.logo-proprio .logo { max-width: 260px; max-height: 80px; }
.pv-side { color: #fff; }
.side nav { display: flex; flex-direction: column; padding: .5rem .6rem; gap: 2px; flex: 1; overflow-y: auto; }
.side nav a { display: flex; gap: .7rem; align-items: center; color: var(--side-text); padding: .6rem .75rem; border-radius: 8px; font-size: .94rem; }
.side nav a:hover { background: rgba(255,255,255,.1); text-decoration: none; color: #fff; }
.side nav a.on { background: #fff; color: var(--brand); font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.side nav svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.side .nav-g summary { display: flex; gap: .7rem; align-items: center; color: var(--side-text); padding: .6rem .75rem; border-radius: 8px; font-size: .94rem; cursor: pointer; list-style: none; user-select: none; }
.side .nav-g summary::-webkit-details-marker { display: none; }
.side .nav-g summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(-45deg); opacity: .6; transition: transform .15s; }
.side .nav-g[open] summary::after { transform: rotate(45deg); }
.side .nav-g summary:hover { background: rgba(255,255,255,.1); color: #fff; }
.side .nav-g summary.has-on { color: #fff; }
.side nav a.sub { padding: .45rem .75rem .45rem 2.55rem; font-size: .9rem; }
.side .nav-g[open] { padding-bottom: .25rem; }
.side-foot { border-top: 1px solid rgba(255,255,255,.15); padding: 1rem 1.2rem; display: flex; align-items: center; gap: .6rem; }
.who { flex: 1; min-width: 0; }
.who strong, .who small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who strong { color: #fff; font-size: .9rem; }
.who small { font-size: .78rem; opacity: .7; }
.side-foot .btn.ghost { color: var(--side-text); border-color: rgba(255,255,255,.2); background: transparent; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; gap: .8rem; padding: 1.1rem 1.75rem; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.menu-btn { display: none; border: 0; background: none; font-size: 1.4rem; cursor: pointer; color: var(--text); }
.content { padding: 1.5rem 1.75rem 3rem; width: 100%; }
.filters .own-only { flex-basis: 100%; }

/* cards */
.card { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.25rem; box-shadow: var(--sombra); }
.card.inline { display: flex; gap: .6rem; align-items: baseline; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .9rem; flex-wrap: wrap; }
.card-head h2 { margin: 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.stat { background: var(--card); border: 1px solid var(--card-line); box-shadow: var(--sombra); border-radius: var(--radius); padding: 1rem 1.2rem; color: var(--text); display: flex; flex-direction: column; gap: .15rem; }
a.stat:hover { border-color: var(--link); text-decoration: none; }
.stat span { color: var(--muted); font-size: .85rem; }
.stat strong { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.stat strong small { font-size: .95rem; color: var(--muted); font-weight: 500; }
.stat strong.sm { font-size: 1rem; }
.stat em { font-style: normal; font-size: .85rem; color: var(--muted); }
.stat.warn { border-color: var(--warn-line); background: var(--warn-soft); }
.stat.warn em { color: var(--warn); font-weight: 600; }
.stat.sel { border-color: var(--link); box-shadow: inset 0 0 0 1px var(--link); }

/* tables */
.table-wrap { overflow-x: auto; margin: 0 -1.25rem; padding: 0 1.25rem; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th { text-align: left; font-weight: 600; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; padding: .55rem .6rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: .6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:hover { background: var(--card-2); }
tr.ramal-extra td { background: var(--card-2); }
tr.ramal-extra td:first-child { padding-left: 1.6rem; }
.ramal-extra-seta { color: var(--muted); margin-left: -1rem; }
tbody tr:last-child td { border-bottom: 0; }
td.rec { white-space: nowrap; }
td.rec audio { height: 34px; max-width: 260px; vertical-align: middle; }
.actions-cell { white-space: nowrap; text-align: right; }
.actions-cell .btn + .btn { margin-left: .3rem; }

/* tags */
.tag { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--chip); color: var(--chip-text); white-space: nowrap; }
.tag.good { background: var(--good-soft); color: var(--good); }
.tag.bad { background: var(--bad-soft); color: var(--bad); }
.tag.info { background: var(--info-soft); color: var(--info); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.done { background: #1e8a4c; color: #fff; }
.tag.t0 { background: var(--brand-soft); color: var(--link-2); }
.tag.t2, .tag.t3, .tag.t8 { background: var(--good-soft); color: var(--good); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #a0aec0; margin-right: .45rem; }
.dot.online { background: #22c55e; box-shadow: 0 0 0 3px #22c55e33; }
.dot.busy { background: #ef4444; }
.dot.ringing { background: #f59e0b; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .3; } }

/* buttons & forms */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .55rem 1.05rem; border-radius: 10px; border: 1px solid var(--brand); background: var(--brand); color: #fff; font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; }
.btn:hover { background: var(--brand-2); text-decoration: none; }
.btn.ghost { background: var(--card); color: var(--link); border-color: var(--ghost-line); }
.btn.ghost:hover { background: var(--brand-soft); }
.btn.sm { padding: .3rem .65rem; font-size: .84rem; }
.btn.block { width: 100%; }
.form { display: flex; flex-direction: column; gap: .9rem; }
label { display: flex; flex-direction: column; gap: .3rem; font-size: .88rem; font-weight: 600; color: var(--label); }
input, select, textarea { font: inherit; font-weight: 400; padding: .55rem .7rem; border: 1px solid var(--field-line); border-radius: 8px; background: var(--field); color: var(--text); width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-soft); border-color: var(--link); }
input[type=file] { padding: .4rem; font-size: .85rem; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin: 0; display: flex; flex-direction: column; gap: .8rem; }
legend { font-weight: 650; padding: 0 .4rem; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.form.grid2 { display: grid; }
.span2 { grid-column: 1 / -1; }
.grid2 > .card { margin-bottom: 0; }
.grid2 + .card { margin-top: 1.25rem; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
.filters { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.filters label { flex: 1 1 170px; }
.filters .acc-select { flex: 2 1 320px; }
.filters .span-all { flex-basis: 100%; margin: 0; }
.filters .span-all .btn { margin: .15rem .2rem; }
.alert { padding: .8rem 1rem; border-radius: 8px; margin-bottom: 1rem; background: var(--good-soft); color: var(--good); border: 1px solid var(--good-line); }
.alert.err { background: var(--bad-soft); color: var(--bad); border-color: var(--bad-line); }
.alert.info { background: var(--info-soft); color: var(--info); border-color: var(--info-line); }
.alert ul { margin: 0; padding-left: 1.1rem; }

.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin: -.25rem 0 1rem; }
.tabs a { padding: .55rem 1rem; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 600; }
.tabs a.on { color: var(--link); border-color: var(--link); }
.tabs a:hover { text-decoration: none; color: var(--text); }
.pager { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 1rem; color: var(--muted); }

/* portabilidade */
.grid-addr { display: grid; grid-template-columns: 150px 1fr 120px; gap: 1rem; }
.grid-addr .a-comp { grid-column: span 1; }
.grid-addr .a-bai { grid-column: span 2; }
.grid-addr .a-cid { grid-column: span 2; }
.status-card { display: flex; flex-wrap: wrap; gap: 2rem; }
.status-card .big { font-size: 1.1rem; font-weight: 650; margin-top: .2rem; }
.status-card .big .tag { font-size: .95rem; padding: .25rem .8rem; }
.status-card .motivo { flex-basis: 100%; background: var(--bad-soft); border-radius: 8px; padding: .8rem 1rem; }
.status-card .motivo p { margin: .25rem 0 0; color: var(--bad); }
.admin-box { border-color: var(--field-line); background: var(--card-3); }
.admin-box h2 { margin: 0; }
.danger-zone { margin: -.5rem 0 1.25rem; text-align: right; }
.btn.danger { background: var(--card); color: var(--bad); border-color: var(--bad-line); }
.btn.danger:hover { background: var(--bad-soft); }
.nums { columns: 2; margin: 0 0 1rem; padding-left: 1.1rem; font-variant-numeric: tabular-nums; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1rem; margin: 0; }
.kv dt { color: var(--muted); font-size: .88rem; }
.kv dd { margin: 0; }
.files { list-style: none; padding: 0; margin: 0 0 1rem; }
.files li { padding: .5rem 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
.files .muted { font-size: .82rem; }
.upload summary { list-style: none; display: inline-flex; }
.upload summary::-webkit-details-marker { display: none; }
.upload form { margin-top: 1rem; }
.export-longo summary { cursor: pointer; }
.export-longo .filters { margin-top: 1rem; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 1.1rem 1rem; }
.timeline li::before { content: ""; position: absolute; left: -1.43rem; top: .35rem; width: 10px; height: 10px; border-radius: 50%; background: var(--link); border: 2px solid var(--card); }
.timeline p { margin: .35rem 0; }

/* autoatendimento */
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--code); padding: .1rem .4rem; border-radius: 5px; font-size: .88rem; }
.kv dd .btn { margin-left: .3rem; }
.howto { margin-top: 1rem; }
.steps-list { margin: 0 0 1rem; padding-left: 1.2rem; }
.steps-list li { margin-bottom: .35rem; }
.steps ol { margin: .5rem 0 0; padding-left: 1.2rem; }
label.check span { font-weight: 400; }
.howto summary { cursor: pointer; color: var(--link); font-weight: 600; }
.howto ol { margin: .6rem 0 0; padding-left: 1.2rem; }
.qr-box { display: grid; place-items: center; min-height: 240px; }
label.check { flex-direction: row; align-items: center; gap: .5rem; font-weight: 500; }
label.check input { width: auto; }
.inline-input { display: flex; gap: .5rem; }
.inline-form { display: flex; gap: .5rem; align-items: center; }
.inline-form select { min-width: 220px; }
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { padding: .35rem 0; border-bottom: 1px solid var(--line); }
h3 { font-size: .95rem; }

/* contratação de números */
.num-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; }
.num-opt { flex-direction: row; align-items: center; gap: .5rem; border: 1px solid var(--line); border-radius: 8px; padding: .6rem .8rem; cursor: pointer; font-weight: 600; font-variant-numeric: tabular-nums; }
.num-opt input { width: auto; }
.num-opt:has(input:checked) { border-color: var(--link); background: var(--brand-soft); }
.termos { background: var(--card-2); border: 1px solid var(--line); border-radius: 8px; padding: .8rem 1rem; font-size: .9rem; max-height: 220px; overflow: auto; }
.cancel-did summary { list-style: none; display: inline-flex; }
.cancel-did summary::-webkit-details-marker { display: none; }
.cancel-did[open] form { margin-top: .5rem; text-align: left; min-width: 220px; }

/* URA */
.horario .iv { align-items: center; }
.horario .iv input { width: auto; }
.ura-opts th { width: 130px; text-transform: none; font-size: .88rem; letter-spacing: 0; color: var(--text); }
.ura-opts td { display: flex; gap: .5rem; }
.ura-opts select { max-width: 360px; }
.ura-num { max-width: 200px; }
.audio-box { border: 1px solid var(--line); border-radius: 8px; padding: 1rem; display: flex; flex-direction: column; gap: .8rem; }
.audio-box audio { width: 100%; }
.site-foot { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; text-align: center; }
.auth-foot { margin: 1.25rem 0 0; text-align: center; color: var(--muted); font-size: .78rem; line-height: 1.5; }

/* seleção de números em lista */
.num-picker .filters { padding: 0; border: 0; margin-bottom: .75rem; }
.np-lista { max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.np-lista table th { position: sticky; top: 0; background: var(--card-2); z-index: 1; }
.np-lista td:first-child, .np-lista th:first-child { width: 36px; text-align: center; }
.np-lista input[type=checkbox] { width: auto; }
.np-lista tbody tr:has(input:checked) { background: var(--brand-soft); }
.np-vazio { padding: 1rem; margin: 0; }

/* URA: números */
.empty-hint { background: var(--card-2); border: 1px dashed var(--field-line); border-radius: 8px; padding: .9rem 1rem; color: var(--muted); }
.num-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.num-chips li { display: flex; align-items: center; gap: .6rem; background: var(--good-soft); border: 1px solid var(--good-line); border-radius: 999px; padding: .3rem .4rem .3rem .9rem; }
.num-chips .chip-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.num-chips form { margin: 0; }
.num-chips .btn { border-radius: 999px; }
h3.sub { margin: 1.5rem 0 .75rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.np-bar { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .75rem; padding: .75rem 0 0; background: var(--card); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* estado de espera de formulário (form[data-aguarde]) */
.btn.aguardando, .btn.aguardando:disabled { opacity: .85; cursor: progress; }
.btn .giro { width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: giro .7s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }
.aguarde-aviso { margin: .6rem 0 0; padding: .55rem .8rem; border-radius: 8px; background: var(--brand-soft, #e8eefc); color: var(--text); font-size: .9rem; }
@media (prefers-reduced-motion: reduce) { .btn .giro { animation-duration: 2s; } }

/* campo digitável para listas longas */
.combo { position: relative; flex: 1; min-width: 200px; }
.combo-native { display: none !important; }
.combo-input { width: 100%; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2rem; }
.combo-list { position: fixed; z-index: 50; max-height: 300px; overflow: auto; background: var(--field); color: var(--text);
  border: 1px solid var(--field-line); border-radius: 8px; box-shadow: 0 10px 25px rgba(15,28,46,.15); font-weight: 400; }
.combo-group { padding: .35rem .7rem .2rem; font-size: .75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; background: var(--card-2); position: sticky; top: 0; }
.combo-opt { padding: .45rem .7rem; cursor: pointer; font-size: .9rem; color: var(--text); }
.combo-opt.off { opacity: .5; cursor: not-allowed; }
.combo-opt:hover, .combo-opt.hl { background: var(--brand-soft); }
.combo-opt.sel { font-weight: 700; }
.combo-empty { padding: .6rem .7rem; color: var(--muted); font-size: .88rem; }
.inline-form .combo, .ura-opts .combo { max-width: 360px; }

/* login */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: linear-gradient(160deg, #0b1a4d 0%, var(--brand) 70%); }
.auth-card { width: 100%; max-width: 400px; background: var(--card); border-radius: 16px; padding: 2rem; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.brand.big { padding: 0 0 1rem; }
.brand.big strong { color: var(--text); font-size: 1.15rem; }
.brand.big small { color: var(--muted); opacity: 1; }
.auth-card > .muted { margin: 0 0 1.25rem; }

/* PIX */
dialog { border: 0; background: var(--card); color: var(--text); border-radius: 14px; padding: 1.5rem; width: min(420px, 92vw); box-shadow: 0 20px 50px rgba(0,0,0,.3); }
dialog::backdrop { background: rgba(15,28,46,.55); }
#pix-qr { display: grid; place-items: center; margin: 1rem 0; min-height: 220px; }
#pix-code { font-family: ui-monospace, monospace; font-size: .78rem; margin-bottom: 1rem; resize: none; }

/* mobile */
@media (max-width: 900px) {
  .side { position: fixed; left: -260px; z-index: 20; transition: left .2s; }
  .side.open { left: 0; box-shadow: 0 0 40px rgba(0,0,0,.4); }
  .menu-btn { display: block; }
  .top { padding: .9rem 1rem; }
  .content { padding: 1rem; }
  .grid2, .grid3, .form.grid2, .grid-addr { grid-template-columns: 1fr; }
  .grid-addr > label { grid-column: auto !important; }
  .nums { columns: 1; }
  .table-wrap { margin: 0 -1rem; padding: 0 1rem; }
  .card { padding: 1rem; }
}

/* administrador */
form.inline { display: inline; margin: 0; }
.filters .grow { flex: 3 1 320px; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
.imp-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; background: var(--imp-bg, #fff7e0); border: 1px solid var(--warn-line); color: var(--imp-text, #7a5200); border-radius: 8px; padding: .6rem 1rem; margin-bottom: 1rem; }

/* painéis (gráficos) */
.tabs-info { margin-left: auto; align-self: center; font-size: .85rem; padding-right: .25rem; }
.viz svg { display: block; overflow: visible; font-family: inherit; }
.viz-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .84rem; color: var(--muted); margin-bottom: .4rem; }
.viz-legend i, .viz-tip i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.viz-tip { position: fixed; z-index: 60; pointer-events: none; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem; box-shadow: 0 8px 20px rgba(15,28,46,.15); font-size: .84rem; color: var(--text); max-width: 280px; }
.viz-tip strong { display: block; margin-bottom: .2rem; }
.viz-tip .muted { margin-top: .2rem; }
.viz-data { margin-top: .5rem; font-size: .84rem; }
.viz-data summary { cursor: pointer; color: var(--muted); }
.viz-data table { font-size: .82rem; }
.viz-ramp { display: flex; align-items: center; gap: 3px; font-size: .8rem; color: var(--muted); margin-top: .4rem; }
.viz-ramp i { width: 22px; height: 10px; border-radius: 2px; }
.viz-ramp span { margin: 0 .4rem; }
.hbars { display: flex; flex-direction: column; gap: .45rem; }
.hb-row { display: grid; grid-template-columns: minmax(90px, 34%) 1fr auto; align-items: center; gap: .6rem; font-size: .88rem; }
.hb-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-t { background: var(--code); border-radius: 4px; height: 12px; }
.hb-b { display: block; height: 12px; border-radius: 0 4px 4px 0; }
.hb-v { font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 4.5rem; text-align: right; }
.barcell { min-width: 160px; white-space: nowrap; }
.inbar { display: inline-block; height: 10px; border-radius: 0 4px 4px 0; background: #2a78d6; vertical-align: middle; max-width: 110px; min-width: 2px; }
.grid2 > .card { min-width: 0; }
.vrow { margin-bottom: 1.25rem; }
.grid2.vrow + .card { margin-top: 0; }
@media (max-width: 900px) { .tabs { flex-wrap: wrap; } .tabs-info { flex-basis: 100%; margin: .3rem 0 0; } }

/* condomínio */
.cond-busca { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.cond-busca input#cond-q { flex: 1 1 320px; font-size: 1.05rem; padding: .7rem .9rem; }
.cond-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.cond-un { display: flex; flex-direction: column; gap: .1rem; border: 1px solid var(--line); border-left: 4px solid #22c55e; border-radius: 8px; padding: .55rem .7rem; color: var(--text); background: var(--card); }
.cond-un:hover { border-color: var(--link); text-decoration: none; background: var(--brand-soft); }
.cond-un.off { border-left-color: var(--off-line, #cbd5e1); background: var(--card-2); }
.cond-un .cu-ap { font-weight: 700; font-size: 1.05rem; }
.cond-un .cu-disc { font-variant-numeric: tabular-nums; color: var(--link-2); font-weight: 600; font-size: .9rem; }
.cond-un .cu-st { font-size: .8rem; color: var(--muted); }
.cond-un .cu-st .dot { width: 7px; height: 7px; margin-right: .3rem; }
.cond-un .cu-mor { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cond-regs li { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.big-num { font-size: 1.5rem; font-variant-numeric: tabular-nums; color: var(--link-2); }
.ideias-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin-top: 1rem; }
.ideias-grid > div { border: 1px solid var(--line); border-radius: 10px; padding: 1rem; background: var(--card-3); }
.ideias-grid h3 { font-size: 1rem; margin-bottom: .4rem; }
.ideias-grid p { margin: 0; color: var(--label); font-size: .92rem; }
[hidden] { display: none !important; }
@media (max-width: 600px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .stat { padding: .75rem .85rem; }
  .stat strong { font-size: 1.4rem; }
  .cond-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cond-un .cu-obs { font-size: .78rem; color: var(--warn); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cond-un .cu-cel { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .15rem; }
.cond-un .cu-cel span { font-size: .72rem; padding: .05rem .4rem; border-radius: 999px; background: var(--brand-soft); color: var(--muted); }
.cond-un .cu-cel span.on { color: var(--good); font-weight: 600; }
.cond-un .cu-cel span.inativo { opacity: .5; text-decoration: line-through; }
.cond-un.nunca { border-left-style: dashed; border-left-color: var(--warn); }
.warn-txt { color: var(--warn); font-weight: 600; }
.cond-un .cu-cel span.nunca { color: var(--warn); box-shadow: inset 0 0 0 1px currentColor; background: transparent; }
.print-table tr.sub-cel td { color: #555; font-size: .9em; }
.stat .delta { font-size: .8rem; color: var(--muted); margin-top: .15rem; }
.stat .delta.good { color: var(--good); }
.stat .delta.bad { color: var(--bad); }

/* impressão (lista da portaria, relatórios) */
@media print {
  body { background: #fff; font-size: 11px; }
  .side, .top, .filters, .tabs, .site-foot, .imp-bar, .alert, .cond-busca, .stats, .btn, .viz-data, form { display: none !important; }
  .shell, .main { display: block; }
  .content { padding: 0; }
  .card { border: 0; padding: 0; margin: 0 0 .6rem; break-inside: avoid; }
  .cond-grid { grid-template-columns: repeat(6, 1fr); gap: .25rem; }
  .cond-un { padding: .25rem .4rem; border-left-width: 2px; }
  .cond-un .cu-st { display: none; }
  a { color: inherit; }
}
.print-only { display: none; }
@media print {
  .print-only { display: block; margin-bottom: .5rem; }
  .stats { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
  .stat { padding: .4rem .6rem; }
  .grid2 { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .card { border: 1px solid #ddd; padding: .5rem; }
  .viz-tip { display: none; }
}
.exemplo { background: var(--card-2); border: 1px solid var(--line); border-radius: 8px; padding: .7rem 1rem; font-size: .88rem; overflow-x: auto; }
.code-input { font-size: 1.4rem; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.big-key { font-size: 1.05rem; letter-spacing: .05em; word-break: break-all; }
tr.row-alert td { background: var(--bad-soft); }

/* Call center em tempo real */
.cc-live { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card-3); padding: 1rem 1rem .2rem; margin-bottom: 1.2rem; }
.cc-live.stale { opacity: .7; }
.live-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; flex-wrap: wrap; }
.live-head h2 { margin: 0; font-size: 1.15rem; display: flex; align-items: center; gap: .5rem; }
.live-head .btn { margin-left: auto; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0 rgba(30,138,76,.5); animation: pulse 2s infinite; }
.cc-live.stale .pulse { background: var(--muted); animation: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(30,138,76,0); } 100% { box-shadow: 0 0 0 0 rgba(30,138,76,0); } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }
b.late { color: var(--bad); }
.ag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .5rem; }
.ag-grid .ag { border: 1px solid var(--line); border-radius: 8px; padding: .5rem .65rem; display: grid; grid-template-columns: auto 1fr; column-gap: .45rem; align-items: center; background: var(--card); }
.ag-grid .ag small { grid-column: 2; color: var(--muted); font-size: .8rem; }
.ag-grid .ag .dot { width: 9px; height: 9px; border-radius: 50%; background: #9aa6b8; }
.ag-grid .ag.livre .dot { background: var(--good); }
.ag-grid .ag.ligacao .dot { background: var(--link); }
.ag-grid .ag.tocando .dot { background: var(--warn); }
.ag-grid .ag.pausa .dot { background: var(--warn); }
.ag-grid .ag.offline { opacity: .6; }
.ag-grid .ag.pausa { background: var(--warn-soft); border-color: var(--warn-line); }
.ag-grid .ag.pausa small { color: var(--warn); font-weight: 600; }
.ag-grid .ag.pausa-excedida { background: var(--bad-soft); border-color: var(--bad); }
.ag-grid .ag.pausa-excedida .dot { background: var(--bad); }
.ag-grid .ag.pausa-excedida small { color: var(--bad); font-weight: 600; }
.regras-pausa { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
#cc-regras-pausa h3 { margin: .8rem 0 .3rem; font-size: 1rem; }
.regras-sup { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .1rem .6rem; margin-bottom: 1rem; max-height: 180px; overflow: auto; }
.fila-audio { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .45rem 0; border-top: 1px solid var(--line); }
.fila-audio > span { flex: 1 1 220px; }
.ag-grid .ag.escutavel { cursor: pointer; }
.ag-grid .ag.escutavel:hover { border-color: var(--link); }
.ag-grid .ag.externo-fora { opacity: 1; border-color: var(--bad); }
.ag-grid .ag.externo-fora .dot { background: var(--bad); }
.ag-grid .ag.externo-fora small { color: var(--bad); }
.section-title { font-size: 1.05rem; margin: 1.4rem 0 .6rem; color: var(--muted); font-weight: 600; }
ul.fila-nums { margin: 0; }
ul.fila-nums li { padding: .1rem 0; }
@media print { .cc-live { display: none; } }

/* Início */
.section-title.first { margin-top: 0; }
ul.attn { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
ul.attn li { border-left: 3px solid var(--info); background: var(--info-soft); border-radius: 6px; padding: .5rem .7rem; }
ul.attn li.warn { border-left-color: var(--warn); background: var(--warn-soft); }
ul.attn li a { color: var(--text); display: block; }
ul.attn li.warn a::before { content: "⚠ "; color: var(--warn); }
.ok-line { color: var(--good); font-weight: 600; margin: .3rem 0; }
ul.shortcuts li { padding: .3rem 0; border-bottom: 1px solid var(--line); }
ul.shortcuts li:last-child { border-bottom: 0; }
@media (min-width: 1200px) { .cc-live .stats { grid-template-columns: repeat(6, 1fr); } }

.qr-center { display: flex; justify-content: center; padding: .5rem 0 1rem; min-height: 120px; }
.qr-center img, .qr-center canvas { background: #fff; padding: 10px; border-radius: 8px; }

/* Início por tipo de login */
.serv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.serv { background: var(--card); border: 1px solid var(--card-line); box-shadow: var(--sombra); border-top: 4px solid var(--brand); border-radius: var(--radius); padding: 1rem 1.2rem; color: var(--text); display: flex; flex-direction: column; gap: .35rem; }
.serv:hover { text-decoration: none; box-shadow: 0 4px 14px rgba(15,28,46,.08); }
.serv-pabx { border-top-color: #2a78d6; } .serv-linha { border-top-color: #1baf7a; } .serv-condominio { border-top-color: #eb6834; } .serv-0800 { border-top-color: #6b778a; }
.serv-h strong { display: block; font-size: 1.05rem; } .serv-h small { color: var(--muted); }
.serv-n { font-size: .95rem; } .serv-n b { font-size: 1.5rem; }
.serv-l { font-size: .9rem; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.seg { display: inline-flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.seg .tag { margin-left: .25rem; }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: .2rem .65rem; font-size: .85rem; background: var(--bad-soft); color: var(--text); }
.linhas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.linha { border-left: 4px solid var(--good); }
.linha.off { border-left-color: var(--bad); }
.linha-num { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.linha-st { display: flex; align-items: center; gap: .4rem; font-weight: 600; margin: .2rem 0 .4rem; }
fieldset.plain-fs { border: 0; padding: 0; margin: 0; min-width: 0; display: contents; }
.card.narrow { max-width: 520px; }

/* Menu: cliente escolhido pela revenda; botão de ajuda; linha de contexto no lugar das antigas abas */
.ctx-conta { display: grid; grid-template-columns: 1fr auto; align-items: center; background: rgba(255,255,255,.08); border-radius: 8px; padding: .45rem .7rem; margin-bottom: .4rem; color: #fff; }
.ctx-conta small { grid-column: 1; color: var(--side-text); font-size: .75rem; }
.ctx-conta strong { grid-column: 1; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-conta a { grid-column: 2; grid-row: 1 / 3; color: var(--side-text); padding: .2rem .45rem; border-radius: 6px; }
.ctx-conta a:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
header.top { display: flex; align-items: center; }
.help-btn { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-weight: 700; color: var(--link); background: var(--card); flex-shrink: 0; }
.help-btn:hover { background: var(--brand-soft); text-decoration: none; }
.ctx-line { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; color: var(--muted); margin: 0 0 1rem; }
.inline-filter { margin-bottom: .8rem; }
.inline-filter label { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
.inline-filter select { width: auto; }

/* Ajuda */
.ajuda { display: grid; grid-template-columns: 250px 1fr; gap: 1.2rem; align-items: start; }
.ajuda-idx { position: sticky; top: 1rem; padding: .8rem; }
.ajuda-idx input { width: 100%; margin-bottom: .6rem; }
.ajuda-idx nav { display: flex; flex-direction: column; }
.ajuda-idx nav a { padding: .3rem .4rem; border-radius: 6px; font-size: .92rem; color: var(--text); }
.ajuda-idx nav a:hover { background: var(--brand-soft); text-decoration: none; }
.aj-sec { scroll-margin-top: 1rem; }
.aj-sec.aj-alvo { box-shadow: 0 0 0 2px var(--link); }
.aj-sec h2 { margin-top: 0; }
.aj-sec ul { padding-left: 1.2rem; } .aj-sec li { margin: .3rem 0; }
details.faq { border-top: 1px solid var(--line); padding: .5rem 0; }
details.faq summary { cursor: pointer; font-weight: 600; }
details.faq p { margin: .4rem 0 0; color: var(--muted); }
.suporte { border-left: 4px solid var(--link); }
@media (max-width: 900px) { .ajuda { grid-template-columns: 1fr; } .ajuda-idx { position: static; } }

/* Marca própria: prévia */
.cor-row { display: flex; align-items: center; gap: .6rem; }
.cor-row input[type=color] { width: 56px; height: 38px; padding: 2px; }
.marca-prev { display: grid; grid-template-columns: 200px 1fr; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; min-height: 220px; }
.pv-side { background: linear-gradient(180deg, var(--pv), color-mix(in srgb, var(--pv) 55%, #000)); padding: .8rem; display: flex; flex-direction: column; gap: .3rem; }
.pv-side .brand { padding: 0 0 .6rem; }
.pv-item { color: var(--side-text); padding: .4rem .6rem; border-radius: 6px; font-size: .9rem; }
.pv-item.on { background: #fff; color: var(--pv); font-weight: 600; }
.pv-main { padding: 1rem; }
.pv-main a { color: var(--pv); font-weight: 600; }
.pv-btn { background: var(--pv); color: #fff; border: 0; border-radius: 8px; padding: .55rem 1rem; font: inherit; font-weight: 700; }

/* Botões das lojas do app C3 Phone */
.app-lojas { display: flex; gap: .5rem; flex-wrap: wrap; margin: .4rem 0; }
.app-lojas a { display: inline-flex; align-items: center; gap: .45rem; background: #111; color: #fff; border-radius: 8px; padding: .35rem .7rem .35rem .55rem; line-height: 1.1; border: 1px solid #111; }
.app-lojas a:hover { text-decoration: none; background: #2a2a2a; }
.app-lojas svg { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; }
.app-lojas span { display: flex; flex-direction: column; font-weight: 700; font-size: .9rem; }
.app-lojas small { font-size: .65rem; font-weight: 400; opacity: .85; }
.side-app { padding: .6rem .9rem .2rem; border-top: 1px solid rgba(255,255,255,.08); }
.side-app > small { color: var(--side-text); font-size: .75rem; display: block; margin-bottom: .15rem; }
.app-lojas.escuro { gap: .35rem; }
.app-lojas.escuro a { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.32); color: #fff; padding: .3rem .55rem; flex: 1; min-width: 0; box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.app-lojas.escuro a:hover { background: rgba(255,255,255,.26); border-color: rgba(255,255,255,.45); }
.app-lojas.escuro span { font-size: .8rem; }
.auth-app { text-align: center; margin-top: 1rem; }
.auth-app > small { color: var(--muted); }
.auth-app .app-lojas { justify-content: center; }
.steps-list .app-lojas { margin-top: .4rem; }
.app-lojas.escuro small { display: none; } .app-lojas.escuro span { white-space: nowrap; }

/* QR Code de download do app */
.app-bloco { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.qr-app { margin: .3rem 0; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.qr-app > div { background: #fff; padding: 8px; border-radius: 8px; border: 1px solid var(--line); line-height: 0; }
.qr-app img, .qr-app canvas { width: 132px; height: 132px; }
.qr-app figcaption { font-size: .75rem; color: var(--muted); text-align: center; }
.app-qr-btn { flex: 0 0 auto; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32); box-shadow: 0 1px 2px rgba(0,0,0,.18); color: #fff; border-radius: 8px; padding: .3rem .45rem; cursor: pointer; display: grid; place-items: center; }
.app-qr-btn:hover { background: rgba(255,255,255,.26); border-color: rgba(255,255,255,.45); }
.app-qr-btn svg { width: 20px; height: 20px; fill: currentColor; }
.app-qr-dlg .app-bloco { flex-direction: column; }
.auth-app .app-bloco, .app-pagina .app-bloco { justify-content: center; flex-direction: column; }
.app-pagina h1 { margin: .8rem 0 .2rem; font-size: 1.4rem; }
.app-pagina { text-align: center; }
.app-pagina .brand { justify-content: center; }
/* no celular não faz sentido apontar a câmera para a própria tela */
@media (max-width: 700px) { .qr-app { display: none; } }
/* botão "QR Code" na versão clara (login) */
.app-lojas.com-botao .app-qr-btn { background: var(--card); color: var(--text); border: 1px solid var(--line); gap: .4rem; display: inline-flex; align-items: center; padding: .35rem .7rem; font: inherit; font-weight: 700; font-size: .9rem; }
.app-lojas.com-botao .app-qr-btn:hover { border-color: var(--link); color: var(--link); background: var(--card); }
.app-lojas.com-botao .app-qr-btn svg { width: 18px; height: 18px; }
@media (max-width: 700px) { .app-lojas.com-botao .app-qr-btn { display: none; } }
.app-qr-dlg .actions, #qr-dlg .actions { justify-content: center; }
.app-qr-dlg h2, #qr-dlg h2 { text-align: center; }
.tbl-filtro { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: .8rem; }
.tbl-filtro input[type=text], .tbl-filtro #ramais-q { flex: 1; min-width: 220px; }
.app-lojas.escuro a { justify-content: center; } .app-lojas.escuro span { text-align: center; }
/* Windows/Mac (.app-win): no menu lateral em linha própria (embaixo de iPhone/Android/QR); no celular só aparece na página /app */
.app-lojas.escuro .app-win { order: 5; flex: 1 1 0; min-width: 0; }  /* Windows e Mac dividem a 2ª linha */
/* quebra de linha antes de Windows/Mac: iPhone e Android têm flex 1 (base 0) e encolheriam para caber o Windows na 1ª linha */
.app-lojas.escuro:has(.app-win)::after { content: ''; order: 4; flex-basis: 100%; height: 0; margin-top: -.35rem; }
@media (max-width: 700px) { .app-lojas .app-win { display: none; } .app-pagina .app-lojas .app-win { display: inline-flex; } }
.inline-ips { display: flex; gap: .4rem; } .inline-ips input { min-width: 160px; }
.chip.livre { background: var(--good-soft); }
.inline-ips input { width: 150px; min-width: 0; }
.grid-addr .combo, .grid2 .combo, .grid3 .combo { min-width: 0; }
.dom-st { border-left: 4px solid var(--info); background: var(--info-soft); padding: .5rem .7rem; border-radius: 6px; font-size: .9rem; }
.dom-st.ativo { border-color: var(--good); background: var(--good-soft); } .dom-st.erro { border-color: var(--bad); background: var(--bad-soft); }

/* Portal C3 Móvel (c3movel.com.br) */
.mv .auth-card .mv-brand strong { color: var(--text); }
.mv .auth-card .mv-brand { padding: 0 0 1rem; }
.mv-top { background: var(--side); color: var(--side-text); }
.mv-top-in { max-width: 760px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mv-top .mv-brand { padding: 1rem 0 .6rem; min-width: 0; }
.mv-top .mv-brand small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-top .btn.ghost { color: var(--side-text); border-color: rgba(255,255,255,.25); background: transparent; }
.mv-tabs { justify-content: flex-start; gap: .25rem; }
.mv-tabs a { color: var(--side-text); padding: .6rem .9rem; border-bottom: 3px solid transparent; font-weight: 600; }
.mv-tabs a:hover { color: #fff; text-decoration: none; }
.mv-tabs a.on { color: #fff; border-bottom-color: var(--brand); }
.mv-main { max-width: 760px; margin: 0 auto; padding: 1.25rem 16px 2rem; }
.mv-linha .card-head h2 { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.mv-linha p { margin: 0 0 .5rem; }
.mv-franquia { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .75rem 0; }
.mv-franquia div { background: var(--brand-soft); border-radius: 8px; padding: .6rem .7rem; }
.mv-franquia span { display: block; font-size: .78rem; color: var(--muted); }
.mv-franquia strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.mv-rec summary, .mv-cancel summary { cursor: pointer; color: var(--brand); font-weight: 600; margin: .25rem 0; }
.mv-rec ul, .mv-cancel ul { margin: .4rem 0; padding-left: 1.1rem; }
.mv-franquia .mv-saldo { background: var(--brand); }
.mv-franquia .mv-saldo span, .mv-franquia .mv-saldo strong { color: #fff; }
@media (max-width: 480px) { .mv-franquia { grid-template-columns: 1fr 1fr; } .mv-franquia .mv-saldo { grid-column: 1 / -1; } }
.mv .auth-card label small { font-weight: 400; display: block; margin-top: .2rem; }

/* Operação em segundo plano (/admin/tarefa) */
.tf-barra { height: 14px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--card-line); overflow: hidden; margin: .5rem 0 .75rem; }
.tf-barra span { display: block; height: 100%; width: 0; background: var(--brand); transition: width .6s ease; }
.tarefa.rodando .tf-barra span { background-image: linear-gradient(45deg, rgba(255,255,255,.22) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.22) 75%, transparent 75%); background-size: 28px 28px; animation: tf-listras 1s linear infinite; }
@keyframes tf-listras { to { background-position: 28px 0; } }
@media (prefers-reduced-motion: reduce) { .tarefa.rodando .tf-barra span { animation: none; } }
.tf-linha { margin: 0 0 .5rem; }
.tf-resumo { margin: .5rem 0; padding-left: 1.1rem; }
.tf-resumo .bad { color: var(--bad); font-weight: 600; }
.tf-resumo .warn { color: var(--warn); }

/* ===== Modo noite =====
   Ligado por <html data-tema="escuro"> (cookie "tema", botão da lua no topo). Só troca variáveis: as regras acima
   não se repetem. Fica dentro de "screen" para a impressão sair sempre clara. */
.tema-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--link); background: var(--card); cursor: pointer; flex-shrink: 0; padding: 0; margin-left: auto; }
.tema-btn:hover { background: var(--brand-soft); }
.tema-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tema-btn .i-sol, :root[data-tema="escuro"] .tema-btn .i-lua { display: none; }
:root[data-tema="escuro"] .tema-btn .i-sol { display: block; }
.tema-btn + .help-btn { margin-left: 0; }
.auth > .tema-btn { position: fixed; top: 1rem; right: 1rem; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #fff; }
.auth > .tema-btn:hover { background: rgba(255,255,255,.22); }
@media screen {
  :root[data-tema="escuro"] {
    --bg: #0e131f; --card: #171f31; --text: #e6eaf4; --muted: #9ba6be; --line: #2a344b;
    --link: color-mix(in srgb, var(--brand) 42%, #fff); --link-2: color-mix(in srgb, var(--brand) 30%, #fff);
    --brand-soft: color-mix(in srgb, var(--brand) 28%, #171f31);
    --good: #56cf8a; --good-soft: #13301f; --bad: #f38d83; --bad-soft: #3a1c1a;
    --warn: #e9b65f; --warn-soft: #382a10; --info: #86b7f2; --info-soft: #16294a;
    --sombra: 0 4px 16px rgba(0,0,0,.35);
    --card-line: #26304a; --card-2: #1d2740; --card-3: #1a2338; --chip: #283350; --chip-text: #c3cbdd; --code: #232d47;
    --field: #111828; --field-line: #38445f; --label: #c9d1e3; --ghost-line: #3a4770;
    --good-line: #25593a; --bad-line: #6b322d; --info-line: #2a4a7a; --warn-line: #6e5422;
    --imp-bg: #382a10; --imp-text: #f1cf8d; --off-line: #47526b;
    color-scheme: dark;
  }
  :root[data-tema="escuro"] .side { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 55%, #0a0f1a), #0a0f1a); }
  :root[data-tema="escuro"] .auth { background: linear-gradient(160deg, #070b14 0%, color-mix(in srgb, var(--brand) 45%, #070b14) 100%); }
  :root[data-tema="escuro"] .btn { border-color: color-mix(in srgb, var(--brand) 70%, #fff); }
  :root[data-tema="escuro"] .btn.ghost { border-color: var(--ghost-line); }
  :root[data-tema="escuro"] .btn.danger { border-color: var(--bad-line); }
  :root[data-tema="escuro"] .side-foot .btn.ghost { border-color: rgba(255,255,255,.2); }
  :root[data-tema="escuro"] .app-lojas:not(.escuro) a { border-color: #3a4560; }
  :root[data-tema="escuro"] .dot.online { box-shadow: 0 0 0 3px #22c55e44; }
  :root[data-tema="escuro"] .inbar { background: #3987e5; }
  :root[data-tema="escuro"] .chip { background: var(--bad-soft); }
  :root[data-tema="escuro"] .chip.livre { background: var(--good-soft); }
  /* o QR Code precisa de fundo branco para a câmera ler */
  :root[data-tema="escuro"] .qr-box img, :root[data-tema="escuro"] .qr-box canvas, :root[data-tema="escuro"] #pix-qr img, :root[data-tema="escuro"] #pix-qr canvas { background: #fff; padding: 10px; border-radius: 8px; }
  :root[data-tema="escuro"] audio { color-scheme: dark; }
  :root[data-tema="escuro"] .pv-main a { color: color-mix(in srgb, var(--pv) 42%, #fff); }
}

/* ── Páginas públicas do app (/suporte, /privacidade) ─────────────────── */
.pagina-publica { max-width: 760px; margin: 0 auto; padding: 1.5rem 1rem 2.5rem; position: relative; }
.pagina-publica > .brand { margin: .5rem 0 1.25rem; padding: 1rem 1.1rem; border-radius: 14px; color: #fff;
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-2, var(--brand)) 100%); }
.pagina-publica > .brand strong, .pagina-publica > .brand small { color: #fff; }
.pagina-publica > .brand small { opacity: .85; }
.pagina-publica .tema-btn { top: 1.6rem; right: 1.6rem; }
.pagina-publica .card { margin-bottom: 1rem; }
.pagina-publica h1 { font-size: 1.5rem; margin: 0 0 .6rem; }
.pagina-publica h2 { font-size: 1.1rem; margin: 1rem 0 .5rem; }
.pagina-publica ol, .pagina-publica ul { padding-left: 1.25rem; line-height: 1.55; }
.pagina-publica .tema-btn { position: absolute; top: 1rem; right: 1rem; }
.texto-legal p, .texto-legal li { line-height: 1.6; }
.rodape-pub { text-align: center; margin-top: 1.5rem; }

/* Marca com logo para fundo claro e para fundo escuro: o cartão mostra o do tema atual */
.brand .logo-fe { display: none; }
:root[data-tema="escuro"] .brand .logo-fc { display: none; }
:root[data-tema="escuro"] .brand .logo-fe { display: inline; }
/* Prévia da marca: logo sobre fundo escuro e sobre fundo claro */
.pv-logos { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .8rem; }
.pv-fundo { border-radius: 10px; padding: .9rem; min-height: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; border: 1px solid var(--line); }
.pv-fundo img { max-width: 100%; max-height: 56px; }
.pv-fundo small { font-size: .72rem; opacity: .8; }
.pv-fundo.escuro { background: linear-gradient(180deg, var(--pv), color-mix(in srgb, var(--pv) 55%, #000)); color: #fff; }
.pv-fundo.claro { background: #fff; color: #5d6a7e; }

/* Login, código de acesso e /app: logo e nome da marca centralizados no cartão */
.auth-card .brand { justify-content: center; text-align: center; }
.auth-card .brand.logo-proprio { align-items: center; }

/* livro da portaria: nome de quem retirou a encomenda, ao lado do botão Entregue */
.ret-nome { width: 11rem; padding: .3rem .5rem; font: inherit; font-size: .85rem; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--text); margin-right: .3rem; }
.com-lista li { padding: .6rem 0; border-bottom: 1px solid var(--line); }
.com-lista li:last-child { border-bottom: 0; }
.com-lista p { margin: .25rem 0; white-space: pre-line; }

/* Celulares do apartamento */
.cel-fluxo { background: var(--brand-soft); border-radius: 8px; padding: .6rem .8rem; line-height: 1.6; }
.inline-form { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; }
.inline-form label { flex: 1 1 200px; margin: 0; }
.inline-form .actions { margin: 0; }

/* ── Impressão em formato de planilha: compacta, tabelas com grade, gráficos viram tabela ── */
@media print {
  @page { margin: 10mm; }
  body, .content { font-size: 9.5px; color: #000; }
  h1, .page-title { font-size: 14px; margin: 0 0 .3rem; }
  .card-head h2, h2 { font-size: 11.5px; margin: .2rem 0; }
  .card-head .muted, .card-head .actions { display: none !important; }
  .card { border: 0 !important; padding: 0 !important; margin: 0 0 .5rem !important; box-shadow: none !important; }
  .grid2, .vrow { display: block !important; }
  .table-wrap { overflow: visible !important; }
  table { width: 100%; border-collapse: collapse; font-size: 9px; page-break-inside: auto; }
  tr { break-inside: avoid; }
  th, td { border: 1px solid #9a9a9a !important; padding: 1px 4px !important; text-align: left; vertical-align: top; }
  th.num, td.num { text-align: right; }
  thead th { background: #e4e4e4 !important; font-weight: 700; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  tbody tr:nth-child(even) td { background: #f4f4f4 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  thead { display: table-header-group; }
  .tag { border: 0 !important; background: none !important; padding: 0 !important; color: #000 !important; font-weight: 600; }
  a { color: #000 !important; text-decoration: none !important; }
  small.muted, .muted { color: #555 !important; }
  /* gráficos: só a tabela de dados */
  .viz > svg, .viz-legend, .viz-tip { display: none !important; }
  .viz-data { display: block !important; margin: 0 !important; }
  .viz-data > summary { display: none !important; }
  .stats { gap: .3rem !important; }
  .stat { padding: .25rem .4rem !important; border: 1px solid #9a9a9a !important; }
  .stat strong { font-size: 13px !important; }
  /* listas de unidades: a planilha substitui os quadrinhos */
  .cond-bloco, .cond-busca, .stat[data-filtro] { display: none !important; }
  .print-table { display: block !important; }
}
.print-table { display: none; }

@media print {
  .viz-data tr.zero { display: none; }              /* planilha sintética: sem linhas zeradas */
  .card:has(.cond-busca), .cond-nota { display: none !important; }
}

/* Celulares do apartamento (cartões) */
.cel-fluxo { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; background: var(--brand-soft); border-radius: 10px; padding: .7rem .8rem; margin-bottom: .8rem; }
.cel-fluxo .passo { display: inline-flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .3rem .6rem; line-height: 1.2; }
.cel-fluxo .passo small { color: var(--muted); font-size: .75rem; }
.cel-fluxo .passo.fim { border-style: dashed; color: var(--muted); }
.cel-fluxo .seta { color: var(--muted); font-weight: 700; }
.cel-cfg { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: .8rem; align-items: end; margin-bottom: .4rem; }
@media (max-width: 760px) { .cel-cfg { grid-template-columns: 1fr; } }
.cel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .7rem; margin-bottom: .6rem; }
.cel { border: 1px solid var(--line); border-radius: 10px; padding: .7rem .8rem; background: var(--card); display: flex; flex-direction: column; gap: .5rem; }
.cel.inativo { opacity: .6; }
.cel.livre { border-style: dashed; align-items: center; justify-content: center; flex-direction: row; color: var(--muted); min-height: 60px; }
.cel.vazio-add { border-style: dashed; border-color: var(--brand); }
.cel-top { display: flex; gap: .6rem; align-items: center; }
.cel-top small { display: block; color: var(--muted); font-size: .8rem; }
.cel-n { width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .85rem; flex-shrink: 0; }
.cel.livre .cel-n { background: var(--line); color: var(--muted); }
.cel-kv { margin: 0; }
.cel-qr .qr-target:not(:empty) { display: grid; place-items: center; padding: .4rem 0; }
.cel-acts { display: flex; flex-wrap: wrap; gap: .3rem; }
.cel-edit summary { cursor: pointer; color: var(--link); font-size: .88rem; }
.cel-edit form { margin-top: .5rem; }
.btn.danger { color: var(--bad); }

/* Extrato de chamadas (Relatórios) */
.extrato-filtro { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: .8rem; align-items: end; margin-bottom: 1rem; }
@media (max-width: 760px) { .extrato-filtro { grid-template-columns: 1fr; } }
.extrato-tot { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.extrato-tot > div { flex: 1 1 150px; background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; padding: .55rem .8rem; display: flex; flex-direction: column; }
.extrato-tot span { color: var(--muted); font-size: .82rem; }
.extrato-tot strong { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.extrato-tot em { font-style: normal; color: var(--muted); font-size: .8rem; }
table.extrato td { font-variant-numeric: tabular-nums; }
@media print {
  .no-print { display: none !important; }
  .extrato-tot > div { padding: .25rem .5rem; }
}

/* Cabeçalho dos relatórios (src/relatorio.php): logo da revenda, título/período e dados do cliente */
.rel-cab { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.3fr); gap: 1.2rem; align-items: center; background: var(--card);
  border: 1px solid var(--card-line); border-top: 4px solid var(--brand); border-radius: var(--radius); box-shadow: var(--sombra); padding: 1rem 1.2rem; margin-bottom: .8rem; }
.rel-cab-marca img { display: block; max-height: 56px; max-width: 190px; object-fit: contain; }
.rel-cab-tit h1 { margin: 0; font-size: 1.3rem; color: var(--text); }
.rel-cab-tit p { margin: .2rem 0 0; color: var(--muted); font-size: .88rem; }
.rel-cab-cli { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .15rem .8rem; margin: 0; font-size: .86rem; }
.rel-cab-cli dt { color: var(--muted); }
.rel-cab-cli dd { margin: 0; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 900px) { .rel-cab { grid-template-columns: auto minmax(0, 1fr); } .rel-cab-cli { grid-column: 1 / -1; } }
html[data-tema="escuro"] .rel-cab-marca img { background: #fff; border-radius: 8px; padding: .3rem .5rem; }
.rel-barra { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.rel-legenda { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; color: var(--muted); font-size: .8rem; }
.rel-legenda i { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; background: var(--cor); margin-left: .4rem; }

/* Cores indicativas: verde = bom / recebidas, azul = volume / efetuadas, laranja = atenção, vermelho = problema */
.cor-ok { --cor: var(--good); } .cor-info { --cor: var(--info); } .cor-alerta { --cor: var(--warn); } .cor-bad { --cor: var(--bad); } .cor-neutro { --cor: var(--muted); }
.stat[class*="cor-"] { border-left: 5px solid var(--cor); }
.stat[class*="cor-"] strong { color: var(--cor); }
.stat.cor-neutro strong { color: var(--text); }
.sla-val { color: var(--cor); font-weight: 700; }
.card[class*="cor-"] { border-top: 4px solid var(--cor); }
.extrato-tot > div[class*="cor-"] { border-left: 5px solid var(--cor); }
.extrato-tot > div[class*="cor-"] strong { color: var(--cor); }
.extrato-tot > div.cor-total { border-left: 5px solid var(--text); }
.tag.t-in { background: var(--good-soft); color: var(--good); border: 1px solid var(--good-line); }
.tag.t-out { background: var(--info-soft); color: var(--info); border: 1px solid var(--info-line); }
.tag.t-int { background: var(--card-2); color: var(--muted); border: 1px solid var(--line); }
table.extrato tr > td:first-child { border-left: 4px solid transparent; }
table.extrato tr.ext-in > td:first-child { border-left-color: var(--good); }
table.extrato tr.ext-out > td:first-child { border-left-color: var(--info); }
table.extrato tr.ext-int > td:first-child { border-left-color: var(--line); }
table.extrato tr.ext-nao td { background: var(--bad-soft); }
table.extrato .nao-at { color: var(--bad); font-weight: 600; }
@media print {
  .rel-cab, .rel-legenda, .stat, .card, .tag, table.extrato tr, table.extrato td, .extrato-tot > div { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rel-cab { box-shadow: none; border: 1px solid #ccc; border-top: 4px solid var(--brand); padding: .5rem .7rem; gap: .8rem; }
  .rel-cab-marca img { max-height: 44px; background: none; padding: 0; }
  .rel-barra .btn { display: none !important; }
  .stat[class*="cor-"] { border-left: 5px solid var(--cor) !important; }
  .card[class*="cor-"] { border-top: 4px solid var(--cor) !important; }
  body.so-extrato .content > :not(#extrato):not(h2.print-only):not(.rel-cab):not(.rel-barra) { display: none !important; }
}

/* Botão de olho (mostrar/ocultar senha) */
.btn.olho { padding: .3rem .45rem; line-height: 0; vertical-align: middle; }
.btn.olho svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn.olho .i-ocultar, .btn.olho.aberto .i-ver { display: none; }
.btn.olho.aberto .i-ocultar { display: inline; }
.rel-cab-tit p.rel-cab-filtros { color: var(--text); font-weight: 600; }

/* Impressão: tabela sempre dentro da folha (cabeçalhos quebram linha, letra menor), tabelas longas continuam
   na folha seguinte com o cabeçalho repetido */
@media print {
  @page { size: A4; margin: 10mm; }
  table { width: 100% !important; table-layout: auto; }
  th { white-space: normal !important; text-transform: none; letter-spacing: 0; font-size: 8.5px; padding: 3px 4px; vertical-align: bottom; }
  td { font-size: 9px; padding: 2px 4px; }
  td .tag, th .tag { font-size: 8px; padding: 0 .3rem; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
  .card:has(table) { break-inside: auto; }
  .barcell .inbar { max-width: 60%; }
}

/* URA inteligente */
.ura-caminho { white-space: pre-wrap; margin: .4rem 0 0; max-width: 520px; font-size: .8rem; }
.ura-int-audios td { vertical-align: top; }
.ura-int-audios audio { width: 260px; max-width: 100%; }
.ura-int-audios details[open] .audio-box { margin-top: .6rem; min-width: 280px; }

/* Filas de atendimento (pages/fila_ver.php) */
.fila-estrat label.check { align-items: flex-start; margin: .25rem 0; }
.fila-membros { list-style: decimal; padding-left: 1.6rem; margin: .5rem 0 1rem; display: grid; gap: .35rem; }
.fila-membros li { padding: .35rem .5rem; border: 1px solid var(--card-line); border-radius: 10px; background: var(--card-2); }
.fila-membros li { display: list-item; }
.fila-membros li > * { vertical-align: middle; }
.fila-membros .fila-nome { display: inline-block; min-width: 14rem; margin: 0 .5rem; font-weight: 600; }
.fila-membros .btn.sm { padding: .15rem .5rem; }

/* ===== Acabamento (17/10/2026) =====
   Mesma linha do site: fonte Archivo (servida daqui), cores chapadas, cantos menores, bordas finas no lugar de
   sombras e movimento curto. O menu lateral e o modo noite saem da cor da marca (--brand), então cada marca
   branca ganha o seu tom escuro. Só sobrepõe regras de cima; nada aqui muda a estrutura das telas. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 800; font-stretch: 62% 125%; font-display: swap;
  src: url(/assets/fontes/archivo-latin.woff2) format("woff2"); }
:root {
  --radius: 10px; --sombra: 0 1px 2px rgba(16,24,40,.05);
  --bg: #f4f6fa; --line: #e3e7ef; --card-line: #e3e7ef;
  --painel-side: color-mix(in srgb, var(--brand) 32%, #070a14);
  --side-acento: color-mix(in srgb, var(--brand) 45%, #fff);
  --anel: color-mix(in srgb, var(--brand) 22%, transparent);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
body { font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14.5px; font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; }
h1 { font-size: 1.3rem; font-weight: 700; font-stretch: 94%; letter-spacing: -.01em; }
h2 { font-weight: 700; font-stretch: 96%; }

/* menu lateral: tom escuro da marca, item ativo com filete na cor clara da marca */
.side { background: var(--painel-side); border-right: 1px solid rgba(255,255,255,.04); }
.side nav { gap: 1px; }
.side nav a, .side .nav-g summary { border-radius: 7px; padding: .5rem .7rem; font-size: .92rem; transition: background .15s, color .15s; position: relative; }
.side nav a.on { background: rgba(255,255,255,.09); color: #fff; box-shadow: none; font-weight: 600; }
.side nav a.on::before { content: ""; position: absolute; left: -.6rem; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0; background: var(--side-acento); }
.side nav a.sub { padding: .38rem .7rem .38rem 2.45rem; font-size: .88rem; }
.side .nav-g[open] { position: relative; }
.side .nav-g[open]::before { content: ""; position: absolute; left: 1.32rem; top: 2.3rem; bottom: .5rem; width: 1px; background: rgba(255,255,255,.1); }
.side .nav-g summary.has-on { color: #fff; font-weight: 600; }
.side-foot { border-top-color: rgba(255,255,255,.08); }
.side-foot .btn.ghost { border-radius: 7px; }

/* barra do topo: translúcida, caminho acima do título e atalho "Ir para…" */
.top { background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); padding: .8rem 1.75rem; }
.top .titulo { min-width: 0; }
.top .titulo small { display: block; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .05rem; }
.top .titulo h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.busca-btn { margin-left: auto; display: inline-flex; align-items: center; gap: .5rem; height: 34px; padding: 0 .55rem 0 .65rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--muted); font: inherit; font-size: .88rem; cursor: pointer; transition: border-color .15s, color .15s; }
.busca-btn:hover { border-color: var(--link); color: var(--text); }
.busca-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.busca-btn kbd { font: inherit; font-size: .72rem; border: 1px solid var(--line); border-radius: 4px; padding: 0 .3rem; background: var(--card-2); }
.top .tema-btn { margin-left: 0; }
.tema-btn, .help-btn { border-radius: 8px; }
@media (max-width: 700px) { .busca-btn span, .busca-btn kbd { display: none; } .busca-btn { padding: 0 .5rem; } .top .titulo small { display: none; } }

/* cartões, números, botões, campos */
.card { border-radius: var(--radius); box-shadow: var(--sombra); }
.stat { border-radius: var(--radius); box-shadow: var(--sombra); transition: border-color .15s, transform .15s var(--ease); }
a.stat:hover { transform: translateY(-2px); }
.stat strong { font-size: 1.85rem; font-weight: 700; font-stretch: 88%; letter-spacing: -.01em; }
.btn { border-radius: 8px; transition: background .15s, border-color .15s, transform .08s; }
.btn:active { transform: scale(.98); }
.btn.sm { border-radius: 7px; }
input, select, textarea { border-radius: 8px; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px var(--anel); }
.tag { border-radius: 6px; }
.alert { border-radius: 8px; border-left-width: 3px; }
dialog { border-radius: 12px; }
th { font-size: .74rem; letter-spacing: .06em; }
tbody tr { transition: background .12s; }

/* entrada (login) */
.auth { background: radial-gradient(120% 80% at 80% 0%, color-mix(in srgb, var(--brand) 55%, #070a14), color-mix(in srgb, var(--brand) 20%, #05070d)); }
.auth-card { border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.auth-alt { margin: 1rem 0 0; text-align: center; font-size: .9rem; }

/* início do cliente sem ramal (pages/inicio_cliente.php) */
.hoje { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); margin-bottom: 1.25rem; }
@media (min-width: 1000px) { .hoje { grid-template-columns: minmax(280px, .9fr) 1.6fr; align-items: stretch; } .hoje .stats { margin: 0; } }
.hoje-destaque { display: flex; flex-direction: column; gap: .25rem; padding: 1.25rem 1.4rem; border-radius: var(--radius); color: #fff !important; text-decoration: none !important;
  background: var(--brand); position: relative; overflow: hidden; transition: transform .2s var(--ease); }
.hoje-destaque:hover { transform: translateY(-2px); }
.hoje-destaque.alerta { background: var(--bad); }
.hoje-destaque.ok { background: var(--good); }
.hoje-destaque .rotulo { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; opacity: .85; font-weight: 600; }
.hoje-destaque strong { font-size: 2.2rem; font-weight: 800; font-stretch: 88%; line-height: 1.1; }
.hoje-destaque .ir { margin-top: auto; padding-top: .6rem; font-weight: 700; }
.contratos { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.contrato { border: 1px solid var(--line); border-left: 3px solid var(--good); border-radius: 8px; padding: .75rem .9rem; }
.contrato.off { border-left-color: var(--off-line, #cbd5e1); opacity: .75; }
.contrato-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.contrato p { margin: .15rem 0 0; color: var(--muted); font-size: .9rem; }

/* "Ir para…" (Ctrl+K): lista de telas do menu */
.busca-dlg { width: min(560px, 94vw); padding: 0; overflow: hidden; margin-top: 12vh; }
.busca-dlg input { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: .95rem 1.1rem; font-size: 1.02rem; box-shadow: none !important; }
.busca-dlg ul { list-style: none; margin: 0; padding: .4rem; max-height: 52vh; overflow: auto; }
.busca-dlg li a { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .75rem; border-radius: 7px; color: var(--text); text-decoration: none; }
.busca-dlg li a small { color: var(--muted); }
.busca-dlg li a.hl { background: var(--brand-soft); }
.busca-dlg .vazio { padding: 1rem; color: var(--muted); }
.busca-dlg p { margin: 0; padding: .55rem 1.1rem; border-top: 1px solid var(--line); font-size: .78rem; color: var(--muted); }
.side-veu { display: none; }
@media (max-width: 900px) { .side.open ~ .side-veu { display: block; position: fixed; inset: 0; z-index: 15; background: rgba(5,8,15,.45); } }

/* modo noite no tom da marca: fundo, cartões, bordas e campos misturam um pouco da cor da marca no preto */
@media screen {
  :root[data-tema="escuro"] {
    --bg: color-mix(in srgb, var(--brand) 9%, #090b10);
    --card: color-mix(in srgb, var(--brand) 12%, #10131a);
    --card-2: color-mix(in srgb, var(--brand) 15%, #141821); --card-3: color-mix(in srgb, var(--brand) 13%, #12151d);
    --line: color-mix(in srgb, var(--brand) 22%, #1e232e); --card-line: color-mix(in srgb, var(--brand) 20%, #1c212b);
    --field: color-mix(in srgb, var(--brand) 7%, #0b0d12); --field-line: color-mix(in srgb, var(--brand) 30%, #2a303c);
    --chip: color-mix(in srgb, var(--brand) 25%, #1a1f29); --code: color-mix(in srgb, var(--brand) 18%, #171b24);
    --ghost-line: color-mix(in srgb, var(--brand) 40%, #2a303c);
    --painel-side: color-mix(in srgb, var(--brand) 16%, #06080c);
    --side-acento: color-mix(in srgb, var(--brand) 55%, #fff);
    --anel: color-mix(in srgb, var(--brand) 40%, transparent);
    --sombra: none;
  }
  :root[data-tema="escuro"] .side { background: var(--painel-side); border-right-color: var(--line); }
  :root[data-tema="escuro"] .auth { background: radial-gradient(120% 80% at 80% 0%, color-mix(in srgb, var(--brand) 30%, #06080c), #05060a); }
}

/* ---------- movimento (app.js: revelação na rolagem, números que contam; CSS: entrada da página e do menu) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .14s ease-out both vt-sai; }
::view-transition-new(root) { animation: .2s var(--ease) both vt-entra; }
@keyframes vt-sai { to { opacity: 0; } }
@keyframes vt-entra { from { opacity: 0; } }
.content > *, .auth-card { animation: entra .45s var(--ease) backwards; }
.content > :nth-child(2) { animation-delay: .04s; } .content > :nth-child(3) { animation-delay: .08s; }
.content > :nth-child(4) { animation-delay: .12s; } .content > :nth-child(5) { animation-delay: .16s; }
.content > :nth-child(n+6) { animation-delay: .2s; }
@keyframes entra { from { opacity: 0; translate: 0 10px; } }
.stats > .stat { animation: entra .45s var(--ease) backwards; }
.stats > .stat:nth-child(2) { animation-delay: .05s; } .stats > .stat:nth-child(3) { animation-delay: .1s; }
.stats > .stat:nth-child(4) { animation-delay: .15s; } .stats > .stat:nth-child(n+5) { animation-delay: .2s; }
.side .nav-g[open] a.sub { animation: menu-entra .22s var(--ease) backwards; }
.side .nav-g[open] a.sub:nth-of-type(2) { animation-delay: .03s; } .side .nav-g[open] a.sub:nth-of-type(3) { animation-delay: .06s; }
.side .nav-g[open] a.sub:nth-of-type(n+4) { animation-delay: .09s; }
@keyframes menu-entra { from { opacity: 0; translate: -6px 0; } }
.js-rv .rv { opacity: 0; translate: 0 16px; transition: opacity .5s var(--ease), translate .5s var(--ease); }
.js-rv .rv.vis { opacity: 1; translate: 0 0; }
.busca-dlg[open] { animation: dlg-entra .18s var(--ease); }
@keyframes dlg-entra { from { opacity: 0; translate: 0 -8px; scale: .98; } }
@media (prefers-reduced-motion: reduce) {
  .content > *, .auth-card, .stats > .stat, .side .nav-g[open] a.sub, .busca-dlg[open] { animation: none !important; }
  .js-rv .rv { opacity: 1; translate: none; transition: none; }
  @view-transition { navigation: none; }
  a.stat:hover, .hoje-destaque:hover, .btn:active { transform: none; }
}
@media print { .content > *, .stats > .stat { animation: none !important; } .busca-btn { display: none; } }
/* Admin · Portabilidade: quantidade clicável mostra os números do pedido na própria lista */
.nums-lista summary { cursor: pointer; color: var(--link); font-weight: 600; }
.nums-lista ul { margin: .35rem 0 0; padding-left: 1rem; font-size: .9rem; }
/* Histórico de e-mails */
.email-sit small { display: block; }
/* SLA das portabilidades */
.txt-bad { color: var(--bad, #c62828); }
.sla-box summary { cursor: pointer; }
.sla-box[open] summary { margin-bottom: .8rem; }
.sla-marcos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; }
/* Backups: linha de detalhe embaixo do número nos totais */
.stat > small { display: block; margin-top: .25rem; color: var(--muted); font-size: .8rem; }
/* Início: saúde dos últimos 3 backups */
.bk-saude { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; margin-bottom: .6rem; }
.bk-item { display: flex; flex-direction: column; gap: .3rem; padding: .8rem 1rem; border: 1px solid var(--line); border-left: 4px solid var(--good, #2e7d32); border-radius: 10px; }
.bk-item.bad { border-left-color: var(--bad, #c62828); }
.bk-item .tag { margin-right: .25rem; }
/* Início do administrador: filtro Mostrar e visões do dashboard */
.dash-ver { margin: 0 0 1rem; }
.txt-good { color: var(--good, #2e7d32); }
.grid3.vrow { align-items: start; }
.bk-dias { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: .5rem; margin-bottom: .6rem; }
.bk-dia { display: flex; flex-direction: column; gap: .3rem; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: 10px; }
.bk-dia .bk-d { font-weight: 700; font-size: .9rem; }
.bk-dia .tag { align-self: flex-start; font-size: .72rem; }
.stat strong b.var { font: inherit; }
.stat em b.var { font-weight: 600; }
/* Admin · Venda pelo site: catálogo */
.loja-cat input:not([type=checkbox]), .loja-cat select { min-width: 0; width: 100%; }
.loja-cat td { vertical-align: top; }
.loja-cat tr.muted td { opacity: .75; }
form.inline { display: inline; }

/* entrada (login) com informações em volta — pages/login.php */
.auth:has(.entrar) { display: block; place-items: normal; padding: 0; background: var(--bg); }
.auth:has(.entrar) > .tema-btn { top: auto; bottom: 1rem; background: var(--card); border-color: var(--line); color: var(--link); z-index: 5; }
.auth:has(.entrar) > .alert { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 6; }
.entrar { width: 100%; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr); grid-template-rows: auto 1fr auto;
  grid-template-areas: "faixa faixa" "info lado" "rodape lado"; }
.entrar-faixa { grid-area: faixa; display: flex; align-items: center; justify-content: center; gap: .8rem; padding: .6rem 1rem; font-size: .9rem;
  background: color-mix(in srgb, var(--brand) 88%, #000); color: #fff; text-decoration: none; text-align: center; }
.entrar-faixa:hover { background: var(--brand); color: #fff; }
.entrar-faixa b { white-space: nowrap; }
.entrar-novo { background: #e2602c; color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 999px; }
.entrar-info { grid-area: info; padding: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 6vw, 5.5rem) 2rem; display: flex; flex-direction: column; justify-content: center; }
.entrar-selo { margin: 0 0 1rem; color: var(--link); font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.entrar-info h1 { margin: 0; font-size: clamp(2.2rem, 4.6vw, 4rem); line-height: 1.02; font-weight: 800; letter-spacing: -.025em; font-stretch: 92%; max-width: 11em; color: var(--text); }
.entrar-info h1 em { font-style: normal; color: var(--link); }
.entrar-servicos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.25rem; max-width: 46rem; }
.entrar-servicos a { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem .45rem .5rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--text); text-decoration: none; font-weight: 600; font-size: .92rem; transition: border-color .15s, color .15s; }
.entrar-servicos a:hover { border-color: var(--link); color: var(--link); }
.entrar-servicos span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--link); }
.entrar-servicos .cs-ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.entrar-links { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin: 1.75rem 0 0; font-weight: 600; }
.entrar-links a { color: var(--link); text-decoration: none; }
.entrar-links a:hover { text-decoration: underline; }
.entrar-links a::after { content: " →"; }
.entrar-lado { grid-area: lado; position: relative; overflow: hidden; display: grid; place-items: center; padding: 2rem 1.5rem;
  background: var(--entrar-fundo, none) center / cover no-repeat, radial-gradient(120% 80% at 80% 0%, color-mix(in srgb, var(--brand) 60%, #070a14), color-mix(in srgb, var(--brand) 18%, #05070d)); }
.entrar-print { position: absolute; width: 130%; max-width: none; left: 18%; bottom: -6%; border-radius: 14px; opacity: .22; transform: rotate(-8deg);
  box-shadow: 0 30px 80px rgba(0,0,0,.5); pointer-events: none; }
.entrar-card { position: relative; max-width: 380px; padding: 2.25rem 2rem; }
.entrar-card .brand.big { padding-bottom: .5rem; }
.entrar-card h2 { margin: .25rem 0 1.25rem; text-align: center; font-size: 1.15rem; font-weight: 600; color: var(--text); }
.entrar-card .btn.block { padding: .8rem; border-radius: 999px; font-size: 1rem; }
.entrar-rodape { grid-area: rodape; padding: 1.25rem clamp(1.25rem, 6vw, 5.5rem) 1.5rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .8rem; }
.entrar-rodape p { margin: 0; }
.entrar-rodape a { color: var(--muted); }
.entrar-rodape .app-lojas a { color: #fff; }  /* botões do app: o cinza dos links do rodapé os deixava apagados */
.entrar-app { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.entrar-marca .entrar-info h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
/* imagem única no lugar do texto (painel + app); troca com o tema */
.entrar-arte { margin: 0 auto; width: 100%; max-width: 900px; }
@media (min-width: 2200px) { .entrar-arte { max-width: 1300px; } }
.entrar-arte img { display: block; width: 100%; height: auto; }
.entrar-arte .entrar-arte-escuro, :root[data-tema="escuro"] .entrar-arte .entrar-arte-claro { display: none; }
:root[data-tema="escuro"] .entrar-arte .entrar-arte-escuro { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 900px) {
  .entrar { grid-template-columns: minmax(0, 1fr); grid-template-areas: "faixa" "lado" "info" "rodape"; }
  .entrar-lado { padding: 2rem 1rem; }
  .entrar-info { padding: 2rem 1rem 1.5rem; }
  .entrar-info h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .entrar-servicos { margin-top: 1.5rem; }
  .entrar-rodape { padding: 1.25rem 1rem 4.5rem; }
  .auth:has(.entrar) { position: relative; }
  .auth:has(.entrar) > .tema-btn { position: absolute; bottom: 1rem; }
  .entrar-faixa { font-size: .82rem; flex-wrap: wrap; gap: .4rem .6rem; }
}

/* Contratar (central do cliente): tudo o que a conta pode contratar — pages/contratar.php */
.contratar-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .8rem; margin: 1rem 0 1.25rem; }
.contratar-hub a { display: grid; grid-template-columns: 42px 1fr; grid-template-rows: 1fr auto; gap: .35rem .85rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s var(--ease, ease); }
.contratar-hub a:hover { border-color: var(--link); transform: translateY(-2px); }
.contratar-hub .ch-ic { grid-row: span 2; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-soft); color: var(--link); }
.contratar-hub .cs-ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contratar-hub .ch-txt { display: flex; flex-direction: column; gap: .25rem; }
.contratar-hub .ch-txt b { font-size: 1rem; }
.contratar-hub .ch-txt small { color: var(--muted); font-size: .85rem; line-height: 1.4; }
.contratar-hub .tag { justify-self: start; }
@media (prefers-reduced-motion: reduce) { .contratar-hub a { transition: none; } }
/* Acesso a equipamentos (/terminal) */
textarea.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }
.term-tabela tr.grupo th { background: var(--code); text-align: left; font-size: .8rem; letter-spacing: .02em; padding-top: .55rem; padding-bottom: .55rem; }
.term-tabela tr.grupo a { color: inherit; }
.term-serial { margin: .25rem 0 .75rem; }
.term-codigo { font: 600 2rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; margin: .5rem 0 1rem; }
.term-clientes { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: .5rem .75rem; }
.term-clientes label { display: block; margin: .2rem 0; }
.term-ativar code { word-break: break-all; }
.term-arquivo { display: grid; place-items: center; border: 2px dashed var(--line); border-radius: 10px; padding: 1.6rem 1rem; text-align: center; cursor: pointer; position: relative; transition: border-color .15s, background .15s; }
.term-arquivo:hover, .term-arquivo.arrastando { border-color: var(--brand); background: var(--brand-soft); }
.term-arquivo input { position: absolute; width: 1px; height: 1px; opacity: 0; }
#ti-linhas input:not([type=checkbox]) { min-width: 140px; margin: 0; padding: .3rem .45rem; }
#ti-linhas tr.ti-repetido td { opacity: .6; }
#ti-comando { white-space: pre-wrap; word-break: break-all; font-size: .78rem; max-height: 9rem; overflow: auto; }
#ti-linhas td:last-child { min-width: 200px; max-width: 280px; }
#ti-linhas input[data-campo=cliente]:placeholder-shown { border-color: var(--warn); background: var(--warn-soft); }
/* Mapa da rede (/terminal/mapa): o componente usa as cores do painel */
.term-mapa-card { padding: 0; overflow: hidden; }
#mapa-rede { height: calc(100vh - 118px); height: calc(100dvh - 118px); min-height: 420px; --mr-fundo: var(--bg); --mr-painel: var(--card); --mr-linha: var(--line); --mr-texto: var(--text); --mr-fraco: var(--muted); --mr-acento: var(--brand); --mr-sel: var(--brand-soft); }
/* mapa da rede: de borda a borda, sem o respiro do conteúdo */
.content:has(#mapa-rede) .card.term-mapa-card { margin: -1.5rem -1.75rem .75rem; border-radius: 0; border-width: 0 0 1px; box-shadow: none; }
@media (max-width: 900px) { .content:has(#mapa-rede) .card.term-mapa-card { margin: -1rem -1rem .75rem; } #mapa-rede { height: calc(100dvh - 70px); } }
/* codecs do ramal (ordem = preferência) */
details.codecs { border: 1px solid var(--line, rgba(127,127,127,.25)); border-radius: 10px; padding: .6rem .8rem; }
details.codecs summary { cursor: pointer; font-weight: 600; }
.codec-lista { list-style: none; margin: .4rem 0 0; padding: 0; counter-reset: codec; }
.codec-lista li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .25rem 0; border-top: 1px solid var(--line, rgba(127,127,127,.15)); }
.codec-lista li:first-child { border-top: 0; }
.codec-lista li { counter-increment: codec; }
.codec-lista li::before { content: counter(codec) "."; color: var(--muted, #888); min-width: 1.2rem; }
.codec-lista label.check { flex: 1; }
.codec-lista label.check { align-items: flex-start; margin: 0; }
.codec-mover { display: flex; gap: .25rem; flex-shrink: 0; }

/* ---------- Início compacto (pages/inicio.php, inicio_admin.php): mais informação por tela ---------- */
.ini-top { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: .5rem; }
.ini-top .section-title { margin: 0; }
.ini-bar { display: flex; align-items: center; gap: .5rem .9rem; flex-wrap: wrap; margin: 0; }
.ini > .ini-bar { margin-bottom: .7rem; }
.ini-bar label { flex-direction: row; align-items: center; gap: .45rem; font-size: .84rem; }
.ini-bar label[hidden], .ini-bar .btn[hidden] { display: none; }
.ini-bar select, .ini-bar input { width: auto; padding: .3rem .55rem; font-size: .88rem; min-height: 0; }
/* régua de indicadores: uma faixa só, células separadas por linha fina */
.ini .stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0; margin-bottom: 1rem; background: var(--card); border: 1px solid var(--card-line);
  border-radius: var(--radius); box-shadow: var(--sombra); overflow: hidden; }
.ini .stat { border: 0; border-radius: 0; box-shadow: -1px 0 0 var(--card-line), 0 -1px 0 var(--card-line); padding: .6rem .85rem; gap: 0; min-width: 0; }
.ini .stat span { font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ini .stat strong { font-size: 1.35rem; }
.ini .stat strong.sm { font-size: 1.05rem; line-height: 1.55; }
.ini .stat strong small { font-size: .8rem; }
.ini .stat em { font-size: .76rem; line-height: 1.3; }
.ini a.stat:hover { background: var(--brand-soft); }
.ini a.stat.ativo { background: var(--brand-soft); box-shadow: -1px 0 0 var(--card-line), 0 -1px 0 var(--card-line), inset 0 -3px 0 var(--brand); }
.fat-contratos { margin: 0 0 .6rem; }
.ini .stat.warn { box-shadow: -1px 0 0 var(--card-line), 0 -1px 0 var(--card-line), inset 0 3px 0 var(--warn); }
/* serviços */
.ini .section-title { margin: 0 0 .45rem; font-size: .92rem; }
.ini .serv-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.ini .serv { padding: .6rem .85rem; gap: .2rem; border-top-width: 3px; }
.ini .serv-h { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.ini .serv-h strong { font-size: .95rem; display: inline; }
.ini .serv-h span { font-size: .82rem; color: var(--muted); white-space: nowrap; }
.ini .serv-h b { font-size: 1.1rem; color: var(--text); }
.ini .serv-l { font-size: .82rem; flex-wrap: nowrap; gap: .5rem; }
.serv-m { flex: 1 1 auto; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; min-width: 40px; }
.serv-m i { display: block; height: 100%; background: var(--good); border-radius: 3px; }
.ini .serv-l > span:last-child { white-space: nowrap; }
/* grade de 12 colunas */
.ini-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .8rem; margin-bottom: .8rem; align-items: start; }
.ini-grid > .card { margin: 0; padding: .85rem 1rem; min-width: 0; align-self: stretch; }
.ini-grid .c3 { grid-column: span 3; } .ini-grid .c4 { grid-column: span 4; } .ini-grid .c5 { grid-column: span 5; }
.ini-grid .c6 { grid-column: span 6; } .ini-grid .c7 { grid-column: span 7; } .ini-grid .c8 { grid-column: span 8; }
.ini .card-head { margin-bottom: .55rem; gap: .5rem; }
.ini .card-head h2 { font-size: 1rem; }
.ini .card-head small.muted { margin-right: auto; }
.ini .grid2, .ini .grid3 { gap: .8rem; }
.ini .grid2.vrow, .ini .grid3.vrow { margin-bottom: .8rem; }
.ini .card { padding: .85rem 1rem; }
.ini ul.attn { gap: .3rem; }
.ini ul.attn li { padding: .3rem .6rem; font-size: .86rem; }
.ini ul.shortcuts li { padding: .22rem 0; font-size: .88rem; }
.ini table.compacta th, .ini table.compacta td { padding-top: .28rem; padding-bottom: .28rem; font-size: .86rem; }
.ini .viz-data { margin-top: .2rem; }
.bk-lista { list-style: none; margin: 0 0 .4rem; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.bk-lista li { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; align-items: center; padding: .35rem .6rem; border: 1px solid var(--line); border-left: 3px solid var(--good); border-radius: 8px; font-size: .84rem; }
.bk-lista li.bad { border-left-color: var(--bad); }
.bk-lista li > span { justify-self: end; }
.bk-lista li > small { grid-column: 1 / -1; }
.bk-lista .tag { font-size: .72rem; }
@media (max-width: 1100px) { .ini-grid .c3, .ini-grid .c4 { grid-column: span 6; } .ini-grid .c5, .ini-grid .c7, .ini-grid .c8 { grid-column: span 12; } }
@media (max-width: 760px) {
  .ini-grid > .card { grid-column: 1 / -1; }
  .ini .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ini-bar label { flex: 1 1 100%; justify-content: space-between; }
}

/* Contratar → Central PABX (pages/contratar_pabx.php) */
.pabx-op { align-items: flex-start; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px; margin-bottom: .45rem; }
.pabx-op:has(input:checked) { border-color: var(--link); background: var(--brand-soft); }
.pabx-op input { margin-top: .25rem; }
.pabx-qtd { max-width: 220px; }
.pabx-qtd[hidden] { display: none; }
.pabx-resumo { background: var(--bg, transparent); }
.pabx-resumo h3 { margin: 0 0 .4rem; }
.pabx-resumo td { padding: .3rem .4rem; }
.pabx-resumo tr[hidden] { display: none; }
.pabx-prox td { border-top: 2px solid var(--line); }
#pabx label[hidden], #pabx p[hidden] { display: none; }

/* Novidades (versão e change log) */
.novidades-btn { position: relative; border: 1px solid var(--line); background: var(--card); color: var(--muted); border-radius: 8px; padding: .3rem .6rem; font-size: .78rem; cursor: pointer; }
.novidades-btn:hover { color: var(--text); border-color: var(--link); }
.novidades-btn i { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); border: 2px solid var(--card); }
.novidades-btn i[hidden] { display: none; }
.link-btn { background: none; border: 0; padding: 0; color: var(--link); font: inherit; cursor: pointer; }
.novidades-dlg { width: min(640px, calc(100vw - 32px)); max-height: min(80vh, 760px); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; background: var(--card); color: var(--text); }
.novidades-dlg::backdrop { background: rgba(10, 20, 40, .45); }
.novidades-lista section { border-left: 3px solid var(--line); padding: .1rem 0 .1rem .8rem; margin: .8rem 0; }
.novidades-lista section.atual { border-left-color: var(--brand); }
.novidades-lista h3 { margin: 0 0 .25rem; font-size: .98rem; }
.novidades-lista h3 small { color: var(--muted); font-weight: 500; margin-left: .35rem; }
.novidades-lista ul { margin: 0; padding-left: 1.1rem; }
.novidades-lista li { margin: .2rem 0; font-size: .9rem; }
@media (max-width: 760px) { .novidades-btn { padding: .3rem .45rem; font-size: 0; } .novidades-btn::before { content: "★"; font-size: .85rem; } }

/* Janelas (dialog.janela) e barra de topo das telas (.barra-topo) */
dialog.janela { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; background: var(--card); color: var(--text);
  width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; }
dialog.janela.estreita { width: min(620px, calc(100vw - 32px)); }
dialog.janela::backdrop { background: rgba(10, 20, 40, .45); }
dialog.janela > .card-head { position: sticky; top: -1.1rem; background: var(--card); padding: .2rem 0 .5rem; z-index: 2; }
.barra-topo { display: flex; align-items: center; gap: .5rem .7rem; flex-wrap: wrap; margin: 0 0 .8rem; }
.barra-topo form { display: flex; align-items: center; gap: .5rem .7rem; flex-wrap: wrap; margin: 0; }
.barra-topo label { flex-direction: row; align-items: center; gap: .4rem; font-size: .84rem; }
.barra-topo label[hidden] { display: none; }
.barra-topo select, .barra-topo input:not([type=checkbox]) { width: auto; padding: .32rem .55rem; font-size: .88rem; min-height: 0; }
.barra-topo .acc-select { flex: 0 1 300px; }
.barra-topo .acc-select input { width: 100%; }
.barra-topo .acc-select small { display: none; }
.barra-topo .acoes { display: flex; gap: .4rem; flex-wrap: wrap; margin-left: auto; align-items: center; }
.barra-topo .resumo { font-size: .84rem; color: var(--muted); }
.barra-topo .tag { margin-left: .25rem; font-size: .72rem; }
.btn.aviso { color: var(--warn); border-color: var(--warn-line); background: var(--warn-soft); }
@media screen { .rel-cab { display: none !important; } }   /* o cabeçalho do relatório (logo, cliente, filtros) só sai na impressão */
@media screen { .rel-barra.print-only { display: none !important; } }
.barra-topo form select { max-width: 240px; }
.rel-pagina .barra-topo form { flex: 1 1 auto; }
.rel-pagina .barra-topo .acoes { margin-left: 0; }
.rel-pagina > .section-title { margin-top: .8rem; }
.ini .cc-live .stats { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
@media print { table[data-paginar] tbody tr[hidden]:not(.filtrada) { display: table-row !important; } }
.barra-topo .filtro-tabela { flex: 0 1 280px; }
.barra-chamadas input[type=date] { width: 8.6rem; }
.barra-chamadas input[name=numero] { width: 9.5rem; }
.barra-topo .filtro-tabela input { width: 100%; }
.pager { display: flex; gap: .6rem; align-items: center; justify-content: center; margin: .6rem 0 .2rem; flex-wrap: wrap; }
.barra-topo > form { flex: 1 1 auto; min-width: 0; }
.barra-topo > form .span-all, .barra-topo > form .alert { flex-basis: 100%; margin: 0; }
/* menu suspenso das linhas de tabela (details.menu-acoes) */
details.menu-acoes { position: relative; display: inline-block; }
details.menu-acoes > summary { list-style: none; cursor: pointer; }
details.menu-acoes > summary::-webkit-details-marker { display: none; }
details.menu-acoes > div { position: absolute; right: 0; top: calc(100% + .3rem); z-index: 30; min-width: 190px; display: flex; flex-direction: column; gap: .1rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .35rem; box-shadow: 0 8px 24px rgba(15, 28, 46, .15); text-align: left; }
details.menu-acoes > div a, details.menu-acoes > div button { display: block; width: 100%; text-align: left; padding: .4rem .6rem; border-radius: 6px; background: none; border: 0;
  color: var(--text); font: inherit; font-size: .88rem; cursor: pointer; text-decoration: none; }
details.menu-acoes > div a:hover, details.menu-acoes > div button:hover { background: var(--brand-soft); text-decoration: none; }
details.menu-acoes form { margin: 0; }
.table-wrap:has(details.menu-acoes[open]) { overflow: visible; }
/* Central PABX: escolhas à esquerda, resumo fixo à direita em telas largas */
.pabx-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1.2rem; align-items: start; }
.pabx-dir { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: .7rem; }
.pabx-dir .pabx-resumo { margin: 0; }
.pabx-dir .pabx-resumo td:first-child { font-size: .86rem; }
@media (max-width: 1100px) { .pabx-cols { grid-template-columns: 1fr; } .pabx-dir { position: static; } }
.pabx-resumo td.num { white-space: nowrap; }
.barra-topo > form.fixo { flex: 0 0 auto; }

/* Gestão financeira */
.fin-mes { display: flex; align-items: center; gap: .35rem; }
.fin-mes form { margin: 0; }
.fin-mes select { min-width: 11rem; }
.fin-faixas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; margin: 0 0 1.25rem; }
.fin-faixas > div { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .55rem .75rem; display: flex; flex-direction: column; gap: .15rem; }
.fin-faixas span { font-size: .78rem; color: var(--muted); }
.fin-faixas b { font-variant-numeric: tabular-nums; }
.fin-faixas .zero b { color: var(--muted); font-weight: 500; }
/* situação nas tabelas, como na planilha: pago = verde escuro com letra branca, em dia = amarelo, vencido = vermelho */
:root { --fin-pago: #196b24; --fin-emdia-bg: #fff3b0; --fin-emdia: #e6a700; --fin-venc-bg: #fddcdc; --fin-venc: #d92d2d; --fin-vrec-bg: #ece9fb; --fin-vrec: #6250d6; }
:root[data-tema="escuro"] { --fin-pago: #1f6b2c; --fin-emdia-bg: rgba(230,167,0,.22); --fin-emdia: #e6a700; --fin-venc-bg: rgba(230,70,70,.22); --fin-venc: #ef5350; --fin-vrec-bg: rgba(144,133,233,.22); --fin-vrec: #9085e9; }
tr.fin-st-pago td { background: var(--fin-pago); color: #fff; border-color: rgba(255,255,255,.18); }
tr.fin-st-pago td a, tr.fin-st-pago td .muted { color: #fff; }
tr.fin-st-pago td .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
tr.fin-st-pago td .btn.ghost:hover { background: rgba(255,255,255,.14); }
tr.fin-st-pago td .tag { background: rgba(255,255,255,.18); color: #fff; border-color: transparent; }
tr.fin-st-proximo td { background: var(--fin-emdia-bg); }
tr.fin-st-vencido td { background: var(--fin-venc-bg); }
tr.fin-st-vencido-rec td { background: var(--fin-vrec-bg); }
tr.fin-st-pago td:first-child { box-shadow: inset 4px 0 0 #0f4a18; }
tr.fin-st-proximo td:first-child { box-shadow: inset 4px 0 0 var(--fin-emdia); }
tr.fin-st-vencido td:first-child { box-shadow: inset 4px 0 0 var(--fin-venc); }
tr.fin-st-vencido-rec td:first-child { box-shadow: inset 4px 0 0 var(--fin-vrec); }
.fin-legenda { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .82rem; color: var(--muted); margin: 0 0 .6rem; }
.fin-legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: .35rem; vertical-align: -2px; }
.fin-tabela tfoot th { text-align: left; }
.fin-comp td, .fin-comp th { font-variant-numeric: tabular-nums; }
.fin-comp .fin-rot { font-weight: 500; }
.fin-comp tr.fin-destaque td { font-weight: 700; }
.fin-neg { color: var(--bad); }
.fin-sub { margin: .75rem 0 .25rem; font-size: .9rem; }
.fin-saldo { flex-direction: row !important; align-items: center; gap: .5rem; }
.fin-saldo span { flex: 1; font-weight: 500; }
.fin-saldo input { width: 11rem; }
.fin-excluir { display: flex; gap: .5rem; justify-content: flex-end; align-items: center; margin-top: .75rem; border-top: 1px solid var(--line); padding-top: .75rem; }
@media (max-width: 760px) { .fin-faixas { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fin-mes select { min-width: 0; } }
.fin-tabela .actions-cell { white-space: nowrap; text-align: right; }
.fin-tabela .actions-cell form { display: inline; margin: 0; }
.fin-fech th.fin-grupo { text-align: center; border-bottom: 1px solid var(--line); }
.fin-fech td b { font-weight: 600; }
.fin-fech tr.fin-destaque td { font-weight: 500; }
.fin-fech th, .fin-fech td { padding-left: .45rem; padding-right: .45rem; font-size: .86rem; }
.fin-fech td:first-child { white-space: normal; min-width: 9.5rem; }
.fin-fech thead th { font-size: .7rem; letter-spacing: .02em; }
.fin-fech td:first-child .small { font-size: .74rem; }
.fin-chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: -.5rem 0 1rem; }
.fin-chips a.tag { text-decoration: none; }

/* Gestão financeira → Gráficos */
.ini-grid .c12 { grid-column: 1 / -1; }
.fg { margin-bottom: 1.25rem; }
.fg-rosca { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.fg-rosca svg { width: 168px; flex: 0 0 168px; overflow: visible; }
.fg-leg { list-style: none; margin: 0; padding: 0; flex: 1 1 160px; display: flex; flex-direction: column; gap: .35rem; font-size: .84rem; min-width: 0; }
.fg-leg li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; column-gap: .45rem; align-items: center; }
.fg-leg i { width: 10px; height: 10px; border-radius: 3px; }
.fg-leg span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-leg em { grid-column: 2 / -1; font-style: normal; color: var(--muted); font-size: .78rem; margin-top: -.15rem; }
.fg-med { margin-bottom: .85rem; }
.fg-med:last-child { margin-bottom: 0; }
.fg-med-t { display: flex; justify-content: space-between; font-size: .88rem; margin-bottom: .25rem; }
.fg-med-b { background: var(--code); border-radius: 4px; height: 10px; overflow: hidden; }
.fg-med-b i { display: block; height: 100%; border-radius: 4px; transition: width .6s ease; }
.fg-scroll { overflow-x: auto; }
.fg-scroll svg { overflow: visible; }
@media (max-width: 640px) { .fg-stats strong { font-size: 1.2rem; overflow-wrap: anywhere; } }

/* Gestão financeira: aviso de contas a pagar (faixa) e contador no menu */
.fin-alerta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin: 0 0 1rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-size: .88rem; }
.fin-al-tit { font-weight: 600; margin-right: .25rem; }
.fin-alerta a { display: inline-flex; gap: .3rem; align-items: center; padding: .25rem .6rem; border-radius: 7px; color: var(--text); text-decoration: none; border-left: 4px solid; }
.fin-alerta a:hover { filter: brightness(.97); }
.fin-al-venc { background: var(--fin-venc-bg); border-color: var(--fin-venc) !important; }
.fin-al-hoje { background: var(--fin-emdia-bg); border-color: var(--fin-emdia) !important; }
.fin-al-breve { background: var(--code); border-color: var(--muted) !important; }
.nav-qtd { margin-left: auto; margin-right: .35rem; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; border-radius: 999px; background: #d92d2d; color: #fff; font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.fin-atr-tot { font-weight: 700; font-variant-numeric: tabular-nums; }
.fin-atr-pagar .card-head h2::before, .fin-atr-receber .card-head h2::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .45rem; vertical-align: 1px; }
.fin-atr-pagar .card-head h2::before { background: var(--fin-venc); }
.fin-atr-receber .card-head h2::before { background: var(--fin-vrec); }

/* Saldo em conta em destaque no Início do root (fin_saldo_destaque) */
.saldo-dest { display: grid; grid-template-columns: minmax(220px, 1.3fr) repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; align-items: start; margin: 0 0 1.25rem; padding: 1.1rem 1.4rem; border-radius: var(--radius); background: var(--card); border: 1px solid var(--card-line); border-left: 6px solid var(--good); box-shadow: var(--sombra); color: var(--text); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.saldo-dest:hover { text-decoration: none; transform: translateY(-1px); }
.saldo-dest.neg { border-left-color: var(--bad); }
.saldo-dest span { color: var(--muted); font-size: .85rem; }
.sd-tot { display: flex; flex-direction: column; gap: .1rem; }
.sd-tot strong { font-size: 2.1rem; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; color: var(--good); font-variant-numeric: tabular-nums; }
.saldo-dest.neg .sd-tot strong, .sd-esc strong.neg { color: var(--bad); }
.sd-tot em { font-style: normal; font-size: .85rem; color: var(--muted); }
.sd-tot em.sd-velho { color: var(--bad); font-weight: 600; }
.sd-esc { display: flex; flex-direction: column; gap: .1rem; padding-left: 1.2rem; border-left: 1px solid var(--line); }
.sd-esc strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.sd-esc ul { list-style: none; margin: .25rem 0 0; padding: 0; font-size: .85rem; }
.sd-esc li { display: flex; justify-content: space-between; gap: .75rem; padding: .1rem 0; }
.sd-esc li b { font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .saldo-dest { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1rem; }
  .sd-tot { grid-column: 1 / -1; }
  .sd-tot strong { font-size: 1.8rem; }
  .sd-esc { padding-left: 0; border-left: 0; }
}
/* Indique e ganhe: link + QR Code */
.ind-link { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.ind-link > div:first-child { flex: 1 1 320px; min-width: 0; }
.ind-qr { background: #fff; padding: 8px; border-radius: 8px; line-height: 0; }
.ind-qr:empty { display: none; }

/* Atendimento → ERP no atendimento */
.erp-modos { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: .6rem; }
.erp-modos .check { align-items: flex-start; }
.erp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
@media (max-width: 640px) { .erp-grid { grid-template-columns: 1fr; } }