/* Mídia Indoor — tema (escuro padrão, claro pelo sistema), na linha do painel Operação. Sem estilo inline: a CSP só aceita este arquivo. */
:root {
  --fundo: #0b0e14;
  --fundo-2: #0f131b;
  --cartao: #141a24;
  --cartao-2: #19212d;
  --borda: rgba(255, 255, 255, .07);
  --borda-forte: rgba(255, 255, 255, .13);
  --texto: #e8ecf3;
  --texto-2: #8f9bb0;
  --primaria: #5b7cff;
  --primaria-2: #4a69f0;
  --violeta: #8b5cf6;
  --rosa: #ec4899;
  --verde: #22c58b;
  --vermelho: #f05264;
  --amarelo: #f5b544;
  --grad: linear-gradient(135deg, #4f7cff 0%, #8b5cf6 100%);
  --raio: 14px;
  --sombra: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px rgba(0, 0, 0, .35);
  --brilho: 0 6px 22px rgba(91, 124, 255, .35);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --fundo: #f3f5fa;
    --fundo-2: #ffffff;
    --cartao: #ffffff;
    --cartao-2: #f6f8fc;
    --borda: rgba(20, 30, 60, .09);
    --borda-forte: rgba(20, 30, 60, .16);
    --texto: #161d2c;
    --texto-2: #5e6a7e;
    --sombra: 0 1px 2px rgba(20, 30, 60, .05), 0 8px 24px rgba(20, 30, 60, .07);
    --brilho: 0 6px 18px rgba(91, 124, 255, .28);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fundo);
  background-image: radial-gradient(900px 420px at 85% -120px, rgba(139, 92, 246, .13), transparent 70%),
                    radial-gradient(700px 380px at 20% -160px, rgba(79, 124, 255, .12), transparent 70%);
  background-attachment: fixed;
  color: var(--texto);
  font: 15px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
h1, h2, h3 { margin: 0 0 .4em; line-height: 1.25; letter-spacing: -.01em; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.02rem; }
.ic { width: 20px; height: 20px; flex: none; }
.sub { color: var(--texto-2); margin: 0 0 1rem; }
.oculto { display: none !important; }
::selection { background: rgba(91, 124, 255, .35); }

/* ---------- estrutura ---------- */
.app { display: flex; min-height: 100vh; }
.lateral {
  width: 250px; flex: none;
  background: color-mix(in srgb, var(--fundo-2) 88%, transparent);
  border-right: 1px solid var(--borda);
  display: flex; flex-direction: column; padding: 18px 12px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  backdrop-filter: blur(12px);
}
.marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 20px; font-size: 1.08rem; letter-spacing: -.01em; }
.marca .ic {
  width: 34px; height: 34px; padding: 7px; border-radius: 10px;
  background: var(--grad); color: #fff; box-shadow: var(--brilho);
}
.marca.grande { justify-content: center; font-size: 1.4rem; padding-bottom: 6px; }
.marca.grande .ic { width: 42px; height: 42px; padding: 9px; border-radius: 12px; }
.lateral nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.lateral nav a, .eu > a, .sair {
  position: relative; display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: 10px; text-decoration: none;
  color: var(--texto-2); font: inherit; font-weight: 500; background: none; border: 0; width: 100%; cursor: pointer; text-align: left;
  transition: background .15s, color .15s;
}
.lateral nav a:hover, .eu > a:hover, .sair:hover { background: var(--cartao-2); color: var(--texto); }
.lateral a.on { background: color-mix(in srgb, var(--primaria) 14%, transparent); color: var(--texto); }
.lateral a.on::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--grad); }
.lateral a.on .ic { color: var(--primaria); }
.grupo { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--texto-2); padding: 18px 12px 6px; opacity: .75; font-weight: 600; }
.eu { border-top: 1px solid var(--borda); padding-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.eu form { margin: 0; }
.eu-nome { display: flex; align-items: center; gap: 10px; padding: 4px 10px 10px; }
.eu-nome b { display: block; font-size: .92rem; }
.eu-nome small { color: var(--texto-2); font-size: .78rem; }
.avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 700; background: var(--grad); color: #fff; }
.sair:hover { color: var(--vermelho); }

.conteudo { flex: 1; min-width: 0; }
.barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px; padding: 18px 32px 14px;
  background: color-mix(in srgb, var(--fundo) 72%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
}
.barra h1 { font-size: 1.45rem; margin: 0; letter-spacing: -.02em; }
.pagina { padding: 10px 32px 56px; max-width: 1320px; }
.solo { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.fundo-menu { display: none; }

/* ---------- componentes ---------- */
.cartao {
  background: linear-gradient(180deg, var(--cartao-2), var(--cartao));
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 22px; box-shadow: var(--sombra); margin-bottom: 18px;
}
.cartao.estreito { max-width: 440px; }
.login { width: 100%; max-width: 400px; padding: 30px 28px; }
.login .sub { text-align: center; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 15px; border-radius: 10px; border: 1px solid var(--borda-forte);
  background: var(--cartao-2); color: var(--texto); font: inherit; font-weight: 600; font-size: .92rem;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .06s, box-shadow .15s;
}
.btn:hover { border-color: color-mix(in srgb, var(--primaria) 60%, transparent); background: color-mix(in srgb, var(--primaria) 8%, var(--cartao-2)); }
.btn:active { transform: translateY(1px); }
.btn .ic { width: 17px; height: 17px; }
.btn.primario { background: var(--grad); border-color: transparent; color: #fff; box-shadow: var(--brilho); }
.btn.primario:hover { filter: brightness(1.08); }
.btn.fantasma { background: transparent; border-color: transparent; color: var(--texto-2); }
.btn.fantasma:hover { color: var(--texto); background: var(--cartao-2); }
.btn.perigo { color: var(--vermelho); }
.btn.perigo:hover { border-color: var(--vermelho); background: color-mix(in srgb, var(--vermelho) 10%, var(--cartao-2)); }
.btn.ativo { border-color: var(--primaria); color: var(--primaria); }
.btn.cheio { width: 100%; padding: 12px; margin-top: 6px; }
.btn.pequeno { padding: 6px 11px; font-size: .84rem; border-radius: 9px; }
.btn.pequeno .ic { width: 15px; height: 15px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn-ic { display: none; background: none; border: 1px solid var(--borda-forte); color: var(--texto); border-radius: 10px; padding: 7px; cursor: pointer; }
.btn-mini { display: inline-grid; place-items: center; background: none; border: 0; color: var(--texto-2); padding: 3px; border-radius: 6px; cursor: pointer; }
.btn-mini:hover { color: var(--texto); background: var(--cartao-2); }
.btn-mini .ic { width: 15px; height: 15px; }
.btn-link { background: none; border: 0; padding: 0; color: var(--primaria); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
.contador { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--grad); color: #fff; font-size: .74rem; }

label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 14px; }
input, select, textarea {
  display: block; width: 100%; margin-top: 6px;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--borda-forte);
  background: var(--fundo); color: var(--texto); font: inherit; font-weight: 400;
  transition: border-color .15s, box-shadow .15s;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primaria); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaria) 25%, transparent); }
input.invalido { border-color: var(--vermelho); }
.msg-campo { display: block; min-height: 1em; margin-top: 5px; font-weight: 400; font-size: .8rem; color: var(--texto-2); }
.msg-campo.erro { color: var(--vermelho); }
.msg-campo.ok { color: var(--verde); font-weight: 600; } /* 15/10/2026: "Disponível: pode usar este usuário." */
.msg-campo[hidden] { display: none; } /* 15/10 loja: a ajuda do pagamento NÃO escolhido some (o display:block acima vencia o hidden) */
fieldset { border: 1px solid var(--borda-forte); border-radius: 10px; padding: 12px 14px; margin: 0 0 16px; }
legend { font-weight: 600; font-size: .88rem; padding: 0 6px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.check { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; }
.check input { width: auto; margin: 0; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.campo-senha { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.campo-senha input { margin-top: 0; }
.btn-ic.visivel { display: inline-flex; padding: 9px; }

.aviso { padding: 11px 14px; border-radius: 10px; margin-bottom: 16px; border: 1px solid var(--borda-forte); background: var(--cartao); }
.aviso.ok { border-color: color-mix(in srgb, var(--verde) 45%, transparent); background: color-mix(in srgb, var(--verde) 11%, transparent); }
.aviso.erro { border-color: color-mix(in srgb, var(--vermelho) 45%, transparent); background: color-mix(in srgb, var(--vermelho) 11%, transparent); }

.selo { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; font-size: .74rem; font-weight: 600; background: var(--cartao-2); border: 1px solid var(--borda-forte); color: var(--texto-2); white-space: nowrap; vertical-align: middle; }
.selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.selo.azul { color: var(--primaria); border-color: color-mix(in srgb, var(--primaria) 40%, transparent); background: color-mix(in srgb, var(--primaria) 10%, transparent); }
.selo.verde { color: var(--verde); border-color: color-mix(in srgb, var(--verde) 40%, transparent); background: color-mix(in srgb, var(--verde) 10%, transparent); }
.selo.vermelho { color: var(--vermelho); border-color: color-mix(in srgb, var(--vermelho) 40%, transparent); background: color-mix(in srgb, var(--vermelho) 10%, transparent); }
.selo.amarelo { color: var(--amarelo); border-color: color-mix(in srgb, var(--amarelo) 40%, transparent); background: color-mix(in srgb, var(--amarelo) 10%, transparent); }
.txt-vermelho { color: var(--vermelho); }
.bloco { display: block; color: var(--texto-2); font-size: .82rem; }
.quebra { white-space: pre-wrap; }
.voltar { margin-bottom: 12px; }
.fora-da-tela { position: fixed; left: -9999px; top: 0; }

.topo-secao { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.topo-secao .sub { margin: 0; }
.topo-secao form { margin: 0; }
.acoes form { display: contents; }
.filtro select { margin: 0; min-width: 220px; }

.tabela-wrap { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); overflow-x: auto; box-shadow: var(--sombra); }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th, .tabela td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela th { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--texto-2); font-weight: 600; background: var(--cartao-2); }
.tabela tbody tr { transition: background .15s; }
.tabela tbody tr:hover { background: color-mix(in srgb, var(--primaria) 5%, transparent); }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tr.inativo td { opacity: .55; }
.acoes-linha { text-align: right; white-space: nowrap; }
.acoes-linha > * { margin-left: 6px; vertical-align: middle; }
.acoes-linha form { margin: 0 0 0 6px; display: inline-block; }

.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.grade-2.justa { gap: 0 18px; }
.boas-vindas { margin-bottom: 20px; }
.boas-vindas p { color: var(--texto-2); margin: 0; }
.numero { font-size: 2.2rem; font-weight: 700; margin: 0; line-height: 1.1; }
.lista-ativ { list-style: none; padding: 0; margin: 0 0 14px; }
.lista-ativ li { padding: 8px 0; border-bottom: 1px solid var(--borda); font-size: .9rem; }
.lista-ativ li:last-child { border-bottom: 0; }
.lista-ativ small { display: block; color: var(--texto-2); font-size: .78rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-bottom: 24px; }
.card-mod {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none;
  background: linear-gradient(180deg, var(--cartao-2), var(--cartao)); border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px;
  box-shadow: var(--sombra); transition: border-color .15s, transform .15s;
}
.card-mod:hover { border-color: color-mix(in srgb, var(--primaria) 55%, transparent); transform: translateY(-3px); }
.card-mod small { color: var(--texto-2); }
.card-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--grad); color: #fff; margin-bottom: 8px; box-shadow: var(--brilho); }
.card-ic .ic { width: 24px; height: 24px; }
.vazio { text-align: center; padding: 44px 20px; background: var(--cartao); border: 1px dashed var(--borda-forte); border-radius: var(--raio); margin-bottom: 24px; }
.vazio .card-ic { margin: 0 auto 14px; }
.vazio p { color: var(--texto-2); }

/* ---------- modal e toast ---------- */
.modal-fundo { position: fixed; inset: 0; background: rgba(5, 8, 14, .62); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 16px; z-index: 50; animation: aparecer .12s ease-out; }
.modal { background: var(--cartao); border: 1px solid var(--borda-forte); border-radius: 16px; padding: 24px; max-width: 430px; width: 100%; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); animation: subir .16s ease-out; }
.modal p { margin: 0 0 20px; }
.modal .acoes { justify-content: flex-end; }
.modal .btn.perigo-cheio { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60;
  background: var(--cartao-2); border: 1px solid var(--borda-forte); border-left: 4px solid var(--verde);
  padding: 11px 16px; border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, .4); max-width: calc(100% - 32px);
  animation: aparecer .15s ease-out; transition: opacity .35s;
}
.toast.erro { border-left-color: var(--vermelho); }
.toast.sai { opacity: 0; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- indicadores (KPIs) ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi {
  display: flex; gap: 14px; align-items: flex-start; text-decoration: none;
  background: linear-gradient(180deg, var(--cartao-2), var(--cartao)); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 16px; box-shadow: var(--sombra);
}
a.kpi:hover { border-color: var(--borda-forte); }
.kpi.alerta { border-color: color-mix(in srgb, var(--vermelho) 45%, transparent); }
.kpi small { display: block; color: var(--texto-2); font-size: .8rem; }
.kpi b { display: block; font-size: 1.55rem; letter-spacing: -.02em; line-height: 1.2; }
.kpi em { display: block; font-style: normal; color: var(--texto-2); font-size: .76rem; margin-top: 2px; }
.kpi-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.kpi-ic .ic { width: 21px; height: 21px; }
.kpi-ic.azul { background: color-mix(in srgb, var(--primaria) 16%, transparent); color: var(--primaria); }
.kpi-ic.violeta { background: color-mix(in srgb, var(--violeta) 16%, transparent); color: var(--violeta); }
.kpi-ic.rosa { background: color-mix(in srgb, var(--rosa) 16%, transparent); color: var(--rosa); }
.kpi-ic.verde { background: color-mix(in srgb, var(--verde) 16%, transparent); color: var(--verde); }
.kpi-ic.vermelho { background: color-mix(in srgb, var(--vermelho) 16%, transparent); color: var(--vermelho); }

/* ---------- barra de ferramentas, filtros ---------- */
.barra-ferramentas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.barra-ferramentas .direita { margin-left: auto; }
.abas { display: flex; gap: 3px; background: var(--fundo-2); border: 1px solid var(--borda); border-radius: 11px; padding: 3px; }
.aba { padding: 6px 13px; border-radius: 8px; text-decoration: none; color: var(--texto-2); font-weight: 600; font-size: .88rem; white-space: nowrap; }
.aba.on { background: var(--cartao-2); color: var(--texto); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.busca { position: relative; flex: 1; min-width: 200px; max-width: 380px; margin: 0; }
.busca input { margin: 0; padding-left: 38px; }
.busca-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--texto-2); display: flex; }
.busca-ic .ic { width: 17px; height: 17px; }
.alternar { display: flex; background: var(--fundo-2); border: 1px solid var(--borda); border-radius: 11px; padding: 3px; }
.alternar a { display: grid; place-items: center; width: 34px; height: 32px; border-radius: 8px; color: var(--texto-2); }
.alternar a.on { background: var(--cartao-2); color: var(--primaria); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.alternar .ic { width: 18px; height: 18px; }

.painel-filtros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; padding: 18px; }
.filtro-grupo { min-width: 0; }
.filtro-grupo.largo { grid-column: 1 / -1; }
.filtro-grupo.meio { grid-column: span 2; }
.par input { min-width: 0; flex: 1; }
.filtro-grupo select, .filtro-grupo input { margin-top: 6px; }
.rotulo { display: block; font-size: .78rem; font-weight: 600; color: var(--texto-2); text-transform: uppercase; letter-spacing: .06em; }
.par { display: flex; align-items: center; gap: 6px; }
.par span { color: var(--texto-2); font-size: .82rem; margin-top: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip { margin: 0; font-weight: 500; font-size: .86rem; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-block; padding: 6px 13px; border-radius: 99px; border: 1px solid var(--borda-forte); background: var(--fundo); color: var(--texto-2); transition: all .15s; }
.chip input:checked + span { background: color-mix(in srgb, var(--primaria) 16%, transparent); border-color: var(--primaria); color: var(--texto); }
.chip input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaria) 30%, transparent); }
.filtro-acoes { grid-column: 1 / -1; justify-content: flex-end; border-top: 1px solid var(--borda); padding-top: 14px; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.etiquetas .sub { margin: 0 4px 0 0; }
.etiqueta { display: inline-flex; gap: 6px; align-items: center; padding: 4px 11px; border-radius: 99px; text-decoration: none; font-size: .82rem; font-weight: 600; background: color-mix(in srgb, var(--primaria) 13%, transparent); border: 1px solid color-mix(in srgb, var(--primaria) 40%, transparent); }
.etiqueta span { opacity: .7; font-size: 1rem; line-height: 1; }
.etiqueta:hover span { opacity: 1; }
.etiqueta.limpar { background: none; border-color: var(--borda-forte); color: var(--texto-2); }
.progresso { padding: 10px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--primaria) 45%, transparent); background: color-mix(in srgb, var(--primaria) 10%, transparent); margin-bottom: 14px; }
/* ---------- telas médias ---------- */
@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .painel-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- celular ---------- */
@media (max-width: 860px) {
  .lateral { position: fixed; left: 0; top: 0; z-index: 40; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--sombra); background: var(--fundo-2); }
  .lateral.aberta { transform: none; }
  .fundo-menu.aberto { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 30; }
  .btn-ic { display: inline-flex; }
  .barra { padding: 12px 16px; }
  .barra h1 { font-size: 1.2rem; }
  .pagina { padding: 10px 16px 44px; }
  .grade-2 { grid-template-columns: 1fr; }
  .kpis { gap: 10px; }
  .kpi { padding: 12px; gap: 10px; }
  .kpi-ic { width: 34px; height: 34px; }
  .kpi b { font-size: 1.2rem; }
  .barra-ferramentas .direita { margin-left: 0; width: 100%; }
  .barra-ferramentas .direita .btn { flex: 1; }
  .busca { max-width: none; order: -1; flex-basis: 100%; } /* celular: o campo vem ANTES do filtro e do botão Buscar */
  .painel-filtros { grid-template-columns: 1fr; }
  .filtro-grupo.meio { grid-column: auto; }
  .tabela thead { display: none; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela tr { border-bottom: 1px solid var(--borda); padding: 8px 0; }
  .tabela td { border: 0; padding: 4px 14px; }
  .tabela td[data-rot]::before { content: attr(data-rot); display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); }
  .tabela td.acoes-linha { display: flex; gap: 8px; justify-content: flex-start; padding-top: 8px; text-align: left; }
  .acoes-linha > *, .acoes-linha form { margin-left: 0; }
  .dados { grid-template-columns: 1fr; gap: 0; }
  .dados dt { line-height: 1.4; }
  .dados dd { margin-bottom: 12px; }
}
@media (max-width: 420px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi { flex-direction: column; }
}

/* ---------- utilidades extras ---------- */
.sem-margem { margin: 0; }
form.inline { display: inline; margin: 0; }
.link-meta { color: var(--texto); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-meta:hover { color: var(--primaria); }
.modal-campo { margin: -8px 0 18px; }
progress { appearance: none; -webkit-appearance: none; width: 100%; height: 8px; border: 0; border-radius: 99px; background: var(--fundo); overflow: hidden; }
progress::-webkit-progress-bar { background: var(--fundo); border-radius: 99px; }
progress::-webkit-progress-value { background: var(--grad); border-radius: 99px; transition: width .3s; }
progress::-moz-progress-bar { background: var(--grad); border-radius: 99px; }

/* =====================================================================
   Mídia Indoor — peças próprias (menu em sanfona, faixa do cliente, ficha, créditos, 2FA, marca)
   ===================================================================== */
.selo.violeta { color: var(--violeta); border-color: color-mix(in srgb, var(--violeta) 40%, transparent); background: color-mix(in srgb, var(--violeta) 10%, transparent); }
.nota { color: var(--texto-2); font-size: .82rem; margin: 10px 0 0; }
.login .nota { text-align: center; }
.opcional { font-weight: 500; font-size: .72rem; color: var(--texto-2); background: var(--cartao-2); border: 1px solid var(--borda); border-radius: 99px; padding: 1px 8px; margin-left: 4px; vertical-align: middle; }
label.largo { grid-column: 1 / -1; }
.sub-inline { color: var(--texto-2); font-style: italic; }
.select-curto { width: auto; margin: 0; min-width: 190px; }
.campo-curto { max-width: 200px; }
.sem-margem-baixo { margin-bottom: 10px; }
.conta-link { font-weight: 700; text-decoration: none; display: block; }
.conta-link:hover { color: var(--primaria); }
.campo-senha .btn { flex: none; padding: 10px 13px; }
.campo-senha input[type=text] { font-family: ui-monospace, Consolas, monospace; letter-spacing: .02em; }

/* marca no menu */
a.marca { text-decoration: none; color: var(--texto); min-width: 0; }
a.marca b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marca-logo { width: 34px; height: 34px; border-radius: 10px; object-fit: contain; background: #fff; padding: 3px; flex: none; }

/* menu lateral em sanfona */
.grupo-menu { margin: 0; }
.grupo-menu summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--texto-2); padding: 16px 12px 6px; opacity: .8; font-weight: 600; user-select: none;
}
.grupo-menu summary::-webkit-details-marker { display: none; }
.grupo-menu summary .ic { width: 14px; height: 14px; transition: transform .15s; }
.grupo-menu:not([open]) summary .ic { transform: rotate(-90deg); }
.grupo-menu summary:hover { opacity: 1; color: var(--texto); }
.grupo-menu > a { margin-bottom: 2px; }

/* saldo na barra do topo */
.saldo-chip {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 99px; text-decoration: none;
  font-weight: 700; font-size: .88rem; border: 1px solid color-mix(in srgb, var(--violeta) 40%, transparent);
  background: color-mix(in srgb, var(--violeta) 12%, transparent); white-space: nowrap;
}
.saldo-chip .ic { width: 17px; height: 17px; color: var(--violeta); }
.saldo-chip:hover { border-color: var(--violeta); }

/* faixa "você está no painel do cliente" */
.faixa-como {
  position: sticky; top: 0; z-index: 25; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 32px; color: #fff; background: linear-gradient(90deg, #6d28d9, #4f46e5); box-shadow: 0 6px 18px rgba(79, 70, 229, .35);
}
.faixa-como > span { display: inline-flex; align-items: center; gap: 8px; }
.faixa-como .ic { width: 18px; height: 18px; flex: none; }
.faixa-como form { margin: 0; }
.faixa-como .btn { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); color: #fff; }
.faixa-como .btn:hover { background: rgba(255, 255, 255, .26); }
.faixa-como + .barra { top: 52px; }

/* telas sem menu (login, troca de senha, 2FA obrigatório) */
.solo { position: relative; flex-direction: column; }
.solo-miolo { width: 100%; max-width: 760px; display: flex; flex-direction: column; align-items: center; }
.solo-miolo > * { width: 100%; }
.solo-miolo > .login { max-width: 410px; }
.solo-miolo > .cartao.estreito { max-width: 520px; }
.solo-sair { position: absolute; top: 16px; right: 16px; margin: 0; }
.solo-rodape { color: var(--texto-2); font-size: .78rem; text-align: center; margin: 18px 0 0; opacity: .7; }
.estreito-largo { max-width: 760px; }
.estreito-largo .sub { text-align: center; margin: 0; }
.codigo-2fa { font: 600 1.6rem/1.2 ui-monospace, Consolas, monospace; letter-spacing: .35em; text-align: center; padding: 12px; }

/* ficha da conta */
.voltar { margin-bottom: 12px; }
.ficha-hero {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 22px; margin-bottom: 18px; border-radius: 18px; border: 1px solid var(--borda);
  background: radial-gradient(600px 200px at 0% 0%, rgba(79, 124, 255, .18), transparent 70%),
              radial-gradient(500px 200px at 100% 100%, rgba(139, 92, 246, .16), transparent 70%),
              linear-gradient(180deg, var(--cartao-2), var(--cartao));
  box-shadow: var(--sombra);
}
.ficha-hero.compacto { padding: 16px 20px; }
.ficha-ic { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: var(--grad); color: #fff; box-shadow: var(--brilho); flex: none; }
.ficha-ic .ic { width: 26px; height: 26px; }
.ficha-info { flex: 1; min-width: 220px; }
.ficha-info h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; font-size: 1.4rem; }
.ficha-info .sub { margin: 0; }
.ficha-acoes { justify-content: flex-end; }
.aviso-mini { margin: 8px 0 0; font-size: .84rem; color: var(--amarelo); }
.avatar.grande { width: 52px; height: 52px; font-size: 1.3rem; }
.dados { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; margin: 0 0 16px; align-items: center; }
.dados dt { color: var(--texto-2); font-size: .84rem; }
.dados dd { margin: 0; word-break: break-word; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.form-linha { border-top: 1px solid var(--borda); padding-top: 16px; margin: 4px 0 12px; }
.chips-contas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.chip-conta { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--borda); background: var(--fundo); text-decoration: none; transition: border-color .15s; }
.chip-conta:hover { border-color: color-mix(in srgb, var(--primaria) 55%, transparent); }
.chip-conta .ic { color: var(--primaria); }
.chip-conta b { display: block; font-size: .9rem; }
.chip-conta small { display: block; color: var(--texto-2); font-size: .76rem; }

/* créditos */
.saldo-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 26px; margin-bottom: 18px; border-radius: 18px; color: #fff;
  background: radial-gradient(500px 220px at 100% 0%, rgba(255, 255, 255, .18), transparent 70%), var(--grad); box-shadow: var(--brilho);
}
.saldo-hero small { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; opacity: .85; font-weight: 600; }
.saldo-hero b { display: block; font-size: 2.3rem; letter-spacing: -.02em; line-height: 1.15; margin: 2px 0 6px; }
.saldo-hero > div > span { display: block; max-width: 640px; opacity: .92; font-size: .92rem; }
.saldo-ic { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: rgba(255, 255, 255, .16); flex: none; }
.saldo-ic .ic { width: 34px; height: 34px; }
.periodos { list-style: none; padding: 0; margin: 0; }
.periodos li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--borda); }
.periodos li:last-child { border-bottom: 0; }
.periodos-edit { display: flex; flex-direction: column; gap: 8px; }
.pe-cab, .pe-linha { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, .9fr) minmax(0, .7fr) auto auto; gap: 8px; align-items: center; }
.pe-cab { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); font-weight: 600; padding: 0 2px; }
.pe-linha { margin: 0; padding: 8px; border-radius: 12px; border: 1px solid var(--borda); background: var(--fundo); }
.pe-linha.novo { border-style: dashed; }
.pe-linha.desligado { opacity: .6; }
.pe-linha label { margin: 0; }
.pe-linha input { margin: 0; padding: 8px 10px; background: var(--cartao); }
.pe-rot { display: none; }
.pe-opcoes { display: flex; gap: 6px; flex-wrap: wrap; }
.pilula { margin: 0; font-weight: 500; font-size: .8rem; cursor: pointer; position: relative; }
.pilula input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pilula span { display: inline-flex; align-items: center; height: 34px; padding: 0 11px; border-radius: 99px; border: 1px solid var(--borda-forte); color: var(--texto-2); background: var(--cartao); transition: all .15s; white-space: nowrap; }
.pilula input:checked + span { background: color-mix(in srgb, var(--verde) 14%, transparent); border-color: var(--verde); color: var(--texto); }
.pilula input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaria) 30%, transparent); }
.tabela .num { text-align: right; white-space: nowrap; }
.valor { font-weight: 700; font-variant-numeric: tabular-nums; }
.valor.mais { color: var(--verde); }
.valor.menos { color: var(--vermelho); }
.paginacao { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.paginacao .sub { margin: 0; }

/* caixas de informação */
.nota-box { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: 10px; margin: 0 0 16px; font-size: .88rem;
  border: 1px solid color-mix(in srgb, var(--primaria) 35%, transparent); background: color-mix(in srgb, var(--primaria) 8%, transparent); }
.nota-box .ic { color: var(--primaria); width: 18px; height: 18px; margin-top: 1px; }

/* funcionários */
.func-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.func header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.func header > div { flex: 1; min-width: 0; }
.func header b { display: block; }
.func header small { display: block; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.func.inativo { opacity: .7; }
.func .form-linha { margin-top: 0; }

/* minha conta */
.abas-pagina { display: inline-flex; margin-bottom: 18px; flex-wrap: wrap; }
.ponto-alerta { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--vermelho); margin-left: 4px; vertical-align: middle; }
.cartao h3 .ic { width: 19px; height: 19px; vertical-align: -3px; color: var(--primaria); }
.totp-passos { display: grid; grid-template-columns: 260px 1fr; gap: 26px; align-items: start; margin: 8px 0 18px; }
.totp-qr { display: flex; flex-direction: column; align-items: center; text-align: center; }
.qr { width: 236px; height: 236px; padding: 12px; background: #fff; border-radius: 14px; box-shadow: var(--sombra); display: grid; place-items: center; }
.qr svg { width: 100%; height: 100%; display: block; }
.segredo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.segredo code { font: 600 .9rem/1.4 ui-monospace, Consolas, monospace; background: var(--fundo); border: 1px solid var(--borda-forte); border-radius: 8px; padding: 6px 10px; letter-spacing: .04em; word-break: break-all; }
.passos { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 14px; }
.passos li { padding-left: 4px; color: var(--texto-2); }
.passos li b { color: var(--texto); display: block; }
.totp-confirmar { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.totp-confirmar label { flex: 1; min-width: 220px; max-width: 320px; margin: 0; }
.totp-confirmar .btn { margin-bottom: 24px; }
details.desligar { margin-top: 10px; border-top: 1px solid var(--borda); padding-top: 12px; }
details.desligar summary { cursor: pointer; color: var(--texto-2); font-size: .88rem; margin-bottom: 12px; }
.campo-cor { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.campo-cor input[type=color] { width: 52px; height: 42px; padding: 3px; margin: 0; flex: none; cursor: pointer; }
.campo-cor input:not([type=color]) { margin: 0; font-family: ui-monospace, Consolas, monospace; }

/* prévia da marca na TV */
.previa-tv { --marca: #5b7cff; margin: 6px auto 0; max-width: 460px; }
.pt-tela {
  aspect-ratio: 16 / 9; border-radius: 12px; border: 10px solid #11151d; box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06);
  background: radial-gradient(420px 220px at 50% 0%, color-mix(in srgb, var(--marca) 32%, transparent), transparent 70%), #05070b;
  color: #fff; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 14px; text-align: center; overflow: hidden;
}
.pt-topo { display: flex; align-items: center; gap: 8px; font-size: .95rem; }
.pt-topo b { color: color-mix(in srgb, var(--marca) 55%, #fff); }
.pt-logo { height: 26px; max-width: 110px; object-fit: contain; }
.pt-aviso { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pt-aviso strong { font-size: 1.2rem; }
.pt-aviso span { font-size: .78rem; opacity: .8; }
.pt-icone { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--marca); margin-bottom: 4px; }
.pt-icone .ic { width: 20px; height: 20px; }
.pt-whats { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; padding: 4px 12px; border-radius: 99px; background: color-mix(in srgb, var(--marca) 85%, #000); }
.pt-whats .ic { width: 14px; height: 14px; }
.pt-pe { width: 30%; height: 10px; margin: 0 auto; background: #11151d; border-radius: 0 0 8px 8px; }

/* ---------- ajustes de tela pequena das peças novas ---------- */
@media (max-width: 860px) {
  .faixa-como { padding: 10px 16px; font-size: .9rem; }
  .faixa-como + .barra { top: 0; position: relative; }
  .barra h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .saldo-chip { padding: 5px 10px; font-size: .8rem; }
  .ficha-hero { padding: 16px; }
  .ficha-acoes { justify-content: flex-start; width: 100%; }
  .saldo-hero { padding: 18px; }
  .saldo-hero b { font-size: 1.8rem; }
  .saldo-hero .saldo-ic { display: none; }
  .pe-cab { display: none; }
  .pe-linha { grid-template-columns: 1fr 1fr; }
  .pe-linha label:first-of-type { grid-column: 1 / -1; }
  .pe-rot { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); margin-bottom: 4px; }
  .pe-opcoes { grid-column: 1 / -1; }
  .pe-linha .btn { grid-column: 1 / -1; }
  .totp-passos { grid-template-columns: 1fr; }
  .func-grade { grid-template-columns: 1fr; }
  .select-curto { flex: 1; }
  .tabela .num { text-align: left; }
  .abas-pagina { display: flex; width: 100%; }
  .abas-pagina .aba { flex: 1; text-align: center; padding: 7px 8px; white-space: normal; }
}

/* ---------- correções vistas nos prints (03/10): centralização, rolagem lateral no celular ---------- */
.solo { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.abas { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.grade-2 > *, .func-grade > *, .kpis > *, .cards > *, .chips-contas > * { min-width: 0; }
.ficha-info .sub { overflow-wrap: anywhere; }
.faixa-como > span { display: block; flex: 1; min-width: 0; line-height: 1.45; }
.faixa-como > span .ic { vertical-align: -4px; margin-right: 6px; }
@media (max-width: 860px) {
  .ficha-info { min-width: 0; }
  .tabela.extrato tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 0; }
  .tabela.extrato td { padding: 1px 14px; }
  .tabela.extrato td[data-rot]::before { display: none; }
  .tabela.extrato td[data-rot="Quando"] { grid-column: 1; grid-row: 1; font-size: .78rem; color: var(--texto-2); }
  .tabela.extrato td[data-rot="Conta"] { grid-column: 1; grid-row: 2; font-size: .84rem; }
  .tabela.extrato td[data-rot="Movimento"] { grid-column: 1; }
  .tabela.extrato td[data-rot="Valor"] { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; font-size: 1.15rem; }
  .tabela.extrato td[data-rot="Saldo depois"] { grid-column: 1 / -1; font-size: .78rem; color: var(--texto-2); }
  .tabela.extrato td[data-rot="Saldo depois"]::before { content: "saldo depois: "; display: inline; text-transform: none; letter-spacing: 0; font-size: inherit; }
}
@media (max-width: 480px) {
  .pt-tela { aspect-ratio: auto; min-height: 210px; gap: 10px; border-width: 7px; padding: 12px; }
}
.grade-2 > .largo-total { grid-column: 1 / -1; }
.segredo code { word-break: normal; overflow-wrap: anywhere; }
.pe-cab { padding: 0 9px; }

/* ---------- parte 2 (03/10): telas, ativação, código da TV, emergência ---------- */
.conta-link.fraco { font-weight: 500; }
.kpi b.kpi-txt { font-size: 1.15rem; line-height: 1.3; overflow-wrap: anywhere; }
.escolhas { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.escolhas legend { padding: 0; margin-bottom: 8px; }
.escolhas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.escolha { margin: 0; position: relative; cursor: pointer; font-weight: 400; min-width: 0; }
.escolha input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.escolha > span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 10px 12px 10px 12px; border-radius: 12px; border: 1px solid var(--borda-forte); background: var(--fundo); transition: border-color .15s, background .15s; }
.escolha > span b { font-size: .88rem; }
.escolha > span small { color: var(--texto-2); font-size: .76rem; line-height: 1.35; }
.escolha:hover > span { border-color: color-mix(in srgb, var(--primaria) 55%, transparent); }
.escolha input:checked + span { border-color: var(--primaria); background: color-mix(in srgb, var(--primaria) 12%, var(--fundo)); box-shadow: 0 0 0 1px var(--primaria) inset; }
.escolha input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaria) 30%, transparent); }
.mini-tv { display: block; width: 34px; height: 22px; margin-bottom: 6px; border-radius: 4px; border: 2px solid var(--texto-2); position: relative; }
.mini-tv::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 7px solid var(--primaria); transform: translate(-50%, -50%); }
.mini-tv.vertical { width: 22px; height: 34px; }
.mini-tv.r90::after { transform: translate(-50%, -50%) rotate(90deg); }
.mini-tv.r180::after { transform: translate(-50%, -50%) rotate(180deg); }
.mini-tv.r270::after { transform: translate(-50%, -50%) rotate(270deg); }
.escolha input:checked + span .mini-tv { border-color: var(--primaria); }
.periodos-escolha { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.escolha.periodo > span { align-items: center; text-align: center; padding: 9px 8px; }
.codigo-tv { font: 700 1.25rem/1.2 ui-monospace, Consolas, monospace; letter-spacing: .18em; text-transform: uppercase; max-width: 240px; }
.codigo-tv.grande { font-size: 1.9rem; letter-spacing: .22em; text-align: center; max-width: 320px; padding: 12px; }
.codigo-tv::placeholder { color: color-mix(in srgb, var(--texto-2) 55%, transparent); }
.ativar-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 18px; align-items: start; }
.passo-n { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 6px; border-radius: 50%; background: var(--grad); color: #fff; font-size: .82rem; vertical-align: 1px; }
.alternar-modo { margin-bottom: 14px; }
.form-desvincular { display: block; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--borda); }
#aparelho > .btn { margin-top: 2px; }
.emergencia-estado { display: flex; align-items: center; gap: 18px; padding: 22px 24px; margin-bottom: 18px; border-radius: 18px; border: 1px solid var(--borda); box-shadow: var(--sombra); }
.emergencia-estado.desligada { background: linear-gradient(180deg, var(--cartao-2), var(--cartao)); }
.emergencia-estado.ligada { color: #fff; background: linear-gradient(135deg, #b91c1c, #7f1d1d); border-color: transparent; box-shadow: 0 8px 26px rgba(185, 28, 28, .4); }
.emergencia-estado small { display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; opacity: .8; font-weight: 600; }
.emergencia-estado b { display: block; font-size: 1.25rem; margin: 2px 0 4px; }
.emergencia-estado span:not(.emergencia-ic) { display: block; opacity: .9; font-size: .9rem; }
.emergencia-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--verde) 16%, transparent); color: var(--verde); }
.emergencia-estado.ligada .emergencia-ic { background: rgba(255, 255, 255, .16); color: #fff; }
.emergencia-ic .ic { width: 28px; height: 28px; }
.faixa-emergencia { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 32px; color: #fff; background: linear-gradient(90deg, #b91c1c, #991b1b); font-weight: 600; }
.faixa-emergencia .ic { width: 18px; height: 18px; vertical-align: -4px; margin-right: 6px; }
.faixa-emergencia a { color: #fff; }
.func-telas { border-top: 1px solid var(--borda); padding-top: 14px; margin-top: 4px; }
.func-telas .checks { margin: 8px 0 12px; }
@media (max-width: 860px) {
  .ativar-grade { grid-template-columns: 1fr; }
  .escolhas-grade { grid-template-columns: 1fr 1fr; }
  .codigo-tv.grande { max-width: none; }
  .emergencia-estado { padding: 18px; }
  .faixa-emergencia { padding: 10px 16px; }
}
@media (max-width: 420px) {
  .escolhas-grade { grid-template-columns: 1fr; }
  .periodos-escolha { grid-template-columns: 1fr 1fr; }
}
.ficha-info .sub .conta-link { display: inline; }
.func-telas { margin-bottom: 14px; }
.func-telas > b { display: block; margin-bottom: 8px; font-size: .88rem; }
.func-telas .pe-opcoes { margin-bottom: 10px; }

/* ---------- revisão 03/10: ações na linha (regra 7b), Atividades e listas compactas no celular, contato ---------- */
.tabela td.acoes-linha { white-space: normal; }
.acoes-linha > *, .acoes-linha form { margin: 3px 0 3px 6px; }
.btn.desligado { opacity: .55; cursor: help; box-shadow: none; }
.btn.desligado:hover { border-color: var(--borda-forte); background: var(--cartao-2); }
.func header small.func-email { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.func-email .btn-mini { vertical-align: -3px; }
.contato-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.contato-linha .sub { margin: 0; }
.eu > .contato-menu { margin: 0 10px 8px; justify-content: center; }
.paginacao + .nota { text-align: center; }
@media (max-width: 860px) {
  .barra-ferramentas .abas { flex-wrap: wrap; overflow: visible; }
  .acoes-linha > *, .acoes-linha form { margin: 0; }
  .tabela td.acoes-linha { flex-wrap: wrap; }
  /* Atividades: cartão de 2 linhas ("quando · quem" e embaixo o texto); IP só no computador */
  .tabela.atividades tr { padding: 8px 0; }
  .tabela.atividades td { padding: 1px 14px; }
  .tabela.atividades td[data-rot]::before { display: none; }
  .tabela.atividades td[data-rot="Quando"], .tabela.atividades td[data-rot="Quem"] { display: inline; width: auto; padding-right: 0; font-size: .78rem; color: var(--texto-2); }
  .tabela.atividades td[data-rot="Quem"] { padding-left: 4px; }
  .tabela.atividades td[data-rot="Quem"]::before { display: inline; content: "· "; text-transform: none; letter-spacing: 0; font-size: inherit; }
  .tabela.atividades td[data-rot="Quem"] b { color: var(--texto); font-weight: 600; }
  .tabela.atividades td[data-rot="Quem"] .bloco { display: inline; }
  .tabela.atividades td[data-rot="Quem"] .bloco::before { content: " ("; }
  .tabela.atividades td[data-rot="Quem"] .bloco::after { content: ")"; }
  .tabela.atividades td[data-rot="O quê"] { padding-top: 3px; }
  .tabela.atividades td[data-rot="IP"] { display: none; }
  /* Revendas e Clientes: nome em cima, os dados numa linha de selos e os botões embaixo */
  .tabela.lista-contas td[data-rot]:not(.principal) { display: inline-block; width: auto; padding: 2px 4px 2px 14px; font-size: .84rem; }
  .tabela.lista-contas td[data-rot]:not(.principal)::before { display: inline; content: attr(data-rot) ": "; text-transform: none; letter-spacing: 0; font-size: .78rem; }
}

/* ---------- fechamento da Fase 1 (04/10): 5 KPIs, destaques da revenda (regra 7a), cortesia do admin, Configurações ---------- */
.kpis.cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1180px) { .kpis.cinco { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .kpis.cinco { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.txt-amarelo { color: var(--amarelo); }
.valor.zero { color: var(--texto-2); }
.cartao.atencao.com-itens { border-color: color-mix(in srgb, var(--amarelo) 35%, var(--borda)); }
.cartao.atencao h3 .ic { width: 19px; height: 19px; vertical-align: -3px; }
.lista-atencao { margin-bottom: 12px; }
.lista-atencao li { overflow-wrap: anywhere; }
.tabela tr.atencao td:first-child { box-shadow: inset 3px 0 0 var(--amarelo); }
.atencao-grade { margin-bottom: 18px; }
.atencao-grade > .cartao { margin-bottom: 0; height: 100%; }

/* =====================================================================
   Fase 2 (04/10): Mídias (pastas na lateral, lista compacta, seleção em lote, gavetas de envio e detalhes),
   barra de espaço "X de Y", Controle → Armazenamento
   ===================================================================== */
.so-celular { display: none !important; }
.btn-mini.perigo:hover { color: var(--vermelho); }
.midias-pagina { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; }
.midias-pagina > * { min-width: 0; }
.pastas-lateral { position: sticky; top: 76px; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px; box-shadow: var(--sombra); }
.pastas-topo { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 8px; }
.pastas-topo b { display: inline-flex; align-items: center; gap: 7px; font-size: .86rem; }
.pastas-topo .ic { width: 17px; height: 17px; color: var(--primaria); }
.pastas-lista { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; max-height: 60vh; overflow-y: auto; }
.pasta { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 9px; text-decoration: none; color: var(--texto-2); font-size: .88rem; font-weight: 500; min-width: 0; flex: 1; }
.pasta span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pasta em { font-style: normal; font-size: .74rem; color: var(--texto-2); background: var(--fundo); border: 1px solid var(--borda); border-radius: 99px; padding: 0 7px; }
.pasta .ic { width: 15px; height: 15px; flex: none; }
.pasta:hover { background: var(--cartao-2); color: var(--texto); }
.pasta.on, .pasta-linha.on > .pasta { background: color-mix(in srgb, var(--primaria) 14%, transparent); color: var(--texto); }
.pasta-linha { display: flex; align-items: center; gap: 0; min-width: 0; }
.pasta-linha .btn-mini { opacity: .55; }
.pasta-linha:hover .btn-mini, .pasta-linha .btn-mini:focus-visible { opacity: 1; }
.pastas-lateral .nota { margin-top: 8px; font-size: .76rem; }

.espaco-cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.cartao .espaco-cartao { background: var(--fundo); margin-bottom: 14px; }
.espaco-txt { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; font-size: .9rem; }
.espaco-txt > span { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.espaco-txt .ic { width: 17px; height: 17px; color: var(--primaria); }
.espaco-txt em { font-style: normal; font-weight: 700; font-size: .82rem; color: var(--texto-2); }
.espaco-cartao small { display: block; margin-top: 7px; color: var(--texto-2); font-size: .78rem; }
.espaco-cartao.quase progress::-webkit-progress-value { background: var(--amarelo); }
.espaco-cartao.quase progress::-moz-progress-bar { background: var(--amarelo); }
.espaco-cartao.quase .espaco-txt em { color: var(--amarelo); }
.espaco-cartao.cheio progress::-webkit-progress-value { background: var(--vermelho); }
.espaco-cartao.cheio progress::-moz-progress-bar { background: var(--vermelho); }
.espaco-cartao.cheio { border-color: color-mix(in srgb, var(--vermelho) 45%, transparent); }
.espaco-cartao.cheio .espaco-txt em { color: var(--vermelho); }
.espaco-plataforma.alerta { border-color: color-mix(in srgb, var(--vermelho) 45%, transparent); }
.espaco-plataforma h3 .ic, .conteudo-inicio h3 .ic { width: 19px; height: 19px; vertical-align: -3px; color: var(--primaria); }
.espaco-plataforma .espaco-cartao, .conteudo-inicio .espaco-cartao { margin-bottom: 0; }

.midias-filtros .select-curto { min-width: 150px; }
.midias-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; padding: 0 4px; flex-wrap: wrap; }
.midias-cab .check { font-size: .84rem; color: var(--texto-2); }
.midias-cab .sub { margin: 0; font-size: .84rem; }
.midias-lista { list-style: none; margin: 0 0 14px; padding: 0; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; }
.midia-linha { display: grid; grid-template-columns: 22px 48px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 60px; padding: 6px 12px; border-bottom: 1px solid var(--borda); }
.midia-linha:last-child { border-bottom: 0; }
.midia-linha:hover { background: color-mix(in srgb, var(--primaria) 4%, transparent); }
.midia-linha.marcada { background: color-mix(in srgb, var(--primaria) 10%, transparent); }
.midia-sel { margin: 0; display: grid; place-items: center; cursor: pointer; }
.midia-sel input { width: 17px; height: 17px; margin: 0; }
.midia-mini { position: relative; width: 48px; height: 48px; padding: 0; border: 1px solid var(--borda-forte); border-radius: 8px; background: #05070b; color: var(--texto-2); display: grid; place-items: center; cursor: pointer; overflow: hidden; }
.midia-mini img { width: 100%; height: 100%; object-fit: contain; display: block; }
.midia-mini > .ic { width: 22px; height: 22px; }
.midia-mini.audio { background: color-mix(in srgb, var(--violeta) 18%, #05070b); color: #c4b5fd; }
.mini-play { position: absolute; left: 3px; top: 3px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: rgba(0, 0, 0, .6); color: #fff; }
.mini-play .ic { width: 12px; height: 12px; }
.mini-dur { position: absolute; right: 2px; bottom: 2px; padding: 0 4px; border-radius: 4px; background: rgba(0, 0, 0, .72); color: #fff; font-size: .64rem; font-weight: 700; line-height: 1.5; }
.midia-info { min-width: 0; }
.midia-nome { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.midia-info small { display: block; color: var(--texto-2); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.midia-info small .ic { width: 12px; height: 12px; vertical-align: -2px; margin: 0 2px 0 4px; }
.midia-selos { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }

.barra-lote { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 35; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  padding: 10px 14px; border-radius: 14px; background: var(--cartao-2); border: 1px solid var(--borda-forte); box-shadow: 0 14px 40px rgba(0, 0, 0, .45); max-width: calc(100% - 32px); }
.barra-lote b { font-size: .9rem; }
.lote-mover { display: inline-flex; gap: 6px; align-items: center; }
.lote-mover select { margin: 0; padding: 6px 9px; width: auto; max-width: 180px; font-size: .84rem; }
body.com-lote .pagina { padding-bottom: 110px; }

.gaveta-fundo { position: fixed; inset: 0; z-index: 44; background: rgba(5, 8, 14, .55); backdrop-filter: blur(2px); }
.gaveta { position: fixed; top: 0; right: 0; bottom: 0; z-index: 45; width: min(500px, 100%); display: flex; flex-direction: column; background: var(--fundo-2); border-left: 1px solid var(--borda-forte); box-shadow: -18px 0 50px rgba(0, 0, 0, .4); animation: entrar-direita .16s ease-out; }
@keyframes entrar-direita { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.gaveta-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--borda); }
.gaveta-topo h3 { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.gaveta-topo h3 .ic { color: var(--primaria); }
.gaveta-topo .btn-mini .ic { width: 20px; height: 20px; }
.gaveta-corpo { flex: 1; overflow-y: auto; padding: 16px 18px; }
.gaveta-pe { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--borda); }
.gaveta-pe .sub { margin: 0; font-size: .8rem; }
body.com-gaveta { overflow: hidden; }

.soltar { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 22px 16px; margin-bottom: 14px; border: 2px dashed var(--borda-forte); border-radius: 14px; background: var(--cartao); transition: border-color .15s, background .15s; }
.soltar > .ic { width: 30px; height: 30px; color: var(--primaria); }
.soltar span { color: var(--texto-2); font-size: .82rem; }
.soltar.sobre { border-color: var(--primaria); background: color-mix(in srgb, var(--primaria) 10%, var(--cartao)); }
.fila { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fila-vazia { text-align: center; font-size: .84rem; }
.fila-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px; border-radius: 12px; border: 1px solid var(--borda); background: var(--cartao); }
.fila-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--primaria) 14%, transparent); color: var(--primaria); }
.fila-ic .ic { width: 18px; height: 18px; }
.fila-info { min-width: 0; }
.fila-nome { display: block; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-info small { display: block; color: var(--texto-2); font-size: .76rem; }
.fila-estado { font-size: .8rem; margin-top: 4px; color: var(--texto-2); overflow-wrap: anywhere; }
.fila-info progress { margin-top: 6px; }
.fila-avisos { margin: 6px 0 0; padding-left: 18px; font-size: .8rem; color: var(--amarelo); }
.fila-avisos li { margin-bottom: 3px; }
.fila-acoes { grid-column: 2; display: flex; gap: 6px; flex-wrap: wrap; }
.fila-acoes:empty { display: none; }
.fila-item.estado-pronto { border-color: color-mix(in srgb, var(--verde) 40%, transparent); }
.fila-item.estado-pronto .fila-estado { color: var(--verde); }
.fila-item.estado-pronto .fila-ic { background: color-mix(in srgb, var(--verde) 16%, transparent); color: var(--verde); }
.fila-item.estado-erro, .fila-item.estado-recusado { border-color: color-mix(in srgb, var(--vermelho) 40%, transparent); }
.fila-item.estado-erro .fila-estado, .fila-item.estado-recusado .fila-estado { color: var(--vermelho); }
.fila-item.estado-aviso { border-color: color-mix(in srgb, var(--amarelo) 45%, transparent); }
.fila-item.estado-aviso .fila-estado, .fila-item.estado-duplicado .fila-estado { color: var(--amarelo); }
.envio-indicador { position: fixed; left: 16px; bottom: 18px; z-index: 36; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--primaria) 50%, transparent);
  background: var(--cartao-2); color: var(--texto); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.envio-indicador .ic { width: 17px; height: 17px; color: var(--primaria); }

.det-previa { display: grid; place-items: center; background: #05070b; border-radius: 12px; margin-bottom: 14px; min-height: 120px; overflow: hidden; border: 1px solid var(--borda); }
.det-previa img, .det-previa video { display: block; max-width: 100%; max-height: 300px; }
.det-previa.audio { padding: 18px; gap: 12px; color: #c4b5fd; }
.det-previa.audio > .ic { width: 40px; height: 40px; }
.det-previa audio { width: 100%; }
.gaveta .dados { margin-top: 4px; font-size: .88rem; }
.det-avisos { margin: 0 0 14px; }
.aviso-linha { margin: 0 0 8px; font-size: .84rem; color: var(--texto-2); }
.det-onde { border-top: 1px solid var(--borda); padding-top: 12px; margin-bottom: 14px; font-size: .88rem; }
.det-onde h4 { margin: 0 0 6px; font-size: .9rem; }
.det-onde p { margin: 0 0 6px; }
.conta-link-inline { color: var(--primaria); font-weight: 600; }
.det-acoes { border-top: 1px solid var(--borda); padding-top: 12px; }

.teste-r2 { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--fundo); border: 1px solid var(--borda); }
.passos-teste { margin: 10px 0 0; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: .88rem; }
.passos-teste small { display: block; color: var(--texto-2); margin-left: 26px; overflow-wrap: anywhere; }
.marca-passo { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: .78rem; font-weight: 700; margin-right: 4px; }
.passos-teste li.ok .marca-passo { background: color-mix(in srgb, var(--verde) 18%, transparent); color: var(--verde); }
.passos-teste li.falhou .marca-passo { background: color-mix(in srgb, var(--vermelho) 18%, transparent); color: var(--vermelho); }

@media (max-width: 860px) {
  .so-celular { display: inline-flex !important; }
  .midias-pagina { grid-template-columns: minmax(0, 1fr); }
  .pastas-lateral { display: none; position: fixed; inset: auto 0 0 0; top: auto; z-index: 46; max-height: 80vh; overflow-y: auto; border-radius: 16px 16px 0 0; box-shadow: 0 -18px 50px rgba(0, 0, 0, .5); }
  .pastas-lateral.aberta { display: block; }
  .midias-filtros .btn.so-celular { order: -2; flex: 1 1 100%; justify-content: space-between; }
  .midias-filtros .select-curto { flex: 1 1 140px; min-width: 0; }
  .midias-filtros .direita { order: -3; }
  .midia-linha { grid-template-columns: 22px 48px minmax(0, 1fr) auto; gap: 10px; padding: 8px 10px; }
  .midia-selos { grid-column: 3; grid-row: 2; justify-content: flex-start; }
  .midia-selos:empty { display: none; }
  .midia-linha > .btn { grid-column: 4; grid-row: 1 / span 2; padding: 6px 9px; }
  .barra-lote { bottom: 10px; gap: 8px; padding: 9px 10px; width: calc(100% - 20px); }
  .lote-mover { flex: 1 1 100%; }
  .lote-mover select { flex: 1; max-width: none; }
  .gaveta { width: 100%; }
  .envio-indicador { left: 10px; right: 10px; justify-content: center; }
}
@media (max-width: 420px) {
  .midia-linha > .btn { font-size: 0; gap: 0; }
  .midia-linha > .btn .ic { width: 17px; height: 17px; }
}

/* =====================================================================
   Fase 2, painel 2 (04/10): Listas (editor com biblioteca e arrastar), Widgets (gaveta com prévia), Programação
   (horários especiais na ordem da TV, simulador, música, sobreposições), Publicar (acompanhar), Conteúdo/Local da tela
   e a PRÉVIA da TV (previa.js: unidade u = menor lado / 100, fonte Inter só dentro da prévia)
   ===================================================================== */
@font-face { font-family: "InterTV"; src: url("fontes/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "InterTV"; src: url("fontes/Inter-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

.abas button.aba { border: 0; background: none; font: inherit; font-weight: 600; font-size: .86rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.abas button.aba .ic { width: 15px; height: 15px; }
.abas button.aba.on { background: var(--cartao-2); color: var(--texto); }
.sub-inline { font-weight: 400; font-size: .84rem; }
.passo-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--grad); color: #fff; font-size: .78rem; margin-right: 6px; vertical-align: 1px; }
.col-sel { width: 40px; }
.tabela .col-sel .check input { width: 17px; height: 17px; }
.resumo-curto { color: var(--texto-2); font-size: .86rem; }
.tipo-widget { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tipo-widget .ic { width: 16px; height: 16px; color: var(--primaria); }
.checks-coluna { flex-direction: column; gap: 8px; margin-bottom: 14px; }
.conteudo-pendente { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }

/* ---------- prévia da TV ---------- */
.pv { display: flex; flex-direction: column; gap: 10px; }
.pv-tela { --u: 4px; --marca: #5b7cff; position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden;
  font-family: "InterTV", "Inter", system-ui, sans-serif; color: #fff; line-height: 1.2; border: 1px solid var(--borda-forte); }
.pv-tela.v { aspect-ratio: 9 / 16; width: min(100%, calc(min(68vh, 620px) * 9 / 16)); margin: 0 auto; }
.pv-palco, .pv-sob { position: absolute; inset: 0; }
.pv-sob { pointer-events: none; }
.pv-midia { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pv-midia.contem { object-fit: contain; }
.pv-midia.cobre { object-fit: cover; }
.pv-vazio { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center; color: #8f9bb0; font-size: .9rem; font-family: system-ui, sans-serif; }
.pv-fundo-exemplo { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(135deg, #243b6b, #4c2a7a); color: rgba(255, 255, 255, .55); font-size: calc(var(--u) * 4); text-align: center; padding: calc(var(--u) * 6); }
.pv-ctl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pv-bt { padding: 6px 9px; }
.pv-info { flex: 1; min-width: 120px; font-size: .82rem; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-oris { margin-left: auto; }
.pv-modal { max-width: 920px; }
.pv-modal-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.pv-modal-topo .btn-mini .ic { width: 20px; height: 20px; }
.pv-modal .nota { margin: 10px 0 0; }

.pv-w { position: absolute; inset: 0; padding: calc(var(--u) * 6); display: flex; flex-direction: column; overflow: hidden; }
.pv-w.escuro { background: #0b1220; color: #fff; --t2: #cbd5e1; }
.pv-w.claro { background: #f8fafc; color: #0f172a; --t2: #475569; }
.pv-credito { position: absolute; right: calc(var(--u) * 3); bottom: calc(var(--u) * 3); font-size: calc(var(--u) * 2.4); color: var(--t2); }
.pv-semdado { justify-content: center; align-items: center; text-align: center; gap: calc(var(--u) * 2); }
.pv-semdado b { font-size: calc(var(--u) * 6); }
.pv-semdado span { font-size: calc(var(--u) * 3.6); color: var(--t2); max-width: 80%; }
/* relógio em tela cheia */
.pv-relogio { justify-content: center; align-items: center; text-align: center; }
.pv-rel-hora { font-size: calc(var(--u) * 28); font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pv-rel-data { font-size: calc(var(--u) * 6); color: var(--t2); margin-top: calc(var(--u) * 2); }
/* clima */
.pv-cl-cidade { font-size: calc(var(--u) * 6); font-weight: 700; }
.pv-cl-hoje { font-size: calc(var(--u) * 4); color: var(--t2); }
.pv-cl-centro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; }
.pv-cl-linha { display: flex; align-items: center; gap: calc(var(--u) * 4); }
.pv-cl-ic { width: calc(var(--u) * 30); height: calc(var(--u) * 30); }
.pv-cl-temp { font-size: calc(var(--u) * 26); font-weight: 700; line-height: 1; }
.pv-cl-desc { font-size: calc(var(--u) * 5); margin-top: calc(var(--u) * 1.5); }
.pv-cl-dias { display: flex; gap: calc(var(--u) * 3); margin-bottom: calc(var(--u) * 2); }
.pv-cl-dia { flex: 1; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1); padding: calc(var(--u) * 2); border-radius: calc(var(--u) * 2); background: rgba(127, 127, 127, .14); }
.pv-cl-sem { font-size: calc(var(--u) * 4.5); font-weight: 700; }
.pv-cl-dic { width: calc(var(--u) * 10); height: calc(var(--u) * 10); }
.pv-cl-mm { font-size: calc(var(--u) * 5); }
.pv-tela.v .pv-cl-centro { flex: none; height: 45%; }
.pv-tela.v .pv-cl-dias { flex: 1; flex-direction: column; justify-content: center; }
.pv-tela.v .pv-cl-dia { flex-direction: row; justify-content: space-between; flex: none; }
/* cotação */
.pv-ct-titulo { font-size: calc(var(--u) * 7); font-weight: 700; }
.pv-ct-ref { font-size: calc(var(--u) * 4); color: var(--t2); margin-bottom: calc(var(--u) * 3); }
.pv-ct-lista { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 3); margin-bottom: calc(var(--u) * 3); }
.pv-ct-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: calc(var(--u) * 4); }
.pv-ct-linha.cv, .pv-ct-cab { grid-template-columns: minmax(0, 1fr) auto auto; }
.pv-ct-moeda { display: flex; flex-direction: column; min-width: 0; }
.pv-ct-cod { font-size: calc(var(--u) * 7); font-weight: 700; color: var(--marca); }
.pv-ct-nome { font-size: calc(var(--u) * 4); color: var(--t2); }
.pv-ct-val { font-size: calc(var(--u) * 9); font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pv-ct-val.pequeno { font-size: calc(var(--u) * 6); }
.pv-ct-col { font-size: calc(var(--u) * 4); color: var(--t2); text-align: right; }
/* loterias */
.pv-loteria { justify-content: flex-start; gap: calc(var(--u) * 1.5); }
.pv-lt-jogo { padding-bottom: calc(var(--u) * 2); border-bottom: 1px solid rgba(127, 127, 127, .3); }
.pv-lt-jogo:last-of-type { border-bottom: 0; }
.pv-lt-nome { font-size: calc(var(--u) * 6); font-weight: 700; }
.pv-lt-conc { font-size: calc(var(--u) * 3.6); color: var(--t2); }
.pv-lt-bolas { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.5); margin: calc(var(--u) * 1.5) 0; }
.pv-lt-bola { width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: 50%; background: var(--marca); color: #fff; display: grid; place-items: center; font-size: calc(var(--u) * 4); font-weight: 700; }
.pv-lt-bolas.extra .pv-lt-bola { width: calc(var(--u) * 6); height: calc(var(--u) * 6); font-size: calc(var(--u) * 3); opacity: .85; }
.pv-lt-sit { font-size: calc(var(--u) * 4.5); font-weight: 700; }
.pv-lt-sit.destaque { color: var(--marca); }
.pv-lt-prox { font-size: calc(var(--u) * 3.6); color: var(--t2); }
/* QR em tela cheia */
.pv-qr { align-items: center; justify-content: center; text-align: center; gap: calc(var(--u) * 3); }
.pv-qr-titulo { font-size: calc(var(--u) * 7); font-weight: 700; }
.pv-qr-box { width: calc(var(--u) * 55); height: calc(var(--u) * 55); background: #fff; padding: calc(var(--u) * 3); box-sizing: border-box; flex: none; }
.pv-qr-box svg, .pv-sob-qr-box svg { width: 100%; height: 100%; display: block; }
.pv-qr-texto { font-size: calc(var(--u) * 4.5); color: var(--t2); }
/* sobreposições */
.pv-sob-relogio { position: absolute; padding: calc(var(--u) * .8) calc(var(--u) * 2); border-radius: calc(var(--u) * 1.5); background: rgba(0, 0, 0, .45); color: #fff;
  font-size: calc(var(--u) * 4); font-weight: 700; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.pv-sob-relogio.inferior_direita { right: calc(var(--u) * 3); bottom: calc(var(--u) * 3); }
.pv-sob-relogio.inferior_esquerda { left: calc(var(--u) * 3); bottom: calc(var(--u) * 3); }
.pv-sob-relogio.inferior_centro { left: 50%; transform: translateX(-50%); bottom: calc(var(--u) * 3); }
.pv-sob-relogio.superior_direita { right: calc(var(--u) * 3); top: calc(var(--u) * 3); }
.pv-sob-relogio.superior_esquerda { left: calc(var(--u) * 3); top: calc(var(--u) * 3); }
.pv-sob-relogio.superior_centro { left: 50%; transform: translateX(-50%); top: calc(var(--u) * 3); }
.pv-sob-relogio.sobe[class*="inferior"] { bottom: calc(var(--u) * 11); }
.pv-sob-qr { position: absolute; width: calc(var(--u) * 22); background: #fff; padding: calc(var(--u) * 1.5); border-radius: calc(var(--u) * 1); }
.pv-sob-qr-box { width: calc(var(--u) * 19); height: calc(var(--u) * 19); }
.pv-sob-qr-titulo { font-size: calc(var(--u) * 2.6); font-weight: 700; color: #000; text-align: center; margin-top: calc(var(--u) * .8); line-height: 1.15; }
.pv-sob-qr.superior_direita { right: calc(var(--u) * 3); top: calc(var(--u) * 3); }
.pv-sob-qr.superior_esquerda { left: calc(var(--u) * 3); top: calc(var(--u) * 3); }
.pv-sob-qr.inferior_direita { right: calc(var(--u) * 3); bottom: calc(var(--u) * 3); }
.pv-sob-qr.inferior_esquerda { left: calc(var(--u) * 3); bottom: calc(var(--u) * 3); }
.pv-sob-qr.sobe { bottom: calc(var(--u) * 11); }
.pv-letreiro { --fundo-let: #5b7cff; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--u) * 8); overflow: hidden; display: flex; align-items: center;
  background: color-mix(in srgb, var(--fundo-let) 92%, transparent); font-size: calc(var(--u) * 4.5); font-weight: 700; white-space: nowrap; }
.pv-let-trilho { display: flex; will-change: transform; }
.pv-let-seg { white-space: pre; }

/* ---------- editor de lista ---------- */
.editor-topo { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-end; }
.editor-nome { flex: 1 1 260px; margin: 0; }
.editor-resumo { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding-bottom: 22px; }
.editor-resumo b { font-size: .92rem; }
.editor-acoes { padding-bottom: 20px; }
.editor-topo .aviso { flex: 1 1 100%; margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.editor-grade { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; align-items: start; }
.editor-grade > * { min-width: 0; }
.biblioteca { position: sticky; top: 76px; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px; box-shadow: var(--sombra);
  max-height: calc(100vh - 96px); display: flex; flex-direction: column; }
.biblioteca-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.biblioteca-filtros { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.biblioteca-filtros select, .biblioteca-filtros input { margin: 0; padding: 8px 10px; }
.biblioteca-filtros .busca { max-width: none; min-width: 0; }
.biblioteca-filtros .busca input { padding-left: 36px; }
.biblioteca-lote { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.biblioteca-lote .check { font-size: .82rem; color: var(--texto-2); }
.bib-lista { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 120px; }
.bib-lista > li.sub { padding: 8px 4px; margin: 0; font-size: .84rem; }
.bib-linha { display: grid; grid-template-columns: 22px 40px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 2px; border-bottom: 1px solid var(--borda); }
.bib-sel { margin: 0; display: grid; place-items: center; }
.bib-sel input { width: 16px; height: 16px; margin: 0; }
.bib-mais { width: 30px; height: 30px; border-radius: 8px; background: color-mix(in srgb, var(--primaria) 14%, transparent); color: var(--primaria); }
.bib-mais:hover { background: color-mix(in srgb, var(--primaria) 26%, transparent); color: var(--primaria); }
.biblioteca .nota { font-size: .76rem; }
.item-mini { width: 40px; height: 40px; border-radius: 7px; background: #05070b; display: grid; place-items: center; overflow: hidden; color: var(--texto-2); border: 1px solid var(--borda-forte); flex: none; }
.item-mini img { width: 100%; height: 100%; object-fit: contain; display: block; }
.item-mini .ic { width: 20px; height: 20px; }
.item-mini.widget { background: color-mix(in srgb, var(--violeta) 18%, #05070b); color: #c4b5fd; }
.item-info { min-width: 0; }
.item-nome { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.item-info small { display: block; color: var(--texto-2); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.itens-cab h3 { display: flex; align-items: center; gap: 8px; }
.itens-cab h3 .ic { color: var(--primaria); }
.itens { list-style: none; margin: 0 0 10px; padding: 0; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; }
.itens:empty { display: none; }
.item-lista { display: grid; grid-template-columns: 26px 24px 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 62px; padding: 6px 10px; border-bottom: 1px solid var(--borda); background: var(--cartao); }
.item-lista:last-child { border-bottom: 0; }
.item-lista .item-mini { width: 48px; height: 48px; }
.item-lista.arrastando { background: var(--cartao-2); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); position: relative; z-index: 2; }
.itens.com-arraste { user-select: none; }
.item-alca { cursor: grab; touch-action: none; background: none; border: 0; color: var(--texto-2); display: grid; place-items: center; padding: 6px 2px; border-radius: 6px; }
.item-alca:hover { color: var(--texto); background: var(--cartao-2); }
.item-alca:active { cursor: grabbing; }
.item-num { font-size: .78rem; font-weight: 700; color: var(--texto-2); text-align: center; }
.item-selos { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.item-ctl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.item-dur { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-weight: 400; font-size: .8rem; color: var(--texto-2); }
.item-dur input { width: 74px; margin: 0; padding: 6px 8px; }
.item-dur input.invalido { border-color: var(--vermelho); }
.item-dur-fixa { font-size: .8rem; color: var(--texto-2); white-space: nowrap; }
.item-som { font-size: .8rem; }
.item-ajuste { width: auto; margin: 0; padding: 6px 8px; font-size: .82rem; }
.itens-vazio { margin-bottom: 10px; }

/* ---------- widgets ---------- */
.gaveta.gaveta-larga { width: min(1040px, 100%); }
.tipos-widget { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tipo-cartao { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px; border-radius: 12px; border: 1px solid var(--borda-forte); background: var(--cartao); color: var(--texto); cursor: pointer; font: inherit; }
.tipo-cartao:hover, .tipo-cartao:focus-visible { border-color: var(--primaria); background: color-mix(in srgb, var(--primaria) 8%, var(--cartao)); }
.tipo-cartao b { font-size: .98rem; }
.tipo-cartao small { color: var(--texto-2); font-size: .82rem; }
.tipo-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--primaria) 14%, transparent); color: var(--primaria); margin-bottom: 4px; }
.widget-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.widget-editor > * { min-width: 0; }
.widget-previa { position: sticky; top: 0; }
.previa-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cores { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.cor-op { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 0; font-weight: 400; cursor: pointer; }
.cor-op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cor-amostra { width: 32px; height: 32px; border-radius: 8px; border: 2px solid var(--borda-forte); display: grid; place-items: center; font-weight: 700; color: var(--texto-2); }
.cor-amostra.outra { background: var(--fundo); }
.cor-op input:checked + .cor-amostra { border-color: #fff; box-shadow: 0 0 0 2px var(--primaria); }
.cor-op input:focus-visible + .cor-amostra { box-shadow: 0 0 0 3px var(--primaria); }
.cor-op small { font-size: .66rem; color: var(--texto-2); }
.contador-txt { float: right; font-weight: 400; color: var(--texto-2); font-size: .78rem; }
.ajudante-whats { margin: 0 0 14px; padding: 10px 12px; border: 1px dashed var(--borda-forte); border-radius: 10px; }
.ajudante-whats summary { cursor: pointer; font-weight: 600; display: flex; gap: 6px; align-items: center; font-size: .88rem; }
.ajudante-whats summary .ic { width: 17px; height: 17px; color: var(--verde); }
.ajudante-whats[open] summary { margin-bottom: 10px; }
.cidade-busca { position: relative; display: block; margin-top: 6px; }
.cidade-busca input { margin-top: 0; }
.sugestoes { position: absolute; left: 0; right: 0; top: 100%; z-index: 6; list-style: none; margin: 4px 0 0; padding: 4px; background: var(--cartao-2); border: 1px solid var(--borda-forte); border-radius: 10px; box-shadow: var(--sombra); max-height: 260px; overflow-y: auto; }
.sugestoes li.sub { margin: 0; padding: 8px 10px; font-size: .84rem; }
.sugestao { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; color: var(--texto); font: inherit; font-weight: 500; border-radius: 8px; cursor: pointer; }
.sugestao:hover, .sugestao:focus-visible { background: color-mix(in srgb, var(--primaria) 14%, transparent); }

/* ---------- programação ---------- */
.prog-hero .selo { vertical-align: middle; }
.blocos { list-style: none; margin: 0 0 8px; padding: 0; }
.bloco-linha { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--borda); }
.bloco-pos { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--fundo); border: 1px solid var(--borda-forte); font-size: .8rem; font-weight: 700; }
.bloco-info { min-width: 0; }
.bloco-info b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bloco-info small { display: block; color: var(--texto-2); margin-top: 3px; }
.bloco-dias { display: inline-flex; gap: 2px; vertical-align: middle; margin-right: 4px; }
.dia { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; font-size: .66rem; font-weight: 700; background: var(--fundo); color: var(--texto-2); opacity: .5; }
.dia.on { background: color-mix(in srgb, var(--primaria) 24%, transparent); color: var(--texto); opacity: 1; }
.blocos-vazio { margin: 0; }
.dias-botoes { display: flex; gap: 6px; flex-wrap: wrap; }
.dia-bt { width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--borda-forte); background: var(--fundo); color: var(--texto-2); font: inherit; font-weight: 700; cursor: pointer; }
.dia-bt.on { background: var(--grad); color: #fff; border-color: transparent; }
.atalhos-dias { margin-top: 8px; }
.modal-bloco { max-width: 540px; max-height: 92vh; overflow-y: auto; }
.modal-bloco h3 { margin-bottom: 14px; }
.modal-bloco .ajuda-hora { margin: -6px 0 14px; }
.agora-txt { font-weight: 600; margin: 0 0 6px; }
.simulador { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; }
.simulador label { margin: 0; }
.simulador input { width: auto; }
.sim-txt { margin: 8px 0 0; font-weight: 600; min-height: 1.2em; }
.avisos-prog { margin: 10px 0 0; padding-left: 18px; color: var(--amarelo); font-size: .86rem; }
.avisos-prog:empty { display: none; }
.musicas { list-style: none; margin: 0 0 10px; padding: 0; }
.musicas > li.sub { margin: 0; padding: 6px 0; }
.musica-linha { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--borda); }
.musica-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.musica-add { margin-bottom: 14px; }
.musica-add select { width: auto; flex: 1 1 200px; min-width: 0; margin: 0; }
.musica-aleat { align-self: center; }
input[type=range] { padding: 0; accent-color: var(--primaria); }
.barra-salvar { position: sticky; bottom: 0; z-index: 15; display: flex; align-items: center; justify-content: flex-end; gap: 10px 12px; flex-wrap: wrap; padding: 12px 16px; margin: 8px 0 0;
  background: color-mix(in srgb, var(--fundo-2) 92%, transparent); border: 1px solid var(--borda-forte); border-radius: 14px; backdrop-filter: blur(10px); }
.barra-salvar .aviso { margin: 0; flex: 1 1 100%; }
.barra-salvar .selo { margin-right: auto; }

/* ---------- publicar ---------- */
.pub-lista { list-style: none; margin: 0 0 14px; padding: 0; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; }
.pub-linha { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 11px 14px; border-bottom: 1px solid var(--borda); }
.pub-linha:last-child { border-bottom: 0; }
.pub-linha.marcada { background: color-mix(in srgb, var(--primaria) 8%, transparent); }
.pub-linha.recusada { background: color-mix(in srgb, var(--vermelho) 5%, transparent); }
.pub-sel { margin: 2px 0 0; }
.pub-sel input { width: 18px; height: 18px; margin: 0; }
.pub-info { min-width: 0; }
.pub-info small { display: block; color: var(--texto-2); font-size: .8rem; }
.pub-avisos { margin: 6px 0 0; padding-left: 18px; font-size: .8rem; color: var(--amarelo); }
.pub-avisos.erro { color: var(--vermelho); }
.pub-estado { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.barra-publicar { position: sticky; bottom: 12px; z-index: 15; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; background: var(--cartao-2);
  border: 1px solid var(--borda-forte); border-radius: 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, .4); }
.barra-publicar .sub { margin: 0; }
.acomp-lista { list-style: none; margin: 0 0 14px; padding: 0; }
.acomp-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.acomp-linha progress { grid-column: 1 / -1; }

/* ---------- tela: conteúdo e local ---------- */
.conteudo-tela progress { margin-top: 6px; }
.conteudo-tela .dados dd .bloco { margin-top: 4px; }
.falhos { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--amarelo) 40%, transparent); background: color-mix(in srgb, var(--amarelo) 8%, transparent); font-size: .86rem; }
.falhos b { display: inline-flex; align-items: center; gap: 6px; }
.falhos .ic { width: 16px; height: 16px; color: var(--amarelo); }
.falhos ul { margin: 6px 0 0; padding-left: 18px; }

@media (max-width: 1180px) {
  .editor-grade { grid-template-columns: 300px minmax(0, 1fr); }
  .widget-editor { grid-template-columns: minmax(0, 1fr); }
  .widget-previa { position: static; }
}
@media (max-width: 860px) {
  .editor-grade { grid-template-columns: minmax(0, 1fr); }
  .biblioteca { display: none; position: fixed; inset: auto 0 0 0; top: auto; z-index: 46; max-height: 86vh; border-radius: 16px 16px 0 0; box-shadow: 0 -18px 50px rgba(0, 0, 0, .5); }
  .biblioteca.aberta { display: flex; }
  .editor-resumo, .editor-acoes { padding-bottom: 0; }
  .editor-acoes { width: 100%; }
  .editor-acoes .btn { flex: 1 1 auto; }
  .item-lista { grid-template-columns: 22px 48px minmax(0, 1fr); gap: 8px 10px; padding: 8px 10px; }
  .item-alca { display: none; }
  .item-ctl { grid-column: 1 / -1; justify-content: flex-start; }
  .tipos-widget { grid-template-columns: minmax(0, 1fr); }
  .bloco-linha { grid-template-columns: 30px minmax(0, 1fr); }
  .bloco-linha .acoes { grid-column: 2; }
  .pub-linha { grid-template-columns: 26px minmax(0, 1fr); }
  .pub-estado { grid-column: 2; align-items: flex-start; }
  .acomp-linha { grid-template-columns: minmax(0, 1fr) auto; }
  .acomp-linha .pub-info { grid-column: 1 / -1; }
  .barra-salvar { justify-content: stretch; padding: 8px 10px; gap: 6px; }
  .barra-salvar .acoes { width: 100%; gap: 6px; }
  .barra-salvar .acoes .btn { flex: 1 1 40%; padding: 8px 10px; font-size: .84rem; }
  .barra-salvar .acoes [data-p-copiar] { order: 3; flex-basis: 100%; padding: 4px; border: 0; background: none; font-weight: 500; color: var(--texto-2); }
  .barra-publicar { flex-wrap: wrap; }
  .barra-publicar .btn { width: 100%; }
  .pv-info { flex-basis: 100%; order: 9; }
}

/* =====================================================================
   Revisão 04/10 (Fase 2): Primeiros passos no Início do cliente, "Publicar agora" no editor da Programação, resultado do
   "Atualizar agora" na linha, "Passar na tela…" da lista, tabela de Widgets em uma linha, detalhes da mídia em 2 linhas
   e alvos de toque de 44 px no celular (↑ ↓ ✕ da lista e da música)
   ===================================================================== */
.modal p { white-space: pre-line; }
.modal-usar { max-width: 540px; max-height: 92vh; overflow-y: auto; }
.modal-usar h3 { margin-bottom: 8px; }
.modal-usar .acoes { flex-wrap: wrap; }
.prog-pendente { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin: 8px 0 0; }
.prog-pendente .sub { margin: 0; }
.acomp-msg { grid-column: 1 / -1; font-size: .8rem; }
.acomp-msg.ok { color: var(--verde); }
.acomp-msg.erro { color: var(--vermelho); font-weight: 600; }
.primeiros-passos .topo-secao { margin-bottom: 10px; }
.primeiros-passos h3 .ic { width: 19px; height: 19px; vertical-align: -3px; color: var(--primaria); }
.passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.passo { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--borda); border-radius: 12px; background: var(--fundo); min-width: 0; }
.passo.agora { border-color: var(--primaria); background: color-mix(in srgb, var(--primaria) 8%, var(--fundo)); }
.passo.feito { opacity: .72; }
.passo-num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--cartao-2); border: 1px solid var(--borda-forte); font-weight: 700; font-size: .86rem; }
.passo-num .ic { width: 18px; height: 18px; color: var(--verde); }
.passo.agora .passo-num { background: var(--grad); color: #fff; border-color: transparent; }
.passo-txt b { display: block; font-size: .92rem; }
.passo-txt small { display: block; color: var(--texto-2); font-size: .8rem; }
.passo .btn { align-self: flex-start; margin-top: auto; }
.lista-widgets .conta-link { text-align: left; }
.item-ordem { display: inline-flex; align-items: center; gap: 6px; }
.bib-linha .item-info small { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
@media (min-width: 861px) {
  .lista-widgets td.acoes-linha { white-space: nowrap; width: 1%; }
  .lista-widgets td[data-rot="Nome"] { min-width: 13em; }
}
@media (max-width: 1180px) {
  .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .passos { grid-template-columns: minmax(0, 1fr); }
  .passo { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .passo-txt { flex: 1 1 160px; min-width: 0; }
  .passo .btn { margin-top: 0; min-height: 40px; }
  .midia-info small { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  /* alvo de toque: ↑ ↓ ✕ e Som com 44 px; o ✕ (tirar) longe das setas */
  .item-ctl { gap: 6px; }
  .item-ctl .btn-mini, .musica-linha .btn-mini { min-width: 44px; min-height: 44px; border: 1px solid var(--borda-forte); border-radius: 10px; background: var(--fundo); }
  .item-ctl .btn-mini .ic, .musica-linha .btn-mini .ic { width: 20px; height: 20px; }
  .item-ordem { gap: 6px; margin-left: auto; }
  .item-ctl .btn-mini.perigo, .musica-linha .btn-mini.perigo { margin-left: 10px; color: var(--vermelho); }
  .musica-linha .acoes { justify-content: flex-end; }
  .item-dur input { width: 58px; padding: 6px; }
  .item-ctl .item-ajuste { padding: 6px; }
  .item-ctl .item-som { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--borda-forte); border-radius: 10px; }
  .item-ctl .item-ajuste, .item-dur input { min-height: 44px; }
  .musica-linha { grid-template-columns: 30px minmax(0, 1fr); }
  .musica-linha .acoes { grid-column: 1 / -1; display: flex; gap: 8px; }
  .musica-linha .btn-mini { font-size: 1.05rem; }
  .barra-salvar .acoes [data-p-copiar] { min-height: 44px; }
  .lista-widgets [data-widget-editar].btn-link { min-height: 40px; display: inline-flex; align-items: center; }
  .acomp-msg { grid-column: 1 / -1; }
}

/* envio GUIADO (05/10/2026, pedido do dono): 1) o que é, 2) para qual TV, medida certa e alerta da margem (overscan) */
.envio-guia .escolhas { margin-bottom: 12px; }
.envio-guia .escolhas legend { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.envio-guia .guia-sub { margin: -4px 0 8px; font-size: .8rem; }
.escolhas-grade.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.escolha > span > .ic { width: 22px; height: 22px; color: var(--primaria); margin-bottom: 4px; }
.guia-dica { display: block; margin-top: 6px; font-size: .8rem; color: var(--amarelo); }
.guia-dica:empty { display: none; }
.medida-certa { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 12px; margin: 0 0 12px; font-size: .86rem;
  border: 1px solid color-mix(in srgb, var(--verde) 40%, transparent); background: color-mix(in srgb, var(--verde) 9%, transparent); }
.medida-certa .medida-num { font-size: 1.35rem; font-weight: 700; letter-spacing: .02em; color: var(--verde); }
.medida-certa .medida-polegadas { color: var(--texto-2); font-size: .8rem; }
.alerta-margem { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; border-radius: 12px; margin: 0 0 14px; font-size: .86rem;
  border: 1px solid color-mix(in srgb, var(--amarelo) 55%, transparent); background: color-mix(in srgb, var(--amarelo) 11%, transparent); }
.alerta-margem p { margin: 0 0 6px; line-height: 1.45; }
.alerta-margem p:last-child { margin-bottom: 0; }
.alerta-margem .titulo { display: flex; align-items: center; gap: 6px; color: var(--amarelo); margin-bottom: 6px; }
.alerta-margem .titulo .ic { width: 18px; height: 18px; flex: none; }
.margem-desenho { position: relative; width: 96px; height: 54px; margin-top: 2px; border: 2px solid var(--texto-2); border-radius: 5px;
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--vermelho) 35%, transparent) 0 4px, transparent 4px 8px); }
.margem-desenho.vertical { width: 54px; height: 96px; }
.margem-desenho::before { content: ""; position: absolute; top: 9%; bottom: 9%; left: 9%; right: 9%; border: 1.5px dashed var(--verde); background: var(--cartao); border-radius: 2px; }
.margem-desenho span { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; font-size: .58rem; line-height: 1.1; text-align: center; color: var(--verde); font-weight: 600; }
.guia-passo3 { display: flex; align-items: center; margin: 4px 0 8px; }
.envio-guia .aviso.erro { margin-bottom: 10px; }
.soltar.bloqueada { opacity: .5; }
.soltar.bloqueada .btn { filter: grayscale(.6); }
.fila-medida { margin: 4px 0 2px; }
@media (max-width: 520px) {
  .escolhas-grade.tres { grid-template-columns: 1fr; }
  .alerta-margem { grid-template-columns: 1fr; }
}

/* LISTA com a posição da TV (05/10/2026, pedido do dono): selo "Para TV deitada/em pé", escolha na lista nova e nas antigas,
   "Tela cheia" no item que tem o formato da TV, "ver também" na biblioteca, "Enviar novo arquivo" e TV travada no Passar na tela */
.selo-tv { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 8px; border-radius: 99px; font-size: .78rem; font-weight: 600;
  color: var(--primaria); border: 1px solid color-mix(in srgb, var(--primaria) 40%, transparent); background: color-mix(in srgb, var(--primaria) 10%, transparent); white-space: nowrap; }
.selo-tv .mini-tv { display: inline-block; width: 18px; height: 12px; margin: 0; border-width: 1.5px; border-radius: 3px; border-color: currentColor; }
.selo-tv .mini-tv.vertical { width: 12px; height: 18px; }
.selo-tv .mini-tv::after { border-left-width: 3px; border-right-width: 3px; border-bottom-width: 4px; }
.lista-ori { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lista-ori:empty { display: none; }
.lista-ori .btn-link { font-size: .8rem; }
.item-cheio { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 8px; font-size: .8rem; font-weight: 600;
  color: var(--verde); border: 1px solid color-mix(in srgb, var(--verde) 40%, transparent); background: color-mix(in srgb, var(--verde) 9%, transparent); }
.item-cheio::before { content: "✓"; }
.bib-enviar { width: 100%; justify-content: center; margin: 0 0 8px; }
.bib-outras { margin: 6px 2px 0; font-size: .8rem; color: var(--texto-2); line-height: 1.4; }
.bib-outras .btn-link { font-size: .8rem; text-align: left; }
.bib-linha .selo { margin-top: 3px; }
.check.travado { opacity: .55; cursor: not-allowed; }
.modal.modal-nova-lista { max-width: 520px; }
.modal-nova-lista h3 { margin: 0 0 8px; }
.modal-nova-lista .escolhas { margin: 12px 0 6px; }
.modal-nova-lista .escolhas legend { font-weight: 600; margin-bottom: 8px; }
.modal-nova-lista .escolhas-grade { grid-template-columns: 1fr 1fr; }
.modal-nova-lista .aviso { margin: 8px 0 0; }
.envio-para-lista { margin-bottom: 14px; }
@media (max-width: 420px) { .modal-nova-lista .escolhas-grade { grid-template-columns: 1fr; } }

/* PREPARO para a TV (05/10/2026): linha do vídeo que está na fila do preparo */
.midia-linha.preparando { opacity: .85; }
.midia-linha.preparando .midia-mini { cursor: default; }
.selo-preparando { animation: pulsar-prep 1.6s ease-in-out infinite; }
@keyframes pulsar-prep { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .selo-preparando { animation: none; } }

/* NOME OBRIGATÓRIO ao enviar (05/10/2026): campo de nome em cada arquivo da fila */
.fila-nome-campo { display: flex; flex-direction: column; gap: 3px; margin: 0 0 4px; font-weight: 400; min-width: 0; }
.fila-nome-campo input { margin: 0; padding: 7px 10px; font-size: .9rem; font-weight: 600; }
.fila-nome-campo.com-erro input { border-color: var(--vermelho); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vermelho) 20%, transparent); }
.fila-arquivo { color: var(--texto-2); font-size: .74rem; overflow-wrap: anywhere; }

/* ENVIAR DENTRO DA PLAYLIST (05/10/2026): botão grande abaixo dos itens + "Trocar" em cada foto/vídeo */
.itens-enviar { width: 100%; justify-content: center; margin: 12px 0 4px; padding: 12px 16px; font-size: .95rem; }
.item-trocar { white-space: nowrap; }
.item-trocar .ic { width: 15px; height: 15px; }

/* TROCAR / ENVIAR PELA PLAYLIST SOZINHO (06/10/2026, pedido do dono): linha do destino na fila, dica do nome opcional,
   faixa "preparando" no editor da playlist e rodapé da gaveta inteiro no celular */
.fila-destino { margin-top: 4px; font-size: .8rem; font-weight: 600; color: var(--texto-2); overflow-wrap: anywhere; }
.fila-destino.aplicado { color: var(--verde); }
.fila-destino.pendente { color: var(--primaria); }
.fila-destino.nao_feito { color: var(--amarelo); }
.fila-nome-dica { font-style: italic; }
.destino-pendente { margin-bottom: 12px; }
[data-guia-tv-fixa] { flex-wrap: wrap; }
@media (max-width: 600px) {
  .gaveta-pe { flex-wrap: wrap; }
  .gaveta-pe .sub { flex: 1 1 100%; }
  .gaveta-pe .btn { flex: 1 1 auto; min-width: 0; white-space: normal; text-align: center; line-height: 1.25; }
}

/* ENVIADOR DA PLAYLIST (07/10/2026, pedido do dono: "fica aparecendo esse pop up ... ele fica me mandando para a área de fotos e
   vídeos"): Trocar / Enviar sem sair da playlist (assets/enviador-lista.js) — modal pequeno com miniatura, nome, barra e o que
   aconteceu; no celular sobe de baixo ocupando a largura toda (bottom sheet); brilho verde de 2 s no item trocado e o selo
   "Preparando o vídeo novo…" (a animação de piscar é a .selo-preparando de cima). Só blocos novos. */
.env-arquivo { position: fixed; left: -10000px; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.modal.env-modal { max-width: 440px; max-height: 92vh; overflow-y: auto; overflow-x: hidden; }
.env-modal h3 { margin: 0 0 14px; overflow-wrap: anywhere; }
.env-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.env-linha { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; min-width: 0; padding: 8px;
  border: 1px solid var(--borda); border-radius: 12px; background: var(--fundo); }
.env-linha.atual { border-color: color-mix(in srgb, var(--primaria) 45%, transparent); }
.env-mini { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; flex: none;
  background: var(--cartao-2); border: 1px solid var(--borda-forte); color: var(--texto-2); }
.env-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.env-mini .ic { width: 24px; height: 24px; }
.env-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.env-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.env-sub { color: var(--texto-2); font-size: .78rem; }
.env-estado { font-size: .84rem; font-weight: 600; color: var(--texto-2); overflow-wrap: anywhere; }
.env-linha.ok .env-estado { color: var(--verde); }
.env-linha.pendente .env-estado { color: var(--primaria); }
.env-linha.aviso .env-estado { color: var(--amarelo); }
.env-linha.erro .env-estado { color: var(--vermelho); }
.env-barra { width: 100%; height: 8px; margin-top: 4px; accent-color: var(--primaria); }
.env-modal .env-msg { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; font-size: .88rem; line-height: 1.45; overflow-wrap: anywhere;
  border: 1px solid var(--borda-forte); background: var(--cartao-2); white-space: pre-line; }
.env-modal .env-msg.ok { border-color: color-mix(in srgb, var(--verde) 45%, transparent); background: color-mix(in srgb, var(--verde) 11%, transparent); }
.env-modal .env-msg.aviso { border-color: color-mix(in srgb, var(--amarelo) 50%, transparent); background: color-mix(in srgb, var(--amarelo) 10%, transparent); }
.env-modal .env-msg.erro { border-color: color-mix(in srgb, var(--vermelho) 45%, transparent); background: color-mix(in srgb, var(--vermelho) 10%, transparent); }
.env-modal .env-acoes { margin-top: 16px; }
.item-lista.item-trocado { animation: brilho-trocado 2s ease-out; }
@keyframes brilho-trocado {
  0%, 40% { background: color-mix(in srgb, var(--verde) 22%, var(--cartao)); box-shadow: inset 4px 0 0 var(--verde); }
  100% { background: var(--cartao); box-shadow: inset 0 0 0 transparent; }
}
.item-selos .selo-preparando { color: var(--primaria); }
@media (prefers-reduced-motion: reduce) { .item-lista.item-trocado { animation: none; background: color-mix(in srgb, var(--verde) 14%, var(--cartao)); } }
@media (max-width: 600px) {
  .modal-fundo.env-fundo { place-items: end stretch; padding: 0; }
  .modal.env-modal { max-width: none; width: 100%; max-height: 88vh; border-radius: 16px 16px 0 0; border-bottom: 0;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .env-modal .env-acoes .btn { flex: 1 1 auto; min-height: 44px; }
}
/* 07/10: com a janela de envio da playlist aberta, os avisos rápidos (toast) não cobrem o botão OK (visto no celular) */
body:has(.env-modal) .toast { display: none; }

/* 07/10/2026 (pedido do dono): JANELA DO TROCAR ("já liga o alerta nas medidas, tem nosso alerta sempre": nome opcional, medida certa,
   alerta da margem, [Cancelar] [Escolher foto] = <label for> do campo de arquivo — assets/enviador-lista.js trocar()) e JANELA DE WIDGET
   ("Editar" do item de informação, só nesta playlist · "Personalizar" do letreiro / QR do canto em Horários, só nesta TV —
   assets/widget-janela.js). No celular as duas sobem de baixo, na largura toda (bottom sheet), como a do envio. Só blocos novos. */
.modal.env-janela { max-width: 520px; max-height: 92vh; overflow-y: auto; overflow-x: hidden; }
.env-janela h3 { margin: 0 0 14px; overflow-wrap: anywhere; }
.env-janela .env-janela-nome { margin-bottom: 12px; }
.env-janela .medida-certa, .env-janela .alerta-margem { margin-bottom: 12px; }
.modal .env-janela-salva { margin: 0 0 4px; font-size: .86rem; font-weight: 600; color: var(--amarelo); }
.env-janela .env-janela-acoes { margin-top: 16px; }
.env-janela-acoes label.btn { margin: 0; }
.env-escolher:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }
.modal.wj-modal { max-width: 560px; max-height: 92vh; overflow-y: auto; overflow-x: hidden; }
.wj-modal h3 { margin: 0 0 6px; overflow-wrap: anywhere; }
.modal .wj-nota { margin: 0 0 14px; font-size: .84rem; }
.wj-modal .wj-check { margin-bottom: 10px; }
.wj-modal .cidade-busca .sugestoes { position: static; max-height: 200px; }
.wj-modal .contador-txt { float: right; font-weight: 400; font-size: .78rem; color: var(--texto-2); }
.modal .wj-erro { margin: 12px 0 0; }
.modal .wj-salva { margin: 12px 0 0; font-size: .86rem; font-weight: 600; color: var(--amarelo); }
.wj-modal .wj-acoes { margin-top: 16px; }
.item-editar { white-space: nowrap; }
.item-editar .ic { width: 15px; height: 15px; }
.item-selos .selo-personalizado { white-space: nowrap; }
.p-personalizar { margin: -6px 0 14px; }
@media (max-width: 600px) {
  .modal-fundo.env-janela-fundo, .modal-fundo.wj-fundo { place-items: end stretch; padding: 0; }
  .modal.env-janela, .modal.wj-modal { max-width: none; width: 100%; max-height: 88vh; border-radius: 16px 16px 0 0; border-bottom: 0;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .env-janela .env-janela-acoes .btn, .wj-modal .wj-acoes .btn { flex: 1 1 auto; min-height: 44px; }
}
/* 06/10: o mesmo para a janela de editar widget / personalizar (os avisos rápidos não cobrem o Salvar no celular) */
body:has(.wj-modal) .toast { display: none; }

/* 06/10/2026 (pedido do dono, FASE 1 do redesenho para pessoas de idade: "muitas etapas dificulta"): cartão "Onde e quando passa" do
   editor da playlist (lista.php + listas.js) e as TVs do "Em quais TVs vai passar?" da Nova playlist. Só blocos novos. */
.onde-quando .oq-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 10px; }
.onde-quando .oq-topo h3 { margin: 0; }
.oq-resumo { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; }
.oq-resumo .oq-linha { margin: 0; flex: 1 1 280px; min-width: 0; font-size: 1rem; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.oq-resumo .oq-linha.oq-nenhuma { font-weight: 500; color: var(--texto-2); }
.oq-notas { flex: 1 1 100%; margin: 0; padding-left: 18px; font-size: .86rem; color: var(--amarelo); }
.oq-form { margin-top: 14px; }
.oq-form fieldset { margin-bottom: 12px; min-width: 0; }
.oq-tvs .check, .oq-quando .check { font-size: .95rem; align-items: flex-start; }
.oq-tvs .check input, .oq-quando .check input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--primaria); }
.oq-tvs .check > span { min-width: 0; overflow-wrap: anywhere; }
.oq-tv-extra { display: block; margin-top: 2px; font-size: .8rem; color: var(--texto-2); }
.oq-tvs .check.travado, .nova-lista-tvs .check.travado { opacity: .6; cursor: not-allowed; }
.oq-horarios { margin: 10px 0 0 28px; }
.oq-quando .oq-dias { gap: 8px 16px; margin-bottom: 10px; }
.oq-horas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; font-size: .92rem; }
.oq-horas input { width: auto; margin: 0; }
.oq-form .oq-nota { margin: 0 0 10px; }
.oq-form .oq-previa { margin: 0 0 10px; font-weight: 600; overflow-wrap: anywhere; }
.oq-form .aviso { margin: 0 0 10px; }
.oq-acoes { justify-content: space-between; }
.oq-acoes .sub { margin: 0; flex: 1 1 220px; font-size: .84rem; }
.nova-lista-tvs .checks { max-height: 220px; overflow-y: auto; margin-bottom: 6px; }
.nova-lista-tvs .check { align-items: flex-start; }
.nova-lista-tvs .check input { margin-top: 2px; flex: none; }
@media (max-width: 600px) {
  .oq-horarios { margin-left: 0; }
  .oq-resumo .btn { width: 100%; min-height: 44px; }
  .oq-acoes .btn { width: 100%; min-height: 44px; }
}
/* 06/10 (revisao): o "Nova playlist" ficou mais alto com "Em quais TVs vai passar?": no celular pequeno o fim (Criar e abrir / Cancelar)
   saía da tela sem rolagem. Mesma regra dos outros modais altos (.modal-usar, .modal-bloco, .env-modal, .wj-modal). */
.modal.modal-nova-lista { max-height: 92vh; overflow-y: auto; }

/* 06/10/2026 (pedido do dono, FASE 2 do redesenho para pessoas de idade): cartão "Por cima de tudo nesta TV" da página da TV (tela.php +
   tela-extras.js) — faixa, QR fixo no canto, relógio no canto e música de fundo num lugar só; e a nota da Agenda que leva para a TV.
   Só blocos novos. */
.tv-extras .sub { margin-bottom: 12px; }
.tv-extras-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 0 18px; align-items: start; }
.tv-extras-grade > * { min-width: 0; }
.tv-extra legend { display: inline-flex; align-items: center; gap: 6px; font-size: .95rem; }
.tv-extra legend .ic { width: 17px; height: 17px; color: var(--primaria); }
.tv-extra select { margin-bottom: 4px; }
.tv-extra .msg-campo { display: block; margin-bottom: 8px; }
.tv-extra .check { margin: 6px 0 10px; font-size: .95rem; }
.tv-extra .check input { width: 20px; height: 20px; flex: none; accent-color: var(--primaria); }
.tv-extra-acoes { margin-top: 4px; }
.tv-musicas { max-height: 220px; overflow-y: auto; margin-bottom: 10px; display: flex; flex-direction: column; gap: 2px; }
.tv-musicas .check { margin: 4px 0; align-items: flex-start; }
.tv-musicas .tv-musica-nome { min-width: 0; overflow-wrap: anywhere; flex: 1 1 auto; }
.tv-musicas .sub { margin: 0; }
.tv-volume { margin-top: 12px; }
.tv-extras-resultado p { margin: 0 0 8px; overflow-wrap: anywhere; }
.tv-extras-resultado p:first-child { font-weight: 600; }
.tv-extras-acoes { justify-content: flex-end; }
.agenda-extras-nota { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; }
.agenda-extras-nota p { margin: 0; flex: 1 1 260px; min-width: 0; }
@media (max-width: 600px) {
  .tv-extras-acoes .btn, .tv-extra-acoes .btn, .agenda-extras-nota .btn { width: 100%; min-height: 44px; justify-content: center; }
  .tv-extras-acoes .selo { width: 100%; justify-content: center; }
}

/* 06/10/2026 (pedido do dono, aprovado com "faz"): PRÉVIA AO VIVO — "Assim fica na TV" no alto da coluna dos itens da playlist (lista.php +
   listas.js) e "Assim fica nesta TV" ao lado do "Por cima de tudo nesta TV" (tela.php + tela-extras.js). O player é o MESMO previa.js
   (.pv…); aqui só o tamanho e o lugar. Só blocos novos. */
.previa-ao-vivo { padding: 12px 14px; margin-bottom: 14px; }
.pav-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pav-topo h3 { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.pav-topo h3 .ic, .tv-previa h3 .ic { color: var(--primaria); }
.pav-corpo { display: flex; gap: 10px 16px; align-items: flex-start; flex-wrap: wrap; }
.pav-player { flex: none; width: min(100%, 380px, calc(30vh * 16 / 9)); min-width: 0; }
.previa-ao-vivo.pav-v .pav-player { width: min(100%, 300px); }
.previa-ao-vivo .pv { gap: 6px; }
.previa-ao-vivo .pv-tela.v { width: min(100%, calc(min(34vh, 320px) * 9 / 16)); }
.pav-lado { flex: 1 1 160px; min-width: 0; }
.pav-lado .sub { margin: 0 0 6px; font-size: .86rem; }
.pav-lado .nota { margin: 0; font-size: .8rem; }
@media (min-width: 861px) {
  /* computador: presa no alto da coluna dos itens ao rolar (abaixo da barra de cima, como a biblioteca) */
  .previa-ao-vivo { position: sticky; top: 76px; z-index: 5; }
}
@media (max-width: 860px) {
  .pav-corpo { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .pav-player { width: min(100%, 340px); margin: 0 auto; }
  .previa-ao-vivo.pav-v .pav-player { width: min(100%, 300px); }
  .previa-ao-vivo .pv-tela.v { width: min(100%, calc(min(40vh, 300px) * 9 / 16)); }
  .pav-lado .sub { display: none; }
  .previa-ao-vivo.pav-escondida .pav-corpo { display: none; }
  .previa-ao-vivo.pav-escondida .pav-topo { margin-bottom: 0; }
  .pav-alternar { min-height: 40px; }
}
.tv-previa-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 18px; align-items: start; }
.tv-previa-grade > * { min-width: 0; }
.tv-previa h3 { display: flex; align-items: center; gap: 8px; }
.tv-previa .tv-previa-agora { margin: 0 0 10px; font-weight: 600; overflow-wrap: anywhere; }
.tv-previa-player { width: min(100%, 520px); margin: 0 auto; }
.tv-previa .pv-tela.v { width: min(100%, calc(min(44vh, 400px) * 9 / 16)); }
.tv-previa-sem { margin: 10px 0 0; }
.tv-previa-sem p { margin: 0 0 8px; overflow-wrap: anywhere; }
.tv-previa-nota { margin: 10px 0 0; }
@media (min-width: 1000px) {
  /* computador largo: a prévia à direita do "Por cima de tudo nesta TV", presa no alto ao rolar */
  .tv-previa-grade { grid-template-columns: minmax(0, 1fr) clamp(300px, 30vw, 400px); }
  .tv-previa-grade > .tv-previa { grid-column: 2; grid-row: 1; position: sticky; top: 76px; }
  .tv-previa-grade > .tv-extras { grid-column: 1; grid-row: 1; }
  .tv-previa-player { width: 100%; }
}

/* ---------- 07/10 (pedido do dono): Baixar o app (baixar.php) ---------- */
.ba-principal { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: center; }
.ba-principal > * { min-width: 0; }
.ba-principal h3 { margin-top: 0; }
.ba-versao { margin: 0 0 14px; font-size: 1.05rem; }
.ba-versao b { font-size: 1.25rem; }
.ba-tamanho { color: var(--texto-2); }
.btn.ba-grande { padding: 15px 26px; font-size: 1.12rem; border-radius: 12px; }
.btn.ba-grande .ic { width: 22px; height: 22px; }
.ba-rotulo { margin: 20px 0 8px; font-weight: 600; }
.ba-endereco-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ba-endereco { flex: 0 1 auto; min-width: 0; font: 700 clamp(1.02rem, 4.4vw, 1.45rem)/1.35 ui-monospace, Consolas, monospace; letter-spacing: .01em;
  background: var(--fundo); border: 2px solid color-mix(in srgb, var(--primaria) 55%, var(--borda-forte)); border-radius: 10px; padding: 9px 14px;
  color: var(--texto); overflow-wrap: anywhere; user-select: all; }
.ba-nota { margin-top: 8px; }
.ba-principal-qr { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ba-principal-qr .nota { max-width: 236px; }
.ba-qr { width: 200px; height: 200px; }
.ba-atualizar { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; margin: 0 0 18px;
  border: 2px solid color-mix(in srgb, var(--amarelo) 60%, transparent); background: color-mix(in srgb, var(--amarelo) 12%, var(--cartao)); line-height: 1.5; }
.ba-atualizar > .ic { width: 24px; height: 24px; flex: none; color: var(--amarelo); margin-top: 1px; }
.ba-atualizar > div { min-width: 0; }
.ba-atualizar b { color: var(--texto); }
.ba-atualizar span { display: block; margin-top: 4px; color: var(--texto-2); }
.ba-grade > * { min-width: 0; }
.ba-passos { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 12px; }
.ba-passos li { padding-left: 4px; color: var(--texto-2); line-height: 1.5; overflow-wrap: anywhere; }
.ba-passos li::marker { color: var(--primaria); font-weight: 700; }
.ba-passos li > b:first-child { color: var(--texto); }
.ba-passos li small { display: block; margin-top: 3px; font-size: .84rem; }
.ba-passos .ba-inline { color: var(--texto); }
.ba-end-mini { font: 600 .92em/1.4 ui-monospace, Consolas, monospace; color: var(--texto); background: var(--fundo); border: 1px solid var(--borda-forte);
  border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; }
.ba-depois p { margin: 0 0 12px; line-height: 1.5; }
.ba-depois .btn { white-space: normal; }
@media (max-width: 860px) {
  .ba-principal { grid-template-columns: minmax(0, 1fr); }
  .btn.ba-grande { width: 100%; }
  .ba-principal-qr { border-top: 1px solid var(--borda); padding-top: 16px; }
}
/* 07/10 (revisão): aviso "não instale no celular" logo abaixo do botão de baixar. */
.ba-aviso-botao { margin: 8px 0 0; max-width: 46ch; }

/* ---------- 07/10 (pedido do dono): lista de revendas (revendas.php + assets/revendas.js). Só blocos novos (.rv-*). ---------- */
.rv-topo { align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.rv-topo-txt { min-width: 0; }
.rv-contagem { margin: 0 0 4px; font-size: 1.02rem; }
.rv-contagem b { font-size: 1.15rem; }
.rv-topo .sub { margin: 0; }
.rv-topo-acoes { margin-left: auto; }
.rv-filtros { display: grid; grid-template-columns: minmax(220px, 2.2fr) minmax(110px, .8fr) repeat(3, minmax(130px, 1fr)) auto; gap: 10px 12px; align-items: end; padding: 16px 18px; }
.rv-filtros > * { min-width: 0; }
.rv-f { margin: 0; }
.rv-rot { display: block; font-size: .72rem; font-weight: 600; color: var(--texto-2); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.rv-f input, .rv-f select { margin: 0; width: 100%; }
.rv-f .busca { display: block; max-width: none; min-width: 0; }
.rv-f-acoes { flex-wrap: nowrap; }
.rv-tabela .num { text-align: right; }
.rv-n { color: var(--texto-2); font-variant-numeric: tabular-nums; }
.rv-nome .conta-link { font-weight: 600; }
.rv-nome .bloco { overflow-wrap: anywhere; }
.rv-dentro { font-size: .76rem; }
.rv-tv { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rv-tv-rede { color: var(--texto-2); font-size: .84rem; }
.rv-wa { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; color: var(--texto); white-space: nowrap; }
.rv-wa .ic { width: 15px; height: 15px; color: var(--verde); }
.rv-wa:hover { color: var(--verde); }
.rv-cred b { font-variant-numeric: tabular-nums; }
.rv-ult { white-space: nowrap; }
.rv-tabela th.rv-col-acoes, .rv-tabela th.num { text-align: right; }
.rv-acoes { text-align: right; white-space: nowrap; }
.rv-acoes > * { vertical-align: middle; margin-left: 6px; }
.rv-mais { display: inline-block; position: relative; }
.rv-mais > summary { list-style: none; padding-left: 9px; padding-right: 9px; }
.rv-mais > summary::-webkit-details-marker { display: none; }
.rv-pontos { font-size: 1.15rem; line-height: 1; font-weight: 700; }
.rv-mais[open] > summary { border-color: var(--primaria); color: var(--primaria); }
.rv-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 35; min-width: 210px; display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--cartao); border: 1px solid var(--borda-forte); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .4); text-align: left; white-space: nowrap; }
.rv-menu.fixo { position: fixed; right: auto; }
.rv-menu > .btn, .rv-menu form, .rv-menu form .btn { width: 100%; margin: 0; }
.rv-menu .btn { justify-content: flex-start; border-color: transparent; background: none; }
.rv-menu .btn:hover { background: var(--cartao-2); border-color: var(--borda); }
.tabela tr.inativo td.rv-acoes { opacity: 1; }
/* janelas Créditos / Editar */
body.com-janela { overflow: hidden; }
.modal.rv-modal { max-width: 460px; max-height: 92vh; overflow-y: auto; overflow-x: hidden; padding: 20px 22px; }
.modal.rv-modal-largo { max-width: 640px; }
.rv-modal-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.rv-modal-topo h3 { margin: 0; overflow-wrap: anywhere; }
.rv-modal-topo .btn-mini .ic { width: 20px; height: 20px; }
.rv-saldos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.rv-saldos > div { min-width: 0; padding: 10px 12px; border-radius: 10px; background: var(--fundo); border: 1px solid var(--borda); }
.rv-saldos small { display: block; color: var(--texto-2); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; }
.rv-saldos b { font-size: 1.1rem; overflow-wrap: anywhere; }
.rv-op { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; margin-bottom: 14px; border-radius: 11px; background: var(--fundo-2); border: 1px solid var(--borda); }
.rv-op-item { margin: 0; position: relative; cursor: pointer; }
.rv-op-item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rv-op-item span { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border-radius: 8px; color: var(--texto-2); font-weight: 600; }
.rv-op-item span .ic { width: 17px; height: 17px; }
.rv-op-item input:checked + span { background: color-mix(in srgb, var(--verde) 16%, var(--cartao-2)); color: var(--texto); box-shadow: inset 0 0 0 1px var(--verde); }
.rv-op-item.retirar input:checked + span { background: color-mix(in srgb, var(--amarelo) 16%, var(--cartao-2)); box-shadow: inset 0 0 0 1px var(--amarelo); }
.rv-op-item input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaria) 30%, transparent); }
.modal p.rv-dica { margin: -6px 0 14px; min-height: 1.2em; }
.rv-modal .aviso { margin: 0 0 12px; }
.rv-modal .acoes.rv-modal-acoes { justify-content: flex-end; margin-top: 4px; }
.cr-lista { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
@media (max-width: 1180px) {
  .rv-filtros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rv-f-busca { grid-column: 1 / -1; }
  .rv-f-acoes { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (max-width: 860px) {
  .rv-topo-acoes { margin-left: 0; width: 100%; }
  .rv-topo-acoes .btn { flex: 1 1 auto; }
  .rv-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; }
  .rv-f-acoes .btn { flex: 1 1 auto; }
  /* celular: cada revenda vira um CARTÃO (sem rolagem para o lado) */
  .tabela-wrap.rv-wrap { background: none; border: 0; box-shadow: none; overflow: visible; }
  .tabela.rv-tabela tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 14px; margin-bottom: 12px;
    background: linear-gradient(180deg, var(--cartao-2), var(--cartao)); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
  .tabela.rv-tabela tbody tr:hover { background: linear-gradient(180deg, var(--cartao-2), var(--cartao)); }
  .tabela.rv-tabela td { display: block; width: auto; min-width: 0; padding: 0; overflow-wrap: anywhere; text-align: left; }
  .tabela.rv-tabela td[data-rot]::before { margin-bottom: 1px; font-size: .66rem; }
  .tabela.rv-tabela td.rv-n { order: 1; }
  .tabela.rv-tabela td.rv-sit { order: 2; justify-self: end; }
  .tabela.rv-tabela td.rv-nome { order: 3; grid-column: 1 / -1; font-size: 1.02rem; }
  .tabela.rv-tabela td.rv-cred { order: 4; }
  .tabela.rv-tabela td.rv-tv { order: 5; }
  .tabela.rv-tabela td.rv-whats { order: 6; }
  .tabela.rv-tabela td.rv-ult { order: 7; }
  .tabela.rv-tabela td.rv-acoes { order: 8; grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--borda); white-space: normal; }
  .tabela.rv-tabela td.rv-n::before, .tabela.rv-tabela td.rv-sit::before, .tabela.rv-tabela td.rv-nome::before { display: none; }
  .tabela.rv-tabela td.rv-n { font-weight: 600; }
  .tabela.rv-tabela .rv-cred b { font-size: 1.12rem; }
  .rv-acoes > * { margin: 0; }
  .rv-acoes > .btn { flex: 1 1 auto; min-height: 40px; }
  .rv-mais > summary { min-height: 40px; min-width: 44px; }
  .rv-wa { white-space: normal; }
  .modal-fundo.rv-fundo { place-items: end stretch; padding: 0; }
  .modal.rv-modal, .modal.rv-modal-largo { max-width: none; width: 100%; max-height: 90vh; border-radius: 16px 16px 0 0; border-bottom: 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
  .rv-modal .acoes.rv-modal-acoes .btn { flex: 1 1 auto; min-height: 44px; }
}
@media (max-width: 420px) {
  .rv-filtros { gap: 10px; }
  .rv-f select, .rv-f-n input { padding-left: 10px; padding-right: 8px; }
}

/* 14/10/2026 (pedido do dono): entradas separadas de login (/cliente e /revenda) e o saldo de créditos embaixo do nome */
.titulo-entrada { text-align: center; font-size: 1.15rem; margin: 2px 0 6px; }
.escolha-entrada .btn.cheio + .btn.cheio { margin-top: 10px; }
.eu-saldo { display: flex; width: fit-content; align-items: center; gap: 5px; margin-top: 3px; font-size: .8rem; font-weight: 700; color: var(--violeta); text-decoration: none; }
.eu-saldo .ic { width: 14px; height: 14px; }
.eu-saldo:hover { text-decoration: underline; }

/* ---------- 15/10/2026 (pedido do dono: "tá bem solto, organize, tire os vãos"): página da TV (tela.php) ---------- */
/* fileira de cima com 3 quadrinhos (funcionário não vê o Plano): 3 colunas, sem vão */
.kpis.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .kpis.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* coluna da esquerda: Conteúdo + Por cima de tudo. Celular: Conteúdo, prévia, Por cima (a coluna "some" e os cartões entram na grade) */
.tv-coluna { display: contents; }
.tv-coluna > .conteudo-tela { order: 1; }
.tv-previa-grade > .tv-previa { order: 2; }
.tv-coluna > .tv-extras { order: 3; }
@media (min-width: 1000px) {
  .tv-coluna { display: flex; flex-direction: column; min-width: 0; }
  .tv-previa-grade > .tv-coluna { grid-column: 1; grid-row: 1; }
}
/* itens do "Por cima de tudo": uma linha com título + INTERRUPTOR; ligado abre o corpo */
.tv-extras-lista { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.tv-extra { border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px; background: var(--fundo-2); min-width: 0; }
.tv-extra.ligado { border-color: color-mix(in srgb, var(--verde) 45%, var(--borda)); }
.tv-extra-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tv-extra-tit { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.tv-extra-tit > .ic { width: 22px; height: 22px; color: var(--primaria); flex: none; margin-top: 2px; }
.tv-extra-tit b { display: block; font-size: 1rem; }
.tv-extra-tit small { display: block; color: var(--texto-2); font-size: .82rem; overflow-wrap: anywhere; }
.tv-extra-corpo { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--borda); }
.tv-extra-corpo > label { display: block; }
/* interruptor (liga/desliga) grande, com o texto Ligado/Desligado ao lado */
.interruptor { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; flex: none; margin: 0; user-select: none; position: relative; }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.interruptor-trilho { width: 54px; height: 30px; border-radius: 99px; background: var(--borda-forte); position: relative; transition: background .15s; flex: none; }
.interruptor-trilho::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .15s; }
.interruptor input:checked + .interruptor-trilho { background: var(--verde); }
.interruptor input:checked + .interruptor-trilho::after { transform: translateX(24px); }
.interruptor input:focus-visible + .interruptor-trilho { outline: 2px solid var(--primaria); outline-offset: 2px; }
.interruptor input:disabled + .interruptor-trilho { opacity: .5; }
.interruptor input:disabled ~ .interruptor-txt { opacity: .6; }
.interruptor-txt { font-weight: 700; font-size: .9rem; min-width: 74px; color: var(--texto-2); }
.interruptor input:checked ~ .interruptor-txt { color: var(--verde); }
/* mini TV dos cantos (relógio: 6 lugares · QR: 4 cantos) */
.tv-canto { margin: 4px 0 6px; }
.tv-canto-rot { display: block; font-weight: 600; margin-bottom: 6px; }
.cantos { position: relative; width: 260px; max-width: 100%; aspect-ratio: 16 / 9; border: 3px solid var(--borda-forte); border-radius: 10px; background: var(--fundo); margin-bottom: 6px; }
.cantos-tv { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--texto-2); font-size: .8rem; letter-spacing: .1em; pointer-events: none; }
.canto { position: absolute; width: 64px; height: 30px; border-radius: 7px; border: 1px dashed var(--borda-forte); background: transparent; color: var(--texto-2); font-size: .72rem; font-weight: 700; cursor: pointer; padding: 0; }
.canto:hover:not(:disabled) { border-color: var(--primaria); background: color-mix(in srgb, var(--primaria) 12%, transparent); }
.canto.sel { background: var(--primaria); border: 1px solid var(--primaria); color: #fff; }
.canto.ocupado { border-style: solid; color: var(--texto-2); background: color-mix(in srgb, var(--texto-2) 12%, transparent); }
.canto:disabled { cursor: not-allowed; }
.canto:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }
.c-superior_esquerda { top: 6px; left: 6px; } .c-superior_centro { top: 6px; left: 50%; transform: translateX(-50%); } .c-superior_direita { top: 6px; right: 6px; }
.c-inferior_esquerda { bottom: 6px; left: 6px; } .c-inferior_centro { bottom: 6px; left: 50%; transform: translateX(-50%); } .c-inferior_direita { bottom: 6px; right: 6px; }
@media (max-width: 420px) { .canto { width: 54px; } }
/* "Ajustes da TV": Local, Nome e posição e Aparelho lado a lado, todos da mesma altura */
.tv-secao-tit { display: flex; align-items: center; gap: 8px; margin: 8px 0 12px; }
.tv-secao-tit .ic { width: 20px; height: 20px; color: var(--primaria); }
.tv-ajustes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; align-items: stretch; }
.tv-ajustes > * { min-width: 0; }
/* esquerda: Local + Aparelho empilhados (o Aparelho estica até o fim do "Nome e posição": as duas colunas terminam juntas) */
.tv-ajustes-col { display: flex; flex-direction: column; }
.tv-ajustes-col > #aparelho { flex: 1 1 auto; }
@media (max-width: 760px) { .tv-ajustes { grid-template-columns: minmax(0, 1fr); } }
/* texto longo do estado ("TV desligada — atualiza quando voltar…") quebra a linha em vez de empurrar a página no celular */
.conteudo-tela .selo { white-space: normal; }
/* celular: o texto Ligado/Desligado vai embaixo do interruptor (o título do item ganha espaço) */
@media (max-width: 520px) {
  .interruptor { flex-direction: column; gap: 3px; }
  .interruptor-txt { min-width: 0; font-size: .74rem; }
  .tv-extra { padding: 12px; }
}

/* ---------- 15/10/2026 (pedido do dono): LOJA — minha_loja.php (revenda) e loja.php (cliente) ---------- */
.loja-status.ligada { border-color: color-mix(in srgb, var(--verde) 45%, var(--borda)); }
.loja-saldo { margin: 12px 0 0; }
.loja-gateways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; margin-bottom: 14px; }
.loja-gw { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 12px; background: var(--fundo-2); cursor: pointer; margin: 0; }
.loja-gw input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--primaria); }
.loja-gw b { display: block; }
.loja-gw small { display: block; color: var(--texto-2); font-size: .82rem; }
.loja-gw:has(input:checked) { border-color: var(--primaria); background: color-mix(in srgb, var(--primaria) 10%, var(--fundo-2)); }
.loja-preco { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; font-weight: 600; }
.loja-rs { display: inline-flex; align-items: center; gap: 6px; }
.loja-rs input { width: 130px; }
.loja-planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0 18px; }
.loja-card { text-align: center; }
.loja-card h3 { justify-content: center; }
.loja-valor { font-size: 1.6rem; font-weight: 800; margin: 4px 0 6px; }
.loja-pix { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 24px; align-items: start; }
.loja-qr { width: 220px; max-width: 100%; background: #fff; padding: 10px; border-radius: 10px; }
.loja-copia { width: 100%; font-family: monospace; font-size: .78rem; word-break: break-all; }
.loja-depois { margin-top: 12px; }
.loja-motivo { margin-top: 4px; max-width: 34ch; color: var(--texto-2); font-size: .76rem; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; } /* revisão P2-6 */
.loja-conferir { margin-top: 12px; }
.loja-conferir .sub { margin: 0 0 8px; }
@media (max-width: 640px) { .loja-pix { grid-template-columns: minmax(0, 1fr); } .loja-qr { margin: 0 auto; } }

/* ---------- 15/10/2026 (pedido do dono): MINHAS TVs SEM ROLAGEM LATERAL ---------- */
/* os selos quebram linha (o "TV desligada — atualiza quando voltar (...)" esticava a tabela); no computador os botões ficam um embaixo
   do outro. Se nem assim couber (janela estreita, coluna Cliente), o app.js põe .cartoes e cada TV vira um cartão. */
.lista-telas .selo { white-space: normal; line-height: 1.3; padding-top: 3px; padding-bottom: 3px; border-radius: 12px; }
@media (min-width: 861px) {
  .lista-telas th, .lista-telas td { padding-left: 12px; padding-right: 12px; }
  .lista-telas:not(.cartoes) td.acoes-linha { width: 1%; }
  .lista-telas:not(.cartoes) .acoes-linha:not(.acoes-icones) > *, .lista-telas:not(.cartoes) .acoes-linha:not(.acoes-icones) form { display: flex; margin: 4px 0; }
  .lista-telas:not(.cartoes) .acoes-linha:not(.acoes-icones) .btn { width: 100%; justify-content: flex-start; } /* 15/10: com ícones (.acoes-icones) vale a fileira */
}
.lista-telas.cartoes thead { display: none; }
.lista-telas.cartoes, .lista-telas.cartoes tbody { display: block; width: 100%; }
.lista-telas.cartoes tr { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px 16px; padding: 12px 4px; border-bottom: 1px solid var(--borda); }
.lista-telas.cartoes td { display: block; width: auto; border: 0; padding: 2px 10px; min-width: 0; }
.lista-telas.cartoes td[data-rot]::before { content: attr(data-rot); display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); }
.lista-telas.cartoes td[data-rot="Tela"], .lista-telas.cartoes td.acoes-linha { grid-column: 1 / -1; }
.lista-telas.cartoes td.acoes-linha { display: flex; flex-wrap: wrap; gap: 8px; text-align: left; }
.lista-telas.cartoes .acoes-linha > *, .lista-telas.cartoes .acoes-linha form { margin: 0; }

/* ---------- 15/10/2026 (pedido do dono): mensagem pronta do acesso recém-criado (Vista::acessoNovo) ---------- */
.acesso-novo { border-color: color-mix(in srgb, var(--verde) 45%, var(--borda)); }
.acesso-novo-texto { width: 100%; resize: vertical; font-size: .9rem; line-height: 1.45; }

/* ---------- 15/10/2026 (pedido do dono): REVENDAS e CLIENTES sem rolagem lateral ---------- */
/* Não coube na largura (o app.js põe .cartoes): cada linha vira o MESMO cartão do celular. Revendas: cartões lado a lado. */
.tabela.cartoes thead { display: none; }
.tabela-wrap.rv-wrap:has(> .rv-tabela.cartoes) { background: none; border: 0; box-shadow: none; overflow: visible; }
.tabela.rv-tabela.cartoes { display: block; }
.tabela.rv-tabela.cartoes tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.tabela.rv-tabela.cartoes tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 14px;
  background: linear-gradient(180deg, var(--cartao-2), var(--cartao)); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.tabela.rv-tabela.cartoes td { display: block; width: auto; min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; text-align: left; white-space: normal; } /* o rótulo "TVs ativas (dela / na rede)" quebra linha */
.tabela.rv-tabela.cartoes td[data-rot]::before { content: attr(data-rot); display: block; margin-bottom: 1px; font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); }
.tabela.rv-tabela.cartoes td.rv-n { order: 1; font-weight: 600; }
.tabela.rv-tabela.cartoes td.rv-sit { order: 2; justify-self: end; }
.tabela.rv-tabela.cartoes td.rv-nome { order: 3; grid-column: 1 / -1; font-size: 1.02rem; }
.tabela.rv-tabela.cartoes td.rv-cred { order: 4; }
.tabela.rv-tabela.cartoes td.rv-tv { order: 5; }
.tabela.rv-tabela.cartoes td.rv-whats { order: 6; }
.tabela.rv-tabela.cartoes td.rv-ult { order: 7; }
.tabela.rv-tabela.cartoes td.rv-acoes { order: 8; grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--borda); white-space: normal; }
.tabela.rv-tabela.cartoes td.rv-n::before, .tabela.rv-tabela.cartoes td.rv-sit::before, .tabela.rv-tabela.cartoes td.rv-nome::before { display: none; }
.tabela.rv-tabela.cartoes .rv-cred b { font-size: 1.12rem; }
.tabela.rv-tabela.cartoes .rv-acoes > * { margin: 0; }
.tabela.rv-tabela.cartoes .rv-acoes > .btn { flex: 1 1 auto; }
.tabela.lista-contas.cartoes, .tabela.lista-contas.cartoes tbody, .tabela.lista-contas.cartoes tr { display: block; width: 100%; }
.tabela.lista-contas.cartoes tr { border-bottom: 1px solid var(--borda); padding: 10px 0; }
.tabela.lista-contas.cartoes td { display: block; border: 0; padding: 4px 14px; }
.tabela.lista-contas.cartoes td[data-rot]:not(.principal) { display: inline-block; width: auto; padding: 2px 4px 2px 14px; font-size: .84rem; }
.tabela.lista-contas.cartoes td[data-rot]:not(.principal)::before { content: attr(data-rot) ": "; display: inline; color: var(--texto-2); font-size: .78rem; }
.tabela.lista-contas.cartoes td.acoes-linha { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; text-align: left; white-space: normal; }
.tabela.lista-contas.cartoes .acoes-linha > *, .tabela.lista-contas.cartoes .acoes-linha form { margin: 0; }

/* ---------- 15/10/2026 (pedido do dono): página LOGS (só o livro-caixa, com filtro) ---------- */
.txt-verde { color: var(--verde); }
.logs-filtros { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.logs-filtros .rv-f-busca { grid-column: span 2; }
.logs-filtros input, .logs-filtros select { min-width: 0; width: 100%; }
@media (max-width: 860px) {
  .logs-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logs-filtros .rv-f-busca, .logs-filtros .rv-f-acoes { grid-column: 1 / -1; }
}

/* ---------- 15/10/2026 (pedido do dono, print de referência): LISTA DE CLIENTES mais limpa ---------- */
/* os mesmos botões viram ÍCONES coloridos numa fileira (até 6 por linha); o nome aparece ao passar o mouse (.dica-flutua, app.js) */
.acoes-icones .ic-fileira { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; width: max-content; max-width: 194px; margin-left: auto; } /* até 5 ícones por linha */
.acoes-icones .ic-fileira > form { margin: 0; display: inline-flex; }
.acoes-icones .btn { position: relative; width: 34px; height: 34px; min-height: 0; padding: 0; justify-content: center; gap: 0; font-size: 0; border: 0; border-radius: 9px;
  color: #fff; background: var(--cor-ic, #3a4458); box-shadow: none; }
.acoes-icones .btn .ic { width: 17px; height: 17px; }
.acoes-icones .btn:hover, .acoes-icones .btn:focus-visible { filter: brightness(1.15); background: var(--cor-ic, #3a4458); color: #fff; border: 0; }
.acoes-icones .btn.primario { background: var(--grad); }
.acoes-icones .btn.ic-neutro { --cor-ic: #3a4458; }
.acoes-icones .btn.ic-azul { --cor-ic: #2f6fea; }
.acoes-icones .btn.ic-verde { --cor-ic: #14a06c; }
.acoes-icones .btn.ic-amarelo { --cor-ic: #c98a12; }
.acoes-icones .btn.ic-ciano { --cor-ic: #0e93a6; }
.acoes-icones .btn.ic-vermelho { --cor-ic: #d63a4c; }
.acoes-icones .btn.desligado { --cor-ic: #2a3140; color: #8f9bb0; opacity: .75; filter: none; }
.acoes-icones .btn[data-num]::after { content: attr(data-num); position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--vermelho); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; }
.tabela.lista-contas td.acoes-icones { white-space: normal; }
@media (min-width: 861px) { .tabela:not(.cartoes) td.acoes-icones { width: 1%; } } /* só na tabela do computador (no cartão a célula ocupa a linha) */
.tabela.cartoes .acoes-icones .ic-fileira { justify-content: flex-start; width: 100%; max-width: none; flex: 1 1 100%; margin-left: 0; }
@media (max-width: 860px) { .acoes-icones .ic-fileira { justify-content: flex-start; width: 100%; max-width: none; flex: 1 1 100%; margin-left: 0; } .acoes-icones .btn { width: 40px; height: 40px; } }
.dica-flutua { position: fixed; z-index: 1000; pointer-events: none; padding: 6px 10px; border-radius: 8px; background: var(--texto); color: var(--fundo); font-size: .8rem; font-weight: 600;
  white-space: nowrap; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); transform: translate(-50%, -100%); }
.dica-flutua.baixo { transform: translate(-50%, 0); }
/* barra de páginas (Vista::paginacao): por página · « ‹ 1 2 3 › » · "1 até 20 de 57" */
.pag-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin: 12px 0; }
.pag-por select { width: auto; min-width: 80px; }
.pag-nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.pag-n { min-width: 34px; height: 34px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; color: var(--texto-2); text-decoration: none; font-weight: 600; }
.pag-n:hover { background: var(--cartao-2); color: var(--texto); }
.pag-n.atual { background: var(--primaria); color: #fff; }
.pag-conta { color: var(--texto-2); font-size: .88rem; }
.pag-conta b { color: var(--texto); }
/* e-mail longo na coluna Cliente quebra a linha (antes esticava a tabela e ela virava cartão até em 1257 px) */
.tabela.lista-contas td.principal { min-width: 170px; }
.tabela.lista-contas td.principal .bloco { overflow-wrap: anywhere; }

/* ---------- 15/10/2026: Modelos de ofertas (biblioteca de modelos do Canva) ---------- */
.mo-como { padding: 14px 16px; }
.mo-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mo-passos li { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; color: var(--texto-2); min-width: 0; }
.mo-passos li > b { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--grad); color: #fff; font-size: .8rem; }
.mo-passos li span b { color: var(--texto); }
.mo-passos small { display: block; margin-top: 3px; font-size: .76rem; }
@media (max-width: 980px) { .mo-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mo-passos { grid-template-columns: 1fr; } }
.mo-gestor-topo { margin: 0 0 16px; }
.mo-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.mo-cat { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 99px; border: 1px solid var(--borda-forte); background: var(--cartao); color: var(--texto-2); text-decoration: none; font-size: .86rem; font-weight: 600; transition: all .15s; }
.mo-cat span { font-size: .74rem; font-weight: 600; padding: 1px 7px; border-radius: 99px; background: var(--cartao-2); color: var(--texto-2); }
.mo-cat:hover { color: var(--texto); border-color: color-mix(in srgb, var(--primaria) 55%, transparent); }
.mo-cat.on { color: var(--texto); border-color: var(--primaria); background: color-mix(in srgb, var(--primaria) 14%, var(--cartao)); }
.mo-cat.on span { background: var(--primaria); color: #fff; }
.mo-cat.escondida { opacity: .6; border-style: dashed; }
.mo-filtros { margin-bottom: 16px; }
.mo-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 18px; margin: 0 0 18px; }
.mo-cartao { display: flex; flex-direction: column; background: var(--cartao); border: 1px solid var(--borda); border-radius: 16px; padding: 10px; box-shadow: var(--sombra); min-width: 0; scroll-margin-top: 80px; }
.mo-cartao.escondido { border-style: dashed; border-color: var(--borda-forte); }
.mo-cartao.escondido .mo-previa img { opacity: .55; }
.mo-previa { position: relative; aspect-ratio: 16 / 9; border-radius: 11px; overflow: hidden; background: #05070b; }
.mo-previa img, .mo-video-hover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mo-previa.em-pe img, .mo-previa.em-pe .mo-video-hover { object-fit: contain; }
.mo-sem { position: absolute; inset: 0; display: grid; place-items: center; color: var(--texto-2); }
.mo-sem .ic { width: 34px; height: 34px; }
.mo-ver { position: absolute; right: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(8, 10, 16, .72); color: #fff; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; backdrop-filter: blur(4px); }
.mo-ver .ic { width: 14px; height: 14px; }
.mo-ver:hover { background: rgba(8, 10, 16, .9); }
.mo-corpo { display: flex; flex-direction: column; gap: 6px; padding: 12px 6px 4px; flex: 1; min-width: 0; }
.mo-selos { display: flex; flex-wrap: wrap; gap: 6px; }
.mo-cat-nome { color: var(--texto-2); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; }
.mo-corpo h3 { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.mo-corpo p { margin: 0 0 6px; color: var(--texto-2); font-size: .86rem; overflow-wrap: anywhere; flex: 1; }
.mo-abrir { margin-top: auto; }
.mo-gestao { margin-top: 8px; }
.mo-modal { max-width: min(1000px, 96vw); padding: 16px; }
.mo-modal.em-pe { max-width: min(460px, 96vw); }
.mo-modal-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.mo-modal-topo h3 { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.mo-modal-x { font-size: 1.4rem; line-height: 1; padding: 2px 9px; }
.mo-modal-midia { display: block; width: 100%; max-height: 74vh; object-fit: contain; border-radius: 10px; background: #05070b; margin-bottom: 14px; }
.mo-modal .acoes { justify-content: flex-end; }
.mo-rodape { margin: 0 0 18px; }
.mo-form { scroll-margin-top: 80px; }
.mo-form-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.mo-largo { grid-column: 1 / -1; }
.mo-atual { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.mo-atual img { width: 180px; max-width: 100%; border-radius: 8px; border: 1px solid var(--borda-forte); }
.mo-mostrar { align-self: center; }
@media (max-width: 700px) { .mo-form-grade { grid-template-columns: 1fr; } }
.mo-cats-edit { display: grid; gap: 8px; }
.mo-cat-linha { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--borda); border-radius: 12px; background: var(--cartao-2); }
.mo-cat-linha.nova { border-style: dashed; }
.mo-cat-linha.desligado { opacity: .7; }
.mo-cat-form { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto auto auto; gap: 10px; align-items: end; flex: 1; min-width: 0; }
.mo-cat-form label { margin: 0; }
.mo-rot { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); margin-bottom: 2px; font-weight: 600; }
.mo-cat-n { color: var(--texto-2); font-size: .8rem; white-space: nowrap; align-self: center; }
.mo-cat-apagar { color: var(--vermelho); }
.mo-cat-apagar:disabled { opacity: .35; cursor: not-allowed; }
@media (max-width: 640px) { .mo-cat-form { grid-template-columns: minmax(0, 1fr) 80px; } }

/* ---------- 16/10/2026: Modelos de ofertas no molde do catálogo de bebidas (coluna de categorias, barra, selos) ---------- */
.mo-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 22px; align-items: start; }
.mo-lateral { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 4px; padding: 10px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; max-height: calc(100vh - 96px); overflow-y: auto; }
.mo-lat { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid transparent; color: var(--texto-2); text-decoration: none; font-weight: 600; font-size: .92rem; min-width: 0; }
.mo-lat .ic { width: 19px; height: 19px; flex: none; }
.mo-lat span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-lat em { font-style: normal; font-size: .72rem; color: var(--texto-2); background: var(--cartao-2); padding: 1px 7px; border-radius: 99px; }
.mo-lat:hover { color: var(--texto); background: var(--cartao-2); }
.mo-lat.on { color: var(--texto); background: color-mix(in srgb, var(--vermelho) 14%, var(--cartao)); border-color: color-mix(in srgb, var(--vermelho) 55%, transparent); }
.mo-lat.on .ic { color: var(--vermelho); }
.mo-lat.escondida { opacity: .55; }
.mo-novo { font-size: .64rem; font-weight: 800; letter-spacing: .04em; color: #fff; background: #e5323e; padding: 2px 8px; border-radius: 99px; }
.mo-miolo { min-width: 0; }
.mo-titulo { display: flex; align-items: center; gap: 10px; margin: 2px 0 4px; font-size: 1.5rem; }
.mo-titulo .ic { width: 24px; height: 24px; color: var(--vermelho); }
.mo-desc { color: var(--texto-2); margin: 0 0 14px; }
.mo-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 18px; }
.mo-barra select { width: auto; margin: 0; min-width: 170px; }
.mo-busca { position: relative; flex: 1 1 280px; margin: 0; font-weight: 400; }
.mo-busca .ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--texto-2); }
.mo-busca input { margin: 0; padding-left: 40px; }
.mo-so-novos.ativo { border-color: var(--vermelho); color: var(--texto); background: color-mix(in srgb, var(--vermelho) 14%, var(--cartao-2)); }
.mo-selo { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: var(--cartao-2); border: 1px solid var(--borda-forte); color: var(--texto); }
.mo-selo .ic { width: 12px; height: 12px; }
.mo-selo.novo { background: #e5323e; border-color: #e5323e; color: #fff; }
.btn.primario.mo-abrir, .mo-modal .btn.primario { background: linear-gradient(135deg, #f0444f 0%, #c81e2c 100%); box-shadow: 0 6px 20px rgba(229, 50, 62, .3); }
details.mo-como { padding: 0; }
details.mo-como > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-weight: 600; color: var(--texto-2); }
details.mo-como > summary::-webkit-details-marker { display: none; }
details.mo-como > summary .ic { width: 17px; height: 17px; transition: transform .15s; }
details.mo-como[open] > summary .ic { transform: rotate(180deg); }
details.mo-como .mo-passos { padding: 0 16px 14px; }
@media (max-width: 1000px) {
  .mo-layout { grid-template-columns: 1fr; gap: 12px; }
  .mo-lateral { position: static; flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 6px; -webkit-overflow-scrolling: touch; }
  .mo-lat { flex: none; padding: 8px 12px; }
  .mo-lat span { overflow: visible; }
}
@media (max-width: 560px) { .mo-barra select, .mo-barra .btn { flex: 1 1 auto; } }

/* ---------- 16/10/2026: Gerenciar modelos (cadastro por link do Canva + lista em lote) ---------- */
.mad-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; align-items: end; }
.mad-largo { grid-column: 1 / -1; }
.mad-form textarea { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
.mad-mostrar { margin-bottom: 14px; }
.mad-previa { display: flex; gap: 14px; align-items: center; margin: 4px 0 12px; padding: 10px; border: 1px dashed var(--borda-forte); border-radius: 12px; color: var(--texto-2); }
.mad-previa img { width: 260px; max-width: 45%; border-radius: 8px; }
.mad-previa img.em-pe { width: 120px; }
.mad-previa.erro { color: var(--vermelho); border-color: color-mix(in srgb, var(--vermelho) 50%, transparent); }
.mad-resultado { list-style: none; margin: 6px 0 12px; padding: 0; display: grid; gap: 6px; max-height: 420px; overflow-y: auto; }
.mad-item { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--cartao-2); border: 1px solid var(--borda); font-size: .86rem; min-width: 0; }
.mad-item img { width: 96px; border-radius: 6px; flex: none; }
.mad-item small { color: var(--texto-2); overflow-wrap: anywhere; }
.mad-item.ok { border-color: color-mix(in srgb, var(--verde) 50%, transparent); }
.mad-item.dup { border-color: color-mix(in srgb, var(--amarelo) 50%, transparent); }
.mad-item.erro { border-color: color-mix(in srgb, var(--vermelho) 50%, transparent); }
.mad-item.espera { opacity: .6; }
.mad-fim { padding: 8px 2px; font-weight: 600; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mad-lote-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 12px; }
.mad-lote-barra select { width: auto; margin: 0; }
.mad-lote-barra .check { margin: 0; }
.mad-mini { width: 120px; border-radius: 6px; display: block; }
.mad-mini.em-pe { width: 54px; }
.mad-link { font-size: .78rem; color: var(--texto-2); overflow-wrap: anywhere; }
.mad-tabela td { vertical-align: middle; }
@media (max-width: 760px) { .mad-form { grid-template-columns: 1fr; } .mad-previa img { max-width: 50%; } }

/* ---------- 16/10/2026: categorias de modelos em ordem por ARRASTAR (pedido do dono; a caixa "Ordem" saiu) ---------- */
.mo-cat-alca { display: grid; align-self: center; flex: none; padding: 8px 4px; }
.mo-cat-linha.arrastando { box-shadow: 0 10px 30px rgba(0, 0, 0, .45); position: relative; z-index: 2; user-select: none; border-color: var(--primaria); }
#categorias > .sub svg { width: 16px; height: 16px; vertical-align: -3px; }
.mo-cat-form { grid-template-columns: minmax(0, 1fr) auto auto auto; }
@media (max-width: 860px) { .mo-cat-alca { display: grid; } }
@media (max-width: 640px) { .mo-cat-form { grid-template-columns: minmax(0, 1fr) auto; } }

/* ---------- 17/10/2026: REDE DE ANÚNCIOS (painel da revenda + área do anunciante) ---------- */
.rd-passos { margin: 6px 0 16px 18px; display: grid; gap: 8px; color: var(--texto-2); }
.rd-passos b { color: var(--texto); }
.rd-form-curto { max-width: 520px; }
.rd-atalhos { margin-bottom: 16px; flex-wrap: wrap; }
.rd-atalhos form { margin: 0; }
.rd-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rd-lista li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 10px; background: var(--cartao-2); }
.rd-lista li form { margin: 0; }
.rd-vagas { display: grid; gap: 8px; }
.rd-vaga { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--cartao-2); color: var(--texto); text-decoration: none; }
.rd-vaga:hover { border-color: var(--borda-forte); }
.rd-vaga-nome { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rd-vaga-nome b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-vaga-nome small { color: var(--texto-2); font-size: .76rem; white-space: nowrap; }
.rd-vaga-num { font-size: .82rem; color: var(--texto-2); white-space: nowrap; }
meter.rd-barra { width: 100%; min-width: 80px; height: 10px; vertical-align: middle; }
.rd-tabela meter.rd-barra { width: 90px; }
.ponto-on { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--texto-3, #6b7280); margin-right: 6px; flex: none; vertical-align: middle; }
.ponto-on.on { background: var(--verde); box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 25%, transparent); }
.rd-rot { display: block; margin: 14px 0 8px; font-size: .86rem; }
.rd-pago { margin-bottom: 22px; }
/* 31/10 (dono): filtros da lista de contratos e a janela "Ver contrato" */
.rd-filtros-av { margin: 0 0 14px; border: 1px solid var(--borda); border-radius: 12px; padding: 10px 14px; }
.rd-filtros-av > summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; list-style: none; }
.rd-filtros-av > summary::-webkit-details-marker { display: none; }
.rd-filtros-av[open] > summary { margin-bottom: 12px; }
.rd-filtros-av .acoes { margin-top: 16px; }
.rd-conta { margin: 0 0 10px; }
.rd-filtro-item { display: inline-flex; align-items: center; gap: 4px; }
/* 31/10 (dono): endereço do ponto — uma linha no cadastro e o resto num pop-up (<dialog>) */
.rd-end { margin-bottom: 14px; min-width: 0; }
.rd-end-rot { display: block; font-weight: 600; font-size: .88rem; }
.rd-end-linha { display: flex; gap: 8px; align-items: stretch; margin-top: 6px; }
.rd-end-resumo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--borda-forte); background: var(--fundo); color: var(--texto); font: inherit; font-weight: 400; cursor: pointer; }
.rd-end-resumo:hover, .rd-end-resumo:focus-visible { border-color: var(--primaria); outline: none; }
.rd-end-resumo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rd-end-resumo.vazio span { color: var(--texto-2); }
.rd-end-resumo svg { flex: none; color: var(--texto-2); }
.rd-end .msg-campo { display: block; margin-top: 6px; }
/* o visual do .modal sem a classe .modal (as janelas de confirmação são achadas por ela) */
dialog.rd-end-janela { max-width: 640px; width: calc(100% - 32px); margin: auto; color: var(--texto); background: var(--cartao); border: 1px solid var(--borda-forte); border-radius: 16px; padding: 24px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.rd-end-janela > .acoes { justify-content: flex-end; }
dialog.rd-end-janela::backdrop { background: rgba(5, 8, 14, .62); backdrop-filter: blur(4px); }
.rd-end-janela h3 { display: flex; align-items: center; gap: 8px; }
.rd-end-grade { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 14px; }
.rd-end-grade > label { min-width: 0; }
.rd-end-cep { grid-column: span 2; } .rd-end-rua { grid-column: span 3; } .rd-end-num { grid-column: span 1; }
.rd-end-bairro { grid-column: span 2; } .rd-end-cidade { grid-column: span 3; } .rd-end-uf { grid-column: span 1; } .rd-end-ref { grid-column: 1 / -1; }
.rd-end-janela .rd-end-mapa-bts { margin: -4px 0 18px; justify-content: flex-start; flex-wrap: wrap; }
@media (max-width: 560px) {
  .rd-end-linha { flex-direction: column; }
  .rd-end-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rd-end-cep, .rd-end-bairro { grid-column: 1 / -1; } .rd-end-rua, .rd-end-cidade { grid-column: span 3; } .rd-end-num, .rd-end-uf { grid-column: span 1; }
  .rd-end-janela .rd-end-mapa-bts .btn { flex: 1 1 100%; justify-content: center; }
}
.rd-ajuda { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--borda-forte); background: transparent; color: var(--texto-2); font: 600 .78rem/1 inherit; cursor: pointer; display: inline-grid; place-items: center; padding: 0; }
.rd-ajuda:hover, .rd-ajuda:focus-visible { color: var(--texto); border-color: var(--primaria); }
.rd-ver-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.rd-ver-topo h3 { margin: 0 0 2px; }
.rd-ver-dados { margin: 0 0 16px; display: grid; gap: 8px; }
.rd-ver-dados > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; }
.rd-ver-dados dt { color: var(--texto-2); font-size: .86rem; }
.rd-ver-dados dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.rd-ver-per { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; font-size: .9rem; }
@media (max-width: 480px) { .rd-ver-dados > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } } /* 29/10 (dono): "Já recebeu?" não cola no botão Fazer contrato */
.rd-calc { display: flex; flex-direction: column; justify-content: center; padding: 10px 14px; border: 1px dashed var(--borda-forte); border-radius: 10px; margin-bottom: 14px; }
.rd-calc b { font-size: 1.6rem; line-height: 1.1; }
.rd-calc small { color: var(--texto-2); font-size: .78rem; }
.rd-link { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.rd-codigo { font-family: ui-monospace, Consolas, monospace; font-size: 1.7rem; font-weight: 700; letter-spacing: .08em; margin: 8px 0 12px; padding: 10px 14px; border-radius: 10px; background: var(--cartao-2); border: 1px solid var(--borda-forte); text-align: center; }
.rd-codigo-novo { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rd-sub { margin: 18px 0 8px; font-size: .92rem; }
.rd-midias { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 12px; }
.rd-midia { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--borda); border-radius: 10px; background: var(--cartao-2); margin: 0; font-weight: 500; }
.rd-midia img, .rd-sem-mini { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border-radius: 7px; display: grid; place-items: center; color: var(--texto-2); }
.rd-midia span b { display: block; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-midia span small { color: var(--texto-2); font-size: .74rem; }
.rd-midia form { position: absolute; top: 4px; right: 4px; margin: 0; }
.rd-midia form .btn-mini { background: color-mix(in srgb, #000 55%, transparent); color: #fff; }
.rd-midias.escolher .rd-midia { cursor: pointer; }
.rd-midias.escolher .rd-midia input { position: absolute; top: 12px; left: 12px; width: 20px; height: 20px; z-index: 1; }
.rd-midias.escolher .rd-midia:has(input:checked) { border-color: var(--verde); background: color-mix(in srgb, var(--verde) 10%, var(--cartao-2)); }
.rd-midia.desligado, tr.desligado { opacity: .6; }
.rd-pontos-ops { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin-bottom: 8px; }
.rd-ponto-op { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--cartao-2); margin: 0; font-weight: 500; cursor: pointer; }
.rd-ponto-op input { margin-top: 3px; }
.rd-ponto-op:has(input:checked) { border-color: var(--verde); background: color-mix(in srgb, var(--verde) 10%, var(--cartao-2)); }
.rd-ponto-op span b { display: block; }
.rd-ponto-op span small { color: var(--texto-2); font-size: .76rem; }
/* 22/10 (opção C): "Em qual TV" dentro da caixa do ponto com fila própria */
.rd-ponto-op .rd-ponto-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; color: var(--texto); font-size: .8rem; }
.rd-ponto-op .rd-ponto-fila select { width: auto; max-width: 100%; min-width: 0; padding: 4px 8px; font-size: .82rem; }
.rd-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.rd-resumo > div { padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--cartao-2); }
.rd-resumo small { display: block; color: var(--texto-2); font-size: .76rem; }
.rd-resumo b { display: block; font-size: 1.02rem; }
.rd-resumo em { display: block; font-style: normal; color: var(--texto-2); font-size: .76rem; margin-top: 2px; }
.rd-filtros { margin-bottom: 14px; }
a.pilula { text-decoration: none; }
a.pilula.on span { background: color-mix(in srgb, var(--verde) 14%, transparent); border-color: var(--verde); color: var(--texto); }
.rd-apagar { margin-top: 16px; }
/* 19/10: horário de funcionamento por dia (ponto) */
.rd-faixas { display: grid; gap: 8px; }
.rd-faixa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--cartao-2); }
.rd-dias { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-dias .pilula span { height: 30px; padding: 0 10px; }
.rd-hora { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .82rem; color: var(--texto-2); }
.rd-hora select { width: auto; min-width: 104px; }
.rd-horario .acoes { margin-top: 8px; }
.rd-horario-txt { margin: 8px 0 14px; font-size: .84rem; color: var(--texto-2); }
.rd-horario-txt b { color: var(--texto); }
/* 20/10: TV livre ligada num ponto que espera TV; ponto sem TV bloqueado no contrato */
.rd-ligar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 0; }
.rd-ligar select { width: auto; max-width: 220px; }
.rd-ponto-op.desligado { opacity: .55; cursor: not-allowed; }
/* 20/10: calculadora de publicidade e proposta comercial */
.kpi-ic.amarelo { background: color-mix(in srgb, var(--amarelo) 16%, transparent); color: var(--amarelo); }
.rd-calc-liga { display: flex; align-items: center; gap: 8px; margin: 16px 0 4px; font-weight: 500; }
.rd-calc-liga input { width: auto; margin: 0; }
.rd-calc-campos { margin-top: 10px; }
.rd-lucro { margin-top: 10px; }
.rd-lucro td:last-child { text-align: right; white-space: nowrap; }
.rd-sugestao { min-height: 1.4em; margin: 6px 0 12px; }
tr.rd-sim-base td { font-weight: 700; color: var(--texto); background: color-mix(in srgb, var(--verde) 10%, transparent); }
/* 20/10 (modelo aprovado): Calculadora do ponto + Parceria local */
.rd-calc-ponto { margin: 16px 0; padding: 16px; border: 1px solid color-mix(in srgb, var(--primaria) 45%, var(--borda)); border-radius: 12px; background: color-mix(in srgb, var(--primaria) 5%, var(--cartao-2)); }
.rd-calc-ponto h4 { margin: 0 0 2px; display: flex; align-items: center; gap: 6px; font-size: 1rem; }
.rd-calc-ponto > .rd-rot:first-of-type { margin-top: 10px; }
.rd-rot-num { display: block; font-weight: 600; font-size: .86rem; margin-bottom: 6px; }
.rd-parceria { display: grid; gap: 8px; margin-bottom: 12px; }
.rd-parc-op { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--cartao-2); font-weight: 500; cursor: pointer; }
.rd-parc-op > input[type=checkbox] { width: auto; margin: 0; }
.rd-parc-op > span:first-of-type { flex: 1 1 260px; min-width: 0; }
.rd-parc-op b { display: block; }
.rd-parc-op small { color: var(--texto-2); font-size: .76rem; }
.rd-parc-campo { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; }
.rd-parc-campo input { width: 84px; }
.rd-parc-op:has(input[type=checkbox]:checked) { border-color: var(--verde); background: color-mix(in srgb, var(--verde) 8%, var(--cartao-2)); }
/* 21/10: tabela de preço sugerido (do tempo marcado); a linha igual ao que está preenchido fica destacada */
.rd-tab-preco { margin-top: 14px; }
/* 29/10: MVP da calculadora — a tabela fica recolhida em "Ajuda para definir o preço" */
details.rd-ajuda-preco { margin-top: 14px; border: 1px solid var(--borda); border-radius: var(--raio); padding: 0 12px; }
details.rd-ajuda-preco > summary { cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 10px 0; font-weight: 600; font-size: .9rem; color: var(--texto-2); }
details.rd-ajuda-preco > summary { list-style: none; }
details.rd-ajuda-preco > summary::-webkit-details-marker { display: none; }
details.rd-ajuda-preco > summary .ic { width: 17px; height: 17px; }
details.rd-ajuda-preco > summary .ic:last-child { margin-left: auto; transition: transform .15s; }
details.rd-ajuda-preco[open] > summary .ic:last-child { transform: rotate(180deg); }
details.rd-ajuda-preco[open] { padding-bottom: 12px; }
details.rd-ajuda-preco .rd-tab-preco { margin-top: 4px; }
.rd-tab-base { display: block; max-width: 420px; margin: 0 0 14px; } /* 22/10: base do preço sugerido (só no navegador) */
/* 22/10: pergunta 7 — mais TVs no mesmo lugar (uma linha por TV: qual TV + o que ela faz) */
.rd-tvs { margin: 4px 0 14px; }
.rd-tvs > .sub { margin: 0 0 8px; }
.rd-tvs-lista { display: grid; gap: 8px; margin-bottom: 8px; }
.rd-tvs-lista:empty { display: none; }
.rd-tv-extra { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 8px 12px; align-items: end; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--cartao-2); }
.rd-tv-extra label { margin: 0; }
.rd-tv-extra .rd-tv-nome { align-self: center; font-weight: 600; min-width: 0; }
.rd-tv-extra > button { align-self: center; }
@media (max-width: 640px) {
  .rd-tv-extra { grid-template-columns: minmax(0, 1fr) auto; }
  .rd-tv-extra .rd-tv-modo { grid-column: 1 / 2; }
}
.rd-tab-preco .rd-rot { display: block; margin-bottom: 6px; }
.rd-tab-preco .sub { margin: 6px 0 0; font-size: .8rem; }
.rd-preco-tabela td, .rd-preco-tabela th { white-space: nowrap; }
.rd-preco-tabela td.acoes-linha { text-align: right; }
.rd-preco-tabela tr.marcada td { background: color-mix(in srgb, var(--verde) 10%, transparent); }
.rd-preco-tabela tr.marcada td:first-child { box-shadow: inset 3px 0 0 var(--verde); }
.rd-preco-tabela.cartoes thead { display: none; }
.rd-preco-tabela.cartoes, .rd-preco-tabela.cartoes tbody { display: block; width: 100%; }
.rd-preco-tabela.cartoes tr { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 4px 14px; padding: 10px 4px; border-bottom: 1px solid var(--borda); }
.rd-preco-tabela.cartoes td { display: block; width: auto; border: 0; padding: 2px 10px; min-width: 0; white-space: normal; text-align: left; }
.rd-preco-tabela.cartoes td[data-rot]::before { content: attr(data-rot); display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); }
@media (max-width: 860px) { /* celular: cada linha vira um cartão de 2 colunas (não um dado embaixo do outro) */
  .rd-preco-tabela tr, .rd-preco-tabela.cartoes tr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
  .rd-preco-tabela td { width: auto; white-space: normal; text-align: left; }
  .rd-preco-tabela td.acoes-linha { grid-column: 1 / -1; }
}
.rd-resultado { margin-top: 14px; padding: 14px 16px; border-radius: 10px; background: var(--cartao); border: 1px dashed var(--borda-forte); }
.rd-resultado ul { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 6px; }
.rd-resultado li:empty { display: none; }
/* 22/10 (modelo aprovado: "um bloco só"): uma parte por conversa — a TV, o anunciante, o dono do lugar e a conta da revenda */
.rd-res-parte { padding: 10px 0; border-top: 1px solid var(--borda); }
.rd-res-parte:first-of-type { border-top: 0; padding-top: 6px; }
.rd-res-parte > b { display: block; margin-bottom: 6px; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); }
.rd-resultado .rd-res-parte ul { margin: 0; gap: 4px; }
.rd-res-parte p { margin: 0; }
.rd-res-parte p:empty { display: none; }
.rd-res-nota { margin-top: 8px !important; font-size: .86rem; color: var(--texto-2); }
.rd-res-conta { border-collapse: collapse; width: 100%; max-width: 560px; font-variant-numeric: tabular-nums; }
.rd-res-conta th, .rd-res-conta td { padding: 6px 8px; border-bottom: 1px solid var(--borda); text-align: right; white-space: nowrap; }
.rd-res-conta th:first-child { padding-left: 0; text-align: left; white-space: normal; font-weight: 500; }
.rd-res-conta tr.cab td { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-2); white-space: normal; }
.rd-res-conta tr.total th, .rd-res-conta tr.total td { border-bottom: 0; font-weight: 800; color: var(--texto); }
@media (max-width: 480px) { /* celular: a conta de 3 colunas cabe sem passar da borda */
  .rd-resultado { padding: 12px 10px; }
  .rd-res-conta { font-size: .8rem; }
  .rd-res-conta th, .rd-res-conta td { padding: 5px 3px; }
}
/* revisão 20/10: fila maior num ponto com anúncio vendido pede "Confirmo" */
.rd-confirma { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--amarelo) 45%, var(--borda)); border-radius: 10px; background: color-mix(in srgb, var(--amarelo) 8%, var(--cartao-2)); font-weight: 500; font-size: .86rem; cursor: pointer; }
.rd-confirma > input[type=checkbox] { width: auto; margin: 3px 0 0; }
/* 20/10: calculadora ao vivo no cadastro do ponto */
.rd-ao-vivo { margin: 18px 0 6px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--primaria) 45%, var(--borda)); border-radius: 12px; background: color-mix(in srgb, var(--primaria) 6%, var(--cartao-2)); }
.rd-ao-vivo h4 { margin: 0 0 4px; display: flex; align-items: center; gap: 6px; font-size: .95rem; }
.rd-ao-vivo .rd-resumo { margin-bottom: 10px; }
.rd-av-tabela td:not(:first-child), .rd-av-tabela th:not(:first-child) { text-align: right; white-space: nowrap; }
.rd-av-tabela tr:last-child td { font-weight: 700; color: var(--texto); }
.rd-av-meta { margin-top: 12px; display: grid; gap: 6px; max-width: 560px; }
.rd-av-meta label { margin: 0; }
.rd-av-meta button { justify-self: start; }
.prop-controles { display: grid; gap: 12px; margin: 0 auto 16px; max-width: 720px; }
.prop-controles > a { justify-self: start; }
.prop-ajustes { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; }
.prop-ajustes label { margin: 0; max-width: 240px; }
.prop-card { max-width: 720px; margin: 0 auto; padding: 28px; }
.prop-marca { margin-bottom: 14px; }
.prop-card h1 { font-size: 1.7rem; line-height: 1.2; margin: 0 0 6px; text-transform: uppercase; }
.prop-end { color: var(--texto-2); margin: 0 0 14px; }
.prop-sub { margin: 14px 0 8px; font-weight: 600; }
.prop-lista { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 6px; font-size: 1.02rem; }
.prop-preco { font-size: 1.25rem; margin: 16px 0 8px; }
.prop-contato { margin: 0 0 14px; }
.prop-nota { font-size: .78rem; color: var(--texto-2); margin: 0; }
@media print {
  .nao-imprimir { display: none !important; }
  body.prop, body.prop .anun-pagina, body.prop .prop-card { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  body.prop .prop-card { border: 1px solid #bbb !important; max-width: none; }
  body.prop .prop-card * { color: #000 !important; }
  body.prop .prop-nota, body.prop .prop-end { color: #444 !important; }
}
@media (max-width: 640px) {
  .rd-vaga { grid-template-columns: minmax(0, 1fr) auto; }
  .rd-vaga meter.rd-barra { grid-column: 1 / -1; grid-row: 2; }
  .rd-codigo { font-size: 1.3rem; }
}
/* área do anunciante (página própria, sem o menu do painel) */
body.anun { min-height: 100vh; }
.anun-pagina { max-width: 980px; margin: 0 auto; padding: 16px; }
.anun-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.anun-topo .marca { padding: 4px 0; }
.anun-topo form { margin: 0; }
.anun-entrar { max-width: 440px; margin: 8vh auto 0; }
.anun-entrar h1 { font-size: 1.4rem; margin: 0 0 6px; }
.anun-codigo { font-family: ui-monospace, Consolas, monospace; font-size: 1.3rem; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.anun-ola { font-size: 1.35rem; margin: 0 0 14px; }
.anun-contrato h2 { font-size: 1.1rem; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.anun-contrato h3 { font-size: .95rem; margin: 18px 0 8px; display: flex; gap: 6px; align-items: center; }
.anun-renovar { margin: 4px 0 6px; }
.anun-pontos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.anun-pontos li { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--cartao-2); }
.anun-pontos li .ponto-on { margin-top: 6px; }
.anun-pontos li small { display: block; color: var(--texto-2); font-size: .8rem; }
.anun-contato { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rd-ponto-op > input { width: 18px; height: 18px; flex: 0 0 auto; margin: 3px 0 0; }
.rd-ponto-op > span { flex: 1 1 auto; min-width: 0; }
[data-rd-contrato] .checks { margin: 16px 0 8px; }
.rd-estado { display: inline-flex; gap: 5px; align-items: center; color: var(--amarelo); font-size: .78rem; font-weight: 500; }
.rd-estado .ic { width: 14px; height: 14px; flex: none; }
.rd-vaga .rd-estado { grid-column: 1 / -1; }
/* 17/10 (5ª conferência): o aviso do ponto dentro do texto miúdo das caixas do contrato e da área do anunciante sai amarelo */
.rd-ponto-op span small.rd-estado, .anun-pontos li small.rd-estado { display: block; color: var(--amarelo); margin-top: 2px; }
.rd-msg-tipo { display: block; margin: -4px 0 12px; }

/* ---------- 25/10/2026 (pedido do dono: "veja se o site está 100% responsivo para mobile ... para PC tá show"): celular — revisão geral
   de todas as páginas (menu, tabelas sem rótulo, selos cortados, barras de baixo, alvos de toque, letras pequenas). Tudo dentro de
   @media de celular (até 860 px ou menor): o computador não muda. Só blocos novos. ---------- */
.nota-setas { display: none; } /* lista.php: frase só do celular ("Use ↑ ↓"); no computador continua o "Arraste pela alça" */
@media (max-width: 860px) {
  /* menu: altura da tela que se VÊ (com a barra do navegador aparecendo), o fim fica acima da barra do aparelho e a rolagem não vaza */
  .lateral { height: 100vh; height: 100dvh; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }
  body:has(#lateral.aberta) { overflow: hidden; }
  .grupo-menu summary { font-size: .76rem; opacity: .9; }
  .eu > a.contato-menu { border: 1px solid var(--borda-forte); background: var(--cartao-2); color: var(--texto); min-height: 40px; width: auto; justify-content: center; }
  /* "entrar como": a faixa roxa rola com a página e a barra com o botão do menu fica presa no alto (o traço roxo lembra o modo) */
  .faixa-como { position: relative; padding: 8px 16px; gap: 6px 10px; font-size: .84rem; line-height: 1.35; }
  .faixa-como > span { flex: 1 1 100%; }
  .faixa-como form { margin-left: auto; }
  .faixa-como .btn { min-height: 40px; }
  .faixa-como + .barra { position: sticky; top: 0; box-shadow: inset 0 -3px 0 #6d28d9; }
  /* título da barra: até 2 linhas em vez de cortar com "…" */
  .barra h1 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; overflow-wrap: anywhere; }

  /* alvos de toque (~40 px) */
  .btn.pequeno { min-height: 40px; }
  .btn-ic { min-width: 40px; min-height: 40px; align-items: center; justify-content: center; }
  .saldo-chip { min-height: 36px; }
  .btn-mini { min-width: 36px; min-height: 36px; }
  .eu-saldo { min-height: 32px; }
  .pag-n { min-width: 40px; height: 40px; }
  .abas .aba { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; }
  .pv-ctl .pv-bt { min-width: 44px; min-height: 40px; }
  .midia-linha > .btn { min-width: 40px; min-height: 40px; }
  .cantos .canto { min-height: 36px; }
  .lista-ori .btn-link { display: inline-flex; align-items: center; min-height: 36px; }
  .login .nota .btn-link { display: inline-flex; align-items: center; min-height: 40px; }
  body.anun .anun-pontos li small a, body.anun .anun-contrato > p.sub a { display: inline-block; padding: 8px 0; }
  .alternar-modo .pilula span { height: 40px; }
  .rd-dias .pilula span { height: 36px; }
  .rd-faixa > .btn-mini, .rd-tv-extra > .btn-mini, .rd-tabela .acoes-linha .btn-mini { min-width: 40px; min-height: 40px; border: 1px solid var(--borda-forte); border-radius: 10px; }
  .rd-faixa > .btn-mini { margin-left: auto; font-size: 1.2rem; }
  .mo-cat-apagar, .mo-modal-x, .gaveta-topo .btn-mini { min-width: 40px; min-height: 40px; }
  .pastas-lateral .pasta-linha .btn-mini, .pastas-lateral [data-fechar-pastas] { min-width: 40px; min-height: 40px; opacity: .85; }
  .pastas-lateral.aberta { box-shadow: 0 -18px 50px rgba(0, 0, 0, .5), 0 0 0 100vmax rgba(0, 0, 0, .45); } /* a gaveta Pastas escurece o fundo */
  label.midia-sel { position: relative; }
  label.midia-sel::after { content: ""; position: absolute; inset: -12px -8px; } /* caixa de marcar da mídia: área de toque maior, mesmo desenho */
  .midias-cab label.check { min-height: 40px; display: inline-flex; align-items: center; }
  .check input[type="checkbox"], .midia-sel input[type="checkbox"] { width: 20px; height: 20px; flex: none; }
  .mad-tabela td > input[type="checkbox"] { width: 22px; height: 22px; }

  /* letras de no mínimo 12 px */
  .selo { font-size: .78rem; }
  .tabela td[data-rot]::before, .tabela.cartoes td[data-rot]::before, .tabela.rv-tabela td[data-rot]::before, .tabela.rv-tabela.cartoes td[data-rot]::before { font-size: .75rem; }
  .pe-rot, .rv-rot, .opcional, .mo-selo, .mo-novo, .mini-dur, .cor-op small { font-size: .75rem; }
  .rd-midia span small { font-size: .78rem; }
  .acoes-icones .btn[data-num]::after { min-width: 18px; height: 18px; line-height: 18px; font-size: 12px; }
  .mo-lat em, .mo-cat-nome, .rd-res-parte > b, .mo-rot { font-size: .76rem; }
  .mo-ver { min-height: 36px; }

  /* textos longos quebram a linha em vez de passar da borda (selo "TV desligada — atualiza quando voltar (publicada há…)", e-mail, link) */
  .tabela td .selo, .pub-estado .selo, .ficha-info .sub .selo { white-space: normal; max-width: 100%; line-height: 1.3; padding-top: 3px; padding-bottom: 3px; border-radius: 12px; }
  .pub-estado { min-width: 0; }
  .tabela td, .aviso, .lista-ativ li { overflow-wrap: anywhere; }
  .toast { width: max-content; max-width: calc(100vw - 32px); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } /* aviso flutuante na largura da tela, não na metade */

  /* Atividades: a 2ª linha de "data · quem (conta)" começa com o mesmo recuo do cartão */
  .tabela.atividades tr { padding-left: 14px; padding-right: 14px; }
  .tabela.atividades td { padding-left: 0; padding-right: 0; }
  .tabela.atividades td[data-rot="Quem"] { padding-left: 4px; }
  /* Revendas: "TVs ativas (dela / na rede)" quebra a linha; Clientes: o número fica ao lado de "Telas ativas:" */
  .tabela.rv-tabela td.rv-tv, .tabela.rv-tabela.cartoes td.rv-tv { white-space: normal; }
  .tabela.lista-contas td[data-rot]:not(.principal) .conta-link { display: inline; }
  /* página da TV: "Trocar aparelho" e "Desvincular aparelho" separados; Conteúdo/Aparelho com o rótulo na linha do valor */
  #aparelho form.form-desvincular { display: block; margin-top: 14px; padding-top: 14px; }
  .dados { align-items: start; }
  .dados dd { display: block; }
  /* Minha conta: texto das abas no meio da altura */
  .abas-pagina .aba { text-align: center; }
  /* uso do disco: "162 MB de 20 GB" numa linha e o trilho da barra visível no cartão */
  .espaco-txt { flex-wrap: wrap; align-items: baseline; }
  .espaco-txt > span { display: inline; }
  .espaco-txt > span > .ic { vertical-align: -3px; margin-right: 4px; }
  .espaco-txt em { white-space: nowrap; margin-left: auto; }
  .cartao .espaco-cartao progress { background: var(--cartao-2); }
  .cartao .espaco-cartao progress::-webkit-progress-bar { background: var(--cartao-2); }

  /* Minhas TVs: cartão de 2 colunas (Tela, Situação, Conteúdo e os botões na largura toda) */
  .tabela.lista-telas tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
  .tabela.lista-telas td { width: auto; min-width: 0; }
  .tabela.lista-telas td[data-rot="Tela"], .tabela.lista-telas td[data-rot="Situação"], .tabela.lista-telas td[data-rot="Conteúdo"], .tabela.lista-telas td.acoes-linha { grid-column: 1 / -1; }
  /* Playlists, Widgets e a lista de TVs do Início: "Rótulo: valor" na mesma linha (como Revendas e Clientes) */
  .tabela.lista-listas td[data-rot]:not([data-rot="Nome"]),
  .tabela.lista-widgets td[data-rot="Tipo"], .tabela.lista-widgets td[data-rot="Usado em"],
  .conteudo-inicio ~ .tabela-wrap > .tabela td[data-rot]:not([data-rot="Tela"]) { display: inline-block; width: auto; max-width: 100%; padding: 2px 4px 2px 14px; font-size: .86rem; vertical-align: top; }
  .tabela.lista-listas td[data-rot]:not([data-rot="Nome"])::before,
  .tabela.lista-widgets td[data-rot="Tipo"]::before, .tabela.lista-widgets td[data-rot="Usado em"]::before,
  .conteudo-inicio ~ .tabela-wrap > .tabela td[data-rot]:not([data-rot="Tela"])::before { display: inline; content: attr(data-rot) ": "; text-transform: none; letter-spacing: 0; font-size: .78rem; }
  /* tabelas da Rede: cartão de 2 colunas; nome, botões e o que tem formulário na largura toda */
  .tabela.rd-tabela tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2px; }
  .tabela.rd-tabela td { width: auto; min-width: 0; }
  .tabela.rd-tabela td.principal, .tabela.rd-tabela td.acoes-linha, .tabela.rd-tabela td:has(form, select, .btn) { grid-column: 1 / -1; }
  .tabela.rd-tabela td meter.rd-barra { width: 60px; min-width: 0; } /* "▬ 5 de 20" cabe na meia coluna */
  /* Seus ganhos (dono do ponto): Gerado / Recebido / A receber em 2 colunas, o mês em cima */
  body.anun .tabela tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.anun .tabela td { width: auto; min-width: 0; }
  body.anun .tabela td.principal { grid-column: 1 / -1; }
  /* Rede: "Em qual TV" legível; botões do topo com espaço entre eles */
  .rd-ponto-op .rd-ponto-fila select { width: 100%; min-height: 40px; padding: 8px 10px; font-size: .9rem; }
  .pagina > p:not([class]):has(> a.btn) { display: flex; flex-wrap: wrap; gap: 8px; }

  /* seleção em lote (Fotos e vídeos e Agenda): o seletor e o botão cabem na tela e a barra não cobre o fim da página */
  .barra-lote .lote-mover { flex-wrap: wrap; min-width: 0; max-width: 100%; }
  .barra-lote .lote-mover select { flex: 1 1 110px; min-width: 0; width: auto; }
  .barra-lote .lote-mover .btn { flex: 1 0 auto; justify-content: center; }
  body.com-lote .pagina { padding-bottom: 300px; }
  /* janelas compridas (Mostrar numa TV, Nova playlist): os botões ficam sempre à vista, presos embaixo da janela */
  .modal.modal-usar > .acoes, .modal.modal-nova-lista > .acoes { position: sticky; bottom: -24px; z-index: 1; margin: 12px -24px -24px; padding: 12px 24px 16px; background: var(--cartao); border-top: 1px solid var(--borda); }
  .modal.modal-usar > .acoes .btn { flex: 1 1 auto; }
  .modal-nova-lista .escolhas { margin-bottom: 14px; }
  .nova-lista-tvs .checks { flex-wrap: nowrap; overflow-x: hidden; } /* "Em quais TVs vai passar?": todas as TVs rolando para baixo, não para o lado */
  /* outros */
  .pav-lado { flex: 0 0 auto; }
  .campo-tema { margin-top: 14px; display: block; }
  .nota-alca { display: none; }
  .nota-setas { display: inline; }
}
@media (max-width: 860px) and (hover: none) {
  /* toque não deixa o item do menu "aceso" depois de voltar */
  .lateral nav a:hover:not(.on), .eu > a:hover:not(.on):not(.contato-menu), .sair:hover { background: none; color: var(--texto-2); }
}
@media (max-width: 860px) and (max-height: 500px) {
  /* celular deitado: barras de cima e de baixo mais baixas (sobra mais tela para o conteúdo) */
  .barra { padding-top: 6px; padding-bottom: 6px; }
  .barra-publicar { flex-wrap: nowrap; padding: 8px 12px; bottom: 6px; }
  .barra-publicar .btn { width: auto; }
  .barra-salvar { padding: 6px 10px; }
  .barra-salvar .acoes { width: auto; flex: 1 1 auto; justify-content: flex-end; }
  .barra-salvar .acoes .btn, .barra-salvar .acoes [data-p-copiar] { flex: 0 1 auto; }
}
@media (min-width: 600px) and (max-width: 860px) {
  /* tablet: Minhas TVs em 3 colunas */
  .tabela.lista-telas tbody tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tabela.lista-telas td[data-rot="Situação"], .tabela.lista-telas td[data-rot="Conteúdo"] { grid-column: auto; }
}
@media (max-width: 640px) {
  /* Rede → Vagas por ponto: o nome do ponto aparece inteiro e "Parceria local: …" desce para a linha de baixo */
  .rd-vaga-nome { flex-wrap: wrap; row-gap: 2px; }
  .rd-vaga-nome b { flex: 1 1 0; min-width: 0; }
  .rd-vaga-nome small { flex: 1 1 100%; white-space: normal; padding-left: 23px; }
  /* fotos e vídeos dos anúncios em 2 colunas; a escolha rola dentro da caixa e o botão "Pôr os marcados" fica perto */
  .rd-midias { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rd-midia { padding: 6px; }
  .rd-midias.escolher { max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; }
  .rd-tv-extra select { font-size: .85rem; padding-left: 8px; }
  /* "7. Mais TVs": nome da TV e a lixeira em cima, "O que ela faz" na largura toda (o texto da escolha aparece) */
  .rd-tv-extra .rd-tv-nome { grid-column: 1; grid-row: 1; }
  .rd-tv-extra > button { grid-column: 2; grid-row: 1; }
  .rd-tv-extra .rd-tv-modo { grid-column: 1 / -1; grid-row: 2; }
  /* Modelos → Categorias: o nome na linha toda; "Aparece" e Salvar embaixo; "N modelos" na última linha */
  .mo-cat-form { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; align-items: center; }
  .mo-cat-form > label:not(.pilula) { grid-column: 1 / -1; }
  .mo-cat-form > .pilula { grid-row: 2; grid-column: 1; justify-self: start; }
  .mo-cat-form > button { grid-row: 2; grid-column: 2; }
  .mo-cat-n { grid-row: 3; grid-column: 1 / -1; justify-self: start; }
  .mo-cat-n:empty { display: none; }
  /* ficha: "Contas logo abaixo" mais baixas (nome e tipo na mesma linha); 2 colunas cortavam o nome no meio */
  .chips-contas { gap: 6px; }
  .chip-conta { padding: 8px 12px; }
  .chip-conta > span { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; min-width: 0; overflow-wrap: anywhere; }
}
@media (max-width: 600px) {
  .rd-passos { margin-left: 0; padding-left: 22px; }
}
@media (max-width: 520px) {
  .interruptor-txt { font-size: .76rem; } /* "Ligado/Desligado" embaixo do interruptor: 12 px */
}
@media (max-width: 560px) {
  .mo-lateral { flex-wrap: wrap; overflow: visible; } /* Modelos: todas as categorias à vista (antes a 3ª ficava fora da tela, rolando de lado) */
}
@media (max-width: 480px) {
  .barra h1 { font-size: 1.05rem; }
  .logs-filtros .rv-f:has(> select[name="ordem"]) { grid-column: 1 / -1; }
  .midias-filtros .select-curto { flex: 1 1 100%; }
  /* área do anunciante e do dono do ponto: resumo em 2 colunas; o "·" solto some quando o selo desce de linha */
  body.anun .rd-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body.anun .rd-resumo > div { padding: 9px 10px; min-width: 0; }
  body.anun .rd-resumo b { font-size: .95rem; overflow-wrap: anywhere; }
  body.anun .anun-contrato h2 { row-gap: 4px; }
  body.anun .anun-contrato h2 .sep { display: none; }
}
@media (max-width: 420px) {
  /* login / 2 etapas: o título cabe numa linha */
  .login { padding: 24px 18px; }
  .login .marca.grande { font-size: 1.2rem; }
  /* Posição da TV (ativar e página da TV): desenho da TV ao lado do texto */
  .escolhas-grade .escolha:has(> input[name="posicao"]) > span { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; align-items: center; }
  .escolhas-grade .escolha:has(> input[name="posicao"]) > span > .mini-tv { grid-column: 1; grid-row: 1 / span 2; margin: 0 auto; }
  .escolhas-grade .escolha:has(> input[name="posicao"]) > span > :not(.mini-tv) { grid-column: 2; }
  .rv-f select, select.select-curto { font-size: .9rem; padding-left: 10px; }
  /* paginação « ‹ 98 99 100 101 102 › » numa linha */
  .pag-nav { flex: 1 1 100%; justify-content: center; gap: 2px; }
  .pag-n { min-width: 32px; padding: 0 4px; }
}

/* ---------- 25/10/2026 (pedido do dono): celular — rodada 2: Salvar/Cancelar da janela Editar (Revendas) presos embaixo; o aviso de
   erro das janelas com botões presos sobe para o alto da janela (a barra presa cobria o aviso: tocava em "Mostrar agora" e não
   aparecia nada); caixas de marcar da Agenda e do Enviar para as TVs com área de toque de ~40 px. Tudo até 860 px: o computador
   não muda. ---------- */
@media (max-width: 860px) {
  /* Revendas → Editar (e Créditos, a mesma janela): Salvar e Cancelar sempre à vista, presos embaixo da janela */
  .modal.rv-modal > .acoes.rv-modal-acoes { position: sticky; bottom: calc(-18px - env(safe-area-inset-bottom, 0px)); z-index: 1; margin: 4px -16px calc(-18px - env(safe-area-inset-bottom, 0px)); padding: 12px 16px calc(18px + env(safe-area-inset-bottom, 0px)); background: var(--cartao); border-top: 1px solid var(--borda); }
  /* aviso de erro (Mostrar numa TV, Nova playlist, Trocar a TV da playlist, Editar/Créditos): vai para o alto da janela e
     continua à vista ao rolar. Só enquanto o aviso aparece a janela vira coluna flex (para mudar a ordem). */
  .modal.modal-usar:has(> .aviso.erro:not(.oculto)), .modal.modal-nova-lista:has(> .aviso.erro:not(.oculto)), .modal.rv-modal:has(> .aviso.erro:not(.oculto)) { display: flex; flex-direction: column; }
  .modal.modal-usar:has(> .aviso.erro:not(.oculto)) > *, .modal.modal-nova-lista:has(> .aviso.erro:not(.oculto)) > *, .modal.rv-modal:has(> .aviso.erro:not(.oculto)) > * { flex-shrink: 0; }
  .modal.modal-usar > .aviso.erro:not(.oculto), .modal.modal-nova-lista > .aviso.erro:not(.oculto), .modal.rv-modal > .aviso.erro:not(.oculto) {
    order: -1; position: sticky; top: -24px; z-index: 2; margin: -24px -24px 14px; padding: 12px 24px; border-radius: 16px 16px 0 0; border-width: 0 0 1px;
    background: linear-gradient(color-mix(in srgb, var(--vermelho) 14%, transparent), color-mix(in srgb, var(--vermelho) 14%, transparent)), var(--cartao); }
  .modal.rv-modal > .aviso.erro:not(.oculto) { top: -18px; margin: -18px -16px 14px; padding: 12px 16px; } /* janela de baixo: margem de 18/16 px */
  /* em coluna flex as margens não se juntam: os mesmos espaços de antes entre os blocos (sem o aviso no meio) */
  .modal.modal-usar:has(> .aviso.erro:not(.oculto)) > .acoes, .modal.rv-modal:has(> .aviso.erro:not(.oculto)) > .acoes { margin-top: 0; }
  .modal.modal-nova-lista:has(> .aviso.erro:not(.oculto)) > .escolhas, .modal.modal-nova-lista:has(> .aviso.erro:not(.oculto)) > .escolhas ~ .acoes { margin-top: 0; }
  .modal.modal-nova-lista:has(> .aviso.erro:not(.oculto)) > .modal-campo:first-child { margin-top: 0; }
  /* caixas de marcar: Agenda (escolher a TV para a seleção em lote) e Enviar para as TVs (cada TV) */
  .tabela .col-sel .check input[type="checkbox"] { width: 22px; height: 22px; }
  .tabela td.col-sel { padding-top: 0; padding-bottom: 0; }
  .tabela .col-sel .check { min-height: 40px; }
  .pub-sel input[type="checkbox"] { width: 22px; height: 22px; }
  label.pub-sel { position: relative; }
  label.pub-sel::after { content: ""; position: absolute; inset: -11px -9px; } /* área de toque maior, mesmo desenho */
}