@import url("https://fonts.googleapis.com/css2?family=Bungee+Shade&family=Chakra+Petch:wght@500;600;700&family=Figtree:wght@400;500;600&family=Fredoka:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;600&family=Quicksand:wght@500;600;700&family=Rubik+Glitch&family=Sora:wght@400;600;700;800&family=Space+Mono:wght@400;700&family=Titillium+Web:wght@400;600;700&display=swap");
:root {
  --bg: #08111f;
  --panel: #121c2b;
  --panel-2: #172435;
  --border: #28384d;
  --text: #e6edf6;
  --muted: #9fb0c4;
  --blue: #3b82f6;
  --cyan: #06b6d4;
  --green: #22c55e;
  --orange: #f59e0b;
  --purple: #a855f7;
  --pink: #ec4899;
  --red: #ef4444;
  /* Sem isto, o navegador desenha os controles nativos (popup do <select>,
     date/time picker, scrollbar) sempre no estilo claro por padrao, mesmo com
     o resto da pagina inteiramente escuro - era o fundo branco no dropdown de
     "Periodo" do Relatorio Diario. So o tema Flor e claro de verdade; os
     outros (inclusive o padrao) usam o painel escuro do site. */
  color-scheme: dark;
}
:root[data-tema="flor"], :root[data-tema="gelo"], :root[data-tema="girassol"], :root[data-tema="comando"] { color-scheme: light; }
/* Reforco alem do color-scheme: em varios Chrome/Firefox (principalmente no
   Linux, onde o popup do <select> pode ser desenhado pelo toolkit nativo do
   SO) o color-scheme sozinho nao troca a cor do popup - mas cor solida
   explicita em option costuma ser respeitada mesmo assim. */
option {
  background-color: var(--panel-2);
  color: var(--text);
}
:root[data-tema="flor"] option, :root[data-tema="gelo"] option, :root[data-tema="girassol"] option, :root[data-tema="comando"] option {
  background-color: var(--panel);
  color: var(--text);
}
* { box-sizing: border-box; }
/* o atributo hidden vem do estilo do navegador e perde para qualquer
   display: de classe nossa (.grid, .card...) — aqui ele volta a valer */
[hidden] { display: none !important; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select { font: inherit; }
.app-shell {
  width: min(1440px, calc(100% - 32px));
  margin: 0 auto;
  padding: 18px 0 48px;
}
.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0 18px;
  border-bottom: 1px solid var(--border);
}
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex: 0 0 auto;
}
.topbar h1 {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, #60a5fa, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.topbar p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: .9rem;
}
.top-actions { display: flex; gap: 8px; align-items: center; }
.sync-badge {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid rgba(34, 197, 94, .35);
  background: rgba(34, 197, 94, .12);
  color: #86efac;
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}
.icon-button {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  font-weight: 800;
  transition: transform .15s ease, border-color .15s ease;
}
.icon-button.icon-button-text {
  width: auto;
  padding: 0 10px;
  font-size: .68rem;
  letter-spacing: .02em;
}
.icon-button:hover {
  border-color: var(--blue);
  transform: translateY(-1px);
}
.text-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: #bfdbfe;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  font-weight: 800;
  font-size: .82rem;
  white-space: nowrap;
  transition: transform .15s ease, border-color .15s ease;
}
.text-button:hover {
  border-color: var(--blue);
  transform: translateY(-1px);
}
.filters {
  display: grid;
  grid-template-columns: repeat(6, minmax(140px, 1fr));
  gap: 12px;
  margin: 18px 0;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.filters[hidden] { display: none; }
.filters-compact { grid-template-columns: repeat(4, minmax(160px, 1fr)); }
.filtros-cadastro-onu { align-items: end; }
.filtros-cadastro-onu > label { min-width: 0; }
.filters-acoes { display: flex; gap: 8px; align-self: end; }
.filters-acoes button { width: auto; white-space: nowrap; padding: 0 16px; }
.filter-hint {
  font-size: .8rem;
  color: var(--muted);
  margin: -6px 0 16px;
  padding: 9px 13px;
  background: rgba(59, 130, 246, .08);
  border: 1px solid rgba(59, 130, 246, .2);
  border-radius: 8px;
}
.filter-hint.active {
  background: rgba(245, 158, 11, .1);
  border-color: rgba(245, 158, 11, .3);
  color: #fbbf24;
}
.notice-banner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 0;
  padding: 9px 13px;
  background: rgba(59, 130, 246, .08);
  border: 1px solid rgba(59, 130, 246, .2);
  border-radius: 8px;
}
.notice-legend {
  margin: 0;
  font-size: .8rem;
  color: var(--muted);
}
.notice-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.notice-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .08);
  border: 1px solid var(--border);
  font-size: .8rem;
}
.notice-item .notice-tipo {
  font-weight: 800;
  text-transform: uppercase;
  font-size: .68rem;
  padding: 2px 8px;
  border-radius: 999px;
  color: #fff;
}
.notice-item .notice-period { color: var(--muted); }
.pessoa-fem { color: #f9a8d4; }
.pessoa-masc { color: #93c5fd; }
.notice-item.notice-upcoming { border-style: dashed; opacity: .8; }
@keyframes notice-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
.notice-blue, .notice-green { animation: notice-blink 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .notice-blue, .notice-green { animation: none; }
}
.notice-purple .notice-tipo { background: var(--purple); }
.notice-red .notice-tipo { background: var(--red); }
.notice-blue .notice-tipo { background: var(--blue); }
.notice-orange .notice-tipo { background: var(--orange); }
.notice-green .notice-tipo { background: var(--green); }
.filters label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}
.filtro-ajuda { cursor: help; border-bottom: 1px dotted var(--muted); }
.filters select, .filters input[type="text"], .filters button, .login-form input {
  width: 100%;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0e1726;
  color: var(--text);
  padding: 0 11px;
  outline: none;
}
.filters input[type="date"] { width: 100%; height: 38px; border: 1px solid var(--border); border-radius: 8px; background: #0e1726; color: var(--text); padding: 0 11px; outline: none; color-scheme: dark; }
.filters select:focus, .filters input[type="text"]:focus, .login-form input:focus {
  border-color: var(--blue);
}
.filters button {
  align-self: end;
  cursor: pointer;
  color: #bfdbfe;
  transition: border-color .15s ease;
}
.filters button:hover {
  border-color: var(--blue);
}
/* .filters button (acima) forca fundo escuro/largura 100% em qualquer botao
   do grid de filtros - sem isso o "+ Registrar" viraria um botao cinza igual
   ao "Limpar", perdendo o destaque verde que .btn-ok tem em outras telas. */
.filters .btn-ok {
  width: auto;
  height: 38px;
  padding: 0 16px;
  align-self: end;
  justify-self: start;
  color: #86efac;
  background: rgba(34, 197, 94, .16);
  border-color: rgba(34, 197, 94, .55);
}
.filters .btn-ok:hover {
  background: rgba(34, 197, 94, .28);
  border-color: var(--green);
  transform: none;
}
.filters .cancelamento-sync-btn {
  width: auto;
  padding: 0 14px;
  align-self: end;
  justify-self: start;
  white-space: nowrap;
  color: var(--text);
  background: rgba(20, 184, 166, .10);
}
.filters .cancelamento-sync-btn:disabled { opacity: .65; cursor: wait; }
.cancelamento-sync-status {
  align-self: end;
  padding: 0 2px 9px;
  color: var(--muted);
  font-size: .72rem;
  white-space: nowrap;
}
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.kpi {
  position: relative;
  overflow: hidden;
  min-height: 112px;
  padding: 15px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}
.kpi-clicavel { cursor: pointer; }
.kpi::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--accent, var(--blue));
}
.kpi span {
  display: block;
  color: var(--muted);
  text-transform: uppercase;
  font-size: .68rem;
  font-weight: 800;
}
.kpi strong {
  display: block;
  margin-top: 8px;
  font-size: clamp(1.08rem, 1.55vw, 1.62rem);
  line-height: 1.05;
  word-break: normal;
  overflow-wrap: normal;
}
.kpi small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-weight: 700;
}
.kpi small.delta-up { color: var(--green); }
.kpi small.delta-down { color: var(--red); }
.kpi small.kpi-secondary {
  margin-top: 4px;
  font-size: .72rem;
  font-weight: 600;
  opacity: .8;
}
.kpi .kpi-refresh {
  margin-top: 10px;
  min-height: 24px;
  font-size: .66rem;
  padding: 0 8px;
}
.kpi .kpi-ver {
  position: absolute;
  right: 12px;
  bottom: 12px;
  min-height: 24px;
  font-size: .66rem;
  padding: 0 10px;
}
.sparkline { margin-top: 8px; }
.sparkline-svg { display: block; width: 100%; height: 30px; }
.kpi-blue { --accent: var(--blue); }
.kpi-cyan { --accent: var(--cyan); }
.kpi-green { --accent: var(--green); }
.kpi-orange { --accent: var(--orange); }
.kpi-purple { --accent: var(--purple); }
.kpi-pink { --accent: var(--pink); }
.kpi-red { --accent: var(--red); }
/* Relatorio FiberHome: cada cartao com a cor do que mede (24/10/2026) */
.kpis-fiberhome .kpi[data-kpi-filtro] { --kc: var(--blue); border-color: color-mix(in srgb, var(--kc) 40%, var(--border)); background: linear-gradient(160deg, color-mix(in srgb, var(--kc) 14%, var(--panel)), var(--panel) 70%); }
.kpis-fiberhome .kpi[data-kpi-filtro]::before { background: var(--kc); height: 4px; }
.kpis-fiberhome .kpi[data-kpi-filtro] strong { color: var(--kc); }
.kpis-fiberhome .kpi[data-kpi-filtro="total"] { --kc: var(--blue); }
.kpis-fiberhome .kpi[data-kpi-filtro="ativos"] { --kc: var(--green); }
.kpis-fiberhome .kpi[data-kpi-filtro="problema"] { --kc: var(--pink); }
.kpis-fiberhome .kpi[data-kpi-filtro="inativos"] { --kc: var(--muted); }
.kpis-fiberhome .kpi[data-kpi-filtro="critico"] { --kc: var(--red); }
.kpis-fiberhome .kpi[data-kpi-filtro="ruim"] { --kc: var(--orange); }
.kpis-fiberhome .kpi[data-kpi-filtro="aceitavel"] { --kc: var(--cyan); }
.kpis-fiberhome .kpi[data-kpi-filtro="bom"] { --kc: var(--green); }
.kpi-ativo-filtro { outline: 2px solid var(--accent, var(--red)); outline-offset: 2px; }
.dias-sem-acesso { color: var(--muted); }
.dias-sem-acesso.aviso { color: var(--orange); }
/* Cartoes de meta/bonus (Vendas Internas da Central de Atendimentos) -
   igual o gabiplanilha antigo mostrava, so com as cores/variaveis deste
   sistema em vez de CSS proprio. */
.meta-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.meta-nome { font-weight: 700; }
.meta-pct { color: var(--muted); font-size: .85rem; }
.meta-bar-track {
  height: 6px;
  border-radius: 999px;
  background: var(--panel-2);
  margin: 8px 0;
  overflow: hidden;
}
.meta-bar-fill {
  height: 100%;
  background: var(--cyan);
  border-radius: 999px;
}
.meta-info { color: var(--muted); font-size: .8rem; margin-bottom: 6px; }
.meta-status-linha1 { margin-bottom: 4px; }
.pill.meta-bonus { background: rgba(34, 197, 94, .16); color: var(--green); }
.pill.meta-baixo { background: rgba(245, 158, 11, .14); color: var(--orange); }
.meta-valor { font-size: 1.1rem; font-weight: 800; margin-top: 4px; }
.meta-valor-label { font-size: .7rem; font-weight: 400; color: var(--muted); }
.meta-pago-selo { color: var(--green); font-size: .82rem; margin-top: 4px; }
.meta-aviso { color: var(--orange); font-size: .74rem; margin-top: 4px; }
.meta-pendente { color: var(--orange); font-size: .8rem; margin-top: 6px; }
.grid {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}
/* Faixa de titulo de uma secao, com o botao de ocultar a direita. */
.secao-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 10px;
}
.secao-cabecalho > span {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.grid-2 { grid-template-columns: 1.35fr 1fr; }
.grid-keyti-resumo { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; }
.keyti-resumo-card { display: flex; flex-direction: column; }
.keyti-resumo-itens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; align-content: start; }
.keyti-resumo-item { min-width: 0; min-height: 112px; box-sizing: border-box; padding: 15px; }
.keyti-resumo-item span { overflow-wrap: anywhere; }
.keyti-resumo-item strong { font-variant-numeric: tabular-nums; }
.keyti-resumo-total { grid-column: 1 / -1; border-color: var(--accent, #22c55e); }
.keyti-motivos-card .chart-wrap { min-height: 220px; }

.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-table { grid-template-columns: .9fr 1.45fr; }
.grid-2-1 { grid-template-columns: 1.2fr 1fr; }
.grid-table-full { grid-template-columns: 1fr; }
.estoque-conferencia-resumo { grid-template-columns: minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.15fr); align-items: stretch; }
.card {
  min-width: 0;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.card h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: .92rem;
}
.card h2 span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  flex: 0 0 auto;
}
.card h2 small {
  margin-left: 4px;
  color: var(--muted);
  font-weight: 600;
}
.card-sinais h2 {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  align-items: center;
  gap: 4px 8px;
}
.card-sinais h2 small {
  grid-column: 2;
  margin: 0;
  line-height: 1.35;
}
.registro-toolbar { display:flex; align-items:center; gap:8px; min-width:0; }
.registro-toolbar .table-search { width:min(320px, 38vw); }
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.card-head h2 { margin-bottom: 0; }
.table-search {
  height: 36px;
  width: 320px;
  min-width: 220px;
  flex: 0 1 320px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0e1726;
  color: var(--text);
  padding: 0 12px;
  font-size: .85rem;
  outline: none;
}
.table-search:focus { border-color: var(--blue); }
.table-search::placeholder { color: var(--muted); }
.summary-textarea {
  width: 100%;
  max-height: 480px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0e1726;
  color: var(--text);
  padding: 12px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: .82rem;
  line-height: 1.6;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  resize: vertical;
}
.sum-title { color: var(--blue); font-weight: 700; }
.sum-host { color: var(--cyan); font-weight: 600; }
.sum-time { color: var(--orange); }
.sum-value { color: var(--green); font-weight: 600; }
.sum-sev-ok { color: var(--green); font-weight: 700; }
.sum-sev-mid { color: var(--orange); font-weight: 700; }
.sum-sev-no { color: var(--red); font-weight: 700; }
.green { background: var(--green) !important; }
.orange { background: var(--orange) !important; }
.purple { background: var(--purple) !important; }
.cyan { background: var(--cyan) !important; }
.pink { background: var(--pink) !important; }
.red { background: var(--red) !important; }
.ramais-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.ramal-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #0e1726;
}
.ramal-btn .ramal-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.ramal-btn .ramal-info { min-width: 0; }
.ramal-btn .ramal-nome {
  display: block;
  font-weight: 800;
  font-size: .84rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ramal-btn .ramal-meta {
  display: block;
  font-size: .7rem;
  color: var(--muted);
}
.ramal-btn .ramal-ausencia {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  color: var(--orange);
}
.ramais-aviso-dev {
  font-size: .72rem;
  color: var(--orange);
  margin: -.2rem 0 .6rem;
}
.ramal-btn.on {
  border-color: rgba(34, 197, 94, .45);
  background: rgba(34, 197, 94, .10);
}
.ramal-btn.on .ramal-dot { background: var(--green); box-shadow: 0 0 8px rgba(34, 197, 94, .8); }
.ramal-btn.on .ramal-nome { color: #86efac; }
.ramal-btn.off {
  border-color: rgba(239, 68, 68, .45);
  background: rgba(239, 68, 68, .10);
  /* Offline pisca pra chamar atencao: e a condicao que exige acao. */
  animation: ramal-blink 1.2s ease-in-out infinite;
}
.ramal-btn.off .ramal-dot { background: var(--red); box-shadow: 0 0 8px rgba(239, 68, 68, .8); }
.ramal-btn.off .ramal-nome { color: #fca5a5; }
.ramal-btn.unknown { opacity: .55; }
.ramal-btn.unknown .ramal-dot { background: var(--muted); }
@keyframes ramal-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
  .ramal-btn.off { animation: none; }
}
.chart-wrap {
  position: relative;
  height: 280px;
}
.bar-mini {
  height: 4px;
  background: #0e1726;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
}
.bar-mini span {
  display: block;
  height: 100%;
  background: var(--blue);
  border-radius: 3px;
}
.table-wrap {
  overflow: auto;
  max-height: 510px;
  border: 1px solid rgba(40, 56, 77, .65);
  border-radius: 8px;
}
.table-wrap.compact { max-height: 390px; }
/* Tabela ja paginada: rolagem interna so duplicaria a rolagem da pagina.

   overflow-y: clip e nao visible de proposito (mesmo motivo do
   .layout { overflow-x: clip } acima): com overflow-x: auto (herdado de
   .table-wrap) e overflow-y: visible, a regra do CSS que força os dois
   eixos a concordarem transforma overflow-y em auto por tras dos panos -
   isso cria um container de rolagem proprio pra essa div, e o cabecalho
   sticky (th { position: sticky }) passa a grudar so dentro dela, nao na
   tela inteira (sumia ao rolar a pagina pra baixo - achado real do
   usuario). clip evita esse acoplamento sem criar container de rolagem,
   igual overflow-x: auto continua funcionando pra rolar tabelas largas
   pros lados. */
.table-wrap.table-wrap-inteira { max-height: none; overflow-y: clip; }
.table-footnote, .chart-footnote {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
}
.empty-cell {
  color: var(--muted);
  text-align: center;
  font-weight: 700;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
}
th, td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(40, 56, 77, .55);
  text-align: left;
  vertical-align: top;
}
th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel-2);
  color: var(--muted);
  font-size: .68rem;
  text-transform: uppercase;
}
tr:hover td {
  background: rgba(59, 130, 246, .05);
}
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: .68rem;
  font-weight: 800;
}
.pill.ok { background: rgba(34, 197, 94, .14); color: #86efac; }
.pill.no { background: rgba(239, 68, 68, .14); color: #fca5a5; }
.pill.sistema { background: rgba(56, 189, 248, .16); color: #7dd3fc; letter-spacing: .06em; }
.pill.destino-banco { background: rgba(56, 189, 248, .16); color: #7dd3fc; letter-spacing: .04em; }
.pill.destino-planilha { background: rgba(34, 197, 94, .14); color: #86efac; letter-spacing: .04em; }
.pill.central { background: rgba(236, 72, 153, .18); color: #f9a8d4; letter-spacing: .06em; }
.pill.high { background: rgba(34, 197, 94, .14); color: #86efac; }
.pill.mid { background: rgba(245, 158, 11, .14); color: #fbbf24; }
.pill.low { background: rgba(239, 68, 68, .14); color: #fca5a5; }
/* Linha de cliente que aparece recorrente nas duas bases (Comercial E
   Suporte) - Clientes Recorrentes 30 Dias da Central, pedido do usuario em
   2026-09-30. Mesmo laranja de .pill.mid, so' que em overlay bem leve pra
   nao brigar com o texto da linha. */
tr.linha-recorrente-cruzada { background: rgba(245, 158, 11, .1); }

/* Gradiente de 4 niveis do Relatorios FiberHome (pedido do usuario com
   print: .pill.ok/mid/no do resto do sistema so tem 3 cores, e CRITICO/RUIM
   ficavam com a MESMA cor vermelha - aqui precisa diferenciar visualmente
   do melhor pro pior: verde -> amarelo -> laranja -> vermelho. */
.pill.fh-bom { background: rgba(34, 197, 94, .16); color: #86efac; }
.pill.fh-aceitavel { background: rgba(234, 179, 8, .16); color: #eab308; }
.pill.fh-ruim { background: rgba(245, 158, 11, .18); color: #fbbf24; }
.pill.fh-critico { background: rgba(239, 68, 68, .22); color: #fca5a5; font-weight: 700; }

/* KPI clicavel (Relatorios FiberHome: clicar no card abre a lista daquela
   faixa numa janela flutuante) - so cursor+hover, o .kpi normal ja tem a
   transicao de transform/box-shadow no :hover, isto so avisa que e clicavel. */
.kpi-clicavel { cursor: pointer; }
.kpi-clicavel:hover { border-color: var(--cyan); }

/* Contas a Pagar vencidas sem pagamento (pedido do usuario por audio,
   2026-09-28: "se nao tiver marcado como pago, ele fique me dando alerta")
   - reaproveita a MESMA animacao correio-pisca ja usada no resto do
   sistema (chat, ticket, plantao), so aplicada num pill em vez de um selo. */
.pill.vencido-piscando { animation: correio-pisca 1.1s ease-in-out infinite; }
/* Coluna "Forma Pgto" (ex: "SANTANDER 13000901-3") quebrava em 2 linhas e
   deixava a linha da tabela mais alta que o resto (reportado com print). */
#listaContas td:nth-child(6) { white-space: nowrap; }

/* Contas a Pagar: pedido do usuario com print - o "Mes"+botoes ficava
   colado na borda direita, longe do titulo (.topbar usa justify-content:
   space-between por padrao). Aqui, mais proximo do titulo. Tambem o
   input[type=month] nativo do navegador vinha sem tema nenhum (cinza claro,
   destoando do resto escuro) - estilo igual ao que .filters input[type=date]
   ja usa. */
.topbar-contas-pagar { justify-content: flex-start; }
.topbar-contas-pagar .topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.topbar-contas-pagar input[type="month"],
.topbar-contas-pagar input[type="text"] {
  height: 38px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel-2); color: var(--text); padding: 0 11px; outline: none;
}
.topbar-contas-pagar input::placeholder { color: var(--muted); }
.topbar-contas-pagar input[type="text"] { width: 260px; }  /* 15/10/2026: fundo e cor do tema (antes preto fixo, ruim nos temas claros) */
@media (prefers-reduced-motion: reduce) {
  .pill.vencido-piscando { animation: none; }
}
.login-body {
  display: grid;
  place-items: center;
  background: #08111f;
}
/* Monster e Mundo Invertido nunca tinham ganho ajuste de login-body (os dois
   ja sao bem escuros perto do padrao, mas nao a cor exata do tema -
   auditoria de 2026-09-12). Os outros temas ja tem override proprio abaixo. */
[data-tema="monster"] .login-body,
[data-tema="invertido"] .login-body {
  background: var(--bg);
}
.login-shell {
  width: min(420px, calc(100% - 32px));
}
.login-panel {
  padding: 28px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
}
.brand-logo {
  display: block;
  width: min(210px, 72%);
  height: auto;
  margin: 0 auto 18px;
}
.login-panel h1 {
  margin: 0;
  font-size: 1.55rem;
  line-height: 1.1;
}
.login-panel p {
  margin: 8px 0 24px;
  color: var(--muted);
}
.login-form {
  display: grid;
  gap: 14px;
}
.login-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
}
.login-form button {
  height: 42px;
  border: 0;
  border-radius: 8px;
  background: var(--blue);
  color: white;
  font-weight: 800;
  cursor: pointer;
  transition: filter .15s ease;
}
.login-form button:hover {
  filter: brightness(1.08);
}
.form-error {
  padding: 10px 12px;
  color: #fecaca;
  background: rgba(239, 68, 68, .12);
  border: 1px solid rgba(239, 68, 68, .28);
  border-radius: 8px;
  font-weight: 700;
}
.admin-entry {
  display: inline-flex;
  margin-top: 18px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
  text-decoration: none;
}
.admin-entry:hover { color: #bfdbfe; }
.admin-shell {
  max-width: 1180px;
}
.admin-card {
  margin-top: 18px;
}
.central-relatos {
  position: relative;
  margin-top: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--panel), var(--panel-2));
}
.central-relatos::before {
  content: "";
  display: block;
  height: 3px;
  margin: -16px -16px 14px;
  background: linear-gradient(90deg, var(--purple), var(--cyan), var(--green));
}
.central-relatos .card-head {
  align-items: baseline;
  margin-bottom: 16px;
}
.central-relatos .card-head h2 { margin-bottom: 0; }
.central-relatos .card-head small { color: var(--muted); font-size: .76rem; }
.central-relato-form {
  grid-template-columns: 170px minmax(280px, 1.2fr) minmax(250px, .9fr) auto;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel-2) 78%, transparent);
}
.central-relato-form label { min-width: 0; }
.central-relato-form textarea {
  width: 100%;
  min-height: 108px;
  resize: vertical;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  line-height: 1.4;
  outline: none;
}
.central-relato-form textarea:focus,
.central-relato-form input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 16%, transparent); }
.central-relato-form input[type="file"] { height: auto; min-height: 40px; padding: 9px 10px; cursor: pointer; }
.central-relato-form .form-actions { align-self: end; margin: 0; }
.central-relato-form .form-actions button { min-height: 44px; white-space: nowrap; background: linear-gradient(135deg, var(--cyan), var(--green)); color: #061016; }
.central-relatos-list { max-height: 430px; overflow: auto; border-radius: 12px; }
.central-relatos-list tbody tr:hover { background: color-mix(in srgb, var(--cyan) 8%, transparent); }
.relato-texto { min-width: 280px; max-width: 620px; white-space: pre-wrap; line-height: 1.45; }
@media (max-width: 1100px) {
  .central-relato-form { grid-template-columns: 170px 1fr 1fr; }
  .central-relato-form .form-actions { grid-column: 1 / -1; justify-self: end; }
}
@media (max-width: 640px) {
  .central-relato-form { grid-template-columns: 1fr; }
  .central-relato-form .form-actions { grid-column: auto; justify-self: stretch; }
  .central-relato-form .form-actions button { width: 100%; }
}
.actions-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.actions-cell form {
  margin: 0;
}
.mini-button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0e1726;
  color: #bfdbfe;
  text-decoration: none;
  font-weight: 800;
  font-size: .72rem;
  cursor: pointer;
}
.mini-button.danger {
  color: #fecaca;
  border-color: rgba(239, 68, 68, .35);
}
.mini-button:disabled {
  opacity: .4;
  cursor: default;
}
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
}
.pager span {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
}
.admin-form-card {
  width: min(620px, 100%);
  margin-top: 18px;
}
.admin-top-row {
  display: grid;
  grid-template-columns: min(620px, 100%) 1fr;
  gap: 18px;
  align-items: start;
}
.admin-historico-card {
  min-width: 0;
}
/* Campo Tecnico: os dois cartoes (Enviar planilha / Arquivos Enviados)
   ficam do mesmo tamanho, em vez de cada um crescer conforme o proprio
   conteudo (pedido do usuario, 2026-09-17). */
.campo-top-row { align-items: stretch; }
.campo-top-row > .card { display: flex; flex-direction: column; }
/* Coluna direita da admin-top-row: dois cartoes empilhados (Historico por
   Pessoa + Historico de Plantao) em vez de um so - o espaco vazio que
   sobrava ali (a coluna e mais curta que "Novo aviso") agora vira o segundo
   cartao. */
.admin-right-col {
  margin-top: 18px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.historico-obs {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.5;
}
.historico-obs.texto-ok { color: var(--green); font-weight: 600; }
.historico-obs.texto-erro { color: var(--red); font-weight: 600; }
.motivo-falha {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: .68rem;
}
.lista-simples {
  list-style: none;
  margin: 0;
  padding: 4px 0 0;
  display: flex;
  flex-direction: column;
}
.lista-simples-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
  font-size: .86rem;
}
.lista-simples-item:last-child { border-bottom: none; }
.historico-detalhe {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
@media (max-width: 980px) {
  .admin-top-row { grid-template-columns: 1fr; }
  .admin-form-card { width: 100%; }
}
.admin-form {
  display: grid;
  gap: 14px;
}
.admin-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
}
.admin-form label[hidden] {
  display: none;
}
/* ".admin-form label" acima e generico (maiusculo, empilhado em grid) e
   sobrescrevia o botao de escolher foto (mesmo componente de perfil.html,
   usado aqui em admin_user_form.html desde a foto de usuario pelo admin) -
   virava so um texto sem cara de botao, e a pessoa achava que o clique nao
   fazia nada. Mais especifico que ".anexo-escolher" sozinho, restaura o
   visual/comportamento de botao dentro do formulario de admin. */
.admin-form .anexo-escolher {
  display: inline-flex;
  color: #bae6fd;
  font-weight: 700;
  text-transform: none;
}
.admin-form input,
.admin-form select {
  width: 100%;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  padding: 0 11px;
  outline: none;
}
.admin-form input[readonly],
.admin-form select:disabled {
  opacity: .72;
  cursor: not-allowed;
}
.admin-form small {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 600;
  text-transform: none;
}
.check-row {
  grid-template-columns: auto 1fr;
  align-items: center;
  justify-content: start;
  text-transform: none !important;
}
.check-row input {
  width: 18px;
  height: 18px;
}
.form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
}
/* Barra de progresso do cadastro do Venceslau - cosmetica (a gravacao e uma
   chamada so, o "%" nao mede nada de verdade), so pra dar feedback de que
   algo esta acontecendo enquanto espera a planilha responder. */
.cadastro-progresso { margin-top: 14px; }
.cadastro-progresso-trilha {
  height: 8px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  overflow: hidden;
}
.cadastro-progresso-barra {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transition: width .22s ease;
}
.cadastro-progresso.completo .cadastro-progresso-barra { background: var(--green); }
.cadastro-progresso-texto {
  margin: 6px 0 0;
  font-size: .82rem;
  font-weight: 700;
  color: var(--muted);
}
.cadastro-progresso.completo .cadastro-progresso-texto { color: var(--green); }
.form-actions button {
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  background: var(--blue);
  color: white;
  padding: 0 16px;
  font-weight: 800;
  cursor: pointer;
}
.flash-stack {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
}
.flash {
  padding: 10px 12px;
  border-radius: 8px;
  font-weight: 800;
}
.flash.ok {
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, .28);
  background: rgba(34, 197, 94, .12);
}
.flash.error {
  color: #fecaca;
  border: 1px solid rgba(239, 68, 68, .28);
  background: rgba(239, 68, 68, .12);
}
/* Faixa de aviso "vendo um salvamento histórico, so leitura" (Conciliação
   de Cobranças) - mesmo espirito visual do .flash, mas persistente (nao
   some sozinha) e com um botao de acao embutido. */
.banner-aviso {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--orange);
  border: 1px solid rgba(249, 115, 22, .3);
  background: rgba(249, 115, 22, .1);
}
/* ---- Alertas de Sinal ---- */
/* Um card por linha, largura cheia. Em varias colunas os numeros de dBm, as
   lanes e os limiares ficam espremidos e ilegiveis — e essa tela existe
   justamente pra ler esses valores. */

.alertas-filtro-data { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.alertas-filtro-data select { min-width: 148px; min-height: 34px; padding: 0 28px 0 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--field); color: var(--text); font: inherit; text-transform: none; letter-spacing: 0; }
.alertas-historico-grafico { min-height: 215px; padding: 12px 8px 0; overflow-x: auto; }
.alertas-barras { min-width: 380px; height: 190px; display: flex; align-items: flex-end; gap: 18px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.alerta-barra { min-width: 48px; flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; color: var(--muted); font-size: .72rem; font-weight: 700; }
.alerta-barra b { color: var(--text); font-size: .82rem; }
.alerta-barra i { display: block; width: min(54px, 75%); min-height: 10px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #9d4edd, #5b21b6); box-shadow: 0 0 14px rgba(157, 78, 221, .22); }
.alerta-barra span { min-height: 22px; white-space: nowrap; }

.alertas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.alerta-card {
  padding: 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #0e1726;
}
.alerta-card.sev-no { border-color: rgba(239, 68, 68, .45); }
.alerta-card.sev-mid { border-color: rgba(245, 158, 11, .45); }
.alerta-card.resolvido { border-color: rgba(34, 197, 94, .40); }
.alerta-topo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.alerta-titulo { font-weight: 800; font-size: 1.02rem; }
.alerta-meta {
  font-size: .7rem;
  color: var(--muted);
  margin-bottom: 10px;
}
.alerta-ends { display: grid; gap: 10px; }
.alerta-card.agrupado .alerta-ends { grid-template-columns: repeat(2, 1fr); }
.alerta-end {
  padding: 10px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  min-width: 0;
}
.alerta-end-nome {
  font-size: .82rem;
  font-weight: 800;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sinal-compare {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}
.sinal-caixa {
  min-width: 160px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #0e1726;
}
.sinal-rot {
  display: block;
  font-size: .62rem;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
  margin-bottom: 2px;
}
.sinal-val { font-size: 1.55rem; font-weight: 800; letter-spacing: -.4px; }
.sinal-seta { align-self: center; color: var(--muted); font-weight: 800; font-size: 1.1rem; }
.sinal-delta {
  align-self: center;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 1.2rem;
  font-weight: 800;
}
.sinal-delta.piorou { border-color: rgba(239, 68, 68, .45); }
.sinal-delta.melhorou { border-color: rgba(34, 197, 94, .40); }
.sinal-delta.piorou { color: #fca5a5; }
.sinal-delta.melhorou { color: #86efac; }
.sinal-delta.estavel { color: var(--muted); }
.sinal-nota { font-size: .64rem; color: var(--muted); margin-top: 6px; }
.sinal-limites { font-size: .64rem; color: var(--muted); margin-top: 6px; }
.lanes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: 5px;
  margin-top: 8px;
}
.lane-chip {
  padding: 7px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #0e1726;
  font-size: .68rem;
  text-align: center;
}
.lane-chip b { display: block; font-size: 1.02rem; }
.lane-antes {
  display: block;
  margin-top: 2px;
  color: #39ff88;
  text-shadow: 0 0 6px rgba(57, 255, 136, .65);
  font-weight: 700;
}
.alerta-grafico { margin-top: 10px; }
.alerta-grafico svg {
  width: 100%;
  height: 90px;
  display: block;
  border-radius: 6px;
  background: #0b1320;
  border: 1px solid var(--border);
}
.grafico-eixo {
  display: flex;
  justify-content: space-between;
  font-size: .64rem;
  color: var(--muted);
  margin-top: 3px;
}
.grafico-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
  font-size: .64rem;
  color: var(--muted);
}
.grafico-legenda-item { display: inline-flex; align-items: center; gap: 4px; }
.grafico-legenda-item i {
  width: 10px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
}
.lane-chip.no { border-color: rgba(239, 68, 68, .45); color: #fca5a5; }
.lane-chip.mid { border-color: rgba(245, 158, 11, .45); color: #fbbf24; }
.alerta-acoes { margin-top: 12px; display: flex; justify-content: flex-end; }
/* Verde e grande: e a acao que o operador precisa achar de longe, e o
   mini-button cinza sumia no meio do card. */
.btn-ok {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 20px;
  border-radius: 9px;
  border: 1px solid rgba(34, 197, 94, .55);
  background: rgba(34, 197, 94, .16);
  color: #86efac;
  font-weight: 800;
  font-size: .92rem;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn-ok:hover {
  background: rgba(34, 197, 94, .28);
  border-color: var(--green);
  transform: translateY(-1px);
}
.btn-ok:disabled { opacity: .45; cursor: default; transform: none; }
.modal-fundo {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: start center;
  padding: 32px 16px;
  overflow-y: auto;
  background: rgba(4, 8, 16, .78);
}
.modal-fundo[hidden] { display: none; }
.modal-caixa {
  width: min(880px, 100%);
  padding: 18px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
/* Historico de Consultas Serasa ganhou uma tabela de documentos embaixo
   do ranking AA/AM - o modal padrao (880px) ficava apertado com as duas
   coisas juntas. */
.modal-caixa-larga { width: min(1200px, 96vw); max-height: 92vh; overflow-y: auto; }
.serasa-historico-doc-titulo { margin: 18px 0 8px; font-size: .95rem; }
.serasa-historico-doc-busca { position: relative; margin-bottom: 10px; }
.serasa-historico-doc-busca .table-search {
  width: 100%;
  flex: none;
  height: 40px;
  padding-left: 36px;
  border-radius: 20px;
  background: var(--panel-2);
}
.serasa-historico-doc-busca .table-search:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34, 211, 238, .15); }
.serasa-historico-doc-busca-icone { position: absolute; left: 13px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.serasa-historico-mes { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.serasa-historico-mes label { color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.serasa-historico-mes select {
  height: 38px;
  min-width: 220px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  padding: 0 11px;
  font-size: .85rem;
  outline: none;
  cursor: pointer;
}
.serasa-historico-mes select:focus { border-color: var(--cyan); }
.avatar-clicavel:hover { transform: scale(1.15); }
.modal-foto-caixa { width: min(420px, 100%); text-align: center; }
.modal-foto-caixa img { max-width: 100%; max-height: 70vh; border-radius: 10px; margin-top: 8px; }

.btn-ok-todos {
  border-color: rgba(34, 197, 94, .7);
  background: rgba(34, 197, 94, .24);
  color: #bbf7d0;
}

/* ------------------------------------------------- Cadastro de atendimento */

.text-button-destaque {
  border-color: rgba(56, 189, 248, .55);
  background: linear-gradient(135deg, rgba(37, 99, 235, .38), rgba(6, 182, 212, .32));
  color: #e0f2fe;
}
.text-button-destaque:hover { border-color: rgba(125, 211, 252, .85); }

#cadastroModal {
  background: rgba(3, 7, 15, .84);
  backdrop-filter: blur(6px);
}
/* Sem overflow: hidden - a lista de sugestoes precisa poder passar da borda de
   baixo do modal. O fio de luz do topo e recortado pelo proprio recuo lateral. */
.modal-cadastro {
  position: relative;
  width: min(920px, 100%);
  padding: 22px;
  border-radius: 16px;
  border: 1px solid rgba(56, 189, 248, .26);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(37, 99, 235, .20), transparent 58%),
    radial-gradient(110% 85% at 100% 0%, rgba(6, 182, 212, .16), transparent 55%),
    linear-gradient(180deg, #101b2c 0%, #0a1220 100%);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, .62),
    inset 0 1px 0 rgba(255, 255, 255, .05);
}
/* Fio de luz correndo no topo: da o tom de painel sem disputar com o conteudo. */
/* Mantem o modal de vendas sem plano centralizado na janela, mesmo com a pagina rolada. */
#missingPlanModal {
  position: fixed;
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  max-height: 90vh;
  overflow: auto;
}

.modal-cadastro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(6, 182, 212, .95) 25%, rgba(59, 130, 246, .95) 50%, transparent 75%);
  background-size: 200% 100%;
  animation: cadastro-scan 5s linear infinite;
}
@keyframes cadastro-scan {
  from { background-position: 200% 0; }
  to { background-position: 0 0; }
}

.cadastro-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.cadastro-head h2 {
  margin: 6px 0 0;
  font-size: 1.3rem;
  background: linear-gradient(90deg, #e0f2fe, #7dd3fc 55%, #38bdf8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cadastro-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: #67e8f9;
}
.cadastro-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(6, 182, 212, .14), 0 0 12px rgba(6, 182, 212, .8);
  animation: cadastro-pulse 2s ease-in-out infinite;
}
@keyframes cadastro-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

.cadastro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.cadastro-campo { display: flex; flex-direction: column; gap: 7px; }
.cadastro-campo-largo { grid-column: 1 / -1; }
.cadastro-campo > span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8fb6d6;
}
.cadastro-campo > span::before {
  content: "";
  width: 6px;
  height: 6px;
  background: rgba(56, 189, 248, .55);
  transform: rotate(45deg);
}
.cadastro-campo > span em { color: #fca5a5; font-style: normal; }
/* Selo aceso so dentro da janela de plantao (decidida no servidor). */
.selo-plantao {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(245, 158, 11, .18);
  color: #fbbf24;
  font-size: .62rem;
  letter-spacing: .1em;
  cursor: help;
}
.cadastro-campo input,
.cadastro-campo select,
.cadastro-campo textarea {
  min-height: 46px;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid rgba(56, 189, 248, .18);
  background: linear-gradient(180deg, rgba(2, 6, 23, .75), rgba(9, 17, 32, .75));
  color: var(--text);
  font-size: .95rem;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.cadastro-campo textarea {
  min-height: 92px;
  resize: vertical;
  line-height: 1.45;
  font-family: inherit;
}
.cadastro-campo input::placeholder,
.cadastro-campo textarea::placeholder { color: rgba(159, 176, 196, .5); }
.cadastro-campo input:focus,
.cadastro-campo select:focus,
.cadastro-campo textarea:focus {
  outline: none;
  border-color: rgba(56, 189, 248, .85);
  background: rgba(2, 6, 23, .9);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .14), 0 0 18px rgba(6, 182, 212, .2);
}
.cadastro-campo input[readonly] {
  background: rgba(2, 6, 23, .3);
  color: var(--muted);
  cursor: default;
}
/* Data: nao e input porque nao ha o que editar - o dia sai do servidor. */
.cadastro-data {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 13px;
  border-radius: 10px;
  border: 1px dashed rgba(56, 189, 248, .38);
  background: rgba(6, 182, 212, .09);
  color: #e0f2fe;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .08em;
}
.cadastro-data::before { content: "🔒"; font-size: .85rem; }
.cadastro-campo small { font-size: .68rem; color: var(--muted); }
.cadastro-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(56, 189, 248, .14);
}
.cadastro-acoes .table-footnote { margin: 0; }
.cadastro-acoes .btn-ok {
  min-height: 46px;
  padding: 0 26px;
  border-radius: 10px;
  border: 1px solid rgba(56, 189, 248, .6);
  background: linear-gradient(135deg, rgba(37, 99, 235, .92), rgba(6, 182, 212, .86));
  color: #f0f9ff;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .06em;
  box-shadow: 0 8px 24px rgba(6, 182, 212, .22);
  transition: box-shadow .15s ease, filter .15s ease;
}
.cadastro-acoes .btn-ok:hover:not(:disabled) {
  filter: brightness(1.12);
  box-shadow: 0 10px 30px rgba(6, 182, 212, .38);
}
.cadastro-acoes .btn-ok:disabled { filter: grayscale(.45); opacity: .7; }
/* --------- Combobox (cidade / problema / canal): lista de sugestoes propria,
   porque o popup do <datalist> nativo nao aceita CSS nenhum. */
.combo-campo { position: relative; display: block; }
.combo-campo input { width: 100%; padding-right: 34px; }
.combo-seta {
  position: absolute;
  top: 23px;
  right: 13px;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: .72rem;
  color: rgba(125, 211, 252, .65);
  transition: transform .15s ease, color .15s ease;
}
.combo-campo.aberto .combo-seta {
  transform: translateY(-50%) rotate(180deg);
  color: var(--cyan);
}
.combo-pop {
  position: absolute;
  z-index: 6;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 232px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(56, 189, 248, .35);
  background: linear-gradient(180deg, rgba(11, 19, 32, .99), rgba(8, 14, 25, .99));
  box-shadow: 0 20px 50px rgba(0, 0, 0, .6), 0 0 24px rgba(6, 182, 212, .12);
}
.combo-pop::-webkit-scrollbar { width: 8px; }
.combo-pop::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: rgba(56, 189, 248, .3);
}
.combo-op {
  position: relative;
  display: block;
  width: 100%;
  padding: 9px 12px 9px 16px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: .9rem;
  letter-spacing: .02em;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
/* O realce neon: mesma aparencia para o mouse e para a navegacao por setas. */
.combo-op:hover,
.combo-op.ativo {
  background: linear-gradient(90deg, rgba(6, 182, 212, .3), rgba(37, 99, 235, .12));
  color: #eafcff;
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, .55), 0 0 18px rgba(6, 182, 212, .32);
  text-shadow: 0 0 10px rgba(125, 211, 252, .8);
}
.combo-op::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 2px;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(6, 182, 212, .9);
  transform: translateY(-50%);
  transition: height .15s ease;
}
.combo-op:hover::before,
.combo-op.ativo::before { height: 58%; }
.combo-op mark {
  background: transparent;
  color: #67e8f9;
  font-weight: 800;
}
.combo-vazio {
  margin: 0;
  padding: 10px 12px;
  font-size: .8rem;
  color: var(--muted);
}
.pill.obs {
  background: rgba(168, 85, 247, .16);
  color: #d8b4fe;
  cursor: help;
}
/* Tudo da coluna Origem numa linha so: com os botoes por extenso a celula
   crescia e quebrava a linha inteira da tabela em duas alturas. */
.origem-cel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
/* Telefone do cliente: inline e nowrap, para nao criar uma segunda linha em
   todas as ~18 mil linhas da tabela. */
.cliente-fone {
  margin-left: 8px;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 600;
  white-space: nowrap;
}
/* Tipo + numero na mesma linha: o tipo e curto e o numero fica com o resto. */
.fone-caixa { display: flex; gap: 8px; }
.fone-caixa select { flex: 0 0 106px; }
.fone-caixa input { flex: 1 1 auto; min-width: 0; }
.pill.remoto {
  margin-left: 6px;
  background: rgba(59, 130, 246, .18);
  color: #93c5fd;
}
/* Caixa de marcar do modal: alvo grande o bastante para clicar sem mira. */
.cadastro-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 13px;
  border-radius: 10px;
  border: 1px solid rgba(56, 189, 248, .18);
  background: linear-gradient(180deg, rgba(2, 6, 23, .75), rgba(9, 17, 32, .75));
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.cadastro-check:hover { border-color: rgba(56, 189, 248, .5); }
.cadastro-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  accent-color: var(--cyan);
  cursor: pointer;
}
.cadastro-check > span {
  font-size: .84rem;
  color: var(--text);
}
.cadastro-check:has(input:checked) {
  border-color: rgba(56, 189, 248, .6);
  background: rgba(6, 182, 212, .12);
}
.pill.anexo {
  padding: 2px 7px;
  background: rgba(34, 197, 94, .16);
  color: #86efac;
  text-decoration: none;
  font-size: .8rem;
}
.pill.anexo:hover { background: rgba(34, 197, 94, .28); }

/* Campo de anexo do modal: o <input type=file> nativo nao aceita estilo, entao
   ele fica invisivel dentro do label, que e quem aparece. */
.anexo-caixa {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.anexo-escolher {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px dashed rgba(56, 189, 248, .45);
  background: rgba(6, 182, 212, .09);
  color: #bae6fd;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.anexo-escolher:hover {
  border-color: rgba(125, 211, 252, .9);
  background: rgba(6, 182, 212, .18);
}
.anexo-escolher input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.anexo-nome {
  font-size: .82rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.anexo-nome.tem { color: #7dd3fc; font-weight: 700; }
.anexo-nome a { color: inherit; }

/* Hora do registro, so nos cadastros feitos pelo site - a base historica nao
   tem horario nenhum. Fica colada na data, sem virar coluna vazia. */
/* Aproximada (hora em que o sistema viu a linha) fica cinza; a exata, do
   cadastro pela tela, fica em ciano - a diferenca precisa se ver. */
.hora-registro.aprox {
  background: rgba(159, 176, 196, .12);
  color: var(--muted);
  cursor: help;
}
.hora-registro {
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(56, 189, 248, .12);
  color: #7dd3fc;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}
.mini-button-icone {
  min-width: 30px;
  padding: 0 6px;
  font-size: .8rem;
  line-height: 1;
}
/* Sem isso, dois mini-button lado a lado (ex: Editar/Excluir do Cancelamento)
   quebravam linha quando a coluna ficava espremida em tela estreita - mesmo
   motivo que trocou o rotulo por icone (ver AGENTS.md, 2026-09-09). */
.celula-acoes-compacta { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .modal-cadastro::before,
  .cadastro-dot { animation: none; }
}

/* ---------------------------------------------------- Dude (triagem guiada) */

.dude-busca {
  width: 100%;
  flex: 1 1 100%;
  height: 48px;
  font-size: 1rem;
}
.dude-cidade { margin-top: 18px; }
.dude-cidade h3 {
  margin: 0 0 10px;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.dude-pontos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 10px;
}
.dude-ponto {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, .02);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.dude-ponto:hover { border-color: var(--blue); background: rgba(59, 130, 246, .1); transform: translateY(-1px); }
.dude-ping-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
}
.dude-ping-dot.dude-ping-ok { background: var(--green); box-shadow: 0 0 6px rgba(34, 197, 94, .7); }
.dude-ping-dot.dude-ping-caiu {
  background: var(--red);
  box-shadow: 0 0 6px rgba(239, 68, 68, .7);
  animation: ramal-blink 1.2s ease-in-out infinite;
}
.dude-ping-dot.dude-ping-desconhecido { opacity: .5; }
@media (prefers-reduced-motion: reduce) {
  .dude-ping-dot.dude-ping-caiu { animation: none; }
}
/* tudo em uma linha so: nome longo corta com reticencias (o title mostra inteiro) */
.dude-ponto > .pill { flex: 0 0 auto; white-space: nowrap; }
.dude-ponto b {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dude-ponto small { flex: 0 0 auto; color: var(--muted); font-size: .78rem; white-space: nowrap; }

/* minmax(0,...) e o que permite o mapa rolar em vez de estourar o card:
   item de grid nao encolhe abaixo do proprio conteudo sem isso */
.dude-contexto { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.dude-resumo { margin: 0; font-size: 1rem; line-height: 1.55; }
.dude-resumo b { color: var(--cyan); }
.dude-meta { margin: 0; color: var(--muted); font-size: .88rem; }
.dude-cadeia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(6, 182, 212, .06);
  font-size: .88rem;
}
.dude-cadeia small { display: block; color: var(--muted); font-size: .74rem; }
.dude-cadeia-atual { color: var(--cyan); font-weight: 700; }
.dude-seta { color: var(--muted); font-style: normal; }

.dude-mapa { margin-top: 10px; min-width: 0; }
.dude-mapa-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.dude-mapa h4 {
  margin: 0;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.dude-mapa-wrap {
  overflow: auto;
  max-height: 62vh;
  min-width: 0;
  padding: 10px 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .05) 1px, transparent 0) 0 0 / 22px 22px,
              rgba(0, 0, 0, .18);
}
.dude-mapa-svg { display: block; }

/* enlaces: o que passa trafego tem o fluxo correndo; o que caiu fica parado */
.dude-link { fill: none; stroke-width: 2; }
.dude-link-ok {
  stroke: rgba(34, 197, 94, .75);
  stroke-dasharray: 7 9;
  animation: dudeFluxo .9s linear infinite;
}
.dude-link-caiu { stroke: rgba(239, 68, 68, .55); stroke-dasharray: 3 6; }
@keyframes dudeFluxo { to { stroke-dashoffset: -16; } }
@media (prefers-reduced-motion: reduce) {
  .dude-link-ok { animation: none; stroke-dasharray: none; }
}

.dude-mapa-no { cursor: pointer; }
.dude-mapa-no rect { stroke-width: 1.5; transition: filter .15s; }
.dude-mapa-no:hover rect { filter: brightness(1.45); }
.dude-mapa-no:focus-visible rect { stroke: var(--cyan); stroke-width: 2.5; outline: none; }
.dude-mapa-no.ok rect { fill: rgba(34, 197, 94, .13); stroke: rgba(34, 197, 94, .65); }
.dude-mapa-no.ok circle { fill: var(--green); }
.dude-mapa-no.caiu rect { fill: rgba(239, 68, 68, .15); stroke: rgba(239, 68, 68, .7); }
.dude-mapa-no.caiu circle { fill: var(--red); }
.dude-mapa-no.alvo rect { stroke-width: 3; stroke: var(--red); }
.dude-mapa-no.uplink { cursor: default; }
.dude-mapa-no.uplink rect {
  fill: rgba(6, 182, 212, .12);
  stroke: rgba(6, 182, 212, .6);
  stroke-dasharray: 5 4;
}
.dude-mapa-no.uplink .dude-mapa-nome { fill: var(--cyan); }
.dude-mapa-nome { font-size: 12px; font-weight: 700; fill: var(--text); }
.dude-mapa-ip { font-size: 10.5px; fill: var(--muted); }
.dude-mapa-no.caiu .dude-mapa-nome { fill: #fca5a5; }
.dude-mapa-no.ok .dude-mapa-nome { fill: #bbf7d0; }

.dude-mapa-legenda {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: .78rem;
}
.dude-chip-ok, .dude-chip-caiu {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin: 0 3px 0 10px;
  border-radius: 50%;
}
.dude-chip-ok { background: var(--green); }
.dude-chip-caiu { background: var(--red); }
.dude-limpar {
  padding: 8px 22px;
  border-color: rgba(6, 182, 212, .7);
  background: rgba(6, 182, 212, .16);
  color: var(--cyan);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.dude-limpar:hover { border-color: var(--cyan); background: rgba(6, 182, 212, .3); color: #fff; }
.dude-aviso {
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid var(--orange);
  border-radius: 0 10px 10px 0;
  background: rgba(245, 158, 11, .09);
  color: #fcd34d;
  font-size: .89rem;
  line-height: 1.5;
}
.dude-impacto { margin: 0; color: var(--muted); font-size: .88rem; }
.dude-impacto b { color: var(--text); }
.dude-contatos { display: flex; flex-wrap: wrap; gap: 8px; }
.dude-contato {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid rgba(34, 197, 94, .5);
  border-radius: 999px;
  background: rgba(34, 197, 94, .12);
  color: #bbf7d0;
  font-size: .88rem;
  text-decoration: none;
}
.dude-contato small { color: #86efac; }

.dude-trilha { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.dude-trilha-item {
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
}
.dude-trilha-item:hover { border-color: var(--cyan); color: var(--cyan); }

.dude-titulo { margin: 0 0 12px; font-size: 1.14rem; }
.dude-opcoes { display: grid; gap: 10px; margin-top: 16px; }
.dude-opcao {
  min-height: 52px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(59, 130, 246, .08);
  color: var(--text);
  font: inherit;
  font-size: .96rem;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dude-opcao:hover { border-color: var(--blue); background: rgba(59, 130, 246, .18); }
/* SIM / NAO lado a lado e bem separados: e a decisao que muda todo o caminho */
.dude-opcoes-sim-nao { grid-template-columns: 1fr 1fr; }
.dude-opcoes-sim-nao .dude-opcao {
  min-height: 76px;
  font-size: 1.06rem;
  font-weight: 700;
  text-align: center;
  border-width: 2px;
}
.dude-opcao-sim {
  border-color: rgba(239, 68, 68, .8);
  background: rgba(239, 68, 68, .16);
  color: #fca5a5;
}
.dude-opcao-sim:hover { border-color: var(--red); background: rgba(239, 68, 68, .3); }
.dude-opcao-nao {
  border-color: rgba(34, 197, 94, .8);
  background: rgba(34, 197, 94, .16);
  color: #bbf7d0;
}
.dude-opcao-nao:hover { border-color: var(--green); background: rgba(34, 197, 94, .3); }
/* opcoes com foto: cartao clicavel para comparar com a propria tela */
.dude-opcoes-imagem {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.dude-opcao-card {
  display: grid;
  gap: 8px;
  height: auto;
  min-height: 0;
  padding: 12px;
  border-width: 2px;
  text-align: left;
  align-content: start;
}
.dude-opcao-img {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.dude-opcao-rot { font-size: 1rem; font-weight: 700; }
.dude-opcao-card small { color: var(--muted); font-size: .8rem; line-height: 1.5; font-weight: 400; }
.dude-contato-grande { padding: 14px 22px; font-size: 1.05rem; }
.dude-contato-grande b { font-size: 1.15rem; color: #fff; }
.dude-finalizar {
  border-color: rgba(6, 182, 212, .7);
  background: rgba(6, 182, 212, .18);
  color: var(--cyan);
}
.dude-finalizar:hover { border-color: var(--cyan); background: rgba(6, 182, 212, .32); color: #fff; }
.dude-comando {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--cyan);
  border-radius: 0 10px 10px 0;
  background: rgba(0, 0, 0, .3);
}
.dude-comando-txt {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  color: #a5f3fc;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .95rem;
  white-space: pre;
}
.dude-comando-copiar { flex: 0 0 auto; }
.dude-relato { display: grid; gap: 12px; margin-top: 14px; }
.dude-campo { display: grid; gap: 6px; max-width: 420px; }
.dude-campo > span { color: var(--muted); font-size: .85rem; }
.dude-campo-input {
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #0e1726;
  color: var(--text);
  font-size: 1rem;
  outline: none;
}
.dude-campo-input:focus { border-color: var(--blue); }
.dude-relato-texto {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--cyan);
  border-radius: 0 10px 10px 0;
  background: rgba(0, 0, 0, .25);
  color: var(--text);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .92rem;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-x: auto;
}
.dude-sem-contato {
  margin: 14px 0 0;
  padding: 16px 18px;
  border: 2px solid rgba(239, 68, 68, .6);
  border-radius: 12px;
  background: rgba(239, 68, 68, .1);
  color: #fca5a5;
  font-size: .95rem;
  line-height: 1.6;
}

.dude-checklist { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.dude-passo { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.dude-passo-atual { border-color: var(--blue); background: rgba(59, 130, 246, .05); }
.dude-passo-feito { opacity: .62; }
.dude-passo-cab {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .95rem;
  text-align: left;
  cursor: pointer;
}
.dude-passo-num {
  flex: 0 0 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
}
.dude-passo-atual .dude-passo-num { background: var(--blue); color: #fff; }
.dude-passo-feito .dude-passo-num { background: rgba(34, 197, 94, .2); color: #86efac; }
.dude-passo-corpo { padding: 0 14px 14px 52px; display: grid; gap: 12px; justify-items: start; }
/* foto a esquerda, decisao a direita: responder sem tirar o olho do print */
.dude-passo-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}
.dude-passo-midia { flex: 1 1 520px; min-width: 0; }
.dude-opcoes-lado {
  flex: 0 1 320px;
  align-self: stretch;
  align-content: center;
  margin-top: 0;
}
.dude-opcoes-lado .dude-opcao {
  min-height: 68px;
  font-size: 1rem;
  font-weight: 700;
  border-width: 2px;
  text-align: center;
}
.dude-tutorial {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  color: var(--muted);
  font-size: .89rem;
  line-height: 1.6;
  white-space: normal;
}
.dude-passo-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.dude-nota-foto {
  color: var(--muted);
  font-size: .78rem;
  font-style: italic;
}
.dude-ultimo-passo { color: var(--muted); font-size: .82rem; }
.dude-print {
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: zoom-in;
}
.dude-video { max-width: 100%; border-radius: 10px; border: 1px solid var(--border); }
.dude-backups { display: grid; gap: 10px; margin-top: 14px; justify-items: start; }
.dude-backups .btn-ok { text-decoration: none; }
.dude-backups small { color: #86efac; font-weight: 400; }
.modal-imagem img { max-width: 100%; max-height: 72vh; border-radius: 10px; }
/* mapa ampliado: cidade grande nao cabe no card, aqui usa a tela toda */
.modal-mapa { width: min(1700px, 97vw); }
.modal-mapa .dude-mapa-wrap { max-height: 82vh; }

@media (max-width: 1180px) {
  .estoque-pedidos-layout { grid-template-columns: 1fr; }
  .estoque-conferencia-resumo { grid-template-columns: 1fr; }
  .dude-pontos { grid-template-columns: repeat(2, 1fr); }
  .alerta-card.agrupado .alerta-ends { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .grid-2, .grid-3, .grid-table, .grid-2-1, .grid-table-full, .grid-keyti-resumo { grid-template-columns: 1fr; }
  .filters, .filters-compact { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .registro-toolbar { width:100%; }
  .registro-toolbar .table-search { width:auto; flex:1 1 auto; min-width:0; }
  .grid-keyti-resumo, .keyti-resumo-itens { grid-template-columns: 1fr; }
  .sinais-acoes { grid-template-columns: 1fr; }
  .dude-pontos { grid-template-columns: 1fr; }
  .dude-opcoes-sim-nao { grid-template-columns: 1fr; }
  .dude-passo-corpo { padding-left: 14px; }
  .dude-cadeia { font-size: .82rem; }
  .alertas-grid { grid-template-columns: 1fr; }
  .lanes-grid { grid-template-columns: repeat(2, 1fr); }
  .app-shell { width: min(100% - 20px, 1440px); padding-top: 12px; }
  .topbar { flex-direction: column; }
  .top-actions { width: 100%; flex-wrap: wrap; }
  .sync-badge { flex: 1; justify-content: center; }
  .filters, .filters-compact, .kpis { grid-template-columns: 1fr; }
  .chart-wrap { height: 240px; }
  .actions-cell { flex-wrap: wrap; white-space: normal; }
  .table-search { width: 100%; }
}
@media print {
  .no-print { display: none !important; }
  body, .app-shell { background: #fff !important; }
  .card { background: #fff !important; border-color: #ccc !important; box-shadow: none !important; }
  .card h2, .kpi span, .kpi strong, .kpi small, .table-footnote, th, td { color: #000 !important; }
  .kpi { background: #fff !important; border: 1px solid #ccc !important; }
  .table-wrap { max-height: none !important; overflow: visible !important; border-color: #ccc !important; }
  .pill { background: #fff !important; border: 1px solid #999 !important; color: #000 !important; }
}

/* Campo estrito (Problema) recusando um nome que nao existe na lista. */
.campo-recusado {
  border-color: rgba(239, 68, 68, .8) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .16) !important;
}

/* =========================================================================
   TEMA "CONSOLE" (2026-09-09)

   Estilo alternativo, ligado pelo botao do topo e guardado no navegador de
   cada operador. Tudo aqui e escopado em [data-tema="console"], entao o tema
   classico continua exatamente como estava - quem nao clicar no botao nao ve
   diferenca nenhuma, e desfazer e apagar este bloco.
   ========================================================================= */

:root[data-tema="console"] {
  --bg: #060d18;
  --panel: #0d1725;
  --panel-2: #111d2f;
  --border: #1b2b41;
  --text: #dbe7f5;
  --muted: #7f94ad;
  --blue: #3b82f6;
  --cyan: #22d3ee;
  --green: #34d399;
  --orange: #fbbf24;
  --purple: #a78bfa;
  --pink: #f472b6;
  --red: #fb7185;

  --display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --malha: rgba(22, 35, 54, .5);
  --canto: rgba(34, 211, 238, .5);
}

[data-tema="console"] body {
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Malha de painel: textura sem competir com o dado. Fixa, para nao "andar"
     junto com a rolagem e virar ruido. */
  background-image:
    linear-gradient(var(--malha) 1px, transparent 1px),
    linear-gradient(90deg, var(--malha) 1px, transparent 1px),
    radial-gradient(120% 70% at 50% -8%, rgba(34, 211, 238, .09), transparent 60%);
  background-size: 56px 56px, 56px 56px, 100% 100%;
  background-attachment: fixed;
}

/* -------------------------------------------------------------- tipografia */
[data-tema="console"] .topbar h1 {
  font-family: var(--display);
  letter-spacing: .06em;
  background: linear-gradient(100deg, #e2f6ff, var(--cyan) 55%, var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-tema="console"] .topbar p {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
[data-tema="console"] .card h2,
[data-tema="console"] .modal-caixa h2,
[data-tema="console"] .kpi strong {
  font-family: var(--display);
  letter-spacing: .04em;
}
[data-tema="console"] .kpi span,
[data-tema="console"] .filters label,
[data-tema="console"] th,
[data-tema="console"] .sync-badge,
[data-tema="console"] .pill,
[data-tema="console"] .table-footnote,
[data-tema="console"] .secao-cabecalho > span {
  font-family: var(--mono);
}
[data-tema="console"] .kpi span,
[data-tema="console"] .filters label,
[data-tema="console"] th { letter-spacing: .15em; font-weight: 500; }
/* Numero em coluna so alinha com largura fixa de digito. */
[data-tema="console"] .kpi strong,
[data-tema="console"] td,
[data-tema="console"] .pager span { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ molduras HUD */
[data-tema="console"] .card,
[data-tema="console"] .kpi,
[data-tema="console"] .filters,
[data-tema="console"] .table-wrap,
[data-tema="console"] .notice-banner,
[data-tema="console"] .filter-hint { border-radius: 4px; }
[data-tema="console"] .card,
[data-tema="console"] .kpi {
  position: relative;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
}
/* Cantos em colchete: moldura de console sem carregar sombra em tudo. O .kpi
   ja usa ::before para a barra de acento, entao ali entra so o canto de baixo. */
[data-tema="console"] .card::before,
[data-tema="console"] .card::after,
[data-tema="console"] .kpi::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid var(--canto);
  pointer-events: none;
}
[data-tema="console"] .card::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
[data-tema="console"] .card::after,
[data-tema="console"] .kpi::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
[data-tema="console"] .kpi::before { height: 2px; }
[data-tema="console"] .kpi:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45), 0 0 22px rgba(34, 211, 238, .08);
}
/* Titulo do card vira cabecalho de painel, com regua embaixo. */
[data-tema="console"] .card h2 {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
[data-tema="console"] .card h2 span {
  width: 7px;
  height: 7px;
  border-radius: 1px;
  transform: rotate(45deg);
}
[data-tema="console"] .card-head { align-items: flex-end; }
[data-tema="console"] .card-head h2 { flex: 1; }

/* ---------------------------------------------------------------- tabelas */
[data-tema="console"] th {
  font-size: .62rem;
  background: var(--panel-2);
  border-bottom-color: var(--border);
}
[data-tema="console"] td { border-bottom-color: rgba(27, 43, 65, .5); }
[data-tema="console"] tbody tr { transition: background .12s ease; }
[data-tema="console"] tbody tr:hover { background: rgba(34, 211, 238, .05); }
/* Coluna de posicao nos rankings: numero de indice, nao dado. */
[data-tema="console"] #attendantRankingTable td:first-child,
[data-tema="console"] #problemRankingTable td:first-child,
[data-tema="console"] #cityRankingTable td:first-child,
[data-tema="console"] #attendantTable td:first-child {
  font-family: var(--mono);
  color: var(--muted);
  width: 1%;
}
[data-tema="console"] #attendantRankingTable tr:first-child td:first-child,
[data-tema="console"] #problemRankingTable tr:first-child td:first-child,
[data-tema="console"] #cityRankingTable tr:first-child td:first-child,
[data-tema="console"] #attendantTable tr:first-child td:first-child { color: var(--orange); }
[data-tema="console"] .bar-mini { height: 3px; border-radius: 2px; }

/* ----------------------------------------------------------------- botoes */
[data-tema="console"] .text-button,
[data-tema="console"] .icon-button,
[data-tema="console"] .mini-button {
  border-radius: 6px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  font-family: var(--display);
  letter-spacing: .06em;
}
[data-tema="console"] .text-button:hover,
[data-tema="console"] .icon-button:hover,
[data-tema="console"] .mini-button:hover {
  border-color: rgba(34, 211, 238, .6);
  color: #eaf9ff;
  box-shadow: 0 0 16px rgba(34, 211, 238, .16);
}
[data-tema="console"] .sync-badge { border-radius: 999px; letter-spacing: .04em; }
[data-tema="console"] .filters select, [data-tema="console"] .filters input[type="text"],
[data-tema="console"] .filters button,
[data-tema="console"] .table-search,
[data-tema="console"] .login-form input {
  border-radius: 6px;
  background: #0a1220;
}

/* ------------------------------------------------------------------ selos */
[data-tema="console"] .pill { border-radius: 3px; letter-spacing: .08em; font-weight: 600; }

/* ------------------------------------------------------------------ login */
[data-tema="console"] .brand-logo { filter: drop-shadow(0 0 22px rgba(34, 211, 238, .25)); }

/* ------------------------------------------------------- botao de tema */
.tema-botao { gap: 7px; }
.tema-botao .tema-icone { font-size: .95rem; line-height: 1; }

/* =========================================================================
   TEMA "FLOR" (2026-09-09)

   O unico tema claro dos tres. Por isso ele nao redefine so os tokens: varios
   componentes tinham cor de texto pensada para fundo escuro (selos, badges,
   avisos) e ficariam ilegiveis. O que aparece abaixo dos tokens e exatamente
   essa correcao, nao enfeite.
   ========================================================================= */

/* Escala de rosa, do fundo para a frente: fundo -> cartao -> campo. Nao ha
   branco puro em superficie nenhuma, de proposito - quem passa o dia inteiro
   nesta tela olha para o cartao e para o fundo o tempo todo, e area grande de
   branco puro e o que cansa a vista, nao a cor. O campo e o mais claro dos
   tres justamente para continuar dizendo "aqui se escreve".

   As cores de texto tambem subiram: medido contra o cartao, o secundario
   estava em 3,5:1, o verde em 2,1:1 e a borda em 1,3:1 - lavado de verdade, e
   nao ajuste de monitor. Agora texto 10,6:1, secundario 4,7:1, verde 4,9:1. */
:root[data-tema="flor"] {
  --bg: #f9d5e6;
  --panel: #fce8f2;
  --panel-2: #f7dcea;
  --border: #e7a9c6;
  --text: #4a2b3a;
  --muted: #8a5c70;
  --blue: #c084fc;
  --cyan: #f472b6;
  --green: #0f7a5f;
  --orange: #f9a03f;
  --purple: #c084fc;
  --pink: #ec4899;
  --red: #f2607d;

  --display: "Quicksand", "Segoe UI", system-ui, sans-serif;
  --rosa-forte: #db2777;
  --rosa-suave: #fbcfe8;
}

[data-tema="flor"] body {
  font-family: "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
  /* Florzinhas em marca d'agua: SVG embutido, repetido bem claro para ficar
     textura de papel e nao estampa por cima do conteudo. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23fbcfe8' fill-opacity='.55'%3E%3Cg transform='translate(30 30)'%3E%3Ccircle cx='0' cy='-7' r='5'/%3E%3Ccircle cx='6.7' cy='-2.2' r='5'/%3E%3Ccircle cx='4.1' cy='5.7' r='5'/%3E%3Ccircle cx='-4.1' cy='5.7' r='5'/%3E%3Ccircle cx='-6.7' cy='-2.2' r='5'/%3E%3Ccircle cx='0' cy='0' r='3' fill='%23f9a8d4'/%3E%3C/g%3E%3Cg transform='translate(90 84) rotate(18)'%3E%3Ccircle cx='0' cy='-5.5' r='4'/%3E%3Ccircle cx='5.2' cy='-1.7' r='4'/%3E%3Ccircle cx='3.2' cy='4.4' r='4'/%3E%3Ccircle cx='-3.2' cy='4.4' r='4'/%3E%3Ccircle cx='-5.2' cy='-1.7' r='4'/%3E%3Ccircle cx='0' cy='0' r='2.4' fill='%23f9a8d4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, #f9d5e6, #f6cfe3);
  background-size: 120px 120px, 100% 100%;
  background-attachment: fixed;
}

[data-tema="flor"] .topbar {
  border-bottom-color: var(--rosa-suave);
}
[data-tema="flor"] .topbar h1 {
  font-family: var(--display);
  font-weight: 700;
  background: linear-gradient(120deg, #db2777, #c084fc);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-tema="flor"] .card h2,
[data-tema="flor"] .kpi strong,
[data-tema="flor"] .modal-caixa h2 { font-family: var(--display); font-weight: 700; }

/* Cartoes de papel: borda macia, sombra rosada em vez de preta. */
[data-tema="flor"] .card,
[data-tema="flor"] .kpi,
[data-tema="flor"] .filters,
[data-tema="flor"] .table-wrap,
[data-tema="flor"] .modal-caixa {
  border-radius: 16px;
  border-color: var(--border);
  background: var(--panel);
  box-shadow: 0 6px 18px rgba(219, 39, 119, .07);
}
[data-tema="flor"] .kpi:hover { box-shadow: 0 12px 26px rgba(219, 39, 119, .14); }
[data-tema="flor"] .kpi::before { height: 4px; border-radius: 16px 16px 0 0; }

/* Cores de texto que eram claras sobre fundo escuro. */
[data-tema="flor"] th {
  background: var(--panel-2);
  color: var(--rosa-forte);
  border-bottom-color: var(--border);
}
[data-tema="flor"] td { border-bottom-color: #fbe7ef; }
[data-tema="flor"] tbody tr:hover { background: #fbe0ee; }
[data-tema="flor"] .text-button,
[data-tema="flor"] .icon-button,
[data-tema="flor"] .mini-button,
[data-tema="flor"] .filters select, [data-tema="flor"] .filters input[type="text"],
[data-tema="flor"] .filters button,
[data-tema="flor"] .table-search,
[data-tema="flor"] .login-form input {
  border-radius: 999px;
  background: #fff9fc;
  border-color: var(--border);
  color: var(--rosa-forte);
}
[data-tema="flor"] .filters select, [data-tema="flor"] .filters input[type="text"],
[data-tema="flor"] .table-search,
[data-tema="flor"] .login-form input { color: var(--text); }
[data-tema="flor"] .text-button:hover,
[data-tema="flor"] .icon-button:hover,
[data-tema="flor"] .mini-button:hover {
  border-color: var(--pink);
  background: #fdeef6;
  transform: translateY(-1px);
}
[data-tema="flor"] .text-button-destaque {
  background: linear-gradient(135deg, #f472b6, #c084fc);
  border-color: transparent;
  color: #fff;
}
/* O hover generico troca o fundo por quase-branco e nao mexe na cor da letra;
   como este botao e o unico de letra branca, o texto sumia no proprio fundo.
   Aqui ele escurece o gradiente em vez de clarear. */
[data-tema="flor"] .text-button-destaque:hover {
  background: linear-gradient(135deg, #ec4899, #a855f7);
  border-color: transparent;
  color: #fff;
}
/* .btn-ok (base em styles.css) usa verde clarinho fixo (#86efac) pensado
   pra fundo escuro - em fundo claro como o Flor fica sem contraste, lavado
   contra o rosa. Usa --green do proprio tema (ja e' um verde mais escuro,
   pensado pra texto sobre claro) em vez do texto fixo. */
[data-tema="flor"] .btn-ok {
  border-color: rgba(15, 122, 95, .45);
  background: rgba(15, 122, 95, .12);
  color: var(--green);
}
[data-tema="flor"] .btn-ok:hover {
  background: rgba(15, 122, 95, .22);
  border-color: var(--green);
}
[data-tema="flor"] .sync-badge {
  border-radius: 999px;
  border-color: #bbf0dd;
  background: #e9fbf4;
  color: #12876a;
}
[data-tema="flor"] .pill { border-radius: 999px; }
[data-tema="flor"] .pill.ok, [data-tema="flor"] .pill.high { background: #e4f9f1; color: #12876a; }
[data-tema="flor"] .pill.no, [data-tema="flor"] .pill.low { background: #ffe8ee; color: #c02a4e; }
[data-tema="flor"] .pill.mid { background: #fff2df; color: #b3690a; }
[data-tema="flor"] .pill.sistema { background: #f3e8ff; color: #7e22ce; }
[data-tema="flor"] .pill.central { background: #fce7f3; color: #be185d; }
[data-tema="flor"] .pill.obs { background: #fce7f3; color: #a21caf; }
[data-tema="flor"] .pill.anexo { background: #e4f9f1; color: #12876a; }
[data-tema="flor"] .pill.remoto { background: #ede9fe; color: #6d28d9; }
[data-tema="flor"] .pill.destino-planilha { background: #e4f9f1; color: #12876a; }
[data-tema="flor"] .pill.destino-banco { background: #e0f2fe; color: #0369a1; }
[data-tema="flor"] .filter-hint {
  background: #fdeef6;
  border-color: var(--rosa-suave);
  color: var(--muted);
}
[data-tema="flor"] .filter-hint.active { background: #fff4e2; border-color: #f6d5a8; color: #b3690a; }
[data-tema="flor"] .notice-banner { background: #fbe2ef; border-color: var(--rosa-suave); }
[data-tema="flor"] .notice-item { background: #fff9fc; border-color: var(--border); }
[data-tema="flor"] .empty-cell, [data-tema="flor"] .table-footnote { color: var(--muted); }
[data-tema="flor"] .kpi small.delta-up { color: #0f9d76; }
[data-tema="flor"] .kpi small.delta-down { color: #d6295a; }
[data-tema="flor"] .hora-registro { background: #f3e8ff; color: #7e22ce; }
[data-tema="flor"] .hora-registro.aprox { background: #f5eef2; color: var(--muted); }
[data-tema="flor"] .cliente-fone { color: var(--muted); }
[data-tema="flor"] .modal-fundo { background: rgba(74, 43, 58, .45); }
/* O cartao ganha o rosa e os campos ficam brancos, e nao o contrario. Antes os
   dois eram brancos: alem do brilho, nada separava campo de fundo - a borda
   fina era a unica pista de onde se podia escrever. */
[data-tema="flor"] .modal-cadastro {
  background: linear-gradient(180deg, #fff2f8, #fce7f1);
  border-color: var(--rosa-suave);
}
[data-tema="flor"] .modal-cadastro::before {
  background: linear-gradient(90deg, transparent, #f472b6, #c084fc, transparent);
}
[data-tema="flor"] .cadastro-head h2 {
  background: linear-gradient(120deg, #db2777, #c084fc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-tema="flor"] .cadastro-kicker { color: #c026d3; }
[data-tema="flor"] .cadastro-dot { background: var(--pink); box-shadow: 0 0 0 4px rgba(236, 72, 153, .14); }
[data-tema="flor"] .cadastro-campo > span { color: var(--rosa-forte); }
[data-tema="flor"] .cadastro-campo > span::before { background: var(--rosa-suave); }
[data-tema="flor"] .cadastro-campo input,
[data-tema="flor"] .cadastro-campo select,
[data-tema="flor"] .cadastro-campo textarea,
[data-tema="flor"] .cadastro-check,
[data-tema="flor"] .combo-pop {
  background: #fff9fc;
  border-color: var(--border);
  color: var(--text);
}
/* Data travada e "escolher arquivo" nao sao campos de digitar, entao vao no
   rosa - agora um tom mais fundo que o cartao, senao sumiriam nele. */
[data-tema="flor"] .cadastro-data { background: #fbdaea; border-color: #f5b6d5; color: #a1145c; }
[data-tema="flor"] .combo-op { color: var(--text); }
[data-tema="flor"] .combo-op:hover,
[data-tema="flor"] .combo-op.ativo {
  background: linear-gradient(90deg, #fce7f3, #f3e8ff);
  color: #831843;
  box-shadow: inset 0 0 0 1px var(--rosa-suave);
  text-shadow: none;
}
[data-tema="flor"] .combo-op::before { background: var(--pink); box-shadow: none; }
[data-tema="flor"] .combo-op mark { color: var(--rosa-forte); }
/* Vale para todo botao de acao do tema, e nao so o do cadastro: fora desta
   regra o .btn-ok fica com o azul do tema classico, que no fundo rosa some. */
[data-tema="flor"] .cadastro-acoes .btn-ok,
[data-tema="flor"] .chat-envio .btn-ok {
  background: linear-gradient(135deg, #f472b6, #c084fc);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px rgba(236, 72, 153, .28);
}
[data-tema="flor"] .anexo-escolher { background: #fff9fc; border-color: #f5b6d5; color: var(--rosa-forte); }
[data-tema="flor"] .selo-plantao { background: #fff4e2; color: #b3690a; }
[data-tema="flor"] .ramal-btn { background: #fff9fc; border-color: var(--border); }
[data-tema="flor"] .flash.error { background: #ffe8ee; border-color: #f7c2d0; color: #c02a4e; }
[data-tema="flor"] .flash.ok { background: #e4f9f1; border-color: #bbf0dd; color: #12876a; }

/* ------------------------------------------------------- rodape de creditos */
.rodape {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .78rem;
}
.rodape p { margin: 0; }
.rodape b { color: #bfdbfe; font-weight: 700; }
.rodape-versao {
  padding: 2px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .68rem;
  letter-spacing: .08em;
}
[data-tema="console"] .rodape b { color: #7dd3fc; }
[data-tema="console"] .rodape-versao { font-family: var(--mono); }
[data-tema="flor"] .rodape b { color: var(--rosa-forte); }
[data-tema="flor"] .rodape-versao { border-color: var(--rosa-suave); }

/* ------------------------------------------------------- protetor de tela */
.protetor {
  position: fixed;
  inset: 0;
  z-index: 90;
  opacity: 0;
  transition: opacity .4s ease;
}
.protetor.visivel { opacity: 1; }
.protetor-relogio {
  position: fixed;
  inset: 0;
  z-index: 91;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transition: opacity .4s ease;
}
.protetor-relogio.visivel { opacity: 1; }
.protetor-relogio strong {
  font-family: "Chakra Petch", var(--fonte-display, sans-serif), sans-serif;
  font-size: clamp(3.4rem, 12vw, 7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  /* var(--text)/var(--cyan) em vez de cor fixa: sem isso so 4 dos 14 temas
     (Flor, Monster, Invertido, Classico, via override proprio abaixo)
     ganhavam cor propria aqui - os outros 10 ficavam sempre neste mesmo
     branco-azulado, ignorando o tema escolhido. */
  color: var(--text);
  text-shadow: 0 0 34px var(--cyan);
  font-variant-numeric: tabular-nums;
}
/* A frase escrita no centro, por cima da chuva. Ela e o recado; a chuva atras
   e so ambiente. Altura minima fixa para o bloco nao pular de tamanho enquanto
   as letras aparecem. */
.protetor-frase {
  min-height: 1.4em;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(1.25rem, 4.5vw, 2.6rem);
  font-weight: 600;
  letter-spacing: .22em;
  white-space: pre;
  /* var(--cyan) em vez de cor fixa - mesmo motivo do .protetor-relogio
     strong acima. Classico continua com o azul mais claro proprio dele,
     no override abaixo (nao mexe nessa cor). */
  color: var(--cyan);
  text-shadow: 0 0 26px var(--cyan);
}
/* Cursor piscando so enquanto esta escrevendo. */
.protetor-frase.digitando::after {
  content: "▌";
  margin-left: .1em;
  animation: cursor-protetor 1s steps(1) infinite;
}
@keyframes cursor-protetor {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .protetor-frase.digitando::after { animation: none; }
}
.protetor-relogio em {
  margin-top: 10px;
  font-style: normal;
  font-size: .72rem;
  letter-spacing: .12em;
  color: rgba(219, 231, 245, .38);
}

/* Superficies escuras que ficaram com cor literal la em cima e nao seguem os
   tokens. No tema claro elas apareceriam como retangulos pretos no meio da
   pagina, entao vem aqui uma a uma - e o preco de ter um tema claro sobre uma
   folha de estilo escrita so para o escuro. */
[data-tema="flor"] .summary-textarea,
[data-tema="flor"] .admin-form select,
[data-tema="flor"] .ramal-btn,
[data-tema="flor"] .alerta-card,
[data-tema="flor"] .sinal-caixa,
[data-tema="flor"] .lane-chip,
[data-tema="flor"] .dude-campo-input {
  background: #fff9fc;
  border-color: var(--border);
  color: var(--text);
}
[data-tema="flor"] .login-body {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23fbcfe8' fill-opacity='.5'%3E%3Cg transform='translate(30 30)'%3E%3Ccircle cx='0' cy='-7' r='5'/%3E%3Ccircle cx='6.7' cy='-2.2' r='5'/%3E%3Ccircle cx='4.1' cy='5.7' r='5'/%3E%3Ccircle cx='-4.1' cy='5.7' r='5'/%3E%3Ccircle cx='-6.7' cy='-2.2' r='5'/%3E%3Ccircle cx='0' cy='0' r='3' fill='%23f9a8d4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, #f9d5e6, #f6cfe3);
}
[data-tema="flor"] .bar-mini { background: #f7e3ec; }
[data-tema="flor"] .alerta-grafico svg { background: #fff8fb; }
[data-tema="flor"] .lane-chip { box-shadow: inset 0 0 0 1px var(--border); }

/* Mesmo caso no tema console: sao superficies um tom acima do fundo novo. */
[data-tema="console"] .filters select, [data-tema="console"] .filters input[type="text"],
[data-tema="console"] .filters button,
[data-tema="console"] .login-form input,
[data-tema="console"] .table-search,
[data-tema="console"] .summary-textarea,
[data-tema="console"] .admin-form select,
[data-tema="console"] .ramal-btn,
[data-tema="console"] .alerta-card,
[data-tema="console"] .sinal-caixa,
[data-tema="console"] .dude-campo-input { background: #0a1220; }
[data-tema="console"] .login-body {
  background:
    linear-gradient(var(--malha) 1px, transparent 1px),
    linear-gradient(90deg, var(--malha) 1px, transparent 1px),
    radial-gradient(120% 70% at 50% 0%, rgba(34, 211, 238, .12), transparent 60%),
    #060d18;
  background-size: 56px 56px, 56px 56px, 100% 100%, auto;
}

/* Topo: o botao de tema somou largura e espremia a marca ate o titulo quebrar
   em tres linhas. A marca passa a nao encolher e as acoes e que quebram de
   linha, que e o que se ajusta sem prejuizo. */
.topbar { flex-wrap: wrap; }
.topbar-brand { flex: 0 1 auto; min-width: 0; }
.topbar h1 { text-wrap: balance; }
.top-actions { flex: 1 1 auto; justify-content: flex-end; flex-wrap: wrap; }
/* (a regra que travava a marca saiu: quem encolhe agora e ela, mais abaixo) */

/* Titulo no tema console: o degrade terminava no azul escuro e sumia contra o
   fundo. Cor cheia e clara, com brilho no lugar do degrade. */
[data-tema="console"] .topbar h1 {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #a5f3fc;
  text-shadow: 0 0 22px rgba(34, 211, 238, .35);
}

/* Botao de tema: so o icone, do tamanho dos outros icones do topo. */
.tema-botao { font-size: 1rem; line-height: 1; }

/* Uma linha so no topo, quando cabe.

   Com perfil de admin sao 14 controles la em cima (tema, sincronizacao,
   cadastro, avisos, usuarios, 4 telas, atualizar, CSV, PDF, sair). Somados no
   tamanho antigo eles pediam ~1.500px, mais que os 1.440 do container: por isso
   ou o titulo quebrava em tres linhas, ou os botoes caiam para a segunda.
   Reduzindo o corpo dos botoes do topo - so no topo - o conjunto cabe. Abaixo
   de 1.400px continua quebrando de proposito, que e melhor que espremer. */
@media (min-width: 1400px) {
  .top-actions .text-button {
    padding: 0 10px;
    font-size: .75rem;
  }
  .top-actions .sync-badge { padding: 0 10px; font-size: .72rem; }
  .top-actions .icon-button { width: 32px; height: 32px; }
  .top-actions .icon-button-text { width: auto; padding: 0 8px; }
  .top-actions { gap: 6px; }
  .topbar h1 { font-size: 1.6rem; }
}

/* Quem cede espaco no topo e a marca, nao os botoes.

   O que estourava a linha nao eram os botoes: era o subtitulo ("DPTO SUPORTE
   TECNICO · Google Sheets automatico", ~47 caracteres) fixando a marca em uns
   450px. Com a marca podendo encolher, o titulo nunca quebra e o subtitulo
   corta com reticencias quando falta espaco - some o menos importante, e nao a
   navegacao. */
.topbar-brand { flex: 0 1 auto; min-width: 0; }
.topbar-brand > div { min-width: 0; }
.topbar h1 { white-space: nowrap; }
.topbar p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-actions { flex: 0 0 auto; }
@media (min-width: 1400px) {
  .topbar p { font-size: .8rem; }
}

/* =========================================================================
   BARRA LATERAL

   Substitui os links que ficavam no topo. Com perfil de admin eram 14
   controles disputando uma linha, e cada tela nova apertava mais; aqui sobra
   espaco vertical e ainda cabe o bloco do operador.
   ========================================================================= */

.layout { display: grid; grid-template-columns: 330px 1fr; min-height: 100vh; } /* era 232px; 330 deixa o quadro do Spotify (min. ~280px) sem reducao/borrado e com o play inteiro */
.layout > .app-shell { width: auto; margin: 0; padding: 18px 22px 40px; min-width: 0; }

.lateral {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  /* Em variavel porque o par escala+operador precisa anular exatamente este
     valor para virar um bloco so - o espaco entre eles vem do gap, nao das
     margens, e era ele que deixava a costura aparecendo. */
  gap: var(--vao-lateral, 16px);
  padding: 16px 12px;
  border-right: 1px solid var(--border);
  background: var(--panel);
  overflow-y: auto;
}
.lateral-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 6px 14px;
  border-bottom: 1px solid var(--border);
}
.lateral-marca img { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; }
.lateral-marca b { display: block; font-size: 1rem; font-weight: 800; letter-spacing: .04em; color: #bfdbfe; line-height: 1.15; }
.lateral-marca span { font-size: .62rem; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.contador-inatividade-topo { display: block; margin-top: 5px; font-size: .58rem; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.contador-inatividade-topo b { display: inline; color: var(--green); font-size: .68rem; letter-spacing: .06em; }
.contador-inatividade-topo.alerta b { color: var(--orange); }
.sinais-acoes { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin-top:10px; }
.sinais-acoes .mini-button { width:100%; min-width:0; justify-content:center; white-space:nowrap; font-size:.72rem; }
.card-sinais .chart-footnote { text-align: center; }
.modal-detalhes-sinal { width:min(900px,94vw); max-height:88vh; overflow:auto; }

.menu { display: flex; flex-direction: column; gap: 2px; }
.menu-titulo {
  margin: 8px 6px 2px;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #55697f;
}
.item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 7px;
  border-left: 2px solid transparent;
  color: #b6c8dc;
  text-decoration: none;
  font-size: .87rem;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.item:hover { background: rgba(59, 130, 246, .1); color: #eaf9ff; }
.item:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.item.ativo {
  background: linear-gradient(90deg, rgba(59, 130, 246, .22), transparent);
  border-left-color: var(--blue);
  color: #eaf9ff;
  font-weight: 700;
}
.item i { width: 18px; text-align: center; font-style: normal; opacity: .85; }

.contexto {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
}
.contexto h4 {
  margin: 0;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.linha-dado { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .8rem; color: var(--muted); }
.linha-dado b { color: var(--text); font-variant-numeric: tabular-nums; }

.rodape-lateral {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.server-usage {
  margin: 0 4px 4px;
  padding: 8px 7px;
  border: 1px solid color-mix(in srgb, var(--cyan) 42%, var(--border));
  border-top: 2px solid var(--cyan);
  border-radius: 8px;
  background: var(--panel-2);
}
.server-usage-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  margin-bottom: 6px;
  color: var(--cyan);
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.server-usage-heading > span { white-space: nowrap; }
.server-usage-meta { display: flex; justify-content: space-between; gap: 4px; min-width: 0; }
.server-usage-heading small { min-width: 0; font-size: .53rem; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
.server-usage-meta small:first-child { color: var(--green); }
#serverUsageUptime { font-size: .62rem; font-weight: 700; }
#serverUsageUpdated { display: none !important; }
.server-usage-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.server-usage-metrics > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-left: 4px;
  border-left: 2px solid var(--uso-cor);
}
.server-usage-metrics > div:nth-child(1) { --uso-cor: var(--cyan); }
.server-usage-metrics > div:nth-child(2) { --uso-cor: var(--purple); }
.server-usage-metrics > div:nth-child(3) { --uso-cor: var(--green); }
.server-usage-metrics span { color: var(--uso-cor); font-size: .58rem; }
.server-usage-metrics b { color: var(--uso-cor); font-size: .74rem; font-variant-numeric: tabular-nums; }
.server-usage-metrics small { font-size: .52rem; letter-spacing: -.035em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.operador { display: flex; align-items: center; gap: 10px; padding: 6px; }
.operador b { display: block; font-size: .85rem; line-height: 1.2; }
.operador span { font-size: .6rem; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.avatar, .avatar-foto {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.avatar {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(59, 130, 246, .35), rgba(34, 211, 238, .3));
  border: 1px solid rgba(59, 130, 246, .45);
  font-weight: 800;
  font-size: .82rem;
  color: #dbeafe;
}
.avatar-foto { object-fit: cover; border: 1px solid var(--border); }
.avatar-grande { width: 92px; height: 92px; font-size: 1.9rem; }
.mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 11px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: .82rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.mini:hover { background: rgba(59, 130, 246, .1); color: var(--text); }
.mini:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }

.tema-wrap { position: relative; }
.tema-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
}
.tema-opcao-menu {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: .82rem;
  text-align: left;
  cursor: pointer;
}
.tema-opcao-menu .tema-icone { font-size: .95rem; line-height: 1; }
.tema-opcao-menu:hover { background: rgba(59, 130, 246, .12); }
.tema-opcao-menu.ativo { background: rgba(56, 189, 248, .16); color: var(--cyan); font-weight: 700; }

/* Perfil */
.perfil-form { display: flex; flex-direction: column; gap: 16px; }
.perfil-foto { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.perfil-foto img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); }
.perfil-foto > div { display: flex; flex-direction: column; gap: 8px; }
.perfil-foto small { color: var(--muted); font-size: .78rem; }

/* Telas estreitas: a lateral vira faixa no topo, sem coluna fixa. */
@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .lateral {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .lateral-marca { border-bottom: 0; padding-bottom: 2px; }
  .menu { flex-direction: row; flex-wrap: wrap; }
  .menu-titulo { display: none; }
  .contexto { display: none; }
  .rodape-lateral { margin-top: 0; border-top: 0; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .server-usage { flex: 1 0 100%; }
  .mini { width: auto; }
}

/* A lateral no tema console e no flor */
[data-tema="console"] .lateral { background: linear-gradient(180deg, var(--panel), #0a1220); }
[data-tema="console"] .lateral-marca b { color: #a5f3fc; font-family: var(--display); }
[data-tema="console"] .lateral-marca span,
[data-tema="console"] .menu-titulo,
[data-tema="console"] .contexto h4,
[data-tema="console"] .operador span { font-family: var(--mono); }
[data-tema="console"] .item.ativo {
  background: linear-gradient(90deg, rgba(34, 211, 238, .18), transparent);
  border-left-color: var(--cyan);
}
[data-tema="console"] .item:hover { background: rgba(34, 211, 238, .08); }
[data-tema="flor"] .lateral { background: #fce8f2; border-right-color: var(--border); }
[data-tema="flor"] .lateral-marca b { color: var(--rosa-forte); }
[data-tema="flor"] .item { color: #7a5266; }
[data-tema="flor"] .item:hover { background: #f7dcea; color: var(--rosa-forte); }
[data-tema="flor"] .item.ativo {
  background: linear-gradient(90deg, #fce7f3, transparent);
  border-left-color: var(--pink);
  color: var(--rosa-forte);
}
[data-tema="flor"] .contexto { background: #f8e1ed; }
[data-tema="flor"] .avatar { background: linear-gradient(135deg, #fbcfe8, #e9d5ff); border-color: var(--rosa-suave); color: var(--rosa-forte); }
[data-tema="flor"] .mini:hover { background: #f7dcea; color: var(--rosa-forte); }

/* ------------------------------------------------- Mural de avisos em LED
   Uma linha so, correndo da direita para a esquerda. O conteudo e duplicado
   pelo JS e a animacao anda exatamente metade da faixa, entao a emenda cai
   sempre no mesmo ponto e a volta nao "salta". */
.notice-banner {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 8px 13px;
  overflow: hidden;
}
.notice-list {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  flex-wrap: nowrap;
  /* Esmaece nas duas pontas: a etiqueta entra e sai em vez de ser cortada. */
  mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.notice-track {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  animation: correr var(--duracao, 30s) linear infinite;
}
.notice-track.parado { animation: none; }
.notice-list:hover .notice-track { animation-play-state: paused; }
@keyframes correr {
  from { transform: translateX(0); }
  to { transform: translateX(calc(var(--percurso, 100%) * -1)); }
}
.notice-item { flex: 0 0 auto; white-space: nowrap; }
.notice-legend {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: .72rem;
  opacity: .8;
}
@media (prefers-reduced-motion: reduce) {
  /* Sem movimento: vira uma faixa que se arrasta com o dedo/mouse. */
  .notice-track { animation: none; }
  .notice-list { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
}

/* Escolha de tema no perfil */
.temas-escolha { display: flex; flex-direction: column; gap: 8px; }
.tema-opcao {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.tema-opcao:hover { border-color: rgba(59, 130, 246, .5); }
.tema-opcao:has(input:checked) { border-color: var(--blue); background: rgba(59, 130, 246, .12); }
.tema-opcao input { accent-color: var(--blue); }
.tema-opcao b { display: block; font-size: .88rem; }
.tema-opcao small { color: var(--muted); font-size: .76rem; }
.tema-marca { font-size: 1.15rem; }
[data-tema="flor"] .tema-opcao:has(input:checked) { border-color: var(--pink); background: #fdeef6; }

/* =========================================================================
   TEMA "MONSTER" (2026-09-09)

   Preto com verde acido, inspirado na lata de energetico. E paleta e textura
   proprias - riscos diagonais desenhados em CSS -, nao a marca de ninguem:
   nenhum logotipo de terceiro entra aqui.
   ========================================================================= */

:root[data-tema="monster"] {
  --bg: #050505;
  --panel: #0e0e0e;
  --panel-2: #141414;
  --border: #262626;
  --text: #ededed;
  --muted: #8a8a8a;
  --blue: #9ae600;
  --cyan: #b6ff1a;
  --green: #6fe000;
  --orange: #d4ff33;
  --purple: #7ac400;
  --pink: #b6ff1a;
  --red: #ff3b30;

  --display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --acido: #9ae600;
  --acido-forte: #b6ff1a;
}

[data-tema="monster"] body {
  font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  /* Arranhoes de garra desenhados aqui (SVG embutido): tres talhos rasgados
     de larguras e alturas diferentes, girados, bem apagados. E o gesto da
     garra como textura - nao o logotipo de ninguem. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='%239ae600' fill-opacity='.07'%3E%3Cg transform='translate(60 40) rotate(-7)'%3E%3Cpath d='M6 0 15 9 19 52 13 96 8 58 2 22Z'/%3E%3Cpath d='M34 6 44 14 49 62 41 112 36 66 30 28Z'/%3E%3Cpath d='M64 2 72 11 75 48 69 92 64 54 59 20Z'/%3E%3C/g%3E%3Cg transform='translate(205 185) rotate(14)'%3E%3Cpath d='M5 0 12 7 15 40 10 74 6 45 1 17Z'/%3E%3Cpath d='M28 4 37 12 41 48 34 86 29 51 24 22Z'/%3E%3Cpath d='M53 1 60 9 62 38 57 70 53 43 49 16Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(90% 60% at 50% -10%, rgba(154, 230, 0, .07), transparent 62%);
  background-size: 320px 320px, 100% 100%;
  background-attachment: fixed;
}

[data-tema="monster"] .topbar h1,
[data-tema="monster"] .card h2,
[data-tema="monster"] .kpi strong,
[data-tema="monster"] .lateral-marca b,
[data-tema="monster"] .modal-caixa h2 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
[data-tema="monster"] .topbar h1 {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--acido-forte);
  text-shadow: 0 0 26px rgba(154, 230, 0, .35);
}
[data-tema="monster"] .kpi span,
[data-tema="monster"] .filters label,
[data-tema="monster"] th,
[data-tema="monster"] .pill,
[data-tema="monster"] .menu-titulo,
[data-tema="monster"] .contexto h4 { font-family: var(--mono); letter-spacing: .14em; }
[data-tema="monster"] .kpi strong { color: var(--acido-forte); }

[data-tema="monster"] .card,
[data-tema="monster"] .kpi,
[data-tema="monster"] .filters,
[data-tema="monster"] .table-wrap,
[data-tema="monster"] .lateral,
[data-tema="monster"] .contexto {
  border-radius: 3px;
  background: var(--panel);
  border-color: var(--border);
}
[data-tema="monster"] .card { position: relative; }
/* Garra: tres riscos curtos no canto do cartao, desenhados em gradiente. */
[data-tema="monster"] .card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 14px;
  width: 34px;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--acido) 0 8px, transparent 8px 13px);
  opacity: .9;
  border: 0;
}
[data-tema="monster"] .card::after { content: none; }
[data-tema="monster"] .kpi::before { height: 3px; }
[data-tema="monster"] .kpi:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .7), 0 0 20px rgba(154, 230, 0, .12); }

[data-tema="monster"] th { background: #121212; color: var(--acido); border-bottom-color: #2b2b2b; }
[data-tema="monster"] td { border-bottom-color: #1c1c1c; }
[data-tema="monster"] tbody tr:hover { background: rgba(154, 230, 0, .06); }

[data-tema="monster"] .text-button,
[data-tema="monster"] .icon-button,
[data-tema="monster"] .mini-button {
  border-radius: 3px;
  background: #121212;
  border-color: #2b2b2b;
  color: #cfe89a;
  font-family: var(--display);
  letter-spacing: .07em;
  text-transform: uppercase;
}
[data-tema="monster"] .text-button:hover,
[data-tema="monster"] .icon-button:hover,
[data-tema="monster"] .mini-button:hover {
  border-color: var(--acido);
  color: #0a0a0a;
  background: var(--acido);
  box-shadow: 0 0 18px rgba(154, 230, 0, .35);
}
[data-tema="monster"] .text-button-destaque,
[data-tema="monster"] .cadastro-acoes .btn-ok,
[data-tema="monster"] .filters button:hover {
  background: linear-gradient(135deg, var(--acido), #6fe000);
  border-color: transparent;
  color: #0a0a0a;
  font-weight: 800;
}
[data-tema="monster"] .sync-badge {
  border-radius: 3px;
  border-color: rgba(154, 230, 0, .4);
  background: rgba(154, 230, 0, .12);
  color: var(--acido-forte);
}
[data-tema="monster"] .pill { border-radius: 2px; }
[data-tema="monster"] .pill.ok, [data-tema="monster"] .pill.high { background: rgba(154, 230, 0, .16); color: var(--acido-forte); }
[data-tema="monster"] .pill.sistema { background: rgba(154, 230, 0, .12); color: #cfe89a; }

[data-tema="monster"] .item { color: #b9b9b9; }
[data-tema="monster"] .item:hover { background: rgba(154, 230, 0, .08); color: var(--acido-forte); }
[data-tema="monster"] .item.ativo {
  background: linear-gradient(90deg, rgba(154, 230, 0, .2), transparent);
  border-left-color: var(--acido);
  color: var(--acido-forte);
}
[data-tema="monster"] .lateral-marca b { color: var(--acido-forte); }
[data-tema="monster"] .avatar {
  background: linear-gradient(135deg, rgba(154, 230, 0, .35), rgba(154, 230, 0, .12));
  border-color: rgba(154, 230, 0, .5);
  color: var(--acido-forte);
}
[data-tema="monster"] .mini:hover { background: rgba(154, 230, 0, .08); color: var(--acido-forte); }
[data-tema="monster"] .filters select, [data-tema="monster"] .filters input[type="text"],
[data-tema="monster"] .filters button,
[data-tema="monster"] .table-search,
[data-tema="monster"] .login-form input,
[data-tema="monster"] .cadastro-campo input,
[data-tema="monster"] .cadastro-campo select,
[data-tema="monster"] .cadastro-campo textarea,
[data-tema="monster"] .combo-pop { background: #121212; border-color: #2b2b2b; color: var(--text); }
[data-tema="monster"] .combo-op:hover,
[data-tema="monster"] .combo-op.ativo {
  background: linear-gradient(90deg, rgba(154, 230, 0, .22), transparent);
  color: #f2ffd6;
  box-shadow: inset 0 0 0 1px rgba(154, 230, 0, .45);
  text-shadow: none;
}
[data-tema="monster"] .combo-op::before { background: var(--acido); box-shadow: 0 0 10px rgba(154, 230, 0, .8); }
[data-tema="monster"] .modal-cadastro {
  background: linear-gradient(180deg, #131313, #0a0a0a);
  border-color: rgba(154, 230, 0, .3);
}
[data-tema="monster"] .modal-cadastro::before {
  background: linear-gradient(90deg, transparent, var(--acido), #6fe000, transparent);
}
[data-tema="monster"] .cadastro-kicker { color: var(--acido); }
[data-tema="monster"] .cadastro-head h2 { background: none; color: var(--acido-forte); }
[data-tema="monster"] .cadastro-dot { background: var(--acido); box-shadow: 0 0 0 4px rgba(154, 230, 0, .16); }
[data-tema="monster"] .rodape b { color: var(--acido); }
[data-tema="monster"] .filter-hint { background: rgba(154, 230, 0, .06); border-color: rgba(154, 230, 0, .2); }
[data-tema="monster"] .notice-banner { background: rgba(154, 230, 0, .05); border-color: rgba(154, 230, 0, .18); }

/* Coluna de foto na lista de usuarios */
.celula-foto { width: 1%; padding-right: 0; }
.avatar-mini { width: 30px; height: 30px; font-size: .72rem; }
.avatar-vazio {
  background: none;
  border: 1px dashed var(--border);
  color: var(--muted);
  cursor: help;
}

/* =========================================================================
   TEMA "MUNDO INVERTIDO" (2026-09-09)

   Tudo espelhado - letras, numeros e ate a ordem das colunas -, com cores
   psicodelicas. Para nao virar bonito e inutil, o que esta sob o mouse volta
   ao normal: passar por cima de uma linha, cartao ou menu desvira aquele
   pedaco. Campo em foco tambem, senao ninguem consegue digitar.
   ========================================================================= */

:root[data-tema="invertido"] {
  --bg: #08040f;
  --panel: #150a26;
  --panel-2: #1c0f31;
  --border: #3a1d5c;
  --text: #ece3f7;
  --muted: #9c86bd;
  --blue: #a855f7;
  --cyan: #22e6ff;
  --green: #a3ff12;
  --orange: #ff7a1a;
  --purple: #a855f7;
  --pink: #ff2fd0;
  --red: #ff3b6b;

  --glitch: "Rubik Glitch", "Chakra Petch", system-ui, cursive;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --magenta: #ff2fd0;
  --toxico: #a3ff12;
}

[data-tema="invertido"] body {
  background-image:
    radial-gradient(2px 2px at 12% 22%, rgba(236, 227, 247, .35), transparent 60%),
    radial-gradient(1.5px 1.5px at 68% 14%, rgba(255, 47, 208, .4), transparent 60%),
    radial-gradient(2px 2px at 34% 71%, rgba(34, 230, 255, .3), transparent 60%),
    radial-gradient(1.5px 1.5px at 84% 62%, rgba(163, 255, 18, .3), transparent 60%),
    linear-gradient(180deg, #0b0518, #08040f);
  background-attachment: fixed;
}
/* A cor viva vem de manchas de luz derivando numa camada propria. Animar
   filter no body obriga o navegador a redesenhar a pagina inteira a cada
   quadro - foi assim na primeira versao, e o texto tremia no hover. */
[data-tema="invertido"] body::before {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(36% 30% at 28% 30%, rgba(255, 47, 208, .20), transparent 70%),
    radial-gradient(32% 28% at 72% 58%, rgba(34, 230, 255, .16), transparent 70%),
    radial-gradient(30% 26% at 48% 86%, rgba(163, 255, 18, .12), transparent 70%),
    radial-gradient(28% 24% at 84% 14%, rgba(168, 85, 247, .18), transparent 70%);
  animation: derivar 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes derivar {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to { transform: translate3d(3%, 2%, 0) scale(1.1); }
}

/* --------------------------------------------------------------- espelho */
[data-tema="invertido"] .layout { transform: scaleX(-1); }
/* O desvirar e disparado por BLOCOS GRANDES, nunca pelo botao em si.

   Na primeira versao cada item desvirava sozinho ao receber o mouse: o rotulo
   pulava para o outro lado, saia de baixo do cursor, o hover se perdia e o
   botao "corria" - dava para ver, mas nao para clicar. Com o gatilho no bloco,
   o conteudo vira uma vez quando voce entra nele e fica parado; dai o que voce
   ve e onde voce clica sao o mesmo lugar. */
[data-tema="invertido"] .lateral:hover,
[data-tema="invertido"] .table-wrap:hover,
[data-tema="invertido"] .card:hover,
[data-tema="invertido"] .kpis:hover,
[data-tema="invertido"] .topbar:hover,
[data-tema="invertido"] .notice-banner:hover,
[data-tema="invertido"] .filters:hover,
[data-tema="invertido"] .pager:hover {
  transform: scaleX(-1);
  transition: transform .18s ease;
}
/* Trocar de tema nunca espelha: e a saida de emergencia de quem se perdeu no
   espelho, e tem que estar sempre legivel e no lugar. */
[data-tema="invertido"] #temaBotao {
  transform: scaleX(-1);
  transition: none;
}
[data-tema="invertido"] .lateral:hover #temaBotao { transform: scaleX(1); }
[data-tema="invertido"] input:focus,
[data-tema="invertido"] select:focus,
[data-tema="invertido"] textarea:focus,
[data-tema="invertido"] .text-button:focus-visible,
[data-tema="invertido"] .icon-button:focus-visible { transform: scaleX(-1); }
/* O modal fica fora do .layout: espelha por conta propria. */
[data-tema="invertido"] .modal-caixa { transform: scaleX(-1); }
[data-tema="invertido"] .modal-caixa:hover { transform: scaleX(1); }

/* ------------------------------------------------------ letras tortas */
[data-tema="invertido"] .topbar h1 {
  font-family: var(--glitch);
  display: inline-flex;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--magenta);
  animation: piscar 6s steps(1) infinite;
}
[data-tema="invertido"] .topbar h1 span { display: inline-block; }
[data-tema="invertido"] .topbar h1 span:nth-child(3n) { transform: rotate(-7deg) translateY(-3px); color: var(--cyan); }
[data-tema="invertido"] .topbar h1 span:nth-child(3n+1) { transform: rotate(5deg) translateY(2px); color: var(--magenta); }
[data-tema="invertido"] .topbar h1 span:nth-child(3n+2) { transform: rotate(-2deg) translateY(-1px); color: var(--toxico); }
[data-tema="invertido"] .topbar h1 span:nth-child(5n) { transform: rotate(180deg) translateY(3px); color: var(--orange); }
@keyframes piscar {
  0%, 92%, 96%, 100% { opacity: 1; }
  94%, 98% { opacity: .35; }
}
[data-tema="invertido"] .lateral-marca b {
  font-family: var(--glitch);
  color: var(--magenta);
  text-shadow: 2px 0 var(--cyan), -2px 0 var(--orange);
}
[data-tema="invertido"] .lateral-marca img { transform: rotate(180deg); }

/* ----------------------------------------------------------- superficies */
[data-tema="invertido"] .card,
[data-tema="invertido"] .kpi,
[data-tema="invertido"] .filters,
[data-tema="invertido"] .table-wrap,
[data-tema="invertido"] .lateral,
[data-tema="invertido"] .contexto,
[data-tema="invertido"] .modal-caixa {
  border-radius: 10px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border-color: var(--border);
}
[data-tema="invertido"] .card { position: relative; overflow: hidden; }
/* Raizes saindo do pe dos cartoes, como no outro lado. */
[data-tema="invertido"] .card::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -22px;
  height: 44px;
  border: 0;
  width: auto;
  background:
    radial-gradient(closest-side, rgba(255, 47, 208, .22), transparent 70%) 10% 0/38px 44px no-repeat,
    radial-gradient(closest-side, rgba(34, 230, 255, .18), transparent 70%) 46% 0/52px 44px no-repeat,
    radial-gradient(closest-side, rgba(163, 255, 18, .16), transparent 70%) 82% 0/40px 44px no-repeat;
}
[data-tema="invertido"] th { color: var(--magenta); background: var(--panel-2); border-bottom-color: var(--border); }
[data-tema="invertido"] td { border-bottom-color: rgba(58, 29, 92, .5); }
[data-tema="invertido"] tbody tr:hover { background: rgba(168, 85, 247, .12); }
[data-tema="invertido"] .bar-mini > span,
[data-tema="invertido"] .barra > i { background: linear-gradient(90deg, var(--magenta), var(--cyan)); }
[data-tema="invertido"] .text-button-destaque,
[data-tema="invertido"] .cadastro-acoes .btn-ok {
  background: linear-gradient(135deg, var(--magenta), var(--purple));
  border-color: transparent;
  color: #fff;
}
[data-tema="invertido"] .text-button:hover,
[data-tema="invertido"] .icon-button:hover,
[data-tema="invertido"] .mini-button:hover {
  border-color: var(--magenta);
  box-shadow: 0 0 18px rgba(255, 47, 208, .35);
}
[data-tema="invertido"] .item.ativo {
  background: linear-gradient(90deg, rgba(255, 47, 208, .22), transparent);
  border-left-color: var(--magenta);
}
[data-tema="invertido"] .avatar {
  background: linear-gradient(135deg, var(--magenta), var(--purple));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 18px rgba(255, 47, 208, .5);
}
[data-tema="invertido"] .linha-dado b { color: var(--toxico); }
[data-tema="invertido"] .sync-badge { border-color: rgba(163, 255, 18, .35); background: rgba(163, 255, 18, .1); color: var(--toxico); }
[data-tema="invertido"] .rodape b { color: var(--magenta); }
@media (prefers-reduced-motion: reduce) {
  [data-tema="invertido"] body::before,
  [data-tema="invertido"] .topbar h1 { animation: none; }
}

/* =========================================================================
   TEMA "MIGO" (2026-09-10)

   Nao e paleta inventada: os tokens vem direto do migo.css do site
   migonet.com.br (teal #2EC4A9 -> lima #8CD433 no degrade de assinatura,
   fundo #071318, cantos de 18px, Sora + Figtree + JetBrains Mono - as
   mesmas tres fontes que o site usa hoje). Por ser a identidade real da
   marca (e nao uma cor de personagem em texto de frase inteira, como
   aconteceu no Freakazoid), a Sora funciona em qualquer tamanho - tem
   minuscula de verdade, nao e fonte de cartaz monocase.
   ========================================================================= */

:root[data-tema="migo"] {
  --bg: #071318;
  --panel: #0e242d;
  --panel-2: #12303b;
  --border: #1c3d49;
  --text: #e7f2ef;
  --muted: #93b0ab;
  --blue: #2EC4A9;
  --cyan: #3cc8ff;
  --green: #8CD433;
  --orange: #ffb020;
  --purple: #c81eff;
  --pink: #ff5ce0;
  --red: #ff5252;

  --display: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --grad: linear-gradient(105deg, #2EC4A9 15%, #8CD433 85%);
  --raio: 18px;
}

[data-tema="migo"] body {
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

[data-tema="migo"] .login-body {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(46, 196, 169, .12), transparent 60%),
    #071318;
}
[data-tema="migo"] .login-panel { border-radius: var(--raio); }

[data-tema="migo"] .topbar h1 {
  font-family: var(--display);
  font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Stitch (2026-09-10): azul cobalto do corpo, azul-acinzentado/lilas dos
   detalhes (barriga, focinho, contorno dos olhos), rosa claro do interior
   das orelhas, escuro como fundo - Stitch e um experimento alienigena, o
   espaco combinava mais que um fundo claro. */
:root[data-tema="stitch"] {
  --bg: #050a1c;
  --panel: #0d1836;
  --panel-2: #142352;
  --border: #2c3f80;
  --text: #eef1fc;
  --muted: #94a3d6;
  --blue: #2451e0;
  --cyan: #8fb3ef;
  --green: #2dd4a7;
  --orange: #f5a83c;
  --purple: #b39ddb;
  --pink: #ffb3d9;
  --red: #ef476f;

  /* "Fredoka" no lugar de "Quicksand" (2026-09-18, pedido do usuario: "da
     pra usar as fontes do filme") - redonda e encorpada, mesmo espirito
     dos letreiros de animacao (o filme em si usa uma fonte proprietaria da
     Disney, entao a mais parecida licenciada livremente entra no lugar).
     So no --display (titulos/logo) - o corpo do texto continua em Figtree
     abaixo, senao tabela densa fica dificil de ler. */
  --display: "Fredoka", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --grad: linear-gradient(105deg, #2451e0 15%, #b39ddb 85%);
  --raio: 16px;
}

[data-tema="stitch"] body {
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

[data-tema="stitch"] .login-body {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(36, 81, 224, .22), transparent 60%),
    radial-gradient(80% 60% at 85% 100%, rgba(255, 179, 217, .1), transparent 60%),
    #050a1c;
}
[data-tema="stitch"] .login-panel { border-radius: var(--raio); }

[data-tema="stitch"] .topbar h1 {
  font-family: var(--display);
  font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Espalha a fonte de destaque (Fredoka) pra mais paineis e titulos - pedido
   do usuario em 2026-09-18 ("nao da pra colocar em mais paineis e
   titulos?"), mesmo padrao ja usado no tema girassol: titulo de cada card
   (.card h2 - "Status dos Ramais", "Ranking de Atendentes" etc), cabecalho
   de modal, e o numero grande dos KPIs. */
[data-tema="stitch"] .card h2,
[data-tema="stitch"] .kpi strong,
[data-tema="stitch"] .modal-caixa h2,
[data-tema="stitch"] .cadastro-head h2 {
  font-family: var(--display);
  font-weight: 700;
}
[data-tema="stitch"] .pill { border-radius: 999px; }
[data-tema="stitch"] .pill.ok, [data-tema="stitch"] .pill.high { background: rgba(45, 212, 167, .14); color: var(--green); }
[data-tema="stitch"] .pill.no, [data-tema="stitch"] .pill.low { background: rgba(239, 71, 111, .14); color: var(--red); }
[data-tema="stitch"] .pill.mid { background: rgba(143, 179, 239, .16); color: var(--cyan); }
/* Interior das orelhas: rosa/lilas, so pro selo SISTEMA/REMOTO se destacar */
[data-tema="stitch"] .pill.sistema, [data-tema="stitch"] .pill.remoto { background: rgba(255, 179, 217, .16); color: var(--pink); }
[data-tema="stitch"] .pill.obs { background: rgba(179, 157, 219, .16); color: var(--purple); }
[data-tema="stitch"] .hora-registro { background: rgba(36, 81, 224, .18); color: #a9c0ff; }
[data-tema="stitch"] .hora-registro.aprox { background: var(--panel-2); color: var(--muted); }

/* Nebula (2026-09-10): mesma paleta do Mundo Invertido (o usuario pediu -
   "as cores estao super legais") mas sem o espelhamento/giro de letras, que
   e o truque proprio daquele tema - aqui fica so a cor, roxo/magenta/verde
   neon num fundo bem escuro, com o brilho de fundo que ja existia la. */
:root[data-tema="nebula"] {
  --bg: #08040f;
  --panel: #150a26;
  --panel-2: #1c0f31;
  --border: #3a1d5c;
  --text: #ece3f7;
  --muted: #9c86bd;
  --blue: #a855f7;
  --cyan: #22e6ff;
  --green: #a3ff12;
  --orange: #ff7a1a;
  --purple: #a855f7;
  --pink: #ff2fd0;
  --red: #ff3b6b;

  --display: "Chakra Petch", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --grad: linear-gradient(105deg, #a855f7 15%, #ff2fd0 85%);
  --raio: 16px;
}
[data-tema="nebula"] body {
  background-image:
    radial-gradient(2px 2px at 12% 22%, rgba(236, 227, 247, .35), transparent 60%),
    radial-gradient(1.5px 1.5px at 68% 14%, rgba(255, 47, 208, .4), transparent 60%),
    radial-gradient(2px 2px at 34% 71%, rgba(34, 230, 255, .3), transparent 60%),
    radial-gradient(1.5px 1.5px at 84% 62%, rgba(163, 255, 18, .3), transparent 60%),
    linear-gradient(180deg, #0b0518, #08040f);
  background-attachment: fixed;
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
[data-tema="nebula"] body::before {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(36% 30% at 28% 30%, rgba(255, 47, 208, .20), transparent 70%),
    radial-gradient(32% 28% at 72% 58%, rgba(34, 230, 255, .16), transparent 70%),
    radial-gradient(30% 26% at 48% 86%, rgba(163, 255, 18, .12), transparent 70%),
    radial-gradient(28% 24% at 84% 14%, rgba(168, 85, 247, .18), transparent 70%);
  animation: derivar 26s ease-in-out infinite alternate;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  [data-tema="nebula"] body::before { animation: none; }
}
[data-tema="nebula"] .login-body {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(168, 85, 247, .18), transparent 60%),
    radial-gradient(80% 60% at 85% 100%, rgba(255, 47, 208, .12), transparent 60%),
    #08040f;
}
[data-tema="nebula"] .login-panel { border-radius: var(--raio); }
[data-tema="nebula"] .topbar h1 {
  font-family: var(--display);
  font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-tema="nebula"] .pill { border-radius: 999px; }
[data-tema="nebula"] .pill.ok, [data-tema="nebula"] .pill.high { background: rgba(163, 255, 18, .14); color: var(--green); }
[data-tema="nebula"] .pill.no, [data-tema="nebula"] .pill.low { background: rgba(255, 59, 107, .14); color: var(--red); }
[data-tema="nebula"] .pill.mid { background: rgba(34, 230, 255, .14); color: var(--cyan); }
[data-tema="nebula"] .pill.sistema, [data-tema="nebula"] .pill.remoto { background: rgba(255, 47, 208, .16); color: var(--pink); }
[data-tema="nebula"] .pill.obs { background: rgba(168, 85, 247, .16); color: var(--purple); }
[data-tema="nebula"] .hora-registro { background: rgba(34, 230, 255, .16); color: var(--cyan); }
[data-tema="nebula"] .hora-registro.aprox { background: var(--panel-2); color: var(--muted); }
[data-tema="nebula"] th { color: var(--pink); background: var(--panel-2); border-bottom-color: var(--border); }

/* Nebula nunca tinha ganho um .modal-cadastro proprio (diferente de migo/
   monster/freakazoid/flor) - o modal de Novo Cadastro ficava sempre no azul/
   ciano padrao, destoando do roxo/magenta/ciano-neon do resto do tema. */
[data-tema="nebula"] .filters select, [data-tema="nebula"] .filters input[type="text"],
[data-tema="nebula"] .filters button,
[data-tema="nebula"] .table-search,
[data-tema="nebula"] .login-form input,
[data-tema="nebula"] .cadastro-campo input,
[data-tema="nebula"] .cadastro-campo select,
[data-tema="nebula"] .cadastro-campo textarea,
[data-tema="nebula"] .cadastro-check,
[data-tema="nebula"] .combo-pop { background: var(--panel-2); border-color: var(--border); color: var(--text); }
[data-tema="nebula"] .combo-op:hover,
[data-tema="nebula"] .combo-op.ativo {
  background: linear-gradient(90deg, rgba(168, 85, 247, .22), transparent);
  color: #f5e9ff;
  box-shadow: inset 0 0 0 1px rgba(168, 85, 247, .5);
  text-shadow: none;
}
[data-tema="nebula"] .combo-op::before { background: var(--pink); box-shadow: 0 0 10px rgba(255, 47, 208, .8); }
[data-tema="nebula"] .combo-op mark { color: var(--cyan); }
[data-tema="nebula"] .cadastro-data { background: var(--panel-2); border-color: var(--border); color: var(--cyan); }
[data-tema="nebula"] .modal-cadastro {
  background: linear-gradient(180deg, #1c0f31, #08040f);
  border-color: rgba(168, 85, 247, .32);
}
[data-tema="nebula"] .modal-cadastro::before {
  background: linear-gradient(90deg, transparent, var(--pink), var(--blue), transparent);
}
[data-tema="nebula"] .cadastro-head h2 {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-tema="nebula"] .cadastro-kicker { color: var(--cyan); }
[data-tema="nebula"] .cadastro-dot { background: var(--pink); box-shadow: 0 0 0 4px rgba(255, 47, 208, .18); }
[data-tema="nebula"] .cadastro-acoes .btn-ok,
[data-tema="nebula"] .chat-envio .btn-ok {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px rgba(168, 85, 247, .3);
}
[data-tema="nebula"] .anexo-escolher { background: var(--panel-2); border-color: var(--border); color: var(--cyan); }

/* Mushoku Tensei (2026-09-29): pedido do usuario, inspirado no anime - o
   raio roxo do Rudeus (magia arcana) se chocando com o azul-ciano de um
   circulo de teleporte, sobre o vazio escuro entre os dois. Aprovado antes
   via prototipo num artifact separado (com um "duelo" animado em canvas -
   aqui e' so o fundo ambiente estatico em CSS, leve o bastante pra rodar
   o dia inteiro numa tela de trabalho). */
:root[data-tema="mushoku"] {
  --bg: #0a0e1a;
  --panel: #12182b;
  --panel-2: #1a2340;
  --border: #2a3a5c;
  --text: #e8ecf7;
  --muted: #8b95b8;
  --blue: #5b7fff;
  --cyan: #4fd1ff;
  --green: #5fd88a;
  --orange: #f5a742;
  --purple: #a06bff;
  --pink: #ff6ba8;
  --red: #ff5c6c;

  --display: "Cinzel", Georgia, "Times New Roman", serif;
  --mono: "SF Mono", "Cascadia Code", Consolas, monospace;
  --grad: linear-gradient(135deg, #4fd1ff 15%, #a06bff 85%);
  --raio: 12px;
}
[data-tema="mushoku"] body {
  background: var(--bg);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
[data-tema="mushoku"] body::before {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(30% 26% at 18% 24%, rgba(160, 107, 255, .16), transparent 70%),
    radial-gradient(32% 28% at 82% 76%, rgba(79, 209, 255, .16), transparent 70%),
    radial-gradient(22% 20% at 10% 88%, rgba(245, 167, 66, .10), transparent 70%);
  animation: derivar 30s ease-in-out infinite alternate;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  [data-tema="mushoku"] body::before { animation: none; }
}
[data-tema="mushoku"] .login-body {
  background:
    radial-gradient(120% 70% at 15% 0%, rgba(160, 107, 255, .16), transparent 60%),
    radial-gradient(90% 60% at 90% 100%, rgba(79, 209, 255, .14), transparent 60%),
    #0a0e1a;
}
[data-tema="mushoku"] .login-panel { border-radius: var(--raio); }
[data-tema="mushoku"] .topbar h1 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: .3px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-tema="mushoku"] .pill { border-radius: 999px; }
[data-tema="mushoku"] .pill.ok, [data-tema="mushoku"] .pill.high { background: rgba(95, 216, 138, .16); color: var(--green); }
[data-tema="mushoku"] .pill.no, [data-tema="mushoku"] .pill.low { background: rgba(255, 92, 108, .16); color: var(--red); }
[data-tema="mushoku"] .pill.mid { background: rgba(245, 167, 66, .16); color: var(--orange); }
[data-tema="mushoku"] .pill.sistema, [data-tema="mushoku"] .pill.remoto { background: rgba(79, 209, 255, .16); color: var(--cyan); }
[data-tema="mushoku"] .pill.obs { background: rgba(160, 107, 255, .16); color: var(--purple); }
[data-tema="mushoku"] .hora-registro { background: rgba(79, 209, 255, .16); color: var(--cyan); }
[data-tema="mushoku"] .hora-registro.aprox { background: var(--panel-2); color: var(--muted); }
[data-tema="mushoku"] th { color: var(--purple); background: var(--panel-2); border-bottom-color: var(--border); }
[data-tema="mushoku"] .item { color: var(--muted); }
[data-tema="mushoku"] .item:hover { background: rgba(79, 209, 255, .08); color: var(--text); }
[data-tema="mushoku"] .item.ativo {
  background: linear-gradient(90deg, rgba(79, 209, 255, .2), transparent);
  border-left-color: var(--cyan);
  color: var(--text);
}
[data-tema="mushoku"] .filters select, [data-tema="mushoku"] .filters input[type="text"],
[data-tema="mushoku"] .filters button,
[data-tema="mushoku"] .table-search,
[data-tema="mushoku"] .login-form input,
[data-tema="mushoku"] .cadastro-campo input,
[data-tema="mushoku"] .cadastro-campo select,
[data-tema="mushoku"] .cadastro-campo textarea,
[data-tema="mushoku"] .cadastro-check,
[data-tema="mushoku"] .combo-pop { background: var(--panel-2); border-color: var(--border); color: var(--text); }
[data-tema="mushoku"] .combo-op:hover,
[data-tema="mushoku"] .combo-op.ativo {
  background: rgba(79, 209, 255, .12);
}
[data-tema="mushoku"] .combo-op::before { background: var(--cyan); box-shadow: 0 0 10px rgba(79, 209, 255, .8); }
[data-tema="mushoku"] .combo-op mark { color: var(--purple); }
[data-tema="mushoku"] .cadastro-data { background: var(--panel-2); border-color: var(--border); color: var(--cyan); }
[data-tema="mushoku"] .modal-cadastro {
  background: var(--panel);
  border-color: var(--border);
}
[data-tema="mushoku"] .modal-cadastro::before {
  background: var(--grad);
}
[data-tema="mushoku"] .cadastro-head h2 {
  font-family: var(--display);
  color: var(--text);
}
[data-tema="mushoku"] .cadastro-kicker { color: var(--cyan); }
[data-tema="mushoku"] .cadastro-dot { background: var(--purple); box-shadow: 0 0 0 4px rgba(160, 107, 255, .18); }
[data-tema="mushoku"] .cadastro-acoes .btn-ok,
[data-tema="mushoku"] .chat-envio .btn-ok {
  background: var(--grad);
  border-color: transparent;
  color: #061018;
  box-shadow: 0 8px 20px rgba(79, 209, 255, .3);
}
[data-tema="mushoku"] .anexo-escolher { background: var(--panel-2); border-color: var(--border); color: var(--cyan); }

/* Duelo visivel atras da interface (2026-09-29, correcao pedida pelo
   usuario: "nao parece uma luta", "parece chuva"). O motivo real nao era
   a fisica das particulas - e que os paineis solidos (.card/.kpi/.lateral/
   tabela) cobrem quase a tela inteira; o canvas do duelo (tema.js,
   z-index:-1, atras de QUALQUER elemento normal do documento, nao so dos
   com z-index menor) so aparecia nas frestas finas entre eles, e movimento
   numa fresta fina le como chuva, nunca como uma cena inteira. As
   superficies grandes ganham fundo translucido + blur (vidro fosco) so
   neste tema, deixando o duelo visivel por baixo da interface inteira, nao
   so nos vãos. Campos pequenos de digitar (input/select/combo) continuam
   opacos de proposito - ali e onde o valor exato precisa ficar legivel sem
   nenhuma distracao atras. */
[data-tema="mushoku"] .card,
[data-tema="mushoku"] .kpi,
[data-tema="mushoku"] .lateral,
[data-tema="mushoku"] .login-panel,
[data-tema="mushoku"] .modal-cadastro,
[data-tema="mushoku"] th {
  background: rgba(18, 24, 43, .78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
[data-tema="mushoku"] .topbar {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-tema="mushoku"] .card,
  [data-tema="mushoku"] .kpi,
  [data-tema="mushoku"] .lateral,
  [data-tema="mushoku"] .login-panel,
  [data-tema="mushoku"] .modal-cadastro,
  [data-tema="mushoku"] th {
    background: var(--panel);
  }
}

/* Cafe (2026-09-10): marrom quente, creme e dourado suave - visual de
   cafeteria, aconchegante em vez de tecnico. */
:root[data-tema="cafe"] {
  --bg: #1b120b;
  --panel: #2a1d13;
  --panel-2: #35271b;
  --border: #4a3626;
  --text: #f3e6d8;
  --muted: #b89a7d;
  --blue: #c9915a;
  --cyan: #e0b47a;
  --green: #8a9a5b;
  --orange: #d97b3f;
  --purple: #7a4a3a;
  --pink: #c98a6b;
  --red: #b1462f;

  --display: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --grad: linear-gradient(105deg, #c9915a 15%, #e0b47a 85%);
  --raio: 16px;
}
[data-tema="cafe"] body {
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
[data-tema="cafe"] .login-body {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(201, 145, 90, .18), transparent 60%),
    radial-gradient(80% 60% at 85% 100%, rgba(217, 123, 63, .12), transparent 60%),
    #1b120b;
}
[data-tema="cafe"] .login-panel { border-radius: var(--raio); }
[data-tema="cafe"] .topbar h1 {
  font-family: var(--display);
  font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-tema="cafe"] .pill { border-radius: 999px; }
[data-tema="cafe"] .pill.ok, [data-tema="cafe"] .pill.high { background: rgba(138, 154, 91, .18); color: var(--green); }
[data-tema="cafe"] .pill.no, [data-tema="cafe"] .pill.low { background: rgba(177, 70, 47, .18); color: var(--red); }
[data-tema="cafe"] .pill.mid { background: rgba(224, 180, 122, .18); color: var(--cyan); }
[data-tema="cafe"] .pill.sistema, [data-tema="cafe"] .pill.remoto { background: rgba(201, 138, 107, .2); color: var(--pink); }
[data-tema="cafe"] .pill.obs { background: rgba(122, 74, 58, .3); color: var(--purple); }
[data-tema="cafe"] .hora-registro { background: rgba(201, 145, 90, .2); color: var(--cyan); }
[data-tema="cafe"] .hora-registro.aprox { background: var(--panel-2); color: var(--muted); }

/* Gelo (2026-09-10): unico tema claro alem do Flor - azul-branco gelado,
   minimalista. color-scheme:light registrado la em cima, junto do Flor. */
:root[data-tema="gelo"] {
  --bg: #eef6fb;
  --panel: #ffffff;
  --panel-2: #e4eff7;
  --border: #c7dcea;
  --text: #1c3a4a;
  --muted: #5b7d90;
  --blue: #2f8fd1;
  --cyan: #23b6d9;
  --green: #22b389;
  --orange: #f0a23c;
  --purple: #7c93c9;
  --pink: #e0566b;
  --red: #e0566b;

  --display: "Chakra Petch", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --grad: linear-gradient(105deg, #2f8fd1 15%, #23b6d9 85%);
  --raio: 16px;
  /* --blue (#2f8fd1) e --cyan (#23b6d9) tem so ~3:1 e ~2,4:1 de contraste
     contra fundo branco - servem para icone/borda/fundo, mas texto pequeno em
     cima deles nao passa. Este e o azul escurecido so para letra (kicker,
     item ativo da lateral, marca dagua do rodape etc), ~7,5:1. */
  --azul-forte: #0e5a80;
}
[data-tema="gelo"] body {
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* Mesmo motivo do Flor: .btn-ok base e' verde claro fixo pensado pra fundo
   escuro, sem contraste em fundo claro. */
[data-tema="gelo"] .btn-ok {
  border-color: rgba(34, 179, 137, .5);
  background: rgba(34, 179, 137, .12);
  color: var(--green);
}
[data-tema="gelo"] .btn-ok:hover {
  background: rgba(34, 179, 137, .22);
  border-color: var(--green);
}
[data-tema="gelo"] .login-body {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(47, 143, 209, .14), transparent 60%),
    radial-gradient(80% 60% at 85% 100%, rgba(35, 182, 217, .1), transparent 60%),
    #eef6fb;
}
[data-tema="gelo"] .login-panel { border-radius: var(--raio); }
[data-tema="gelo"] .topbar h1 {
  font-family: var(--display);
  font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-tema="gelo"] .pill { border-radius: 999px; }
[data-tema="gelo"] .pill.ok, [data-tema="gelo"] .pill.high { background: rgba(34, 179, 137, .16); color: var(--green); }
[data-tema="gelo"] .pill.no, [data-tema="gelo"] .pill.low { background: rgba(224, 86, 107, .16); color: var(--red); }
[data-tema="gelo"] .pill.mid { background: rgba(35, 182, 217, .16); color: var(--cyan); }
[data-tema="gelo"] .pill.sistema, [data-tema="gelo"] .pill.remoto { background: rgba(124, 147, 201, .18); color: var(--purple); }
[data-tema="gelo"] .pill.obs { background: rgba(91, 125, 144, .14); color: var(--muted); }
[data-tema="gelo"] .pill.destino-planilha { background: rgba(34, 179, 137, .16); color: var(--green); }
[data-tema="gelo"] .pill.destino-banco { background: rgba(35, 182, 217, .16); color: var(--cyan); }
[data-tema="gelo"] .hora-registro { background: rgba(47, 143, 209, .14); color: var(--blue); }
[data-tema="gelo"] .hora-registro.aprox { background: var(--panel-2); color: var(--muted); }

/* Gelo (2026-09-11): a folha de estilo foi escrita pensando em fundo escuro -
   varios campos/cartoes tem cor de fundo literal (#0e1726, igual ao dark) e
   varios textos de status (verde/vermelho/roxo claro) so leem bem sobre um
   fundo escuro. No Flor isso ja tinha sido varrido (ver comentario "Superficies
   escuras" mais acima); o Gelo nunca recebeu a mesma passada, entao ficava com
   caixas escuras soltas (filtros, campo de login, ramais, cartoes do NOC/
   Alertas/Dude/PV) e o modal de Novo Cadastro inteiro sempre no visual escuro
   padrao, destoando do resto da tela clara. */
[data-tema="gelo"] .filters select, [data-tema="gelo"] .filters input[type="text"],
[data-tema="gelo"] .login-form input,
[data-tema="gelo"] .table-search,
[data-tema="gelo"] .summary-textarea,
[data-tema="gelo"] .admin-form select,
[data-tema="gelo"] .dude-campo-input,
[data-tema="gelo"] .campo-salario input,
[data-tema="gelo"] .escala-select {
  background: #ffffff;
  border-color: var(--border);
  color: var(--text);
}
[data-tema="gelo"] .filters button,
[data-tema="gelo"] .mini-button,
[data-tema="gelo"] .text-button {
  background: #ffffff;
  border-color: var(--border);
  color: var(--azul-forte);
}
[data-tema="gelo"] .mini-button.danger { color: #a83c4f; }
[data-tema="gelo"] .ramal-btn,
[data-tema="gelo"] .alerta-card,
[data-tema="gelo"] .sinal-caixa,
[data-tema="gelo"] .lane-chip,
[data-tema="gelo"] .bar-mini {
  background: #ffffff;
  border-color: var(--border);
}
[data-tema="gelo"] .ramal-btn.on .ramal-nome { color: #0e7a5e; }
[data-tema="gelo"] .ramal-btn.off .ramal-nome { color: #a83c4f; }
[data-tema="gelo"] .escala-grade-cel.fim-de-semana { background: rgba(47, 143, 209, .06); }

/* Textos claros feitos para fundo escuro - no fundo claro do Gelo ficavam
   lavados ou quase invisiveis. */
[data-tema="gelo"] .sync-badge { color: #0e7a5e; }
[data-tema="gelo"] .flash.ok { color: #0e7a5e; }
[data-tema="gelo"] .flash.error { color: #a83c4f; }
[data-tema="gelo"] .kpi small.delta-up { color: #0e7a5e; }
[data-tema="gelo"] .kpi small.delta-down { color: #a83c4f; }
[data-tema="gelo"] .filter-hint.active { color: #b06a10; }
[data-tema="gelo"] .selo-plantao { color: #b06a10; }
[data-tema="gelo"] .plantao-conta b { color: #0e7a5e; }
[data-tema="gelo"] .escala-valor b { color: #0e7a5e; }
[data-tema="gelo"] .pessoa-fem { color: #a83c4f; }
[data-tema="gelo"] .pessoa-masc { color: var(--azul-forte); }
[data-tema="gelo"] .pill.status-nova { background: rgba(47, 143, 209, .14); color: var(--azul-forte); }
[data-tema="gelo"] .pill.status-analisando { background: rgba(240, 162, 60, .16); color: #b06a10; }
[data-tema="gelo"] .pill.status-resolvida { background: rgba(34, 179, 137, .16); color: #0e7a5e; }
[data-tema="gelo"] .pill.status-recusada { background: var(--panel-2); color: var(--muted); }
/* Os pills ok/no/mid/sistema/remoto do Gelo ja tinham fundo proprio (acima),
   mas a cor do texto usava a variavel "fraca" (pensada pra fundo/borda, nao
   pra letra) - aqui por cima, so a cor. */
[data-tema="gelo"] .pill.ok, [data-tema="gelo"] .pill.high { color: #0e7a5e; }
[data-tema="gelo"] .pill.no, [data-tema="gelo"] .pill.low { color: #a83c4f; }
[data-tema="gelo"] .pill.mid { color: #0e5f70; }
[data-tema="gelo"] .pill.sistema, [data-tema="gelo"] .pill.remoto { color: #5a3d99; }

/* Barra lateral: texto claro-sobre-escuro do tema padrao lava no fundo branco
   do Gelo - inclusive o item da pagina atual, que ficava quase ilegivel. */
[data-tema="gelo"] .item { color: var(--muted); }
[data-tema="gelo"] .item:hover { background: rgba(47, 143, 209, .1); color: var(--azul-forte); }
[data-tema="gelo"] .item.ativo {
  background: linear-gradient(90deg, rgba(47, 143, 209, .18), transparent);
  color: var(--azul-forte);
}
[data-tema="gelo"] .lateral-marca b { color: var(--azul-forte); }
[data-tema="gelo"] .avatar {
  background: linear-gradient(135deg, rgba(47, 143, 209, .18), rgba(35, 182, 217, .14));
  border-color: var(--border);
  color: var(--azul-forte);
}
[data-tema="gelo"] .rodape b { color: var(--azul-forte); }

/* Modal de Novo Cadastro: sem isto ficava sempre no visual escuro padrao,
   mesmo com o resto da tela no Gelo - o problema que o usuario reportou. */
[data-tema="gelo"] .modal-fundo { background: rgba(28, 58, 74, .35); }
[data-tema="gelo"] .modal-cadastro {
  background: linear-gradient(180deg, #ffffff, #eaf5fb);
  border-color: var(--border);
}
[data-tema="gelo"] .modal-cadastro::before {
  background: linear-gradient(90deg, transparent, var(--cyan), var(--blue), transparent);
}
[data-tema="gelo"] .cadastro-head h2 {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-tema="gelo"] .cadastro-kicker { color: var(--azul-forte); }
[data-tema="gelo"] .cadastro-dot { background: var(--cyan); box-shadow: 0 0 0 4px rgba(35, 182, 217, .16); }
[data-tema="gelo"] .cadastro-campo > span { color: var(--azul-forte); }
[data-tema="gelo"] .cadastro-campo > span::before { background: var(--blue); }
[data-tema="gelo"] .cadastro-campo input,
[data-tema="gelo"] .cadastro-campo select,
[data-tema="gelo"] .cadastro-campo textarea,
[data-tema="gelo"] .cadastro-check,
[data-tema="gelo"] .combo-pop {
  background: #ffffff;
  border-color: var(--border);
  color: var(--text);
}
[data-tema="gelo"] .cadastro-campo input[readonly] { background: var(--panel-2); color: var(--muted); }
[data-tema="gelo"] .cadastro-data { background: var(--panel-2); border-color: var(--border); color: var(--azul-forte); }
[data-tema="gelo"] .cadastro-acoes { border-top-color: var(--border); }
[data-tema="gelo"] .combo-op { color: var(--text); }
[data-tema="gelo"] .combo-op:hover,
[data-tema="gelo"] .combo-op.ativo {
  background: linear-gradient(90deg, rgba(47, 143, 209, .12), rgba(35, 182, 217, .1));
  color: var(--azul-forte);
  box-shadow: inset 0 0 0 1px var(--border);
  text-shadow: none;
}
[data-tema="gelo"] .combo-op::before { background: var(--cyan); box-shadow: none; }
[data-tema="gelo"] .combo-op mark { color: var(--azul-forte); }
[data-tema="gelo"] .cadastro-acoes .btn-ok,
[data-tema="gelo"] .chat-envio .btn-ok {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px rgba(35, 182, 217, .28);
}
[data-tema="gelo"] .anexo-escolher { background: #ffffff; border-color: var(--border); color: var(--azul-forte); }
[data-tema="gelo"] .anexo-nome.tem { color: var(--azul-forte); }

/* Modal de Novo Cadastro nos temas que nunca tinham ganho ajuste nenhum
   (auditoria de 2026-09-12): Cafe, Console, Floresta, Ouro Noturno e Stitch
   ficavam sempre no azul/ciano padrao (a regra base de .modal-cadastro e
   .text-button-destaque e toda em cor fixa). Console e Stitch ja usam um
   azul bem perto do padrao, mas os campos/combobox tambem estavam sem
   variavel nenhuma - por isso entram aqui tambem, nao so os temas com cor
   bem diferente. Console nao tem --grad definido, entao usa um gradiente
   equivalente (--blue -> --cyan) direto nas duas regras que precisariam. */
[data-tema="cafe"] .text-button-destaque,
[data-tema="console"] .text-button-destaque,
[data-tema="floresta"] .text-button-destaque,
[data-tema="ouro-noturno"] .text-button-destaque,
[data-tema="stitch"] .text-button-destaque {
  border-color: var(--border);
  color: var(--text);
}
[data-tema="cafe"] .text-button-destaque { background: linear-gradient(135deg, rgba(201, 145, 90, .38), rgba(224, 180, 122, .32)); }
[data-tema="console"] .text-button-destaque { background: linear-gradient(135deg, rgba(59, 130, 246, .38), rgba(34, 211, 238, .32)); }
[data-tema="floresta"] .text-button-destaque { background: linear-gradient(135deg, rgba(74, 143, 107, .38), rgba(111, 191, 138, .32)); }
[data-tema="ouro-noturno"] .text-button-destaque { background: linear-gradient(135deg, rgba(212, 175, 55, .34), rgba(232, 199, 102, .28)); }
[data-tema="stitch"] .text-button-destaque { background: linear-gradient(135deg, rgba(36, 81, 224, .38), rgba(143, 179, 239, .3)); }

[data-tema="cafe"] .modal-cadastro,
[data-tema="console"] .modal-cadastro,
[data-tema="floresta"] .modal-cadastro,
[data-tema="ouro-noturno"] .modal-cadastro,
[data-tema="stitch"] .modal-cadastro {
  border-color: var(--border);
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
}
[data-tema="cafe"] .modal-cadastro::before,
[data-tema="console"] .modal-cadastro::before,
[data-tema="floresta"] .modal-cadastro::before,
[data-tema="ouro-noturno"] .modal-cadastro::before,
[data-tema="stitch"] .modal-cadastro::before {
  background: linear-gradient(90deg, transparent, var(--cyan), var(--blue), transparent);
}
[data-tema="cafe"] .cadastro-head h2,
[data-tema="floresta"] .cadastro-head h2,
[data-tema="ouro-noturno"] .cadastro-head h2,
[data-tema="stitch"] .cadastro-head h2 {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-tema="console"] .cadastro-head h2 {
  background: linear-gradient(105deg, var(--blue) 15%, var(--cyan) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-tema="cafe"] .cadastro-kicker,
[data-tema="console"] .cadastro-kicker,
[data-tema="floresta"] .cadastro-kicker,
[data-tema="ouro-noturno"] .cadastro-kicker,
[data-tema="stitch"] .cadastro-kicker {
  color: var(--muted);
}
[data-tema="cafe"] .cadastro-campo > span::before,
[data-tema="console"] .cadastro-campo > span::before,
[data-tema="floresta"] .cadastro-campo > span::before,
[data-tema="ouro-noturno"] .cadastro-campo > span::before,
[data-tema="stitch"] .cadastro-campo > span::before {
  background: var(--blue);
}
[data-tema="cafe"] .cadastro-campo input,
[data-tema="cafe"] .cadastro-campo select,
[data-tema="cafe"] .cadastro-campo textarea,
[data-tema="cafe"] .cadastro-check,
[data-tema="cafe"] .combo-pop,
[data-tema="console"] .cadastro-campo input,
[data-tema="console"] .cadastro-campo select,
[data-tema="console"] .cadastro-campo textarea,
[data-tema="console"] .cadastro-check,
[data-tema="console"] .combo-pop,
[data-tema="floresta"] .cadastro-campo input,
[data-tema="floresta"] .cadastro-campo select,
[data-tema="floresta"] .cadastro-campo textarea,
[data-tema="floresta"] .cadastro-check,
[data-tema="floresta"] .combo-pop,
[data-tema="ouro-noturno"] .cadastro-campo input,
[data-tema="ouro-noturno"] .cadastro-campo select,
[data-tema="ouro-noturno"] .cadastro-campo textarea,
[data-tema="ouro-noturno"] .cadastro-check,
[data-tema="ouro-noturno"] .combo-pop,
[data-tema="stitch"] .cadastro-campo input,
[data-tema="stitch"] .cadastro-campo select,
[data-tema="stitch"] .cadastro-campo textarea,
[data-tema="stitch"] .cadastro-check,
[data-tema="stitch"] .combo-pop {
  background: var(--panel-2);
  border-color: var(--border);
  color: var(--text);
}
[data-tema="cafe"] .cadastro-campo input[readonly],
[data-tema="console"] .cadastro-campo input[readonly],
[data-tema="floresta"] .cadastro-campo input[readonly],
[data-tema="ouro-noturno"] .cadastro-campo input[readonly],
[data-tema="stitch"] .cadastro-campo input[readonly] {
  background: var(--panel);
  color: var(--muted);
}
[data-tema="cafe"] .cadastro-data,
[data-tema="console"] .cadastro-data,
[data-tema="floresta"] .cadastro-data,
[data-tema="ouro-noturno"] .cadastro-data,
[data-tema="stitch"] .cadastro-data {
  background: var(--panel-2);
  border-color: var(--border);
  color: var(--text);
}
[data-tema="cafe"] .cadastro-acoes,
[data-tema="console"] .cadastro-acoes,
[data-tema="floresta"] .cadastro-acoes,
[data-tema="ouro-noturno"] .cadastro-acoes,
[data-tema="stitch"] .cadastro-acoes {
  border-top-color: var(--border);
}
[data-tema="cafe"] .combo-op:hover, [data-tema="cafe"] .combo-op.ativo,
[data-tema="console"] .combo-op:hover, [data-tema="console"] .combo-op.ativo,
[data-tema="floresta"] .combo-op:hover, [data-tema="floresta"] .combo-op.ativo,
[data-tema="ouro-noturno"] .combo-op:hover, [data-tema="ouro-noturno"] .combo-op.ativo,
[data-tema="stitch"] .combo-op:hover, [data-tema="stitch"] .combo-op.ativo {
  background: var(--panel);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border);
  text-shadow: none;
}
[data-tema="cafe"] .combo-op::before,
[data-tema="console"] .combo-op::before,
[data-tema="floresta"] .combo-op::before,
[data-tema="ouro-noturno"] .combo-op::before,
[data-tema="stitch"] .combo-op::before {
  background: var(--cyan);
  box-shadow: none;
}
[data-tema="cafe"] .combo-op mark,
[data-tema="console"] .combo-op mark,
[data-tema="floresta"] .combo-op mark,
[data-tema="ouro-noturno"] .combo-op mark,
[data-tema="stitch"] .combo-op mark {
  color: var(--cyan);
}
[data-tema="cafe"] .cadastro-acoes .btn-ok,
[data-tema="floresta"] .cadastro-acoes .btn-ok,
[data-tema="ouro-noturno"] .cadastro-acoes .btn-ok,
[data-tema="stitch"] .cadastro-acoes .btn-ok {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
}
[data-tema="console"] .cadastro-acoes .btn-ok {
  background: linear-gradient(105deg, var(--blue) 15%, var(--cyan) 85%);
  border-color: transparent;
  color: #fff;
}
[data-tema="cafe"] .anexo-escolher,
[data-tema="console"] .anexo-escolher,
[data-tema="floresta"] .anexo-escolher,
[data-tema="ouro-noturno"] .anexo-escolher,
[data-tema="stitch"] .anexo-escolher {
  background: var(--panel-2);
  border-color: var(--border);
  color: var(--text);
}

/* Mundo Invertido: o botao de CADASTRO e o de salvar ja tinham o gradiente
   magenta/roxo (acima); faltava o interior do modal (campos, combobox),
   que ficava sempre no azul padrao (auditoria de 2026-09-12). */
[data-tema="invertido"] .modal-cadastro {
  border-color: var(--border);
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
}
[data-tema="invertido"] .modal-cadastro::before {
  background: linear-gradient(90deg, transparent, var(--cyan), var(--magenta), transparent);
}
[data-tema="invertido"] .cadastro-head h2 {
  background: linear-gradient(90deg, var(--magenta), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-tema="invertido"] .cadastro-kicker { color: var(--magenta); }
[data-tema="invertido"] .cadastro-dot { background: var(--cyan); }
[data-tema="invertido"] .cadastro-campo > span::before { background: var(--magenta); }
[data-tema="invertido"] .cadastro-campo input,
[data-tema="invertido"] .cadastro-campo select,
[data-tema="invertido"] .cadastro-campo textarea,
[data-tema="invertido"] .cadastro-check,
[data-tema="invertido"] .combo-pop {
  background: var(--panel-2);
  border-color: var(--border);
  color: var(--text);
}
[data-tema="invertido"] .cadastro-campo input[readonly] { background: var(--panel); color: var(--muted); }
[data-tema="invertido"] .cadastro-data { background: var(--panel-2); border-color: var(--border); color: var(--text); }
[data-tema="invertido"] .cadastro-acoes { border-top-color: var(--border); }
[data-tema="invertido"] .combo-op:hover,
[data-tema="invertido"] .combo-op.ativo {
  background: rgba(168, 85, 247, .16);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--magenta);
  text-shadow: none;
}
[data-tema="invertido"] .combo-op::before { background: var(--magenta); box-shadow: none; }
[data-tema="invertido"] .combo-op mark { color: var(--cyan); }
[data-tema="invertido"] .anexo-escolher { background: var(--panel-2); border-color: var(--border); color: var(--text); }

/* Ouro Noturno (2026-09-10): preto profundo + dourado, visual premium. */
:root[data-tema="ouro-noturno"] {
  --bg: #0a0805;
  --panel: #16130c;
  --panel-2: #201a10;
  --border: #3a2f1a;
  --text: #f5ecd8;
  --muted: #a8946b;
  --blue: #d4af37;
  --cyan: #e8c766;
  --green: #8a9a4a;
  --orange: #e0a83e;
  --purple: #8a6f2e;
  --pink: #b98a3d;
  --red: #b23b3b;

  --display: "Chakra Petch", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --grad: linear-gradient(105deg, #d4af37 15%, #e8c766 85%);
  --raio: 16px;
}
[data-tema="ouro-noturno"] body {
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
[data-tema="ouro-noturno"] .login-body {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(212, 175, 55, .16), transparent 60%),
    radial-gradient(80% 60% at 85% 100%, rgba(184, 138, 61, .1), transparent 60%),
    #0a0805;
}
[data-tema="ouro-noturno"] .login-panel { border-radius: var(--raio); }
[data-tema="ouro-noturno"] .topbar h1 {
  font-family: var(--display);
  font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-tema="ouro-noturno"] .pill { border-radius: 999px; }
[data-tema="ouro-noturno"] .pill.ok, [data-tema="ouro-noturno"] .pill.high { background: rgba(138, 154, 74, .18); color: var(--green); }
[data-tema="ouro-noturno"] .pill.no, [data-tema="ouro-noturno"] .pill.low { background: rgba(178, 59, 59, .18); color: var(--red); }
[data-tema="ouro-noturno"] .pill.mid { background: rgba(232, 199, 102, .16); color: var(--cyan); }
[data-tema="ouro-noturno"] .pill.sistema, [data-tema="ouro-noturno"] .pill.remoto { background: rgba(185, 138, 61, .2); color: var(--pink); }
[data-tema="ouro-noturno"] .pill.obs { background: rgba(138, 111, 46, .24); color: var(--purple); }
[data-tema="ouro-noturno"] .hora-registro { background: rgba(212, 175, 55, .18); color: var(--blue); }
[data-tema="ouro-noturno"] .hora-registro.aprox { background: var(--panel-2); color: var(--muted); }

/* Floresta (2026-09-10): verde-musgo + terracota, tom natural. */
:root[data-tema="floresta"] {
  --bg: #0d1710;
  --panel: #15221a;
  --panel-2: #1c2d22;
  --border: #2e4535;
  --text: #e6f0e8;
  --muted: #8fac97;
  --blue: #4a8f6b;
  --cyan: #6fbf8a;
  --green: #7ec850;
  --orange: #c9793f;
  --purple: #7a6a4a;
  --pink: #c98a6b;
  --red: #b4462f;

  --display: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --grad: linear-gradient(105deg, #4a8f6b 15%, #7ec850 85%);
  --raio: 16px;
}
[data-tema="floresta"] body {
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
[data-tema="floresta"] .login-body {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(74, 143, 107, .18), transparent 60%),
    radial-gradient(80% 60% at 85% 100%, rgba(126, 200, 80, .12), transparent 60%),
    #0d1710;
}
[data-tema="floresta"] .login-panel { border-radius: var(--raio); }
[data-tema="floresta"] .topbar h1 {
  font-family: var(--display);
  font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-tema="floresta"] .pill { border-radius: 999px; }
[data-tema="floresta"] .pill.ok, [data-tema="floresta"] .pill.high { background: rgba(126, 200, 80, .18); color: var(--green); }
[data-tema="floresta"] .pill.no, [data-tema="floresta"] .pill.low { background: rgba(180, 70, 47, .18); color: var(--red); }
[data-tema="floresta"] .pill.mid { background: rgba(111, 191, 138, .16); color: var(--cyan); }
[data-tema="floresta"] .pill.sistema, [data-tema="floresta"] .pill.remoto { background: rgba(201, 138, 107, .2); color: var(--pink); }
[data-tema="floresta"] .pill.obs { background: rgba(122, 106, 74, .28); color: var(--purple); }
[data-tema="floresta"] .hora-registro { background: rgba(74, 143, 107, .2); color: var(--cyan); }
[data-tema="floresta"] .hora-registro.aprox { background: var(--panel-2); color: var(--muted); }

[data-tema="migo"] .card h2,
[data-tema="migo"] .kpi strong,
[data-tema="migo"] .lateral-marca b,
[data-tema="migo"] .modal-caixa h2 {
  font-family: var(--display);
  font-weight: 700;
}
[data-tema="migo"] .kpi span,
[data-tema="migo"] .filters label,
[data-tema="migo"] th,
[data-tema="migo"] .pill,
[data-tema="migo"] .menu-titulo,
[data-tema="migo"] .contexto h4 { font-family: var(--mono); letter-spacing: .06em; }

/* Cantos mais arredondados que o padrao do app - o mesmo --radius:18px do
   site, em vez dos 8px do resto do dashboard. */
[data-tema="migo"] .card,
[data-tema="migo"] .kpi,
[data-tema="migo"] .filters,
[data-tema="migo"] .table-wrap,
[data-tema="migo"] .lateral,
[data-tema="migo"] .contexto {
  border-radius: var(--raio);
  background: var(--panel);
  border-color: var(--border);
}
[data-tema="migo"] .kpi { position: relative; overflow: hidden; }
[data-tema="migo"] .kpi::before { height: 3px; background: var(--grad); }
[data-tema="migo"] .kpi:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .5), 0 0 0 1px rgba(46, 196, 169, .2); }

[data-tema="migo"] th { background: var(--panel-2); color: var(--blue); border-bottom-color: var(--border); }
[data-tema="migo"] td { border-bottom-color: #163038; }
[data-tema="migo"] tbody tr:hover { background: rgba(46, 196, 169, .06); }

[data-tema="migo"] .text-button,
[data-tema="migo"] .icon-button,
[data-tema="migo"] .mini-button {
  border-radius: 999px;
  background: var(--panel-2);
  border-color: var(--border);
  color: #bcded8;
  font-family: var(--display);
  font-weight: 600;
}
[data-tema="migo"] .text-button:hover,
[data-tema="migo"] .icon-button:hover,
[data-tema="migo"] .mini-button:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: rgba(46, 196, 169, .12);
}
[data-tema="migo"] .text-button-destaque {
  background: var(--grad);
  border-color: transparent;
  color: #062b25;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(46, 196, 169, .3);
}
[data-tema="migo"] .sync-badge {
  border-radius: 999px;
  border-color: rgba(140, 212, 51, .4);
  background: rgba(140, 212, 51, .12);
  color: var(--green);
}
[data-tema="migo"] .pill { border-radius: 999px; }
[data-tema="migo"] .pill.ok, [data-tema="migo"] .pill.high { background: rgba(140, 212, 51, .14); color: var(--green); }
[data-tema="migo"] .pill.no, [data-tema="migo"] .pill.low { background: rgba(255, 82, 82, .14); color: var(--red); }
[data-tema="migo"] .pill.mid { background: rgba(60, 200, 255, .14); color: var(--cyan); }
/* Roxo/rosa do site (o acento do botao de easter egg) nao entrou aqui: numa
   tela cheia de selo "SISTEMA"/"REMOTO" por linha, ficava roxo/rosa demais.
   Verde-neon proprio (nem o lima do --green, pra nao confundir com "ok"). */
[data-tema="migo"] .pill.sistema { background: rgba(0, 230, 160, .14); color: #00e6a0; }
[data-tema="migo"] .pill.obs { background: rgba(255, 92, 224, .14); color: var(--pink); }
[data-tema="migo"] .pill.anexo { background: rgba(140, 212, 51, .14); color: var(--green); }
[data-tema="migo"] .pill.remoto { background: rgba(0, 230, 160, .14); color: #00e6a0; }

[data-tema="migo"] .item { color: #9fc2bc; }
[data-tema="migo"] .item:hover { background: rgba(46, 196, 169, .1); color: var(--blue); }
[data-tema="migo"] .item.ativo {
  background: linear-gradient(90deg, rgba(46, 196, 169, .18), transparent);
  border-left-color: var(--blue);
  color: var(--blue);
}
[data-tema="migo"] .lateral-marca b { color: var(--blue); }
[data-tema="migo"] .avatar {
  background: var(--grad);
  border-color: transparent;
  color: #062b25;
}
[data-tema="migo"] .mini:hover { background: rgba(46, 196, 169, .1); color: var(--blue); }

[data-tema="migo"] .filters select, [data-tema="migo"] .filters input[type="text"],
[data-tema="migo"] .filters button,
[data-tema="migo"] .table-search,
[data-tema="migo"] .login-form input,
[data-tema="migo"] .cadastro-campo input,
[data-tema="migo"] .cadastro-campo select,
[data-tema="migo"] .cadastro-campo textarea,
[data-tema="migo"] .combo-pop { background: var(--panel-2); border-color: var(--border); color: var(--text); border-radius: 10px; }
[data-tema="migo"] .login-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(46, 196, 169, .18); }
[data-tema="migo"] .combo-op:hover,
[data-tema="migo"] .combo-op.ativo {
  background: linear-gradient(90deg, rgba(46, 196, 169, .18), transparent);
  color: #eafff8;
  box-shadow: inset 0 0 0 1px rgba(46, 196, 169, .4);
  text-shadow: none;
}
[data-tema="migo"] .combo-op::before { background: var(--blue); box-shadow: 0 0 10px rgba(46, 196, 169, .7); }

[data-tema="migo"] .modal-cadastro {
  background: linear-gradient(180deg, #0e242d, #071318);
  border-color: rgba(46, 196, 169, .3);
  border-radius: var(--raio);
}
[data-tema="migo"] .modal-cadastro::before { background: var(--grad); }
[data-tema="migo"] .cadastro-kicker { color: var(--blue); }
[data-tema="migo"] .cadastro-head h2 { background: none; color: var(--text); }
[data-tema="migo"] .cadastro-dot { background: var(--blue); box-shadow: 0 0 0 4px rgba(46, 196, 169, .16); }

[data-tema="migo"] .rodape b { color: var(--blue); }
[data-tema="migo"] .filter-hint { background: rgba(46, 196, 169, .06); border-color: rgba(46, 196, 169, .2); }
[data-tema="migo"] .filter-hint.active { background: rgba(60, 200, 255, .1); border-color: rgba(60, 200, 255, .35); color: var(--cyan); }
[data-tema="migo"] .notice-banner { background: rgba(46, 196, 169, .05); border-color: rgba(46, 196, 169, .18); }

[data-tema="migo"] .chat-msg { border-radius: var(--raio); }
[data-tema="migo"] .chat-msg b { color: var(--blue); }
[data-tema="migo"] .chat-msg.minha { border-color: var(--blue); background: linear-gradient(135deg, rgba(46, 196, 169, .16), rgba(140, 212, 51, .07)); }
[data-tema="migo"] .chat-msg-sistema { border-color: var(--red); background: rgba(255, 82, 82, .1); }
[data-tema="migo"] .chat-link { background: var(--red); color: #fff; }

[data-tema="migo"] .hora-registro { background: rgba(0, 230, 160, .16); color: #00e6a0; }
[data-tema="migo"] .hora-registro.aprox { background: var(--panel-2); color: var(--muted); }
[data-tema="migo"] .kpi small.delta-up { color: var(--green); }
[data-tema="migo"] .kpi small.delta-down { color: var(--red); }
[data-tema="migo"] .cliente-fone { color: var(--muted); }
[data-tema="migo"] .modal-fundo { background: rgba(4, 10, 13, .72); }
[data-tema="migo"] .brand-logo { filter: drop-shadow(0 0 20px rgba(46, 196, 169, .3)); }

/* =========================================================================
   TEMA "FREAKAZOID" (2026-09-10, cores corrigidas em 2026-09-10)

   Vermelho vibrante do macacao como cor dominante - nao o azul, que e a
   PELE do personagem (correcao pedida depois de ver a primeira versao: o
   azul tinha virado a cor principal por engano). Azul-ciano da pele como
   acento secundario (hover, foco, itens ativos); branco das luvas/botas no
   texto de botao de destaque; amarelo reservado so pro pill "mid" e pro
   detalhe do filtro ativo, ecoando o contorno do logo "F!" do peito sem
   espalhar por tudo. Fundo escuro como Classico/Monster/Invertido - nao
   precisa da bateria de correcoes de contraste que o Flor (unico tema
   claro) exige.

   Bungee Shade (com sombra/3D) fica reservada so pro titulo grande do topo
   - em tamanho de cartao ela virava ruido ilegivel. Cabecalho de cartao,
   KPI e afins usam a Bungee "cheia" (--display), sem sombra.
   ========================================================================= */

:root[data-tema="freakazoid"] {
  --bg: #0a0509;
  --panel: #170a0f;
  --panel-2: #21121a;
  --border: #3d1e28;
  --text: #f7eef1;
  --muted: #b98a95;
  --blue: #4fd8f0;
  --cyan: #7ee8fa;
  --green: #38f2b0;
  --orange: #ffd21f;
  --purple: #b565ff;
  --pink: #ff4fa0;
  --red: #ef1229;

  --display-hero: "Bungee Shade", "Arial Black", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
  --branco: #ffffff;
}

[data-tema="freakazoid"] body {
  font-family: "Titillium Web", system-ui, -apple-system, sans-serif;
  /* Linhas de varredura de TV fora do ar, bem apagadas - textura, nao estampa. */
  background-image:
    repeating-linear-gradient(0deg, rgba(239, 18, 41, .025) 0 1px, transparent 1px 3px),
    radial-gradient(110% 80% at 90% -10%, rgba(239, 18, 41, .1), transparent 55%),
    radial-gradient(90% 70% at 0% 10%, rgba(79, 216, 240, .06), transparent 50%);
  background-attachment: fixed;
}

[data-tema="freakazoid"] .login-body {
  background:
    repeating-linear-gradient(0deg, rgba(239, 18, 41, .03) 0 1px, transparent 1px 3px),
    radial-gradient(120% 70% at 50% 0%, rgba(239, 18, 41, .12), transparent 60%),
    #0a0509;
}

[data-tema="freakazoid"] .topbar h1 {
  font-family: var(--display-hero);
  letter-spacing: .02em;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--red);
  text-shadow: 0 0 18px rgba(239, 18, 41, .5), 0 0 44px rgba(239, 18, 41, .2);
  animation: freak-flicker 4.5s ease-in-out infinite;
}
@keyframes freak-flicker {
  0%, 88%, 92%, 100% { opacity: 1; }
  90% { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
  [data-tema="freakazoid"] .topbar h1 { animation: none; }
}

/* Bungee (com ou sem sombra) e fonte de cartaz: so tem uma forma de letra
   (monocase, sem minuscula de verdade) e fica pesada demais pra texto que se
   le o dia inteiro - mesmo uma palavra curta como "INFORMACOES" ou "PARAPUA"
   cansa a vista quando aparece a cada atualizacao da tela. Fica reservada so
   pro titulo grande do topo (.topbar h1, uma vez por pagina); o resto do
   tema carrega a personalidade pela cor e pelo fundo, nao pela letra. */
[data-tema="freakazoid"] .kpi strong,
[data-tema="freakazoid"] .lateral-marca b {
  font-weight: 800;
}

[data-tema="freakazoid"] .kpi span,
[data-tema="freakazoid"] .filters label,
[data-tema="freakazoid"] th,
[data-tema="freakazoid"] .pill,
[data-tema="freakazoid"] .menu-titulo,
[data-tema="freakazoid"] .contexto h4 {
  font-family: var(--mono);
  letter-spacing: .1em;
  /* So a 400 e a 700 foram carregadas: pedir mais pesado (o app base usa
     font-weight: 800 no rotulo do KPI) forcava negrito sintetico do
     navegador, que ficava borrado. */
  font-weight: 700;
}

[data-tema="freakazoid"] .card,
[data-tema="freakazoid"] .kpi,
[data-tema="freakazoid"] .filters,
[data-tema="freakazoid"] .table-wrap,
[data-tema="freakazoid"] .lateral,
[data-tema="freakazoid"] .contexto {
  border-radius: 10px;
  background: var(--panel);
  border-color: var(--border);
}
[data-tema="freakazoid"] .kpi { position: relative; overflow: hidden; }
/* Faixa com as duas cores do personagem - macacao e pele - marcando cada
   cartao, sem forcar o amarelo do logo pra dentro dela. */
[data-tema="freakazoid"] .kpi::before { height: 3px; background: linear-gradient(90deg, var(--red), var(--blue)); }
[data-tema="freakazoid"] .kpi:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .6), 0 0 20px rgba(239, 18, 41, .16); }

[data-tema="freakazoid"] th { background: var(--panel-2); color: var(--blue); border-bottom-color: var(--border); }
[data-tema="freakazoid"] td { border-bottom-color: #2a1420; }
[data-tema="freakazoid"] tbody tr:hover { background: rgba(79, 216, 240, .06); }

[data-tema="freakazoid"] .text-button,
[data-tema="freakazoid"] .icon-button,
[data-tema="freakazoid"] .mini-button {
  border-radius: 8px;
  background: var(--panel-2);
  border-color: var(--border);
  color: #d9c3cb;
}
[data-tema="freakazoid"] .text-button:hover,
[data-tema="freakazoid"] .icon-button:hover,
[data-tema="freakazoid"] .mini-button:hover {
  border-color: var(--blue);
  color: #02171c;
  background: var(--blue);
  box-shadow: 0 0 18px rgba(79, 216, 240, .35);
}
[data-tema="freakazoid"] .text-button-destaque {
  background: linear-gradient(120deg, var(--red), #ff5a6b);
  border-color: transparent;
  color: var(--branco);
  font-weight: 800;
}
[data-tema="freakazoid"] .sync-badge {
  border-radius: 999px;
  border-color: rgba(56, 242, 176, .4);
  background: rgba(56, 242, 176, .1);
  color: var(--green);
}
[data-tema="freakazoid"] .pill { border-radius: 6px; }
[data-tema="freakazoid"] .pill.ok, [data-tema="freakazoid"] .pill.high { background: rgba(56, 242, 176, .14); color: var(--green); }
[data-tema="freakazoid"] .pill.no, [data-tema="freakazoid"] .pill.low { background: rgba(239, 18, 41, .14); color: #ff5a6b; }
[data-tema="freakazoid"] .pill.mid { background: rgba(255, 210, 31, .14); color: var(--orange); }
[data-tema="freakazoid"] .pill.sistema { background: rgba(181, 101, 255, .14); color: var(--purple); }
[data-tema="freakazoid"] .pill.obs { background: rgba(255, 79, 160, .14); color: var(--pink); }
[data-tema="freakazoid"] .pill.anexo { background: rgba(56, 242, 176, .14); color: var(--green); }
[data-tema="freakazoid"] .pill.remoto { background: rgba(181, 101, 255, .14); color: var(--purple); }

[data-tema="freakazoid"] .item { color: #cba3ac; }
[data-tema="freakazoid"] .item:hover { background: rgba(79, 216, 240, .08); color: var(--blue); }
[data-tema="freakazoid"] .item.ativo {
  background: linear-gradient(90deg, rgba(239, 18, 41, .18), transparent);
  border-left-color: var(--red);
  color: var(--red);
}
[data-tema="freakazoid"] .lateral-marca b { color: var(--red); }
[data-tema="freakazoid"] .avatar {
  background: linear-gradient(135deg, rgba(239, 18, 41, .35), rgba(79, 216, 240, .18));
  border-color: rgba(239, 18, 41, .5);
  color: var(--branco);
}
[data-tema="freakazoid"] .mini:hover { background: rgba(79, 216, 240, .08); color: var(--blue); }

[data-tema="freakazoid"] .filters select, [data-tema="freakazoid"] .filters input[type="text"],
[data-tema="freakazoid"] .filters button,
[data-tema="freakazoid"] .table-search,
[data-tema="freakazoid"] .login-form input,
[data-tema="freakazoid"] .cadastro-campo input,
[data-tema="freakazoid"] .cadastro-campo select,
[data-tema="freakazoid"] .cadastro-campo textarea,
[data-tema="freakazoid"] .combo-pop { background: var(--panel-2); border-color: var(--border); color: var(--text); }
[data-tema="freakazoid"] .login-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(79, 216, 240, .18); }
[data-tema="freakazoid"] .combo-op:hover,
[data-tema="freakazoid"] .combo-op.ativo {
  background: linear-gradient(90deg, rgba(79, 216, 240, .2), transparent);
  color: #eafcff;
  box-shadow: inset 0 0 0 1px rgba(79, 216, 240, .45);
  text-shadow: none;
}
[data-tema="freakazoid"] .combo-op::before { background: var(--blue); box-shadow: 0 0 10px rgba(79, 216, 240, .8); }

[data-tema="freakazoid"] .modal-cadastro {
  background: linear-gradient(180deg, #22101a, #0a0509);
  border-color: rgba(239, 18, 41, .3);
}
[data-tema="freakazoid"] .modal-cadastro::before {
  background: linear-gradient(90deg, transparent, var(--red), var(--blue), transparent);
}
[data-tema="freakazoid"] .cadastro-kicker { color: var(--blue); }
[data-tema="freakazoid"] .cadastro-head h2 { background: none; color: var(--red); }
[data-tema="freakazoid"] .cadastro-dot { background: var(--red); box-shadow: 0 0 0 4px rgba(239, 18, 41, .16); }

[data-tema="freakazoid"] .rodape b { color: var(--red); }
[data-tema="freakazoid"] .filter-hint { background: rgba(79, 216, 240, .06); border-color: rgba(79, 216, 240, .2); }
[data-tema="freakazoid"] .filter-hint.active { background: rgba(255, 210, 31, .1); border-color: rgba(255, 210, 31, .35); color: var(--orange); }
[data-tema="freakazoid"] .notice-banner { background: rgba(79, 216, 240, .05); border-color: rgba(79, 216, 240, .18); }

[data-tema="freakazoid"] .chat-msg b { color: var(--blue); }
[data-tema="freakazoid"] .chat-msg.minha { border-color: var(--blue); background: linear-gradient(135deg, rgba(79, 216, 240, .16), rgba(79, 216, 240, .06)); }
[data-tema="freakazoid"] .chat-msg-sistema { border-color: var(--red); background: rgba(239, 18, 41, .1); }
[data-tema="freakazoid"] .chat-link { background: var(--red); color: var(--branco); }

[data-tema="freakazoid"] .hora-registro { background: rgba(181, 101, 255, .16); color: var(--purple); }
[data-tema="freakazoid"] .hora-registro.aprox { background: var(--panel-2); color: var(--muted); }
[data-tema="freakazoid"] .kpi small.delta-up { color: var(--green); }
[data-tema="freakazoid"] .kpi small.delta-down { color: var(--red); }
[data-tema="freakazoid"] .cliente-fone { color: var(--muted); }
[data-tema="freakazoid"] .modal-fundo { background: rgba(5, 2, 5, .72); }
[data-tema="freakazoid"] .brand-logo { filter: drop-shadow(0 0 20px rgba(239, 18, 41, .35)); }

/* Foto do atendente no ranking e no KPI de top atendente */
.foto-atendente {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  vertical-align: middle;
  margin-right: 7px;
}
.foto-atendente.foto-kpi {
  width: 30px;
  height: 30px;
  margin-right: 9px;
  border-color: rgba(59, 130, 246, .5);
}
.celula-atendente { white-space: nowrap; }
[data-tema="console"] .foto-atendente { border-color: rgba(34, 211, 238, .4); }
[data-tema="monster"] .foto-atendente { border-color: rgba(154, 230, 0, .5); }
[data-tema="invertido"] .foto-atendente { border-color: rgba(255, 47, 208, .5); }

/* Nada pode empurrar a pagina para os lados.

   Na carga, antes de o letreiro de avisos ser medido, a faixa dele tem
   width: max-content - larga o bastante para estourar a coluna e deixar a
   pagina rolada para a direita, com a barra lateral cortada.

   overflow-x: clip e nao hidden de proposito: clip corta sem criar um
   container de rolagem, entao a barra lateral continua grudada no topo
   (position: sticky), que hidden quebraria. */
.layout { overflow-x: clip; }
.layout > .app-shell { max-width: 100%; }
.notice-banner, .notice-list { max-width: 100%; }

/* KPI de texto (problema, cidade, atendente) x KPI de numero.

   O mesmo tamanho servia para "132" e para "INFORMAÇÕES" - e a palavra longa
   passava da borda do cartao, cortada no meio. Texto ganha um corpo menor e
   pode quebrar quando nao houver jeito; numero continua grande, que e o que se
   le de longe. */
#kpiProblem, #kpiCity, #kpiAttendant {
  font-size: clamp(.92rem, 1.2vw, 1.28rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

/* Relogio e frase do protetor seguem o tema, junto com a chuva. */
[data-tema="flor"] .protetor-relogio strong { color: #831843; text-shadow: 0 0 30px rgba(236, 72, 153, .55); }
[data-tema="flor"] .protetor-frase { color: #db2777; text-shadow: 0 0 22px rgba(236, 72, 153, .5); }
[data-tema="flor"] .protetor-relogio em { color: rgba(74, 43, 58, .55); }
[data-tema="monster"] .protetor-relogio strong { color: #eaffc2; text-shadow: 0 0 32px rgba(154, 230, 0, .6); }
[data-tema="monster"] .protetor-frase { color: #9ae600; text-shadow: 0 0 24px rgba(154, 230, 0, .7); }
[data-tema="invertido"] .protetor-relogio strong { color: #ffe9fb; text-shadow: 0 0 34px rgba(255, 47, 208, .75); }
[data-tema="invertido"] .protetor-frase { color: #ff2fd0; text-shadow: 0 0 26px rgba(255, 47, 208, .7); }
[data-tema="classico"] .protetor-frase { color: #7dd3fc; }

/* Plantao na barra lateral: horario de hoje e a contagem regressiva. */
.plantao-horario { font-size: .76rem; }
.plantao-horario b { font-variant-numeric: tabular-nums; }
.plantao-conta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 2px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(34, 197, 94, .3);
  background: rgba(34, 197, 94, .1);
  text-align: center;
}
.plantao-conta b {
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: #86efac;
}
.plantao-conta span { font-size: .7rem; color: var(--muted); }
[data-tema="flor"] .plantao-conta { border-color: #bbf0dd; background: #e9fbf4; }
[data-tema="flor"] .plantao-conta b { color: #12876a; }
[data-tema="monster"] .plantao-conta { border-color: rgba(154, 230, 0, .35); background: rgba(154, 230, 0, .1); }
[data-tema="monster"] .plantao-conta b { color: #b6ff1a; }
[data-tema="invertido"] .plantao-conta { border-color: rgba(163, 255, 18, .3); background: rgba(163, 255, 18, .08); }
[data-tema="invertido"] .plantao-conta b { color: #a3ff12; }

/* Escala de plantao: quem esta escalado hoje, acima do bloco do operador. */
.escala {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
}
.escala h4 {
  margin: 0;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.escala-pessoa { display: flex; align-items: center; gap: 10px; }
.escala-pessoa b { display: block; font-size: .92rem; line-height: 1.2; }
.escala-pessoa > div > span { font-size: .68rem; color: var(--muted); }
[data-tema="console"] .escala h4 { font-family: var(--mono); }
[data-tema="flor"] .escala { background: #f8e1ed; }
[data-tema="monster"] .escala { background: #121212; }
[data-tema="monster"] .escala-pessoa b { color: #b6ff1a; }
[data-tema="invertido"] .escala-pessoa b { color: #ff2fd0; }

/* Painel de escala dentro dos avisos */
.escala-select { min-height: 32px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--border); background: #0e1726; color: var(--text); }
.linha-trocada td { background: rgba(245, 158, 11, .08); }
.escala-padrao { color: var(--muted); font-size: .74rem; }
[data-tema="flor"] .escala-select { background: #fff9fc; }
[data-tema="flor"] .linha-trocada td { background: #fff4e2; }
[data-tema="monster"] .escala-select { background: #121212; border-color: #2b2b2b; }

/* Calendario de plantao do mes (modal "Gerar plantao do mes") */
.modal-escala-mes { width: min(760px, 92vw); }
.escala-mes-controles { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 10px; }
.escala-mes-controles label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.escala-mes-controles input {
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
}
.escala-grade { display: flex; flex-direction: column; gap: 5px; }
.escala-grade-linha { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.escala-grade-dia-semana {
  text-align: center;
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  padding: 2px 0 6px;
}
.escala-grade-cel {
  min-height: 60px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 7px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--panel-2);
}
.escala-grade-vazia { min-height: 60px; }
.escala-grade-numero { font-size: .7rem; color: var(--muted); font-weight: 700; }
.escala-grade-cel select.escala-select {
  min-height: 28px;
  width: 100%;
  padding: 0 4px;
  font-size: .76rem;
  font-weight: 700;
}
.escala-grade-cel .escala-padrao { font-size: .62rem; }
.escala-grade-cel.fim-de-semana { background: rgba(255, 255, 255, .03); }
.escala-grade-cel.hoje { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.escala-grade-cel.trocado select.escala-select { color: var(--orange); border-color: var(--orange); }
.escala-grade-cel .pill { align-self: flex-start; margin-top: 1px; font-size: .56rem; padding: 1px 6px; }
[data-tema="flor"] .escala-grade-cel.fim-de-semana { background: #fbe0ee; }
/* Calendario de leitura (/plantao): nome em texto simples em vez do <select>
   do modal de edicao - mesmo tamanho/peso pra ficar visualmente igual. */
.escala-grade-nome { font-size: .76rem; font-weight: 700; }
/* Riscado, e nao so opacidade (que .linha-passada ja usa noutro lugar pra
   "passado" generico) - pedido explicito, pra separar visualmente de longe
   quem ja passou de quem ainda vem. */
.escala-grade-cel.passado { opacity: .55; }
.escala-grade-cel.passado .escala-grade-nome { text-decoration: line-through; }

/* Tabela "Escala de plantao" (pagina /plantao): dias passados comecam
   escondidos - toggle "Mostrar dias passados" (plantao.js) so troca a classe
   no wrapper, sem pedido novo ao servidor (as linhas ja vem no HTML). */
.escala-linha-passada { display: none; }
#escalaTabelaWrap.mostrando-passados .escala-linha-passada { display: table-row; }

/* "Ver" do Historico de Plantao por pessoa: <details> dentro de celula de
   tabela, mesmo padrao zero-JS do .release-antigas (notas de versao). A
   sub-tabela de datas fica recuada e mais compacta que a tabela externa. */
.historico-plantao-detalhe > summary {
  display: inline-flex;
  cursor: pointer;
  list-style: none;
}
.historico-plantao-detalhe > summary::-webkit-details-marker { display: none; }
.historico-plantao-detalhe table {
  margin-top: 8px;
  font-size: .82rem;
}

/* "Ver IPs" da Analise de Acesso (Log de Seguranca) - trocado de <details>
   nativo (2026-09-24, usuario relatou que o clique nao abria nada em
   algumas situacoes) pra um botao com toggle em JS, controlado por inteiro
   (ver o listener em log-seguranca.js). A linha de detalhe e' outra <tr>
   logo abaixo, nao uma tabela dentro da mesma celula. */
.link-expandir {
  background: transparent;
  border: none;
  color: var(--cyan);
  cursor: pointer;
  font: inherit;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.link-expandir:hover { text-decoration: underline; }
.seta-expandir { font-size: .7rem; }
.analise-detalhe-linha td { background: var(--panel-2); padding-top: 4px; padding-bottom: 10px; }
.analise-detalhe-tabela { width: 100%; margin: 0; font-size: .78rem; }
.analise-detalhe-tabela th { position: static; background: transparent; }
.input-rotulo-ip {
  width: 100%;
  min-width: 140px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  color: var(--text);
  font-size: .78rem;
}
.input-rotulo-ip::placeholder { color: var(--muted); }
/* Destaque de quem teve o ultimo login de um IP diferente do habitual -
   borda no td (nao no tr: a tabela usa border-collapse, que ignora borda
   direto no tr na maioria dos motores). */
.analise-mudou-ip td:first-child { border-left: 3px solid var(--orange); }
/* Conferencia Estoque: material com saldo negativo (saiu mais do que
   entrou) - mesmo padrao de borda no td (nao no tr) do analise-mudou-ip
   acima, border-collapse ignora borda direto no tr. */
.linha-alerta td:first-child { border-left: 3px solid var(--red); }
.linha-alerta td:last-child { color: var(--red); font-weight: 700; }
/* Conferencia Estoque: onde cada material esta no Estoque 3D (armario/
   caixa + tipo + posicao) - pedido do usuario vendo o painel de uma
   gaveta: "o Armario que esta ou caixa, gaveteiro, qual gaveta todas as
   informaçoes". */
.locais-material { min-width: 220px; }
.local-linha { font-size: .78rem; line-height: 1.5; }
.local-linha + .local-linha { margin-top: 2px; }
.local-linha small { display: block; color: var(--muted); font-size: .68rem; }
.local-resto { color: var(--muted); cursor: help; }
/* Escritorios: um bloco por data dentro do detalhe expandido, igual a
   planilha original ("ENVIOS DE MATERIAL") separava por data. */
.estoque-bloco-data { margin-bottom: 16px; }
.estoque-bloco-data:last-child { margin-bottom: 0; }
.estoque-bloco-data > strong { display: block; margin-bottom: 6px; color: var(--muted); font-size: .82rem; }

/* Estoque — Escritórios: leitura rápida na tabela e detalhe em blocos. */
.estoque-escritorios-intro { margin: 0 0 16px; padding: 11px 14px; border: 1px solid color-mix(in srgb, var(--cyan) 28%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--cyan) 7%, transparent); }
.estoque-filtro-detalhe { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; padding: 9px 11px; border: 1px solid color-mix(in srgb, var(--cyan) 25%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--cyan) 7%, transparent); }
.estoque-filtro-detalhe label { color: var(--muted); font-size: .68rem; font-weight: 700; }
.estoque-filtro-detalhe select { min-height: 30px; min-width: 154px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); font: inherit; }
.estoque-filtro-detalhe select:focus { border-color: var(--cyan); outline: 2px solid color-mix(in srgb, var(--cyan) 20%, transparent); }
.estoque-checkbox { display: inline-flex; align-items: center; gap: 5px; color: var(--text) !important; font-size: .68rem; font-weight: 700; white-space: nowrap; }
.estoque-checkbox input { accent-color: var(--cyan); width: 14px; height: 14px; margin: 0; }
.estoque-filtro-detalhe span { margin-left: auto; color: var(--muted); font-size: .68rem; }
.estoque-cadastro-modal { width: min(540px, calc(100vw - 32px)); }
.estoque-cadastro-ajuda { margin: 0 0 16px; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.estoque-cadastro-modal .admin-form { grid-template-columns: 1fr 1fr; }
.estoque-cadastro-modal .admin-form > label:first-child, .estoque-cadastro-modal .estoque-novo-material, .estoque-cadastro-modal .form-actions { grid-column: 1 / -1; }
.estoque-cadastro-modal .admin-form > label:first-child select, .estoque-cadastro-modal .admin-form select, .estoque-cadastro-modal .admin-form input { width: 100%; }
.estoque-novo-material label { display: block; }
.estoque-botao-novo { justify-self: start; align-self: end; width: auto !important; min-height: 32px !important; height: 32px; padding: 0 10px !important; border: 1px dashed color-mix(in srgb, var(--cyan) 55%, var(--border)) !important; border-radius: 7px !important; background: color-mix(in srgb, var(--cyan) 7%, var(--panel-2)) !important; color: var(--cyan) !important; font-size: .7rem !important; font-weight: 800; letter-spacing: normal !important; }
.estoque-botao-novo:hover { border-style: solid !important; background: color-mix(in srgb, var(--cyan) 14%, var(--panel-2)) !important; }
.estoque-escritorios-tabela-wrap { border-radius: 14px; overflow: hidden; }
.estoque-escritorios-tabela { font-size: .82rem; }
.estoque-escritorios-tabela thead th { padding: 12px 14px; letter-spacing: .04em; white-space: nowrap; }
.estoque-escritorios-tabela tbody td { padding: 13px 14px; vertical-align: middle; }
.estoque-escritorio-linha:hover td { background: color-mix(in srgb, var(--cyan) 6%, transparent); }
.estoque-escritorio-nome { display: inline-flex; align-items: center; gap: 10px; min-width: 210px; border: 0; padding: 0; color: var(--text); background: transparent; cursor: pointer; text-align: left; font: inherit; }
.estoque-escritorio-nome:hover strong { color: var(--cyan); }
.estoque-escritorio-nome > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; }
.estoque-escritorio-nome strong { font-size: .88rem; font-weight: 800; letter-spacing: .01em; transition: color .15s ease; }
.estoque-escritorio-nome small { color: var(--muted); font-size: .68rem; font-weight: 600; }
.estoque-escritorio-icone { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid color-mix(in srgb, var(--cyan) 36%, transparent); border-radius: 9px; color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, transparent); font-size: 1rem; }
.estoque-escritorio-nome .seta-expandir { margin-left: auto; color: var(--muted); font-size: .82rem; transition: transform .15s ease; }
.estoque-escritorio-nome[aria-expanded="true"] .seta-expandir { color: var(--cyan); transform: rotate(90deg); }
.estoque-numero { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 700; }
.estoque-saldo { display: inline-flex; min-width: 64px; justify-content: center; padding: 5px 10px; border: 1px solid color-mix(in srgb, var(--green) 34%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--green) 10%, transparent); color: var(--green); font-weight: 800; font-variant-numeric: tabular-nums; }
.estoque-saldo.negativo { border-color: color-mix(in srgb, var(--red) 45%, transparent); background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }
.estoque-escritorios-tabela .analise-detalhe-linha td { padding: 0; border-bottom: 0; background: color-mix(in srgb, var(--panel-2) 75%, #000 25%); }
.estoque-escritorios-tabela .analise-detalhe-linha > td > div { padding: 18px 22px 20px 58px; border-top: 1px solid color-mix(in srgb, var(--cyan) 18%, transparent); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--cyan) 55%, transparent); }
.estoque-bloco-data { margin: 0 0 16px; padding: 13px 14px 8px; border: 1px solid color-mix(in srgb, var(--border) 75%, var(--cyan) 25%); border-radius: 11px; background: color-mix(in srgb, var(--panel) 72%, transparent); }
.estoque-bloco-data:last-child { margin-bottom: 0; }
.estoque-data-cabecalho { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.estoque-data-cabecalho strong { margin: 0; color: var(--text); font-size: .82rem; letter-spacing: .02em; }
.estoque-data-icone { color: var(--cyan); font-size: .78rem; }
.estoque-data-contagem { margin-left: auto; color: var(--muted); font-size: .68rem; font-weight: 700; }
.estoque-detalhe-grade { display: grid; width: 100%; font-size: .76rem; }
.estoque-detalhe-cabecalho, .estoque-detalhe-linha { display: grid; grid-template-columns: 26% 40% 34%; align-items: center; }
.estoque-detalhe-cabecalho { padding: 7px 8px; color: var(--muted); font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.estoque-detalhe-linha { min-height: 38px; padding: 0 8px; border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.estoque-detalhe-linha > div { min-width: 0; padding-right: 8px; }
.estoque-quantidade { display: inline-flex; align-items: center; min-width: 34px; padding: 4px 7px; border-radius: 6px; background: color-mix(in srgb, var(--cyan) 12%, transparent); color: var(--text); font-variant-numeric: tabular-nums; }
.estoque-material { color: var(--text); font-weight: 650; }
.estoque-movimento { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 6px; font-size: .68rem; font-weight: 700; }
.estoque-movimento.saida { background: color-mix(in srgb, var(--orange) 13%, transparent); color: var(--orange); }
.estoque-movimento.devolucao { background: color-mix(in srgb, var(--green) 13%, transparent); color: var(--green); }
.estoque-tecnicos-tabela { font-size: .82rem; }
.estoque-tecnicos-controles { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.estoque-tecnicos-controles select { min-height: 32px; padding: 0 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel); color: var(--text); font: inherit; font-size: .72rem; }
.estoque-tecnicos-controles select:focus { border-color: var(--cyan); outline: 2px solid color-mix(in srgb, var(--cyan) 18%, transparent); }
.estoque-tecnicos-tabela thead th { padding: 12px 14px; white-space: nowrap; }
.estoque-tecnicos-tabela tbody td { padding: 13px 14px; vertical-align: middle; }
.estoque-tecnico-linha:hover td { background: color-mix(in srgb, var(--cyan) 6%, transparent); }
.estoque-tecnico-nome { display: inline-flex; align-items: center; gap: 10px; min-width: 245px; border: 0; padding: 0; color: var(--text); background: transparent; cursor: pointer; text-align: left; font: inherit; }
.estoque-tecnico-nome:hover strong { color: var(--cyan); }
.estoque-tecnico-nome > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; }
.estoque-tecnico-nome strong { font-size: .88rem; font-weight: 800; transition: color .15s ease; }
.estoque-tecnico-nome small { color: var(--muted); font-size: .68rem; font-weight: 600; }
.estoque-tecnico-icone { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid color-mix(in srgb, var(--cyan) 36%, transparent); border-radius: 9px; color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, transparent); font-size: 1rem; }
.estoque-tecnico-nome .seta-expandir { margin-left: auto; color: var(--muted); font-size: .82rem; transition: transform .15s ease; }
.estoque-tecnico-nome[aria-expanded="true"] .seta-expandir { color: var(--cyan); transform: rotate(90deg); }
.estoque-tecnicos-tabela .analise-detalhe-linha td { padding: 0; border-bottom: 0; background: color-mix(in srgb, var(--panel-2) 75%, #000 25%); }
.estoque-tecnicos-tabela .analise-detalhe-linha > td { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--cyan) 55%, transparent); }
.estoque-tecnico-detalhe { padding: 16px 22px 18px 58px; border-top: 1px solid color-mix(in srgb, var(--cyan) 18%, transparent); }
.estoque-tecnico-detalhe-titulo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: var(--text); font-size: .78rem; }
.estoque-tecnico-detalhe-titulo span { color: var(--muted); font-size: .68rem; }
.estoque-tecnico-filtros { display: flex; gap: 12px; margin: -2px 0 9px; }
.estoque-tecnico-filtros label { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: .68rem; font-weight: 700; }
.estoque-tecnico-filtros input { accent-color: var(--cyan); width: 14px; height: 14px; margin: 0; }
.estoque-tecnico-grade { border: 1px solid color-mix(in srgb, var(--border) 75%, var(--cyan) 25%); border-radius: 10px; overflow: hidden; }
.estoque-tecnico-grade > div { display: grid; grid-template-columns: 1fr 130px 130px 130px; align-items: center; min-height: 38px; padding: 0 12px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); font-size: .76rem; }
.estoque-tecnico-grade > div:last-child { border-bottom: 0; }
.estoque-tecnico-grade > div:first-child { min-height: 30px; background: color-mix(in srgb, var(--panel) 72%, transparent); color: var(--muted); font-size: .62rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.estoque-tecnico-grade > div > strong { display: inline-flex; justify-self: start; min-width: 38px; justify-content: center; padding: 4px 8px; border-radius: 6px; background: color-mix(in srgb, var(--cyan) 12%, transparent); color: var(--text); font-variant-numeric: tabular-nums; }
.estoque-tecnico-grade > p { margin: 0; padding: 14px; }
.estoque-pedidos-vazio { min-height: 220px; display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; }
.estoque-pedidos-vazio h2 { margin: 0; }
.estoque-pedidos-vazio p { margin: 0; color: var(--muted); }
.estoque-pedidos-icone { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid color-mix(in srgb, var(--cyan) 36%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--cyan) 10%, transparent); font-size: 1.4rem; }
.estoque-pedido-ajuda { margin: -4px 0 16px; color: var(--muted); font-size: .76rem; line-height: 1.45; }
.pedido-contexto { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: -4px 0 14px; padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--cyan) 22%, transparent); border-radius: 7px; background: color-mix(in srgb, var(--cyan) 6%, transparent); font-size: .68rem; }
.pedido-contexto span { color: var(--muted); }
.pedido-contexto strong { color: var(--cyan); }
.pedido-contexto strong::after { content: " ·"; color: var(--muted); margin-right: 4px; }
.pedido-contexto strong:last-child::after { content: ""; }
.pedido-tipo-opcoes { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: .72rem; font-weight: 700; }
.pedido-tipo-opcoes > span { color: var(--text); }
.pedido-tipo-opcoes label { display: inline-flex !important; grid-template-columns: none !important; align-items: center; gap: 5px; color: var(--text) !important; text-transform: none !important; font-weight: 700 !important; }
.pedido-tipo-opcoes input { width: 15px !important; height: 15px !important; min-height: 15px !important; margin: 0; accent-color: var(--cyan); }
.estoque-pedido-form { display: grid; gap: 12px; }
.estoque-pedido-form label { display: grid; gap: 6px; color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.estoque-pedido-form select, .estoque-pedido-form input, .estoque-pedido-form textarea { width: 100%; border: 1px solid var(--border); border-radius: 7px; background: var(--panel-2); color: var(--text); padding: 8px 10px; font: inherit; }
.estoque-pedido-form select, .estoque-pedido-form input { min-height: 36px; }
.estoque-pedido-form textarea { resize: vertical; }
.pedido-itens { display: grid; gap: 7px; }
.estoque-pedido-form .pedido-item-linha { display: grid !important; grid-template-columns: 112px minmax(180px, 320px) max-content 30px !important; gap: 7px; align-items: center; }
.estoque-pedido-form .pedido-quantidade { width: 112px !important; min-width: 0; font-size: .76rem; }
.estoque-pedido-form .pedido-quantidade::placeholder { font-size: .76rem; }
.estoque-pedido-form .pedido-material { width: 100% !important; min-width: 0; }
.estoque-pedido-form .pedido-item-linha input { min-height: 32px; height: 32px; padding-top: 5px; padding-bottom: 5px; }
.pedido-item-linha .mini-button { min-height: 30px; padding: 0; }
.pedido-item-tipo { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 12px; font-weight: 700; }
.pedido-item-tipo label { display: inline-flex !important; align-items: center; gap: 4px !important; margin: 0 !important; text-transform: none !important; }
.pedido-item-tipo input { width: 14px !important; min-width: 14px !important; min-height: 14px !important; height: 14px !important; padding: 0 !important; accent-color: var(--cyan); }
.pedido-adicionar-item { justify-self: start; color: var(--cyan); }
.pedido-revisao { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 7px !important; color: var(--text) !important; text-transform: none !important; font-weight: 600 !important; }
.pedido-revisao input { width: 15px !important; height: 15px !important; accent-color: var(--cyan); }
.pedido-acoes-e-legenda { display: grid; justify-items: start; gap: 10px; }
.pedido-acoes-e-legenda .btn-ok { justify-self: start; }
.pedido-status:not(:empty) { margin: -2px 0 0; color: var(--orange); font-weight: 700; }
.pedidos-alerta { margin-left: 8px; color: var(--orange); font-weight: 800; animation: correio-pisca 1.1s ease-in-out infinite; }
.tem-pedido-pendente .card { border-color: color-mix(in srgb, var(--orange) 60%, var(--border)); animation: pedido-pendente-pisca 1.1s ease-in-out infinite; }
@keyframes pedido-pendente-pisca { 50% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--orange) 48%, transparent), 0 0 22px color-mix(in srgb, var(--orange) 22%, transparent); } }
.pedidos-cabecalho { flex-wrap: wrap; }
.pedido-filtros-status { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.pedido-filtros-status .mini-button { color: var(--muted); }
.pedido-filtros-status .mini-button.ativo { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 14%, transparent); color: var(--cyan); }
.pill.pedido-status-em-analise { border-color: #d97706 !important; background: rgba(245, 158, 11, .22) !important; color: #fbbf24 !important; }
.pill.pedido-status-em-separacao { border-color: #7e22ce !important; background: rgba(168, 85, 247, .22) !important; color: #d8b4fe !important; }
.pill.pedido-status-em-rota { border-color: #0369a1 !important; background: rgba(14, 165, 233, .22) !important; color: #7dd3fc !important; }
.pill.pedido-status-recebido { border-color: #15803d !important; background: rgba(34, 197, 94, .22) !important; color: #86efac !important; }
.pill.pedido-status-divergencia { border-color: #dc2626 !important; background: rgba(239, 68, 68, .22) !important; color: #fca5a5 !important; }
.pedido-legenda { width: min(100%, 620px); padding: 10px 12px; border-left: 2px solid color-mix(in srgb, var(--cyan) 55%, transparent); border-radius: 0 7px 7px 0; background: color-mix(in srgb, var(--cyan) 6%, transparent); color: var(--muted); font-size: .7rem; line-height: 1.45; }
.pedido-legenda strong { display: block; margin-bottom: 4px; color: var(--cyan); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.pedido-legenda p { margin: 3px 0; }
.pedido-legenda b { color: var(--text); }
.estoque-pedidos-tabela td { vertical-align: top; }
.estoque-pedidos-layout { display: grid; grid-template-columns: minmax(0, 610px) minmax(0, 1fr); gap: 16px; align-items: start; }
.estoque-pedidos-layout.sem-formulario { grid-template-columns: minmax(0, 1fr); }
.estoque-pedidos-formularios, .estoque-pedidos-recentes-secao { min-width: 0; margin-bottom: 0; }
.estoque-pedidos-formularios { grid-template-columns: 1fr; }
.pedido-acao { margin-top: 5px; color: var(--cyan); }
.pedido-separar-item { display: grid; grid-template-columns: 1fr 70px; gap: 7px; align-items: center; margin-bottom: 5px; }
.pedido-separado { width: 62px; min-height: 27px; padding: 3px 5px; border: 1px solid var(--border); border-radius: 5px; background: var(--panel-2); color: var(--text); font: inherit; }
.pedido-separar-escritorio { grid-template-columns: minmax(120px, 1fr) minmax(170px, 240px); }
.pedido-separado-texto { width: 100%; min-height: 30px; padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--cyan) 32%, var(--border)); border-radius: 6px; background: var(--panel-2); color: var(--text); font: inherit; }
.estoque-pedidos-tabela .pedido-separado-texto { display: block; width: min(100%, 220px); margin-bottom: 5px; }
.pedido-escritorio-linha { min-height: 0; display: flex; align-items: center; margin-bottom: 2px; line-height: 1.35; }
.pedido-item-aceito { color: #86efac; }
.pedido-escritorio-linha .pedido-separado-texto { margin: 0; }
.pedido-anotacao-estoque { width: min(100%, 360px); min-height: 76px; padding: 8px; border: 1px solid color-mix(in srgb, var(--cyan) 36%, var(--border)); border-radius: 7px; background: var(--panel-2); color: var(--text); font: inherit; line-height: 1.4; resize: vertical; }
.pedido-anotacao-exibida { white-space: pre-wrap; color: var(--text); line-height: 1.45; }
.pedido-foto-envio { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin: 8px 0; color: var(--muted); font-size: .72rem; }
.pedido-foto-envio > label:first-child { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.pedido-enviado-por { width: min(100%, 220px); min-height: 29px; padding: 5px 7px; border: 1px solid color-mix(in srgb, var(--cyan) 42%, var(--border)); border-radius: 5px; background: var(--panel-2); color: var(--text); font: inherit; }
.pedido-foto-escolher { position: relative; display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--cyan) 50%, var(--border)); border-radius: 5px; background: color-mix(in srgb, var(--cyan) 9%, var(--panel)); color: var(--cyan); font-size: .72rem; font-weight: 800; letter-spacing: .03em; cursor: pointer; }
.pedido-foto-escolher:hover { background: color-mix(in srgb, var(--cyan) 18%, var(--panel)); }
.pedido-foto-escolher input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.pedido-foto-nome { max-width: 165px; overflow: hidden; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.pedido-foto-envio a, .pedido-foto-link { color: var(--cyan); font-weight: 700; text-decoration: none; }
.pedido-foto-link { display: inline-block; margin: 7px 0; padding: 5px 9px; border-color: color-mix(in srgb, var(--cyan) 58%, var(--border)); background: color-mix(in srgb, var(--cyan) 10%, var(--panel)); font-size: .72rem; cursor: pointer; }
.pedido-foto-link:hover { background: color-mix(in srgb, var(--cyan) 20%, var(--panel)); }
.pedido-foto-envio a:hover, .pedido-foto-link:hover { text-decoration: underline; }
.pedido-foto-modal { width: min(92vw, 900px); max-height: 90vh; padding: 14px; border: 1px solid color-mix(in srgb, var(--cyan) 55%, var(--border)); border-radius: 10px; background: var(--panel); color: var(--text); box-shadow: 0 18px 60px rgba(0, 0, 0, .55); }
.pedido-foto-modal::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(2px); }
.pedido-foto-modal-cabecalho { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.pedido-foto-modal img { display: block; max-width: 100%; max-height: calc(90vh - 80px); margin: 0 auto; border-radius: 6px; object-fit: contain; }
.pedido-recusar-toggle { display: block; margin-top: 6px; border-color: color-mix(in srgb, #ef4444 58%, var(--border)); color: #fca5a5; }
.pedido-recusar-form { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; width: min(100%, 250px); margin-top: 8px; padding: 8px; border-left: 2px solid #dc2626; border-radius: 0 6px 6px 0; background: rgba(127, 29, 29, .13); }
.pedido-divergencia-descricao { width: 100%; min-height: 68px; resize: vertical; border: 1px solid color-mix(in srgb, #ef4444 48%, var(--border)); border-radius: 5px; background: var(--panel-2); color: var(--text); font: inherit; font-size: .76rem; padding: 6px; }
.pedido-devolvido-por, .pedido-item-motivo { width: 100%; min-height: 29px; border: 1px solid color-mix(in srgb, #ef4444 48%, var(--border)); border-radius: 5px; background: var(--panel-2); color: var(--text); font: inherit; font-size: .74rem; padding: 5px 6px; }
.pedido-conferencia-item { width: 100%; padding-bottom: 5px; border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent); }
.pedido-conferencia-item label { display: block; color: var(--text); font-size: .73rem; line-height: 1.35; cursor: pointer; }
.pedido-item-motivo { margin-top: 5px; }
.pedido-recusar-form .pedido-foto-escolher { color: #fca5a5; border-color: color-mix(in srgb, #ef4444 55%, var(--border)); background: rgba(127, 29, 29, .14); }
.pedido-recusar-enviar { border-color: color-mix(in srgb, #ef4444 58%, var(--border)); color: #fca5a5; }
.pedido-divergencia-info { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; max-width: 260px; margin: 8px 0; padding: 7px; border-left: 2px solid #dc2626; border-radius: 0 5px 5px 0; background: rgba(127, 29, 29, .13); color: var(--muted); font-size: .74rem; line-height: 1.35; }
.pedido-divergencia-info b { color: #fca5a5; }
.financeiro-painel { display: grid; gap: 14px; width: min(1280px, 100%); margin: 0 auto; }
.financeiro-dashboard { display: grid; gap: 18px; width: min(1280px, 100%); margin: 0 auto; }
.financeiro-dashboard-cabecalho { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 20px; }
.financeiro-dashboard-cabecalho > div > span, .financeiro-departamento-kicker { color: var(--cyan); font-size: .66rem; font-weight: 800; letter-spacing: .14em; }
.financeiro-dashboard-cabecalho h2 { margin: 5px 0; font-size: 1.2rem; }
.financeiro-dashboard-cabecalho p { margin: 0; color: var(--muted); font-size: .78rem; }
.financeiro-dashboard-cabecalho > small { color: var(--muted); white-space: nowrap; }
.financeiro-departamentos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.financeiro-departamento-card { display: grid; align-content: start; gap: 16px; padding: 18px; border-top: 3px solid var(--green); }
.financeiro-departamento-escolas { border-top-color: var(--cyan); }
.financeiro-departamento-card > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.financeiro-departamento-card h2 { margin: 4px 0 0; font-size: 1.2rem; }
.financeiro-departamento-alertas { padding: 5px 9px; border-radius: 5px; background: color-mix(in srgb, var(--orange) 13%, transparent); color: var(--orange); font-size: .7rem; white-space: nowrap; }
.financeiro-departamento-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.financeiro-departamento-numeros > div { display: grid; gap: 5px; padding: 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel-2); }
.financeiro-departamento-numeros small { color: var(--muted); font-size: .66rem; }
.financeiro-departamento-numeros b { color: var(--green); font-size: 1.3rem; }
.financeiro-departamento-escolas .financeiro-departamento-numeros b { color: var(--cyan); }
.financeiro-departamento-indisponivel { opacity: .7; }
.financeiro-dashboard-alertas { min-width: 0; padding-top: 12px; border-top: 1px solid var(--border); }
.financeiro-dashboard-alertas h3 { margin: 0 0 9px; color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.financeiro-dashboard-alertas-lista { display: grid; gap: 7px; max-height: 250px; overflow-y: auto; }
.financeiro-dashboard-alertas-lista > p { margin: 0; padding: 10px; color: var(--muted); font-size: .76rem; }
.financeiro-dashboard-alerta { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 14px; padding: 9px 10px; border: 1px solid var(--border); border-left: 4px solid var(--orange); border-radius: 6px; background: color-mix(in srgb, var(--orange) 7%, var(--panel-2)); color: var(--text); text-align: left; font: inherit; animation: financeiro-dashboard-pulso 2.6s ease-in-out infinite; }
/* Lançamento ja vencido (nao so "vencendo") - borda vermelha em vez de laranja, mesmo padrao de pill .no usado no resto do sistema */
.financeiro-dashboard-alerta.financeiro-alerta-vencido { border-left-color: var(--red); background: color-mix(in srgb, var(--red) 8%, var(--panel-2)); }
.financeiro-dashboard-alerta.financeiro-alerta-vencido > strong { color: var(--red); }

/* Painel Consultas Serasa: duas empresas lado a lado, mantendo cores do tema. */
.serasa-dashboard { display: grid; gap: 16px; width: min(1280px, 100%); margin: 0 auto; }
.serasa-cabecalho { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 9px 20px; }
.serasa-cabecalho > div > span { color: var(--cyan); font-size: .66rem; font-weight: 800; letter-spacing: .14em; }
.serasa-cabecalho h2 { margin: 2px 0; font-size: 1.05rem; }
.serasa-cabecalho p, .serasa-cabecalho > small { margin: 0; color: var(--muted); font-size: .72rem; }
.serasa-cabecalho-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.serasa-cabecalho-acoes .btn-ok { white-space: nowrap; text-decoration: none; }
/* Resultado por empresa + Historico lado a lado, do tamanho da Consulta ao
   Vivo AA/AM (mesmo .serasa-consulta-duas) - pedido do usuario. */
.serasa-cabecalho-compacta { align-items: flex-start; height: 100%; }
.serasa-cabecalho-clicavel { cursor: pointer; transition: border-color .15s ease; }
.serasa-cabecalho-clicavel:hover, .serasa-cabecalho-clicavel:focus-visible { border-color: var(--cyan); outline: none; }
.serasa-empresas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.serasa-empresa { min-width: 0; display: grid; align-content: start; gap: 16px; padding: 18px; border-top: 3px solid var(--cyan); }
.serasa-empresa-am { border-top-color: var(--green); }
.serasa-empresa-titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.serasa-empresa-titulo > div:first-child > span, .serasa-lider small { color: var(--muted); font-size: .63rem; font-weight: 800; letter-spacing: .12em; }
.serasa-empresa-titulo h2 { margin: 3px 0 0; font-size: 1.65rem; }
.serasa-lider { display: grid; justify-items: end; gap: 3px; text-align: right; }
.serasa-lider strong { max-width: 220px; overflow-wrap: anywhere; color: var(--cyan); font-size: .92rem; }
.serasa-empresa-am .serasa-lider strong { color: var(--green); }
.serasa-lider span { color: var(--muted); font-size: .7rem; }
.serasa-indicadores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.serasa-indicador { display: grid; gap: 7px; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); }
.serasa-indicador small { color: var(--muted); font-size: .61rem; font-weight: 800; letter-spacing: .06em; }
.serasa-indicador strong { color: var(--text); font-size: 1.45rem; line-height: 1; }
.serasa-indicador-regular strong { color: var(--green); }
.serasa-indicador-irregular strong { color: var(--red); }
.serasa-ranking { min-width: 0; padding-top: 12px; border-top: 1px solid var(--border); }
.serasa-ranking h3 { margin: 0 0 10px; color: var(--muted); font-size: .69rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.serasa-ranking ol { display: grid; gap: 7px; max-height: 430px; margin: 0; padding: 0; overflow: auto; list-style: none; }
.serasa-ranking-item { display: grid; grid-template-columns: 27px minmax(0, 1fr) 45px; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2); }
.serasa-posicao { color: var(--muted); font-size: .7rem; font-weight: 800; }
.serasa-vendedora { min-width: 0; overflow: hidden; color: var(--text); font-size: .78rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.serasa-total-vendedora { color: var(--cyan); font-size: .83rem; font-weight: 800; text-align: right; }
.serasa-empresa-am .serasa-total-vendedora { color: var(--green); }
.serasa-barra { grid-column: 2 / 4; height: 4px; overflow: hidden; border-radius: 5px; background: var(--border); }
.serasa-barra i { display: block; height: 100%; border-radius: inherit; background: var(--cyan); }
.serasa-empresa-am .serasa-barra i { background: var(--green); }
.serasa-vazio, .serasa-carregando, .serasa-erro { grid-column: 1 / -1; margin: 0; padding: 16px; color: var(--muted); }
.serasa-erro { color: var(--red); }
.serasa-uso { margin-top: 8px; font-size: .82rem; color: var(--muted); }
.serasa-uso-linha b { color: var(--text); }
.serasa-uso-barra { height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--border) 70%, transparent); overflow: hidden; margin-top: 4px; }
.serasa-uso-barra i { display: block; height: 100%; background: var(--green); }
.serasa-uso-acabando .serasa-uso-barra i { background: var(--orange); }
.serasa-uso-acabando .serasa-uso-linha b { color: var(--orange); }
.serasa-uso-esgotado .serasa-uso-barra i { background: var(--red); }
.serasa-uso-esgotado .serasa-uso-linha b { color: var(--red); }
.serasa-erro-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.serasa-erro-linha .serasa-erro { flex: 1 1 260px; }
.serasa-refazer { white-space: nowrap; }
.serasa-hist-acoes { white-space: nowrap; }
.serasa-rodape { margin: 0; color: var(--muted); font-size: .72rem; }

.serasa-consulta-card, .serasa-acesso-card { display: grid; gap: 14px; padding: 18px 20px; width: min(1280px, 100%); margin: 0 auto; }
.serasa-consulta-duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: min(1280px, 100%); margin: 0 auto; }
.serasa-consulta-duas .serasa-consulta-card { width: auto; margin: 0; }
.serasa-consulta-cabecalho span { color: var(--cyan); font-size: .66rem; font-weight: 800; letter-spacing: .14em; }
.serasa-consulta-cabecalho h2 { margin: 5px 0; font-size: 1.2rem; }
.serasa-consulta-cabecalho p { margin: 0; color: var(--muted); font-size: .78rem; }
.serasa-consulta-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.serasa-consulta-form label { display: grid; gap: 4px; font-size: .72rem; color: var(--muted); font-weight: 700; }
.serasa-consulta-form input, .serasa-consulta-form select { padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); color: var(--text); font-size: .85rem; }
.serasa-consulta-form input#serasaConsultaDocumento { min-width: 220px; }
.serasa-consulta-form select#serasaConsultaAtendente { min-width: 140px; }
.serasa-consulta-estado input { width: 56px; text-align: center; text-transform: uppercase; }
.serasa-consulta-resultado { display: grid; gap: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.serasa-consulta-resultado-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.serasa-consulta-avisos { margin: 0; color: var(--orange); font-size: .76rem; }
.serasa-consulta-blocos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.serasa-consulta-bloco { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); }
.serasa-consulta-bloco small { color: var(--muted); font-size: .63rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.serasa-consulta-bloco span { color: var(--text); font-size: .85rem; font-weight: 700; }
.serasa-consulta-acoes { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.serasa-consulta-acoes details { flex: 1; min-width: 0; }
.serasa-consulta-acoes summary { cursor: pointer; color: var(--muted); font-size: .76rem; }
.serasa-consulta-acoes pre { max-height: 320px; margin-top: 8px; padding: 10px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); font-size: .72rem; white-space: pre-wrap; word-break: break-word; }
.serasa-acesso-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.serasa-acesso-lista li { padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); }
.serasa-acesso-lista small { color: var(--muted); }
.serasa-fila-lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.serasa-fila-lista li { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); }
.serasa-fila-lista li > div:first-child { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.serasa-fila-lista small { color: var(--muted); }
.serasa-pedido-item { cursor: pointer; transition: background .15s, border-color .15s; }
.serasa-pedido-item:hover { background: rgba(255,255,255,.06); border-color: var(--cyan); }
.serasa-fila-acoes { display: flex; gap: 8px; }
.serasa-nao-encontrado { display: grid; gap: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.serasa-nao-encontrado p { margin: 0; color: var(--muted); }
.serasa-nao-encontrado small { color: var(--muted); font-size: .76rem; }
.serasa-consulta-identificacao { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.serasa-consulta-identificacao div { display: grid; gap: 3px; }
.serasa-consulta-identificacao small { color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .05em; }
.serasa-consulta-identificacao span { color: var(--text); font-size: .92rem; font-weight: 700; }
.serasa-consulta-status { padding: 10px 16px; border-radius: 8px; font-size: 1rem; font-weight: 800; letter-spacing: .08em; text-align: center; }
.serasa-consulta-status.aprovado { color: var(--green); background: color-mix(in srgb, var(--green) 16%, transparent); border: 1px solid var(--green); }
.serasa-consulta-status.reprovado { color: var(--red); background: color-mix(in srgb, var(--red) 16%, transparent); border: 1px solid var(--red); }
.serasa-consulta-tabela { width: 100%; border-collapse: collapse; font-size: .82rem; }
.serasa-consulta-tabela th { padding: 9px 12px; color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-align: left; background: var(--panel-2); border-bottom: 1px solid var(--border); }
.serasa-consulta-tabela td { padding: 9px 12px; color: var(--text); border-bottom: 1px solid var(--border); }
.serasa-consulta-tabela tr.tem-ocorrencia td { color: var(--red); font-weight: 700; }
.serasa-consulta-detalhe h4 { margin: 0 0 8px; font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.serasa-situacao-ok { color: var(--green); }
.serasa-situacao-alerta { color: var(--red); }
@media (max-width: 900px) { .serasa-empresas { grid-template-columns: 1fr; } .serasa-consulta-duas { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .serasa-cabecalho { align-items: flex-start; flex-direction: column; } .serasa-cabecalho-acoes { width: 100%; justify-content: space-between; } .serasa-indicadores { gap: 6px; } .serasa-indicador { padding: 9px 7px; } .serasa-indicador small { font-size: .54rem; } .serasa-indicador strong { font-size: 1.2rem; } }
@keyframes financeiro-dashboard-pulso {
  0%, 100% { border-left-color: var(--orange); background: color-mix(in srgb, var(--orange) 7%, var(--panel-2)); box-shadow: 0 0 0 rgba(245, 158, 11, 0); }
  50% { border-left-color: color-mix(in srgb, var(--orange) 65%, white); background: color-mix(in srgb, var(--orange) 13%, var(--panel-2)); box-shadow: 0 0 8px color-mix(in srgb, var(--orange) 22%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .financeiro-dashboard-alerta { animation: none; } }
.financeiro-dashboard-alerta > div { display: grid; min-width: 0; gap: 3px; }
.financeiro-dashboard-alerta b { overflow: hidden; color: var(--text); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.financeiro-dashboard-alerta small { overflow: hidden; color: var(--muted); font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.financeiro-dashboard-alerta .financeiro-alerta-instrucao { color: var(--muted); font-size: .62rem; font-weight: 700; }
.financeiro-dashboard-alerta > strong { display: grid; flex-shrink: 0; gap: 3px; color: var(--orange); font-size: .75rem; text-align: right; }
.financeiro-sem-alertas { border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2); }
@media (max-width: 720px) { .financeiro-departamentos-grid { grid-template-columns: 1fr; } .financeiro-dashboard-cabecalho { align-items: flex-start; flex-direction: column; } .financeiro-departamento-numeros { gap: 6px; } }
.financeiro-cabecalho .card-head { align-items: baseline; }
.financeiro-cabecalho .card-head small { margin-left: auto; color: var(--muted); }
.financeiro-empresa-dados { display: flex; flex-wrap: wrap; gap: 9px 24px; padding-top: 4px; color: var(--muted); font-size: .78rem; }
.financeiro-empresa-dados span { display: flex; gap: 6px; }
.financeiro-empresa-dados b { color: var(--cyan); }
.financeiro-empresa-dados .financeiro-ver-orgaos { margin-left: auto; padding: 7px 12px; min-height: 32px; font-size: .72rem; }
.financeiro-cabecalho-acoes { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.financeiro-acoes-topo { display: flex; align-items: center; gap: 12px; }
.financeiro-acoes-topo span { color: var(--muted); font-size: .72rem; }
.financeiro-alerta-linha { width: 100%; border: 0; border-top: 1px solid var(--border); background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.financeiro-alerta-linha:hover { background: color-mix(in srgb, var(--orange) 8%, transparent); }
.financeiro-alerta-detalhe { display: block; margin-top: 6px; color: var(--text) !important; font-weight: 400 !important; line-height: 1.5; }
.financeiro-alerta-detalhe a { color: var(--cyan); font-weight: 800; text-decoration: underline; }
.financeiro-alerta-linha > strong { flex-shrink: 0; }
.financeiro-todos-card { scroll-margin-top: 12px; }
.financeiro-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.financeiro-kpis .kpi { min-height: 104px; }
.financeiro-kpi-alerta strong { color: var(--orange); }
.financeiro-alertas-card { border-color: color-mix(in srgb, var(--orange) 72%, var(--border)); }
.financeiro-alertas-card.tem-alerta-financeiro { animation: financeiro-alerta-pulso 1.6s ease-in-out infinite; }
.financeiro-alertas-card .card-head h2 span { background: var(--orange); }
.financeiro-alertas-card .card-head small { color: var(--orange); }
.financeiro-alerta-linha { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 9px 2px; border-top: 1px solid var(--border); }
.financeiro-alerta-linha { font: inherit; }
.financeiro-alerta-linha > div { display: flex; flex-direction: column; gap: 3px; }
.financeiro-alerta-linha span, .financeiro-alerta-linha small { color: var(--muted); font-weight: 400; }
.financeiro-alerta-linha strong { display: flex; flex-direction: column; align-items: flex-end; color: var(--orange); }
.financeiro-alerta-linha small { font-size: .68rem; }
.financeiro-tabela td, .financeiro-tabela th { white-space: nowrap; }
.financeiro-tabela .financeiro-linha-alerta td { background: color-mix(in srgb, var(--orange) 7%, transparent); }
.financeiro-prazo { display: block; margin-top: 3px; color: var(--orange); font-size: .68rem; }
@keyframes financeiro-alerta-pulso { 0%, 100% { box-shadow: 0 0 0 rgba(245, 158, 11, 0); } 50% { box-shadow: 0 0 22px color-mix(in srgb, var(--orange) 28%, transparent); } }
@media (max-width: 720px) { .financeiro-kpis { grid-template-columns: 1fr; } .financeiro-cabecalho .card-head { align-items: flex-start; flex-direction: column; } .financeiro-cabecalho .card-head small { margin-left: 0; } }
@media (max-width: 600px) { .financeiro-empresa-dados .financeiro-ver-orgaos { width: 100%; margin-left: 0; } }
.financeiro-orgaos-modal { width: min(900px, 92vw); max-height: 88vh; padding: 20px; border: 1px solid color-mix(in srgb, var(--cyan) 55%, var(--border)); border-radius: 12px; background: var(--panel); color: var(--text); box-shadow: 0 24px 80px rgba(0,0,0,.65); }
.financeiro-orgaos-modal::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(4px); }
.financeiro-modal-intro { margin: 12px 0 16px; color: var(--muted); font-size: .78rem; }
.financeiro-orgaos-lista { display: grid; gap: 10px; max-height: 62vh; overflow: auto; }
.financeiro-orgao-bloco { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--panel-2); }
.financeiro-orgao-bloco-head { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 12px; padding: 13px; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.financeiro-orgao-bloco-head:hover, .financeiro-orgao-bloco-head.aberto { background: color-mix(in srgb, var(--cyan) 8%, transparent); }
.financeiro-orgao-bloco-head strong { color: var(--text); font-size: .83rem; }
.financeiro-orgao-bloco-head span { color: var(--cyan); font-size: .7rem; }
.financeiro-orgao-bloco-head em { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 6px; border: 1px solid currentColor; border-radius: 50%; font-style: normal; font-size: .9rem; line-height: 1; }
.financeiro-orgao-bloco-head.aberto em { transform: rotate(45deg); }
.financeiro-contratos-cabecalho { display: grid; grid-template-columns: 1fr 2fr 1fr 72px; gap: 14px; padding: 8px 13px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .1em; }
.financeiro-orgao-contrato-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent); }
.financeiro-orgao-contrato { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; width: 100%; gap: 14px; padding: 10px 13px; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.financeiro-editar-linha { align-self: center; margin-right: 12px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text); cursor: pointer; font: inherit; font-size: .72rem; font-weight: 700; }
.financeiro-editar-linha:hover { border-color: var(--cyan); color: var(--cyan); background: color-mix(in srgb, var(--cyan) 8%, transparent); }
.financeiro-orgao-contrato:hover { background: color-mix(in srgb, var(--cyan) 8%, transparent); }
.financeiro-orgao-contrato span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.financeiro-orgao-contrato b { overflow: hidden; text-overflow: ellipsis; font-size: .76rem; }
.financeiro-orgao-contrato small { overflow: hidden; color: var(--muted); font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }
.financeiro-orgao-contrato > strong { display: flex; flex-direction: column; align-items: flex-end; color: var(--orange); font-size: .75rem; white-space: nowrap; }
.financeiro-contrato-codigo b::before { content: "Código "; color: var(--muted); font-weight: 500; }
@media (max-width: 600px) { .financeiro-contratos-cabecalho { grid-template-columns: 1fr 1.5fr 1fr 54px; gap: 6px; padding-left: 9px; padding-right: 9px; } .financeiro-orgao-contrato { grid-template-columns: 1fr 1.5fr 1fr; gap: 8px; padding-left: 9px; padding-right: 9px; } .financeiro-editar-linha { margin-right: 7px; padding: 6px 8px; } }
.financeiro-cadastro-modal { width: min(760px, 92vw); max-height: 90vh; padding: 20px; border: 1px solid color-mix(in srgb, var(--cyan) 55%, var(--border)); border-radius: 12px; background: var(--panel); color: var(--text); box-shadow: 0 24px 80px rgba(0,0,0,.65); }
.financeiro-comparativo-modal { width: min(920px, 94vw); }
.financeiro-comparativo-grafico { position: relative; height: 360px; margin-top: 10px; }
.financeiro-cadastro-modal::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(4px); }
.financeiro-cadastro-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.financeiro-cadastro-form label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: .7rem; font-weight: 700; }
.financeiro-cadastro-form input { width: 100%; min-height: 36px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2); color: var(--text); font: inherit; }
.financeiro-cadastro-form select { width: 100%; min-height: 36px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2); color: var(--text); font: inherit; }
.financeiro-vencimento-controles { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 7px; }
.financeiro-vencimento-controles input[type="month"] { width: 100%; min-height: 36px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2); color: var(--text); font: inherit; }
.financeiro-vencimento-aviso { color: var(--orange); font-size: .67rem; font-weight: 500; }
.financeiro-contato-campo { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: .7rem; font-weight: 700; }
.financeiro-contato-tipos { display: flex; gap: 6px; flex-wrap: wrap; }
.financeiro-contato-tipos label { display: inline-flex; flex-direction: row; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2); color: var(--muted); cursor: pointer; font-size: .7rem; }
.financeiro-contato-tipos label:has(input:checked) { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, var(--panel-2)); color: var(--cyan); }
.financeiro-contato-tipos input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.financeiro-contato-tipos label > span { color: currentColor; font-size: .95rem; line-height: 1; }
.financeiro-icone-whatsapp { display: inline-block; width: 16px; height: 16px; flex: 0 0 16px; fill: currentColor; }
.financeiro-contato-campo > input { margin-top: 1px; }
.financeiro-cadastro-form label:first-child { grid-column: 1 / -1; }
.financeiro-cadastro-acoes { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 5px; }
.financeiro-cadastro-acoes span { color: var(--muted); font-size: .72rem; }
.financeiro-lista-acoes { display: flex; justify-content: flex-end; margin: -4px 0 12px; }
.financeiro-lista-acoes button[hidden] { display: none; }
.financeiro-edicao-unidade { grid-column: 1 / -1; padding: 12px; border: 1px solid var(--border); border-radius: 7px; background: color-mix(in srgb, var(--cyan) 5%, var(--panel-2)); }
.financeiro-edicao-unidade > strong { display: block; margin-bottom: 10px; color: var(--text); font-size: .75rem; }
.financeiro-edicao-unidade .financeiro-cadastro-form { gap: 10px; }
.financeiro-sem-contratos { margin: 0; padding: 14px; color: var(--muted); font-size: .75rem; }
.financeiro-sync-ajuda { flex-basis: 100%; color: var(--muted); font-size: .68rem; }
.financeiro-profiles-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 9px; max-height: 62vh; overflow: auto; }
.financeiro-profiles-lista--contratos { display: block; }
.financeiro-profile-opcao { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 54px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.financeiro-profile-opcao:hover { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 8%, var(--panel-2)); }
.financeiro-profile-opcao strong { font-size: .78rem; }
.financeiro-profile-opcao span { color: var(--cyan); font-size: .7rem; white-space: nowrap; }
.financeiro-profile-filtros { display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: end; gap: 10px; margin: 0 0 12px; }
.financeiro-profile-filtros[hidden] { display: none; }
.financeiro-profile-busca { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: .68rem; font-weight: 700; }
.financeiro-profile-busca input { width: 100%; min-height: 38px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 7px; outline: none; background: var(--panel-2); color: var(--text); font: inherit; }
.financeiro-profile-busca input:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cyan) 18%, transparent); }
.financeiro-profile-vencimentos { display: flex; gap: 7px; }
.financeiro-profile-vencimentos button { min-height: 38px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel-2); color: var(--muted); cursor: pointer; font: inherit; font-size: .7rem; font-weight: 750; white-space: nowrap; }
.financeiro-profile-vencimentos button:hover, .financeiro-profile-vencimentos button.ativo { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 14%, var(--panel-2)); color: var(--cyan); }
.financeiro-profile-contratos { display: grid; max-height: 62vh; overflow: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); }
.financeiro-profile-contrato { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(180px, 2fr) minmax(100px, .8fr); align-items: center; width: 100%; gap: 14px; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.financeiro-profile-contrato:last-child { border-bottom: 0; }
.financeiro-profile-contrato:hover, .financeiro-profile-contrato:focus-visible { outline: none; background: color-mix(in srgb, var(--cyan) 9%, var(--panel-2)); }
.financeiro-profile-contrato > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.financeiro-profile-contrato b { overflow: hidden; color: var(--text); font-size: .78rem; text-overflow: ellipsis; }
.financeiro-profile-contrato small { overflow: hidden; color: var(--muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.financeiro-profile-codigo b::before { content: "Código "; color: var(--muted); font-weight: 500; }
.financeiro-profile-contrato > strong { display: flex; flex-direction: column; align-items: flex-end; color: var(--lime, var(--cyan)); font-size: .78rem; white-space: nowrap; }
.financeiro-vencimento-critico { color: #ff3038 !important; text-shadow: 0 0 9px rgba(255, 48, 56, .35); }
.financeiro-vencimento-proximo { color: #ffb45c !important; }
.financeiro-modal-status.financeiro-vencimento-critico { border-color: #ff3038; background: rgba(255, 48, 56, .15); }
.financeiro-modal-status.financeiro-vencimento-proximo { border-color: rgba(255, 180, 92, .65); background: rgba(255, 180, 92, .12); }
@media (max-width: 600px) { .financeiro-cabecalho-acoes { width: 100%; margin-left: 0; } .financeiro-cabecalho-acoes button { flex: 1; } .financeiro-cadastro-form { grid-template-columns: 1fr; } .financeiro-cadastro-form label:first-child, .financeiro-cadastro-acoes { grid-column: auto; } }
.financeiro-contrato-modal { width: min(760px, 92vw); max-height: 90vh; padding: 20px; border: 1px solid color-mix(in srgb, var(--cyan) 55%, var(--border)); border-radius: 12px; background: var(--panel); color: var(--text); box-shadow: 0 24px 80px rgba(0,0,0,.65); }
.financeiro-contrato-modal::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(4px); }
.financeiro-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.financeiro-modal-acoes { display: flex; gap: 8px; }
.financeiro-modal-head > div > span { color: var(--cyan); font-size: .68rem; font-weight: 800; letter-spacing: .14em; }
.financeiro-modal-head h2 { margin: 4px 0 0; color: var(--text); font-size: 1.2rem; }
.financeiro-modal-status { display: inline-block; margin: 14px 0 12px; padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--orange) 60%, var(--border)); border-radius: 5px; color: var(--orange); background: color-mix(in srgb, var(--orange) 12%, transparent); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.financeiro-modal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.financeiro-modal-grid > div { min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel-2); }
.financeiro-modal-grid small, .financeiro-modal-contato small { display: block; color: var(--muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; }
.financeiro-modal-grid strong { display: block; margin-top: 4px; overflow-wrap: anywhere; color: var(--text); font-size: .83rem; }
.financeiro-modal-contato { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 12px; padding: 12px; border-left: 2px solid var(--cyan); background: color-mix(in srgb, var(--cyan) 8%, transparent); }
.financeiro-modal-contato strong { display: block; margin-top: 4px; }
.financeiro-detalhe-contato-icone { display: inline-flex; align-items: center; margin-right: 5px; vertical-align: middle; color: #25d366; }
.financeiro-detalhe-contato-icone svg { display: block; width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 700px) { .financeiro-modal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .financeiro-modal-contato { align-items: flex-start; flex-direction: column; } }
@media (max-width: 600px) { .financeiro-profile-contrato { grid-template-columns: minmax(90px, .9fr) minmax(120px, 1.4fr) minmax(82px, .8fr); gap: 7px; padding: 10px 8px; } .financeiro-profile-contrato b { font-size: .7rem; } .financeiro-profile-contrato small { font-size: .62rem; } .financeiro-profile-contrato > strong { font-size: .67rem; } }
@media (max-width: 700px) { .financeiro-profile-filtros { grid-template-columns: 1fr; } .financeiro-profile-vencimentos { display: grid; grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  .estoque-filtro-detalhe { align-items: stretch; flex-wrap: wrap; }
  .estoque-filtro-detalhe span { width: 100%; margin-left: 0; }
  .estoque-cadastro-modal .admin-form { grid-template-columns: 1fr; }
  .estoque-cadastro-modal .admin-form > label, .estoque-cadastro-modal .estoque-novo-material, .estoque-cadastro-modal .form-actions { grid-column: auto; }
  .estoque-checkbox { flex: 1 1 auto; }
  .estoque-escritorios-tabela thead th:nth-child(3), .estoque-escritorios-tabela tbody td:nth-child(3), .estoque-escritorios-tabela thead th:nth-child(4), .estoque-escritorios-tabela tbody td:nth-child(4) { display: none; }
  .estoque-escritorios-tabela thead th, .estoque-escritorios-tabela tbody td { padding-left: 9px; padding-right: 9px; }
  .estoque-escritorio-nome { min-width: 160px; }
  .estoque-escritorios-tabela .analise-detalhe-linha > td > div { padding: 14px 10px; }
  .estoque-data-contagem { display: none; }
  .estoque-detalhe-cabecalho, .estoque-detalhe-linha { grid-template-columns: 25% 45% 30%; }
  .estoque-tecnico-nome { min-width: 170px; }
  .estoque-tecnico-detalhe { padding: 14px 10px; }
  .estoque-tecnico-grade > div { grid-template-columns: minmax(130px, 1fr) 76px 76px 76px; padding: 0 8px; }
  .estoque-tecnicos-controles { width: 100%; margin-left: 0; }
  .estoque-tecnicos-controles select { flex: 0 0 auto; }
  .estoque-tecnicos-controles .table-search { min-width: 0; }
}

/* "Tentativas de login" (Log de Seguranca) comeca recolhido - pedido do
   usuario em 2026-09-24 ("tem muita coisa la"): e o log bruto, util pra
   investigar um caso especifico, mas nao precisa estar aberto de cara.
   Mesmo padrao zero-JS de .release-antigas, so que envolvendo o card
   inteiro (nao so um trecho) - por isso o h2 fica dentro do summary em vez
   de fora, herdando o "display:flex" de .card h2 sem conflito. */
.historico-secao-recolhivel > summary {
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
}
.historico-secao-recolhivel > summary::-webkit-details-marker { display: none; }
.historico-secao-recolhivel > summary::before { content: "▸"; color: var(--muted); margin-right: 8px; }
.historico-secao-recolhivel[open] > summary::before { content: "▾"; }
.historico-secao-recolhivel[open] > summary { margin-bottom: 12px; }
.historico-secao-recolhivel > summary h2 { margin: 0; }

/* Carinha e frase que acompanham a contagem do plantao */
.plantao-humor { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.plantao-cara { font-size: 1.3rem; line-height: 1.1; }
.plantao-humor span { font-size: .7rem; color: var(--muted); }

/* ------------------------------------------------- Bonequinho do plantao

   Ele anda de um lado para o outro enquanto o plantao corre, e vai mudando de
   postura: cabisbaixo no comeco, ereto no meio, saltitante na reta final e
   comemorando com a caneca no fim.

   Duas animacoes separadas fazem o vai-e-vem: uma leva a figura de ponta a
   ponta (alternate) e outra a espelha na virada, com o DOBRO da duracao e
   steps(1) - assim o giro acontece exatamente quando ele chega na parede, e
   nao no meio do caminho. */
.palco {
  position: relative;
  /* Largura explicita: o palco esta dentro de um flex em coluna e tudo o que
     ha nele e posicionado de forma absoluta, entao sem isto ele encolheria
     para largura zero e o bonequinho nao apareceria em lugar nenhum. */
  width: 100%;
  align-self: stretch;
  height: 42px;
  margin: 2px 0;
  overflow: hidden;
}
.andarilho {
  position: absolute;
  bottom: 0;
  left: 2px;
  animation: passear var(--ritmo, 7s) linear infinite alternate;
}
@keyframes passear {
  from { left: 2px; }
  to { left: calc(100% - 28px); }
}
.figura { animation: virar calc(var(--ritmo, 7s) * 2) steps(1) infinite; }
@keyframes virar {
  0%, 49.99% { transform: scaleX(1); }
  50%, 100% { transform: scaleX(-1); }
}
.figura .tronco, .figura .rosto, .figura .perna, .figura .braco {
  fill: var(--cor-boneco, #7dd3fc);
}
.figura .olho { fill: #06202e; }
.figura .boca { fill: none; stroke: #06202e; stroke-width: 1; stroke-linecap: round; }
.figura .caneca { fill: #fbbf24; stroke: #fbbf24; opacity: 0; }

/* Passada: as pernas giram em oposicao, e o tronco sobe e desce junto. */
.figura .perna, .figura .braco {
  transform-origin: 50% 8%;
  animation: passo var(--passada, .5s) ease-in-out infinite alternate;
}
.figura .perna.dir, .figura .braco.esq { animation-delay: calc(var(--passada, .5s) * -1); }
@keyframes passo {
  from { transform: rotate(-16deg); }
  to { transform: rotate(16deg); }
}
.figura .cabeca {
  transform-origin: 50% 60%;
  animation: balanco var(--passada, .5s) ease-in-out infinite alternate;
}
@keyframes balanco {
  from { transform: translateY(0) rotate(var(--inclina, 0deg)); }
  to { transform: translateY(-1px) rotate(var(--inclina, 0deg)); }
}

/* 1 - comecou agora: devagar, cabisbaixo e sem cor. */
.palco[data-humor="1"] { --ritmo: 11s; --passada: .8s; --cor-boneco: var(--boneco-1); --inclina: 14deg; }
.palco[data-humor="1"] .boca { d: path("M9.8 11q2.2 -1.8 4.4 0"); }
/* 2 - segurando as pontas. */
.palco[data-humor="2"] { --ritmo: 9s; --passada: .65s; --cor-boneco: var(--boneco-2); --inclina: 6deg; }
.palco[data-humor="2"] .boca { d: path("M9.8 10.6h4.4"); }
/* 3 - passou da metade: anda ereto e ja tem cor. */
.palco[data-humor="3"] { --ritmo: 7s; --passada: .5s; --cor-boneco: var(--boneco-3); }
/* 4 - reta final: apressado e saltitante. */
.palco[data-humor="4"] { --ritmo: 5s; --passada: .34s; --cor-boneco: var(--boneco-4); }
.palco[data-humor="4"] .andarilho { animation-name: passear, pulinho; animation-duration: 5s, .34s; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite; animation-direction: alternate, alternate; }
@keyframes pulinho {
  from { bottom: 0; }
  to { bottom: 3px; }
}
/* 5 - acabando: para de andar, ergue os bracos com a caneca e comemora. */
.palco[data-humor="5"] { --cor-boneco: var(--boneco-5); --passada: .3s; }
.palco[data-humor="5"] .andarilho {
  left: calc(50% - 13px);
  animation: festejar .5s ease-in-out infinite alternate;
}
@keyframes festejar {
  from { bottom: 0; transform: rotate(-3deg); }
  to { bottom: 5px; transform: rotate(3deg); }
}
.palco[data-humor="5"] .figura { animation: none; }
.palco[data-humor="5"] .braco {
  animation: none;
  transform-origin: 50% 8%;
  transform: rotate(155deg);
}
.palco[data-humor="5"] .braco.dir { transform: rotate(-155deg); }
.palco[data-humor="5"] .perna { animation-duration: .3s; }
.palco[data-humor="5"] .caneca { opacity: 1; }

/* Confete: so no ultimo humor. */
.confete { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.palco[data-humor="5"] .confete { opacity: 1; }
.confete i {
  position: absolute;
  top: -6px;
  width: 4px;
  height: 4px;
  border-radius: 1px;
  animation: cair 1.6s linear infinite;
}
.confete i:nth-child(1) { left: 12%; background: #f472b6; animation-delay: 0s; }
.confete i:nth-child(2) { left: 30%; background: #7dd3fc; animation-delay: .3s; }
.confete i:nth-child(3) { left: 52%; background: #86efac; animation-delay: .6s; }
.confete i:nth-child(4) { left: 71%; background: #fbbf24; animation-delay: .9s; }
.confete i:nth-child(5) { left: 88%; background: #c084fc; animation-delay: 1.2s; }
@keyframes cair {
  from { transform: translateY(0) rotate(0deg); opacity: 1; }
  to { transform: translateY(44px) rotate(220deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .andarilho, .figura, .figura .perna, .figura .braco, .figura .cabeca, .confete i {
    animation: none !important;
  }
  .andarilho { left: calc(50% - 13px); }
}

/* Escala colada no bloco do operador, no pe da barra.

   Antes o espaco vago da lateral caia entre os dois: a escala ficava logo
   abaixo do menu e o operador la embaixo, com um buraco no meio. Agora quem
   empurra e a escala, e o rodape vem grudado nela. Se a escala nao aparecer
   (ainda carregando, ou usuario sem plantonista), o rodape volta a empurrar
   sozinho e nada fica solto no meio. */
.escala:not([hidden]) { margin-top: auto; }
.escala:not([hidden]) + .rodape-lateral { margin-top: 12px; }

/* Cor do bonequinho por tema: cinco degraus, do desanimo a comemoracao.
   Cada tema tem os seus, senao o boneco seria a unica coisa da tela que nao
   muda quando o operador troca de visual. */
:root {
  --boneco-1: #64748b;
  --boneco-2: #94a3b8;
  --boneco-3: #7dd3fc;
  --boneco-4: #86efac;
  --boneco-5: #fbbf24;
}
:root[data-tema="console"] {
  --boneco-1: #3f5069; --boneco-2: #64748b; --boneco-3: #22d3ee;
  --boneco-4: #34d399; --boneco-5: #fbbf24;
}
:root[data-tema="flor"] {
  --boneco-1: #c9adbb; --boneco-2: #e9a8c6; --boneco-3: #f472b6;
  --boneco-4: #ec4899; --boneco-5: #db2777;
}
:root[data-tema="monster"] {
  --boneco-1: #3f3f46; --boneco-2: #6b7280; --boneco-3: #6fe000;
  --boneco-4: #9ae600; --boneco-5: #b6ff1a;
}
:root[data-tema="invertido"] {
  --boneco-1: #5b5470; --boneco-2: #a855f7; --boneco-3: #22e6ff;
  --boneco-4: #a3ff12; --boneco-5: #ff2fd0;
}
:root[data-tema="nebula"] {
  --boneco-1: #5b5470; --boneco-2: #a855f7; --boneco-3: #22e6ff;
  --boneco-4: #a3ff12; --boneco-5: #ff2fd0;
}
:root[data-tema="freakazoid"] {
  --boneco-1: #6b4652; --boneco-2: #b98a95; --boneco-3: #4fd8f0;
  --boneco-4: #ff7a4d; --boneco-5: #ef1229;
}
:root[data-tema="migo"] {
  --boneco-1: #3d5c5c; --boneco-2: #5f8a86; --boneco-3: #2EC4A9;
  --boneco-4: #8CD433; --boneco-5: #b8e64d;
}
:root[data-tema="cafe"] {
  --boneco-1: #4a3626; --boneco-2: #7a4a3a; --boneco-3: #c9915a;
  --boneco-4: #d97b3f; --boneco-5: #e0b47a;
}
:root[data-tema="gelo"] {
  --boneco-1: #5b7d90; --boneco-2: #a7c8e0; --boneco-3: #2f8fd1;
  --boneco-4: #23b6d9; --boneco-5: #22b389;
}
:root[data-tema="ouro-noturno"] {
  --boneco-1: #3a2f1a; --boneco-2: #8a6f2e; --boneco-3: #b98a3d;
  --boneco-4: #d4af37; --boneco-5: #e8c766;
}
:root[data-tema="floresta"] {
  --boneco-1: #2e4535; --boneco-2: #7a6a4a; --boneco-3: #4a8f6b;
  --boneco-4: #6fbf8a; --boneco-5: #7ec850;
}
/* Nos temas escuros o rosto e escuro; no claro precisa contrastar com o rosa. */
[data-tema="flor"] .figura .olho { fill: #7a1e45; }
[data-tema="flor"] .figura .boca { stroke: #7a1e45; }
[data-tema="gelo"] .figura .olho { fill: #1c3a4a; }
[data-tema="gelo"] .figura .boca { stroke: #1c3a4a; }
[data-tema="monster"] .figura .olho { fill: #0a0a0a; }
[data-tema="monster"] .figura .boca { stroke: #0a0a0a; }

/* Escala e operador viram um bloco so: sem linha entre eles e sem o degrau de
   fundo que fazia parecer dois cartoes empilhados. */
.escala:not([hidden]) {
  margin-bottom: 0;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}
.escala:not([hidden]) + .rodape-lateral {
  margin-top: calc(var(--vao-lateral, 16px) * -1);
  padding: 8px 11px 4px;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: var(--panel-2);
}
[data-tema="flor"] .escala:not([hidden]) + .rodape-lateral { background: #f8e1ed; }
[data-tema="monster"] .escala:not([hidden]) + .rodape-lateral { background: #121212; }

/* Uma margem so para o bloco inteiro. O recuo sai dos containers e vai para
   cada filho, porque as linhas nao tinham o mesmo ponto de partida: a escala
   afastava 11px, o operador 11+6 (padding proprio) e os links 11+11 - tres
   inicios diferentes numa coluna estreita, que e onde desalinho aparece. Com o
   recuo nos filhos, foto, nome e links comecam todos no mesmo x, e o realce dos
   links passa a ocupar a largura toda do bloco. */
.escala:not([hidden]),
.escala:not([hidden]) + .rodape-lateral { padding-left: 0; padding-right: 0; }
.escala:not([hidden]) > *,
.escala:not([hidden]) + .rodape-lateral > .operador { padding-left: 11px; padding-right: 11px; }
.escala:not([hidden]) + .rodape-lateral > .operador { padding-top: 6px; padding-bottom: 6px; }

/* A frase do plantonista pode ser longa ("é você hoje!!!! Sorte ou Azar =)"),
   entao ela quebra em vez de esticar a barra. */
.escala-pessoa > div > span { line-height: 1.3; }
.escala-pessoa { align-items: flex-start; }
.escala-pessoa .avatar, .escala-pessoa .avatar-foto { margin-top: 2px; }

/* Frase do plantonista: as duas linhas ficam com tamanho parecido em vez de
   uma cheia e outra com uma palavra solta. */
.escala-pessoa > div > span { text-wrap: balance; }

/* Perfil em quatro cartoes (foto, salario, tema, senha) */
.grid-2-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.campo-salario { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; color: var(--muted); }
.campo-salario input {
  min-height: 42px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #0e1726;
  color: var(--text);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.valor-hora { margin: 0; font-size: .86rem; color: var(--muted); }
.valor-hora b { color: var(--text); font-variant-numeric: tabular-nums; }
.valor-hora span { font-size: .78rem; }
.sigilo {
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed rgba(236, 72, 153, .4);
  border-radius: 8px;
  background: rgba(236, 72, 153, .07);
  font-size: .8rem;
  line-height: 1.5;
  color: var(--muted);
}
.sigilo b { color: var(--pink); }
[data-tema="flor"] .campo-salario input { background: #fff9fc; }
[data-tema="monster"] .campo-salario input { background: #121212; border-color: #2b2b2b; }
[data-tema="monster"] .sigilo { border-color: rgba(154, 230, 0, .35); background: rgba(154, 230, 0, .06); }
[data-tema="monster"] .sigilo b { color: var(--acido); }

/* Quanto o plantao rende - so no proprio nome, nunca no de outro. Fica na
   mesma linha do nome, menor, e pode ser borrado com um clique: a tela fica a
   vista da sala e nem sempre se quer o valor exposto. */
.escala-dados { min-width: 0; }
/* nowrap: com quebra, o olhinho caia sozinho para a linha de baixo. O nome e
   quem cede espaco se faltar, porque ele ja esta em destaque no tamanho. */
.escala-linha { display: flex; align-items: baseline; gap: 6px; flex-wrap: nowrap; min-width: 0; }
.escala-linha b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.escala-valor {
  flex: 0 0 auto;
  font-size: .76rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--green);
  cursor: help;
  transition: filter .18s ease;
}
.escala-valor.borrado {
  filter: blur(5px);
  user-select: none;
}
.olho {
  flex: 0 0 auto;
  padding: 0 1px;
  border: 0;
  background: none;
  font-size: .82rem;
  line-height: 1;
  cursor: pointer;
  opacity: .55;
  transition: opacity .15s ease;
}
.olho:hover { opacity: 1; }
.olho:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }
[data-tema="monster"] .escala-valor b { color: var(--acido); }
[data-tema="flor"] .escala-valor b { color: #12876a; }

/* O exemplo do campo de salario precisa parecer exemplo: no tema claro ele
   estava escuro demais e passava por valor ja gravado. */
.campo-salario input::placeholder { color: var(--muted); opacity: .65; }

/* ------------------------------------------------------ Notas de versao */
.modal-release { width: min(760px, 100%); }
.release-rolagem { max-height: min(58vh, 520px); overflow-y: auto; padding-right: 6px; }
.release-topo { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.release-versao {
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(59, 130, 246, .16);
  color: #bfdbfe;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.release-data { font-size: .74rem; color: var(--muted); }
.release h3 { margin: 6px 0 4px; font-size: 1.1rem; }
.release-resumo { margin: 0 0 14px; color: var(--muted); max-width: 70ch; line-height: 1.55; }
.release-secao {
  margin: 18px 0 8px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.release-secao.novo { color: var(--green); }
.release-secao.correcao { color: var(--orange); }
.release-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.release-lista li {
  padding-left: 14px;
  border-left: 2px solid var(--border);
}
.release-lista b { display: block; font-size: .9rem; margin-bottom: 2px; }
.release-lista span { color: var(--muted); font-size: .84rem; line-height: 1.5; }
.release-divisor { margin: 26px 0; border: 0; border-top: 1px solid var(--border); }

/* Historico dentro do aviso: fechado por padrao, para a versao do dia nao
   dividir espaco com tudo que ja foi lido. */
.release-antigas { margin-top: 22px; }
.release-antigas > summary {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.release-antigas > summary::-webkit-details-marker { display: none; }
.release-antigas > summary::before { content: "▸ "; }
.release-antigas[open] > summary::before { content: "▾ "; }
.release-antigas > summary:hover { border-color: var(--accent); color: var(--text); }
[data-tema="flor"] .release-antigas > summary { background: #f8e1ed; }
[data-tema="monster"] .release-antigas > summary { background: #121212; border-color: #2b2b2b; }

/* Caixa "nao mostrar novamente": linha propria acima do rodape do aviso, e nao
   ao lado do botao. Do lado ela seria marcada sem querer por quem mira o "Ok",
   e desligar um aviso de versao nova nao pode acontecer por acidente. */
.release-acoes .nao-mostrar { flex: 1 0 100%; order: -1; }
.nao-mostrar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: .84rem;
  cursor: pointer;
  user-select: none;
}
.nao-mostrar:hover { border-color: var(--accent); color: var(--text); }
.nao-mostrar input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.nao-mostrar:has(input:checked) { border-color: var(--green); color: var(--text); }
[data-tema="flor"] .nao-mostrar { background: #f8e1ed; }
[data-tema="monster"] .nao-mostrar { background: #121212; border-color: #2b2b2b; }

/* Pausa de Hidratacao (2026-09-10) - lembrete de bem-estar, mesmo molde do
   popup de novidades (.modal-fundo/.modal-caixa/.nao-mostrar ja existentes). */
.modal-pausa { max-width: 440px; }
.modal-pausa .card-head { margin-bottom: 14px; }
.icone-gota {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(6, 182, 212, .14);
  font-size: 1.15rem;
  margin-right: 4px;
}
.corpo-texto { font-size: .92rem; line-height: 1.55; margin: 0 0 14px; }
.lista-cuidados {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lista-cuidados li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .86rem;
}
.lista-cuidados .marca {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(6, 182, 212, .14);
  color: var(--cyan);
  display: grid;
  place-items: center;
  font-size: .72rem;
  margin-top: 1px;
}
.aviso-limite {
  font-size: .78rem;
  color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 16px;
  line-height: 1.5;
}
.modal-pausa .form-actions .nao-mostrar { flex: 1 0 auto; }
.observacao-zoeira {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.5;
}
.observacao-zoeira b { color: var(--text); }

.ponto-novo {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
  vertical-align: middle;
}
[data-tema="flor"] .release-versao { background: #f3e8ff; color: #7e22ce; }
[data-tema="monster"] .release-versao { background: rgba(154, 230, 0, .16); color: #b6ff1a; }

/* Plantao ja encerrado: a linha fica mais apagada que a do plantao por vir. */
.plantao-horario.encerrado b { color: var(--muted); font-weight: 600; }

/* A versao no rodape leva para as notas. */
.rodape-versao { color: inherit; text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.rodape-versao:hover { border-color: var(--blue); color: #bfdbfe; }

/* Faixa do espelho: fica fixa no pe da tela, visivel em qualquer pagina, para
   ninguem esquecer que esta olhando pela conta de outra pessoa. */
.espelho-faixa {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 9px 16px;
  background: linear-gradient(90deg, rgba(245, 158, 11, .95), rgba(217, 119, 6, .95));
  color: #1c1207;
  font-size: .84rem;
  font-weight: 600;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .35);
}
.espelho-faixa b { font-weight: 800; }
.espelho-faixa form { margin: 0; }
.espelho-faixa .mini-button {
  background: #1c1207;
  border-color: #1c1207;
  color: #fde68a;
}
.espelho-faixa .mini-button:hover { background: #000; color: #fff; }
/* Espaco no pe para a faixa nao cobrir o rodape. */
body:has(.espelho-faixa) .app-shell { padding-bottom: 64px; }

/* Escala: dias que ja passaram ficam mais apagados, o de hoje em destaque. */
.linha-passada td { opacity: .62; }
.linha-hoje td { background: rgba(34, 211, 238, .07); }
.linha-hoje td:first-child { font-weight: 700; }

/* Valor + botao de borrar, na linha do Seu dia. */
.valor-com-olho { display: inline-flex; align-items: center; gap: 5px; }

/* O valor do plantao e verde tambem dentro do "Seu dia".

   Ao mudar de lugar ele perdeu a cor: ".linha-dado b" tem especificidade maior
   que ".escala-valor" e vencia com a cor do texto comum. Aqui as duas classes
   juntas resolvem o empate sem precisar de !important. */
.linha-dado b.escala-valor { color: var(--green); }
[data-tema="flor"] .linha-dado b.escala-valor { color: #12876a; }
[data-tema="monster"] .linha-dado b.escala-valor { color: var(--acido); }
[data-tema="invertido"] .linha-dado b.escala-valor { color: var(--toxico); }

/* A linha do valor pode quebrar: com "~ R$ 224,17 4/9" mais o botao, ela nao
   cabe na largura da barra e o olhinho ficava para fora. */
#linhaPlantaoValor { flex-wrap: wrap; row-gap: 2px; }
/* Mesmo problema, mesma solucao: "R$ 0,00 - meta não atingida" tambem nao
   cabe numa linha so junto do rotulo. Diferente do plantao (texto curto,
   so quebra pra a linha de baixo e cabe), este texto e comprido demais pra
   caber mesmo sozinho na largura da barra - por isso tambem libera o
   proprio valor pra quebrar em mais de uma linha (flex:1 1 auto + min-width:0
   sobrescrevendo o flex:0 0 auto padrao de .escala-valor, que so serve pro
   valor curto do plantao). */
#linhaCentralComissao { flex-wrap: wrap; row-gap: 2px; }
#linhaCentralComissao .valor-com-olho { flex: 1 1 100%; justify-content: flex-end; }
#linhaCentralComissao .escala-valor { flex: 1 1 auto; min-width: 0; text-align: right; }

/* Aviso de "ainda nao liberado" logo abaixo da Comissao esperada - o valor
   e' uma previsao (soma das vendas ja feitas) ate bater a meta do mes, so
   ai vira pagamento de verdade (ver central_comissao_esperada_texto). */
.comissao-aviso {
  font-size: .68rem;
  color: var(--orange);
  text-align: right;
  margin-top: -4px;
}

/* Boneco do plantao, reaproveitado aqui pra reagir as vendas do mes (ver
   comentario em _lateral.html) - mesma altura do original (42px): a figura
   e ancorada no fundo do palco (bottom:0) e encolher a caixa cortava a
   cabeca dela. */
.comissao-humor { margin-top: 2px; }
.comissao-piada {
  margin-top: 4px;
  font-size: .72rem;
  font-weight: 700;
  text-align: center;
  color: var(--cyan);
}
.linha-dado b.escala-valor { font-size: .84rem; }
.linha-dado b.escala-valor small { font-size: .68rem; font-weight: 600; opacity: .7; margin-left: 1px; }

/* O nome do campo de salario em destaque, como no holerite. */
.campo-salario > b { font-size: .9rem; color: var(--text); letter-spacing: .01em; }

/* Coluna de salario na lista de usuarios */
.coluna-sigilosa { white-space: nowrap; }
.valor-sigiloso { font-variant-numeric: tabular-nums; transition: filter .18s ease; }
.valor-sigiloso.borrado { filter: blur(5px); user-select: none; }

/* ------------------------------------------------------------- Opinioes */
/* Canal de sugestao/bug do time. Cada relato e um <details>: aberto quando
   pede acao, fechado quando ja foi tratado - com dez relatos na tela, tudo
   aberto vira rolagem sem fim. */
.form-opiniao { display: flex; flex-direction: column; gap: 14px; }
.form-opiniao textarea { resize: vertical; min-height: 120px; }

.lista-opinioes { display: flex; flex-direction: column; gap: 10px; }
.opiniao {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2);
}
.opiniao > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  list-style: none;
  font-size: .9rem;
}
.opiniao > summary::-webkit-details-marker { display: none; }
/* O titulo cede espaco: os selos das pontas tem largura fixa e nao podem
   quebrar para a linha de baixo. */
.opiniao > summary b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opiniao > summary .pill { flex: 0 0 auto; }
.opiniao-autor { flex: 0 0 auto; font-size: .74rem; color: var(--muted); }
.opiniao-texto { margin: 12px 0 8px; white-space: pre-wrap; line-height: 1.55; }
.opiniao-mensagem-solicitante {
  --ticket-solicitante: #38bdf8;
  width: fit-content;
  max-width: min(88%, 900px);
  margin-left: auto;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--ticket-solicitante) 48%, var(--border));
  border-right: 3px solid var(--ticket-solicitante);
  border-radius: 12px 3px 12px 12px;
  background: color-mix(in srgb, var(--ticket-solicitante) 13%, var(--panel));
}
.opiniao-meta-solicitante { text-align: right; }

/* Resposta da administracao com marca propria: numa conversa curta e o que
   diz de relance se o caso ja teve retorno ou nao. */
.opiniao-resposta {
  width: fit-content;
  max-width: min(85%, 880px);
  margin: 8px 0;
  padding: 9px 12px;
  border-left: 2px solid var(--border);
  border-radius: 0 8px 8px 0;
  background: var(--panel);
}
.opiniao-resposta.do-admin {
  margin-right: auto;
  border-left: 3px solid var(--green);
  border-radius: 3px 8px 8px 8px;
  background: color-mix(in srgb, var(--green) 10%, var(--panel));
}
.opiniao-resposta.do-solicitante {
  --ticket-solicitante: #38bdf8;
  margin-left: auto;
  border: 1px solid color-mix(in srgb, var(--ticket-solicitante) 48%, var(--border));
  border-right: 3px solid var(--ticket-solicitante);
  border-radius: 8px 3px 8px 8px;
  background: color-mix(in srgb, var(--ticket-solicitante) 13%, var(--panel));
  text-align: right;
}
.opiniao-resposta.do-admin b { color: var(--green); }
.opiniao-resposta.do-solicitante b { color: #38bdf8; }
.opiniao-resposta b { font-size: .82rem; }
.opiniao-resposta p { margin: 3px 0; white-space: pre-wrap; line-height: 1.5; }
.opiniao-resposta small { color: var(--muted); font-size: .7rem; }
.opiniao-anexo { display: inline-block; margin: 4px 0; }
.opiniao-anexo-campo { display: grid; gap: 4px; color: var(--muted); font-size: .75rem; white-space: nowrap; }
.opiniao-anexo-campo input[type="file"] { max-width: 210px; font: inherit; font-size: .72rem; color: var(--muted); }
.opiniao-anexo-campo input[type="file"]::file-selector-button { padding: 6px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2); color: var(--text); cursor: pointer; }

.form-responder { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; }
.form-responder textarea {
  flex: 1;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  resize: vertical;
}
.form-status { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mini-button.ativo { border-color: var(--green); color: var(--green); }

.pill.status-nova { background: rgba(59, 130, 246, .16); color: #bfdbfe; }
.pill.status-analisando { background: rgba(245, 158, 11, .16); color: #fcd34d; }
.pill.status-resolvida { background: rgba(34, 197, 94, .16); color: #86efac; }
.pill.status-recusada { background: rgba(148, 163, 184, .16); color: #cbd5e1; }
.pill.status-sem_resposta { background: rgba(167, 139, 250, .16); color: #ddd6fe; }   /* fechado por falta de resposta (28/10/2026) */

/* Contador ao lado do botao: numero, e nao ponto, porque "tem 4 esperando"
   move mais que "tem alguma coisa". */
.selo-contador {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--green);
  color: #04140d;
  font-size: .66rem;
  font-weight: 800;
  font-style: normal;
  line-height: 1;
}
[data-tema="flor"] .opiniao-resposta { background: #fff9fc; }
[data-tema="flor"] .pill.status-nova { background: #e7ecfd; color: #3f5bd6; }
[data-tema="flor"] .pill.status-analisando { background: #fff2df; color: #b3690a; }
[data-tema="flor"] .pill.status-resolvida { background: #e4f9f1; color: #12876a; }
[data-tema="flor"] .pill.status-recusada { background: #f0e6ec; color: #6b5260; }
[data-tema="flor"] .selo-contador { background: var(--pink); color: #fff; }
[data-tema="monster"] .opiniao-resposta { background: #121212; }
[data-tema="monster"] .opiniao-resposta.do-solicitante { background: rgba(56, 189, 248, .13); }
[data-tema="monster"] .selo-contador { background: var(--acido); color: #0a0a0a; }

/* O botao nativo de arquivo vem branco e quadrado em qualquer tema; aqui ele
   recebe o mesmo desenho dos outros botoes da tela. */
.form-opiniao input[type="file"] {
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
  font: inherit;
}
.form-opiniao input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.form-opiniao input[type="file"]::file-selector-button:hover { border-color: var(--accent); }

/* Correio: o botao Opinioes pisca quando ha algo esperando - resposta nova
   para o operador, relato nao aberto para o admin. Um ponto parado se
   confunde com enfeite depois de dois dias; piscando, ele e a unica coisa em
   movimento no topo, entao chama sem precisar ser grande.
   Nunca pisca vazio: quem liga e desliga a classe e o correio.js. */
@keyframes correio-pisca {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.86); }
}
.tem-correio .ponto-novo,
.tem-correio .selo-contador { animation: correio-pisca 1.1s ease-in-out infinite; }
/* Conciliacao de Cobrancas (2026-10-01): linha "precisa verificar" pisca o
   ponto de alerta ate alguem marcar caixa ou malote. */
.linha-pisca .pedidos-alerta { animation: correio-pisca 1.1s ease-in-out infinite; }
.linha-pisca { background: color-mix(in srgb, var(--orange) 8%, transparent); }
.conc-obs-input { width: 100%; min-width: 90px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 2px 6px; font: inherit; }
.valor-pago { color: var(--green); font-weight: 700; }
.valor-nao-pago { color: var(--red); font-weight: 700; }
#tabelaConciliacao.oculta-fechamento .col-fechamento,
#tabelaConciliacao.oculta-cliente .col-cliente,
#tabelaConciliacao.oculta-cidade .col-cidade,
#tabelaConciliacao.oculta-tipo .col-tipo,
#tabelaConciliacao.oculta-atendente .col-atendente,
#tabelaConciliacao.oculta-valor .col-valor,
#tabelaConciliacao.oculta-relato .col-relato,
#tabelaConciliacao.oculta-registro .col-registro,
#tabelaConciliacao.oculta-meio .col-meio,
#tabelaConciliacao.oculta-financeiro .col-financeiro,
#tabelaConciliacao.oculta-obs .col-obs,
#tabelaConciliacao.oculta-conferido .col-conferido { display: none; }
.colunas-dropdown { position: relative; }
.colunas-dropdown summary { cursor: pointer; list-style: none; }
.colunas-dropdown summary::-webkit-details-marker { display: none; }
.colunas-lista {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 14px; display: grid; gap: 6px; min-width: 210px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.colunas-lista label { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 400; text-transform: none; color: var(--text); cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .linha-pisca .pedidos-alerta { animation: none; }
}
/* O envelope do menu acompanha, senao so o numero se mexe e a linha inteira
   parece meio quebrada. */
.item.tem-correio > i[aria-hidden] { animation: correio-pisca 1.1s ease-in-out infinite; }
.text-button.tem-correio { border-color: var(--green); }
[data-tema="flor"] .text-button.tem-correio { border-color: var(--pink); }
[data-tema="monster"] .text-button.tem-correio { border-color: var(--acido); }

@media (prefers-reduced-motion: reduce) {
  .tem-correio .ponto-novo,
  .tem-correio .selo-contador,
  .item.tem-correio > i[aria-hidden] { animation: none; }
}

/* Exclusao de opiniao: fica separada do resto por uma linha, no pe do cartao.
   Quando ha pedido em aberto ganha fundo de alerta - e o unico estado em que
   um clique do outro lado apaga de vez, entao nao pode passar despercebido. */
.opiniao-excluir {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.opiniao-excluir .table-footnote { margin: 0; }
.opiniao-excluir.pendente {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(245, 158, 11, .38);
  border-radius: 8px;
  background: rgba(245, 158, 11, .08);
}
[data-tema="flor"] .opiniao-excluir.pendente { border-color: #f6d5a8; background: #fff4e2; }
[data-tema="monster"] .opiniao-excluir.pendente { border-color: #4a3c0a; background: rgba(245, 158, 11, .06); }

/* ----------------------------------------------------------------- Chat */
/* Duas colunas: salas e gente de um lado, conversa do outro. A altura e
   travada em vh para o campo de escrever ficar sempre no mesmo lugar - com
   altura livre, ele desceria conforme a conversa crescesse. */
.chat-aviso {
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid rgba(245, 158, 11, .35);
  border-left-width: 3px;
  border-radius: 8px;
  background: rgba(245, 158, 11, .07);
  color: var(--muted);
  font-size: .84rem;
}
.chat-aviso b { color: var(--orange); }

.chat {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 14px;
  height: min(72vh, 720px);
}
@media (max-width: 900px) {
  .chat { grid-template-columns: 1fr; height: auto; }
  .chat-painel { height: 60vh; }
}
.chat-lado {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 14px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  overflow-y: auto;
}
.chat-bloco { display: flex; flex-direction: column; gap: 4px; }
.chat-bloco h4 {
  margin: 0 0 4px;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.chat-sala {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: .86rem;
  text-align: left;
  cursor: pointer;
}
.chat-sala:hover { background: var(--panel-2); color: var(--text); }
.chat-sala.ativo {
  border-color: var(--accent, #38bdf8);
  background: linear-gradient(90deg, rgba(56, 189, 248, .16), transparent);
  color: var(--text);
}
.chat-sala > span:not(.chat-ponto) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-icone { font-style: normal; opacity: .8; }
.chat-badge {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--green);
  color: #04140d;
  font-size: .66rem;
  font-weight: 800;
  font-style: normal;
}

/* Bolinha de presenca: apagada = sem dado, verde pulsando = na tela agora,
   ambar = com a aba aberta mas parado ha mais de 5 min. O terceiro estado
   importa - sem ele, "online" diria so que a pessoa esqueceu a aba aberta. */
.chat-ponto {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
}
.chat-ponto.ligado { background: var(--green); box-shadow: 0 0 0 3px rgba(34, 197, 94, .16); animation: chat-pulso 2.4s ease-in-out infinite; }
.chat-ponto.ausente { background: var(--orange); }
@keyframes chat-pulso {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, .16); }
  50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, .04); }
}

.chat-painel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  overflow: hidden;
}
.chat-cabeca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}
.chat-cabeca b { font-size: .95rem; }
/* Fio que corre no cabecalho: o unico enfeite da tela, e serve de sinal de
   que o painel esta vivo e buscando. */
.chat-linha-viva {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent, #38bdf8), transparent);
  background-size: 220px 100%;
  background-repeat: no-repeat;
  animation: chat-varre 3.4s linear infinite;
}
@keyframes chat-varre {
  from { background-position: -220px 0; }
  to { background-position: 120% 0; }
}

.chat-fluxo {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  overflow-y: auto;
}
.chat-msg {
  align-self: flex-start;
  max-width: min(72%, 560px);
  padding: 9px 13px;
  border: 1px solid var(--border);
  border-radius: 12px 12px 12px 3px;
  background: var(--panel-2);
}
.chat-msg.minha {
  align-self: flex-end;
  border-radius: 12px 12px 3px 12px;
  border-color: var(--accent, #38bdf8);
  background: linear-gradient(135deg, rgba(56, 189, 248, .14), rgba(37, 99, 235, .1));
}
.chat-msg b { display: block; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.chat-msg p { margin: 3px 0 2px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg small { font-size: .66rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.chat-msg-sistema { border-color: var(--red); background: rgba(242, 96, 125, .1); }
.chat-msg-sistema b { color: var(--red); }
.chat-link {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.chat-link:hover { filter: brightness(1.1); }

.chat-digitando {
  padding: 0 16px 6px;
  font-size: .76rem;
  color: var(--muted);
  font-style: italic;
}
.chat-envio {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--panel-2);
}
.chat-envio textarea {
  flex: 1;
  min-height: 42px;
  max-height: 140px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  resize: none;
}
.chat-envio .btn-ok { min-height: 42px; padding: 0 20px; }

.chat-presente { display: flex; align-items: center; gap: 8px; padding: 5px 10px; font-size: .84rem; color: var(--text); }
.chat-presente small { margin-left: auto; font-size: .66rem; color: var(--orange); }

[data-tema="console"] .chat-msg b,
[data-tema="console"] .chat-msg small { font-family: var(--mono); }
[data-tema="flor"] .chat-msg.minha { background: linear-gradient(135deg, #fbdcec, #f4dcfb); border-color: var(--pink); }
[data-tema="flor"] .chat-sala.ativo { border-color: var(--pink); background: linear-gradient(90deg, #fbdcec, transparent); }
[data-tema="flor"] .chat-linha-viva { background-image: linear-gradient(90deg, transparent, var(--pink), transparent); }
[data-tema="monster"] .chat-msg.minha { background: rgba(154, 230, 0, .12); border-color: var(--acido); }
[data-tema="monster"] .chat-sala.ativo { border-color: var(--acido); background: linear-gradient(90deg, rgba(154, 230, 0, .14), transparent); }
[data-tema="monster"] .chat-linha-viva { background-image: linear-gradient(90deg, transparent, var(--acido), transparent); }
[data-tema="monster"] .chat-badge { background: var(--acido); color: #0a0a0a; }
[data-tema="invertido"] .chat-msg.minha { border-color: var(--magenta); background: rgba(255, 47, 208, .12); }
[data-tema="invertido"] .chat-linha-viva { background-image: linear-gradient(90deg, transparent, var(--magenta), transparent); }

@media (prefers-reduced-motion: reduce) {
  .chat-linha-viva, .chat-ponto.ligado { animation: none; }
}

/* Chat com mensagem esperando pisca mais forte que o correio das Opinioes -
   e a unica coisa aqui que outra pessoa esta esperando resposta agora. O botao
   inteiro pulsa (borda, fundo e brilho), nao so o numero, para ser visto de
   longe e no canto do olho. */
@keyframes chat-chamando {
  0%, 100% {
    border-color: var(--green);
    background: transparent;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
  50% {
    border-color: var(--green);
    background: rgba(34, 197, 94, .18);
    box-shadow: 0 0 16px 2px rgba(34, 197, 94, .45);
  }
}
[data-chat].tem-correio { animation: chat-chamando .85s ease-in-out infinite; }
[data-chat].tem-correio .selo-contador { animation: correio-pisca .85s ease-in-out infinite; }
/* Na lateral o item nao tem borda propria, entao quem pulsa e o fundo. */
.item[data-chat].tem-correio {
  border-left: 2px solid var(--green);
  animation: chat-chamando-item .85s ease-in-out infinite;
}
@keyframes chat-chamando-item {
  0%, 100% { background: transparent; }
  50% { background: rgba(34, 197, 94, .16); }
}
[data-tema="flor"] [data-chat].tem-correio,
[data-tema="flor"] .item[data-chat].tem-correio { animation-name: chat-chamando-flor; border-color: var(--pink); }
@keyframes chat-chamando-flor {
  0%, 100% { border-color: var(--pink); background: transparent; box-shadow: 0 0 0 0 rgba(236, 72, 153, 0); }
  50% { border-color: var(--pink); background: rgba(236, 72, 153, .16); box-shadow: 0 0 16px 2px rgba(236, 72, 153, .4); }
}
[data-tema="monster"] [data-chat].tem-correio,
[data-tema="monster"] .item[data-chat].tem-correio { animation-name: chat-chamando-monster; border-color: var(--acido); }
@keyframes chat-chamando-monster {
  0%, 100% { border-color: var(--acido); background: transparent; box-shadow: 0 0 0 0 rgba(154, 230, 0, 0); }
  50% { border-color: var(--acido); background: rgba(154, 230, 0, .18); box-shadow: 0 0 18px 3px rgba(154, 230, 0, .5); }
}
[data-tema="invertido"] [data-chat].tem-correio,
[data-tema="invertido"] .item[data-chat].tem-correio { animation-name: chat-chamando-invertido; border-color: var(--magenta); }
@keyframes chat-chamando-invertido {
  0%, 100% { border-color: var(--magenta); background: transparent; box-shadow: 0 0 0 0 rgba(255, 47, 208, 0); }
  50% { border-color: var(--magenta); background: rgba(255, 47, 208, .18); box-shadow: 0 0 18px 3px rgba(255, 47, 208, .5); }
}

@media (prefers-reduced-motion: reduce) {
  [data-chat].tem-correio,
  .item[data-chat].tem-correio,
  [data-chat].tem-correio .selo-contador { animation: none; }
  /* Sem piscar, a marca precisa continuar visivel: fica acesa e parada. */
  [data-chat].tem-correio { border-color: var(--green); background: rgba(34, 197, 94, .16); }
}

/* Sala com mensagem esperando: pulsa junto com o numero. Mesma cadencia do
   botao do topo, para os dois avisos parecerem a mesma coisa. A sala aberta
   nunca pisca - o JS tira a marca dela, ja que ali a mensagem esta a vista. */
.chat-sala.tem-msg {
  border-color: var(--green);
  color: var(--text);
  animation: chat-chamando-item .85s ease-in-out infinite;
}
.chat-sala.tem-msg .chat-badge { animation: correio-pisca .85s ease-in-out infinite; }
[data-tema="flor"] .chat-sala.tem-msg { border-color: var(--pink); animation-name: chat-chamando-flor; }
[data-tema="monster"] .chat-sala.tem-msg { border-color: var(--acido); animation-name: chat-chamando-monster; }
[data-tema="invertido"] .chat-sala.tem-msg { border-color: var(--magenta); animation-name: chat-chamando-invertido; }

@media (prefers-reduced-motion: reduce) {
  .chat-sala.tem-msg, .chat-sala.tem-msg .chat-badge { animation: none; }
  .chat-sala.tem-msg { background: rgba(34, 197, 94, .14); }
}
[data-tema="flor"] .chat-badge { background: var(--pink); color: #fff; }
[data-tema="invertido"] .chat-badge { background: var(--magenta); color: #fff; }

/* --------------------------------------------------------- Relatorio Diario */
.campo-data-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: .78rem;
  color: var(--muted);
}
.campo-data-topo input,
.linha-add-item input,
.linha-add-item select,
.linha-periodo-formal input {
  min-height: 40px;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid rgba(56, 189, 248, .18);
  background: linear-gradient(180deg, rgba(2, 6, 23, .75), rgba(9, 17, 32, .75));
  color: var(--text);
  font-size: .88rem;
}
.linha-add-item {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}
.linha-add-item input[name="texto"] { flex: 1 1 240px; }
.linha-add-item select { flex: 0 0 150px; }
.linha-add-item input[type="time"] { flex: 0 0 110px; }

.lista-relatorio { margin-top: 18px; display: flex; flex-direction: column; gap: 16px; }
.grupo-periodo h3 {
  margin: 0 0 8px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8fb6d6;
}
.lista-atividades { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lista-atividades li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-2);
}
.lista-atividades li span { flex: 1; }
.hora-item {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .74rem;
  color: #7dd3fc;
  flex: 0 0 auto;
}

.linha-periodo-formal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0; }
.linha-periodo-formal label { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); }
.texto-formal {
  width: 100%;
  min-height: 320px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(2, 6, 23, .6);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86rem;
  line-height: 1.55;
  resize: vertical;
}
.lista-formais { display: flex; flex-direction: column; gap: 10px; }
.formal-salvo {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2);
}
.formal-salvo > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  font-size: .9rem;
}
.formal-salvo > summary::-webkit-details-marker { display: none; }
.texto-formal-salvo {
  margin: 12px 0;
  padding: 14px;
  border-radius: 10px;
  background: rgba(2, 6, 23, .6);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

/* Tema Dark: preto/cinza discreto, com cores de estado preservadas. */
@media screen {
  :root[data-tema="dark"] {
    --bg:#101010; --panel:#191919; --panel-2:#232323; --border:#363636;
    --text:#eeeeee; --muted:#aaaaaa; --blue:#b8b8b8; --cyan:#d4d4d4;
    --green:#8ec79d; --orange:#dfb775; --purple:#a7a7b3; --pink:#bdaeb4;
    --red:#e79a9a; --accent:#b8b8b8; --grad:linear-gradient(105deg,#b8b8b8,#eeeeee);
    --raio:8px; color-scheme:dark;
  }
  [data-tema="dark"] body,[data-tema="dark"] .login-body { background:var(--bg); }
  [data-tema="dark"] .topbar h1,[data-tema="dark"] .cadastro-head h2 { background:none; color:var(--text); -webkit-text-fill-color:currentColor; text-shadow:none; }
  [data-tema="dark"] .lateral { background:#141414; border-color:var(--border); }
  [data-tema="dark"] .item { color:var(--muted); }
  [data-tema="dark"] .item:hover,[data-tema="dark"] .item.ativo { background:#2b2b2b; color:var(--text); border-left-color:var(--cyan); }
  [data-tema="dark"] .lateral-marca b,[data-tema="dark"] .rodape b { color:var(--text); }
  [data-tema="dark"] .avatar { background:var(--panel-2); border-color:var(--border); color:var(--text); }
  [data-tema="dark"] .kpi::before { background:#555; height:2px; }
  [data-tema="dark"] .card h2 > span { background:#aaa !important; }
  [data-tema="dark"] .filters select, [data-tema="dark"] .filters input[type="text"],[data-tema="dark"] .filters button,[data-tema="dark"] .table-search,[data-tema="dark"] .login-form input,[data-tema="dark"] .admin-form input,[data-tema="dark"] .admin-form select,[data-tema="dark"] .admin-form textarea,[data-tema="dark"] .perfil-form input,[data-tema="dark"] .campo-salario input,[data-tema="dark"] .escala-select,[data-tema="dark"] .cadastro-campo input,[data-tema="dark"] .cadastro-campo select,[data-tema="dark"] .cadastro-campo textarea,[data-tema="dark"] .cadastro-check,[data-tema="dark"] .combo-pop { background:#111; border-color:var(--border); color:var(--text); }
  [data-tema="dark"] :is(input,select,textarea):focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }
  [data-tema="dark"] .text-button,[data-tema="dark"] .mini-button,[data-tema="dark"] .icon-button,[data-tema="dark"] .mini,[data-tema="dark"] .anexo-escolher { background:var(--panel-2); border-color:var(--border); color:var(--text); box-shadow:none; }
  [data-tema="dark"] .text-button-destaque,[data-tema="dark"] .login-form button,[data-tema="dark"] .form-actions button[type="submit"] { background:#e6e6e6; color:#171717; border-color:#e6e6e6; box-shadow:none; }
  [data-tema="dark"] .mini-button.danger { color:var(--red); border-color:#684343; }
  [data-tema="dark"] .mini-button.ativo { color:var(--green); border-color:var(--green); }
  [data-tema="dark"] .text-button:hover,[data-tema="dark"] .mini-button:hover,[data-tema="dark"] .mini:hover { border-color:#aaa; }
  [data-tema="dark"] .tema-menu,[data-tema="dark"] .modal-caixa,[data-tema="dark"] .modal-cadastro,[data-tema="dark"] .contexto,[data-tema="dark"] .alerta-card,[data-tema="dark"] .sinal-caixa,[data-tema="dark"] .lane-chip { background:var(--panel); border-color:var(--border); }
  [data-tema="dark"] .modal-fundo { background:rgba(0,0,0,.75); }
  [data-tema="dark"] .modal-cadastro::before { background:#555; }
  [data-tema="dark"] .cadastro-kicker,[data-tema="dark"] .cadastro-campo > span { color:var(--muted); }
  [data-tema="dark"] .cadastro-dot { background:var(--cyan); box-shadow:none; }
  [data-tema="dark"] .cadastro-campo > span::before { background:#777; }
  [data-tema="dark"] .cadastro-data,[data-tema="dark"] .cadastro-campo input[readonly] { background:var(--panel-2); color:var(--muted); border-color:var(--border); }
  [data-tema="dark"] .combo-op:hover,[data-tema="dark"] .combo-op.ativo,[data-tema="dark"] .tema-opcao-menu:hover,[data-tema="dark"] .tema-opcao-menu.ativo { background:#303030; color:var(--text); box-shadow:inset 0 0 0 1px #777; text-shadow:none; }
  [data-tema="dark"] .combo-op::before { background:var(--cyan); box-shadow:none; }
  [data-tema="dark"] th { background:#202020; }
  [data-tema="dark"] tbody tr:hover { background:#252525; }
  [data-tema="dark"] .linha-hoje td { background:rgba(255,255,255,.04); }
  [data-tema="dark"] .filter-hint:not(.active),[data-tema="dark"] .notice-banner { background:var(--panel); border-color:var(--border); }
  [data-tema="dark"] .pill.sistema,[data-tema="dark"] .pill.remoto,[data-tema="dark"] .pill.obs,[data-tema="dark"] .hora-registro,[data-tema="dark"] .release-versao { background:#303030; color:#ddd; }
  [data-tema="dark"] .ramal-btn { background:#202020; }
  [data-tema="dark"] .ramal-btn.on { border-color:#355340; }
  [data-tema="dark"] .ramal-btn.off { border-color:#684343; }
  [data-tema="dark"] .ramal-btn.on .ramal-nome { color:var(--green); }
  [data-tema="dark"] .ramal-btn.off .ramal-nome { color:var(--red); }
  [data-tema="dark"] .chat-sala.ativo,[data-tema="dark"] .chat-msg.minha { background:#2b2b2b; border-color:#777; }
  [data-tema="dark"] .chat-msg b { color:var(--text); }
}

/* Tipografia do Dark: leitura confortável na interface e números técnicos alinhados. */
[data-tema="dark"] body {
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}
[data-tema="dark"] .topbar h1,
[data-tema="dark"] .card h2,
[data-tema="dark"] .kpi span,
[data-tema="dark"] .filters label,
[data-tema="dark"] th,
[data-tema="dark"] .pill {
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}
[data-tema="dark"] .kpi strong,
[data-tema="dark"] .kpi small,
[data-tema="dark"] .hora-registro,
[data-tema="dark"] .table-footnote,
[data-tema="dark"] .pager,
[data-tema="dark"] td:first-child {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

/* Personalizacao individual do tema, controlada pelo perfil. */
[data-tema] { --personal-accent: var(--blue); --personal-font: inherit; }
[data-fonte-personalizada] body { font-family: var(--personal-font); }
[data-fonte-personalizada] .topbar h1,
[data-fonte-personalizada] .card h2,
[data-fonte-personalizada] .item,
[data-fonte-personalizada] button,
[data-fonte-personalizada] input,
[data-fonte-personalizada] select,
[data-fonte-personalizada] textarea { font-family: var(--personal-font); }
[data-fonte-personalizada] .topbar h1,
[data-fonte-personalizada] .kpi::before,
[data-fonte-personalizada] .item.ativo { border-color: var(--personal-accent); }
[data-fonte-personalizada] .kpi::before { background: var(--personal-accent); }
[data-fonte-personalizada] .item.ativo,
[data-fonte-personalizada] .lateral-marca b,
[data-fonte-personalizada] .rodape b { color: var(--personal-accent); }
.personalizacao-tema { display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:end; }
.personalizacao-tema label { display:grid; gap:6px; color:var(--muted); font-size:.78rem; font-weight:700; }
.personalizacao-tema input[type="color"], .personalizacao-tema select { height:38px; width:100%; border:1px solid var(--border); border-radius:8px; background:var(--panel-2); color:var(--text); padding:4px 8px; }
.personalizacao-tema small { grid-column:1 / -1; color:var(--muted); }
@media (max-width:560px) { .personalizacao-tema { grid-template-columns:1fr; } .personalizacao-tema small { grid-column:auto; } }
.personalize-abrir { width:100%; margin-top:12px; }
.personalizacao-dialog { width:min(620px,calc(100% - 32px)); background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:12px; padding:20px; }
.personalizacao-dialog::backdrop { background:rgba(0,0,0,.72); }
.personalizacao-dialog-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
.personalizacao-dialog-head h3 { margin:0; }
.personalizacao-preview { display:grid; gap:6px; padding:18px; margin-bottom:18px; border:1px solid var(--personal-accent,var(--border)); border-radius:10px; background:var(--bg); }
.personalizacao-preview span,.personalizacao-preview small { color:var(--muted); }
.personalizacao-preview strong { color:var(--personal-accent,var(--text)); font-size:1.2rem; }
.card-salario { align-self: start; }
.portal-personalizacao { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.portal-personalizacao h3 { margin: 0 0 5px; color: var(--text); font-size: 1rem; }
.portal-personalizacao p { margin: 0 0 12px; color: var(--muted); font-size: .82rem; }
.portal-personalizacao .personalize-abrir { width: auto; }

/* Campo Tecnico: acao de detalhes da ordem sempre visivel. */
.os-detalhe { position: relative; display: inline-block; }
.os-detalhe > summary { list-style: none; cursor: pointer; white-space: nowrap; }
.os-detalhe > summary::-webkit-details-marker { display: none; }
.os-detalhe > div { position: absolute; z-index: 20; right: 0; top: calc(100% + 6px); min-width: 300px; max-width: 480px; padding: 12px; border: 1px solid var(--border); border-radius: var(--raio, 8px); background: var(--panel-2); color: var(--text); box-shadow: 0 10px 28px rgba(0,0,0,.35); line-height: 1.6; white-space: normal; }

/* Campo Tecnico: upload e filtros com o mesmo acabamento arredondado dos temas claros. */
.campo-upload-form { gap: 12px; }
.campo-upload-form .anexo-escolher { min-height: 42px; border-style: solid; border-radius: 999px; }
.campo-upload-form button { border-radius: 999px; background: linear-gradient(135deg, var(--pink), var(--purple)); box-shadow: 0 7px 18px rgba(236,72,153,.2); }
.campo-filtros { display: flex; align-items: end; justify-content: flex-start; gap: 12px; flex-wrap: wrap; width: 100%; }
.campo-filtro { display: grid; gap: 5px; font-size: .78rem; font-weight: 800; color: var(--muted); }
.campo-filtro select, .campo-filtro input[type="date"] { min-height: 40px; padding: 0 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel-2); color: var(--text); font: inherit; }
.campo-filtros #limparFiltros { min-height: 40px; border-radius: 999px; }
[data-tema="flor"] .campo-filtro select, [data-tema="flor"] .campo-filtro input[type="date"] { background: #fff9fc; border-color: #f5b6d5; color: #8f285c; }
[data-tema="flor"] .campo-upload-form .anexo-escolher { background: linear-gradient(135deg, #fff8fc, #fce7f3); border-color: #e78ab9; color: #c21872; }
[data-tema="flor"] .campo-upload-form button { background: linear-gradient(135deg, #f472b6, #c084fc); color: #fff; }
@media (max-width: 700px) { .campo-upload-form .anexo-nome { max-width: 210px; } }

/* Bloco de filtro fica empurrado pro rodape do cartao (que agora estica
   pra acompanhar o "Arquivos Enviados" ao lado) em vez de colado no botao
   de enviar - ficava confuso, parecia parte do formulario de upload. */
.campo-filtros-bloco { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border); }
.campo-filtros-titulo { margin: 0 0 10px; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 800; color: var(--muted); }

.ordenar-material { border: 0; background: transparent; color: inherit; padding: 2px 5px; border-radius: 999px; cursor: pointer; font-weight: 900; }
.ordenar-material:hover { background: var(--panel-2); color: var(--accent, var(--pink)); }
[data-tema="flor"] .ordenar-material:hover { background: #fce7f3; color: #c21872; }

.variacao { font-weight: 800; white-space: nowrap; }
.variacao.positiva { color: var(--green); }
.variacao.negativa { color: var(--red); }
.variacao.neutra { color: var(--muted); }
.menu-titulo-recolhivel { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.menu-toggle { border: 0; background: transparent; color: inherit; font: inherit; font-size: .9rem; line-height: 1; padding: 1px 4px; cursor: pointer; opacity: .75; }
.menu-toggle:hover { color: var(--cyan); opacity: 1; }
.menu-grupo[hidden] { display: none; }
.pagamentos-acoes { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 14px; margin: 14px 0; }
.pagamento-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.pagamento-form label:first-of-type { grid-column: 1 / -1; }
.pagamento-form .form-actions { margin-top: 2px; }
@media (max-width: 900px) { .pagamentos-acoes { grid-template-columns: 1fr; } }
.pagamentos-acoes > article:first-child { order: 2; }
.pagamentos-acoes > article:last-child { order: 1; }
@media (max-width: 900px) {
  .pagamentos-acoes > article:first-child,
  .pagamentos-acoes > article:last-child { order: initial; }
}

/* Tema Girassol: luz quente, flores pequenas e movimento suave. */
:root[data-tema="girassol"] {
  color-scheme: light;
  --bg: #fff7cf;
  --panel: #fffdf0;
  --panel-2: #fff0a8;
  --border: #e5b93b;
  --text: #4d3a16;
  --muted: #876e34;
  --blue: #d99b00;
  --cyan: #efb810;
  --green: #6b8e23;
  --orange: #e38b16;
  --purple: #c18f1e;
  --pink: #e0a617;
  --red: #c85b36;
  --display: "Quicksand", "Trebuchet MS", sans-serif;
}
:root[data-tema="girassol"] option { background: #fffdf0; color: #4d3a16; }
[data-tema="girassol"] body {
  color: var(--text);
  background: radial-gradient(circle at 12% 18%, rgba(255, 218, 76, .23), transparent 24%),
              radial-gradient(circle at 88% 82%, rgba(107, 142, 35, .14), transparent 27%),
              linear-gradient(135deg, #fff9da 0%, #fff1ad 52%, #fff8d7 100%);
  overflow-x: hidden;
}
/* A cena e montada pelo tema.js: cada abertura recebe flores/folhas e
   abelhas em posicoes diferentes, evitando uma faixa reta no topo. */
[data-tema="girassol"] body::before,
[data-tema="girassol"] body::after { content: none; }
.girassol-cena {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.girassol-flor,
.girassol-favo,
.girassol-abelha {
  position: fixed;
  display: block;
  user-select: none;
  pointer-events: none;
}
.girassol-flor {
  left: var(--x);
  top: var(--y);
  font-size: var(--tam);
  opacity: .85;
  filter: drop-shadow(0 2px 3px rgba(120, 84, 8, .28));
  animation: girassol-balanco var(--duracao) ease-in-out var(--atraso) infinite alternate;
}
.girassol-favo {
  left: var(--x);
  top: var(--y);
  width: var(--tam);
  height: var(--tam);
  opacity: .9;
  filter: drop-shadow(0 2px 4px rgba(120, 84, 8, .32));
  animation: girassol-balanco var(--duracao) ease-in-out var(--atraso) infinite alternate;
}
.girassol-favo svg { display: block; width: 100%; height: 100%; }
.girassol-abelha {
  left: 0;
  top: 0;
  font-size: var(--tam);
  filter: drop-shadow(0 4px 3px rgba(104, 76, 10, .22));
  animation: girassol-voo var(--duracao) linear var(--atraso) infinite;
}
[data-tema="girassol"] .layout,
[data-tema="girassol"] .login-shell { position: relative; z-index: 1; }
[data-tema="girassol"] .lateral { background: rgba(255, 253, 240, .94); border-right-color: #e5b93b; box-shadow: 5px 0 24px rgba(175, 126, 16, .12); }
[data-tema="girassol"] .lateral a { color: #74591e; }
[data-tema="girassol"] .lateral a:hover, [data-tema="girassol"] .lateral a.ativo { color: #765100; background: #fff0a8; border-color: #d99b00; }
[data-tema="girassol"] .card, [data-tema="girassol"] .kpi, [data-tema="girassol"] .filters, [data-tema="girassol"] .table-wrap, [data-tema="girassol"] .modal-caixa { background: rgba(255, 253, 240, .9); border-color: #e5b93b; box-shadow: 0 10px 28px rgba(185, 135, 23, .12); }
[data-tema="girassol"] .card h2, [data-tema="girassol"] .kpi strong, [data-tema="girassol"] .modal-caixa h2, [data-tema="girassol"] .topbar h1 { font-family: var(--display); }
[data-tema="girassol"] .topbar { border-bottom-color: #e5b93b; }
[data-tema="girassol"] .topbar h1 { color: #9b6a00; }
[data-tema="girassol"] th { background: #fff0a8; color: #765100; }
[data-tema="girassol"] td { border-bottom-color: #f3dfa0; }
[data-tema="girassol"] tbody tr:hover { background: #fff6c9; }
[data-tema="girassol"] input, [data-tema="girassol"] select, [data-tema="girassol"] textarea, [data-tema="girassol"] .table-search { background: #fffdf4; border-color: #e5b93b; color: #4d3a16; }
[data-tema="girassol"] input::placeholder, [data-tema="girassol"] textarea::placeholder { color: #a98b4d; }
[data-tema="girassol"] button, [data-tema="girassol"] .text-button, [data-tema="girassol"] .mini-button { border-color: #d99b00; color: #674900; background: linear-gradient(135deg, #ffe57a, #f4c22e); }
[data-tema="girassol"] button:hover, [data-tema="girassol"] .text-button:hover, [data-tema="girassol"] .mini-button:hover { background: #ffd85a; }
/* Mesmo motivo ja corrigido no Flor/Gelo (pedido do usuario, 2026-10-01,
   vendo o botao "Exportar PDF" das Consultas Serasa): .btn-ok base e' verde
   claro fixo (#86efac) pensado pra fundo escuro - no creme do Girassol
   ficava lavado e destoava dos botoes dourados do resto do tema. */
[data-tema="girassol"] .btn-ok { border-color: rgba(107, 142, 35, .45); background: rgba(107, 142, 35, .14); color: var(--green); }
[data-tema="girassol"] .btn-ok:hover { background: rgba(107, 142, 35, .26); border-color: var(--green); }
[data-tema="girassol"] .sync-badge { background: #edf5cf; border-color: #9dbb45; color: #56731c; }
[data-tema="girassol"] .pill { background: #fff0a8; color: #765100; border-color: #e5b93b; }
/* Mesmo problema ja corrigido no tema Flor: as cores do sinal-badge foram
   feitas para fundo escuro e ficam claras demais no fundo creme do
   Girassol, apagando o numero. */
[data-tema="girassol"] .sinal-badge {
  font-weight: 800;
  text-shadow: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.42);
}
[data-tema="girassol"] .sinal-bom {
  color: #1f5c1a;
  background: #d9f0bd;
  border-color: #7fb654;
}
[data-tema="girassol"] .sinal-atencao {
  color: #7a4300;
  background: #ffe2a3;
  border-color: #e3a919;
}
[data-tema="girassol"] .sinal-critico {
  color: #7a2a12;
  background: #ffd2b8;
  border-color: #d97a4a;
}
[data-tema="girassol"] .sinal-sem {
  color: #6b5730;
  background: #f3e6bd;
  border-color: #d8c072;
}
@keyframes girassol-balanco {
  from { transform: translateY(0) rotate(calc(var(--balanco) * -1)); }
  to { transform: translateY(-14px) rotate(var(--balanco)); }
}
@keyframes girassol-voo {
  0% { transform: translate(var(--p0)) rotate(8deg); }
  24% { transform: translate(var(--p1)) rotate(-10deg); }
  51% { transform: translate(var(--p2)) rotate(7deg); }
  76% { transform: translate(var(--p3)) rotate(-8deg); }
  100% { transform: translate(var(--p4)) rotate(9deg); }
}
@media (prefers-reduced-motion: reduce) {
  .girassol-flor, .girassol-abelha { animation: none; }
}

/* "Historia" do girassol na lateral: mato -> brota -> jardineiro rega ->
   cresce -> rega -> cresce -> rega (forma o botao) -> rega -> cresce o
   botao -> abelha chega -> cresce mais -> rega final -> abelha "abre" a
   flor -> vira 5 pes -> cai a semente -> recomeca. Refinado em 2026-09-14
   a pedido do usuario (varias regadas intercaladas com crescimento em
   etapas, caule de verdade em vez do emoji flutuando sozinho, e 5 pes ao
   todo). Um unico ciclo (--jd) sincroniza tudo por keyframes em %, sem JS
   controlando o tempo - evita qualquer chance de dessincronizar. */
.jardim-historia {
  --jd: 32s;
  position: relative;
  height: 192px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 244, 196, .4), rgba(255, 244, 196, .08));
  border: 1px solid rgba(180, 140, 20, .18);
}
/* Mesma tecnica ja usada no par ".escala + .rodape-lateral" (ver
   `--vao-lateral` em ".lateral") pra anular o gap do flex e a caixa
   encostar na linha do bloco do operador, a pedido do usuario. */
.jardim-historia + .rodape-lateral { margin-top: calc(var(--vao-lateral, 16px) * -1); }
.jardim-chao {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 30px;
  background: linear-gradient(180deg, #b7d66b, #8bb548);
  border-radius: 0 0 9px 9px;
}
/* Sol e nuvens: puramente ambiente, nao fazem parte da "historia" - loop
   proprio e independente de --jd, continua igual em qualquer ponto do
   ciclo de crescimento. */
.jardim-sol {
  position: absolute;
  left: auto;
  top: 10px; right: 12px;
  font-size: 22px;
  filter: drop-shadow(0 0 6px rgba(255, 196, 60, .55));
  animation: jardimSolBrilho 4s ease-in-out infinite;
}
.jardim-nuvem {
  position: absolute;
  font-size: 18px;
  opacity: .8;
}
.jardim-nuvem-a { top: 14px; animation: jardimNuvemA 42s linear infinite; }
.jardim-nuvem-b { top: 34px; font-size: 14px; opacity: .65; animation: jardimNuvemB 58s linear infinite -20s; }
@keyframes jardimSolBrilho {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
@keyframes jardimNuvemA {
  0% { left: -15%; }
  100% { left: 115%; }
}
@keyframes jardimNuvemB {
  0% { left: -15%; }
  100% { left: 115%; }
}
.jardim-historia > span,
.jardim-historia > div.jardim-caule-principal,
.jardim-caule-extra {
  position: absolute;
  left: 50%;
  user-select: none;
  pointer-events: none;
  line-height: 1;
}
.jardim-broto {
  bottom: 28px;
  font-size: 22px;
  transform-origin: bottom center;
  animation: jardimBroto var(--jd) ease-in-out infinite;
}

/* Caule principal: uma barrinha verde que "cresce" via scaleY em etapas
   (uma por regada). O botao/flor ficam DENTRO dele, ancorados em
   bottom:100% - por herdarem o transform do pai, sobem junto quando o
   caule cresce, sem precisar sincronizar posicao em dois lugares. */
.jardim-caule-principal {
  bottom: 28px;
  width: 5px;
  height: 66px;
  margin-left: -2.5px;
  border-radius: 3px;
  background: linear-gradient(180deg, #6fa83a, #4f8a24);
  transform-origin: bottom center;
  animation: jardimCaulePrincipal var(--jd) ease-in-out infinite;
}
.jardim-botao-principal {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 13px;
  height: 13px;
  margin-left: -6.5px;
  border-radius: 50% 50% 50% 4px;
  background: radial-gradient(circle at 35% 30%, #a9c94a, #6f9a2c);
  transform-origin: center bottom;
  animation: jardimBotaoPrincipal var(--jd) ease-in-out infinite;
}
.jardim-flor-principal {
  position: absolute;
  left: 50%;
  bottom: 100%;
  font-size: 40px;
  transform-origin: center bottom;
  animation: jardimFlorPrincipal var(--jd) ease-in-out infinite;
}

/* Pes extras (a "multiplicacao" quando floresce) - caule mais curto e uma
   unica cabeca de flor, sem o drama de botao/varias regadas do principal.
   Cada um usa a MESMA dupla de keyframes com um pequeno animation-delay
   fixo (definido inline por elemento no tema.js) - e o que da o efeito de
   ir brotando um depois do outro na hora da floracao. */
.jardim-caule-extra {
  bottom: 28px;
  width: 4px;
  margin-left: -2px;
  border-radius: 3px;
  background: linear-gradient(180deg, #6fa83a, #4f8a24);
  transform-origin: bottom center;
  animation: jardimCauleExtra var(--jd) ease-in-out infinite;
}
.jardim-flor-extra-cabeca {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform-origin: center bottom;
  animation: jardimFlorExtraCabeca var(--jd) ease-in-out infinite;
}
.jardim-semente {
  font-size: 16px;
  animation: jardimSemente var(--jd) ease-in-out infinite;
}
.jardim-jardineiro {
  bottom: 26px;
  font-size: 26px;
  left: -18%;
  animation: jardimJardineiro var(--jd) ease-in-out infinite;
}
.jardim-gota {
  font-size: 13px;
  bottom: 60px;
  opacity: 0;
}
.jardim-gota.jardim-gota-a { left: 44%; animation: jardimGotaA var(--jd) ease-in infinite; }
.jardim-gota.jardim-gota-b { left: 52%; animation: jardimGotaB var(--jd) ease-in infinite; }
.jardim-abelha {
  font-size: 16px;
  top: 22%;
  opacity: 0;
}
.jardim-abelha.jardim-abelha-a { left: 34%; animation: jardimVooA 2.6s ease-in-out infinite, jardimAbelhaApareceA var(--jd) linear infinite; }
.jardim-abelha.jardim-abelha-b { left: 64%; top: 16%; animation: jardimVooB 3.1s ease-in-out infinite -1.4s, jardimAbelhaApareceB var(--jd) linear infinite; }

@keyframes jardimBroto {
  0%, 4% { opacity: 0; transform: translateX(-50%) scale(.3); }
  6%, 17% { opacity: 1; transform: translateX(-50%) scale(1); }
  21%, 100% { opacity: 0; transform: translateX(-50%) scale(.5); }
}
/* Uma etapa de altura por regada: 18% (brota o caule) -> 36% (rega 2) ->
   48% (rega 3, "da o botao") -> 64% (rega 4, "cresce o botao") -> 78%
   (rega 5, altura final, logo antes da abelha "abrir" a flor). */
@keyframes jardimCaulePrincipal {
  /* opacity precisa ser repetido em toda etapa - se sumir de um estagio,
     o navegador interpola linearmente entre os dois valores explicitos
     mais proximos (aqui 1 em 33% e 0 em 97%), apagando o caule aos poucos
     ao longo do meio do ciclo em vez de manter ele solido (bug real, pego
     na revisao deste keyframe). */
  0%, 17% { opacity: 0; transform: scaleY(0); }
  20%, 33% { opacity: 1; transform: scaleY(.32); }
  36%, 45% { opacity: 1; transform: scaleY(.5); }
  48%, 61% { opacity: 1; transform: scaleY(.66); }
  64%, 74% { opacity: 1; transform: scaleY(.84); }
  78%, 94% { opacity: 1; transform: scaleY(1); }
  97%, 100% { opacity: 0; transform: scaleY(0); }
}
@keyframes jardimBotaoPrincipal {
  0%, 39% { opacity: 0; transform: translateX(-50%) scale(.3); }
  41%, 47% { opacity: 1; transform: translateX(-50%) scale(.55); }
  48%, 63% { transform: translateX(-50%) scale(.7); }
  64%, 73% { transform: translateX(-50%) scale(.85); }
  76% { opacity: 1; transform: translateX(-50%) scale(1); }
  80%, 100% { opacity: 0; transform: translateX(-50%) scale(1.25); }
}
@keyframes jardimFlorPrincipal {
  0%, 78% { opacity: 0; transform: translateX(-50%) scale(.3) rotate(0deg); }
  82% { opacity: 1; transform: translateX(-50%) scale(1.18) rotate(-3deg); }
  86% { transform: translateX(-50%) scale(1) rotate(3deg); }
  90% { transform: translateX(-50%) scale(1) rotate(-2deg); }
  94% { opacity: 1; transform: translateX(-50%) scale(1) rotate(0deg); }
  97% { opacity: 0; transform: translateX(-50%) scale(.7) rotate(0deg); }
  100% { opacity: 0; transform: translateX(-50%) scale(.3) rotate(0deg); }
}
@keyframes jardimCauleExtra {
  0%, 75% { opacity: 0; transform: scaleY(0); }
  81%, 93% { opacity: 1; transform: scaleY(1); }
  97%, 100% { opacity: 0; transform: scaleY(0); }
}
@keyframes jardimFlorExtraCabeca {
  0%, 77% { opacity: 0; transform: translateX(-50%) scale(0); }
  83%, 93% { opacity: 1; transform: translateX(-50%) scale(1); }
  97%, 100% { opacity: 0; transform: translateX(-50%) scale(0); }
}

/* Folhas do caule principal, em 3 alturas (pedido do usuario: "so aparece
   folha aqui em cima" - agora nascem espalhadas pelo caule, tipo o
   desenho de referencia). Cada lado (esq/dir) so define a forma/rotacao;
   o "bottom" e a opacidade por estagio vem das classes de nivel
   (jardim-folha-t1/2/3), pra nao precisar de 6 keyframes diferentes -
   left e right da mesma altura reaproveitam o mesmo keyframe de opacidade. */
.jardim-folha {
  position: absolute;
  left: 50%;
  width: 15px;
  height: 9px;
  background: linear-gradient(135deg, #8ec24c, #5d9c2a);
  opacity: 0;
}
.jardim-folha-esq { border-radius: 0 70% 0 70%; transform: translateX(-100%) rotate(-30deg); transform-origin: 100% 50%; }
.jardim-folha-dir { border-radius: 70% 0 70% 0; transform: translateX(0) rotate(30deg); transform-origin: 0 50%; }
.jardim-folha-t1 { bottom: 24%; animation: jardimFolhaT1 var(--jd) ease-in-out infinite; }
.jardim-folha-t2 { bottom: 50%; animation: jardimFolhaT2 var(--jd) ease-in-out infinite; }
.jardim-folha-t3 { bottom: 72%; animation: jardimFolhaT3 var(--jd) ease-in-out infinite; }
@keyframes jardimFolhaT1 { 0%, 19% { opacity: 0; } 22%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes jardimFolhaT2 { 0%, 44% { opacity: 0; } 47%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes jardimFolhaT3 { 0%, 62% { opacity: 0; } 65%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes jardimSemente {
  0%, 89% { opacity: 0; bottom: 86px; transform: translateX(-50%) scale(1); }
  91% { opacity: 1; bottom: 86px; transform: translateX(-50%) scale(1); }
  95% { opacity: 1; bottom: 28px; transform: translateX(-50%) scale(1); }
  98%, 100% { opacity: 0; bottom: 28px; transform: translateX(-50%) scale(.5); }
}
/* 5 visitas do jardineiro, uma por regada (rega 1 faz o broto virar caule,
   regas 2-4 fazem o caule/botao crescer em etapas, rega 5 e a ultima antes
   da floracao). */
@keyframes jardimJardineiro {
  0%, 6% { left: -18%; opacity: 0; }
  8%, 15% { left: 30%; opacity: 1; }
  18% { left: -18%; opacity: 0; }
  26%, 33% { left: 30%; opacity: 1; }
  36% { left: -18%; opacity: 0; }
  38%, 45% { left: 30%; opacity: 1; }
  48% { left: -18%; opacity: 0; }
  54%, 61% { left: 30%; opacity: 1; }
  64% { left: -18%; opacity: 0; }
  68%, 74% { left: 30%; opacity: 1; }
  77%, 100% { left: -18%; opacity: 0; }
}
@keyframes jardimGotaA {
  0%, 9% { opacity: 0; transform: translateY(-6px); }
  11% { opacity: 1; transform: translateY(0); }
  13%, 27% { opacity: 0; transform: translateY(16px); }
  29% { opacity: 1; transform: translateY(0); }
  31%, 39% { opacity: 0; transform: translateY(16px); }
  41% { opacity: 1; transform: translateY(0); }
  43%, 55% { opacity: 0; transform: translateY(16px); }
  57% { opacity: 1; transform: translateY(0); }
  59%, 69% { opacity: 0; transform: translateY(16px); }
  71% { opacity: 1; transform: translateY(0); }
  73%, 100% { opacity: 0; transform: translateY(16px); }
}
@keyframes jardimGotaB {
  0%, 10% { opacity: 0; transform: translateY(-6px); }
  12% { opacity: 1; transform: translateY(0); }
  14%, 28% { opacity: 0; transform: translateY(16px); }
  30% { opacity: 1; transform: translateY(0); }
  32%, 40% { opacity: 0; transform: translateY(16px); }
  42% { opacity: 1; transform: translateY(0); }
  44%, 56% { opacity: 0; transform: translateY(16px); }
  58% { opacity: 1; transform: translateY(0); }
  60%, 70% { opacity: 0; transform: translateY(16px); }
  72% { opacity: 1; transform: translateY(0); }
  74%, 100% { opacity: 0; transform: translateY(16px); }
}
@keyframes jardimAbelhaApareceA {
  0%, 57% { opacity: 0; }
  60%, 93% { opacity: 1; }
  96%, 100% { opacity: 0; }
}
@keyframes jardimAbelhaApareceB {
  0%, 60% { opacity: 0; }
  63%, 93% { opacity: 1; }
  96%, 100% { opacity: 0; }
}
@keyframes jardimVooA {
  0%, 100% { transform: translate(0, 0) rotate(-6deg); }
  50% { transform: translate(10px, -8px) rotate(6deg); }
}
@keyframes jardimVooB {
  0%, 100% { transform: translate(0, 0) rotate(6deg); }
  50% { transform: translate(-9px, 7px) rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .jardim-historia > span,
  .jardim-historia .jardim-caule-principal,
  .jardim-historia .jardim-caule-extra,
  .jardim-historia .jardim-folha { animation: none !important; opacity: 0; }
  .jardim-caule-principal { opacity: 1 !important; transform: scaleY(1) !important; }
  .jardim-flor-principal { opacity: 1 !important; transform: translateX(-50%) scale(1) !important; }
  .jardim-caule-principal .jardim-folha { opacity: 1 !important; }
  .jardim-sol { opacity: 1 !important; }
}

/* Galeria de fotos do carro (Relatorio Diario) - grid simples que se
   adapta a largura, foto em quadrado (object-fit cobre sem distorcer) e o
   botao de excluir fica por cima no canto, so aparecendo mais forte no
   hover pra nao competir com a foto em telas de toque (onde nao ha hover -
   por isso opacity base ja da pra tocar, so fica mais discreto). */
.galeria-veiculo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.galeria-item {
  position: relative;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel-2);
}
.galeria-item a { display: block; aspect-ratio: 1 / 1; }
.galeria-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeria-item figcaption {
  padding: 6px 8px;
  font-size: .74rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.galeria-excluir {
  position: absolute;
  top: 6px;
  right: 6px;
  opacity: .75;
}
.galeria-excluir:hover { opacity: 1; }

/* Equipamentos Testados (2026-10-03): cada cadastro agrupa varias fotos
   e aparece fechado feito uma "pasta" - so' icone + MAC/modelo/marca,
   nenhuma <img> no DOM ate' a pessoa clicar pra abrir (pedido explicito:
   "sem imagem ao abrir ai aparece as fotos pra nao pesar"). */
.galeria-pastas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; align-items: start; }
.equip-pasta.aberta { grid-column: 1 / -1; }
.equip-pasta {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2);
  overflow: hidden;
}
.equip-pasta-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
}
.equip-pasta-head:hover { background: rgba(255,255,255,.04); }
.equip-pasta-icone { font-size: 1.6rem; line-height: 1; flex: 0 0 auto; }
.equip-pasta-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.equip-pasta-info strong { font-size: 1.05rem; color: var(--text); letter-spacing: .02em; }
.equip-pasta-mac {
  font-family: var(--mono, monospace);
  font-size: .95rem;
  font-weight: 600;
  color: var(--cyan);
}
.equip-pasta-meta { font-size: .78rem; color: var(--muted); }
.equip-pasta.aberta .equip-pasta-head { border-bottom: 1px solid var(--border); }
.equip-pasta-fotos {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 10px;
}
.equip-pasta-foto { position: relative; flex: 1 1 110px; max-width: 160px; aspect-ratio: 1 / 1; }
.equip-pasta-foto a { display: block; width: 100%; height: 100%; }
.equip-pasta-fotos img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 4px; }
.equip-pasta-foto .equip-preview-remover { top: 4px; right: 4px; opacity: .8; }
.equip-pasta-foto .equip-preview-remover:hover { opacity: 1; }

/* Select de Modelo/Marca com botao "+" pra cadastrar um valor novo */
.campo-com-add { display: flex; gap: 6px; align-items: stretch; }
.campo-com-add select { flex: 1 1 auto; }
.campo-com-add .mini-button-icone { flex: 0 0 auto; }

/* Preview das fotos escolhidas/coladas (Ctrl+V) no modal de cadastro */
.equip-preview-fotos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.equip-preview-foto { position: relative; width: 64px; height: 64px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); }
.equip-preview-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.equip-preview-remover {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  line-height: 16px;
  padding: 0;
  font-size: .7rem;
  border-radius: 50%;
}

/* Form de manutencao do veiculo - grid responsivo (mesmo espirito de
   .pagamento-form) com os checkboxes de servico numa linha propria que
   ocupa a largura inteira. As labels dos checkboxes precisam anular o
   estilo generico de ".admin-form label" (maiusculo, empilhado - pensado
   pra rotulo-em-cima-do-campo, nao rotulo-do-lado-da-caixinha). */
.manutencao-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 12px; }
.manutencao-form .form-actions { grid-column: 1 / -1; display: flex; gap: 10px; }
.manutencao-checkboxes {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.manutencao-checkboxes label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 6px;
  text-transform: none !important;
  font-weight: 600 !important;
  font-size: .82rem !important;
  color: var(--text) !important;
  cursor: pointer;
}
.manutencao-checkboxes input[type="checkbox"] { width: auto; height: auto; }
.manutencao-servicos-pill { display: inline-block; font-size: .68rem; padding: 2px 7px; border-radius: 20px; background: var(--panel-2); border: 1px solid var(--border); margin: 1px 2px 1px 0; white-space: nowrap; }
/* ".kpis" e um grid fixo de 6 colunas (pensado pra secoes com 5-6 KPIs) -
   com so 2 cards (proxima troca/revisao) cada um ficava espremido em 1/6
   da largura e o texto ("Faltam Xkm (meta Ykm)") quebrava em 3 linhas
   (reportado pelo usuario). Poucas cartas merecem colunas bem mais largas. */
.kpis-2col { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Relatorios FiberHome tem 7 cards (Total/Ativos/Inativos/Critico/Ruim/
   Aceitavel/Bom) - o .kpis padrao e fixo em 6 colunas, entao o 7o sempre
   quebrava linha sozinho, deixando um buraco grande do lado dele (reportado
   pelo usuario com print). auto-fit com minimo menor deixa os 7 caberem
   numa linha so em tela de desktop, e ainda assim colapsa bem em telas
   estreitas (a responsividade generica do .kpis ja cobre isso). */
.kpis-fiberhome { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }

/* Central de Atendimentos · deslocamentos dos técnicos */
.central-deslocamentos-page { min-width: 0; }
.central-deslocamentos-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.central-deslocamentos-kpis .kpi { min-width: 0; }
.central-deslocamento-destaque strong { font-size: clamp(1.1rem, 2vw, 1.55rem); }
.central-deslocamento-destaque small { color: var(--muted); }
.central-deslocamentos-colunas { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .9fr); gap: 14px; align-items: start; }
.central-deslocamento-cadastro, .central-deslocamento-ranking-card, .central-deslocamento-historico { min-width: 0; }
.central-deslocamento-form {
  display: grid;
  grid-template-columns: minmax(130px, .7fr) minmax(170px, 1.15fr) minmax(150px, 1fr) auto minmax(150px, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 14px;
}
.central-deslocamento-form label, .central-deslocamento-pesquisa {
  display: grid;
  min-width: 0;
  gap: 6px;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.central-deslocamento-form input, .central-deslocamento-form select, .central-deslocamento-pesquisa input {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
}
.central-deslocamento-ponte { align-self: end; padding: 0 0 11px; color: var(--cyan); font-size: .68rem; font-weight: 800; text-transform: uppercase; white-space: nowrap; }
.central-deslocamento-form .btn-ok { min-height: 40px; padding: 0 14px; white-space: nowrap; }
.central-deslocamento-feedback { min-height: 1.2em; margin: 8px 0 0; color: var(--green); font-size: .8rem; font-weight: 700; }
.central-deslocamento-ranking-card .card-head { gap: 8px; flex-wrap: wrap; }
.central-deslocamento-ranking-card .card-head small { color: var(--muted); }
.central-deslocamento-ranking { display: grid; gap: 6px; max-height: 385px; overflow: auto; }
.central-deslocamento-ranking-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 42px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--panel-2) 68%, transparent); }
.central-deslocamento-posicao { color: var(--cyan); font: 700 .72rem var(--mono, monospace); }
.central-deslocamento-ranking-item b { min-width: 0; overflow-wrap: anywhere; font-size: .8rem; }
.central-deslocamento-ranking-contagem { color: var(--muted); font-size: .7rem; text-align: right; white-space: nowrap; }
.central-deslocamento-historico { margin-top: 14px; }
.central-deslocamento-historico .card-head { align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.central-deslocamento-historico .card-head > span { color: var(--muted); font-size: .76rem; }
.central-deslocamento-pesquisa { max-width: 420px; margin: 10px 0 12px; }
.central-deslocamento-lista { display: grid; gap: 7px; max-height: 560px; overflow: auto; }
.central-deslocamento-registro { display: grid; grid-template-columns: 105px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel-2); }
.central-deslocamento-data { color: var(--cyan); font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.central-deslocamento-trajeto { display: grid; min-width: 0; gap: 3px; }
.central-deslocamento-trajeto strong { font-size: .82rem; }
.central-deslocamento-trajeto span { color: var(--muted); font-size: .76rem; overflow-wrap: anywhere; }
.central-deslocamento-excluir { min-height: 30px; }
@media (max-width: 1180px) {
  .central-deslocamentos-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .central-deslocamentos-colunas { grid-template-columns: minmax(0, 1fr); }
  .central-deslocamento-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .central-deslocamento-ponte { align-self: center; }
}
@media (max-width: 620px) {
  .central-deslocamentos-kpis { gap: 8px; }
  .central-deslocamentos-kpis .kpi { padding: 12px; }
  .central-deslocamento-form { grid-template-columns: minmax(0, 1fr); }
  .central-deslocamento-ponte { padding: 0; }
  .central-deslocamento-form .btn-ok { width: 100%; }
  .central-deslocamento-registro { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; }
  .central-deslocamento-data { grid-column: 1 / -1; }
  .central-deslocamento-trajeto { grid-column: 1; }
  .central-deslocamento-excluir { grid-column: 2; grid-row: 2; }
}

/* Importacao do mapeamento UNM2000: campos alinhados e com largura estavel. */
.fiberhome-import-card { min-width: 0; }
.fiberhome-import-card .card-head { margin-bottom: 8px; }
.fiberhome-import-card .card-head h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.fiberhome-import-card .card-head h2 small { color: var(--muted); font-size: .76rem; font-weight: 600; }
.fiberhome-import-card .table-footnote { max-width: 100%; line-height: 1.5; }
.fiberhome-import-form {
  display: grid;
  grid-template-columns: minmax(190px, .8fr) minmax(260px, 1.6fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.fiberhome-import-form #importarOlt {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  color-scheme: dark;
  cursor: pointer;
}
.fiberhome-import-form input[type="file"] {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: .78rem;
}
.fiberhome-import-form input[type="file"]::file-selector-button {
  min-height: 30px;
  margin-right: 10px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.fiberhome-import-form input[type="file"]::file-selector-button:hover { border-color: var(--green); }
.fiberhome-import-form > button.mini-button {
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid color-mix(in srgb, var(--green) 58%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--green) 15%, var(--panel));
  color: var(--green);
  white-space: nowrap;
}
.fiberhome-import-form > button.mini-button:hover {
  background: color-mix(in srgb, var(--green) 24%, var(--panel));
  border-color: var(--green);
}
@media (max-width: 760px) {
  .fiberhome-import-form { grid-template-columns: minmax(0, 1fr); }
  .fiberhome-import-form > button.mini-button { width: 100%; }
}
/* Alvos por ID mantem o estilo funcionando tambem nos workers que ainda
   estejam servindo o template anterior, antes de recarregar o processo. */
.form-actions:has(#importarOlt) {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}
#importarOlt {
  flex: 1 1 170px;
  width: auto;
  min-width: 0;
  min-height: 40px;
  padding: 0 30px 0 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background-color: var(--panel-2);
  color: var(--text);
  color-scheme: dark;
}
#importarOlt + input[type="file"] {
  flex: 2 1 230px;
  width: auto;
  min-width: 0;
  min-height: 40px;
  padding: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: .78rem;
}
#importarOlt + input[type="file"]::file-selector-button {
  min-height: 30px;
  margin-right: 8px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
#importarOlt + input[type="file"]::file-selector-button:hover { border-color: var(--green); }
#importarOlt + input[type="file"] + button[type="submit"] {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid color-mix(in srgb, var(--green) 65%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--green) 18%, var(--panel));
  color: var(--green);
  font-weight: 800;
  white-space: nowrap;
}
#importarOlt + input[type="file"] + button[type="submit"]:hover {
  background: color-mix(in srgb, var(--green) 28%, var(--panel));
  border-color: var(--green);
}

/* Botoes de salvar do veiculo (reportado pelo usuario: "nao tem botao pra
   salvar"). A classe ".btn-ok" sozinha nao e confiavel aqui - existe uma
   regra generica ".form-actions button" (1 classe + 1 tipo) que empata ou
   vence ".btn-ok"/".mini-button" (so 1 classe) dependendo do tema, e varios
   temas (ex: monster) ainda tem o proprio "[data-tema=X] .mini-button" por
   cima disso tudo - o botao acabava com o fundo praticamente igual ao
   painel, lendo como texto solto em vez de botao. Selecionando pelo ID
   evita brigar com cascata nenhuma dessas: ID sempre ganha. */
#manutencaoSalvar, #abastecimentoSalvar {
  background: rgba(34, 197, 94, .24) !important;
  border: 1px solid rgba(34, 197, 94, .65) !important;
  color: #86efac !important;
}
#manutencaoSalvar:hover, #abastecimentoSalvar:hover {
  background: rgba(34, 197, 94, .38) !important;
}

.central-acoes { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.central-acoes .mini-button { min-width: 36px; min-height: 32px; padding: 4px 9px; font-size: 1rem; }

.central-atendimentos-tabela .cliente-fone { display: block; margin: 4px 0 0; }

/* Relatorio Dude: equipamentos agrupados podem ser expandidos. O formato
   arredondado deixa a acao de abrir/fechar clara sem alterar os botoes gerais. */
.btn-expandir-equip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 13px;
  border-radius: 999px !important;
  line-height: 1.15;
}


/* Seletor de vários meses em Todas as OS. */
.filtro-multimes { position: relative; }
.filtro-multimes > summary { height: 38px; box-sizing: border-box; display: flex; align-items: center; padding: 0 30px 0 11px; border: 1px solid var(--border); border-radius: 8px; background: #0e1726; color: var(--text); cursor: pointer; list-style: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filtro-multimes > summary::-webkit-details-marker { display: none; }
.filtro-multimes > summary::after { content: "▾"; position: absolute; right: 11px; color: var(--muted); }
.filtro-multimes[open] > summary { border-color: var(--blue); }
.filtro-multimes-opcoes { position: absolute; z-index: 30; top: calc(100% + 5px); left: 0; width: max(230px, 100%); max-height: 260px; overflow: auto; padding: 7px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); box-shadow: 0 12px 28px rgba(0,0,0,.35); }
.filtro-multimes-opcoes label { display: flex; grid-template-columns: none; align-items: center; gap: 8px; padding: 7px 8px; color: var(--text); font-size: .8rem; font-weight: 700; text-transform: none; cursor: pointer; }
.filtro-multimes-opcoes label:hover { background: rgba(59,130,246,.12); border-radius: 6px; }
.filtro-multimes-opcoes input { width: auto; accent-color: var(--blue); }
.filtro-multimes-acoes { position: absolute; z-index: 31; top: calc(100% + 272px); left: 0; width: max(230px, 100%); display: flex; gap: 6px; padding: 7px; box-sizing: border-box; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 8px 8px; background: var(--panel-2); }
.filtro-multimes:not([open]) .filtro-multimes-acoes { display: none; }
.filtro-multimes-acoes button { height: 30px; padding: 0 8px; font-size: .68rem; }
.filtro-multimes-vazio { display: block; padding: 8px; color: var(--muted); font-size: .78rem; }

/* Cancelamentos: operador responsavel e registro de retirada. */
.cancelamento-retirado {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 999px;
  background: rgba(15, 23, 42, .36);
  color: var(--muted, #9fb0c4);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
.cancelamento-retirado:hover { border-color: var(--accent, #22c55e); transform: translateY(-1px); }
.cancelamento-retirado input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.cancelamento-retirado span { position: relative; padding-left: 27px; font-weight: 700; font-size: .76rem; }
.cancelamento-retirado span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 21px;
  height: 12px;
  border-radius: 999px;
  background: #64748b;
  transform: translateY(-50%);
  transition: background .18s ease;
}
.cancelamento-retirado span::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .36);
  transform: translateY(-50%);
  transition: transform .18s ease;
}
.cancelamento-retirado input:checked + span { color: #b7ff58; }
.cancelamento-retirado input:checked + span::before { background: #22c55e; }
.cancelamento-retirado input:checked + span::after { transform: translate(9px, -50%); }
.cancelamento-retirado:has(input:checked) { border-color: rgba(34, 197, 94, .62); background: rgba(34, 197, 94, .12); }
.cancelamento-sistema { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.cancelamento-sistema-opcao { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 700; color: var(--muted, #9fb0c4); cursor: pointer; }
.cancelamento-sistema-opcao input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent, #22c55e); cursor: pointer; }
.cancelamento-sistema-opcao:has(input:checked) { color: #b7ff58; }

/* Cadastro de ONUs: campos em pares para o formulario ficar compacto. */
.cadastro-onu-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
}
.cadastro-onu-form .form-actions { grid-column: 1 / -1; }
@media (max-width: 680px) {
  .cadastro-onu-form { grid-template-columns: 1fr; }
}

/* Cadastro de ONUs: cor do sinal preserva a leitura e evidencia a faixa. */
.sinal-badge {
  display: inline-flex;
  align-items: center;
  min-width: 46px;
  justify-content: center;
  border-radius: 999px;
  padding: 4px 8px;
  font-weight: 800;
  font-size: .76rem;
}
.sinal-bom { color: #bbf7d0; background: rgba(34,197,94,.22); border: 1px solid rgba(34,197,94,.48); }
.sinal-atencao { color: #fde68a; background: rgba(245,158,11,.2); border: 1px solid rgba(245,158,11,.48); }
.sinal-critico { color: #fecaca; background: rgba(239,68,68,.2); border: 1px solid rgba(239,68,68,.48); }
.sinal-sem { color: var(--muted); background: var(--panel-2); border: 1px solid var(--border); }

/* Acao principal do Cadastro de ONUs: ocupa uma faixa propria e fica centralizada. */
.filters .btn-cadastro-onu {
  grid-column: auto;
  justify-self: stretch;
  width: min(260px, 100%);
  min-height: 38px;
  justify-content: center;
  align-self: center;
  padding: 0 16px;
  border-color: rgba(74, 222, 128, .85);
  background: linear-gradient(135deg, rgba(22, 163, 74, .42), rgba(34, 197, 94, .22));
  box-shadow: 0 0 0 1px rgba(34, 197, 94, .12), 0 8px 18px rgba(34, 197, 94, .14);
  font-size: 1rem;
  letter-spacing: .02em;
}
.filters .btn-cadastro-onu:hover {
  background: linear-gradient(135deg, rgba(22, 163, 74, .6), rgba(34, 197, 94, .34));
  box-shadow: 0 0 0 1px rgba(74, 222, 128, .24), 0 10px 24px rgba(34, 197, 94, .22);
  transform: translateY(-1px);
}
.filters .btn-cadastro-onu { background: rgba(34, 197, 94, .16); box-shadow: none; border-color: rgba(34, 197, 94, .55); }
.filtros-cadastro-onu .btn-cadastro-onu { align-self: end; }
.filters .btn-cadastro-onu:hover { background: rgba(34, 197, 94, .28); box-shadow: none; }

/* Campos com catálogo: sugestão dos valores existentes e inclusão rápida de opção nova. */
.campo-com-cadastro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: center; }
.tecnologia-opcoes { border: 0; padding: 0; margin: 0; display: flex; align-items: center; gap: 18px; min-width: 0; }
.tecnologia-opcoes legend { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .08em; margin-bottom: 8px; }
.tecnologia-opcoes label { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-weight: 700; }
.tecnologia-opcoes input[type="radio"] { appearance: auto; width: 15px; height: 15px; min-height: 15px; margin: 0; padding: 0; accent-color: var(--green); }
.cadastro-onu-form label[hidden] { display: none !important; }
.grid-table-full .card-head { justify-content: flex-start; gap: 20px; }
.grid-table-full .card-head .table-search { margin-left: 0; }
.registro-hora { display: block; color: var(--muted); font-size: .72rem; margin-top: 3px; }
.admin-form .campo-com-cadastro input { min-width: 0; }
.admin-form .cadastrar-opcao { height: 40px; white-space: nowrap; color: #bbf7d0; border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.1); font-size: .68rem; font-weight: 800; }
.admin-form .cadastrar-opcao:hover { border-color: var(--green); background: rgba(34,197,94,.22); }

/* Seletores do Cadastro de ONUs seguem o mesmo desenho dos demais campos. */
.admin-form .campo-com-cadastro select { min-width: 0; }
.admin-form .cadastrar-opcao {
  width: 40px;
  min-width: 40px;
  padding: 0;
  border-radius: 8px;
  font-size: 1.2rem;
  line-height: 1;
}

/* Inclusão de opções: botão compacto e janela própria, sem aviso do navegador. */
.admin-form .cadastrar-opcao {
  width: 38px;
  min-width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #d9f99d;
  border-color: rgba(163,230,53,.42);
  background: rgba(132,204,22,.12);
  box-shadow: inset 0 0 0 1px rgba(163,230,53,.08);
  font-size: 1.1rem;
  font-weight: 500;
}
.admin-form .cadastrar-opcao:hover { color: #f7fee7; border-color: rgba(190,242,100,.85); background: rgba(132,204,22,.26); transform: translateY(-1px); }
.modal-opcao-cadastro { width: min(440px, 100%); }
.modal-opcao-cadastro .table-footnote { margin: 0 0 14px; }

/* Campos exclusivos de ativação no cadastro do Suporte. */
.cadastro-ativacao-campos { display: contents; }
.cadastro-campo-com-opcao { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: center; }
.cadastro-campo-com-opcao select { min-width: 0; width: 100%; }
.cadastro-cadastrar-opcao {
  width: 38px; min-width: 38px; height: 38px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(56, 189, 248, .45); background: rgba(6, 182, 212, .12);
  color: #bae6fd; font-size: 1.1rem; line-height: 1; box-shadow: inset 0 0 0 1px rgba(125,211,252,.08);
}
.cadastro-cadastrar-opcao:hover { color: #f0f9ff; border-color: rgba(125,211,252,.9); background: rgba(6,182,212,.28); transform: translateY(-1px); }

/* Ações do Cadastro de ONUs: os dois ícones permanecem lado a lado. */
#tabelaCadastro .acoes-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 78px;
  white-space: nowrap;
}
#tabelaCadastro .acoes-linha .mini-button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 50%;
}

/* Aviso de saída por inatividade: aparece aos 25min e conta os 5min finais. */
.modal-inatividade { z-index: 80; backdrop-filter: blur(7px); }
.aviso-inatividade {
  width: min(830px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, .78fr);
  gap: 20px;
  padding: 26px;
  overflow: hidden;
  border-color: rgba(56, 189, 248, .42);
  background: radial-gradient(circle at 15% 0%, rgba(14, 116, 144, .32), transparent 48%), #0b1728;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .7), 0 0 44px rgba(14, 165, 233, .12);
}
.aviso-inatividade-kicker { margin: 0 0 7px; color: #67e8f9; font-size: .7rem; font-weight: 800; letter-spacing: .16em; }
.aviso-inatividade h2 { margin: 0; color: #f0f9ff; font-size: clamp(1.25rem, 3vw, 1.8rem); }
.aviso-inatividade-texto > p:not(.aviso-inatividade-kicker) { color: #b8d4ef; }
.aviso-inatividade-contador { display: block; margin: 14px 0 4px; color: #22d3ee; font-size: clamp(3.2rem, 8vw, 5.5rem); line-height: 1; letter-spacing: .04em; text-shadow: 0 0 24px rgba(34, 211, 238, .42); }
.aviso-inatividade-ajuda { margin-top: 4px; font-size: .83rem; }
.aviso-inatividade-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.aviso-inatividade-acoes .btn-ok { min-height: 44px; }
.aviso-inatividade-acoes .mini-button { min-height: 44px; padding: 0 16px; }
.aviso-inatividade-meme { position: relative; min-height: 270px; overflow: hidden; border-radius: 14px; background: #071324; }
.aviso-inatividade-meme::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 23, 40, .22), transparent 35%), linear-gradient(0deg, rgba(7, 19, 36, .35), transparent 45%); pointer-events: none; }
.aviso-inatividade-meme img { width: 100%; height: 100%; min-height: 270px; object-fit: cover; object-position: 73% 49%; animation: meme-casinha 6s ease-in-out infinite; }
.coco { position: absolute; z-index: 1; font-style: normal; font-size: 1.7rem; filter: drop-shadow(0 2px 5px rgba(0,0,0,.4)); animation: coco-voa 4s ease-in-out infinite; }
.coco-um { top: 14%; left: 16%; }
.coco-dois { top: 20%; right: 12%; animation-delay: -1.3s; }
.coco-tres { right: 20%; bottom: 17%; animation-delay: -2.4s; }
@keyframes meme-casinha { 0%,100% { transform: scale(1.01) translateY(0); } 50% { transform: scale(1.06) translateY(-5px); } }
@keyframes coco-voa { 0%,100% { transform: translate(0,0) rotate(-8deg); } 50% { transform: translate(8px,-13px) rotate(12deg); } }
@media (max-width: 650px) { .aviso-inatividade { grid-template-columns: 1fr; } .aviso-inatividade-meme { min-height: 190px; } .aviso-inatividade-meme img { min-height: 190px; } }

/* Cancelamentos no tema Flor: filtros e retirada seguem o acabamento claro,
   sem o seletor preto e sem o interruptor cinza que sobravam do tema escuro. */
[data-tema="flor"] .filtro-multimes > summary,
[data-tema="flor"] .filtro-multimes-opcoes,
[data-tema="flor"] .filtro-multimes-acoes {
  background: #fff9fc;
  border-color: var(--border);
  color: var(--text);
}
[data-tema="flor"] .filtro-multimes > summary::after { color: var(--rosa-forte); }
[data-tema="flor"] .filtro-multimes-opcoes { box-shadow: 0 12px 28px rgba(190, 24, 93, .16); }
[data-tema="flor"] .filtro-multimes-opcoes label:hover { background: #fde7f1; }
[data-tema="flor"] .cancelamento-retirado {
  border-color: #efb0ca;
  background: #fff9fc;
  color: #a34a70;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
}
[data-tema="flor"] .cancelamento-retirado:hover { border-color: #db2777; background: #fff1f7; }
[data-tema="flor"] .cancelamento-retirado span::before { background: #dfabc1; }
[data-tema="flor"] .cancelamento-retirado input:checked + span { color: #a21caf; }
[data-tema="flor"] .cancelamento-retirado input:checked + span::before { background: #db2777; }
[data-tema="flor"] .cancelamento-retirado:has(input:checked) {
  border-color: #e879ad;
  background: #fde7f1;
}


/* No tema Flor os valores de sinal precisam ter leitura imediata: as cores
   claras anteriores foram feitas para fundo escuro e apagavam os numeros. */
[data-tema="flor"] .sinal-badge {
  font-weight: 800;
  text-shadow: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.42);
}
[data-tema="flor"] .sinal-bom {
  color: #075c37;
  background: #bff3d2;
  border-color: #55c985;
}
[data-tema="flor"] .sinal-atencao {
  color: #7a4300;
  background: #ffe2a3;
  border-color: #edaf2f;
}
[data-tema="flor"] .sinal-critico {
  color: #961d38;
  background: #ffc5d2;
  border-color: #ed718d;
}
[data-tema="flor"] .sinal-sem {
  color: #765064;
  background: #f7ddea;
  border-color: #e8aac7;
}

/* O contador e a acao ficam sempre na coluna esquerda; a ilustracao ocupa a
   lateral direita sem carregar nenhum texto ou interface propria. */
.aviso-inatividade {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  align-items: stretch;
}
.aviso-inatividade-meme {
  width: 100%;
  min-height: 280px;
}
.aviso-inatividade-meme img {
  min-height: 280px;
  object-position: center;
}
@media (max-width: 760px) {
  .aviso-inatividade { grid-template-columns: 1fr; }
  .aviso-inatividade-meme, .aviso-inatividade-meme img { min-height: 190px; }
}

/* Filtro da equipe na lista administrativa de usuarios. */
.admin-users-filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-users-resumo { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; margin: 0 0 18px; }
.admin-users-resumo .kpi { min-height: 90px; padding: 10px 8px; }
.admin-users-resumo .kpi span { font-size: .66rem; }
.admin-users-resumo .kpi strong { font-size: 1.3rem; }
@media (max-width: 900px) {
  /* 10 colunas so cabe em desktop - abaixo disso volta a quebrar linha,
     senao cada card fica espremido demais pra ler o numero. */
  .admin-users-resumo { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
}
.admin-users-total { cursor: pointer; transition: transform .15s ease, border-color .15s ease; }
.admin-users-total:hover, .admin-users-total:focus-visible { transform: translateY(-2px); border-color: var(--blue); outline: none; }
.admin-users-filtros label { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.admin-users-filtros select { min-width: 185px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); color: var(--text); font: inherit; }
@media (max-width: 700px) { .admin-users-filtros { width: 100%; } .admin-users-filtros select { flex: 1; min-width: 150px; } }

/* O Dashboard financeiro também persiste a escolha do tema no perfil. O tema
   Flor usa rosa como cor de ação; não herda os botões verdes do estilo padrão. */
[data-tema="flor"] .financeiro-dashboard-cabecalho > div > span,
[data-tema="flor"] .financeiro-departamento-kicker { color: var(--rosa-forte); }
[data-tema="flor"] .financeiro-departamento-card { border-top-color: var(--pink); }
[data-tema="flor"] .financeiro-departamento-escolas { border-top-color: var(--purple); }
[data-tema="flor"] .financeiro-departamento-numeros b,
[data-tema="flor"] .financeiro-departamento-escolas .financeiro-departamento-numeros b,
[data-tema="flor"] .financeiro-profile-contrato > strong { color: var(--rosa-forte); }
[data-tema="flor"] .financeiro-painel .btn-ok,
[data-tema="flor"] .financeiro-dashboard .btn-ok,
[data-tema="flor"] .financeiro-contrato-modal .btn-ok,
[data-tema="flor"] .financeiro-cadastro-modal .btn-ok {
  border-color: var(--pink);
  background: color-mix(in srgb, var(--pink) 16%, var(--panel));
  color: var(--rosa-forte);
}
[data-tema="flor"] .financeiro-painel .btn-ok:hover,
[data-tema="flor"] .financeiro-dashboard .btn-ok:hover,
[data-tema="flor"] .financeiro-contrato-modal .btn-ok:hover,
[data-tema="flor"] .financeiro-cadastro-modal .btn-ok:hover {
  border-color: var(--rosa-forte);
  background: color-mix(in srgb, var(--pink) 24%, var(--panel));
}
[data-tema="flor"] .financeiro-editar-linha:hover,
[data-tema="flor"] .financeiro-profile-opcao:hover,
[data-tema="flor"] .financeiro-profile-contrato:hover,
[data-tema="flor"] .financeiro-profile-contrato:focus-visible {
  border-color: var(--pink);
  background: color-mix(in srgb, var(--pink) 10%, var(--panel-2));
}
[data-tema="flor"] .financeiro-profile-opcao span { color: var(--rosa-forte); }

/* Uso da maquina remota que hospeda Grafana/Zabbix, consultada por SSH. */
.grafana-metricas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.grafana-metrica { min-width: 0; padding: 16px; }
.grafana-metrica h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: .9rem; }
.grafana-metrica > strong {
  display: block;
  overflow: hidden;
  color: var(--grafana-cor);
  font-size: clamp(1.35rem, 2.1vw, 2rem);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grafana-metrica > p { margin: 6px 0 0; overflow-wrap: anywhere; }
.grafana-metrica-cpu { --grafana-cor: var(--cyan); }
.grafana-metrica-ram { --grafana-cor: var(--purple); }
.grafana-metrica-disco { --grafana-cor: var(--green); }
.grafana-metrica-uptime { --grafana-cor: var(--blue); }
.grafana-metricas-aviso { padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--orange) 45%, var(--border)); border-radius: 8px; }
@media (max-width: 980px) { .grafana-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grafana-metricas { grid-template-columns: 1fr; } }

/* ---- Login: layout "glass" (molde Glassy OTP V2) ---- */
.login-body.login-glass {
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  background: radial-gradient(ellipse at 50% 0%, #17243a 0%, #05070c 62%);
}
.login-body.login-glass::before {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 42%, rgba(255,255,255,.035) 45%, transparent 48%),
    linear-gradient(65deg, transparent 30%, rgba(255,255,255,.03) 33%, transparent 37%),
    linear-gradient(160deg, transparent 60%, rgba(255,255,255,.025) 63%, transparent 66%);
}
.login-body.login-glass .login-shell {
  position: relative;
  z-index: 1;
  width: min(400px, calc(100% - 32px));
}
.login-body.login-glass .login-panel {
  padding: 34px 30px 26px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12);
  transition: box-shadow .4s ease, border-color .4s ease;
}
.login-body.login-glass .brand-logo {
  width: min(180px, 70%);
  margin-bottom: 12px;
}
.login-body.login-glass .login-panel h1 {
  text-align: center;
  font-size: 1.25rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.login-body.login-glass .login-panel > p {
  text-align: center;
  margin: 6px 0 22px;
  font-size: .85rem;
}
.login-body.login-glass .login-form label {
  color: rgba(226,232,240,.68);
  font-size: .7rem;
  letter-spacing: .1em;
}
.login-body.login-glass .login-form input {
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  background: rgba(5,7,12,.55);
  border: 1px solid rgba(255,255,255,.12);
  color: #f1f5f9;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.login-body.login-glass .login-form input:focus {
  outline: none;
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249,115,22,.22), 0 0 22px rgba(249,115,22,.28);
}
.login-body.login-glass .login-form input.erro {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,.25);
}
.login-body.login-glass .login-form input.pulso {
  animation: loginPulso .28s ease-out;
}
.login-body.login-glass .senha-barra {
  display: block;
  height: 3px;
  margin-top: 8px;
  border-radius: 3px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.login-body.login-glass .senha-barra i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #f97316, #ec4899, #a855f7);
  transition: width .25s ease;
}
.login-body.login-glass .login-form button {
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(90deg, #f97316, #ec4899);
  box-shadow: 0 10px 30px rgba(236,72,153,.3);
  font-size: .95rem;
  letter-spacing: .04em;
}
.login-body.login-glass .login-form button:disabled {
  opacity: .75;
  cursor: progress;
}
.login-body.login-glass .login-panel.login-verificando {
  border-color: rgba(249,115,22,.5);
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 40px rgba(249,115,22,.22);
}
.login-body.login-glass .login-panel.login-tremer {
  animation: loginTremer .45s ease;
  border-color: rgba(239,68,68,.6);
}
.login-body.login-glass .login-panel.login-sucesso {
  border-color: rgba(34,197,94,.6);
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 50px rgba(34,197,94,.35);
}
.login-body.login-glass .login-resultado {
  text-align: center;
  padding: 18px 0 10px;
}
.login-body.login-glass .login-icone {
  width: 74px;
  height: 74px;
}
.login-body.login-glass .login-icone-circulo {
  fill: none;
  stroke: #22c55e;
  stroke-width: 2;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: loginDesenha .6s ease forwards;
}
.login-body.login-glass .login-icone-marca {
  fill: none;
  stroke: #22c55e;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: loginDesenha .4s .5s ease forwards;
}
.login-body.login-glass .login-resultado p {
  margin: 14px 0 0;
  min-height: 1.4em;
  color: #86efac;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .02em;
}

@keyframes loginPulso {
  0% { box-shadow: 0 0 0 0 rgba(249,115,22,.55); }
  100% { box-shadow: 0 0 0 12px rgba(249,115,22,0); }
}
@keyframes loginTremer {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); }
  40% { transform: translateX(9px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(4px); }
}
@keyframes loginDesenha {
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .login-body.login-glass *,
  .login-body.login-glass *::before {
    animation: none !important;
    transition: none !important;
  }
  .login-body.login-glass .login-icone-circulo,
  .login-body.login-glass .login-icone-marca {
    stroke-dashoffset: 0;
  }
}

/* ---- Tema Cristal (mesma pegada da tela de login glass) ---- */
:root[data-tema="cristal"] {
  --bg: #05070c;
  --panel: #0b1120;
  --panel-2: #121a2e;
  --border: rgba(255,255,255,.14);
  --text: #f1f5f9;
  --muted: #94a3b8;
  --blue: #f97316;
  --cyan: #22d3ee;
  --green: #22c55e;
  --orange: #f97316;
  --purple: #a855f7;
  --pink: #ec4899;
  --red: #ef4444;
}
:root[data-tema="cristal"] body {
  background: radial-gradient(ellipse at 50% 0%, #17243a 0%, #05070c 62%) fixed;
}
:root[data-tema="cristal"] .card,
:root[data-tema="cristal"] .painel {
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
  border-color: rgba(255,255,255,.12);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}

/* Cristal: lateral com profundidade (camadas de vidro, sombra interna, item ativo com brilho laranja) */
:root[data-tema="cristal"] .menu {
  background: linear-gradient(180deg, #0f1a2e 0%, #080d18 100%);
  border-right: 1px solid rgba(255,255,255,.08);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.04), 12px 0 36px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
:root[data-tema="cristal"] .menu-titulo {
  color: #7dd3fc;
  text-shadow: 0 0 12px rgba(34,211,238,.25);
}
:root[data-tema="cristal"] .item {
  margin: 2px 6px;
  border-radius: 10px;
  color: #cbd5e1;
  background: linear-gradient(90deg, rgba(255,255,255,.035), transparent);
  border: 1px solid transparent;
  transition: background .2s ease, box-shadow .2s ease, color .2s ease;
}
:root[data-tema="cristal"] .item:hover {
  color: #f8fafc;
  background: linear-gradient(90deg, rgba(249,115,22,.14), rgba(236,72,153,.04));
  box-shadow: inset 0 0 0 1px rgba(249,115,22,.22), 0 6px 18px rgba(0,0,0,.35);
}
:root[data-tema="cristal"] .item.ativo {
  color: #fff7ed;
  background: linear-gradient(90deg, rgba(249,115,22,.32), rgba(236,72,153,.12));
  border-color: rgba(249,115,22,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 22px rgba(249,115,22,.28), 0 8px 22px rgba(0,0,0,.4);
}

/* Cristal: icones dos submenus em "pastilha" de vidro, com brilho no hover e leve flutuacao no ativo */
:root[data-tema="cristal"] .item > i:first-child {
  display: inline-grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 15px;
  font-style: normal;
  background: linear-gradient(145deg, rgba(249,115,22,.22), rgba(168,85,247,.16));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 12px rgba(0,0,0,.35);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
:root[data-tema="cristal"] .item:hover > i:first-child {
  transform: translateY(-2px) scale(1.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 16px rgba(249,115,22,.45);
}
:root[data-tema="cristal"] .item.ativo > i:first-child {
  animation: cristalFlutua 2.4s ease-in-out infinite;
}
@keyframes cristalFlutua {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-tema="cristal"] .item.ativo > i:first-child { animation: none; }
  :root[data-tema="cristal"] .item > i:first-child { transition: none; }
}

/* Login: texto da resposta aparece de uma vez, com fade suave (sem efeito de digitacao) */
.login-body.login-glass .login-resultado p.texto-entrada {
  animation: loginTextoEntra .7s ease both;
}
@keyframes loginTextoEntra {
  from { opacity: 0; transform: translateY(8px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* Login: resposta de erro (senha incorreta) - X vermelho desenhado, tremor e brilho vermelho */
.login-body.login-glass .login-icone-xis { display: none; fill: none; stroke: #ef4444; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: loginDesenha .4s .3s ease forwards; }
.login-body.login-glass .login-resultado.erro .login-icone-xis { display: block; }
.login-body.login-glass .login-resultado.erro .login-icone-circulo { stroke: #ef4444; }
.login-body.login-glass .login-resultado.erro .login-icone-marca { display: none; }
.login-body.login-glass .login-resultado.erro p { color: #fca5a5; }
.login-body.login-glass .login-panel.login-erro { border-color: rgba(239,68,68,.65); box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 50px rgba(239,68,68,.35); }

/* Seletor de modo da lateral (so o Leonardo): mesma linha dos outros itens do rodape */
.modo-menu-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 6px 0;
  padding: 0 12px;
}
.modo-menu-wrap label {
  color: var(--muted);
  font-size: .9rem;
  font-weight: 600;
}
.modo-menu-wrap select {
  flex: 0 0 130px;
  width: 130px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  font-size: .85rem;
}

/* Abertura depois do login (intro-logo.js): a mesma tela de validacao, uma vez por login */
.intro-logo-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 16px;
  background: radial-gradient(ellipse at 50% 40%, #17243a 0%, #05070c 70%);
  transition: opacity .6s ease;
}
.intro-logo-overlay.saindo { opacity: 0; }
.intro-cartao {
  width: min(400px, calc(100% - 32px));
  padding: 34px 30px 30px;
  text-align: center;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12);
  animation: introCartao .7s cubic-bezier(.2,.8,.2,1) both;
}
.intro-logo-img {
  display: block;
  width: min(180px, 70%);
  height: auto;
  margin: 0 auto 10px;
  filter: drop-shadow(0 0 14px rgba(34,211,238,.25));
}
.intro-icone {
  display: block;
  width: 74px;
  height: 74px;
  margin: 14px auto 0;
}
.intro-icone-circulo {
  fill: none;
  stroke: #22c55e;
  stroke-width: 2;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: introDesenha .6s .5s ease forwards;
}
.intro-icone-marca {
  fill: none;
  stroke: #22c55e;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: introDesenha .4s 1s ease forwards;
}
.intro-texto {
  margin: 14px 0 0;
  color: #86efac;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .02em;
  opacity: 0;
  animation: introTexto .7s 1.5s ease forwards;
}
@keyframes introCartao {
  from { opacity: 0; transform: translateY(14px) scale(.97); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes introDesenha {
  to { stroke-dashoffset: 0; }
}
@keyframes introTexto {
  from { opacity: 0; transform: translateY(8px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-cartao, .intro-texto, .intro-icone-circulo, .intro-icone-marca { animation: none; }
  .intro-icone-circulo, .intro-icone-marca { stroke-dashoffset: 0; }
  .intro-texto { opacity: 1; }
}

/* Player de musica da lateral (em teste so pro Leonardo) */
.musica-player { margin: 8px 12px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); display: grid; gap: 6px; font-size: 12px; }
.musica-topo { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.musica-tela { border-radius: 8px; overflow: hidden; }
.musica-yt { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.musica-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.musica-spotify iframe { display: block; width: 100%; height: 80px; border: 0; border-radius: 8px; }
.musica-titulo { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.musica-tempo { color: var(--muted); font-size: 11px; min-height: 1em; }
.musica-barra { height: 3px; border-radius: 3px; background: var(--border); overflow: hidden; }
.musica-barra i { display: block; height: 100%; width: 0; background: var(--cyan); transition: width .9s linear; }
.musica-controles { display: flex; gap: 4px; align-items: center; }
.musica-controles button { background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 3px 8px; cursor: pointer; font-size: 13px; }
.musica-controles button:disabled { opacity: .4; cursor: default; }
.musica-controles .musica-ver { margin-left: auto; font-size: 11px; color: var(--muted); }
.musica-aviso { margin: 0; color: var(--orange); font-size: 11px; }
.musica-add { display: flex; gap: 4px; }
.musica-add input { flex: 1; min-width: 0; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 5px 7px; font-size: 11px; }
.musica-add button { background: var(--cyan); color: var(--bg); border: 0; border-radius: 6px; padding: 0 10px; font-weight: 700; cursor: pointer; }
.musica-fila { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; max-height: 180px; overflow-y: auto; }
.musica-fila li { display: flex; gap: 4px; }
.musica-fila li.atual .musica-item { color: var(--cyan); }
.musica-item { flex: 1; min-width: 0; text-align: left; background: var(--panel); border: 0; color: var(--text); border-radius: 5px; padding: 4px 6px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.musica-tirar { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 11px; }

/* Aviso do Sistema (janela pra todos, so fecha com "Ciente") - mesmo estilo
   de vidro da tela de login (pedido de 2026-10-05). */
.aviso-sistema-fundo { position: fixed; inset: 0; z-index: 9000; background: rgba(4, 6, 12, .62); display: flex; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: avisoSistemaEntra .3s ease; }
.aviso-sistema-caixa { width: min(440px, 100%); text-align: center; color: #f1f5f9; padding: 30px 28px 24px; border-radius: 22px; background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.025)), rgba(15, 20, 32, .82); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12); animation: avisoSistemaSobe .35s ease; }
.aviso-sistema-logo { display: block; width: min(130px, 50%); margin: 0 auto 14px; }
.aviso-sistema-rotulo { margin: 0 0 8px; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: linear-gradient(90deg, #f97316, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; }
.aviso-sistema-caixa h2 { margin: 0 0 10px; font-size: 1.2rem; letter-spacing: .03em; color: #f8fafc; }
.aviso-sistema-mensagem { margin: 0 0 22px; white-space: pre-wrap; line-height: 1.55; font-size: .95rem; color: rgba(226,232,240,.82); }
.aviso-sistema-acoes { display: grid; gap: 10px; }
.aviso-sistema-acoes button { height: 46px; border-radius: 12px; border: 0; font-size: .95rem; font-weight: 700; letter-spacing: .04em; cursor: pointer; color: #fff; background: linear-gradient(90deg, #f97316, #ec4899); box-shadow: 0 10px 30px rgba(236,72,153,.3); transition: transform .15s ease, box-shadow .2s ease; }
.aviso-sistema-acoes button:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(236,72,153,.4); }
.aviso-sistema-acoes button.secundario { background: rgba(5,7,12,.55); border: 1px solid rgba(255,255,255,.14); box-shadow: none; color: #e2e8f0; }
@keyframes avisoSistemaEntra { from { opacity: 0; } }
@keyframes avisoSistemaSobe { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .aviso-sistema-fundo, .aviso-sistema-caixa { animation: none; } }
.aviso-sistema-lista { display: grid; gap: 10px; }
.aviso-sistema-item { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.aviso-sistema-item summary { cursor: pointer; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.aviso-sistema-texto { white-space: pre-wrap; margin: 10px 0; }
.aviso-sistema-encerrar { margin: 0 0 10px; }
.aviso-sistema-form textarea { width: 100%; }
.aviso-sistema-form .form-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.aviso-sistema-form .botao-secundario { background: transparent; border: 1px solid var(--border); color: var(--text); }
.aviso-sistema-prazo { margin: -10px 0 20px; padding: 8px 12px; border-radius: 10px; font-size: .88rem; font-weight: 700; color: #fdba74; background: rgba(249,115,22,.12); border: 1px solid rgba(249,115,22,.35); }
/* Contagem regressiva do prazo de troca de senha */
.aviso-sistema-contagem { margin: -6px 0 20px; padding: 12px; border-radius: 14px; background: rgba(249,115,22,.10); border: 1px solid rgba(249,115,22,.35); }
.aviso-sistema-contagem-frase { margin: 0 0 10px; font-size: .86rem; font-weight: 600; color: #fdba74; line-height: 1.45; }
.aviso-sistema-contagem-casas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.aviso-sistema-contagem-casa { padding: 8px 4px; border-radius: 10px; background: rgba(5,7,12,.55); border: 1px solid rgba(255,255,255,.10); }
.aviso-sistema-contagem-casa strong { display: block; font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; background: linear-gradient(90deg, #f97316, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; }
.aviso-sistema-contagem-casa span { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(226,232,240,.6); }
.aviso-sistema-contagem.urgente { border-color: rgba(239,68,68,.6); background: rgba(239,68,68,.12); }
.aviso-sistema-contagem.urgente .aviso-sistema-contagem-frase { color: #fca5a5; }
.aviso-sistema-contagem.vencido { border-color: rgba(239,68,68,.7); background: rgba(239,68,68,.16); }
.aviso-sistema-contagem.vencido .aviso-sistema-contagem-frase { margin: 0; color: #fecaca; }
/* Troca de senha dentro da janela do Aviso do Sistema */
.aviso-senha-form { display: grid; gap: 10px; text-align: left; }
.aviso-senha-campo span { display: block; margin-bottom: 4px; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(226,232,240,.68); }
.aviso-senha-linha { display: flex; gap: 6px; }
.aviso-senha-linha input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border-radius: 12px; background: rgba(5,7,12,.55); border: 1px solid rgba(255,255,255,.12); color: #f1f5f9; font-size: .95rem; }
.aviso-senha-linha input:focus { outline: none; border-color: #f97316; box-shadow: 0 0 0 3px rgba(249,115,22,.22); }
.aviso-senha-olho { width: 42px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(5,7,12,.55); cursor: pointer; }
.aviso-senha-regras { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: .78rem; color: rgba(226,232,240,.55); }
.aviso-senha-regras li::before { content: "○ "; }
.aviso-senha-regras li.ok { color: #86efac; }
.aviso-senha-regras li.ok::before { content: "✓ "; }
.aviso-senha-erro { margin: 0; padding: 8px 10px; border-radius: 10px; font-size: .85rem; color: #fecaca; background: rgba(239,68,68,.14); border: 1px solid rgba(239,68,68,.45); }
.aviso-senha-sucesso { padding: 18px 10px; border-radius: 14px; font-size: 1.05rem; font-weight: 700; color: #86efac; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.4); }
.login-body .form-ok { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; font-size: .88rem; font-weight: 600; color: #86efac; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.4); text-align: center; }
/* Player de musica cabe na largura da lateral (antes vazava ~12px pra fora) */
.rodape-lateral .musica-player { margin: 8px 0; width: 100%; box-sizing: border-box; min-width: 0; overflow: hidden; }
.musica-player > * { min-width: 0; }
.musica-topo { gap: 6px; }
.musica-topo span:first-child { white-space: nowrap; }
.musica-contador { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.musica-controles { flex-wrap: nowrap; }
.musica-controles button { padding: 3px 7px; flex: 0 0 auto; }
.musica-controles .musica-ver { padding: 3px 6px; }
.musica-add input { width: 0; }
.musica-add button { flex: 0 0 auto; }
/* Player de musica: janela separada e modo "tocando na janela" na lateral */
.musica-topo { align-items: center; }
.musica-janela-btn { margin-left: auto; background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 0 6px; font-size: 12px; line-height: 18px; cursor: pointer; }
.musica-player.em-janela > :not(.musica-topo):not(.musica-na-janela) { display: none !important; }
.musica-player.em-janela .musica-janela-btn { display: none; }
.musica-na-janela { display: grid; gap: 6px; }
.musica-na-janela[hidden] { display: none; }
.musica-na-janela p { margin: 0; font-size: 12px; color: var(--cyan); }
.musica-na-janela button { background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 4px 8px; font-size: 11px; cursor: pointer; }
.musica-janela-body { margin: 0; min-height: 100vh; background: var(--bg); display: flex; justify-content: center; }
.musica-janela-body .musica-player { width: 100%; max-width: 520px; margin: 0; border-radius: 0; border: 0; padding: 14px; font-size: 13px; }
.musica-janela-body .musica-janela-btn { display: none; }
.musica-janela-body .musica-titulo { font-size: 14px; }
.musica-janela-body .musica-fila { max-height: none; }
.musica-janela-body { align-items: flex-start; }
.musica-janela-body .musica-player { align-content: start; gap: 8px; }
.musica-janela-body .musica-add input { padding: 8px 10px; font-size: 12px; }
/* Modo continuo: moldura com o portal num iframe e o player fixo */
.musica-topo .musica-janela-btn + .musica-janela-btn { margin-left: 4px; }
.moldura-body { margin: 0; height: 100vh; overflow: hidden; background: var(--bg); }
.moldura-portal { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.moldura-player { position: fixed; left: 12px; bottom: 12px; width: 320px; z-index: 50; border-radius: 12px; background: var(--panel); border: 1px solid var(--border); box-shadow: 0 12px 34px rgba(0,0,0,.5); overflow: hidden; }
.moldura-barra { display: flex; align-items: center; gap: 4px; padding: 6px 8px; font-size: 11px; color: var(--cyan); background: var(--panel-2); border-bottom: 1px solid var(--border); }
.moldura-barra span { flex: 1; font-weight: 700; }
.moldura-barra button { background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 6px; width: 22px; height: 20px; line-height: 16px; padding: 0; cursor: pointer; font-size: 11px; }
.moldura-player .musica-player { margin: 0; border: 0; border-radius: 0; }
.moldura-player .musica-janela-btn { display: none; }
.moldura-player.minimizado .musica-player > :not(.musica-titulo):not(.musica-controles):not(.musica-barra) { display: none !important; }
.moldura-player.minimizado .musica-controles .musica-ver { display: none; }
/* Pagina dentro da moldura: espaco no fim da lateral pra nada ficar escondido atras do player */
html.em-moldura .rodape-lateral { padding-bottom: 330px; }
/* Formulario do Aviso do Sistema: caixa de marcar ao lado do texto e mensagem no tema */
.aviso-sistema-form .checkbox-row { display: flex; flex-direction: row; align-items: center; gap: 10px; text-transform: none; letter-spacing: 0; font-size: .9rem; }
.aviso-sistema-form .checkbox-row input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; }
.aviso-sistema-form textarea { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font: inherit; resize: vertical; }
.musica-spotify iframe.spotify-lista { height: 152px; }
.musica-spotify { overflow: hidden; border-radius: 8px; }
.galeria-editar { position: absolute; top: 6px; right: 40px; opacity: .75; }
.galeria-editar:hover { opacity: 1; }
.equip-pasta-acoes { flex: 0 0 100%; display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
/* Barra de volume do player (so YouTube) */
.musica-volume { display: flex; align-items: center; gap: 6px; }
.musica-volume .musica-mudo { background: transparent; border: 0; padding: 0 2px; font-size: 13px; cursor: pointer; line-height: 1; }
.musica-volume input[type=range] { flex: 1; min-width: 0; height: 4px; appearance: none; -webkit-appearance: none; border-radius: 4px; cursor: pointer;
  background: linear-gradient(90deg, var(--cyan) var(--vol, 80%), var(--border) var(--vol, 80%)); }
.musica-volume input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--text); border: 0; }
.musica-volume input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--text); border: 0; }
.musica-volume input:disabled, .musica-volume button:disabled { opacity: .35; cursor: not-allowed; }
.moldura-player.minimizado .musica-player > .musica-volume { display: flex !important; }
.musica-spotify-completo { width: 100%; margin-top: 6px; padding: 6px 8px; border-radius: 8px; border: 0; cursor: pointer; font-size: 11px; font-weight: 700; color: #04130a; background: #1ed760; }
.musica-spotify-completo:hover { filter: brightness(1.08); }
.musica-spotify-completo[hidden] { display: none; }

/* Ocultar a lateral: ela sai da tela (fixed + translate) em vez de sumir, pra o
   player de musica nao parar; o conteudo ocupa a largura toda. */
.lateral-marca { position: relative; }
.lateral-ocultar { margin-left: auto; align-self: flex-start; background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 8px; width: 26px; height: 26px; line-height: 22px; padding: 0; cursor: pointer; font-size: 14px; flex: 0 0 auto; }
.lateral-ocultar:hover { color: var(--text); border-color: var(--cyan); }
.lateral-mostrar { display: none; position: fixed; top: 12px; left: 12px; z-index: 60; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 18px; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.lateral-mostrar:hover { border-color: var(--cyan); color: var(--cyan); }
html.lateral-oculta .layout { grid-template-columns: 1fr; }
html.lateral-oculta .lateral { position: fixed; left: 0; top: 0; width: 330px; transform: translateX(-110%); visibility: hidden; }
html.lateral-oculta .lateral-mostrar { display: block; }
html.lateral-oculta .layout > .app-shell { padding-left: 64px; }
.lateral { transition: transform .22s ease; }
@media (max-width: 980px) {
  .lateral-ocultar, .lateral-mostrar { display: none !important; }
  html.lateral-oculta .lateral { position: static; transform: none; visibility: visible; width: auto; }
  html.lateral-oculta .layout { grid-template-columns: 1fr; }
  html.lateral-oculta .layout > .app-shell { padding-left: 0; }
}
.lateral-ocultar { width: auto; padding: 0 8px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.aviso-sistema-form select { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; font: inherit; }
/* Aviso do Sistema com mensagem longa (tutorial): texto a esquerda, com rolagem
   propria, e a janela nunca passa da altura da tela. */
.aviso-sistema-caixa { width: min(540px, 100%); max-height: 94vh; display: flex; flex-direction: column; }
.aviso-sistema-mensagem { text-align: left; max-height: 52vh; overflow-y: auto; padding-right: 6px; font-size: .9rem; }
.aviso-sistema-caixa .aviso-sistema-logo { width: min(110px, 40%); }
.musica-sc { overflow: hidden; border-radius: 8px; }
.musica-sc iframe { display: block; border: 0; }

/* Tema Penumbra: pensado pra sala apagada. Cinza-azulado escuro, texto em
   cinza-claro (#c9d1d9, nunca branco puro) e acentos dessaturados - o
   contraste fica confortavel sem o "branco estourado" dos temas de fundo
   quase preto. */
:root[data-tema="penumbra"] {
  --bg: #11151a;
  --panel: #181e25;
  --panel-2: #1f2630;
  --border: #2c3642;
  --text: #c9d1d9;
  --muted: #7d8895;
  --blue: #6f9bc4;
  --cyan: #7fb7b0;
  --green: #7fa88a;
  --orange: #c49a6c;
  --purple: #9a8cbf;
  --pink: #b88aa0;
  --red: #c2655c;

  --display: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --grad: linear-gradient(105deg, #6f9bc4 15%, #7fb7b0 85%);
  --raio: 14px;
  --boneco-1: #2c3642; --boneco-2: #5b6b7d; --boneco-3: #6f9bc4;
  --boneco-4: #7fb7b0; --boneco-5: #7fa88a;
}
[data-tema="penumbra"] body {
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
[data-tema="penumbra"] .login-body {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(111, 155, 196, .12), transparent 60%),
    radial-gradient(80% 60% at 85% 100%, rgba(127, 183, 176, .08), transparent 60%),
    #11151a;
}
[data-tema="penumbra"] .login-panel { border-radius: var(--raio); }
[data-tema="penumbra"] .pill { border-radius: 999px; }
[data-tema="penumbra"] .pill.ok, [data-tema="penumbra"] .pill.high { background: rgba(127, 168, 138, .18); color: var(--green); }
[data-tema="penumbra"] .pill.no, [data-tema="penumbra"] .pill.low { background: rgba(194, 101, 92, .18); color: var(--red); }
[data-tema="penumbra"] .pill.mid { background: rgba(196, 154, 108, .18); color: var(--orange); }
[data-tema="penumbra"] .pill.sistema, [data-tema="penumbra"] .pill.remoto { background: rgba(184, 138, 160, .2); color: var(--pink); }
[data-tema="penumbra"] .pill.obs { background: rgba(154, 140, 191, .22); color: var(--purple); }
[data-tema="penumbra"] .hora-registro { background: rgba(127, 183, 176, .18); color: var(--cyan); }
[data-tema="penumbra"] .hora-registro.aprox { background: var(--panel-2); color: var(--muted); }
[data-tema="penumbra"] .text-button-destaque {
  border-color: var(--border);
  color: var(--text);
  background: linear-gradient(135deg, rgba(111, 155, 196, .34), rgba(127, 183, 176, .28));
}
[data-tema="penumbra"] .modal-cadastro {
  border-color: var(--border);
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
}
[data-tema="penumbra"] .modal-cadastro::before {
  background: linear-gradient(90deg, transparent, var(--cyan), var(--blue), transparent);
}
[data-tema="penumbra"] .cadastro-head h2 {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-tema="penumbra"] .cadastro-kicker { color: var(--muted); }
[data-tema="penumbra"] .cadastro-campo > span::before { background: var(--blue); }
[data-tema="penumbra"] .cadastro-campo input,
[data-tema="penumbra"] .cadastro-campo select,
[data-tema="penumbra"] .cadastro-campo textarea,
[data-tema="penumbra"] .cadastro-check,
[data-tema="penumbra"] .combo-pop,
[data-tema="penumbra"] .cadastro-data,
[data-tema="penumbra"] .anexo-escolher {
  background: var(--panel-2);
  border-color: var(--border);
  color: var(--text);
}
[data-tema="penumbra"] .cadastro-campo input[readonly] { background: var(--panel); color: var(--muted); }
[data-tema="penumbra"] .cadastro-acoes { border-top-color: var(--border); }
[data-tema="penumbra"] .combo-op:hover, [data-tema="penumbra"] .combo-op.ativo {
  background: var(--panel);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border);
  text-shadow: none;
}
[data-tema="penumbra"] .combo-op::before { background: var(--cyan); box-shadow: none; }
[data-tema="penumbra"] .combo-op mark { color: var(--cyan); }
[data-tema="penumbra"] .cadastro-acoes .btn-ok {
  background: var(--grad);
  border-color: transparent;
  color: #0d1117;
}

/* Tela de Rastreamento (OS x trajeto do carro). So variaveis de tema: vale pra todos. */
.rast-linha { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 4px 0 8px; }
.rast-dia { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); }
.rast-dia select { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; }
.rast-painel { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr) minmax(300px, 360px); gap: 14px; min-height: 560px; }
.rast-lista { display: flex; flex-direction: column; gap: 8px; max-height: 560px; overflow-y: auto; padding-right: 4px; }
.rast-tec { display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer; font: inherit; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--border); border-left: 4px solid var(--cor, var(--cyan)); border-radius: 10px; padding: 8px 10px; }
.rast-tec:hover { border-color: var(--cor, var(--cyan)); }
.rast-tec.ativo { background: var(--panel); box-shadow: inset 0 0 0 1px var(--cor, var(--cyan)); }
.rast-muted { color: var(--muted); font-size: .82em; }
.rast-mapa-caixa { position: relative; min-height: 560px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.rast-mapa-caixa .rast-mapa { position: absolute; inset: 0; width: 100%; height: 100%; }
.rast-titulo-fix { font-weight: inherit; }
.rast-aviso { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3; padding: 8px 12px; border-radius: 8px;
  background: rgba(8, 14, 24, .88); color: #fff; font-size: .9em; border: 1px solid var(--border); }
.rast-pino { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700;
  color: #06121c; background: var(--cor, #22d3ee); border: 2px solid #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .6); cursor: pointer; }
.rast-pino.visitada { background: #34d399; }
.rast-pino.ausente { background: var(--cor, #9aa4b2); }
.rast-pino.grave { animation: rast-pino-pisca 1s ease-in-out infinite; }
@keyframes rast-pino-pisca { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239,68,68,.7); } 50% { transform: scale(1.18); box-shadow: 0 0 0 9px rgba(239,68,68,0); } }
.rast-popup { color: #111; font-size: 13px; line-height: 1.35; max-width: 240px; }
.rast-popup .rast-muted { color: #555; }
.rast-resumo { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.rast-desloc { display: grid; gap: 4px; margin-top: 10px; color: var(--muted); font-size: .9em; }
@media (max-width: 900px) { .rast-painel { grid-template-columns: 1fr; } .rast-lista { max-height: 220px; } }

.rast-tempo { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.rast-tempo h3 { margin: 0 0 4px; font-size: 1rem; }
.rast-tempo ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.rast-parada { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; }
.rast-trecho { color: var(--muted); font-size: .85em; padding-left: 14px; border-left: 2px dashed var(--border); margin-left: 8px; }

.rast-uso { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 8px 12px; margin-bottom: 12px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; font-size: .9em; }
.rast-uso strong { margin-right: 4px; }
.rast-escolhe { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 3px 6px; max-width: 280px; }

/* Player de musica: com Spotify/Deezer so o quadro do servico controla - somem ⏮ ▶ ⏭, a barra e o volume (fica o "ver" da fila). */
.musica-player.so-quadro [data-acao="anterior"],
.musica-player.so-quadro [data-acao="tocar"],
.musica-player.so-quadro [data-acao="proxima"],
.musica-player.so-quadro .musica-volume,
.musica-player.so-quadro .musica-barra { display: none; }

/* Rastreamento: replay do trajeto (carro andando pelos pontos do GPS) */
.rast-replay { position: sticky; bottom: 8px; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--border); backdrop-filter: blur(4px); }
.rast-replay[hidden] { display: none; }
.rast-replay .text-button { min-width: 38px; padding: 4px 10px; }
.rast-replay select { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; }
.rast-replay input[type="range"] { flex: 1; min-width: 80px; accent-color: var(--cyan); }
.rast-replay-info { min-width: 92px; font-size: 12px; font-weight: 700; color: var(--cyan); white-space: nowrap; }
.rast-replay-seguir { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.rast-carro { font-size: 22px; line-height: 1; padding: 3px; border-radius: 50%; background: rgba(34, 211, 238, .28); border: 2px solid var(--cyan); filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }

/* Rastreamento: popup da OS - mesmo vidro da tela de login, com animacao de entrada */
.gm-style .gm-style-iw-c, .rast-popup-ml .maplibregl-popup-content { padding: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 22px !important; max-width: none !important; overflow: visible !important; }
.gm-style .gm-style-iw-d { overflow: visible !important; max-height: none !important; }
.gm-style .gm-ui-hover-effect { display: none !important; }
.gm-style .gm-style-iw-tc::after { background: rgba(14, 22, 38, .92) !important; }
.rast-popup-ml .maplibregl-popup-tip { border-top-color: rgba(14, 22, 38, .92) !important; border-bottom-color: rgba(14, 22, 38, .92) !important; }
.rast-os { position: relative; width: 300px; padding: 16px 18px 14px; border-radius: 22px; color: #e6edf6; overflow: hidden; background: linear-gradient(160deg, rgba(40, 54, 82, .96), rgba(10, 16, 28, .96)); border: 1px solid color-mix(in srgb, var(--cor) 45%, rgba(255,255,255,.14)); box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04), 0 0 28px color-mix(in srgb, var(--cor) 28%, transparent), inset 0 1px 0 rgba(255,255,255,.14); font-family: inherit; animation: rast-os-entra .38s cubic-bezier(.2, .9, .3, 1.2) both; }
.rast-os::before { content: ""; position: absolute; inset: -30% -60%; pointer-events: none; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.07) 47%, transparent 52%); animation: rast-os-brilho 3.2s ease-in-out .5s infinite; }
@keyframes rast-os-entra { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes rast-os-brilho { 0% { transform: translateX(-60%); } 55%, 100% { transform: translateX(60%); } }
.rast-os-topo { position: relative; display: flex; align-items: center; gap: 12px; }
.rast-os-icone { width: 42px; height: 42px; flex: none; }
.rast-os-icone svg { width: 100%; height: 100%; overflow: visible; }
.rast-os-circulo { fill: color-mix(in srgb, var(--cor) 14%, transparent); stroke: var(--cor); stroke-width: 2.5; stroke-dasharray: 151; stroke-dashoffset: 151; animation: rast-os-desenha .7s ease-out .05s forwards; }
.rast-os-marca { fill: none; stroke: var(--cor); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: rast-os-desenha .5s ease-out .45s forwards; }
@keyframes rast-os-desenha { to { stroke-dashoffset: 0; } }
.rast-os-provavel .rast-os-icone { animation: rast-os-pulsa 1.6s ease-in-out .9s infinite; }
@keyframes rast-os-pulsa { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.rast-os-titulo { flex: 1; min-width: 0; display: grid; }
.rast-os-titulo small { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cor); font-weight: 800; }
.rast-os-titulo strong { font-size: 1.15rem; letter-spacing: .02em; }
.rast-os-fechar { align-self: flex-start; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #cbd5e1; cursor: pointer; font-size: 16px; line-height: 1; padding: 0; }
.rast-os-fechar:hover { background: rgba(255,255,255,.16); }
.rast-os-cliente { position: relative; margin-top: 12px; font-size: 1rem; font-weight: 700; line-height: 1.25; }
.rast-os-chips { position: relative; display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 6px; }
.rast-os-chip { padding: 2px 9px; border-radius: 999px; font-size: .68rem; font-weight: 700; letter-spacing: .03em; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: #cbd5e1; }
.rast-os-chip.tipo { background: color-mix(in srgb, var(--cor) 20%, transparent); border-color: color-mix(in srgb, var(--cor) 50%, transparent); color: #f1f5f9; }
.rast-os-end, .rast-os-agenda { position: relative; font-size: .78rem; color: #94a3b8; line-height: 1.35; margin-top: 2px; }
.rast-os-grade { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.rast-os-cel { padding: 8px 6px; border-radius: 12px; background: rgba(5, 7, 12, .45); border: 1px solid rgba(255,255,255,.1); text-align: center; }
.rast-os-cel small { display: block; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; }
.rast-os-cel b { font-size: .98rem; color: #f8fafc; }
.rast-os-barra { position: relative; height: 6px; margin-top: 10px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.rast-os-barra i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--cor) 55%, transparent), var(--cor)); transition: width .9s cubic-bezier(.2, .8, .2, 1) .15s; box-shadow: 0 0 10px var(--cor); }
.rast-os-nota { position: relative; margin-top: 8px; font-size: .74rem; color: #fbbf24; }
.rast-os-ausente .rast-os-nota { color: #fca5a5; }
.rast-os-acoes { position: relative; display: flex; gap: 8px; margin-top: 14px; }
.rast-os-btn { flex: 1; text-align: center; padding: 8px 10px; border-radius: 12px; border: 1px solid transparent; background: linear-gradient(135deg, var(--cor), color-mix(in srgb, var(--cor) 55%, #0b1220)); color: #04121c; font-weight: 800; font-size: .78rem; cursor: pointer; text-decoration: none; transition: transform .15s ease, filter .15s ease; }
.rast-os-btn:hover { transform: translateY(-1px); filter: brightness(1.1); }
.rast-os-btn.sec { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); color: #e2e8f0; }
@media (prefers-reduced-motion: reduce) { .rast-os, .rast-os::before, .rast-os-circulo, .rast-os-marca, .rast-os-provavel .rast-os-icone { animation: none !important; stroke-dashoffset: 0 !important; } .rast-os-barra i { transition: none; } }

/* Rastreamento: linha da OS clicavel (leva ao mapa) */
.rast-linha-clicavel { cursor: pointer; transition: background .15s ease; }
.rast-linha-clicavel:hover { background: rgba(34, 211, 238, .08); }
tr.rast-linha-ativa { background: rgba(34, 211, 238, .14); box-shadow: inset 3px 0 0 var(--cyan); }

.rast-replay select { max-width: 140px; }
.rast-carro-foto { padding: 0; width: 38px; height: 38px; overflow: hidden; border-width: 3px; }
.rast-carro-foto img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

/* Rastreamento: OS ao lado direito do mapa (cartoes compactos, rolam sozinhos) */
.rast-os-lista { display: flex; flex-direction: column; gap: 8px; max-height: 560px; overflow-y: auto; padding-right: 4px; }
.rast-os-item { padding: 9px 11px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border); cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.rast-os-item:hover { border-color: var(--cyan); transform: translateX(-2px); }
.rast-os-item.rast-linha-ativa { border-color: var(--cyan); background: rgba(34, 211, 238, .12); box-shadow: inset 3px 0 0 var(--cyan); }
.rast-os-item-topo { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.rast-os-item-topo b { font-size: .85rem; }
.rast-os-item-status { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.rast-os-item-cliente { margin-top: 4px; font-weight: 700; font-size: .84rem; line-height: 1.25; }
.rast-os-item-sub { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.rast-os-item-tempo { margin-top: 5px; font-size: .78rem; font-weight: 700; color: var(--green); }
.rast-os-item-end { margin-top: 3px; font-size: .7rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1400px) { .rast-painel { grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); } .rast-os-lista { grid-column: 1 / -1; max-height: 320px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }

.rast-os-item-atraso { margin-top: 3px; font-size: .72rem; font-weight: 800; }
.rast-os-item-atraso.grave { animation: rast-pino-texto 1s ease-in-out infinite; }
@keyframes rast-pino-texto { 50% { opacity: .35; } }
.rast-os-chip.atraso { border-color: var(--cor); color: var(--cor); font-weight: 800; }
.rast-os-chip.atraso.grave { animation: rast-pino-texto 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .rast-pino.grave, .rast-os-item-atraso.grave, .rast-os-chip.atraso.grave { animation: none; } }

.rast-os-item-id { display: inline-flex; align-items: center; gap: 7px; }
.rast-os-item-num { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 800; color: #06121c; border: 2px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.5); flex: none; }
.rast-os-item-num.grave { animation: rast-pino-pisca 1s ease-in-out infinite; }

/* Rastreamento: deslocamento por OS e "Ver ordem de servico" */
.rast-os-desloc { position: relative; margin-top: 8px; padding: 6px 10px; border-radius: 10px; font-size: .76rem; font-weight: 700; color: #bae6fd; background: rgba(56, 189, 248, .1); border: 1px solid rgba(56, 189, 248, .3); }
.rast-os-btn.ver { flex: 1; background: rgba(255,255,255,.07); border-color: var(--cor); color: var(--cor); }
.rast-os-item-desloc { margin-top: 4px; font-size: .74rem; font-weight: 700; color: #7dd3fc; }
.rast-os-item-ver { margin-top: 7px; width: 100%; }
.rast-om { width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 60px); overflow-y: auto; }
.rast-om-topo { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 10px; }
.rast-om-linha { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: .88rem; }
.rast-om-linha small { text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 800; font-size: .68rem; padding-top: 3px; }
.rast-om-sub { margin: 14px 0 6px; font-weight: 800; color: var(--cyan); text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; }
.rast-om-relato { white-space: pre-wrap; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border); line-height: 1.5; font-size: .92rem; }

/* Rastreamento: escritorios no mapa */
.rast-escr { width: 30px; height: 30px; display: grid; place-items: center; font-size: 17px; line-height: 1; border-radius: 9px; background: #f59e0b; border: 2px solid #fff; box-shadow: 0 1px 8px rgba(0,0,0,.6); cursor: pointer; }
.rast-os-icone-emoji { display: grid; place-items: center; font-size: 28px; }

.rast-casa { background: #a78bfa; }

/* Rastreamento: legenda do replay sobre o mapa (o que o carro esta fazendo agora) */
.rast-legenda { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 4; min-width: 260px; max-width: min(520px, 62%); padding: 10px 16px; border-radius: 16px; text-align: center;
  background: linear-gradient(160deg, rgba(40, 54, 82, .92), rgba(10, 16, 28, .92)); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 14px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter: blur(10px); color: #e6edf6; animation: rast-os-entra .25s ease both; pointer-events: none; }
.rast-legenda[hidden] { display: none; }
.rast-leg-topo { font-size: .8rem; letter-spacing: .08em; color: var(--cyan); }
.rast-leg-hora { margin-top: 2px; font-size: 1.15rem; }
.rast-leg-lugar { margin-top: 4px; font-size: .85rem; }
.rast-leg-trecho { margin-top: 2px; font-size: .75rem; }
@media (max-width: 900px) { .rast-legenda { max-width: 90%; } }

.rast-leg-stats { margin-top: 6px; font-size: .78rem; color: #cbd5e1; }
.rast-leg-stats + .rast-leg-stats { margin-top: 1px; }
.rast-toast { position: absolute; left: 12px; bottom: 44px; z-index: 5; padding: 10px 16px; border-radius: 14px; font-weight: 800; font-size: .95rem; letter-spacing: .03em; color: #fff; pointer-events: none;
  background: rgba(10, 16, 28, .93); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 12px 34px rgba(0,0,0,.55); animation: rast-os-entra .25s ease both; }
.rast-toast[hidden] { display: none; }
.rast-toast.ligou { border-color: #34d399; box-shadow: 0 0 22px rgba(52, 211, 153, .45); }
.rast-toast.desligou { border-color: #f87171; box-shadow: 0 0 22px rgba(248, 113, 113, .45); }
.rast-ign { width: 22px; height: 22px; display: grid; place-items: center; font-size: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.6); }
.rast-ign.ligou { background: #34d399; }
.rast-ign.desligou { background: #f87171; }

.rast-leg-status { margin-bottom: 4px; font-size: .85rem; font-weight: 700; }
.rast-leg-chip { padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 800; border: 1px solid currentColor; }
.rast-leg-chip.mov { color: #34d399; background: rgba(52, 211, 153, .14); }
.rast-leg-chip.lig { color: #fbbf24; background: rgba(251, 191, 36, .14); }
.rast-leg-chip.des { color: #f87171; background: rgba(248, 113, 113, .14); }

.rast-exc { width: 24px; height: 24px; display: grid; place-items: center; font-size: 14px; font-weight: 900; color: #fff; border-radius: 50%; background: #dc2626; border: 2px solid #fff; box-shadow: 0 1px 8px rgba(220, 38, 38, .8); }
.rast-toast.excesso { border-color: #f59e0b; box-shadow: 0 0 22px rgba(245, 158, 11, .5); color: #fde68a; }

/* Rastreamento: faixa de resumo do dia do tecnico */
.rast-kpis { padding: 14px 16px; border-radius: 18px; background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); border: 1px solid var(--border); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); animation: rast-os-entra .3s ease both; }
.rast-kpis[hidden] { display: none; }
.rast-kpis-titulo { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .78rem; color: var(--cyan); grid-column: 1 / -1; }
.rast-kpi { padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border); display: grid; gap: 2px; }
.rast-kpi small { text-transform: uppercase; letter-spacing: .08em; font-size: .62rem; color: var(--muted); font-weight: 800; }
.rast-kpi b { font-size: 1.15rem; line-height: 1.15; }
.rast-kpi em { font-style: normal; font-size: .72rem; color: var(--muted); }
.rast-kpi.ok b { color: #34d399; } .rast-kpi.mov b { color: #38bdf8; } .rast-kpi.lig b { color: #fbbf24; } .rast-kpi.des b, .rast-kpi.no b { color: #f87171; } .rast-kpi.mid b { color: #7dd3fc; }
.rast-kpi.clicavel { cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.rast-kpi.clicavel:hover { border-color: var(--cyan); transform: translateY(-1px); }

/* Rastreamento: carros ao vivo */
.rast-vivo-chave { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 700; color: var(--text); cursor: pointer; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; }
.rast-vivo { display: grid; justify-items: center; gap: 1px; cursor: pointer; }
.rast-vivo span { width: 32px; height: 32px; display: grid; place-items: center; font-size: 18px; border-radius: 50%; background: #475569; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.6); }
.rast-vivo small { font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 8px; background: rgba(8, 14, 24, .88); color: #fff; white-space: nowrap; }
.rast-vivo.movimento span { background: #16a34a; }
.rast-vivo.parado span { background: #d97706; }
.rast-vivo.desligado span { background: #64748b; }
.rast-os-item-ver + .rast-os-item-ver { margin-top: 5px; }
.rast-perto small { font-size: .8rem; color: var(--cyan); }

.rast-kpis-titulo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rast-kpis-foco { font-weight: 700; text-transform: none; letter-spacing: 0; color: #fbbf24; font-size: .8rem; }
.rast-kpi.ativa { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), 0 0 18px rgba(34, 211, 238, .25); background: rgba(34, 211, 238, .08); }

.rast-tec.fora-de-uso { opacity: .6; }
.rast-tec.fora-de-uso .pill { display: block; margin-top: 4px; font-size: .68rem; white-space: normal; }

/* Rastreamento: barra do topo mais arredondada (botoes, dia, escolher arquivos) */
#rastForm { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#rastForm .text-button, #rastForm .rast-vivo-chave { border-radius: 999px; padding: 9px 20px; }
#rastForm select { border-radius: 999px; padding: 9px 18px; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); }
#rastForm input[type="file"] { border-radius: 999px; color: var(--muted); font-size: .9rem; }
#rastForm input[type="file"]::file-selector-button { border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font-weight: 700; padding: 9px 20px; margin-right: 12px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
#rastForm input[type="file"]::file-selector-button:hover { border-color: var(--cyan); background: rgba(34, 211, 238, .1); }
#rastStatus:empty { display: none; }

.rast-leg-relogio { font-size: 1.7rem; line-height: 1.1; margin-bottom: 4px; color: #fff; letter-spacing: .02em; }
.rast-leg-relogio b { font-weight: 800; text-shadow: 0 0 14px rgba(34, 211, 238, .55); }
.rast-leg-relogio small { font-size: .8rem; color: #94a3b8; font-weight: 700; }

/* Rastreamento: OS nao agendadas (fila) */
.rast-pino.fila { background: #94a3b8; border: 2px dashed #fff; opacity: .92; width: 20px; height: 20px; }

/* Rastreamento: trajeto ate a OS em destaque */
.rast-destaque { position: absolute; bottom: 78px; left: 10px; z-index: 4; max-width: min(520px, 70%); padding: 8px 14px; border-radius: 14px; font-size: .82rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: linear-gradient(160deg, rgba(60, 20, 70, .94), rgba(18, 10, 30, .94)); border: 1px solid #ff2bd6; box-shadow: 0 10px 28px rgba(0,0,0,.55), 0 0 18px rgba(255, 43, 214, .35); color: #fff; }
.rast-destaque[hidden] { display: none; }
.rast-destaque b { color: #ffa6f0; }

.rast-legenda { position: absolute; }
.rast-leg-x { position: absolute; top: 6px; right: 8px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #e2e8f0; font-size: 15px; line-height: 1; padding: 0; cursor: pointer; pointer-events: auto; }
.rast-leg-x:hover { background: rgba(255,255,255,.2); }

/* cartoes do mapa arrastaveis pelo cabecalho */
.rast-os-topo { cursor: grab; touch-action: none; user-select: none; }
.rast-os-topo:active { cursor: grabbing; }
.rast-os-fechar { cursor: pointer; }

/* botao Atualizar dentro do mapa (ao lado do tela cheia) */
.rast-mapa-atualiza { position: absolute; top: 10px; right: 64px; z-index: 6; height: 40px; padding: 0 16px; border-radius: 999px; font-weight: 700; cursor: pointer; border: 1px solid rgba(255,255,255,.2); color: #e6edf6; background: rgba(14,22,38,.85); backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.rast-mapa-atualiza:hover { background: rgba(34,211,238,.25); }
.rast-mapa-atualiza:disabled { opacity: .6; cursor: wait; }

#rastBusca { min-width: 240px; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--border); background: rgba(8,14,24,.55); color: var(--text); font: inherit; font-size: .85rem; }
#rastBusca:focus { outline: 2px solid color-mix(in srgb, var(--cyan, #22d3ee) 60%, transparent); }
.rast-os-item-visita { margin-top: 4px; font-size: .74rem; color: #7dd3fc; }

.rast-leg-cores .pl { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--c); margin: 0 5px 0 2px; vertical-align: -1px; border: 1px solid rgba(255,255,255,.5); }

.rast-os-nota.rast-os-feita { color: #6ee7b7; font-weight: 700; }
.rast-os-item-visita { color: #6ee7b7; }

/* clique no nome do cliente copia (Suporte: Atendimentos de Hoje e Todas as OS) */
.cliente-nome { cursor: copy; border-radius: 6px; padding: 1px 3px; margin: -1px -3px; transition: background .15s; }
.cliente-nome:hover { background: color-mix(in srgb, var(--cyan, #22d3ee) 18%, transparent); text-decoration: underline dotted; }
.cliente-nome.copiado { background: color-mix(in srgb, var(--green, #34d399) 35%, transparent); }
.copiado-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); z-index: 99999; max-width: 80vw; padding: 10px 18px; border-radius: 999px; background: rgba(8,14,24,.94); color: #e6edf6; border: 1px solid rgba(52,211,153,.6); box-shadow: 0 10px 30px rgba(0,0,0,.5); font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.copiado-toast.on { opacity: 1; transform: translate(-50%, 0); }

.escala-grade-apoio { display: block; margin-top: 3px; font-size: .68rem; font-weight: 700; color: #7dd3fc; line-height: 1.2; }

/* "Esqueci a senha": codigo em caixinhas (OTP) no cartao de vidro do login */
.otp-painel { max-width: 600px; width: min(600px, 94vw); }
.otp-usuario { display: grid; gap: 4px; margin: 14px 0 10px; font-size: .78rem; text-align: left; opacity: .9; }
.otp-usuario input { padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.28); color: inherit; font: inherit; }
.otp-caixas { position: relative; display: flex; justify-content: center; gap: 10px; margin: 20px 0 10px; min-height: 72px; }
.otp-box { flex: 1 1 0; min-width: 0; max-width: 60px; height: 72px; border-radius: 16px; text-align: center; font-size: 1.9rem; font-weight: 700; color: inherit; border: 1.5px solid rgba(255,255,255,.2); background: rgba(0,0,0,.35); caret-color: #fb923c; outline: none; transition: border-color .15s, box-shadow .15s, transform .15s, opacity .35s; }
.otp-box:focus { border-color: #f97316; box-shadow: 0 0 0 3px rgba(249,115,22,.28), 0 0 18px rgba(249,115,22,.35); transform: translateY(-2px); }
.otp-box.cheia { border-color: rgba(255,255,255,.45); }
.otp-ok { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 18px; display: grid; place-items: center; background: rgba(16,185,129,.18); border: 1.5px solid #34d399; box-shadow: 0 0 22px rgba(52,211,153,.45); animation: otp-entra .45s cubic-bezier(.2,.9,.3,1.3) both; }
.otp-ok[hidden] { display: none; }
.otp-ok svg { width: 44px; height: 44px; fill: none; stroke: #34d399; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: otp-risco .5s ease-out .3s forwards; }
#otp.sucesso .otp-cel { opacity: 0; transform: scale(.4); pointer-events: none; position: absolute; }

#otp.tremer .otp-caixas { animation: otp-treme .4s ease; }
#otp.tremer .otp-box { border-color: #ef4444; }
.otp-reenviar { font-size: .8rem; opacity: .85; margin: 6px 0 0; }
.otp-link { background: none; border: 0; color: #fb923c; font: inherit; font-weight: 700; cursor: pointer; padding: 0; }
.otp-link:disabled { opacity: .5; cursor: default; }
.otp-rodape { margin-top: 14px; font-size: .8rem; text-align: center; }
/* "Voltar ao login" das telas de 2FA / esqueci a senha: botao fantasma em vez de link sublinhado (24/10/2026) */
.link-voltar { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 999px;
  color: inherit; opacity: .85; text-decoration: none; font-weight: 600; font-size: .85rem; letter-spacing: .02em;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent); background: color-mix(in srgb, currentColor 6%, transparent);
  transition: opacity .15s, border-color .15s, background .15s; }
.link-voltar:hover, .link-voltar:focus-visible { opacity: 1; text-decoration: none;
  border-color: color-mix(in srgb, currentColor 70%, transparent); background: color-mix(in srgb, currentColor 12%, transparent); }
.otp-grande-ok { display: grid; place-items: center; margin: 6px 0 12px; }
.otp-grande-ok svg { width: 72px; height: 72px; fill: rgba(16,185,129,.15); stroke: #34d399; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.otp-grande-ok path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: otp-risco .5s ease-out .2s forwards; }
@keyframes otp-risco { to { stroke-dashoffset: 0; } }
@keyframes otp-entra { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
@keyframes otp-pulsa { 50% { box-shadow: 0 0 14px rgba(52,211,153,.55); } }
@keyframes otp-treme { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
@media (max-width: 560px) { .otp-box { height: 54px; font-size: 1.3rem; border-radius: 12px; } .otp-caixas { gap: 5px; min-height: 54px; } .otp-ok { width: 56px; height: 56px; } }
@media (prefers-reduced-motion: reduce) { .otp-box, .otp-ok, .otp-ok svg, .otp-grande-ok path, #otp.tremer .otp-caixas, #otp.verificando .otp-box { animation: none !important; transition: none !important; } .otp-ok svg, .otp-grande-ok path { stroke-dashoffset: 0; } }

/* OTP v2: coluna larga e centralizada, icone, grupos de 4, brilho */
.otp-shell { width: min(680px, calc(100% - 32px)); }
.otp-painel { max-width: none; width: 100%; padding: 38px 40px 30px !important; text-align: center; }
.otp-painel h1 { text-transform: none !important; letter-spacing: .01em; font-size: 1.7rem; margin: 6px 0 8px; }
.otp-painel p { max-width: 520px; margin-left: auto; margin-right: auto; }
.otp-icone { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(145deg, rgba(249,115,22,.30), rgba(236,72,153,.22)); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 8px 28px rgba(249,115,22,.28), inset 0 1px 0 rgba(255,255,255,.25); }
.otp-icone svg { width: 36px; height: 36px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.otp-usuario { max-width: 360px; margin: 18px auto 6px !important; text-align: left; }
.otp-caixas { gap: 10px !important; margin: 24px 0 10px !important; min-height: 84px !important; align-items: center; }
.otp-box { max-width: 64px !important; height: 84px !important; font-size: 2.2rem !important; border-radius: 18px !important; background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(0,0,0,.35)) !important; border-width: 2px !important; }
.otp-box.cheia { background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(0,0,0,.30)) !important; }
.otp-box:focus { transform: translateY(-3px) scale(1.04) !important; box-shadow: 0 0 0 4px rgba(249,115,22,.25), 0 10px 28px rgba(249,115,22,.45) !important; }
.otp-sep { flex: 0 0 18px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.35); margin: 0 4px; }
.otp-ok { width: 84px !important; height: 84px !important; border-radius: 22px !important; }
.otp-ok::after { content: ""; position: absolute; inset: -6px; border-radius: 26px; border: 2px solid rgba(52,211,153,.55); animation: otp-anel 1.2s ease-out .4s 2; }
.otp-ok svg { width: 52px !important; height: 52px !important; }
.otp-reenviar { margin-top: 12px !important; }
@keyframes otp-anel { from { opacity: .9; transform: scale(.9); } to { opacity: 0; transform: scale(1.35); } }
@media (max-width: 640px) { .otp-painel { padding: 28px 18px 22px !important; } .otp-caixas { gap: 5px !important; min-height: 60px !important; } .otp-box { height: 60px !important; font-size: 1.5rem !important; border-radius: 12px !important; } .otp-sep { flex-basis: 10px; margin: 0 1px; } .otp-ok { width: 60px !important; height: 60px !important; } .otp-ok svg { width: 36px !important; height: 36px !important; } }
@media (prefers-reduced-motion: reduce) { .otp-ok::after { animation: none; } }

.login-body.login-glass .login-shell.otp-shell { width: min(680px, calc(100% - 32px)); max-width: none; }
.login-body.login-glass .otp-painel { width: 100%; max-width: none; }
/* paginas do link e do pedido: mesmo cartao de vidro do OTP */
.otp-form { max-width: 420px; margin: 18px auto 0; text-align: left; }
.otp-icone-ok { background: linear-gradient(145deg, rgba(16,185,129,.30), rgba(34,211,238,.18)) !important; box-shadow: 0 8px 28px rgba(16,185,129,.28), inset 0 1px 0 rgba(255,255,255,.25) !important; }
.otp-icone-aviso { background: linear-gradient(145deg, rgba(239,68,68,.30), rgba(249,115,22,.20)) !important; box-shadow: 0 8px 28px rgba(239,68,68,.28), inset 0 1px 0 rgba(255,255,255,.25) !important; }
.otp-painel .form-error { max-width: 420px; margin-left: auto; margin-right: auto; }

/* lista de requisitos da senha (marca enquanto digita) */
.regras-senha { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; margin: 14px 0 6px; padding: 14px 16px; border-radius: 14px; text-align: left; font-size: .8rem; background: rgba(0,0,0,.30); border: 1px solid rgba(255,255,255,.12); }
.regras-senha b { display: block; margin-bottom: 6px; font-size: .78rem; opacity: .95; }
.regras-senha ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.regras-senha li { display: flex; align-items: flex-start; gap: 7px; opacity: .9; transition: color .15s, opacity .15s; }
.regras-senha li svg { width: 15px; height: 15px; flex: none; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.regras-senha li[data-estado="neutro"] { color: #94a3b8; }
.regras-senha li[data-estado="ok"] { color: #34d399; opacity: 1; }
.regras-senha li[data-estado="ruim"] { color: #f87171; opacity: 1; }
.otp-form button:disabled, .otp-painel button[type="submit"]:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
@media (max-width: 560px) { .regras-senha { grid-template-columns: 1fr; } }
.otp-form label, #otpSenhaForm label { text-align: left; }
.regras-senha li[data-estado="ok"] svg, .regras-senha li[data-estado="ruim"] svg { stroke-width: 1.7; }

/* OTP neon: celula com anel girando (verificando) -> caixas se juntam (juntando) -> caixa verde (sucesso) */
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.otp-cel { position: relative; flex: 1 1 0; min-width: 0; max-width: 64px; transition: transform .8s cubic-bezier(.6, 0, .2, 1), opacity .35s; }
.otp-cel .otp-box { width: 100%; max-width: none !important; }
.otp-cel::before { content: ""; position: absolute; inset: -3px; border-radius: 21px; opacity: 0; z-index: 0; pointer-events: none;
  background: conic-gradient(from var(--ang), #ff3b30, #ff9500 25%, rgba(255,59,48,0) 55%, #ff3b30); filter: drop-shadow(0 0 8px rgba(255,59,48,.85)); }
.otp-cel .otp-box { position: relative; z-index: 1; }
#otp.verificando .otp-cel::before, #otp.juntando .otp-cel::before { opacity: 1; animation: otp-gira 1.1s linear infinite; }
#otp.verificando .otp-box { background: #0b0f17 !important; border-color: transparent !important; box-shadow: none !important; transform: none !important; animation: none !important; }
#otp.juntando .otp-cel { transform: translateX(var(--dx, 0px)) rotate(var(--rot, 0deg)) scale(.82); }
#otp.juntando .otp-sep { opacity: 0; transition: opacity .3s; }
#otp.juntando .otp-box { color: transparent; }
@keyframes otp-gira { to { --ang: 360deg; } }
#otp.sucesso .otp-cel::before { opacity: 0; }
.otp-painel.sucesso-glow { box-shadow: 0 0 80px rgba(16,185,129,.18) inset; }
@media (prefers-reduced-motion: reduce) { .otp-cel::before, #otp.verificando .otp-cel::before { animation: none !important; } .otp-cel { transition: none; } }

/* Pedidos: status que mudou e o solicitante ainda nao viu */
.pill.pedido-status-pisca { cursor: pointer; animation: pedido-pisca 1s ease-in-out infinite; box-shadow: 0 0 0 2px rgba(251, 191, 36, .55); }
.pedido-mudou-aviso { color: #fbbf24; font-weight: 600; }
@keyframes pedido-pisca { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .pill.pedido-status-pisca { animation: none; } }

/* Pedidos: confirmar (verde) x recusar (vermelho) bem distintos */
.pedido-acao[data-acao="confirmar"], .pedido-acao[data-acao="receber"] { background: rgba(22, 163, 74, .85) !important; border-color: #22c55e !important; color: #fff !important; font-weight: 700; }
.pedido-acao[data-acao="confirmar"]:hover, .pedido-acao[data-acao="receber"]:hover { background: #16a34a !important; }
.pedido-recusar-toggle { background: rgba(220, 38, 38, .85) !important; border-color: #ef4444 !important; color: #fff !important; font-weight: 700; }
.pedido-recusar-toggle:hover { background: #dc2626 !important; }

.estoque-metros { color: var(--cyan); font-weight: 600; white-space: nowrap; }

.pedido-motorista { margin: 4px 0; color: var(--text); }
.pedido-motorista small { color: var(--muted); }

/* Aviso do sistema: botao de atalho acima do Ciente */
.aviso-sistema-link { display: block; text-align: center; margin: 0 0 10px; padding: 11px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; background: rgba(22, 163, 74, .9); border: 1px solid #22c55e; color: #fff; }
.aviso-sistema-link:hover { background: #16a34a; }

/* Escritorios: cartoes de vidro (glass) com icone de predio */
.escr-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; padding: 4px 2px 8px; }
.escr-card { --cor: var(--green); position: relative; display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(145deg, color-mix(in srgb, var(--cor) 14%, transparent), rgba(255,255,255,.04) 55%);
  border: 1px solid color-mix(in srgb, var(--cor) 38%, var(--border)); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 8px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; animation: escr-entra .5s ease both; animation-delay: calc(var(--i, 0) * 45ms); }
.escr-card::before { content: ""; position: absolute; inset: -40% -30% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--cor) 30%, transparent), transparent 65%); opacity: .55; pointer-events: none; transition: opacity .3s; }
.escr-card:hover { transform: translateY(-4px); box-shadow: 0 14px 38px rgba(0,0,0,.36), 0 0 0 1px color-mix(in srgb, var(--cor) 55%, transparent); }
.escr-card:hover::before { opacity: .9; }
.escr-card.escr-vazio { --cor: var(--orange); }
.escr-card.escr-negativo { --cor: var(--red); }
.escr-card.aberto { grid-column: 1 / -1; }
.escr-topo { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; cursor: pointer; position: relative; z-index: 1; }
.escr-topo:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 12px; }
.escr-icone { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 15px; background: color-mix(in srgb, var(--cor) 20%, rgba(255,255,255,.05)); border: 1px solid color-mix(in srgb, var(--cor) 45%, transparent); transition: transform .3s; }
.escr-card:hover .escr-icone { transform: rotate(-6deg) scale(1.07); }
.escr-svg { width: 34px; height: 34px; fill: none; stroke: var(--cor); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cor) 60%, transparent)); }
.escr-titulo { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.escr-titulo strong { font-size: 1.05rem; font-weight: 800; letter-spacing: .01em; color: var(--text); }
.escr-titulo small { color: var(--muted); font-size: .7rem; font-weight: 600; }
.escr-chip { flex: none; padding: 4px 10px; border-radius: 999px; font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--cor); background: color-mix(in srgb, var(--cor) 16%, transparent); border: 1px solid color-mix(in srgb, var(--cor) 45%, transparent); }
.escr-saldo { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; }
.escr-saldo-rotulo { color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.escr-saldo-valor { font-size: 2.3rem; line-height: 1.05; font-weight: 800; color: var(--cor); text-shadow: 0 0 22px color-mix(in srgb, var(--cor) 45%, transparent); font-variant-numeric: tabular-nums; }
.escr-numeros { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.escr-numeros > div { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); }
.escr-numeros span { color: var(--muted); font-size: .6rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; line-height: 1.2; }
.escr-numeros b { font-size: 1.05rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.escr-detalhe { position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,.1); padding-top: 12px; }
.escr-detalhe[hidden] { display: none; }
@keyframes escr-entra { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .escr-card, .escr-card:hover, .escr-card:hover .escr-icone { animation: none; transition: none; transform: none; } }

/* Saida para tecnico: varios materiais */
.saida-itens { display: flex; flex-direction: column; gap: 10px; }
.saida-item { display: grid; grid-template-columns: 1.4fr 1.2fr .6fr auto; gap: 10px; align-items: end; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.saida-item label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.saida-item .saida-remover { align-self: end; height: 40px; }
.saida-max { color: var(--muted); font-weight: 600; }
@media (max-width: 760px) { .saida-item { grid-template-columns: 1fr; } }

/* Saida para tecnico: layout do formulario com varias linhas */
#modalSaidaTecnico .modal-caixa { width: min(700px, 94vw); max-width: 94vw; }
#formSaidaTecnico > label, #formSaidaTecnico .saida-itens, #formSaidaTecnico #saidaAdicionarItem, #formSaidaTecnico .form-actions { grid-column: 1 / -1; }
#formSaidaTecnico .saida-item { grid-template-columns: 1fr 1fr; position: relative; padding-right: 44px; }
#formSaidaTecnico .saida-item > label:first-child { grid-column: 1 / -1; }
#formSaidaTecnico .saida-item .saida-remover { position: absolute; top: 8px; right: 8px; height: 30px; width: 30px; padding: 0; }
@media (max-width: 760px) { #formSaidaTecnico .saida-item { grid-template-columns: 1fr; } }

/* Estoque minimo: alerta no topo e no cartao */
.escr-alerta { margin: 0 0 14px; padding: 12px 16px; border-radius: 14px; background: rgba(239, 68, 68, .12); border: 1px solid rgba(239, 68, 68, .55); color: var(--text); }
.escr-alerta[hidden] { display: none; }
.escr-alerta strong { color: #fca5a5; }
.escr-alerta ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 3px; font-size: .84rem; }
.escr-card.escr-falta { border-color: rgba(239, 68, 68, .65); animation: escr-entra .5s ease both, escr-falta-brilha 2.2s ease-in-out infinite; }
.escr-faltas { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; border-radius: 12px; background: rgba(239, 68, 68, .14); border: 1px solid rgba(239, 68, 68, .45); font-size: .78rem; }
.escr-faltas b { color: #fca5a5; letter-spacing: .03em; text-transform: uppercase; font-size: .66rem; }
.escr-faltas strong { color: #fca5a5; }
@keyframes escr-falta-brilha { 0%, 100% { box-shadow: 0 8px 30px rgba(0,0,0,.28), 0 0 0 0 rgba(239,68,68,0); } 50% { box-shadow: 0 8px 30px rgba(0,0,0,.28), 0 0 18px 2px rgba(239,68,68,.45); } }
@media (prefers-reduced-motion: reduce) { .escr-card.escr-falta { animation: none; } }
.minimos-linhas { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.minimo-linha { display: grid; grid-template-columns: 1fr 120px auto; gap: 8px; align-items: center; }
#modalMinimos .modal-caixa { width: min(640px, 94vw); }
#formMinimos > * { grid-column: 1 / -1; }

/* Inventario dos tecnicos: movimentacoes editaveis (admin do estoque) */
.tec-movs { margin-top: 14px; }
.tec-movs-tabela { width: 100%; border-collapse: collapse; font-size: .8rem; }
.tec-movs-tabela th { text-align: left; color: var(--muted); font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; padding: 6px 8px; }
.tec-movs-tabela td { padding: 7px 8px; border-top: 1px solid rgba(255,255,255,.07); }
.tec-movs-acoes { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.tec-excluir { border-color: rgba(239, 68, 68, .6); color: #fca5a5; }
.tec-movs { padding: 0 16px 14px; }

/* Registrar movimentacao: varios materiais */
.mov-itens-bloco { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.mov-itens { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.mov-item { display: grid; grid-template-columns: 1.6fr .8fr auto; gap: 10px; align-items: end; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.mov-item label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mov-item .mov-remover { height: 40px; }
.mov-saldo { color: var(--muted); font-weight: 600; }
@media (max-width: 700px) { .mov-item { grid-template-columns: 1fr; } }

.escr-numeros:has(> div:nth-child(4)) { grid-template-columns: repeat(2, 1fr); }

/* Aviso: acesso ao sistema encerra em poucos minutos */
.acesso-horario-faixa { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 9999; padding: 10px 18px; border-radius: 12px; background: #b45309; color: #fff; font-weight: 700; box-shadow: 0 8px 28px rgba(0,0,0,.5); border: 1px solid #fbbf24; max-width: 92vw; text-align: center; }

/* Login: fora do horario de acesso */
.login-horario { text-align: center; padding: 6px 4px 4px; }
.login-horario-titulo { margin: 0 0 8px; font-size: 1.15rem; font-weight: 800; color: #fca5a5; }
.login-horario-msg { margin: 0 0 18px; line-height: 1.55; color: #e2e8f0; }
.login-horario-ok { display: inline-block; min-width: 140px; }
.login-horario-ok { display: inline-flex !important; align-items: center; justify-content: center; height: 42px; padding: 0 22px; text-decoration: none; }

/* ===== Formatos do menu (2026-10-09): barra no topo + lateral recolhida + Ctrl+K ===== */
.cmdk-abrir, .topnav-busca {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--border); background: var(--panel-2, rgba(255,255,255,.04)); color: var(--muted);
  border-radius: 9px; padding: 8px 11px; font: inherit; font-size: .84rem; cursor: pointer;
}
.cmdk-abrir { width: 100%; margin: 0 0 8px; }
.cmdk-abrir:hover, .topnav-busca:hover { border-color: var(--cyan); color: var(--text); }
.cmdk-abrir kbd, .topnav-busca kbd { font: inherit; font-size: .68rem; padding: 1px 6px; border: 1px solid var(--border); border-radius: 5px; opacity: .8; }
nav.menu-acordeao .menu-titulo-recolhivel { cursor: pointer; }
nav.menu-acordeao .menu-titulo-recolhivel:hover { color: var(--cyan); }

/* barra no topo */
html.menu-topo .layout { grid-template-rows: auto 1fr; }
html.menu-topo nav.menu, html.menu-topo .modo-menu-wrap:not(.menu-layout-wrap) { display: none; }
html.menu-topo .layout > .lateral { top: var(--topnav-h, 52px); height: calc(100vh - var(--topnav-h, 52px)); }
.topnav {
  grid-column: 1 / -1; position: sticky; top: 0; z-index: 70;
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  background: var(--panel); border-bottom: 1px solid var(--border); box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.topnav-marca { display: flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: .05em; color: var(--text); text-decoration: none; padding-right: 8px; }
.topnav-marca img { width: 28px; height: 28px; object-fit: contain; }
.topnav-cats { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.topnav-cat { position: relative; }
.topnav-btn {
  display: flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--muted);
  font: inherit; font-size: .9rem; font-weight: 600; padding: 8px 12px; border-radius: 8px; cursor: pointer;
  border-bottom: 2px solid transparent;
}
.topnav-btn:hover, .topnav-cat.aberto > .topnav-btn { background: rgba(59,130,246,.12); color: var(--text); }
.topnav-btn.ativa { color: var(--text); border-bottom-color: var(--cyan); }
.topnav-seta { font-style: normal; font-size: .7rem; opacity: .7; }
.topnav-btn.tem-correio::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red, #ef4444);
  animation: correio-pisca 1.1s ease-in-out infinite;
}
.topnav-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 75; display: flex; gap: 6px; align-items: flex-start;
  min-width: 230px; padding: 10px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 14px 36px rgba(0,0,0,.45);
}
.topnav-panel[hidden] { display: none; }
.topnav-sec { min-width: 220px; display: flex; flex-direction: column; gap: 2px; }
.topnav-sec + .topnav-sec { border-left: 1px solid var(--border); padding-left: 8px; }
.topnav-sec-titulo { margin: 2px 8px 4px; font-size: .6rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.topnav .menu-grupo, .topnav .menu-grupo[hidden] { display: flex; flex-direction: column; gap: 2px; }
.topnav .item { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .topnav-btn.tem-correio::after { animation: none; } }
@media (max-width: 980px) {
  html.menu-topo .layout > .lateral { top: 0; height: auto; }
  .topnav { position: static; flex-wrap: wrap; }
  .topnav-panel { position: fixed; left: 8px !important; right: 8px; top: auto; flex-direction: column; max-height: 70vh; overflow-y: auto; }
}

/* paleta Ctrl+K */
.cmdk-fundo { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: flex-start; justify-content: center; padding-top: 14vh; background: rgba(2,6,15,.6); backdrop-filter: blur(3px); }
.cmdk-fundo[hidden] { display: none; }
.cmdk { width: min(620px, calc(100vw - 24px)); background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.55); overflow: hidden; }
.cmdk-campo { width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; font-size: 1.05rem; padding: 16px 18px; outline: none; }
.cmdk-lista { max-height: 52vh; overflow-y: auto; padding: 6px; }
.cmdk-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px; color: var(--text); text-decoration: none; }
.cmdk-item.ativo { background: rgba(59,130,246,.2); outline: 1px solid var(--cyan); outline-offset: -1px; }
.cmdk-ic { width: 22px; text-align: center; }
.cmdk-tx { flex: 1 1 auto; font-weight: 600; }
.cmdk-item small { color: var(--muted); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.cmdk-vazio { padding: 22px; text-align: center; color: var(--muted); }
.cmdk-dica { padding: 8px 14px; border-top: 1px solid var(--border); color: var(--muted); font-size: .72rem; }
/* barra no topo + lateral oculta: o botao ☰ que devolve a lateral ficava por baixo da barra */
html.menu-topo .lateral-mostrar { z-index: 80; top: calc((var(--topnav-h, 52px) - 38px) / 2); left: 10px; }
html.menu-topo.lateral-oculta .topnav { padding-left: 60px; }
/* lista de requisitos da senha dentro do cartao estreito do perfil: uma coluna so */
.regras-senha-perfil { grid-template-columns: 1fr; margin: 6px 0; }
.kpi-delta { display: block; margin-top: 4px; font-size: .78rem; font-weight: 700; color: var(--muted); }
.kpi-delta.sobe { color: #34d399; }
.kpi-delta.desce { color: #f87171; }
/* Cadastro Marcao */
.marcao-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 16px; align-items: end; }
.marcao-form .form-actions, .marcao-form .table-footnote, .marcao-form .filter-hint { grid-column: 1 / -1; }
.marcao-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 7px; border: 1px solid var(--border); margin-right: 4px; vertical-align: middle; }
.marcao-form input[type="file"] { padding: 6px 8px; border-radius: 12px; }
.marcao-form input[type="file"]::file-selector-button {
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 16px; margin-right: 10px;
  background: var(--panel-2, rgba(255,255,255,.08)); color: var(--text); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.marcao-form input[type="file"]::file-selector-button:hover { border-color: var(--cyan); color: var(--cyan); }
/* campo de fotos mais largo: o texto "Nenhum arquivo escolhido" aparecia cortado ("Nen...olhido") */
.marcao-form #mcFotosWrap { grid-column: span 2; }
.marcao-form input[type="file"] { width: 100%; box-sizing: border-box; font-size: .85rem; color: var(--muted); }
@media (max-width: 700px) { .marcao-form #mcFotosWrap { grid-column: 1 / -1; } }

/* Modo continuo com o player minimizado: bem menos espaco reservado no fim da lateral */
html.em-moldura.moldura-min .rodape-lateral { padding-bottom: 150px; }

/* Penumbra: menus com cor por categoria (em vez de tudo cinza) */
.topnav-cat[data-cat="suporte"], .topnav-cat[data-cat="voce"], .topnav-cat[data-cat="inicio"] { --cat: var(--blue); }
.topnav-cat[data-cat="rede"] { --cat: var(--cyan); }
.topnav-cat[data-cat="comercial"] { --cat: var(--green); }
.topnav-cat[data-cat="estoque"] { --cat: var(--orange); }
.topnav-cat[data-cat="financeiro"] { --cat: var(--purple); }
.topnav-cat[data-cat="cancelamento"] { --cat: var(--red); }
.topnav-cat[data-cat="administracao"] { --cat: var(--pink); }
[data-tema="penumbra"] .topnav-btn { color: var(--cat, var(--muted)); }
[data-tema="penumbra"] .topnav-btn:hover, [data-tema="penumbra"] .topnav-cat.aberto > .topnav-btn { background: color-mix(in srgb, var(--cat, var(--blue)) 16%, transparent); color: var(--cat, var(--text)); }
[data-tema="penumbra"] .topnav-btn.ativa { color: var(--cat, var(--text)); border-bottom-color: var(--cat, var(--cyan)); }
[data-tema="penumbra"] .topnav-panel { border-top: 2px solid var(--cat, var(--border)); }
[data-tema="penumbra"] .item { color: var(--text); }
[data-tema="penumbra"] .item:hover { background: color-mix(in srgb, var(--cat, var(--cyan)) 14%, transparent); color: var(--cat, var(--cyan)); }
[data-tema="penumbra"] .item.ativo { background: linear-gradient(90deg, color-mix(in srgb, var(--cat, var(--cyan)) 24%, transparent), transparent); border-left-color: var(--cat, var(--cyan)); color: var(--text); }
[data-tema="penumbra"] .menu-titulo { color: var(--muted); }
.marcao-form .form-actions { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.marcao-filtro-mes { display: flex; flex-direction: column; gap: 4px; margin: 0; }
#mcCliente, #mcCto { text-transform: uppercase; }
.mini-button.marcao-editar { color: var(--green, #22c55e); border-color: color-mix(in srgb, var(--green, #22c55e) 55%, transparent); }
.mini-button.marcao-editar:hover { background: color-mix(in srgb, var(--green, #22c55e) 18%, transparent); }
.mini-button.marcao-excluir { color: var(--red, #ef4444); border-color: color-mix(in srgb, var(--red, #ef4444) 55%, transparent); }
.mini-button.marcao-excluir:hover { background: color-mix(in srgb, var(--red, #ef4444) 18%, transparent); }

/* Rack Estruturada: portal de racks num iframe, ocupando a altura da tela */
.rack-frame { width: 100%; height: calc(100vh - 170px); min-height: 640px; border: 1px solid var(--border); border-radius: 12px; background: #fff; display: block; }

/* Rack Estruturada: o portal de racks abre direto na pagina (sem moldura nem rolagem propria): a altura do iframe acompanha o conteudo (ver rack.html) e so a pagina rola. */
.rack-frame { width: 100%; height: 900px; min-height: 0; border: 0; border-radius: 0; background: transparent; display: block; }
details.opiniao[id]{scroll-margin-top:90px} /* volta pro ticket respondido sem ficar atras da barra do topo */
.rast-limpar{border-color:color-mix(in srgb,var(--red,#ef4444) 55%,transparent)!important;color:var(--red,#ef4444)!important}

/* Rastreamento em tela cheia: mapa ocupa tudo e os menus flutuam dentro dele */
.rast-mapa-cheia { position: absolute; top: 10px; right: 10px; z-index: 7; width: 40px; height: 40px; border-radius: 10px; font-size: 18px; cursor: pointer; border: 1px solid rgba(255,255,255,.2); color: #e6edf6; background: rgba(14,22,38,.85); backdrop-filter: blur(6px); }
.rast-mapa-cheia:hover { background: rgba(34,211,238,.25); }
.rast-painel.cheia { display: block; position: relative; background: var(--bg); padding: 0; gap: 0; }
.rast-painel.cheia .rast-mapa-caixa { position: absolute; inset: 0; min-height: 0; border: 0; border-radius: 0; }
.rast-painel.cheia .rast-lista, .rast-painel.cheia .rast-os-lista {
  position: absolute; top: 64px; bottom: 64px; z-index: 8; overflow-y: auto; max-height: none;
  background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: 12px; padding: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.rast-painel.cheia .rast-lista { left: 10px; width: 250px; }
.rast-painel.cheia .rast-os-lista { right: 10px; width: 340px; display: block; grid-column: auto; }
.rast-painel.cheia.sem-tec .rast-lista, .rast-painel.cheia.sem-os .rast-os-lista { display: none; }
.rast-cheia-barra { position: absolute; top: 10px; left: 10px; right: 60px; z-index: 9; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 12px; background: color-mix(in srgb, var(--panel) 90%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--border); }
.rast-cheia-barra .rast-busca { width: 220px; }
.rast-cheia-bt { border: 1px solid var(--border); background: var(--panel-2); color: var(--text); border-radius: 8px; padding: 6px 10px; cursor: pointer; font: inherit; font-weight: 700; }
.rast-painel.cheia .rast-mapa-atualiza { top: 64px; right: 362px; }
.rast-painel.cheia.sem-os .rast-mapa-atualiza { right: 10px; }
.rast-painel.cheia #rastReplay { position: absolute; left: 270px; right: 360px; bottom: 10px; z-index: 9; margin: 0; }
.rast-painel.cheia.sem-tec #rastReplay { left: 10px; }
.rast-painel.cheia.sem-os #rastReplay { right: 10px; }

/* busca de cliente no MK (cadastro de atendimento) */
.doc-busca { display: flex; gap: 6px; }
.doc-busca input { flex: 1; min-width: 0; }
#cadastroDocInfo { display: block; margin-top: 5px; font-size: .82rem; font-weight: 600; color: var(--cyan); opacity: 1; letter-spacing: .01em; }
#cadastroDocInfo.mk-ok { color: var(--green); } #cadastroDocInfo.mk-erro { color: var(--red); }
#cadastroDocResultado { display: flex; flex-direction: column; gap: 6px; }
.mk-cli { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); font-size: .85rem; }
.mk-cli.inativo { opacity: .65; }
.mk-sit { font-size: .7rem; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--green) 22%, transparent); color: var(--green); }
.mk-cli.inativo .mk-sit { background: color-mix(in srgb, var(--muted) 22%, transparent); color: var(--muted); }
.mk-con { display: inline-block; margin: 4px 6px 0 0; font-size: .75rem; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--border); }
.mk-con.ok { color: var(--green); } .mk-con.aviso { color: var(--orange); } .mk-con.ruim { color: var(--red); font-weight: 700; }

/* Tickets (responder) movido pra barra do topo, ao lado da busca */
.topnav a.topnav-ticket { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--panel-2, rgba(255,255,255,.04)); color: var(--text);
  font-size: .84rem; text-decoration: none; white-space: nowrap; width: auto; }
.topnav a.topnav-ticket:hover { border-color: var(--cyan); }
.topnav a.topnav-ticket + .topnav-busca { margin-left: 0; }

/* Status da conexao do MK no cadastro (lado direito do cartao) */
.mk-cli .mk-dados { flex: 1 1 auto; min-width: 0; }
.mk-status { flex: 0 0 auto; min-width: 210px; max-width: 46%; text-align: right; padding: 6px 12px; border-radius: 10px; border: 1px solid; }
.mk-status small { display: inline; color: var(--muted); }
.mk-status-tit { font-weight: 800; font-size: .95rem; letter-spacing: .02em; text-transform: uppercase; }
.mk-status.ruim { border-color: color-mix(in srgb, var(--red) 55%, transparent); background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }
.mk-status.aviso { border-color: color-mix(in srgb, var(--orange) 55%, transparent); background: color-mix(in srgb, var(--orange) 12%, transparent); color: var(--orange); }
.mk-status.ok { border-color: color-mix(in srgb, var(--green) 45%, transparent); background: color-mix(in srgb, var(--green) 10%, transparent); color: var(--green); }
.mk-status.ruim > small { color: var(--red); opacity: .85; }
.mk-fat { margin-top: 4px; font-size: .8rem; color: var(--text); line-height: 1.5; }
.mk-fat b { color: var(--red); }
.mk-fat-total { margin-top: 2px; font-weight: 800; color: var(--text); }
.mk-cli .mk-con { font-size: .95rem; padding: 5px 12px; margin-top: 8px; border-radius: 8px; }
.mk-cli .mk-con b { font-size: 1.05rem; letter-spacing: .02em; }
.mk-cli .mk-nome { font-size: 1.15rem; }
.mk-cli .mk-end { font-size: .98rem; color: var(--text); opacity: .85; margin-top: 3px; }
.mk-cli .mk-con { font-size: 1.05rem; padding: 6px 14px; }
.mk-cli .mk-con b { font-size: 1.15rem; }
/* Consulta do MK no cadastro: plano, e-mail, boleto e historico */
.mk-bloco { border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); overflow: hidden; }
.mk-bloco + .mk-bloco { margin-top: 8px; }
.mk-bloco .mk-cli { border: 0; border-radius: 0; background: transparent; }
.mk-extra { font-size: .92rem; margin-top: 5px; color: var(--text); }
.mk-extra small { color: var(--muted); }
.mk-boleto { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 6px; font-size: .75rem; font-weight: 700;
  border: 1px solid var(--cyan); color: var(--cyan); text-decoration: none; }
.mk-boleto:hover { background: color-mix(in srgb, var(--cyan) 18%, transparent); }
.mk-hist { border-top: 1px dashed var(--border); padding: 8px 12px 10px; font-size: .86rem; }
.mk-hist-tit { font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cyan); margin-bottom: 4px; }
.mk-hist-tit small { text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 600; }
.mk-hist-lin { padding: 2px 0; color: var(--text); }
.mk-os-sim { color: var(--orange); font-weight: 700; }
.mk-hist-mais summary { cursor: pointer; color: var(--cyan); font-size: .8rem; margin-top: 3px; }
.mk-mac { margin-left: 10px; font-size: .78rem; font-weight: 600; color: var(--muted); font-family: var(--mono, monospace); }
.mk-prox { color: var(--text); }
.mk-prox b { color: var(--cyan); }
.mk-status.ok .mk-fat, .mk-status.aviso .mk-fat { color: var(--text); }
.mk-desbloq { margin: 6px 0 2px; padding: 5px 12px; border-radius: 8px; border: 1px solid var(--green); background: color-mix(in srgb, var(--green) 14%, transparent);
  color: var(--green); font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; }
.mk-desbloq:hover { background: color-mix(in srgb, var(--green) 26%, transparent); }
.mk-desbloq:disabled { opacity: .6; cursor: wait; }
/* Cadastro com consulta do MK: modal mais largo e acoes maiores (2026-10-10) */
.modal-cadastro { width: min(1180px, 100%); }
.mk-status { min-width: 340px; max-width: 54%; padding: 10px 16px; }
.mk-status-tit { font-size: 1.1rem; }
.mk-fat { font-size: .9rem; line-height: 1.9; }
.mk-boleto { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; font-size: .85rem; border-radius: 8px; vertical-align: middle; }
.mk-boleto svg { flex: none; }
.mk-desbloq { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; font-size: .95rem; border-radius: 10px; margin: 8px 0 4px; }
.mk-desbloq svg { flex: none; }
/* Caixa de dialogo em vidro (cadastro / MK) */
.vidro-fundo { position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; padding: 20px;
  background: rgba(2, 8, 16, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: vidroEntra .18s ease-out; }
.vidro-fundo.saindo { opacity: 0; transition: opacity .18s; }
.vidro-caixa { --cor: var(--cyan); width: min(460px, 100%); padding: 26px 26px 20px; border-radius: 20px; text-align: center; color: var(--text);
  background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.18); box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px color-mix(in srgb, var(--cor) 25%, transparent);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); animation: vidroSobe .22s ease-out; }
.vidro-caixa.ok { --cor: var(--green); } .vidro-caixa.erro { --cor: var(--red); } .vidro-caixa.pergunta { --cor: var(--orange); }
.vidro-ico { width: 54px; height: 54px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; font-weight: 900;
  color: var(--cor); border: 2px solid var(--cor); background: color-mix(in srgb, var(--cor) 14%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--cor) 40%, transparent); }
.vidro-caixa h3 { margin: 0 0 8px; font-size: 1.2rem; }
.vidro-caixa p { margin: 0 0 18px; line-height: 1.55; color: var(--text); opacity: .9; }
.vidro-acoes { display: flex; gap: 10px; justify-content: center; }
.vidro-acoes button { min-width: 130px; padding: 10px 18px; border-radius: 12px; font: inherit; font-weight: 800; cursor: pointer; }
.vidro-sim { border: 1px solid var(--cor); background: color-mix(in srgb, var(--cor) 28%, transparent); color: var(--text); }
.vidro-sim:hover { background: color-mix(in srgb, var(--cor) 42%, transparent); }
.vidro-nao { border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: var(--text); }
.vidro-nao:hover { background: rgba(255,255,255,.12); }
@keyframes vidroEntra { from { opacity: 0; } to { opacity: 1; } }
@keyframes vidroSobe { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vidro-fundo, .vidro-caixa { animation: none; } }
.mk-desbloq-regra { display: block; font-size: .72rem; font-weight: 600; opacity: .85; }
.mk-desbloq span { text-align: left; line-height: 1.2; }
/* Botao de desbloqueio: vermelho (bloqueado) -> neon girando (desbloqueando) -> verde (liberado) */
.mk-desbloq { position: relative; isolation: isolate; overflow: hidden; border-color: var(--red); color: var(--red);
  background: color-mix(in srgb, var(--red) 14%, transparent); transition: color .4s, border-color .4s, background .4s, box-shadow .4s; }
.mk-desbloq:hover { background: color-mix(in srgb, var(--red) 24%, transparent); }
.mk-desbloq.desbloqueando { border-color: transparent; color: var(--orange); background: transparent; cursor: wait; opacity: 1; }
.mk-desbloq.desbloqueando::before { content: ""; position: absolute; z-index: -2; left: 50%; top: 50%; width: 260%; aspect-ratio: 1;
  background: conic-gradient(from 0deg, transparent 0 55%, var(--red) 70%, var(--orange) 82%, var(--green) 92%, transparent 100%);
  transform: translate(-50%, -50%); animation: mkNeonGira 1.1s linear infinite; }
.mk-desbloq.desbloqueando::after { content: ""; position: absolute; z-index: -1; inset: 2px; border-radius: 8px; background: var(--panel, #0d1b26); }
.mk-desbloq.desbloqueando svg { animation: mkCadeadoTreme .5s ease-in-out infinite; }
.mk-desbloq.liberado { border-color: var(--green); color: var(--green); background: color-mix(in srgb, var(--green) 18%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--green) 55%, transparent); opacity: 1; cursor: default; }
@keyframes mkNeonGira { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes mkCadeadoTreme { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@media (prefers-reduced-motion: reduce) { .mk-desbloq.desbloqueando::before, .mk-desbloq.desbloqueando svg { animation: none; } }
.mk-cli .copiavel { cursor: copy; border-bottom: 1px dashed currentColor; }
.mk-cli .copiavel:hover { filter: brightness(1.25); }
.mk-cli .copiavel.copiado { color: var(--green); border-bottom-style: solid; }
.mac-card .copiavel { cursor: copy; border-bottom: 1px dashed currentColor; }
.mac-card .copiavel:hover { filter: brightness(1.25); }
.mac-card .copiavel.copiado { color: var(--green); border-bottom-style: solid; }
.mk-confianca { margin: 6px 0 2px; padding: 6px 10px; border-radius: 8px; text-align: left; font-size: .86rem; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--green) 45%, transparent); background: color-mix(in srgb, var(--green) 10%, transparent); }
.mk-confianca b { color: var(--green); }
.mk-confianca small { color: var(--muted); }
.mk-cli { align-items: flex-start; }
/* Selo do estado da conexao embaixo dos dados do cliente */
.mk-bloco .mk-cli { align-items: stretch; }
.mk-cli .mk-dados { display: flex; flex-direction: column; align-items: flex-start; }
.mk-selo { margin-top: auto; padding: 10px 18px; border-radius: 12px; border: 1px solid; font-weight: 900; font-size: 1.15rem;
  letter-spacing: .03em; text-transform: uppercase; display: inline-flex; flex-direction: column; gap: 2px; }
.mk-cli .mk-dados > .mk-selo { margin-top: 14px; }
.mk-selo small { font-size: .78rem; font-weight: 700; text-transform: none; letter-spacing: 0; opacity: .9; }
.mk-selo.ruim { color: var(--red); border-color: color-mix(in srgb, var(--red) 55%, transparent); background: color-mix(in srgb, var(--red) 14%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--red) 25%, transparent); }
.mk-selo.aviso { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 55%, transparent); background: color-mix(in srgb, var(--orange) 14%, transparent); }
.mk-selo.ok { color: var(--green); border-color: color-mix(in srgb, var(--green) 50%, transparent); background: color-mix(in srgb, var(--green) 12%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--green) 22%, transparent); }
/* Botao de desbloqueio maior, ocupando a largura do quadro */
.mk-status .mk-desbloq { display: flex; width: 100%; justify-content: center; padding: 14px 22px; font-size: 1.12rem; border-radius: 12px; margin: 2px 0 10px; }
.mk-status .mk-desbloq svg { width: 26px; height: 26px; }
.mk-status .mk-desbloq .mk-desbloq-regra { font-size: .8rem; }
.mk-desbloq.desbloqueando::after { border-radius: 10px; }
.vidro-caixa p { white-space: pre-line; }
/* Aura girando no botao de desbloqueio parado (chama atencao pra que ele existe) */
.mk-desbloq:not(.desbloqueando):not(.liberado) { border-color: transparent; background: transparent;
  box-shadow: 0 0 18px color-mix(in srgb, var(--red) 35%, transparent); animation: mkAuraPulsa 2.4s ease-in-out infinite; }
.mk-desbloq:not(.desbloqueando):not(.liberado)::before { content: ""; position: absolute; z-index: -2; left: 50%; top: 50%; width: 260%; aspect-ratio: 1;
  background: conic-gradient(from 0deg, transparent 0 60%, var(--red) 78%, #ffb4b4 86%, var(--red) 94%, transparent 100%);
  transform: translate(-50%, -50%); animation: mkNeonGira 2.6s linear infinite; }
.mk-desbloq:not(.desbloqueando):not(.liberado)::after { content: ""; position: absolute; z-index: -1; inset: 2px; border-radius: 10px;
  background: linear-gradient(color-mix(in srgb, var(--red) 16%, transparent), color-mix(in srgb, var(--red) 16%, transparent)), var(--panel, #0d1b26); }
.mk-desbloq:not(.desbloqueando):not(.liberado):hover::after { background: linear-gradient(color-mix(in srgb, var(--red) 28%, transparent), color-mix(in srgb, var(--red) 28%, transparent)), var(--panel, #0d1b26); }
@keyframes mkAuraPulsa { 0%, 100% { box-shadow: 0 0 10px color-mix(in srgb, var(--red) 25%, transparent); } 50% { box-shadow: 0 0 26px color-mix(in srgb, var(--red) 55%, transparent); } }
@media (prefers-reduced-motion: reduce) { .mk-desbloq::before, .mk-desbloq { animation: none !important; } }
/* Aviso de desbloqueio de confianca maior */
.mk-confianca { padding: 12px 16px; font-size: 1.08rem; line-height: 1.5; border-radius: 12px; margin: 2px 0 10px;
  box-shadow: 0 0 14px color-mix(in srgb, var(--green) 22%, transparent); }
.mk-confianca b { font-size: 1.15rem; }
.mk-confianca small { font-size: .85rem; }
/* OS em aberto no MK (cartao do cadastro) */
.mk-os-bloco { border-top: 1px dashed var(--border); padding: 10px 12px; }
.mk-os { margin-top: 6px; padding: 9px 12px; border-radius: 10px; border: 1px solid; }
.mk-os.agendada { border-color: color-mix(in srgb, var(--orange) 55%, transparent); background: color-mix(in srgb, var(--orange) 12%, transparent); }
.mk-os.aberta { border-color: color-mix(in srgb, var(--cyan) 45%, transparent); background: color-mix(in srgb, var(--cyan) 9%, transparent); }
.mk-os-topo { font-size: 1.02rem; color: var(--text); }
.mk-os.agendada .mk-os-topo b { color: var(--orange); }
.mk-os.aberta .mk-os-topo b { color: var(--cyan); }
.mk-os-det { font-size: .84rem; color: var(--muted); margin-top: 3px; }
.mk-os-det b { color: var(--text); }
.mk-os .copiavel { cursor: copy; border-bottom: 1px dashed currentColor; color: var(--text); }
/* Busca de cliente por nome no MK (lista abaixo do campo Cliente) */
.mk-nome-pop { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; margin-top: 4px; max-height: 320px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 12px; background: var(--panel, #0d1b26); box-shadow: 0 14px 34px rgba(0,0,0,.45); padding: 6px; }
.mk-nome-tit { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--cyan); padding: 4px 8px 6px; }
.mk-nome-op { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.mk-nome-op:hover { background: color-mix(in srgb, var(--cyan) 14%, transparent); }
.mk-nome-op small { display: block; color: var(--muted); font-size: .8rem; margin-top: 1px; }
.mk-nome-op.inativo { opacity: .6; }
.mk-nome-inat { font-size: .68rem; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 25%, transparent); color: var(--muted); }
.mk-nome-msg { padding: 8px 10px; color: var(--muted); font-size: .86rem; } .mk-nome-msg.erro { color: var(--red); }
.mk-nome-tit small { text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 600; }
/* Consulta MK no cadastro da Central */
.mk-info-central { display: block; margin-top: 5px; font-size: .8rem; font-weight: 600; color: var(--cyan); }
.mk-info-central.mk-ok { color: var(--green); } .mk-info-central.mk-erro { color: var(--red); }
.mk-res-central { grid-column: 1 / -1; }
/* Cadastrar Atendimento da Central e do PV: mesma largura do cadastro do Suporte (cabe o cartao do MK) */
#modalCadastroAtendimento .modal-caixa { width: min(1180px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; }
/* Desbloqueio ja usado no mes: apagado, sem aura */
.mk-desbloq.usado, .mk-desbloq.usado:hover { animation: none !important; box-shadow: none !important; opacity: .7; cursor: not-allowed;
  border: 1px dashed var(--muted) !important; color: var(--muted) !important; background: transparent !important; }
.mk-desbloq.usado::before, .mk-desbloq.usado::after { display: none !important; }
.mk-fat-resumo { font-weight: 800; color: var(--red); margin-bottom: 2px; }
.mk-fat-mais summary { cursor: pointer; color: var(--cyan); font-size: .82rem; margin: 2px 0; }
.mk-fat-mais[open] summary { margin-bottom: 4px; }
/* Financeiro - Inadimplencia */
.inad-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.inad-filtros h2 { margin-right: 6px; }
.inad-filtros input[type=search] { flex: 1; min-width: 200px; }
.inad-check { display: inline-flex; gap: 6px; align-items: center; font-size: .85rem; color: var(--muted); }
.inad-tabela td.num, .inad-tabela th.num { text-align: right; white-space: nowrap; }
.inad-cod { color: var(--muted); }
.inad-erro { color: var(--red); }
.inad-mais { text-align: center; padding: 6px 0 12px; }
.inad-detalhe td { background: color-mix(in srgb, var(--cyan) 5%, transparent); }
.inad-det { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 6px 4px; }
.inad-fat { padding: 3px 0; }
.inad-det-mk > div { padding: 2px 0; }
.inad-det .copiavel { cursor: copy; border-bottom: 1px dashed currentColor; }
@media (max-width: 900px) { .inad-det { grid-template-columns: 1fr; } }
/* Inadimplencia: botoes e filtros arredondados */
.inad-filtros select, .inad-filtros input[type=search] { border-radius: 999px; padding: 8px 14px; }
#inadAtualizar, #inadBaixar, #inadMais, .inad-tabela .mini-button, .inad-tabela .mk-boleto { border-radius: 999px; padding-left: 14px; padding-right: 14px; }
/* Online agora (sessao PPPoE no MK) */
.mk-online { display: inline-block; margin: 8px 0 0 8px; padding: 5px 12px; border-radius: 999px; font-size: .86rem; font-weight: 700; border: 1px solid; vertical-align: middle; }
.mk-online.on { color: var(--green); border-color: color-mix(in srgb, var(--green) 50%, transparent); background: color-mix(in srgb, var(--green) 12%, transparent); }
.mk-online.off { color: var(--red); border-color: color-mix(in srgb, var(--red) 50%, transparent); background: color-mix(in srgb, var(--red) 12%, transparent); }
.mk-online b { color: var(--text); font-family: var(--mono, monospace); }
.mk-online .copiavel { cursor: copy; border-bottom: 1px dashed currentColor; }
/* Selo da conexao + online/offline lado a lado */
.mk-selo-linha { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-top: auto; padding-top: 14px; }
.mk-cli .mk-dados > .mk-selo-linha .mk-selo, .mk-selo-linha .mk-selo { margin-top: 0; }
.mk-selo-linha .mk-online { margin: 0; display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 12px; font-size: 1.02rem; font-weight: 800; }
.mk-acessar { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 12px; font-weight: 800; font-size: 1.02rem; text-decoration: none;
  color: var(--cyan); border: 1px solid var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, transparent); }
.mk-acessar:hover { background: color-mix(in srgb, var(--cyan) 26%, transparent); }
.pill.mk-mon.on { color: var(--green); border-color: color-mix(in srgb, var(--green) 50%, transparent); background: color-mix(in srgb, var(--green) 12%, transparent); }
.pill.mk-mon.off { color: var(--red); border-color: color-mix(in srgb, var(--red) 50%, transparent); background: color-mix(in srgb, var(--red) 12%, transparent); }
.pill.mk-mon.vigiando { animation: correio-pisca 2s ease-in-out infinite; }
.mk-cel-vazia { color: var(--muted); opacity: .6; }
.mk-ip-txt { font-family: var(--mono, monospace); font-size: .86rem; color: var(--text); margin-left: 6px; white-space: nowrap; }
.mk-ip-cel .mk-ip-txt:first-child { margin-left: 0; }
.mk-ip-cel, .mk-status-cel { white-space: nowrap; }
.mk-quedas { margin-left: 6px; font-size: .75rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; color: var(--orange);
  border: 1px solid color-mix(in srgb, var(--orange) 50%, transparent); background: color-mix(in srgb, var(--orange) 12%, transparent); white-space: nowrap; }
/* Cartao "Clientes que voltaram (IP)" */
.kpi-voltou.clicavel { cursor: pointer; }
.kpi-voltou.clicavel:hover { box-shadow: 0 0 18px color-mix(in srgb, var(--green) 30%, transparent); }
.kpi-voltou.tem-volta strong { color: var(--green); }
.kpi-voltou strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-voltou-caixa { width: min(1100px, 100%); }
/* Cliente voltou e ninguem viu ainda: borda verde piscando no cartao */
.kpi-voltou.voltou-novo { outline: 2px solid var(--green); outline-offset: 2px; animation: kpiVoltouPisca 1.2s ease-in-out infinite; }
@keyframes kpiVoltouPisca { 0%, 100% { outline-color: var(--green); box-shadow: 0 0 22px color-mix(in srgb, var(--green) 55%, transparent); }
  50% { outline-color: transparent; box-shadow: 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .kpi-voltou.voltou-novo { animation: none; } }
.kpi-atualizar { margin-left: 8px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--cyan);
  cursor: pointer; font-size: .9rem; line-height: 1; vertical-align: middle; }
.kpi-atualizar:hover { border-color: var(--cyan); }
.kpi-atualizar.girando { animation: kpiGira .8s linear infinite; }
@keyframes kpiGira { to { transform: rotate(360deg); } }

/* "Ver OS" (OS do cliente no MK) na tabela do Suporte */
.mk-veros { margin-left: 6px; padding: 2px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--cyan) 55%, transparent); background: color-mix(in srgb, var(--cyan) 12%, transparent); color: var(--cyan); font: 600 11px var(--mono, monospace); cursor: pointer; white-space: nowrap; }
.mk-veros:hover { background: color-mix(in srgb, var(--cyan) 25%, transparent); }
.mk-osver-caixa { width: min(820px, 94vw); max-height: 86vh; display: flex; flex-direction: column; }
.mk-osver-corpo { overflow-y: auto; padding-right: 4px; }
.mk-osver-msg { color: var(--muted); margin: 4px 0 10px; }
.mk-osver { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; background: color-mix(in srgb, var(--panel-2) 70%, transparent); }
.mk-osver.aberta { border-color: color-mix(in srgb, var(--orange) 60%, transparent); }
.mk-osver.deste { box-shadow: 0 0 0 1px color-mix(in srgb, var(--cyan) 60%, transparent); }
.mk-osver-topo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mk-osver-det { color: var(--muted); font-size: 12px; margin: 4px 0 6px; }
.mk-osver-lin { margin-top: 4px; }
.mk-osver-lin small { color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: .05em; }
.mk-osver-lin div { white-space: pre-wrap; font-size: 13px; }
.mk-voltou-sub { margin: 14px 0 6px; font-size: 14px; }
.mk-voltou-sub small { color: var(--muted); font-weight: 400; }
#mkOsModal { z-index: 1200; }

/* Faturas do cartao do MK: Pix copia e cola / linha digitavel (mk-pagamento.js) */
.mk-fat-lin { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 3px 0; }
.mk-pag-mini { padding: 2px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--cyan) 50%, transparent); background: color-mix(in srgb, var(--cyan) 10%, transparent); color: var(--cyan); font: 600 11px var(--mono, monospace); cursor: pointer; }
.mk-pag-mini:hover { background: color-mix(in srgb, var(--cyan) 22%, transparent); }
.mk-pag-mini.copiado, .mk-pag-copiar.copiado { border-color: var(--green); color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.mk-pag { margin-top: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent); background: color-mix(in srgb, var(--panel) 55%, transparent); }
.mk-pag-tit { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.mk-pag-lin { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 4px 0; }
.mk-pag-rot { font-size: 12px; font-weight: 700; }
.mk-pag-lin code { font: 12px var(--mono, monospace); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 4px 8px; border-radius: 8px; background: color-mix(in srgb, var(--bg) 60%, transparent); border: 1px solid var(--border); }
.mk-pag-lin.vazio code { color: var(--muted); font-style: italic; }
.mk-pag-copiar { padding: 5px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--cyan) 60%, transparent); background: color-mix(in srgb, var(--cyan) 14%, transparent); color: var(--cyan); font-weight: 700; font-size: 12px; cursor: pointer; white-space: nowrap; }
.mk-pag-copiar:disabled { opacity: .45; cursor: default; }
.mk-online.espera { color: var(--muted); border-style: dashed; animation: mk-espera 1.2s ease-in-out infinite alternate; }
@keyframes mk-espera { from { opacity: .45; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mk-online.espera { animation: none; } }
.mk-status .mk-fat-lin { justify-content: flex-end; }
.mk-status .mk-prox { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; }
.mk-status .mk-prox .mk-fat-lin { margin: 0; }
.mk-status .mk-pag { text-align: left; }
.mk-status .mk-fat-mais summary { cursor: pointer; }
.mk-veros-cartao { margin: 6px 0 2px; padding: 4px 12px; font-size: 12px; }
.os-cel { display: inline-flex; align-items: center; white-space: nowrap; }
.os-cel .mk-veros { margin-left: 6px; }
/* Tela Servidores (Administracao > Seguranca) */
.servidor-st { list-style: none; padding: 0; margin: 6px 0 14px; display: grid; gap: 8px; }
.servidor-st li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--border); padding-bottom: 6px; color: var(--muted); }
.servidor-st b { color: var(--text); text-align: right; }
.servidor-st b.ok { color: var(--green); } .servidor-st b.no { color: var(--red); } .servidor-st b.mid { color: var(--orange); }
.servidor-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.servidor-ajuda { margin: 4px 0 0; padding-left: 18px; color: var(--muted); line-height: 1.7; }
.servidor-ajuda b { color: var(--text); }
/* Usuarios: botao Liberar/Travar do horario de acesso */
.horario-faixa { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.horario-faixa.liberado .horario-txt { text-decoration: line-through; opacity: .6; }
.horario-txt small { display: block; color: var(--muted); font-size: 11px; white-space: nowrap; }
.horario-linha { display: flex; align-items: center; gap: 6px; flex: 1 1 100%; }
.horario-linha b { min-width: 120px; }
/* Tutorial da redundancia (Servidores) */
.tutorial-md { line-height: 1.65; }
.tutorial-md h1 { display: none; }
.tutorial-md h2 { margin: 26px 0 8px; color: var(--cyan); border-left: 3px solid var(--cyan); padding-left: 10px; }
.tutorial-md figure.foto { margin: 10px 0 18px; }
.tutorial-md figure.foto img { max-width: 100%; border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.tutorial-md figure.foto figcaption { font-size: 13px; color: var(--muted); margin-top: 4px; }
.tutorial-md h3 { margin: 16px 0 6px; color: var(--orange); }
.tutorial-md table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.tutorial-md td, .tutorial-md th { border: 1px solid var(--border); padding: 7px 10px; text-align: left; }
.tutorial-md pre { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px; overflow: auto; }
.tutorial-md code { background: color-mix(in srgb, var(--cyan) 12%, transparent); border-radius: 6px; padding: 1px 6px; }
.tutorial-md .sub { margin-left: 28px; color: var(--muted); }
.tutorial-md hr { border: 0; border-top: 1px solid var(--border); margin: 22px 0; }

/* Controle de Estoque (13/10/2026) */
.ctl-abas { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.ctl-aba { cursor: pointer; font: inherit; font-weight: 700; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--panel); color: var(--muted); transition: border-color .15s, color .15s, background .15s; }
.ctl-aba:hover { color: var(--text); border-color: var(--cyan); }
.ctl-aba.ativa { color: var(--text); border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 16%, var(--panel)); box-shadow: 0 0 16px color-mix(in srgb, var(--cyan) 25%, transparent); }
.ctl-painel { display: grid; gap: 14px; }
.ctl-painel[hidden] { display: none; }
.ctl-ajuda { color: var(--muted); font-size: 13px; margin: 0 0 12px; line-height: 1.5; }
.ctl-sub { margin: 18px 0 8px; font-size: 15px; }
.ctl-linha { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 10px; }
.ctl-campo { display: grid; gap: 4px; font-size: 12px; color: var(--muted); min-width: 140px; }
.ctl-campo input, .ctl-campo select, .ctl-campo textarea, .ctl-custo { font: inherit; font-size: 14px; color: var(--text); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.ctl-campo input, .ctl-campo select, .ctl-campo textarea { width: 100%; box-sizing: border-box; }
.ctl-campo textarea { resize: vertical; }
.ctl-cresce { flex: 1 1 260px; }
.ctl-qtd { min-width: 90px; max-width: 120px; }
.ctl-itens { display: grid; gap: 8px; margin-bottom: 8px; }
.ctl-item { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); }
.ctl-item .it-info { font-size: 12px; color: var(--muted); align-self: center; min-width: 160px; }
.ctl-alerta { color: var(--red) !important; font-weight: 700; }
.ctl-invalido { border-color: var(--red) !important; }
.ctl-acoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.ctl-perigo { border-color: color-mix(in srgb, var(--red) 60%, transparent) !important; color: var(--red) !important; }
.ctl-opcoes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ctl-opcao { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-size: 13px; }
.ctl-opcao:has(input:checked) { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 14%, transparent); }
.ctl-os-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; max-height: 280px; overflow: auto; margin-bottom: 10px; }
.ctl-os { text-align: left; cursor: pointer; font: inherit; font-size: 13px; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.ctl-os small { color: var(--muted); }
.ctl-os:hover, .ctl-os.ativo { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, var(--panel-2)); }
.ctl-total { margin-top: 10px; font-size: 15px; }
.ctl-receb { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; background: var(--panel-2); }
.ctl-receb.st-conferido, .ctl-receb.st-nf { border-left: 4px solid var(--orange); }
.ctl-receb.st-lancado { border-left: 4px solid var(--green); opacity: .85; }
.ctl-receb.st-cancelado { opacity: .55; }
.ctl-receb-topo { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 4px; }
.ctl-receb small { color: var(--muted); }
.ctl-receb .table-wrap { margin-top: 8px; }
.ctl-receb input.rc-qnota, .ctl-receb input.rc-unit { width: 100px; font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 4px 6px; }
.ctl-custo { width: 130px; }
.ctl-estornada td { opacity: .5; text-decoration: line-through; }
.ctl-estornada td:nth-child(2) { text-decoration: none; opacity: 1; }
.ctl-pendencias { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--orange) 50%, transparent);
  background: color-mix(in srgb, var(--orange) 12%, transparent); font-size: 14px; }
.ctl-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(2, 8, 14, .6); backdrop-filter: blur(5px); }
.ctl-modal[hidden] { display: none; }
.ctl-modal-caixa { width: min(560px, 92vw); max-height: 86vh; overflow: auto; padding: 22px; border-radius: 18px; border: 1px solid var(--border); background: var(--panel); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.ctl-modal-caixa h3 { margin: 0 0 10px; }
.ctl-modal-caixa ul { padding-left: 18px; }
.ctl-aviso { position: fixed; right: 18px; bottom: 18px; z-index: 70; max-width: 460px; padding: 12px 16px; border-radius: 12px; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.ctl-aviso.ok { background: color-mix(in srgb, var(--green) 22%, var(--panel)); border: 1px solid var(--green); }
.ctl-aviso.erro { background: color-mix(in srgb, var(--red) 22%, var(--panel)); border: 1px solid var(--red); }
/* Serasa so-historico (gabrieli): cartao sozinho no meio da tela */
.serasa-so-historico { max-width: 620px; width: 100%; margin: 12vh auto 0; padding: 28px 32px; text-align: center; justify-content: center; }
.serasa-so-historico h2 { font-size: 22px; }
.serasa-so-historico p { margin-top: 8px; }
/* Temas claros (13/10/2026): o campo FOCADO do cadastro/ticket (.cadastro-campo :focus) tinha fundo escuro fixo e ficava preto
   no Girassol/Flor/Gelo enquanto a pessoa digitava. Aqui ele usa as cores do proprio tema. */
:root[data-tema="girassol"] .cadastro-campo input:focus,
:root[data-tema="girassol"] .cadastro-campo select:focus,
:root[data-tema="girassol"] .cadastro-campo textarea:focus,
:root[data-tema="flor"] .cadastro-campo input:focus,
:root[data-tema="flor"] .cadastro-campo select:focus,
:root[data-tema="flor"] .cadastro-campo textarea:focus,
:root[data-tema="gelo"] .cadastro-campo input:focus,
:root[data-tema="gelo"] .cadastro-campo select:focus,
:root[data-tema="gelo"] .cadastro-campo textarea:focus {
  background: var(--panel);
  color: var(--text);
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent);
}
/* Auto Desbloqueio do Financeiro (13/10/2026) */
.desb-busca { max-width: 900px; }
.desb-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin-top: 10px; max-height: 360px; overflow: auto; }
.desb-cliente { max-width: 1100px; }
.desb-topo { display: flex; flex-wrap: wrap; gap: 30px; margin-bottom: 12px; }
.desb-topo h2 { margin: 2px 0 0; font-size: 1.25rem; }
.desb-rotulo { font-size: .66rem; font-weight: 800; letter-spacing: .14em; color: var(--cyan); }
.desb-faturas { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); display: grid; gap: 8px; }
/* Janela de vidro nos temas claros (13/10/2026): o vidro transparente sobre o fundo escurecido ficava cinza com texto marrom
   apagado. Aqui o vidro vira a cor clara do proprio tema. */
:root[data-tema="girassol"] .vidro-fundo, :root[data-tema="flor"] .vidro-fundo, :root[data-tema="gelo"] .vidro-fundo { background: rgba(60, 45, 10, .28); }
:root[data-tema="girassol"] .vidro-caixa, :root[data-tema="flor"] .vidro-caixa, :root[data-tema="gelo"] .vidro-caixa {
  background: color-mix(in srgb, var(--panel) 92%, transparent); border-color: var(--border);
  box-shadow: 0 24px 60px rgba(0,0,0,.22), 0 0 0 1px color-mix(in srgb, var(--cor) 35%, transparent); }
/* texto da janela de vidro mais forte nos temas claros (13/10/2026: "a escrita do glass ficou fraca") */
:root[data-tema="girassol"] .vidro-caixa, :root[data-tema="flor"] .vidro-caixa, :root[data-tema="gelo"] .vidro-caixa { background: color-mix(in srgb, var(--panel) 98%, transparent); }
:root[data-tema="girassol"] .vidro-caixa h3, :root[data-tema="flor"] .vidro-caixa h3, :root[data-tema="gelo"] .vidro-caixa h3 { color: var(--text); font-weight: 800; font-size: 1.3rem; }
:root[data-tema="girassol"] .vidro-caixa p, :root[data-tema="flor"] .vidro-caixa p, :root[data-tema="gelo"] .vidro-caixa p { color: var(--text); opacity: 1; font-weight: 600; font-size: 1rem; }
:root[data-tema="girassol"] .vidro-caixa .vidro-sim, :root[data-tema="flor"] .vidro-caixa .vidro-sim, :root[data-tema="gelo"] .vidro-caixa .vidro-sim { font-weight: 800; }
/* Rastreamento: OS fechada no MK (13/10/2026) */
.rast-os-item-fechada, .rast-os-fechada { margin-top: 4px; font-size: .78rem; font-weight: 700; color: #38bdf8; }
.rast-os-item-fechada.alerta, .rast-os-fechada.alerta { color: #fb923c; }
/* MAC da ONU (13/10/2026) */
.mac-busca { max-width: 760px; }
.mac-card { max-width: 1000px; }
.mac-grade { display: flex; flex-wrap: wrap; gap: 26px; margin-bottom: 10px; }
.mac-grade b { display: block; margin-top: 2px; font-size: 1.05rem; }
.mac-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.mac-linha code { font-size: 1.15rem; font-weight: 800; }
.ativ-os { max-height: 340px; overflow: auto; }
.ativ-os tbody tr { cursor: pointer; }
.ativ-os tbody tr.ativo td { background: color-mix(in srgb, var(--cyan) 18%, transparent); }
.ativ-cmds { white-space: pre-wrap; font-family: var(--mono, monospace); background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 8px 0; }
.mac-acesso-res { display: grid; gap: 6px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; }
/* MAC da ONU - layout (13/10/2026) */
.mo-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.mo-olt b { display: block; font-size: 1.35rem; margin-top: 2px; }
.mo-rot { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); margin-bottom: 4px; }
.mo-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 14px 0; }
.mo-tile { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.mo-tile.mo-largo { grid-column: span 2; }
.mo-val { display: block; font-size: 1.08rem; font-weight: 800; overflow-wrap: anywhere; }
.mo-sinal.ok { color: var(--green); } .mo-sinal.mid { color: var(--orange); } .mo-sinal.no { color: var(--red); }
.mo-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.mo-barra .mo-rot { margin: 0 6px 0 0; }
.mo-sub { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; }
.mo-sub small { color: var(--muted); font-weight: 600; }
.mo-mac { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-top: 10px; background: color-mix(in srgb, var(--panel-2) 60%, transparent); }
.mo-mac-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mo-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel); color: var(--text); font: 700 .98rem var(--mono, monospace); cursor: copy; }
.mo-chip i { font-style: normal; font: 800 .66rem var(--display, sans-serif); letter-spacing: .1em; color: var(--muted); }
.mo-chip .mo-ico { opacity: .55; font-size: .85rem; }
.mo-chip:hover { border-color: var(--cyan); } .mo-chip:hover .mo-ico { opacity: 1; color: var(--cyan); }
.mo-chip.copiado { border-color: var(--green); color: var(--green); }
.mo-cli { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.mo-cli-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mo-cli-nome { font-size: 1.15rem; font-weight: 800; cursor: copy; }
.mo-cli-nome:hover { color: var(--cyan); } .mo-cli-nome.copiado { color: var(--green); }
.mo-cod { font-size: .8rem; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; }
.mo-cli-dados { display: grid; grid-template-columns: minmax(180px, auto) 1fr; gap: 10px 22px; margin: 10px 0; }
.mo-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.mo-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); font-weight: 700; cursor: pointer; text-decoration: none; }
.mo-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.mo-btn-copia { border-color: color-mix(in srgb, var(--green) 55%, var(--border)); background: color-mix(in srgb, var(--green) 14%, var(--panel-2)); }
.mo-btn-copia.copiado { color: var(--green); }
.mo-btn:disabled { opacity: .5; cursor: wait; }
@media (max-width: 700px) { .mo-tile.mo-largo { grid-column: auto; } .mo-cli-dados { grid-template-columns: 1fr; } }
.mac-card .mo-chip.copiavel { border-bottom: 1px solid var(--border); }
.mac-card .mo-chip.copiavel:hover { border-bottom-color: var(--cyan); }
.mac-card .mo-cli-nome.copiavel { border-bottom: 0; }
.mac-acesso-res { margin-top: 12px; }
.mac-acesso-res small { color: var(--muted); }
.mac-acesso-res .mo-btn { padding: 6px 12px; }
.mac-card .mo-ip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 8px; cursor: copy;
  font: 800 1rem var(--mono, monospace); color: var(--orange); background: color-mix(in srgb, var(--orange) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--orange) 55%, transparent); }
.mac-card .mo-ip .mo-ico { opacity: .6; font-size: .85rem; }
.mac-card .mo-ip:hover { filter: brightness(1.2); }
.mac-card .mo-ip.copiado { color: var(--green); border-color: var(--green); }
.cadastro-onu-aviso { display: block; margin-top: 4px; font-size: .78rem; color: var(--muted); }
.cadastro-onu-aviso[data-tipo="ok"] { color: var(--green); }
.cadastro-onu-aviso[data-tipo="erro"] { color: var(--orange); }
.cadastro-onu-aviso[data-tipo="busca"] { color: var(--cyan); }
.cad-onu-mk { grid-column: 1 / -1; display: grid; gap: 6px; margin: -4px 0 4px; }
.cad-onu-mk-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cad-onu-mk small { color: var(--muted); }
.cad-onu-mk small[data-tipo="ok"] { color: var(--green); } .cad-onu-mk small[data-tipo="erro"] { color: var(--orange); } .cad-onu-mk small[data-tipo="busca"] { color: var(--cyan); }
.cad-onu-mk-lista { display: grid; gap: 4px; max-height: 240px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; padding: 6px; background: var(--panel-2); }
.cad-onu-mk-lista button { text-align: left; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 7px 10px; color: var(--text); cursor: pointer; }
.cad-onu-mk-lista button:hover { border-color: var(--cyan); }
.cad-onu-mk-lista button small { margin-left: 6px; }
.cad-onu-mk-lista button.inativo { opacity: .55; }
.vidro-progresso { min-width: min(440px, 92vw); }
.vidro-progresso .vp-texto { min-height: 1.4em; }
.vp-barra { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--text) 12%, transparent); overflow: hidden; margin: 14px 0 6px; }
.vp-barra span { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .25s linear;
  background: linear-gradient(90deg, var(--cyan), var(--green)); box-shadow: 0 0 12px color-mix(in srgb, var(--cyan) 60%, transparent); }
.vidro-caixa.erro .vp-barra span { background: var(--orange); box-shadow: none; }
.vp-pct { display: block; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.vp-gira { display: inline-block; width: 26px; height: 26px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--cyan) 25%, transparent);
  border-top-color: var(--cyan); animation: vpGira .8s linear infinite; }
@keyframes vpGira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vp-gira { animation: none; } .vp-barra span { transition: none; } }
.pedido-produto3d { width: 100%; min-width: 220px; } .pedido-pedido-como { color: var(--muted); }
/* Pedidos: combo do produto do Estoque 3D na separacao (14/10/2026) - mesma altura das linhas de quantidade */
.estoque-pedidos-tabela .pedido-separar-item, .estoque-pedidos-tabela .pedido-p3d-linha { min-height: 44px; margin-bottom: 6px; }
.pedido-p3d-linha { display: flex; align-items: center; }
.p3d { position: relative; display: flex; align-items: center; width: min(320px, 100%); min-height: 38px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--panel-2); transition: border-color .15s, box-shadow .15s; }
.p3d:hover, .p3d.aberto { border-color: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 18%, transparent); }
.p3d.p3d-ok { border-color: color-mix(in srgb, var(--green) 60%, var(--border)); }
.p3d.p3d-erro { border-color: var(--orange); }
.p3d-ico { padding-left: 10px; font-size: .95rem; opacity: .8; }
.p3d.p3d-ok .p3d-ico { opacity: 1; }
.pedido-produto3d { flex: 1; min-width: 0; padding: 8px 6px 8px 8px; border: 0; outline: 0; background: transparent; color: var(--text);
  font: 700 .86rem var(--display, inherit); letter-spacing: .02em; text-overflow: ellipsis; }
.pedido-produto3d::placeholder { color: var(--muted); font-weight: 500; }
.p3d-seta { align-self: stretch; padding: 0 11px; border: 0; border-left: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; border-radius: 0 10px 10px 0; }
.p3d-seta:hover { color: var(--cyan); }
.p3d.aberto .p3d-seta { color: var(--cyan); transform: none; }
.p3d-lista { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: max(100%, 380px); max-height: 300px; overflow: auto; padding: 6px;
  border-radius: 12px; border: 1px solid color-mix(in srgb, var(--cyan) 40%, var(--border)); background: var(--panel);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45); backdrop-filter: blur(10px); }
.p3d-op { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.p3d-op:hover, .p3d-op.ativo { background: color-mix(in srgb, var(--cyan) 16%, transparent); }
.p3d-nome { font-weight: 700; font-size: .85rem; }
.p3d-info { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.p3d-info small { color: var(--muted); font-size: .72rem; }
.p3d-info b { min-width: 34px; text-align: center; padding: 2px 8px; border-radius: 999px; font-size: .74rem;
  background: color-mix(in srgb, var(--green) 20%, transparent); color: var(--green); }
.p3d-info b.zero { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }
.p3d-vazio { padding: 10px; color: var(--muted); font-size: .85rem; }
.p3d { width: 300px; max-width: 100%; }
.p3d-lista { z-index: 5000; }
.mac-card .p3d, .estoque-pedidos-tabela td .p3d { flex: none; }
.pedido-fotos { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.pedido-foto-chip { display: inline-flex; align-items: center; gap: 2px; }
.pedido-foto-excluir { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 2px 5px; border-radius: 6px; }
.pedido-foto-excluir:hover { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); }
.pedido-enviado-linha { margin-bottom: 3px; }
.pedido-enviado-linha.aceito { color: var(--green); }
.pedido-enviado-linha.aceito b { color: inherit; }
.pedido-enviado-linha.divergente { color: var(--orange); }
.pedido-enviado-linha.divergente b { color: inherit; }
/* Pedidos: material pedido e material enviado no mesmo tamanho, uma linha por item, alinhados lado a lado (14/10/2026) */
.estoque-pedidos-tabela .pedido-linha-item { min-height: 24px; line-height: 24px; font-size: .9rem; white-space: nowrap; margin: 0 0 4px; }
.estoque-pedidos-tabela .pedido-linha-item small { font-size: .75rem; }
.estoque-pedidos-tabela .pedido-linha-item.ja-recebido { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--green); text-decoration-thickness: 2px; }
.estoque-pedidos-tabela .pedido-linha-item.ja-recebido .pedido-ja-recebido { color: var(--green); text-decoration: none; display: inline-block; margin-left: 4px; }
.pedido-enviado-linha.reenvio { color: var(--cyan); } .pedido-enviado-linha.reenvio b { color: inherit; }
.pedido-p3d-linha { gap: 8px; }
.pedido-obs-item { width: 190px; min-height: 38px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2);
  color: var(--text); font: inherit; font-size: .85rem; }
.pedido-obs-item:focus { outline: 0; border-color: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 18%, transparent); }
.pedido-obs-enviado { color: var(--orange); white-space: normal; }
/* Estoque minimo: amarelo quando esta chegando no minimo (14/10/2026) */
.escr-card.escr-perto { border-color: rgba(234, 179, 8, .7); }
.escr-faltas.escr-perto-lista { background: rgba(234, 179, 8, .13); border-color: rgba(234, 179, 8, .5); }
.escr-faltas.escr-perto-lista b, .escr-faltas.escr-perto-lista strong { color: #fde047; }
#escrAlerta .perto { color: #facc15; } #escrAlerta .abaixo { color: #f87171; }
#escrAlerta .escr-legenda { display: block; margin: 2px 0 4px; font-size: .75rem; }
#escrAlerta.so-perto { border-color: rgba(234, 179, 8, .6); background: rgba(234, 179, 8, .1); }
/* Controle de Estoque: campo de material com a lista propria e metade do tamanho + botao Cadastrar produto (14/10/2026) */
.ctl-item .ctl-mat { flex: 0 1 420px; min-width: 260px; }
.ctl-combo { width: 100%; }
.ctl-novo-produto { align-self: flex-end; min-height: 38px; padding: 0 14px; border-radius: 10px; cursor: pointer; font-weight: 700; white-space: nowrap;
  border: 1px dashed color-mix(in srgb, var(--green) 60%, var(--border)); background: color-mix(in srgb, var(--green) 10%, transparent); color: var(--green); }
.ctl-novo-produto:hover { background: color-mix(in srgb, var(--green) 20%, transparent); }
.ctl-novo-form { width: min(620px, 96vw); text-align: left; }
.ctl-novo-form h3 { text-align: left; }
.ctl-novo-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0 14px; }
.ctl-novo-grade .ctl-novo-largo { grid-column: span 2; }
.ctl-novo-grade input, .ctl-novo-grade select { width: 100%; min-height: 36px; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); font: inherit; }
.ctl-novo-grade input:disabled { opacity: .6; }
@media (max-width: 640px) { .ctl-novo-grade { grid-template-columns: 1fr; } .ctl-novo-grade .ctl-novo-largo { grid-column: auto; } }
.ctl-forn-ficha { margin-top: 6px; } .ctl-campo .ctl-forn { margin-top: 4px; }
.ctl-forn-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.ctl-forn-linha .ctl-forn { width: 360px; max-width: 100%; margin: 0; }
.ctl-forn-linha .ctl-forn-ficha { margin: 0; }
/* Cameras (Suporte, 14/10/2026) */
.cam-topo { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.cam-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.cam-card { display: flex; flex-direction: column; gap: 10px; }
.cam-cabeca { display: flex; justify-content: space-between; align-items: center; }
.cam-status { font-size: .78rem; color: var(--muted); } .cam-status.ok { color: var(--green); } .cam-status.erro { color: var(--orange); }
.cam-imagem { padding: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #000; cursor: zoom-in; aspect-ratio: 16 / 9; }
.cam-imagem img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cam-dados { display: flex; flex-wrap: wrap; gap: 14px; font-size: .85rem; color: var(--muted); }
.cam-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.cam-excluir:hover { color: var(--red) !important; border-color: var(--red) !important; }
.cam-ampliada { cursor: zoom-out; }
.cam-ampliada-caixa { display: flex; flex-direction: column; gap: 8px; align-items: center; color: var(--text); }
.cam-ampliada-caixa img { max-width: 94vw; max-height: 84vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.vidro-caixa p { white-space: pre-line; }
.ctl-atualiza-os { margin-left: 8px; min-height: 34px; padding: 0 14px; border-radius: 10px; cursor: pointer; font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--cyan) 55%, var(--border)); background: color-mix(in srgb, var(--cyan) 12%, transparent); color: var(--cyan); }
.ctl-atualiza-os:hover { background: color-mix(in srgb, var(--cyan) 22%, transparent); }
.ctl-atualiza-os:disabled { opacity: .7; cursor: wait; }
#osAtualizadoEm { margin-left: 8px; align-self: center; }
/* Controle de Estoque > Relatorios: periodo rapido e filtros (14/10/2026) */
.rel-periodos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.rel-periodos button { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); cursor: pointer; font-weight: 700; }
.rel-periodos button.ativo { border-color: var(--cyan); color: var(--cyan); background: color-mix(in srgb, var(--cyan) 14%, transparent); }
.rel-filtros { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 12px; margin-top: 10px; align-items: end; }
.rel-filtros select, .rel-filtros input { width: 100%; }
.rel-clicavel { cursor: pointer; } .rel-clicavel:hover td { background: color-mix(in srgb, var(--cyan) 10%, transparent); }
#relFiltrosAviso { color: var(--cyan); }

/* Controle de Estoque - aba Saida em passos + resumo ao lado (14/10/2026) */
.sd-grade { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.sd-passos { display: grid; gap: 14px; }
.sd-cab { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.sd-cab h2 { margin: 0; font-size: 16px; }
.sd-cab small { color: var(--muted); font-size: 12px; }
.sd-num { flex: 0 0 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: var(--bg);
  background: linear-gradient(135deg, var(--cyan), var(--green)); box-shadow: 0 0 14px color-mix(in srgb, var(--cyan) 40%, transparent); }
.sd-passo .ctl-item { background: color-mix(in srgb, var(--panel-2) 85%, transparent); transition: border-color .2s, box-shadow .2s; }
.sd-passo .ctl-item:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 15%, transparent); }
.sd-passo .ctl-item .it-info { padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--cyan) 8%, transparent); }
.sd-passo .ctl-item .it-info:empty { display: none; }
.sd-add { width: 100%; padding: 12px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--cyan) 55%, transparent); background: transparent;
  color: var(--cyan); font: inherit; font-weight: 700; cursor: pointer; transition: background .2s; }
.sd-add:hover { background: color-mix(in srgb, var(--cyan) 10%, transparent); }
.sd-tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sd-tipo { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 14px 16px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 14px; background: var(--panel-2); transition: border-color .2s, background .2s, transform .15s; }
.sd-tipo:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--cyan) 60%, var(--border)); }
.sd-tipo input { position: absolute; opacity: 0; pointer-events: none; }
.sd-tipo-ico { grid-row: span 2; font-size: 26px; }
.sd-tipo small { color: var(--muted); font-size: 12px; }
.sd-tipo:has(input:checked) { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 13%, var(--panel-2)); box-shadow: 0 0 18px color-mix(in srgb, var(--cyan) 22%, transparent); }
.sd-bloco { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); animation: sdEntra .25s ease; }
@keyframes sdEntra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sd-os-topo { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.sd-os-topo .ctl-atualiza-os { margin-left: 0; min-height: 38px; }
.sd-atualizado { display: block; margin: 4px 0 8px; }
.sd-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 8px; margin-bottom: 12px; }
.sd-cat { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer;
  font-size: 13px; font-weight: 600; background: var(--panel-2); transition: border-color .2s, background .2s; }
.sd-cat input { position: absolute; opacity: 0; pointer-events: none; }
.sd-cat span { font-size: 18px; }
.sd-cat:hover { border-color: color-mix(in srgb, var(--cyan) 60%, var(--border)); }
.sd-cat:has(input:checked) { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 14%, var(--panel-2)); }
.sd-func { max-width: 420px; margin-bottom: 4px; }
.sd-resumo { position: sticky; top: 76px; display: grid; gap: 12px; }
.sd-resumo h2 { margin: 0; font-size: 16px; }
.sd-dl { margin: 0; display: grid; gap: 10px; }
.sd-dl > div { padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border); }
.sd-dl dt { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 3px; }
.sd-dl dd { margin: 0; font-size: 14px; }
.sd-dl small { color: var(--muted); }
.sd-pend { color: var(--orange); font-size: 13px; }
.sd-resumo .ctl-total { margin: 0; display: grid; gap: 2px; padding: 14px; border-radius: 14px; text-align: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--green) 16%, transparent), color-mix(in srgb, var(--cyan) 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--green) 45%, transparent); }
.sd-resumo .ctl-total span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.sd-resumo .ctl-total b { font-size: 26px; }
.sd-resumo .ctl-total small { color: var(--orange); font-size: 12px; }
.sd-confirmar { width: 100%; min-height: 46px; font-size: 15px; }
.sd-confirmar:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
@media (max-width: 1100px) { .sd-grade { grid-template-columns: 1fr; } .sd-resumo { position: static; } .sd-tipos { grid-template-columns: 1fr; } }

/* Controle de Estoque - Relatorios no mesmo visual da Saida (14/10/2026) */
.rel-barra { display: grid; gap: 12px; }
.rel-topo { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; justify-content: space-between; }
.rel-topo .rel-periodos { margin: 0; align-self: center; }
.rel-periodos button { transition: border-color .2s, background .2s, transform .15s; }
.rel-periodos button:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--cyan) 60%, var(--border)); }
.rel-periodos button.ativo { box-shadow: 0 0 14px color-mix(in srgb, var(--cyan) 22%, transparent); }
.rel-datas, .rel-baixar { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.rel-datas .ctl-campo { min-width: 140px; }
.rel-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; text-decoration: none; transition: border-color .2s, background .2s; }
.rel-btn:hover { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, var(--panel-2)); }
.rel-pdf { color: var(--bg); border: 0; background: linear-gradient(135deg, var(--cyan), var(--green));
  box-shadow: 0 0 14px color-mix(in srgb, var(--cyan) 35%, transparent); }
.rel-pdf:hover { filter: brightness(1.08); background: linear-gradient(135deg, var(--cyan), var(--green)); }
.rel-limpar { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); align-self: end; }
.rel-filtros-caixa { border: 1px solid var(--border); border-radius: 14px; padding: 10px 14px; background: color-mix(in srgb, var(--panel-2) 70%, transparent); }
.rel-filtros-caixa summary { cursor: pointer; font-weight: 700; font-size: 14px; list-style: none; }
.rel-filtros-caixa summary::-webkit-details-marker { display: none; }
.rel-filtros-caixa summary small { margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-size: 11px; color: var(--bg); background: var(--cyan); }
.rel-filtros-caixa summary small:empty { display: none; }
.rel-filtros-caixa .rel-filtros { animation: sdEntra .25s ease; }
#relFiltrosAviso { margin: 0; padding: 8px 12px; border-radius: 10px; color: var(--cyan); background: color-mix(in srgb, var(--cyan) 8%, transparent); }
.rel-grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rel-grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rel-card h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding-bottom: 10px; font-size: 15px;
  border-bottom: 1px solid color-mix(in srgb, var(--cyan) 25%, var(--border)); }
.rel-card .table-wrap { max-height: 330px; overflow: auto; border-radius: 10px; }
.rel-card .table-wrap.rel-alta { max-height: 460px; }
.rel-card tbody tr { transition: background .15s; }
.rel-card tbody tr:hover { background: color-mix(in srgb, var(--cyan) 7%, transparent); }
.rel-card td:last-child, .rel-card th:last-child { text-align: right; }
.rel-kpis .kpi { transition: transform .15s; }
.rel-kpis .kpi:hover { transform: translateY(-2px); }
@media (max-width: 1200px) { .rel-grade-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .rel-grade-2, .rel-grade-3 { grid-template-columns: 1fr; } }
.sd-passo .ctl-item { position: relative; padding-right: 48px; }
.sd-passo .ctl-item .it-tirar { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; padding: 0; border-radius: 50%; }
.sd-passo .ctl-item .it-tirar:hover { color: var(--red); border-color: var(--red); }
.sd-grade > .sd-resumo { margin-top: 0; position: sticky; }
@media (max-width: 1100px) { .sd-grade > .sd-resumo { position: relative; top: 0; } }
.rel-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 900px) { .rel-kpis { grid-template-columns: 1fr !important; } }

/* Relatorios do Controle de Estoque: filtros com pesquisa e produto com caixinhas (14/10/2026) */
.rf-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 38px; padding: 0 12px;
  border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; font-size: 14px;
  cursor: pointer; text-align: left; transition: border-color .2s, box-shadow .2s; }
.rf-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-btn b { color: var(--muted); font-size: 11px; }
.rf-btn:hover { border-color: color-mix(in srgb, var(--cyan) 60%, var(--border)); }
.rf-btn.ativo { border-color: var(--cyan); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cyan) 18%, transparent); color: var(--cyan); }
.rf-pop { position: fixed; z-index: 90; display: grid; gap: 8px; padding: 10px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--cyan) 45%, var(--border));
  background: color-mix(in srgb, var(--panel) 94%, transparent); backdrop-filter: blur(10px); box-shadow: 0 18px 50px rgba(0,0,0,.5); animation: sdEntra .18s ease; }
.rf-busca { font: inherit; font-size: 14px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); }
.rf-busca:focus { outline: none; border-color: var(--cyan); }
.rf-lista { max-height: 300px; overflow: auto; display: grid; gap: 2px; }
.rf-op { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text);
  font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.rf-op:hover { background: color-mix(in srgb, var(--cyan) 12%, transparent); }
.rf-op.marcado { color: var(--cyan); font-weight: 700; }
.rf-caixa { flex: 0 0 18px; height: 18px; border-radius: 5px; border: 2px solid var(--muted); display: grid; place-items: center; transition: background .15s, border-color .15s; }
.rf-op.marcado .rf-caixa { border-color: var(--cyan); background: var(--cyan); }
.rf-op.marcado .rf-caixa::after { content: "✓"; color: var(--bg); font-size: 12px; font-weight: 900; }
.rf-vazio { padding: 10px; color: var(--muted); font-size: 13px; text-align: center; }
.rf-rodape { display: flex; gap: 8px; align-items: center; padding-top: 8px; border-top: 1px solid var(--border); }
.rf-rodape small { flex: 1; color: var(--muted); font-size: 12px; }
.rf-rodape .rel-btn { min-height: 32px; }
.rf-todos { border-bottom: 1px solid var(--border); border-radius: 8px 8px 0 0; font-weight: 700; margin-bottom: 2px; }
.rel-tipos { display: flex; gap: 6px; align-self: center; }
.rel-tipos button { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  cursor: pointer; font: inherit; font-weight: 700; transition: border-color .2s, background .2s, transform .15s; }
.rel-tipos button:hover { transform: translateY(-1px); }
.rel-tipos button[data-tipo="ENTRADA"].ativo { border-color: var(--green); color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--green) 25%, transparent); }
.rel-tipos button[data-tipo="SAIDA"].ativo { border-color: var(--red); color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--red) 25%, transparent); }
.sd-cats { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.sd-cat { line-height: 1.25; min-height: 48px; }

/* Conferencia de Estoque: Controle de custos (14/10/2026) */
.cd { display: grid; gap: 14px; margin-bottom: 18px; }
.cd-barra { display: grid; gap: 10px; }
.cd-topo { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.cd-titulo { margin: 0; font-size: 18px; align-self: center; }
.cd-topo .rel-periodos { margin: 0; align-self: center; }
.cd-filtros { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.cd-filtros .ctl-campo { min-width: 170px; }
.cd-filtros select { font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); }
.cd-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.cd-kpi { position: relative; display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--panel);
  overflow: hidden; transition: transform .15s; }
.cd-kpi:hover { transform: translateY(-2px); }
.cd-kpi::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--cd-cor, var(--cyan)); }
.cd-kpi span { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cd-kpi strong { font-size: 22px; }
.cd-kpi small { color: var(--muted); font-size: 12px; }
.cd-azul { --cd-cor: var(--blue); } .cd-verde { --cd-cor: var(--green); } .cd-vermelho { --cd-cor: var(--red); }
.cd-laranja { --cd-cor: var(--orange); } .cd-roxo { --cd-cor: var(--purple); } .cd-ciano { --cd-cor: var(--cyan); }
.cd-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cd-op-topo { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cd-op-topo h2 { margin: 0; border: 0; padding: 0; }
.cd-op-topo h2 small { color: var(--muted); font-weight: 400; font-size: 13px; }
.cd-nats { display: flex; gap: 6px; flex-wrap: wrap; }
.cd-nats button, .cd-pag button { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.cd-nats button.ativo, .cd-pag button.ativo { border-color: var(--cyan); color: var(--cyan); background: color-mix(in srgb, var(--cyan) 14%, transparent); }
.cd-op-busca { min-width: 280px; }
.cd-op-tabela tr.cd-op { cursor: pointer; }
.cd-op-tabela tr.cd-op:hover, .cd-op-tabela tr.cd-op.aberto { background: color-mix(in srgb, var(--cyan) 8%, transparent); }
.cd-op-tabela td:last-child, .cd-op-tabela th:last-child { text-align: left; }
.cd-resumo { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-det > td { background: color-mix(in srgb, var(--panel-2) 80%, transparent); padding: 10px 14px !important; }
.cd-det table { width: 100%; font-size: 13px; }
.cd-det-info { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.pill.cd-cust { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 50%, transparent); background: color-mix(in srgb, var(--cyan) 12%, transparent); }
.cd-sem { color: var(--orange); font-size: 12px; }
.cd-pag { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.cd-alertas { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; }
.cd-alerta { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--panel-2); }
.cd-alerta summary { display: flex; gap: 8px; align-items: center; cursor: pointer; list-style: none; font-size: 13px; }
.cd-alerta summary::-webkit-details-marker { display: none; }
.cd-alerta summary b { flex: 1; }
.cd-alerta summary em { font-style: normal; font-weight: 800; }
.cd-alerta.ok summary em { color: var(--green); }
.cd-alerta.aviso { border-color: color-mix(in srgb, var(--orange) 50%, var(--border)); }
.cd-alerta.aviso summary em { color: var(--orange); }
.cd-alerta.grave { border-color: color-mix(in srgb, var(--red) 55%, var(--border)); }
.cd-alerta.grave summary em { color: var(--red); }
.cd-alerta ul { margin: 8px 0 0; padding-left: 18px; font-size: 12px; max-height: 220px; overflow: auto; display: grid; gap: 3px; }
.cd-alerta small { color: var(--muted); }
.cd-separador { margin: 10px 0 0; font-size: 17px; }
@media (max-width: 1400px) { .cd-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .cd-kpis, .cd-grade { grid-template-columns: 1fr; } }
/* Rastreamento em tela cheia: a legenda do replay desce pra baixo da barra de ferramentas (antes ficava cortada por ela) e
   cabe entre a lista de tecnicos e a de OS (14/10/2026) */
.rast-painel.cheia .rast-legenda { top: 62px; z-index: 10; max-width: min(520px, calc(100% - 660px)); }
.rast-painel.cheia.sem-tec .rast-legenda, .rast-painel.cheia.sem-os .rast-legenda { max-width: min(520px, calc(100% - 400px)); }
.rast-painel.cheia.sem-tec.sem-os .rast-legenda { max-width: min(520px, 90%); }
/* Tela cheia: o aviso do replay (Parou aqui / Ligou / Excesso) saia no canto de baixo a esquerda, atras da lista de tecnicos -
   vai pro centro, logo acima da barra do replay (14/10/2026) */
.rast-painel.cheia .rast-toast { left: 50%; transform: translateX(-50%); bottom: 84px; z-index: 10; max-width: calc(100% - 660px); white-space: nowrap; }
.rast-painel.cheia.sem-tec .rast-toast, .rast-painel.cheia.sem-os .rast-toast { max-width: calc(100% - 400px); }
.rc-entrada-fix { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 2px; padding: 4px 6px 4px 12px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--cyan) 40%, var(--border)); background: color-mix(in srgb, var(--cyan) 8%, transparent); font-size: 13px; font-weight: 700; }
.rc-entrada-fix input { font: inherit; font-weight: 400; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); }
/* Cadastro de ONUs (Keyti) igual ao Suporte (14/10/2026): CPF/CNPJ + cartao do cliente */
.cadastro-onu-form .cad-onu-mk { grid-column: 1 / -1; display: grid; gap: 8px; }
.cad-onu-mk-info { color: var(--muted); font-size: 12px; }
.cad-onu-mk-info[data-tipo="ok"] { color: var(--green); }
.cad-onu-mk-info[data-tipo="erro"] { color: var(--orange); }
.cad-onu-mk-info[data-tipo="busca"] { color: var(--cyan); }
.cad-onu-copiar { margin: 6px 0 2px; }
.cad-onu-copiar .mini-button { font-weight: 700; }
.cad-onu-achada { margin-top: 4px; }
.mk-nome.copiavel { cursor: pointer; }
/* Conferencia das ativacoes (Keyti) */
.kc-card { margin-top: 14px; }
.kc-card h2 small { color: var(--muted); font-weight: 400; font-size: 12px; margin-left: 6px; }
.kc-card .table-wrap { max-height: 420px; overflow: auto; }
.kc-bom { color: var(--green); } .kc-aviso { color: var(--orange); } .kc-ruim { color: var(--red); font-weight: 700; }
.kc-alerta { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--orange) 55%, transparent);
  background: color-mix(in srgb, var(--orange) 10%, transparent); font-size: 13px; line-height: 1.5; }
.kc-prov { white-space: nowrap; } .kc-prov small { color: var(--muted); }
tr.kc-dobrado td { background: color-mix(in srgb, var(--orange) 6%, transparent); }
.rel-base { align-items: center; }
.rel-base span { font-size: 12px; color: var(--muted); font-weight: 700; }
.rel-base button.ativo { border-color: var(--cyan); color: var(--cyan); background: color-mix(in srgb, var(--cyan) 14%, transparent); }
.sd-data-obs { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.sd-data { min-width: 180px; }
.sd-data input { font-size: 15px !important; }
/* Transcrever audio (14/10/2026) */
.tr-solta { display: grid; justify-items: center; gap: 6px; padding: 34px 20px; margin-bottom: 16px; border: 2px dashed color-mix(in srgb, var(--cyan) 55%, var(--border));
  border-radius: 18px; background: color-mix(in srgb, var(--cyan) 5%, var(--panel)); cursor: pointer; text-align: center; transition: background .2s, border-color .2s; }
.tr-solta:hover, .tr-solta.arrastando { background: color-mix(in srgb, var(--cyan) 12%, var(--panel)); border-color: var(--cyan); }
.tr-ico { font-size: 38px; }
.tr-solta small { color: var(--muted); }
.tr-envio { width: min(420px, 90%); display: grid; gap: 4px; }
.tr-barra { height: 8px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.tr-barra i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--green)); transition: width .3s; }
.tr-sub { color: var(--muted); font-weight: 400; font-size: 12px; }
.tr-lista { display: grid; gap: 10px; }
.tr-item { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; background: var(--panel-2); cursor: pointer; display: grid; gap: 8px; }
.tr-item.aberto { border-color: var(--cyan); }
.tr-topo { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.tr-topo small { color: var(--muted); }
.tr-acoes { margin-left: auto; display: flex; gap: 6px; }
.tr-previa { margin: 0; color: var(--muted); font-size: 13px; }
.tr-texto { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; background: var(--panel); max-height: 460px; overflow: auto; cursor: text; user-select: text; line-height: 1.5; }
.tr-texto p { margin: 0; }
.tr-hora { display: inline-block; min-width: 54px; margin-right: 8px; color: var(--cyan); font-size: 12px; font-family: var(--mono, monospace); }

/* Login: cadeado (abre na senha certa, treme na errada) e "Esqueci a senha" so depois de errar - 14/10/2026 */
.login-panel .cad-wrap { display: flex; justify-content: center; margin: 2px 0 0; height: 74px; }
.login-panel .cad { width: 64px; height: 74px; overflow: visible; filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); transition: filter .4s; }
.login-panel .cad .arco { transform-box: view-box; transform-origin: 44px 30px; transition: transform .55s cubic-bezier(.34,1.56,.64,1); }
.login-panel .cad .corpo-brilho { opacity: 0; transition: opacity .4s; }
.login-panel .cad .buraco { transition: fill .3s; }
.login-panel .cad.digitando .arco { transform: translateY(-1.5px); }
.login-panel .cad.aberto .arco { transform: translateY(-10px) rotate(-28deg); }
.login-panel .cad.aberto { filter: drop-shadow(0 0 16px rgba(52,211,153,.75)); }
.login-panel .cad.aberto .corpo-brilho { opacity: 1; }
.login-panel .cad.aberto .buraco { fill: #34d399; }
.login-panel .cad.errado { animation: cadTreme .45s ease; filter: drop-shadow(0 0 14px rgba(248,113,113,.8)); }
.login-panel .cad.errado .buraco { fill: #f87171; }
@keyframes cadTreme { 0%,100% { transform: translateX(0) } 20% { transform: translateX(-7px) rotate(-4deg) } 40% { transform: translateX(6px) rotate(3deg) }
  60% { transform: translateX(-4px) rotate(-2deg) } 80% { transform: translateX(3px) } }
.login-esqueci-botao { display: grid; justify-items: center; margin-top: 12px; }
.login-esqueci-botao[hidden] { display: none; }
.login-esqueci-botao a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; text-decoration: none; font-weight: 700;
  font-size: 13px; color: #e9d5ff; border: 1px solid rgba(192,132,252,.45); background: rgba(192,132,252,.12); backdrop-filter: blur(6px);
  animation: esqueciEntra .45s cubic-bezier(.34,1.56,.64,1); transition: background .2s, transform .2s; }
.login-esqueci-botao a:hover { background: rgba(192,132,252,.24); transform: translateY(-1px); }
.login-esqueci-botao small { margin-top: 6px; color: var(--muted, #94a3b8); font-size: 11px; }
@keyframes esqueciEntra { from { opacity: 0; transform: translateY(-8px) scale(.95) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .login-panel .cad, .login-panel .cad .arco, .login-esqueci-botao a { animation: none !important; transition: none !important; } }
/* Ranking de atendentes: divisao do total por canal (14/10/2026) */
.rank-canais { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rank-canal { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--muted); cursor: default; }
.rank-canal.rc-chat { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 40%, var(--border)); }
.rank-canal.rc-telefone { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, var(--border)); }
.rank-canal.rc-presencial { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 40%, var(--border)); }
.rank-canal.rc-tecnico { color: var(--purple); border-color: color-mix(in srgb, var(--purple) 40%, var(--border)); }
/* selos alinhados em colunas fixas */
.rank-canais { display: grid; grid-template-columns: repeat(var(--n, 5), 40px); gap: 3px; margin-top: 5px; }
.rank-canal { justify-content: center; padding: 1px 0; font-size: 10.5px; }
.rank-canal.vazio { color: var(--muted); opacity: .35; border-style: dashed; }
.rank-canal.rc-plantao { color: var(--pink); border-color: color-mix(in srgb, var(--pink) 40%, var(--border)); }
/* selos numa linha propria embaixo do atendente (nao aperta as colunas) */
.rank-canais { grid-template-columns: repeat(var(--n, 5), 52px); gap: 4px; margin: 0; }
.rank-canal { font-size: 11px; padding: 2px 0; }
#attendantRankingTable tr:has(+ .rank-canais-linha) td { border-bottom: 0; padding-bottom: 2px; }
#attendantRankingTable .rank-canais-linha td { padding-top: 0; padding-bottom: 10px; }
/* total em destaque, com a divisao por canal logo embaixo dele */
#attendantRankingTable .rank-total { font-size: 15px; font-weight: 800; }
.rank-canais { grid-template-columns: repeat(var(--n, 5), 46px); }
/* Ranking: total embaixo do nome, OS abertas, canais e % cada um na sua coluna (14/10/2026) */
#attendantRankingTable .rank-total { font-size: 12px; font-weight: 400; color: var(--muted); margin: 3px 0 0 28px; }
#attendantRankingTable .rank-total b { font-size: 15px; font-weight: 800; color: var(--text); margin-right: 2px; }
#attendantRankingTable .rank-os b { display: block; font-size: 15px; }
#attendantRankingTable .rank-os small { color: var(--muted); font-size: 11px; }
#attendantRankingTable .rank-canais { grid-template-columns: repeat(var(--n, 5), 42px); gap: 3px; }
#attendantRankingTable .rank-canal { font-size: 10.5px; }
#attendantRankingTable td { vertical-align: middle; }
.rank-th-sub { font-weight: 400; opacity: .7; text-transform: none; letter-spacing: 0; }
/* Ranking de atendentes - versao final (14/10/2026): colunas simples + faixa "Por canal" por extenso embaixo de cada atendente */
#attendantRankingTable .rank-num { font-size: 15px; font-weight: 800; }
#attendantRankingTable .rank-os b { display: inline; font-size: 14px; }
#attendantRankingTable .rank-os small { color: var(--muted); font-size: 11px; }
#attendantRankingTable tr:has(+ .rank-canais-linha) td { border-bottom: 0; padding-bottom: 2px; }
#attendantRankingTable .rank-canais-linha td { padding-top: 0; padding-bottom: 10px; }
.rank-canais-txt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 4px 8px; border-radius: 8px;
  background: color-mix(in srgb, var(--panel-2) 70%, transparent); border-left: 2px solid var(--border); font-size: 11px; color: var(--muted); }
.rank-canais-rot { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; }
.rank-canais-txt .rank-canal { padding: 1px 8px; font-size: 11px; font-weight: 400; }
.rank-canais-txt .rank-canal b { font-weight: 800; }
/* Dashboard: Ranking de Atendentes mais largo, Top Problemas e Cidades mais estreitos (14/10/2026) */
#rankingsGrid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1300px) { #rankingsGrid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } #rankingsGrid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 900px) { #rankingsGrid { grid-template-columns: 1fr; } }

/* Pedidos: exclusao combinada - estoque pede, quem fez o pedido aceita (15/10/2026) */
.pedido-exclusao { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; max-width: 260px; margin: 8px 0; padding: 8px; border-left: 2px solid #f59e0b; border-radius: 0 6px 6px 0; background: rgba(245, 158, 11, .10); color: var(--muted); font-size: .76rem; line-height: 1.35; }
.pedido-exclusao b { color: var(--orange, #d97706); }
.pedido-exclusao label { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.pedido-exclusao input { width: 100%; }
.pedido-exclusao-pedida { border-left-color: #ef4444; background: rgba(239, 68, 68, .12); }
.pedido-exclusao-pedida b { color: var(--red, #dc2626); }
.pedido-exclusao-botoes { display: flex; flex-wrap: wrap; gap: 6px; }
.pedido-exclusao-aceitar { border-color: color-mix(in srgb, #ef4444 58%, var(--border)); color: #fca5a5; }
.pedido-excluir-toggle { margin-top: 6px; }

/* Ranking: consultas de MAC da ONU (so informacao, nao soma nos atendimentos) - 15/10/2026 */
.rank-canal.rc-mac { color: var(--cyan); border-style: dashed; border-color: color-mix(in srgb, var(--cyan) 45%, var(--border)); margin-left: 6px; }

/* Aviso de rompimento em tela cheia pro Suporte (15/10/2026) - rompimento-aviso.js. Cores fixas de proposito: e um alarme,
   igual em todos os temas. */
.rp-veu { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(ellipse at center, rgba(127,29,29,.45), rgba(5,8,15,.84) 70%); backdrop-filter: blur(4px);
  animation: rpVeu 1.6s ease-in-out infinite alternate; }
.rp-veu.rp-normal { background: radial-gradient(ellipse at center, rgba(6,78,59,.4), rgba(5,8,15,.84) 70%); animation: none; }
@keyframes rpVeu { from { background-color: rgba(127,29,29,.05) } to { background-color: rgba(127,29,29,.22) } }
.rp-card { width: min(560px, 100%); border-radius: 18px; padding: 26px 26px 22px; display: grid; gap: 16px; color: #f8fafc; font-family: inherit;
  background: linear-gradient(160deg, rgba(40,12,16,.94), rgba(17,20,30,.97)); border: 1px solid rgba(248,113,113,.55);
  box-shadow: 0 0 0 1px rgba(248,113,113,.15), 0 0 60px -10px rgba(239,68,68,.65), 0 30px 80px -30px #000; animation: rpEntra .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes rpEntra { from { transform: scale(.9) translateY(14px); opacity: 0 } }
.rp-topo { display: flex; align-items: center; gap: 14px; }
.rp-icone { width: 54px; height: 54px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 28px;
  background: rgba(239,68,68,.18); border: 2px solid #ef4444; animation: rpPulsa 1.2s ease-in-out infinite; }
@keyframes rpPulsa { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.6) } 50% { box-shadow: 0 0 0 12px rgba(239,68,68,0) } }
.rp-kicker { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #fca5a5; font-weight: 700; }
.rp-titulo { font-size: 24px; font-weight: 800; line-height: 1.15; margin: 2px 0 0; color: #f8fafc; }
.rp-enlace { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; padding: 14px; border-radius: 12px; text-align: center;
  background: rgba(255,255,255,.04); border: 1px dashed rgba(248,113,113,.4); font-size: 20px; font-weight: 800; letter-spacing: .02em; }
.rp-corte { color: #ef4444; font-size: 22px; animation: rpPisca 1s steps(2) infinite; }
@keyframes rpPisca { 50% { opacity: .25 } }
.rp-dados { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.rp-dados div { padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.05); display: grid; gap: 2px; min-width: 0; }
.rp-dados small { color: #94a3b8; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.rp-dados b { font-size: 17px; font-variant-numeric: tabular-nums; color: #f8fafc; }
.rp-dados b.rp-ruim { color: #f87171; }
.rp-orienta { margin: 0; color: #cbd5e1; font-size: 14px; line-height: 1.5; }
.rp-cientes { font-size: 12.5px; color: #94a3b8; }
.rp-cientes b { color: #e2e8f0; }
.rp-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rp-botoes button, .rp-botoes a { display: grid; place-items: center; padding: 12px; border-radius: 12px; font-weight: 800; font-size: 15px; cursor: pointer; text-decoration: none; border: 0; }
.rp-ciente { background: linear-gradient(90deg, #ef4444, #f97316); color: #fff; box-shadow: 0 8px 24px -10px rgba(239,68,68,.9); }
.rp-ciente:focus-visible, .rp-ver:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rp-ver { background: rgba(255,255,255,.06); color: #e2e8f0 !important; border: 1px solid rgba(255,255,255,.14) !important; }
.rp-normal .rp-card { border-color: rgba(52,211,153,.55); box-shadow: 0 0 60px -12px rgba(52,211,153,.55), 0 30px 80px -30px #000;
  background: linear-gradient(160deg, rgba(10,40,30,.94), rgba(17,20,30,.97)); }
.rp-normal .rp-icone { background: rgba(52,211,153,.18); border-color: #34d399; animation: none; }
.rp-normal .rp-kicker { color: #6ee7b7; }
.rp-normal .rp-enlace { border-color: rgba(52,211,153,.4); }
.rp-normal .rp-corte { color: #34d399; animation: none; }
.rp-normal .rp-ciente { background: linear-gradient(90deg, #10b981, #22c55e); box-shadow: none; }
@media (max-width: 520px) { .rp-dados { grid-template-columns: 1fr; } .rp-botoes { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .rp-veu, .rp-icone, .rp-corte, .rp-card { animation: none !important; } }

/* Card ROMPIMENTOS do Dashboard (15/10/2026) */
.kpi-romp.clicavel { cursor: pointer; }
/* rompimento aberto: borda vermelha piscando, igual ao "Clientes que voltaram" (kpiVoltouPisca) */
.kpi-romp.kpi-romp-ativo { outline: 2px solid var(--red); outline-offset: 2px; animation: kpiRompPisca 1.2s ease-in-out infinite; }
.kpi-romp.kpi-romp-ativo strong { color: var(--red); }
@keyframes kpiRompPisca { 0%, 100% { outline-color: var(--red); box-shadow: 0 0 22px color-mix(in srgb, var(--red) 55%, transparent); }
  50% { outline-color: transparent; box-shadow: 0 0 0 transparent; } }
.romp-caixa { width: min(880px, 96vw); }
.romp-sub { margin: 14px 0 8px; font-size: 15px; }
.romp-ruim { color: var(--red); font-weight: 700; }
.romp-nenhum { margin: 12px 0; color: var(--green); font-weight: 600; }
.romp-rodape { margin: 12px 0 0; text-align: right; }
@media (prefers-reduced-motion: reduce) { .kpi-romp.kpi-romp-ativo { animation: none; } }

/* Conciliacao: boletos avulsos do MK (15/10/2026) */
.conc-mk-avulsos { margin-left: 4px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--cyan); cursor: pointer; font-size: 13px; line-height: 1.5; }
.conc-mk-avulsos:hover { border-color: var(--cyan); }
.conc-mk-avulsos.girando { animation: concGira .8s linear infinite; }
@keyframes concGira { to { transform: rotate(360deg); } }
.conc-avulsos-caixa { width: min(920px, 96vw); }
.conc-av-info { margin: 10px 0; color: var(--muted); }
.conc-av-info.erro { color: var(--red); }
.conc-av-perto td { background: color-mix(in srgb, var(--cyan) 12%, transparent); }
.conc-av-legenda { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.conc-av-ok { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); font-weight: 600; }

/* vidroPergunta (prompt em vidro) - 15/10/2026 */
.vidro-campo { width: 100%; margin: -6px 0 16px; padding: 10px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--cor) 55%, var(--border));
  background: color-mix(in srgb, var(--panel) 70%, transparent); color: var(--text); font: inherit; }
.vidro-campo:focus { outline: 2px solid var(--cor); outline-offset: 1px; }
.vidro-campo.vazio { border-color: var(--red); }
.vidro-caixa.com-icone .vidro-ico { width: 62px; height: 62px; }
.vidro-svg { width: 46px; height: 46px; fill: none; stroke: var(--cor); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vidro-svg .moeda-topo { fill: color-mix(in srgb, var(--cor) 30%, transparent); }

/* MAC da ONU: Gravar nome no UNM (15/10/2026) */
.mo-btn-unm.ok { border-color: var(--green); color: var(--green); }
.mo-unm { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 12px 0 4px; }
.mo-unm .ctl-campo { min-width: 260px; }
.ativ-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }

/* Central Inteligente de OS (17/10/2026) */
.cos-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 12px 0; }
.cos-resumo > div { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.cos-regioes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; min-width: 0; }
.cos-regiao { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cos-reg-topo { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; }
.cos-reg-topo h3 { margin: 0; font-size: 15px; line-height: 1.2; overflow-wrap: anywhere; }
.cos-reg-topo small { grid-column: 2; color: var(--muted); font-size: 12px; }
.cos-reg-n { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px;
  background: color-mix(in srgb, var(--cyan) 22%, transparent); color: var(--cyan); }
.cos-reg-bloco { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.cos-reg-rot { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cos-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.cos-cid, .cos-tec { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--panel-2); border: 1px solid var(--border); max-width: 100%; }
.cos-tec { padding-right: 10px; flex-direction: column; align-items: flex-start; gap: 0; border-radius: 10px; }
.cos-tec small { font-size: 10.5px; font-weight: 500; color: var(--muted); }
.cos-vazio { color: var(--muted); font-style: italic; }
.cos-x { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 4px; font-weight: 700; font-size: 14px; line-height: 1; border-radius: 50%; }
.cos-x:hover { color: var(--red); background: color-mix(in srgb, var(--red) 15%, transparent); }
.cos-add { display: flex; gap: 0; margin: 0; border: 1px dashed var(--border); border-radius: 999px; overflow: hidden; background: transparent; }
.cos-add:focus-within { border-style: solid; border-color: var(--cyan); }
.cos-add input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--text); font: inherit; font-size: 12px; padding: 6px 12px; text-transform: uppercase; }
.cos-add input::placeholder { text-transform: none; color: var(--muted); }
.cos-add-btn { border: 0; background: color-mix(in srgb, var(--cyan) 20%, transparent); color: var(--cyan); font-weight: 800; padding: 0 14px; cursor: pointer; }
.cos-add-btn:hover { background: color-mix(in srgb, var(--cyan) 35%, transparent); }
/* 30/10/2026: campos da Central de OS no padrao arredondado do portal (Leonardo: tabela de tecnicos feia) */
.cos-hint { font-size: 12px; color: var(--muted); line-height: 1.4; flex: 1 1 260px; min-width: 0; text-align: right; }
.cos-tabela td { vertical-align: middle; }
.cos-tabela input:not([type=checkbox]), .cos-tabela select, .cos-jornada input:not([type=checkbox]) {
  appearance: none; -webkit-appearance: none; max-width: 100%; box-sizing: border-box; font: inherit; font-size: 12.5px; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; outline: 0; transition: border-color .15s; }
.cos-tabela input:not([type=checkbox]):hover, .cos-tabela select:hover { border-color: color-mix(in srgb, var(--cyan) 45%, var(--border)); }
.cos-tabela input:not([type=checkbox]):focus, .cos-tabela select:focus, .cos-jornada input:focus { border-color: var(--cyan); }
.cos-tabela input::placeholder, .cos-jornada input::placeholder { color: var(--muted); opacity: .7; }
.cos-tabela select { padding-right: 30px; cursor: pointer; min-width: 170px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.cos-tabela select option { background: var(--panel); color: var(--text); }
.cos-tabela input[data-f="placa"] { width: 104px; text-transform: uppercase; font-family: ui-monospace, monospace; letter-spacing: .04em; text-align: center; }
.cos-prio { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-width: 170px; max-width: 280px; }
.cos-tabela select.cos-prio-add { min-width: 0; width: auto; padding: 4px 26px 4px 10px; font-size: 12px; border-style: dashed; color: var(--muted); }
.cos-tabela input[type=number] { border-radius: 10px; }
.cos-tabela input[type=date] { border-radius: 10px; color-scheme: dark; }
/* checkbox vira chave liga/desliga */
.cos-tabela input[type=checkbox], .cos-jornada input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 34px; height: 19px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border); position: relative; cursor: pointer; margin: 0; transition: background .15s; vertical-align: middle; }
.cos-tabela input[type=checkbox]::after, .cos-jornada input[type=checkbox]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.cos-tabela input[type=checkbox]:checked, .cos-jornada input[type=checkbox]:checked { background: color-mix(in srgb, var(--green) 35%, transparent); border-color: var(--green); }
.cos-tabela input[type=checkbox]:checked::after, .cos-jornada input[type=checkbox]:checked::after { transform: translateX(15px); background: var(--green); }
.cos-tabela input[data-f="rompimento"]:checked { background: color-mix(in srgb, var(--orange) 35%, transparent); border-color: var(--orange); }
.cos-tabela input[data-f="rompimento"]:checked::after { background: var(--orange); }
.cos-filtro { display: flex; flex-wrap: wrap; gap: 6px; }
.cos-filtro .mini-button.ativo { outline: 2px solid var(--cyan); }
.cos-classe-excluida td:first-child { color: var(--muted); text-decoration: line-through; }
.cos-aviso { color: var(--orange); }
.cos-jornada { display: flex; flex-direction: column; gap: 8px; }
.cos-regras p { margin: 4px 0; }
.cos-tut section { display: flex; flex-direction: column; gap: 6px; padding: 10px 2px; border-bottom: 1px solid var(--border); }
.cos-tut section:last-child { border-bottom: 0; }
.cos-tut h3 { margin: 0; font-size: 16px; color: var(--cyan); }
.cos-tut p, .cos-tut li { line-height: 1.55; max-width: 92ch; }
.cos-tut ul, .cos-tut ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }
.cos-tut-nota { background: var(--panel-2); border-radius: 8px; padding: 8px 12px; }
.cos-obs { min-width: 200px; width: 100%; }
/* Central de OS - Parte 2: painel (18/10/2026) */
.cos-dia { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cos-kpis .cos-kpi-no b { color: var(--red); }
.cos-kpis .cos-kpi-mid b { color: var(--orange); }
.cos-regiao-btn { text-align: left; cursor: pointer; background: var(--panel); color: var(--text); font: inherit; }
.cos-regiao-btn:hover, .cos-regiao-btn.ativo { outline: 2px solid var(--cyan); }
.cos-reg-num { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; }
.cos-agenda { display: flex; flex-direction: column; gap: 8px; }
.cos-ag-linha { display: grid; grid-template-columns: 190px 220px minmax(0, 1fr); gap: 12px; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.cos-ag-nome { display: flex; flex-direction: column; min-width: 0; }
.cos-ag-nome small { color: var(--muted); }
.cos-ag-barra { position: relative; height: 22px; border-radius: 6px; background: var(--panel-2); overflow: hidden; }
.cos-ag-barra span { position: absolute; inset: 0 auto 0 0; }
.cos-ag-barra i { position: relative; font-style: normal; font-size: 12px; padding-left: 8px; line-height: 22px; font-variant-numeric: tabular-nums; }
.cos-ag-ok { background: color-mix(in srgb, var(--green) 55%, transparent); }
.cos-ag-mid { background: color-mix(in srgb, var(--orange) 60%, transparent); }
.cos-ag-no { background: color-mix(in srgb, var(--red) 60%, transparent); }
.cos-ag-itens { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.cos-ag-os { font-size: 12px; border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; white-space: nowrap; }
.cos-mapa { height: 460px; border-radius: 10px; overflow: hidden; }
.cos-pino { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4); cursor: pointer; }
.cos-carro { font-size: 20px; cursor: pointer; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.cos-filtro select, .cos-filtro input { max-width: 100%; }
@media (max-width: 900px) { .cos-ag-linha { grid-template-columns: minmax(0, 1fr); } }
.cos-estrela { background: none; border: 0; cursor: pointer; font-size: 18px; line-height: 1; color: var(--muted); padding: 2px; }
.cos-estrela.auto { opacity: .55; }
.cos-estrela:disabled { opacity: .3; }
/* Central de OS - Parte 3: organizar (18/10/2026) */
.cos-acao { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cos-plano { display: flex; flex-direction: column; gap: 12px; }
.cos-plano-tec .cos-ag-barra { margin: 4px 0 10px; }
.cos-fixa td { color: var(--muted); }
.cos-ajustada td { background: color-mix(in srgb, var(--orange) 12%, transparent); }

/* Central de OS: horario do cliente e contato (18/10/2026) */
.cos-selo { white-space: nowrap; cursor: help; font-size: 0.72rem; }
.cos-janela { border-color: var(--cyan); color: var(--cyan); }
.cos-rest-linha { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.cos-td-rest { min-width: 120px; }
.cos-sem-rest { cursor: help; color: var(--muted); }
.cos-contato { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 150px; }
.cos-contato select, .cos-contato input { font-size: 0.78rem; padding: 3px 5px; }
.cos-contato small { color: var(--muted); font-size: 0.7rem; width: 100%; }
.cos-ct-aguardando select { border-color: var(--orange); }
.cos-ct-confirmado select { border-color: var(--green); color: var(--green); }
.cos-ct-reprogramar select { border-color: var(--red); color: var(--red); }

/* Historico de rompimentos (18/10/2026) */
.rh-lista { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.rh-item { border: 1px solid var(--border); border-left: 4px solid var(--green); border-radius: 10px; padding: 12px 14px; background: var(--panel-2); }
.rh-item.rh-aberto { border-left-color: var(--red); }
.rh-cab { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.rh-cab h3 { margin: 0; font-size: 1rem; }
.rh-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 14px; margin-top: 10px; align-items: center; }
.rh-dados { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.rh-dados small, .rh-msg small, .rh-vistos small { display: block; color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: .04em; }
.rh-ruim { color: var(--red); }
.rh-graf { width: 100%; height: auto; max-width: 440px; }
.rh-graf-linha { fill: none; stroke: var(--cyan); stroke-width: 2; }
.rh-graf-sem { stroke: var(--red); stroke-dasharray: 4 4; opacity: .6; }
.rh-graf-txt { fill: var(--muted); font-size: 10px; }
.rh-msg { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--panel); }
.rh-msg p { margin: 4px 0; font-family: var(--mono, monospace); font-size: 0.85rem; }
.rh-vistos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.rh-vistos p { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.rh-pessoa small { opacity: .75; }
.rh-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rh-paginas { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
@media (max-width: 900px) { .rh-grade, .rh-vistos { grid-template-columns: 1fr; } }

/* Vigia de e-mails (19/10/2026) */
.ev-contas { display: flex; flex-direction: column; gap: 8px; }
.ev-conta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--panel-2); }
.ev-conta small { color: var(--muted); }
tr.ev-visto { opacity: .55; }

/* Pop-up de e-mail importante (19/10/2026) - mesmo visual do rompimento, em laranja/ambar */
.rp-veu.rp-email { background: radial-gradient(ellipse at center, rgba(146,64,14,.42), rgba(5,8,15,.84) 70%); animation: none; }
.rp-email .rp-card { border-color: rgba(251,146,60,.6); box-shadow: 0 0 60px -10px rgba(249,115,22,.6), 0 30px 80px -30px #000;
  background: linear-gradient(160deg, rgba(45,24,8,.95), rgba(17,20,30,.97)); }
.rp-email .rp-icone { background: rgba(249,115,22,.18); border-color: #fb923c; }
.rp-email .rp-kicker { color: #fdba74; }
.rp-email .rp-enlace { border-color: rgba(251,146,60,.45); font-size: 17px; }
.rp-email .rp-ciente { background: linear-gradient(90deg, #f97316, #f59e0b); }
.rp-email-atencao .rp-icone { animation: none; }
.rp-email .em-dados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rp-email .em-dados b { font-size: 14px; overflow-wrap: anywhere; }

/* Aviso de rompimento: tabela das lanes (19/10/2026) */
.rp-lanes { border-radius: 12px; background: rgba(255,255,255,.04); padding: 8px 12px; }
.rp-lanes table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rp-lanes th { font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: .08em; text-align: left; padding: 4px 6px; font-weight: 600; }
.rp-lanes td { padding: 5px 6px; border-top: 1px solid rgba(255,255,255,.06); font-weight: 700; color: #f8fafc; font-size: 14px; }
.rp-lanes td:first-child { color: #cbd5e1; font-weight: 600; }
.rp-lanes .rp-var { font-size: 13px; font-weight: 600; color: #cbd5e1; }
.rp-lanes .rp-ruim { color: #f87171; }
.rp-lanes .rp-bom { color: #34d399; }
.rh-lanes { margin-top: 10px; background: var(--panel); }
.rh-lanes td { color: var(--text); }
.rh-lanes td:first-child, .rh-lanes .rp-var { color: var(--muted); }
/* duas pontas do enlace lado a lado (19/10/2026) */
.rp-lados { display: grid; gap: 10px; }
.rp-lados.dois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rp-veu.rp-largo .rp-card { width: min(860px, 100%); }
.rp-lado { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #e2e8f0; padding: 4px 6px 6px; }
.rh-lanes .rp-lado { color: var(--text); }
.rh-lados { margin-top: 10px; }
@media (max-width: 700px) { .rp-lados.dois { grid-template-columns: 1fr; } }
/* titulo do enlace: 1a cidade colada a esquerda, 2a a direita (mesma ordem das tabelas) */
.rp-enlace.rp-enlace-dois { justify-content: space-between; padding-inline: 22px; }

.ativ-cands { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* foto da etiqueta da ONU (19/10/2026) */
.etq-nota { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.etq-nota:empty { display: none; }

/* Estoque: impressao (19/10/2026) */
.imp-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; margin-top: 10px; }
.imp-card { border: 1px solid var(--border); border-left: 4px solid var(--green); border-radius: 10px; padding: 12px; background: var(--panel-2); display: grid; gap: 10px; }
.imp-card.imp-perto { border-left-color: var(--orange); }
.imp-card.imp-vencido { border-left-color: var(--red); }
.imp-card.imp-sem_troca { border-left-color: var(--muted); }
.imp-cab { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.imp-cab h3 { margin: 2px 0 0; font-size: 15px; }
.imp-cab small { color: var(--muted); font-size: 11px; letter-spacing: .06em; }
.imp-hist { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.ctl-quebra { flex-wrap: wrap; align-items: flex-end; }
.ctl-coluna { display: grid; gap: 10px; }

/* protetor de tela com video do usuario (19/10/2026) */
.protetor-video { width: 100vw; height: 100vh; object-fit: cover; background: #000; }
.protetor-video.visivel { opacity: 1; }

/* Fundo da tela com video do usuario (19/10/2026) */
.fundo-video, .fundo-veu { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -2; pointer-events: none; display: none; }
.fundo-video { object-fit: cover; }
.fundo-veu { z-index: -1; background: rgba(5, 8, 15, .55); }
html.com-fundo-video .fundo-video, html.com-fundo-video .fundo-veu { display: block; }
html.com-fundo-video body { background: transparent !important; }
html.com-fundo-video { background: #000; }

/* ===== Tema VIDRO (19/10/2026): paineis translucidos com desfoque (vidro fosco) - bom com o "Fundo da tela: Video" ===== */:root[data-tema="vidro"], :root[data-tema="vidro-fosco"]{
  --bg: #0a1020;
  --panel: rgba(16, 22, 36, .48);
  --panel-2: rgba(28, 36, 56, .52);
  --border: rgba(255, 255, 255, .18);
  --text: #f8fafc;
  --muted: #cbd5e1;
  --blue: #7dd3fc;
  --cyan: #67e8f9;
  --green: #86efac;
  --orange: #fdba74;
  --purple: #c4b5fd;
  --pink: #f9a8d4;
  --red: #fca5a5;
  --display: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --grad: linear-gradient(105deg, #7dd3fc 10%, #c4b5fd 90%);
  --raio: 14px;
  --boneco-1: #334155; --boneco-2: #64748b; --boneco-3: #7dd3fc; --boneco-4: #67e8f9; --boneco-5: #86efac;
}
/* sem video de fundo: uma aurora suave pra o vidro aparecer */:root[data-tema="vidro"] body, :root[data-tema="vidro-fosco"] body{
  background: radial-gradient(ellipse at 15% 10%, rgba(56, 189, 248, .35), transparent 45%),
              radial-gradient(ellipse at 85% 20%, rgba(167, 139, 250, .32), transparent 45%),
              radial-gradient(ellipse at 50% 100%, rgba(52, 211, 153, .22), transparent 55%), #0a1020 fixed;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}:root[data-tema="vidro"].com-fundo-video .fundo-veu, :root[data-tema="vidro-fosco"].com-fundo-video .fundo-veu{ background: rgba(5, 8, 15, .28); }:root[data-tema="vidro"] .card, :root[data-tema="vidro-fosco"] .card, :root[data-tema="vidro"] .kpi, :root[data-tema="vidro-fosco"] .kpi, :root[data-tema="vidro"] .lateral, :root[data-tema="vidro-fosco"] .lateral, :root[data-tema="vidro"] .topnav, :root[data-tema="vidro-fosco"] .topnav, :root[data-tema="vidro"] .topnav-panel, :root[data-tema="vidro-fosco"] .topnav-panel, :root[data-tema="vidro"] .tema-menu, :root[data-tema="vidro-fosco"] .tema-menu, :root[data-tema="vidro"] .modal-caixa, :root[data-tema="vidro-fosco"] .modal-caixa, :root[data-tema="vidro"] .modal-cadastro, :root[data-tema="vidro-fosco"] .modal-cadastro, :root[data-tema="vidro"] .cos-regiao, :root[data-tema="vidro-fosco"] .cos-regiao, :root[data-tema="vidro"] .imp-card, :root[data-tema="vidro-fosco"] .imp-card, :root[data-tema="vidro"] .rh-item, :root[data-tema="vidro-fosco"] .rh-item, :root[data-tema="vidro"] .combo-pop, :root[data-tema="vidro-fosco"] .combo-pop, :root[data-tema="vidro"] .cmdk-caixa, :root[data-tema="vidro-fosco"] .cmdk-caixa{
  background: var(--panel) !important;
  border-color: var(--border) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
  border-radius: var(--raio);
}:root[data-tema="vidro"] .lateral, :root[data-tema="vidro-fosco"] .lateral{ border-radius: 0; }:root[data-tema="vidro"] .table-wrap, :root[data-tema="vidro-fosco"] .table-wrap, :root[data-tema="vidro"] table, :root[data-tema="vidro-fosco"] table{ background: transparent; }:root[data-tema="vidro"] th, :root[data-tema="vidro-fosco"] th{ background: rgba(255, 255, 255, .06); color: var(--cyan); }:root[data-tema="vidro"] tbody tr:hover td, :root[data-tema="vidro-fosco"] tbody tr:hover td{ background: rgba(255, 255, 255, .06); }:root[data-tema="vidro"] input, :root[data-tema="vidro-fosco"] input, :root[data-tema="vidro"] select, :root[data-tema="vidro-fosco"] select, :root[data-tema="vidro"] textarea, :root[data-tema="vidro-fosco"] textarea{
  background: rgba(10, 16, 30, .55) !important; color: var(--text) !important; border-color: rgba(255, 255, 255, .22) !important;
}:root[data-tema="vidro"] option, :root[data-tema="vidro-fosco"] option{ background: #0f172a; color: #f8fafc; }:root[data-tema="vidro"] .item, :root[data-tema="vidro-fosco"] .item, :root[data-tema="vidro"] .topnav-btn, :root[data-tema="vidro-fosco"] .topnav-btn{ color: var(--text); }:root[data-tema="vidro"] .item:hover, :root[data-tema="vidro-fosco"] .item:hover, :root[data-tema="vidro"] .item.ativo, :root[data-tema="vidro-fosco"] .item.ativo{ background: rgba(255, 255, 255, .12) !important; color: #fff; }:root[data-tema="vidro"] .mini-button, :root[data-tema="vidro-fosco"] .mini-button, :root[data-tema="vidro"] .text-button, :root[data-tema="vidro-fosco"] .text-button{ background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .24); color: var(--text); }:root[data-tema="vidro"] .mini-button:hover, :root[data-tema="vidro-fosco"] .mini-button:hover, :root[data-tema="vidro"] .text-button:hover, :root[data-tema="vidro-fosco"] .text-button:hover{ background: rgba(255, 255, 255, .16); }:root[data-tema="vidro"] .login-body, :root[data-tema="vidro-fosco"] .login-body{ background: radial-gradient(ellipse at 20% 15%, rgba(56, 189, 248, .35), transparent 45%),
  radial-gradient(ellipse at 80% 80%, rgba(167, 139, 250, .32), transparent 50%), #0a1020; }

/* Vidro (19/10/2026, 2a versao): TRANSPARENTE e NITIDO - sem desfoque, painel bem mais leve; o desfoque ficou no "Vidro Fosco".
   Pra ler sobre qualquer imagem, o texto ganha sombra mais forte. */
:root[data-tema="vidro"] { --panel: rgba(8, 12, 22, .30); --panel-2: rgba(12, 18, 32, .36); --border: rgba(255, 255, 255, .22); }
:root[data-tema="vidro"] .card, :root[data-tema="vidro"] .kpi, :root[data-tema="vidro"] .lateral, :root[data-tema="vidro"] .topnav,
:root[data-tema="vidro"] .cos-regiao, :root[data-tema="vidro"] .imp-card, :root[data-tema="vidro"] .rh-item {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 4px 18px rgba(0, 0, 0, .22);
}
:root[data-tema="vidro"] body { text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 6px rgba(0, 0, 0, .55); }
:root[data-tema="vidro"].com-fundo-video .fundo-veu { background: rgba(5, 8, 15, .18); }
:root[data-tema="vidro"] th { background: rgba(0, 0, 0, .28); }
:root[data-tema="vidro"] tbody td { background: rgba(0, 0, 0, .10); }


/* ===== Tema COMANDO (19/10/2026): claro, estilo "command center" (IBM Plex Sans + rotulos em IBM Plex Mono maiusculo).
   Base: copia das correcoes do tema claro Gelo (componentes com cor fixa), depois as cores/fontes proprias. ===== */
:root[data-tema="comando"] { color-scheme: light; }
:root[data-tema="comando"] option {
  background-color: var(--panel);
  color: var(--text);
}
:root[data-tema="comando"] {
  --bg: #eef6fb;
  --panel: #ffffff;
  --panel-2: #e4eff7;
  --border: #c7dcea;
  --text: #1c3a4a;
  --muted: #5b7d90;
  --blue: #2f8fd1;
  --cyan: #23b6d9;
  --green: #22b389;
  --orange: #f0a23c;
  --purple: #7c93c9;
  --pink: #e0566b;
  --red: #e0566b;

  --display: "Chakra Petch", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --grad: linear-gradient(105deg, #2f8fd1 15%, #23b6d9 85%);
  --raio: 16px;
  /* --blue (#2f8fd1) e --cyan (#23b6d9) tem so ~3:1 e ~2,4:1 de contraste
     contra fundo branco - servem para icone/borda/fundo, mas texto pequeno em
     cima deles nao passa. Este e o azul escurecido so para letra (kicker,
     item ativo da lateral, marca dagua do rodape etc), ~7,5:1. */
  --azul-forte: #0e5a80;
}
[data-tema="comando"] body {
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
[data-tema="comando"] .btn-ok {
  border-color: rgba(34, 179, 137, .5);
  background: rgba(34, 179, 137, .12);
  color: var(--green);
}
[data-tema="comando"] .btn-ok:hover {
  background: rgba(34, 179, 137, .22);
  border-color: var(--green);
}
[data-tema="comando"] .login-body {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(47, 143, 209, .14), transparent 60%),
    radial-gradient(80% 60% at 85% 100%, rgba(35, 182, 217, .1), transparent 60%),
    #eef6fb;
}
[data-tema="comando"] .login-panel { border-radius: var(--raio); }
[data-tema="comando"] .topbar h1 {
  font-family: var(--display);
  font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-tema="comando"] .pill { border-radius: 999px; }
[data-tema="comando"] .pill.ok, [data-tema="comando"] .pill.high { background: rgba(34, 179, 137, .16); color: var(--green); }
[data-tema="comando"] .pill.no, [data-tema="comando"] .pill.low { background: rgba(224, 86, 107, .16); color: var(--red); }
[data-tema="comando"] .pill.mid { background: rgba(35, 182, 217, .16); color: var(--cyan); }
[data-tema="comando"] .pill.sistema, [data-tema="comando"] .pill.remoto { background: rgba(124, 147, 201, .18); color: var(--purple); }
[data-tema="comando"] .pill.obs { background: rgba(91, 125, 144, .14); color: var(--muted); }
[data-tema="comando"] .pill.destino-planilha { background: rgba(34, 179, 137, .16); color: var(--green); }
[data-tema="comando"] .pill.destino-banco { background: rgba(35, 182, 217, .16); color: var(--cyan); }
[data-tema="comando"] .hora-registro { background: rgba(47, 143, 209, .14); color: var(--blue); }
[data-tema="comando"] .hora-registro.aprox { background: var(--panel-2); color: var(--muted); }
[data-tema="comando"] .filters select, [data-tema="comando"] .filters input[type="text"], [data-tema="comando"] .login-form input, [data-tema="comando"] .table-search, [data-tema="comando"] .summary-textarea, [data-tema="comando"] .admin-form select, [data-tema="comando"] .dude-campo-input, [data-tema="comando"] .campo-salario input, [data-tema="comando"] .escala-select {
  background: #ffffff;
  border-color: var(--border);
  color: var(--text);
}
[data-tema="comando"] .filters button, [data-tema="comando"] .mini-button, [data-tema="comando"] .text-button {
  background: #ffffff;
  border-color: var(--border);
  color: var(--azul-forte);
}
[data-tema="comando"] .mini-button.danger { color: #a83c4f; }
[data-tema="comando"] .ramal-btn, [data-tema="comando"] .alerta-card, [data-tema="comando"] .sinal-caixa, [data-tema="comando"] .lane-chip, [data-tema="comando"] .bar-mini {
  background: #ffffff;
  border-color: var(--border);
}
[data-tema="comando"] .ramal-btn.on .ramal-nome { color: #0e7a5e; }
[data-tema="comando"] .ramal-btn.off .ramal-nome { color: #a83c4f; }
[data-tema="comando"] .escala-grade-cel.fim-de-semana { background: rgba(47, 143, 209, .06); }
[data-tema="comando"] .sync-badge { color: #0e7a5e; }
[data-tema="comando"] .flash.ok { color: #0e7a5e; }
[data-tema="comando"] .flash.error { color: #a83c4f; }
[data-tema="comando"] .kpi small.delta-up { color: #0e7a5e; }
[data-tema="comando"] .kpi small.delta-down { color: #a83c4f; }
[data-tema="comando"] .filter-hint.active { color: #b06a10; }
[data-tema="comando"] .selo-plantao { color: #b06a10; }
[data-tema="comando"] .plantao-conta b { color: #0e7a5e; }
[data-tema="comando"] .escala-valor b { color: #0e7a5e; }
[data-tema="comando"] .pessoa-fem { color: #a83c4f; }
[data-tema="comando"] .pessoa-masc { color: var(--azul-forte); }
[data-tema="comando"] .pill.status-nova { background: rgba(47, 143, 209, .14); color: var(--azul-forte); }
[data-tema="comando"] .pill.status-analisando { background: rgba(240, 162, 60, .16); color: #b06a10; }
[data-tema="comando"] .pill.status-resolvida { background: rgba(34, 179, 137, .16); color: #0e7a5e; }
[data-tema="comando"] .pill.status-recusada { background: var(--panel-2); color: var(--muted); }
[data-tema="comando"] .pill.ok, [data-tema="comando"] .pill.high { color: #0e7a5e; }
[data-tema="comando"] .pill.no, [data-tema="comando"] .pill.low { color: #a83c4f; }
[data-tema="comando"] .pill.mid { color: #0e5f70; }
[data-tema="comando"] .pill.sistema, [data-tema="comando"] .pill.remoto { color: #5a3d99; }
[data-tema="comando"] .item { color: var(--muted); }
[data-tema="comando"] .item:hover { background: rgba(47, 143, 209, .1); color: var(--azul-forte); }
[data-tema="comando"] .item.ativo {
  background: linear-gradient(90deg, rgba(47, 143, 209, .18), transparent);
  color: var(--azul-forte);
}
[data-tema="comando"] .lateral-marca b { color: var(--azul-forte); }
[data-tema="comando"] .avatar {
  background: linear-gradient(135deg, rgba(47, 143, 209, .18), rgba(35, 182, 217, .14));
  border-color: var(--border);
  color: var(--azul-forte);
}
[data-tema="comando"] .rodape b { color: var(--azul-forte); }
[data-tema="comando"] .modal-fundo { background: rgba(28, 58, 74, .35); }
[data-tema="comando"] .modal-cadastro {
  background: linear-gradient(180deg, #ffffff, #eaf5fb);
  border-color: var(--border);
}
[data-tema="comando"] .modal-cadastro::before {
  background: linear-gradient(90deg, transparent, var(--cyan), var(--blue), transparent);
}
[data-tema="comando"] .cadastro-head h2 {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-tema="comando"] .cadastro-kicker { color: var(--azul-forte); }
[data-tema="comando"] .cadastro-dot { background: var(--cyan); box-shadow: 0 0 0 4px rgba(35, 182, 217, .16); }
[data-tema="comando"] .cadastro-campo > span { color: var(--azul-forte); }
[data-tema="comando"] .cadastro-campo > span::before { background: var(--blue); }
[data-tema="comando"] .cadastro-campo input, [data-tema="comando"] .cadastro-campo select, [data-tema="comando"] .cadastro-campo textarea, [data-tema="comando"] .cadastro-check, [data-tema="comando"] .combo-pop {
  background: #ffffff;
  border-color: var(--border);
  color: var(--text);
}
[data-tema="comando"] .cadastro-campo input[readonly] { background: var(--panel-2); color: var(--muted); }
[data-tema="comando"] .cadastro-data { background: var(--panel-2); border-color: var(--border); color: var(--azul-forte); }
[data-tema="comando"] .cadastro-acoes { border-top-color: var(--border); }
[data-tema="comando"] .combo-op { color: var(--text); }
[data-tema="comando"] .combo-op:hover, [data-tema="comando"] .combo-op.ativo {
  background: linear-gradient(90deg, rgba(47, 143, 209, .12), rgba(35, 182, 217, .1));
  color: var(--azul-forte);
  box-shadow: inset 0 0 0 1px var(--border);
  text-shadow: none;
}
[data-tema="comando"] .combo-op::before { background: var(--cyan); box-shadow: none; }
[data-tema="comando"] .combo-op mark { color: var(--azul-forte); }
[data-tema="comando"] .cadastro-acoes .btn-ok, [data-tema="comando"] .chat-envio .btn-ok {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px rgba(35, 182, 217, .28);
}
[data-tema="comando"] .anexo-escolher { background: #ffffff; border-color: var(--border); color: var(--azul-forte); }
[data-tema="comando"] .anexo-nome.tem { color: var(--azul-forte); }
:root[data-tema="comando"] {
  --boneco-1: #5b7d90; --boneco-2: #a7c8e0; --boneco-3: #2f8fd1;
  --boneco-4: #23b6d9; --boneco-5: #22b389;
}
[data-tema="comando"] .figura .olho { fill: #1c3a4a; }
[data-tema="comando"] .figura .boca { stroke: #1c3a4a; }
:root[data-tema="comando"] .cadastro-campo input:focus, :root[data-tema="comando"] .cadastro-campo select:focus, :root[data-tema="comando"] .cadastro-campo textarea:focus {
  background: var(--panel);
  color: var(--text);
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent);
}
:root[data-tema="comando"] .vidro-fundo { background: rgba(60, 45, 10, .28); }
:root[data-tema="comando"] .vidro-caixa {
  background: color-mix(in srgb, var(--panel) 92%, transparent); border-color: var(--border);
  box-shadow: 0 24px 60px rgba(0,0,0,.22), 0 0 0 1px color-mix(in srgb, var(--cor) 35%, transparent); }
:root[data-tema="comando"] .vidro-caixa { background: color-mix(in srgb, var(--panel) 98%, transparent); }
:root[data-tema="comando"] .vidro-caixa h3 { color: var(--text); font-weight: 800; font-size: 1.3rem; }
:root[data-tema="comando"] .vidro-caixa p { color: var(--text); opacity: 1; font-weight: 600; font-size: 1rem; }
:root[data-tema="comando"] .vidro-caixa .vidro-sim { font-weight: 800; }
:root[data-tema="comando"] {
  --bg: #f6f6f4;
  --panel: #ffffff;
  --panel-2: #f1f1ee;
  --border: #e3e3df;
  --text: #1b1b1b;
  --muted: #6b6b6b;
  --blue: #2563eb;
  --cyan: #1d4ed8;
  --green: #2f7d4f;
  --orange: #b45309;
  --purple: #6d28d9;
  --pink: #be185d;
  --red: #c0392b;
  --display: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --grad: linear-gradient(105deg, #1b1b1b 0%, #1b1b1b 100%);
  --raio: 8px;
  --boneco-1: #6b6b6b; --boneco-2: #d4d4cf; --boneco-3: #2563eb; --boneco-4: #1d4ed8; --boneco-5: #2f7d4f;
}
:root[data-tema="comando"] body { background: var(--bg); font-family: "IBM Plex Sans", system-ui, sans-serif; text-shadow: none; }
:root[data-tema="comando"] .card, :root[data-tema="comando"] .kpi, :root[data-tema="comando"] .cos-regiao, :root[data-tema="comando"] .imp-card,
:root[data-tema="comando"] .rh-item { background: var(--panel) !important; border: 1px solid var(--border) !important; border-radius: 8px; box-shadow: none !important; }
:root[data-tema="comando"] .lateral { background: #fbfbfa !important; border-right: 1px solid var(--border); }
:root[data-tema="comando"] .topnav { background: #ffffffee !important; border-bottom: 1px solid var(--border); box-shadow: none; }
/* rotulos: IBM Plex Mono em maiusculo espacado */
:root[data-tema="comando"] .kpi span:first-child, :root[data-tema="comando"] .desb-rotulo, :root[data-tema="comando"] th,
:root[data-tema="comando"] .menu-titulo, :root[data-tema="comando"] .card h2, :root[data-tema="comando"] .rh-dados small,
:root[data-tema="comando"] .k, :root[data-tema="comando"] .cos-kpis span, :root[data-tema="comando"] .topbar p {
  font-family: "IBM Plex Mono", ui-monospace, monospace !important; text-transform: uppercase; letter-spacing: .12em; font-size: 11px;
  color: var(--muted) !important; font-weight: 500;
}
:root[data-tema="comando"] .topbar p { text-transform: none; letter-spacing: 0; font-size: 13px; font-family: "IBM Plex Sans", sans-serif !important; }
:root[data-tema="comando"] .topbar h1 { font-family: "IBM Plex Sans", sans-serif; font-weight: 500; letter-spacing: -.01em; color: var(--text);
  background: none; -webkit-text-fill-color: currentColor; text-transform: none; }
:root[data-tema="comando"] .kpi strong, :root[data-tema="comando"] .kpi b, :root[data-tema="comando"] .cos-kpis b { font-family: "IBM Plex Sans", sans-serif; font-weight: 500; color: var(--text); }
:root[data-tema="comando"] th { background: #fafaf8 !important; }
:root[data-tema="comando"] tbody tr:hover td { background: #f6f6f3; }
:root[data-tema="comando"] .item { color: #3a3a3a; }
:root[data-tema="comando"] .item.ativo, :root[data-tema="comando"] .item:hover { background: #efefeb !important; color: #111 !important; box-shadow: inset 2px 0 0 #2563eb; }
:root[data-tema="comando"] .mini-button, :root[data-tema="comando"] .text-button { font-family: "IBM Plex Mono", monospace; font-size: 12px; background: #fff; color: #333; border: 1px solid var(--border); text-transform: none; letter-spacing: 0; }
:root[data-tema="comando"] .mini-button:hover, :root[data-tema="comando"] .text-button:hover { background: #f1f1ee; }
:root[data-tema="comando"] .btn-ok, :root[data-tema="comando"] .text-button-destaque { background: #2563eb !important; color: #fff !important; border-color: #2563eb !important; box-shadow: none !important; }
:root[data-tema="comando"] input, :root[data-tema="comando"] select, :root[data-tema="comando"] textarea { background: #fff; color: var(--text); border: 1px solid var(--border); }
:root[data-tema="comando"] .login-body { background: #f6f6f4; }
:root[data-tema="comando"] .pill { font-family: "IBM Plex Mono", monospace; letter-spacing: .02em; }
:root[data-tema="comando"].com-fundo-video .fundo-veu { background: rgba(246, 246, 244, .82); }

/* ===== Fonte IBM Plex por cima de QUALQUER tema (19/10/2026, data-fonte="plex" no <html>) =====
   Textos e numeros em IBM Plex Sans; rotulos (KPI, cabecalho de tabela, titulos de card/menu) em IBM Plex Mono maiusculo espacado.
   So mexe na letra - as cores continuam as do tema. Especificidade maior que :root[data-tema=...] pra vencer o --display/--mono do tema. */
:root[data-fonte="plex"], :root[data-fonte="plex"][data-tema] {
  --display: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
:root[data-fonte="plex"] body, :root[data-fonte="plex"] button, :root[data-fonte="plex"] input, :root[data-fonte="plex"] select,
:root[data-fonte="plex"] textarea, :root[data-fonte="plex"] .topbar h1, :root[data-fonte="plex"] h2, :root[data-fonte="plex"] h3,
:root[data-fonte="plex"] .kpi strong, :root[data-fonte="plex"] .kpi b, :root[data-fonte="plex"] .item, :root[data-fonte="plex"] .topnav-btn {
  font-family: "IBM Plex Sans", system-ui, sans-serif !important;
}
:root[data-fonte="plex"] .kpi span:first-child, :root[data-fonte="plex"] .desb-rotulo, :root[data-fonte="plex"] th,
:root[data-fonte="plex"] .menu-titulo, :root[data-fonte="plex"] .card h2, :root[data-fonte="plex"] .rh-dados small,
:root[data-fonte="plex"] .cos-kpis span, :root[data-fonte="plex"] .mini-button, :root[data-fonte="plex"] .text-button,
:root[data-fonte="plex"] .pill, :root[data-fonte="plex"] code, :root[data-fonte="plex"] .mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace !important;
}
:root[data-fonte="plex"] .kpi span:first-child, :root[data-fonte="plex"] .desb-rotulo, :root[data-fonte="plex"] th,
:root[data-fonte="plex"] .menu-titulo, :root[data-fonte="plex"] .card h2, :root[data-fonte="plex"] .cos-kpis span {
  text-transform: uppercase; letter-spacing: .12em;
}
:root[data-fonte="plex"] .topbar h1 { letter-spacing: -.01em; }

/* Central de OS > Organizar: tecnico em linha do tempo (20/10/2026) */
.cos-tec-cab { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.cos-tec-nome { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cos-tec-nome h2 { margin: 0 0 4px; font-size: 1.05rem; letter-spacing: .02em; }
.cos-tec-ini { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
  background: color-mix(in srgb, var(--cyan) 18%, var(--panel-2)); color: var(--cyan); border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent); }
.cos-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cos-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 9px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); }
.cos-chip i { font-style: normal; }
.cos-tec-uso { display: flex; flex-direction: column; align-items: center; padding: 4px 14px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border); }
.cos-tec-uso b { font-size: 1.4rem; line-height: 1.1; color: var(--cyan); font-variant-numeric: tabular-nums; }
.cos-tec-uso small { color: var(--muted); font-size: 11px; }
.cos-plano-tec .cos-tec-barra { height: 10px; border-radius: 999px; margin: 0 0 22px; overflow: visible; }
.cos-tec-barra span { border-radius: 999px; }
.cos-tec-barra i { position: absolute; right: 0; top: 12px; padding: 0; font-size: 11px; line-height: 1; color: var(--muted); }
.cos-linha { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; display: flex; flex-direction: column; gap: 10px; }
.cos-linha::before { content: ""; position: absolute; left: 21px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.cos-parada { position: relative; display: grid; grid-template-columns: 118px minmax(0, 1fr) 220px; gap: 14px; align-items: start;
  padding: 12px 14px 12px 0; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border);
  border-left: 3px solid color-mix(in srgb, var(--green) 70%, transparent); }
.cos-parada.cos-prazo-vencida { border-left-color: var(--red); }
.cos-parada.cos-prazo-24h { border-left-color: var(--orange); }
.cos-parada.cos-fixa { opacity: .62; border-left-color: var(--muted); border-style: dashed; border-left-style: solid; }
.cos-parada.cos-ajustada { box-shadow: 0 0 0 2px color-mix(in srgb, var(--orange) 60%, transparent); }
.cos-p-hora { display: flex; flex-direction: column; align-items: flex-start; padding-left: 46px; position: relative; font-variant-numeric: tabular-nums; }
.cos-p-num { position: absolute; left: 6px; top: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; background: var(--panel); border: 2px solid var(--cyan); color: var(--cyan); }
.cos-fixa .cos-p-num { border-color: var(--muted); color: var(--muted); }
.cos-p-hora b { font-size: 1.15rem; line-height: 1.1; }
.cos-p-hora small { color: var(--muted); font-size: 11.5px; }
.cos-p-desl { margin-top: 6px; }
.cos-p-espera { color: var(--orange) !important; }
.cos-p-corpo { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cos-p-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cos-p-os { font-family: var(--mono, monospace); font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.cos-p-cliente { font-weight: 600; font-size: 1rem; line-height: 1.25; }
.cos-p-tipo { font-size: 12.5px; color: var(--muted); }
.cos-p-tipo b { color: var(--text); font-weight: 600; }
.cos-p-motivo { color: var(--muted); font-size: 11.5px; line-height: 1.35; opacity: .85; }
.cos-p-acoes { display: flex; flex-direction: column; gap: 6px; }
.cos-p-acoes select, .cos-p-acoes input { width: 100%; }
.cos-p-acoes .cos-contato { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 900px) {
  .cos-parada { grid-template-columns: 96px minmax(0, 1fr); }
  .cos-p-acoes { grid-column: 1 / -1; padding-left: 46px; flex-direction: row; flex-wrap: wrap; }
  .cos-p-acoes > * { flex: 1 1 160px; }
}
.cos-parada .cos-sem-rest { display: none; }
.cos-parada .cos-rest-linha:empty { display: none; }
.cos-p-acoes select, .cos-p-acoes input { font-size: 13px; padding: 6px 8px; min-height: 32px; }
.cos-parada { grid-template-columns: 140px minmax(0, 1fr) 220px; }
.cos-p-hora small { white-space: nowrap; }
@media (max-width: 900px) { .cos-parada { grid-template-columns: 120px minmax(0, 1fr); } }
/* Central de OS > Organizar: controles com rotulo e listas em cartao (20/10/2026) */
.cos-lista { display: flex; flex-direction: column; gap: 10px; }
.cos-campo { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.cos-campo > span { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cos-p-acoes { gap: 10px; padding-top: 2px; }
.cos-p-acoes select, .cos-p-acoes input[type=time] {
  appearance: none; -webkit-appearance: none; width: 100%; font: inherit; font-size: 13px; color: var(--text);
  background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid var(--border); border-radius: 9px; padding: 7px 30px 7px 11px; min-height: 34px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s; }
.cos-p-acoes input[type=time] { background-image: none; padding-right: 11px; cursor: text; }
.cos-p-acoes select:hover { border-color: color-mix(in srgb, var(--cyan) 50%, var(--border)); }
.cos-p-acoes select:focus, .cos-p-acoes input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 22%, transparent); }
.cos-p-acoes .cos-ct-confirmado select { border-color: color-mix(in srgb, var(--green) 70%, transparent); color: var(--green); }
.cos-p-acoes .cos-ct-aguardando select { border-color: color-mix(in srgb, var(--orange) 70%, transparent); color: var(--orange); }
.cos-p-acoes .cos-ct-reprogramar select { border-color: color-mix(in srgb, var(--red) 70%, transparent); color: var(--red); }
.cos-p-acoes .cos-contato small { color: var(--muted); font-size: 11px; }
.cos-p-fixa-txt { color: var(--muted); font-size: 11.5px; padding: 6px 2px; }
.cos-p-porque { font-size: 12px; color: var(--orange); background: color-mix(in srgb, var(--orange) 10%, transparent);
  border-radius: 8px; padding: 5px 9px; line-height: 1.35; align-self: flex-start; }
.cos-pend .cos-p-num { border-color: var(--orange); color: var(--orange); }
.cos-pend .cos-p-hora b { font-size: .95rem; }
.cos-envio.cos-gravada { border-left-color: var(--green); }
.cos-envio.cos-gravada .cos-p-num { border-color: var(--green); color: var(--green); }
.cos-envio.cos-falha { border-left-color: var(--red); }
.cos-envio.cos-falha .cos-p-num { border-color: var(--red); color: var(--red); }
.cos-p-param summary { cursor: pointer; font-size: 11.5px; color: var(--muted); }
.cos-p-param code { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); word-break: break-all; }
.cos-btn-mk { width: 100%; }
.cos-aprov { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 12px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border); }
.cos-aprov-dia { display: flex; flex-direction: column; }
.cos-aprov-dia b { font-size: 1.3rem; color: var(--cyan); font-variant-numeric: tabular-nums; }
.cos-aprov-dia small { color: var(--muted); font-size: 11px; }
.cos-aprov-meta { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); min-width: 0; }
.cos-aprov-meta b { color: var(--text); }
@media (max-width: 700px) { .cos-aprov { grid-template-columns: 1fr; } }
.cos-pend .cos-p-hora small, .cos-pend .cos-p-hora b { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
/* Central de OS: contato em pilulas + trocar tecnico em lista com busca (20/10/2026) */
.cos-pilulas { display: flex; flex-wrap: wrap; gap: 5px; }
.cos-pil { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--muted);
  transition: background .15s, color .15s, border-color .15s, transform .1s; }
.cos-pil i { font-style: normal; font-size: 11px; }
.cos-pil:hover { color: var(--text); border-color: color-mix(in srgb, var(--text) 30%, var(--border)); transform: translateY(-1px); }
.cos-pil.ativo { color: var(--bg); border-color: transparent; }
.cos-pil-sugerido.ativo { background: color-mix(in srgb, var(--cyan) 85%, transparent); }
.cos-pil-aguardando.ativo { background: var(--orange); }
.cos-pil-confirmado.ativo { background: var(--green); }
.cos-pil-reprogramar.ativo { background: var(--red); }
.cos-contato input[type=time] { margin-top: 4px; }
.cos-trocar { display: flex; align-items: center; gap: 8px; width: 100%; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 8px 12px; border-radius: 10px; color: var(--text); background: var(--panel);
  border: 1px dashed color-mix(in srgb, var(--cyan) 45%, var(--border)); transition: background .15s, border-color .15s, transform .1s; }
.cos-trocar i { font-style: normal; color: var(--cyan); font-size: 15px; }
.cos-trocar:hover { background: color-mix(in srgb, var(--cyan) 10%, var(--panel)); border-style: solid; transform: translateY(-1px); }
.cos-trocar.escolhido { border-style: solid; border-color: var(--orange); background: color-mix(in srgb, var(--orange) 14%, var(--panel)); }
.cos-trocar.escolhido i { color: var(--orange); }
.cos-pop-tec { position: fixed; z-index: 4000; display: flex; flex-direction: column; overflow: hidden; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--border); box-shadow: 0 18px 40px rgba(0,0,0,.45); animation: cosPop .14s ease-out; }
@keyframes cosPop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.cos-pop-tec input { margin: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; font-size: 13px; }
.cos-pop-lista { overflow-y: auto; padding: 0 6px 8px; }
.cos-pop-grupo { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 8px 6px 4px; }
.cos-pop-op { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font: inherit; font-size: 13px; cursor: pointer;
  padding: 6px 8px; border-radius: 8px; border: 0; background: none; color: var(--text); }
.cos-pop-op:hover { background: color-mix(in srgb, var(--cyan) 14%, transparent); }
.cos-pop-op.atual { opacity: .5; cursor: default; }
.cos-pop-op.tirar { color: var(--red); font-weight: 600; }
.cos-pop-op small { color: var(--muted); }
.cos-pop-ini { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700;
  background: color-mix(in srgb, var(--cyan) 16%, var(--panel-2)); color: var(--cyan); }
@media (prefers-reduced-motion: reduce) { .cos-pil, .cos-trocar { transition: none; } .cos-pop-tec { animation: none; } }
/* MAC da ONU: busca pelo cliente (20/10/2026) */
.mo-ou { display: flex; align-items: center; gap: 10px; margin: 12px 0 8px; color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.mo-ou::before, .mo-ou::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.mac-busca { position: relative; }
.mo-cli-pop { position: absolute; left: 16px; right: 16px; z-index: 50; }
.mo-cli-msg { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; min-height: 1em; }
.mo-cli-msg.ok { color: var(--green); }
.mo-cli-msg.erro { color: var(--red); }
.mo-cli-pop { top: auto; margin-top: 2px; }
.mk-nome-pppoe { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 6px; font-family: var(--mono, monospace); font-size: 12px;
  font-weight: 600; color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent); vertical-align: 1px; }
/* Busca por nome no MK: inativo em vermelho (20/10/2026) */
.mk-nome-op.inativo { opacity: 1; border-left: 3px solid var(--red); background: color-mix(in srgb, var(--red) 9%, transparent); }
.mk-nome-op.inativo b { color: color-mix(in srgb, var(--red) 80%, var(--text)); }
.mk-nome-op.inativo small { color: color-mix(in srgb, var(--red) 55%, var(--muted)); }
.mk-nome-op.inativo:hover { background: color-mix(in srgb, var(--red) 16%, transparent); }
.mk-nome-inat { background: var(--red); color: #fff; text-transform: uppercase; letter-spacing: .06em; }
/* Conciliacao de Cobrancas: controles e selos mais leves (20/10/2026) */
#tabelaConciliacao select[data-conf-meio] {
  appearance: none; -webkit-appearance: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer;
  padding: 6px 30px 6px 12px; border-radius: 999px; min-width: 120px; border: 1px solid color-mix(in srgb, var(--cyan) 35%, var(--border));
  background: color-mix(in srgb, var(--cyan) 8%, var(--panel)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;
  transition: border-color .15s, box-shadow .15s, transform .1s; }
#tabelaConciliacao select[data-conf-meio]:hover { border-color: var(--cyan); transform: translateY(-1px); }
#tabelaConciliacao select[data-conf-meio]:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 22%, transparent); }
#tabelaConciliacao input[type=checkbox][data-conf-caixa], #tabelaConciliacao input[type=checkbox][data-conf-malote] {
  appearance: none; -webkit-appearance: none; width: 38px; height: 22px; border-radius: 999px; cursor: pointer; position: relative; margin: 0;
  background: var(--panel-2); border: 1px solid var(--border); transition: background .18s, border-color .18s; vertical-align: middle; }
#tabelaConciliacao input[type=checkbox][data-conf-caixa]::after, #tabelaConciliacao input[type=checkbox][data-conf-malote]::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform .18s, background .18s; }
#tabelaConciliacao input[type=checkbox][data-conf-caixa]:checked, #tabelaConciliacao input[type=checkbox][data-conf-malote]:checked {
  background: color-mix(in srgb, var(--green) 30%, var(--panel-2)); border-color: var(--green); }
#tabelaConciliacao input[type=checkbox][data-conf-caixa]:checked::after, #tabelaConciliacao input[type=checkbox][data-conf-malote]:checked::after {
  transform: translateX(16px); background: var(--green); }
#tabelaConciliacao .conc-obs-input { border-radius: 10px; padding: 6px 10px; font-size: 12.5px; border: 1px solid var(--border); background: var(--panel);
  transition: border-color .15s, box-shadow .15s; }
#tabelaConciliacao .conc-obs-input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 18%, transparent); }
/* selos: etiqueta com faixa lateral, no lugar da "bolha" arredondada que quebrava em varias linhas */
#tabelaConciliacao td .pill { display: inline-flex; align-items: flex-start; gap: 4px; border-radius: 6px; padding: 3px 8px 3px 7px; white-space: normal;
  line-height: 1.3; font-size: 11px; letter-spacing: .02em; text-align: left; max-width: 220px; border-left: 3px solid currentColor; margin-top: 3px; }
#tabelaConciliacao td .pill.ok { border-left-color: var(--green); }
#tabelaConciliacao td .pill.mid { border-left-color: var(--orange); }
#tabelaConciliacao td .pill.no { border-left-color: var(--red); }
@media (prefers-reduced-motion: reduce) { #tabelaConciliacao select, #tabelaConciliacao input { transition: none !important; } }
#tabelaConciliacao td .pill { font-family: inherit; letter-spacing: 0; text-transform: none; font-weight: 600; font-size: 11.5px; max-width: 200px; }
/* Vigia de e-mails: banco/empresa do certificado do MK e quem mais recebe (20/10/2026) */
.ev-det { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.ev-det span { font-size: 11.5px; padding: 2px 8px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); }
.ev-det .ev-banco { font-weight: 700; color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 40%, var(--border)); }
.ev-det .ev-dest { color: var(--orange); }
/* Central de OS > Painel: OS em cartao + filtros em pilula (20/10/2026) */
.cos-painel-os { grid-template-columns: 150px minmax(0, 1fr) 200px 260px; }
.cos-painel-os .cos-p-hora b { font-size: 1.05rem; }
.cos-painel-os .cos-estrela.cos-p-num { cursor: pointer; font-size: 14px; background: var(--panel); padding: 0; line-height: 1; }
.cos-painel-os .cos-estrela.on { border-color: var(--orange); }
.cos-painel-os .cos-estrela.auto { border-color: var(--muted); opacity: .8; }
.cos-p-agenda { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; padding-top: 2px; }
.cos-p-ag-dia { font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; }
.cos-p-ag-tec { color: var(--text); line-height: 1.3; }
.cos-p-ag-nao { color: var(--muted); font-style: italic; }
.cos-filtro { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cos-filtro select, .cos-filtro input:not([type=checkbox]) {
  appearance: none; -webkit-appearance: none; font: inherit; font-size: 13px; color: var(--text); min-height: 34px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel-2); padding: 6px 14px; transition: border-color .15s, box-shadow .15s; }
.cos-filtro select { padding-right: 32px; cursor: pointer;
  background: var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; }
.cos-filtro input:not([type=checkbox]) { min-width: 220px; }
.cos-filtro select:hover, .cos-filtro input:not([type=checkbox]):hover { border-color: color-mix(in srgb, var(--cyan) 50%, var(--border)); }
.cos-filtro select:focus, .cos-filtro input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 20%, transparent); }
.cos-filtro label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
@media (max-width: 1100px) { .cos-painel-os { grid-template-columns: 130px minmax(0, 1fr); } .cos-painel-os .cos-p-agenda { padding-left: 46px; } .cos-painel-os .cos-p-acoes { grid-column: 1 / -1; padding-left: 46px; } }
/* Central de OS > Painel: mapa maximizado (20/10/2026) */
.cos-max-btn { font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 6px 14px; border-radius: 999px; color: var(--text);
  background: color-mix(in srgb, var(--cyan) 14%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--cyan) 45%, var(--border)); transition: background .15s, transform .1s; }
.cos-max-btn:hover { background: color-mix(in srgb, var(--cyan) 24%, var(--panel-2)); transform: translateY(-1px); }
.cos-mapa-max { position: fixed !important; inset: 10px; z-index: 5000; margin: 0 !important; display: flex; flex-direction: column;
  box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: cosMax .18s ease-out; }
.cos-mapa-max #pMapa { flex: 1; height: auto !important; min-height: 0; }
html.cos-sem-rolagem, html.cos-sem-rolagem body { overflow: hidden; }
@keyframes cosMax { from { opacity: .4; transform: scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cos-mapa-max { animation: none; } }
/* Central de OS: seletor de dia e alinhamento do topo (20/10/2026) */
.cos-dia { gap: 8px; }
.cos-dia input[type=date] { font: inherit; font-size: 14px; font-weight: 700; color: var(--text); color-scheme: dark; cursor: pointer;
  height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--cyan) 40%, var(--border));
  background: color-mix(in srgb, var(--cyan) 8%, var(--panel-2)); font-variant-numeric: tabular-nums; transition: border-color .15s, box-shadow .15s; }
.cos-dia input[type=date]:hover { border-color: var(--cyan); }
.cos-dia input[type=date]:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 22%, transparent); }
.cos-dia input[type=date]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .75; filter: invert(1); }
.cos-dia > .mini-button { height: 38px; min-width: 38px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; }
.cos-dia #oDiaAnt, .cos-dia #oDiaProx, .cos-dia #pDiaAnt, .cos-dia #pDiaProx { width: 38px; padding: 0; font-size: 18px; }
.cos-acao { align-items: center; gap: 14px; }
.cos-acao .btn-ok { min-height: 44px; display: inline-flex; align-items: center; }
.cos-acao > .filter-hint { margin: 0; align-self: center; }
.card > .card-head { align-items: center; }
.card > .card-head h2 { margin: 0; }
/* Organizar: quadrinhos do resumo clicaveis (20/10/2026) */
.cos-kpi { font: inherit; text-align: left; color: var(--text); cursor: pointer; background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; transition: border-color .15s, transform .12s, background .15s, box-shadow .15s; }
.cos-kpi b { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.cos-kpi:hover { border-color: color-mix(in srgb, var(--cyan) 60%, var(--border)); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.25); }
.cos-kpi.ativo { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 14%, var(--panel)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cyan) 30%, transparent); }
.cos-foco-faixa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; padding: 10px 14px; border-radius: 12px; font-size: 13.5px;
  background: color-mix(in srgb, var(--cyan) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--cyan) 45%, var(--border)); }
.cos-foco-faixa[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .cos-kpi { transition: none; } }
/* Painel de OS: envio da planilha de equipes (20/10/2026) */
.cos-equipe-up { display: inline-flex !important; align-items: center; gap: 6px; cursor: pointer; font-weight: 700; font-size: 12.5px !important; color: var(--text) !important;
  padding: 7px 14px; border-radius: 999px; border: 1px dashed color-mix(in srgb, var(--cyan) 50%, var(--border)); background: color-mix(in srgb, var(--cyan) 8%, var(--panel-2)); }
.cos-equipe-up:hover { border-style: solid; }
.cos-equipe { font-family: inherit; letter-spacing: 0; text-transform: none; font-weight: 700; }
.cos-equipe-sem { opacity: .7; border-style: dashed !important; }
/* Central de OS > Agendar uma OS (20/10/2026) */
.ag-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; margin-right: 8px; font-size: 13px;
  background: color-mix(in srgb, var(--cyan) 18%, var(--panel-2)); color: var(--cyan); border: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent); }
.ag-busca { width: 100%; font: inherit; font-size: 15px; color: var(--text); padding: 12px 18px; margin: 4px 0 12px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cyan) 40%, var(--border)); background: var(--panel-2); }
.ag-busca:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 20%, transparent); }
button.ag-os { font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; grid-template-columns: 140px minmax(0, 1fr) 220px; transition: border-color .15s, transform .1s; }
button.ag-os:hover { border-color: color-mix(in srgb, var(--cyan) 55%, var(--border)); transform: translateY(-1px); }
button.ag-os.ag-escolhida { box-shadow: 0 0 0 2px var(--cyan); }
.ag-form { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(130px, 1fr)); gap: 12px; margin: 6px 0 14px; }
.ag-form select, .ag-form input { font: inherit; font-size: 14px; color: var(--text); color-scheme: dark; min-height: 40px; padding: 6px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--panel-2); width: 100%; }
.ag-form select:focus, .ag-form input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 20%, transparent); }
.ag-agenda { padding: 10px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border); margin-bottom: 14px; }
.ag-agenda-cab { font-size: 13px; color: var(--muted); }
.ag-agenda-cab b { color: var(--text); }
.ag-agenda-lista { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13px; }
.ag-agenda-lista small { color: var(--muted); }
.ag-agenda-lista .ag-choca { color: var(--red); font-weight: 700; }
.ag-acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ag-desagendar { color: var(--red) !important; border-color: color-mix(in srgb, var(--red) 50%, var(--border)) !important; }
@media (max-width: 800px) { .ag-form { grid-template-columns: 1fr 1fr; } button.ag-os { grid-template-columns: 110px minmax(0, 1fr); } }
.cos-p-ag-equipe { display: inline-block; align-self: flex-start; margin-top: 4px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent); }
.cos-p-ag-equipe.espera { color: var(--orange); background: color-mix(in srgb, var(--orange) 12%, transparent); border-color: color-mix(in srgb, var(--orange) 40%, transparent); }
.cos-p-ag-equipe.sem { color: var(--muted); background: transparent; border-style: dashed; border-color: var(--border); font-weight: 600; }
.ag-outras-cab { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.ag-outras { list-style: none; padding-left: 0; }
.ag-outras .pill { font-family: inherit; letter-spacing: 0; text-transform: none; font-size: 11px; margin-right: 6px; }
/* Agendar uma OS: lista propria do tecnico com numeros coloridos (20/10/2026) */
.ag-tec-select { position: absolute !important; opacity: 0; pointer-events: none; width: 1px !important; height: 1px; }
.ag-tec-btn, .ag-pop-op { display: flex; align-items: center; gap: 10px; width: 100%; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.ag-tec-btn { min-height: 44px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); }
.ag-tec-btn:hover { border-color: color-mix(in srgb, var(--cyan) 55%, var(--border)); }
.ag-tec-vazio { color: var(--muted); }
.ag-tec-seta { font-style: normal; color: var(--muted); margin-left: auto; }
.ag-pop-op { padding: 7px 8px; border-radius: 10px; border: 0; background: none; }
.ag-pop-op:hover { background: color-mix(in srgb, var(--cyan) 12%, transparent); }
.ag-pop-op.atual { background: color-mix(in srgb, var(--cyan) 18%, transparent); }
.ag-pop-op[disabled] { opacity: .45; cursor: not-allowed; }
.ag-tec-ini { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800;
  background: color-mix(in srgb, var(--cyan) 16%, var(--panel-2)); color: var(--cyan); }
.ag-tec-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.ag-tec-nome small { color: var(--muted); font-weight: 500; }
.ag-tec-barra { display: block; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; max-width: 220px; }
.ag-tec-barra i { display: block; height: 100%; border-radius: inherit; }
.ag-tec-num { flex: none; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.ag-tec-num b { font-size: 13px; }
.ag-c-livre { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.ag-c-ok { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); border-color: color-mix(in srgb, var(--green) 35%, transparent); }
.ag-c-mid { color: var(--orange); background: color-mix(in srgb, var(--orange) 14%, transparent); border-color: color-mix(in srgb, var(--orange) 40%, transparent); }
.ag-c-no { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.ag-c-tot { color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, transparent); border-color: color-mix(in srgb, var(--cyan) 30%, transparent); }
.ag-tec-barra i.ag-c-livre, .ag-tec-barra i.ag-c-ok { background: var(--green); }
.ag-tec-barra i.ag-c-mid { background: var(--orange); }
.ag-tec-barra i.ag-c-no { background: var(--red); }
.ag-form .cos-campo { position: relative; }
.rank-canal.rc-ativ { color: var(--green); border-style: dashed; border-color: color-mix(in srgb, var(--green) 45%, var(--border)); margin-left: 6px; }
/* Dashboard: ranking de atendentes sem barra de rolagem (mostra todos de uma vez, 20/10/2026) */
.table-wrap.compact:has(#attendantRankingTable) { max-height: none; overflow-y: visible; }
/* Ranking de hoje: etiquetas numa linha so, sem o rotulo "Por canal" (20/10/2026) */
.rank-canais-txt { flex-wrap: nowrap !important; gap: 4px !important; overflow-x: auto; scrollbar-width: none; }
.rank-canais-txt::-webkit-scrollbar { display: none; }
.rank-canais-txt .rank-canal { flex: none; font-size: 11px !important; padding: 2px 7px !important; margin-left: 0 !important; white-space: nowrap; }
/* Cartao do MK no cadastro: parte que o MK nao entregou a tempo (20/10/2026) */
.mk-pend { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255, 170, 60, .45); background: rgba(255, 170, 60, .08); color: var(--orange, #ffb04a); font-size: 13px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* WhatsApp (alertas) - 20/10/2026 */
.wa-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.wa-qr { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.wa-qr img { width: 260px; height: 260px; background: #fff; padding: 8px; border-radius: 12px; }
.wa-qr ol { margin: 0; padding-left: 18px; display: grid; gap: 6px; max-width: 320px; }
.wa-ok { color: var(--green); font-size: 15px; }
.wa-form { display: grid; gap: 10px; }
.wa-form textarea { width: 100%; }
.wa-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.wa-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.wa-tab th, .wa-tab td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); }
/* Relatorio Dude: previa do alerta agrupado (20/10/2026) */
.dag-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.dag { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--panel-2); }
.dag.aberto { border-color: rgba(255, 80, 80, .55); }
.dag-topo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.dag-msg { white-space: pre-wrap; font-family: var(--mono, monospace); font-size: 12.5px; line-height: 1.45; margin: 0; padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, .22); }
.dag-msg.volta { margin-top: 6px; border-left: 3px solid var(--green); }
.dag-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.dag-bot { border: 1px solid var(--border); background: var(--panel-2); color: var(--text); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: 13px; }
.dag-bot.on { border-color: var(--green); }
.dag-bot.off { border-color: var(--red); opacity: .85; }
.dag-bot:disabled { cursor: default; opacity: .6; }
.wa-dest { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.dag-msg.interno { opacity: .7; border-left: 3px dashed var(--orange); }
.mo-vlan { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.mo-vlan input { width: 130px; }
.mo-vlan-errada { margin: 8px 0; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255, 170, 60, .55); background: rgba(255, 170, 60, .1); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mo-vlan-ok { color: var(--green); }

/* Clientes por Painel (Rede, 21/10/2026) */
.rc-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.rc-form input, .rc-form select { min-width: 0; }
.rc-form input[name="nome"] { flex: 1 1 220px; }
.rc-form input[name="porta"] { width: 80px; }
.rc-check { display: inline-flex; gap: 6px; align-items: center; font-size: .85rem; color: var(--muted); }
.rc-tabela select { max-width: 170px; }
.rc-detalhe > td { background: rgba(127, 127, 127, .06); padding: 10px 14px; }
.rc-clientes { font-size: .85rem; }

/* Clientes por Painel: campos em "chip" (22/10/2026 - pedido do Leonardo: nada de retangulo reto/nativo) */
.rc-chip {
  appearance: none; -webkit-appearance: none;
  padding: 5px 30px 5px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; letter-spacing: .01em;
  color: var(--text); cursor: pointer; max-width: 190px;
  border: 1px solid color-mix(in srgb, var(--chip, var(--cyan)) 45%, transparent);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239fb0c4' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center,
    linear-gradient(135deg, color-mix(in srgb, var(--chip, var(--cyan)) 22%, transparent), color-mix(in srgb, var(--chip, var(--cyan)) 6%, transparent));
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--chip, var(--cyan)) 40%, transparent);
  transition: box-shadow .18s, border-color .18s, transform .12s;
}
.rc-chip:hover { border-color: var(--chip, var(--cyan)); transform: translateY(-1px); }
.rc-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--chip, var(--cyan)) 35%, transparent); }
.rc-chip option { background: var(--panel); color: var(--text); font-weight: 500; }
.rc-chip[data-tipo="painel"] { --chip: var(--green); }
.rc-chip[data-tipo="ptp_ap"] { --chip: var(--blue); }
.rc-chip[data-tipo="ptp_st"] { --chip: var(--purple); }
.rc-chip[data-tipo="roteador"], .rc-chip[data-tipo="switch"] { --chip: var(--orange); }
.rc-chip[data-tipo="autenticador"] { --chip: var(--pink); }
.rc-chip[data-tipo="energia"], .rc-chip[data-tipo="camera"], .rc-chip[data-tipo="outro"] { --chip: var(--muted); }
.rc-chip-senha { --chip: var(--cyan); }
.rc-chip-senha[data-auto="1"] { --chip: var(--muted); color: var(--muted); font-weight: 500; }
.rc-nunca { font-size: .78rem; color: var(--muted); font-style: italic; opacity: .8; }
.rc-form input, .rc-form .mini-button { border-radius: 999px; padding: 7px 14px; }
@media (prefers-reduced-motion: reduce) { .rc-chip { transition: none; } .rc-chip:hover { transform: none; } }

/* ===================== Via Radio (22/10/2026): dashboard, paineis, clientes, enlaces, acessos ===================== */
.rv-abas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 18px; }
.rv-aba {
  padding: 8px 16px; border-radius: 999px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: .88rem;
  border: 1px solid var(--border); background: color-mix(in srgb, var(--panel) 70%, transparent); transition: all .18s;
}
.rv-aba:hover { color: var(--text); border-color: var(--cyan); transform: translateY(-1px); }
.rv-aba.ativa { color: var(--bg); background: linear-gradient(135deg, var(--cyan), var(--blue)); border-color: transparent; box-shadow: 0 6px 18px color-mix(in srgb, var(--cyan) 30%, transparent); }
.rv-sync { margin-left: auto; font-size: .8rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.rv-pulso { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); animation: rv-pulso 1.2s infinite; }
@keyframes rv-pulso { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cyan) 60%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.rv-botao { padding: 8px 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--green) 50%, transparent); cursor: pointer;
  background: linear-gradient(135deg, color-mix(in srgb, var(--green) 25%, transparent), color-mix(in srgb, var(--green) 8%, transparent));
  color: var(--text); font-weight: 600; font-size: .85rem; transition: transform .15s; }
.rv-botao:hover { transform: translateY(-1px); }
.rv-botao:disabled { opacity: .5; cursor: default; transform: none; }

.rv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.rv-kpi { position: relative; overflow: hidden; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--border);
  background: linear-gradient(160deg, color-mix(in srgb, var(--panel-2) 90%, transparent), color-mix(in srgb, var(--panel) 85%, transparent)); }
.rv-kpi::after { content: ""; position: absolute; inset: auto -30px -40px auto; width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--cyan) 22%, transparent), transparent 70%); }
.rv-kpi span { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rv-kpi strong { display: block; font-size: 1.9rem; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.rv-kpi small { color: var(--muted); font-size: .78rem; }
.rv-kpi.rv-kpi-destaque { border-color: color-mix(in srgb, var(--cyan) 50%, transparent); }
.rv-kpi.rv-kpi-destaque strong { background: linear-gradient(135deg, var(--cyan), var(--green)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rv-kpi.rv-kpi-alerta { border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.rv-kpi.rv-kpi-alerta::after { background: radial-gradient(circle, color-mix(in srgb, var(--red) 25%, transparent), transparent 70%); }

.rv-atencao { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; margin-bottom: 14px; }
.rv-alerta { display: flex; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--orange) 35%, transparent);
  background: color-mix(in srgb, var(--orange) 8%, transparent); }
.rv-alerta b { font-size: 1.3rem; }
.rv-alerta strong { display: block; font-size: .9rem; }
.rv-alerta small { color: var(--muted); font-size: .78rem; }

.rv-graficos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rv-card { padding: 16px 18px; border-radius: 18px; border: 1px solid var(--border); background: color-mix(in srgb, var(--panel) 92%, transparent); margin-bottom: 14px; min-width: 0; }
.rv-graficos .rv-card { margin: 0; }
.rv-card h3 { margin: 0 0 12px; font-size: .95rem; }
.rv-largo { grid-column: 1 / -1; }
.rv-canvas { position: relative; height: 240px; }
.rv-canvas.rv-alto { height: 340px; }

.rv-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.rv-filtros-dentro { margin: 0; }
.rv-busca { flex: 1 1 220px; max-width: 360px; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); }
.rv-busca:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 25%, transparent); }
.rv-contador { color: var(--muted); font-size: .82rem; margin-left: auto; }
.rv-vazio { color: var(--muted); font-style: italic; font-size: .85rem; }
/* historico de sinal dos PTP (27/10/2026) */
.rv-rest-modal { max-width: 760px; width: calc(100vw - 32px); }
.rv-rest-passo { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.rv-rest-passo small { color: var(--muted); }
.rv-rest-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rv-rest-linha .rv-busca { min-width: 160px; flex: 1 1 160px; }
.rv-rest-linha .rv-rest-porta { flex: 0 0 80px; min-width: 80px; }
.rv-rest-check { display: flex; gap: 6px; align-items: center; font-size: .85rem; color: var(--muted); }
.rv-rest-acoes { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 8px; }
.rv-rest-vai { border-color: var(--orange) !important; color: var(--orange) !important; }
.rv-rest-portas { margin: 4px 0 0; padding: 8px 12px; list-style: none; border: 1px solid var(--border); border-radius: 12px; font-size: .82rem;
  display: flex; flex-direction: column; gap: 4px; max-height: 210px; overflow: auto; }
.rv-rest-portas li { flex: 0 0 auto; display: grid; grid-template-columns: minmax(110px, 190px) 1fr; gap: 10px; align-items: start;
  padding: 3px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); }
.rv-rest-portas li:last-child { border-bottom: 0; }
.rv-rest-portas li > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-rest-portas li > div { min-width: 0; }
.rv-rest-um { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-rest-mais summary { cursor: pointer; color: var(--cyan); font-size: .76rem; list-style: none; }
.rv-rest-mais summary::-webkit-details-marker { display: none; }
.rv-rest-mais > div { padding-left: 12px; color: var(--muted); font-size: .78rem; }
.rv-rest-portas li.resetado { color: var(--orange); }
.rv-rest-achou { color: var(--orange); }
.rv-rest-erro { display: block; color: var(--red); font-weight: 700; background: color-mix(in srgb, var(--red) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 45%, transparent); border-radius: 10px; padding: 6px 10px; }
.rv-rest-log-erro { color: var(--red); border-color: color-mix(in srgb, var(--red) 55%, transparent) !important; }
[data-filtro-sit] { cursor: pointer; }
[data-filtro-sit]:hover { filter: brightness(1.12); }
.rv-bk-motivo { color: var(--orange) !important; }
.rv-rest-portas li.pisca { animation: rv-rest-pisca 1s steps(2, start) infinite; background: color-mix(in srgb, var(--orange) 18%, transparent); border-radius: 8px; }
@keyframes rv-rest-pisca { 50% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .rv-rest-portas li.pisca { animation: none; } }
.rv-rest-arq { cursor: pointer; }
.rv-rest-log { max-height: 260px; overflow: auto; background: color-mix(in srgb, var(--bg) 85%, transparent); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 12px; font-size: .8rem; white-space: pre-wrap; }
.rv-ptp-card { margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.rv-ptp-card h3 { margin: 0; font-size: 1rem; }
.rv-ptp-item { display: grid; grid-template-columns: minmax(200px, 1.3fr) minmax(220px, 1.4fr) minmax(200px, 1fr); gap: 12px; align-items: center;
  padding: 8px 12px; border-radius: 12px; border: 1px solid var(--border); border-left-width: 4px; }
.rv-ptp-item.piorou { border-left-color: var(--red); background: color-mix(in srgb, var(--red) 8%, transparent); }
.rv-ptp-num { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: .85rem; }
.rv-piora { color: var(--red); font-weight: 700; white-space: nowrap; }
.rv-piora-ok { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.rv-ptp-graf { width: 100%; max-width: 220px; height: 46px; display: block; }
.rv-ptp-graf polyline { fill: none; stroke: var(--cyan); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.rv-ptp-graf-leg { color: var(--muted); font-size: .72rem; }
.rv-ptp-rot { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.rv-ptp-calc { color: var(--muted); font-weight: 400; font-style: italic; }
.rv-ptp-tudo-ok { margin: 0; color: var(--green); font-weight: 600; }
.rv-ptp-todos summary { cursor: pointer; color: var(--cyan); font-size: .85rem; margin: 4px 0; }
.rv-ptp-todos[open] { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 900px) { .rv-ptp-item { grid-template-columns: 1fr; } }

.rv-sinal { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rv-sinal.rv-bom { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); }
.rv-sinal.rv-medio { background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange); }
.rv-sinal.rv-ruim { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }

.rv-paineis { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.rv-painel { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; border: 1px solid var(--border);
  background: linear-gradient(165deg, color-mix(in srgb, var(--panel-2) 95%, transparent), color-mix(in srgb, var(--panel) 90%, transparent)); transition: border-color .2s, transform .2s; }
.rv-painel:hover { border-color: color-mix(in srgb, var(--cyan) 50%, transparent); transform: translateY(-2px); }
.rv-painel.rv-falhou { opacity: .7; border-style: dashed; }
.rv-painel header { display: flex; justify-content: space-between; gap: 10px; }
.rv-painel h4 { margin: 0; font-size: .98rem; }
.rv-painel header small { color: var(--muted); font-size: .76rem; }
.rv-qtd { text-align: center; min-width: 64px; padding: 6px 10px; border-radius: 14px; background: color-mix(in srgb, var(--cyan) 14%, transparent); }
.rv-qtd strong { display: block; font-size: 1.5rem; line-height: 1; color: var(--cyan); }
.rv-qtd span { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.rv-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-tags span { font-size: .72rem; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); }
.rv-tags .rv-tag-alerta { background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange); }
.rv-medidores { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.rv-medidor span { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.rv-medidor b { float: right; font-size: .8rem; font-variant-numeric: tabular-nums; }
.rv-medidor i { display: block; height: 6px; margin-top: 5px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 18%, transparent); overflow: hidden; }
.rv-medidor em { display: block; height: 100%; border-radius: 999px; transition: width .6s ease; }
.rv-medidor em.rv-bom { background: linear-gradient(90deg, var(--cyan), var(--green)); }
.rv-medidor em.rv-medio { background: linear-gradient(90deg, var(--orange), #fbbf24); }
.rv-medidor em.rv-ruim { background: linear-gradient(90deg, var(--red), var(--orange)); }
.rv-medidor em.rv-neutro { background: var(--muted); }
.rv-ver { align-self: flex-start; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; font-size: .8rem; }
.rv-ver:hover { border-color: var(--cyan); }
.rv-lista-cli { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow: auto; }
.rv-lista-cli li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 7px 10px; border-radius: 12px; background: color-mix(in srgb, var(--muted) 8%, transparent); }
.rv-lista-cli small { grid-column: 1 / -1; color: var(--muted); font-size: .72rem; }
.rv-cli-nome { font-weight: 600; font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-painel footer { margin-top: auto; font-size: .7rem; color: var(--muted); }

.rv-tabela th[data-ord] { cursor: pointer; user-select: none; }
.rv-tabela th[data-ord]::after { content: attr(data-seta); margin-left: 4px; }

.rv-enlaces { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; }
.rv-canvas.rv-baixo { height: 200px; }
.rv-enlace-ap { display: flex; flex-direction: column; gap: 1px; }
.rv-enlace-ap small { font-size: .64rem; color: var(--muted); letter-spacing: .1em; }
.rv-enlace-ap span { font-size: .74rem; color: var(--muted); }
.rv-enlace-sts { display: flex; flex-direction: column; gap: 8px; }
.rv-enlace-sts .rv-enlace-pontas { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding-top: 8px; border-top: 1px dashed var(--border); }
.rv-enlace-sts .rv-enlace-pontas > div:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.rv-enlace-sts .rv-enlace-pontas > div:nth-child(2) strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-enlace-sts .rv-enlace-pontas > div:nth-child(2) small { font-size: .64rem; color: var(--muted); letter-spacing: .1em; }
.rv-enlace-sts .rv-enlace-pontas > div:nth-child(2) span { font-size: .74rem; color: var(--muted); }
.rv-enlace-sts .rv-enlace-num { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: flex-end; font-size: .8rem; }
@media (max-width: 600px) { .rv-enlace-sts .rv-enlace-pontas { grid-template-columns: 1fr; } .rv-enlace-sts .rv-enlace-num { justify-content: flex-start; } }
.rv-mkcli { display: inline-block; font-size: .72rem; color: var(--cyan); }
.rv-mkcli.rv-mk-dif { color: var(--orange); font-weight: 600; }
.rv-mkcli.rv-mk-nao { color: var(--muted); font-style: italic; }
.rv-lista-cli .rv-mkcli { grid-column: 1 / -1; }
.rv-sts { list-style: none; margin: 0; padding: 6px 0 0; display: flex; flex-direction: column; gap: 4px; border-top: 1px dashed var(--border); }
.rv-sts li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .8rem; }
.rv-sts li > span:first-child { font-size: .64rem; color: var(--muted); letter-spacing: .1em; }
.rv-sts small { color: var(--muted); }
.rv-cidade-bloco { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.rv-cidade-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.rv-cidade-cab h3 { margin: 0; font-family: var(--display); font-size: 1.05rem; letter-spacing: .06em; color: var(--cyan); }
.rv-cidade-cab span { font-size: .8rem; color: var(--muted); }
.rv-cidade-cab .rv-entrada { color: var(--text); padding: 2px 10px; border-radius: 999px; border: 1px dashed var(--border); }
.rv-cidade-cab .rv-entrada b { color: var(--cyan); }
.rv-sep { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.rv-sep::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }
.rv-sep b { padding: 1px 9px; border-radius: 999px; border: 1px solid var(--border); font-size: .72rem; letter-spacing: 0; color: var(--cyan); }
.rv-enlace { padding: 14px 16px; border-radius: 18px; border: 1px solid var(--border); border-left-width: 4px; background: color-mix(in srgb, var(--panel) 92%, transparent); display: flex; flex-direction: column; gap: 10px; }
.rv-borda-bom { border-left-color: var(--green); }
.rv-borda-medio { border-left-color: var(--orange); }
.rv-borda-ruim { border-left-color: var(--red); }
.rv-borda-neutro { border-left-color: var(--muted); }
.rv-enlace-pontas { display: grid; grid-template-columns: 1fr 90px 1fr; align-items: center; gap: 8px; }
.rv-enlace-pontas > div:first-child, .rv-enlace-pontas > div:last-child { min-width: 0; }
.rv-enlace-pontas small { font-size: .65rem; letter-spacing: .1em; color: var(--muted); }
.rv-enlace-pontas strong { display: block; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-enlace-pontas span { font-size: .72rem; color: var(--muted); }
.rv-enlace-linha { position: relative; text-align: center; }
.rv-enlace-linha i { display: block; height: 2px; background: repeating-linear-gradient(90deg, var(--cyan) 0 8px, transparent 8px 14px); background-size: 28px 2px; animation: rv-fluxo 1.4s linear infinite; }
.rv-enlace-linha b { display: inline-block; margin-top: 4px; font-size: .7rem; color: var(--muted); }
@keyframes rv-fluxo { to { background-position: 28px 0; } }
.rv-enlace-num { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: .8rem; color: var(--muted); }
.rv-enlace-num b { color: var(--text); }

@media (max-width: 900px) { .rv-graficos { grid-template-columns: 1fr; } .rv-enlaces { grid-template-columns: 1fr; } .rv-sync { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .rv-enlace-linha i, .rv-pulso { animation: none; } .rv-painel:hover, .rv-aba:hover { transform: none; } }

/* Via Radio > Backups (22/10/2026) */
.rv-nota { font-size: .82rem; color: var(--muted); padding: 10px 14px; border-radius: 14px; border: 1px dashed var(--border); margin: 0 0 14px; }
.rv-backups { display: flex; flex-direction: column; gap: 8px; }
.rv-bk { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px;
  border-radius: 16px; border: 1px solid var(--border); border-left: 4px solid var(--cyan); background: color-mix(in srgb, var(--panel) 92%, transparent); }
.rv-bk-mudou { border-left-color: var(--orange); }
.rv-bk-sem { border-left-color: var(--muted); border-style: dashed; grid-template-columns: minmax(0, 1fr) auto; opacity: .75; }
.rv-bk-id strong { display: block; font-size: .92rem; font-variant-numeric: tabular-nums; }
.rv-bk-id small { color: var(--muted); font-size: .75rem; }
.rv-bk-info { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: .8rem; color: var(--muted); }
.rv-baixar { text-decoration: none; white-space: nowrap; }
.rv-mudancas { grid-column: 1 / -1; list-style: none; margin: 4px 0 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--muted) 8%, transparent);
  display: flex; flex-direction: column; gap: 4px; font-size: .78rem; }
.rv-mudancas li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 16px minmax(0, 1fr); gap: 8px; align-items: center; }
.rv-mudancas code { color: var(--cyan); overflow: hidden; text-overflow: ellipsis; }
.rv-mudancas span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-mudancas li span:last-child { color: var(--text); font-weight: 600; }
@media (max-width: 800px) { .rv-bk { grid-template-columns: 1fr; } }
.rv-bk-clica { cursor: pointer; transition: border-color .2s, background .2s; }
.rv-bk-clica:hover { border-color: color-mix(in srgb, var(--cyan) 45%, transparent); }
.rv-bk-clica.aberto { background: color-mix(in srgb, var(--panel-2) 95%, transparent); }
.rv-modelo { color: var(--text); font-weight: 600; }
.rv-tag-aberto { color: var(--orange); font-weight: 600; }
.rv-rs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 4px; cursor: default; }
.rv-rs-campo { padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--muted) 9%, transparent); border: 1px solid transparent; min-width: 0; }
.rv-rs-campo span { display: block; font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.rv-rs-campo b { display: block; font-size: .88rem; margin-top: 2px; overflow-wrap: anywhere; }
.rv-rs-alerta { border-color: color-mix(in srgb, var(--orange) 45%, transparent); background: color-mix(in srgb, var(--orange) 10%, transparent); }
.rv-rs-alerta b { color: var(--orange); }
.rv-rs-ok b { color: var(--green); }

/* ===================== Frota (22/10/2026): painel, OS de manutencao, veiculos ===================== */
.fr-per { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--muted); cursor: pointer; font-weight: 600; font-size: .82rem; }
.fr-per:hover { color: var(--text); border-color: var(--cyan); }
.fr-per.ativo { color: var(--bg); background: linear-gradient(135deg, var(--cyan), var(--blue)); border-color: transparent; }
.fr-data { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); color-scheme: dark; }
.fr-excel { text-decoration: none; margin-left: auto; }
.rv-alerta.fr-vencida { border-color: color-mix(in srgb, var(--red) 45%, transparent); background: color-mix(in srgb, var(--red) 9%, transparent); }

.fr-lista { display: flex; flex-direction: column; gap: 8px; }
.fr-os { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto 130px; gap: 14px; align-items: center; padding: 12px 16px; cursor: pointer;
  border-radius: 16px; border: 1px solid var(--border); border-left: 4px solid var(--muted); background: color-mix(in srgb, var(--panel) 92%, transparent); transition: transform .15s, border-color .15s; }
.fr-os:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--cyan) 45%, transparent); }
.fr-os-concluida { border-left-color: var(--green); } .fr-os-andamento, .fr-os-aberta { border-left-color: var(--cyan); }
.fr-os-cancelada { border-left-color: var(--red); opacity: .7; } .fr-os-rascunho { border-left-color: var(--muted); border-style: dashed; }
.fr-os-num { text-align: center; } .fr-os-num span { display: block; font-size: .62rem; color: var(--muted); letter-spacing: .1em; }
.fr-os-num b { font-size: 1rem; font-variant-numeric: tabular-nums; }
.fr-os-main strong { display: block; } .fr-os-main small { color: var(--muted); font-size: .78rem; }
.fr-os-main p { margin: 4px 0 0; font-size: .8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-os-meta { display: flex; gap: 10px; align-items: center; font-size: .8rem; color: var(--muted); flex-wrap: wrap; justify-content: flex-end; }
.fr-os-total { text-align: right; font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.fr-pill { padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); }
.fr-pill.fr-concluida { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); }
.fr-pill.fr-andamento, .fr-pill.fr-aberta { background: color-mix(in srgb, var(--cyan) 18%, transparent); color: var(--cyan); }
.fr-pill.fr-cancelada { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }

.fr-veiculos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.fr-veic { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 18px; cursor: pointer; border: 1px solid var(--border);
  background: linear-gradient(165deg, color-mix(in srgb, var(--panel-2) 95%, transparent), color-mix(in srgb, var(--panel) 90%, transparent)); transition: transform .15s, border-color .15s; }
.fr-veic:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cyan) 50%, transparent); }
.fr-veic.fr-inativo { opacity: .55; }
.fr-veic header { display: flex; gap: 6px; align-items: center; }
.fr-placa { font-family: var(--mono, monospace); font-weight: 800; letter-spacing: .12em; padding: 4px 10px; border-radius: 8px; border: 2px solid var(--text);
  background: color-mix(in srgb, var(--text) 8%, transparent); font-size: .9rem; }
.fr-tag { font-size: .68rem; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 15%, transparent); color: var(--muted); }
.fr-veic small { color: var(--muted); font-size: .78rem; }
.fr-veic-num { display: grid; grid-template-columns: 1.4fr .6fr 1fr; gap: 8px; margin-top: 6px; }
.fr-veic-num span, .fr-valores span { display: block; font-size: .64rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.fr-veic-num b { font-variant-numeric: tabular-nums; font-size: .92rem; }
.fr-veic-al, .fr-prog { display: flex; flex-wrap: wrap; gap: 6px; }
.fr-al { font-size: .72rem; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--orange) 15%, transparent); color: var(--orange); }
.fr-al-venc { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
.fr-al-ab { background: color-mix(in srgb, var(--cyan) 15%, transparent); color: var(--cyan); }

.fr-modal { position: fixed; inset: 0; z-index: 900; display: flex; align-items: flex-start; justify-content: center; padding: 3vh 16px; overflow: auto;
  background: rgba(3, 8, 18, .62); backdrop-filter: blur(6px); }
.fr-modal[hidden] { display: none; }
body.fr-travado { overflow: hidden; }
.fr-janela { width: min(1100px, 100%); border-radius: 22px; border: 1px solid color-mix(in srgb, var(--cyan) 30%, var(--border));
  background: linear-gradient(170deg, color-mix(in srgb, var(--panel-2) 96%, transparent), color-mix(in srgb, var(--panel) 96%, transparent));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45); animation: fr-entra .22s ease; }
.fr-janela-veic { width: min(980px, 100%); }
@keyframes fr-entra { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.fr-cab { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 2;
  background: linear-gradient(var(--panel-2), var(--panel-2)), var(--bg); border-radius: 22px 22px 0 0; }
.fr-cab h2 { margin: 2px 0 0; font-size: 1.25rem; }
.fr-kicker { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.fr-status { margin-left: auto; }
.fr-x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--text); font-size: 1.3rem; cursor: pointer; }
.fr-x:hover { border-color: var(--red); color: var(--red); }
.fr-form { padding: 6px 22px 10px; }
.fr-sec { padding: 14px 0; border-bottom: 1px dashed var(--border); }
.fr-sec h3 { margin: 0 0 10px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 14px; }
.fr-form label { display: flex; flex-direction: column; gap: 5px; font-size: .74rem; color: var(--muted); min-width: 0; }
.fr-largo { grid-column: 1 / -1; }
.fr-form input:not([type="checkbox"]):not([type="file"]), .fr-form textarea {
  padding: 8px 14px; border-radius: 14px; border: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 55%, var(--panel)); color: var(--text); font: inherit; font-size: .88rem; min-width: 0; }
.fr-form input:focus, .fr-form textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 22%, transparent); }
.fr-form input:disabled, .fr-form textarea:disabled, .fr-form select:disabled { opacity: .75; cursor: default; }
.fr-form .rc-chip { max-width: none; padding-top: 8px; padding-bottom: 8px; }
.fr-form .rc-check { flex-direction: row; align-items: center; }
.fr-dica { font-size: .74rem; color: var(--muted); font-style: italic; }
.fr-info { grid-column: span 2; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 8px 12px; border-radius: 14px; background: color-mix(in srgb, var(--cyan) 7%, transparent); font-size: .82rem; }
.fr-info b { display: block; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.fr-itens { display: flex; flex-direction: column; gap: 6px; }
.fr-item { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.6fr) 70px 110px 110px 100px 34px; gap: 6px; align-items: center; }
.fr-item .rc-chip { padding-top: 7px; padding-bottom: 7px; }
.fr-i-tot { text-align: right; font-variant-numeric: tabular-nums; font-size: .88rem; }
.fr-i-x { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; }
.fr-i-x:hover { color: var(--red); border-color: var(--red); }
.fr-add { align-self: flex-start; margin-top: 8px; padding: 6px 14px; border-radius: 999px; border: 1px dashed color-mix(in srgb, var(--cyan) 50%, var(--border));
  background: transparent; color: var(--cyan); cursor: pointer; font-weight: 600; font-size: .82rem; display: inline-flex; }
.fr-add:hover { background: color-mix(in srgb, var(--cyan) 10%, transparent); }
.fr-sub { margin: 8px 0 0; text-align: right; color: var(--muted); font-size: .85rem; }
.fr-sub b { color: var(--text); }
.fr-valores { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 10px; }
.fr-valores > div, .fr-valores > label { padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--muted) 8%, transparent); }
.fr-valores b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.fr-total { background: linear-gradient(135deg, color-mix(in srgb, var(--green) 22%, transparent), color-mix(in srgb, var(--cyan) 14%, transparent)) !important;
  border: 1px solid color-mix(in srgb, var(--green) 45%, transparent); }
.fr-total b { font-size: 1.4rem; color: var(--green); }
.fr-anexos { display: flex; flex-wrap: wrap; gap: 8px; }
.fr-anexo { display: inline-flex; gap: 6px; align-items: center; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 12%, transparent); font-size: .82rem; }
.fr-anexo a { color: var(--text); text-decoration: none; }
.fr-anexo button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 1rem; }
.fr-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--muted); }
.fr-log b { color: var(--text); font-variant-numeric: tabular-nums; }
.fr-rodape { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding: 14px 22px; border-top: 1px solid var(--border); position: sticky; bottom: 0;
  background: linear-gradient(var(--panel-2), var(--panel-2)), var(--bg); border-radius: 0 0 22px 22px; box-shadow: 0 -10px 24px rgba(0,0,0,.25); }
.fr-btn { padding: 9px 18px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; font-weight: 600; font-size: .86rem; text-decoration: none; }
.fr-btn:hover { border-color: var(--cyan); }
.fr-btn-pri { background: linear-gradient(135deg, var(--cyan), var(--blue)); color: var(--bg); border-color: transparent; }
.fr-btn-ok { background: linear-gradient(135deg, var(--green), color-mix(in srgb, var(--green) 60%, var(--cyan))); color: var(--bg); border-color: transparent; }
.fr-btn-no { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.fr-btn[hidden] { display: none; }
.fr-clica { cursor: pointer; }
.fr-clica:hover td { background: color-mix(in srgb, var(--cyan) 6%, transparent); }
.fr-valores-veic { margin-top: 4px; }
@media (max-width: 900px) {
  .fr-os { grid-template-columns: 60px minmax(0, 1fr); } .fr-os-meta, .fr-os-total { grid-column: 2; justify-content: flex-start; text-align: left; }
  .fr-item { grid-template-columns: 1fr 1fr; } .fr-i-desc, .fr-i-det { grid-column: 1 / -1; } .fr-info { grid-column: 1 / -1; }
}
.fr-editando { font-size: .72rem; font-weight: 700; color: var(--orange); margin-left: 6px; }
.fr-item { row-gap: 4px; }
.fr-garantia { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 2px 4px 8px 12px; font-size: .74rem; color: var(--muted); }
.fr-garantia input { padding: 4px 10px !important; border-radius: 999px !important; font-size: .78rem !important; color-scheme: dark; }
.fr-garantia button { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; font-size: .72rem; }
.fr-garantia button:hover:not(:disabled) { color: var(--text); border-color: var(--green); }
.fr-gar-info { font-style: normal; font-weight: 600; }
.fr-gar-info.ok { color: var(--green); } .fr-gar-info.perto { color: var(--orange); } .fr-gar-info.venc { color: var(--red); }
.fr-gar-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin-top: 6px; }
.fr-gar-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--green) 7%, transparent); border: 1px solid color-mix(in srgb, var(--green) 25%, transparent); font-size: .8rem; }
.fr-gar-item span { color: var(--muted); font-size: .74rem; }
.fr-nota { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 2px; padding: 12px 14px; border-radius: 16px;
  border: 1px dashed color-mix(in srgb, var(--purple) 55%, transparent); background: color-mix(in srgb, var(--purple) 8%, transparent); }
.fr-nota[hidden] { display: none; }
.fr-nota-btn { flex-direction: row !important; display: inline-flex !important; cursor: pointer; padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: .85rem !important;
  color: var(--bg) !important; background: linear-gradient(135deg, var(--purple), var(--blue)); }
.fr-nota #frNotaInfo { font-size: .8rem; color: var(--muted); flex: 1 1 260px; }
.fr-nota #frNotaInfo b { color: var(--text); }
.fr-nota-topo { cursor: pointer; border-color: color-mix(in srgb, var(--purple) 50%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--purple) 25%, transparent), color-mix(in srgb, var(--purple) 8%, transparent)); }
.fr-veic-km { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .74rem; color: var(--muted); }
.fr-veic-km b { color: var(--text); font-variant-numeric: tabular-nums; }
.fr-cal { margin: 0 0 10px; padding: 10px 14px; border-radius: 14px; font-size: .82rem; color: var(--muted);
  background: color-mix(in srgb, var(--cyan) 8%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 25%, transparent); }
.fr-cal b { color: var(--text); }
.fr-int input { width: 100%; max-width: 120px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 55%, var(--panel)); color: var(--text); }

/* Frota: visual unico (22/10/2026 - "tudo de uma cor" + placa XXX-YYYY no estilo Mercosul) */
.fr-nota-topo, [data-nova-os].rv-botao, [data-novo-veiculo].rv-botao, [data-intervalos].rv-botao, .fr-excel {
  border-color: color-mix(in srgb, var(--cyan) 50%, transparent) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cyan) 26%, transparent), color-mix(in srgb, var(--cyan) 8%, transparent)) !important; }
.fr-nota-btn { background: linear-gradient(135deg, var(--cyan), color-mix(in srgb, var(--cyan) 60%, var(--blue))) !important; }
.fr-nota { border-color: color-mix(in srgb, var(--cyan) 50%, transparent); background: color-mix(in srgb, var(--cyan) 7%, transparent); }
.fr-placa { display: inline-flex; flex-direction: column; align-items: stretch; min-width: 108px; border-radius: 7px; overflow: hidden;
  border: 2px solid #1f2937; background: #f8fafc; box-shadow: 0 3px 10px rgba(0,0,0,.35); font-family: "DIN Alternate", "Arial Narrow", var(--mono, monospace); }
.fr-placa i { font-style: normal; font-size: .5rem; font-weight: 800; letter-spacing: .3em; text-align: center; color: #fff; padding: 1px 0;
  background: linear-gradient(90deg, #0b3fa8, #1d4ed8); }
.fr-placa b { font-size: 1.05rem; font-weight: 800; letter-spacing: .08em; color: #0f172a; text-align: center; padding: 2px 8px 3px; }
.fr-placa-peq { min-width: 82px; } .fr-placa-peq b { font-size: .8rem; padding: 1px 6px 2px; } .fr-placa-peq i { font-size: .42rem; }
.fr-veic { border-top: 3px solid color-mix(in srgb, var(--cyan) 70%, transparent); gap: 8px; }
.fr-veic header { justify-content: space-between; }
.fr-veic-tags { display: flex; gap: 4px; }
.fr-veic strong { font-size: 1rem; }
.fr-veic-num { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--cyan) 6%, transparent); }
.fr-veic-num b { color: var(--cyan); }
.fr-linha-veic { display: flex; align-items: center; gap: 10px; }
.fr-info .fr-placa { margin-top: 2px; }
.fr-veic-num { grid-template-columns: 1.15fr .45fr 1.4fr; }
.fr-veic-num span, .fr-veic-num b { white-space: nowrap; }

/* Frota > Motoristas / CNH (22/10/2026) */
.fr-motoristas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.fr-mot { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; padding: 14px; border-radius: 18px; cursor: pointer;
  border: 1px solid var(--border); border-top: 3px solid color-mix(in srgb, var(--cyan) 70%, transparent);
  background: linear-gradient(165deg, color-mix(in srgb, var(--panel-2) 95%, transparent), color-mix(in srgb, var(--panel) 90%, transparent)); transition: transform .15s; }
.fr-mot:hover { transform: translateY(-2px); }
.fr-mot.fr-inativo { opacity: .55; }
.fr-cnh-borda-vencida { border-top-color: var(--red); } .fr-cnh-borda-proxima { border-top-color: var(--orange); }
.fr-mot-foto { width: 110px; height: 76px; border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--muted) 12%, transparent); display: grid; place-items: center; font-size: 1.8rem; }
.fr-mot-foto img { width: 100%; height: 100%; object-fit: cover; }
.fr-mot-dados { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fr-mot-dados strong { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-mot-dados small { color: var(--muted); font-size: .76rem; } .fr-mot-dados small b { color: var(--cyan); }
.fr-mot-carros { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.fr-cnh-sit { font-size: .76rem; font-weight: 700; }
.fr-cnh-vencida { color: var(--red); } .fr-cnh-proxima { color: var(--orange); } .fr-cnh-em_dia { color: var(--green); } .fr-cnh-sem { color: var(--muted); }
.fr-veic-mot { font-size: .8rem; font-weight: 600; } .fr-veic-mot em { font-style: normal; font-size: .72rem; margin-left: 4px; }
.fr-mot-corpo { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; margin-top: 12px; }
.fr-cnh-prev { border-radius: 14px; border: 1px dashed var(--border); min-height: 200px; display: grid; place-items: center; overflow: hidden; color: var(--muted); font-size: .8rem; }
.fr-cnh-prev img { width: 100%; height: auto; display: block; }
@media (max-width: 800px) { .fr-mot-corpo { grid-template-columns: 1fr; } }
.fr-mot-lado { display: flex; flex-direction: column; gap: 12px; align-items: center; min-width: 0; }
.fr-mot-lado .fr-cnh-prev { width: 100%; min-height: 160px; }
.fr-mot-rosto { width: 150px; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; display: grid; place-items: center; font-size: 3rem;
  background: color-mix(in srgb, var(--cyan) 10%, transparent); border: 2px solid color-mix(in srgb, var(--cyan) 45%, transparent);
  box-shadow: 0 8px 26px color-mix(in srgb, var(--cyan) 18%, transparent); }
.fr-mot-rosto img { width: 100%; height: 100%; object-fit: cover; }
.fr-mot-foto.fr-mot-foto-rosto { width: 76px; height: 100px; border-radius: 14px; justify-self: center; }
.fr-mot-veic { display: flex; flex-direction: column; gap: 6px; }
.fr-mot-veic .fr-rot { font-size: .78rem; color: var(--muted); } .fr-mot-veic .fr-rot small { opacity: .8; }
.fr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fr-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 14px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--border); background: color-mix(in srgb, var(--muted) 8%, transparent); color: var(--text); font-weight: 700; letter-spacing: .04em;
  font-size: .82rem; transition: background .15s, border-color .15s, transform .15s; }
.fr-chip small { font-weight: 500; font-size: .68rem; color: var(--muted); letter-spacing: 0; }
.fr-chip:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--cyan) 50%, var(--border)); }
.fr-chip.ativo { background: color-mix(in srgb, var(--cyan) 22%, transparent); border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan) inset; }
.fr-chip.ativo::before { content: "✓ "; color: var(--cyan); }
.fr-chip.fr-chip-ocupado { cursor: not-allowed; color: var(--red); border-color: color-mix(in srgb, var(--red) 55%, transparent);
  background: color-mix(in srgb, var(--red) 10%, transparent); opacity: .85; }
.fr-chip.fr-chip-ocupado:hover { transform: none; border-color: color-mix(in srgb, var(--red) 55%, transparent); }
.fr-dica-mot { display: block; margin-top: 4px; font-size: .72rem; color: var(--orange); line-height: 1.3; } .fr-dica-mot:empty { display: none; }
.fr-chip .fr-chip-dono { color: var(--red); font-weight: 600; }
.fr-btn-perigo { border-color: color-mix(in srgb, var(--red) 60%, transparent); color: var(--red); margin-right: auto; }
.fr-btn-perigo:hover { background: color-mix(in srgb, var(--red) 14%, transparent); }

/* Via Radio: janela com todos os clientes do painel + clientes off (22/10/2026) */
.rv-lista-modal { width: min(1100px, 94vw); }
.rv-lista-modal .financeiro-profile-filtros { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; margin: 12px 0; }
.rv-lista-tabela { max-height: 60vh; overflow: auto; }
.rv-off { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap;
  color: var(--muted); border: 1px dashed var(--border); background: color-mix(in srgb, var(--muted) 10%, transparent); }
.rv-on { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; color: var(--green);
  border: 1px solid color-mix(in srgb, var(--green) 45%, transparent); background: color-mix(in srgb, var(--green) 12%, transparent); }
tr.rv-linha-off td { opacity: .62; }
@media (max-width: 700px) { .rv-lista-modal .financeiro-profile-filtros { grid-template-columns: 1fr; } }
.rv-enlace-outros { margin: 6px 0 0; font-size: .76rem; color: var(--muted); }
.rv-enlace-outros b { color: var(--text); font-weight: 600; }
.rv-enlace-restaura { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
/* Via Radio > MikroTik (22/10/2026) */
.rv-mk-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; }
.rv-mk-cidade { grid-column: 1 / -1; margin: 10px 0 0; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.rv-mk { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
.rv-mk header h4 { margin: 0; font-size: 1rem; }
.rv-mk header small, .rv-mk footer { color: var(--muted); font-size: .75rem; }
.rv-mk.rv-falhou { border-color: color-mix(in srgb, var(--red) 55%, var(--border)); }
.rv-nota-curta { margin: 0; color: var(--muted); font-size: .8rem; }
.rv-if-tabela { font-size: .8rem; }
.rv-if-tabela td, .rv-if-tabela th { padding: 6px 8px; vertical-align: top; }
.rv-if-tabela small { color: var(--muted); }
.rv-if-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; border: 1px solid var(--border); }
.rv-if-pill.rv-if-bom { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); background: color-mix(in srgb, var(--green) 12%, transparent); }
.rv-if-pill.rv-if-ruim { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); background: color-mix(in srgb, var(--red) 12%, transparent); }
.rv-if-pill.rv-if-neutro { color: var(--muted); }
tr.rv-if-neutro td { opacity: .6; }
.rv-if-muitas { color: var(--orange); font-weight: 700; }
.rv-if-alerta { color: var(--red); }
.rv-mk.rv-mk-largo { grid-column: 1 / -1; }
.rv-if-tabela td:nth-child(4), .rv-if-tabela td:nth-child(5) { white-space: nowrap; }
.rv-if-zero { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; font-size: .78rem; color: var(--muted); }
/* Setor de Cancelamento (22/10/2026) */
.sc-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px 16px; align-items: end; }
.sc-form .sc-largo { grid-column: 1 / -1; }
.sc-form textarea { width: 100%; resize: vertical; }
.sc-casa { color: var(--muted); font-size: .72rem; }
.sc-mk { display: flex; flex-direction: column; gap: 8px; }
.sc-mk-lista, .sc-mk-contratos { display: flex; flex-wrap: wrap; gap: 8px; max-height: 260px; overflow: auto; }
.sc-mk-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; text-align: left; }
.sc-mk-item small { color: var(--muted); font-size: .72rem; }
.sc-mk-item:hover, .sc-mk-item.ativo { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 14%, var(--panel-2)); }
.sc-mk-info { margin: 0; width: 100%; color: var(--muted); font-size: .8rem; }
.sc-motivos { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.sc-motivos legend { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.sc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-chip { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; }
.sc-chip:hover { border-color: var(--cyan); }
.sc-chip.ativo { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 20%, var(--panel-2)); color: var(--cyan); }
.sc-mk-os { color: var(--cyan); }
tr.sc-meu td { background: color-mix(in srgb, var(--orange) 10%, transparent); }
/* Rankings FiberHome (22/10/2026) */
.fh-chart { height: 380px; }
.fh-dist { display: flex; height: 30px; border-radius: 10px; overflow: hidden; margin: 10px 0 8px; }
.fh-dist i { display: flex; align-items: center; justify-content: center; color: #fff; font-style: normal; font-size: .78rem; font-weight: 700; }
.fh-dist-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .8rem; color: var(--muted); }
.fh-dist-leg span { display: inline-flex; align-items: center; gap: 6px; }
.fh-dist-leg i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.fh-dist-leg b { color: var(--text); }
.fh-aviso { margin: 10px 0 0; font-size: .8rem; color: var(--orange); }
.fh-destaques { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; margin-bottom: 18px; }
.fh-dest { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--red) 35%, var(--border)); border-left: 4px solid var(--red); }
.fh-dest span { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--red) 75%, var(--text)); }
.fh-dest strong { font-size: 1.05rem; }
.fh-dest small { color: var(--muted); font-size: .8rem; }
.fh-abas { flex-wrap: wrap; margin: 4px 0 10px; }
.fh-abas button.rv-aba { font: inherit; cursor: pointer; }
.fh-nota { margin: 0 0 8px; color: var(--muted); font-size: .8rem; }
.fh-barra { display: flex; align-items: center; min-width: 160px; gap: 0; }
.fh-barra i { display: block; height: 9px; }
.fh-barra i:first-child { border-radius: 4px 0 0 4px; }
.fh-barra b { margin-left: 6px; font-size: .75rem; }
table.fh-rank td { white-space: nowrap; }
.fh-conclusoes { margin: 6px 0 12px; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; font-size: .86rem; line-height: 1.45; }
.fh-tipos { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .8rem; color: var(--muted); }
table.fh-acoes td { white-space: normal; vertical-align: top; }

/* Holerites com assinatura (23/10/2026) */
.hol-gestor { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.hol-aviso { margin: 0 0 14px; padding: 10px 14px; border: 1px dashed var(--orange); border-radius: 12px; color: var(--text); background: color-mix(in srgb, var(--orange) 10%, transparent); }
.hol-aviso a { color: var(--cyan); }
.hol-lista { display: grid; gap: 10px; max-width: 760px; }
.hol-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); color: var(--text); text-decoration: none; }
.hol-item.pendente { border-color: var(--orange); }
.hol-item:hover { border-color: var(--cyan); }
.hol-mes { font-family: var(--display); font-size: 20px; font-weight: 700; }
.hol-sit { color: var(--muted); }
.hol-item.ok .hol-sit { color: var(--green); }
.hol-ir { color: var(--cyan); font-weight: 600; white-space: nowrap; }
.hol-paginas { display: grid; gap: 12px; max-width: 900px; margin-bottom: 16px; }
.hol-pagina { width: 100%; height: auto; border-radius: 8px; background: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, .25); }
.hol-assinar, .hol-ok { max-width: 900px; }
.hol-li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; margin: 6px 0 14px; cursor: pointer; }
.hol-li input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--cyan); }
.hol-rotulo { margin: 0 0 6px; color: var(--muted); }
.hol-quadro-wrap { display: grid; gap: 8px; justify-items: start; margin-bottom: 14px; }
.hol-quadro { width: 100%; max-width: 900px; aspect-ratio: 3 / 1; height: auto; background: #fff; border: 2px dashed var(--cyan); border-radius: 12px; touch-action: none; cursor: crosshair; }
.hol-confirma { margin-bottom: 14px; display: grid; gap: 8px; }
.hol-confirma input { max-width: 260px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font-size: 16px; }
#holCodigo { letter-spacing: 6px; font-family: var(--mono); }
.hol-linha { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hol-trocar { justify-self: start; background: none; border: 0; color: var(--cyan); text-decoration: underline; cursor: pointer; padding: 0; font: inherit; }
.hol-btn { min-width: 220px; }
.hol-envio { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.hol-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin: 12px 0; }
.hol-pg { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--panel-2); display: grid; }
.hol-pg img { width: 100%; height: 190px; object-fit: cover; object-position: top; background: #fff; display: block; }
.hol-pg-info { display: grid; gap: 6px; padding: 10px; min-width: 0; }
.hol-pg-info small { color: var(--muted); overflow-wrap: anywhere; }
.hol-pg-info select { max-width: 100%; }
.hol-lote { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; }
.hol-lote summary { cursor: pointer; }
.hol-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 600px) { .hol-item { grid-template-columns: 1fr auto; } .hol-sit { grid-column: 1 / -1; grid-row: 2; } }
.hol-pg-info small { white-space: normal; }
.hol-pg-info select { width: 100%; }
.hol-arquivo input[type="file"] { color: var(--muted); font: inherit; padding: 6px; border: 1px dashed var(--border); border-radius: 999px; max-width: 100%; }
.hol-arquivo input[type="file"]::file-selector-button { margin-right: 10px; padding: 7px 16px; border: 1px solid var(--cyan); border-radius: 999px; background: transparent; color: var(--cyan); font: inherit; font-weight: 600; cursor: pointer; }
.hol-conferir { color: var(--orange); }
.hol-quem { font-size: 12px; color: var(--muted); margin-top: 4px; }
.hol-pg { transition: opacity .15s, border-color .15s; }
.hol-pg.vai { border-color: var(--green); box-shadow: 0 0 0 1px var(--green) inset; }
.hol-pg.vai select { border-color: var(--green); color: var(--green); background: color-mix(in srgb, var(--green) 14%, var(--panel-2)); }
.hol-pg.nao { opacity: .45; }
.hol-pg.nao:hover, .hol-pg.nao:focus-within { opacity: .8; }
.hol-pg.nao select { color: var(--muted); }
.hol-perfil { max-width: 760px; margin-bottom: 16px; }
.hol-otp { max-width: 460px; }
.hol-otp .otp-caixas { justify-content: flex-start !important; margin: 10px 0 6px !important; }
.hol-otp-msg { margin: 4px 0; color: var(--muted); font-size: 13px; }
.hol-otp-msg.ok { color: var(--green); font-weight: 600; }
.hol-otp .otp-reenviar { margin-top: 2px !important; }

/* 23/10/2026: lateral no limite da altura da tela piscava (barra de rolagem entra -> texto quebra -> altura muda -> barra sai, em loop). Reserva o espaco da barra sempre. */
.lateral { scrollbar-gutter: stable; }
/* Holerite pendente (23/10/2026): o proprio link pisca, nao so o numerinho */
.lateral a.mini.tem-correio { color: var(--green); font-weight: 700; animation: correio-pisca 1.1s ease-in-out infinite; }
.hol-item.pendente.hol-perfil { animation: hol-chama 1.6s ease-in-out infinite; }
@keyframes hol-chama { 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 45%, transparent), 0 0 22px color-mix(in srgb, var(--orange) 40%, transparent); } }
@media (prefers-reduced-motion: reduce) { .lateral a.mini.tem-correio, .hol-item.pendente.hol-perfil { animation: none; } }
.fh-end { min-width: 220px; white-space: normal; } .fh-end small { color: var(--orange); }
/* rodape da janela de rompimentos (23/10/2026): botoes em vez de link solto */
.romp-rodape { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.romp-rodape a.romp-botao { text-decoration: none; padding: 8px 16px; }
.romp-rodape a.romp-botao-forte { border-color: var(--cyan); color: var(--cyan); }
.romp-rodape a.romp-botao-forte:hover { background: color-mix(in srgb, var(--cyan) 15%, transparent); }
.romp-nome, .romp-nome + td, .romp-nome + td + td, .romp-nome + td + td + td { white-space: nowrap; }
/* Via Radio > Equipamentos AC (23/10/2026) */
.rv-ac-grade { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.rv-linha { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid var(--border); }
.rv-linha-ac { color: var(--green); border-color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.rv-linha-m { color: var(--orange); border-color: var(--orange); background: color-mix(in srgb, var(--orange) 12%, transparent); }
.rv-linha-outro { color: var(--muted); }
.rv-ac-n { color: var(--green); }
.rv-ac-total td { font-weight: 700; border-top: 1px solid var(--border); }
/* Via Radio > Relatorio (23/10/2026) */
.rv-rel-tit { margin: 22px 0 8px; font-size: 15px; }
.rv-rel-atencao { display: grid; gap: 10px; }
.rv-rel-item { border: 1px solid var(--border); border-left: 4px solid var(--muted); border-radius: 12px; padding: 10px 14px; background: var(--panel); }
.rv-rel-item b { display: block; margin-bottom: 4px; }
.rv-rel-item p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.rv-rel-alto { border-left-color: var(--red); } .rv-rel-alto b { color: var(--red); }
.rv-rel-medio { border-left-color: var(--orange); } .rv-rel-medio b { color: var(--orange); }
.rv-rel-baixo b { color: var(--text); }
a.rv-botao { text-decoration: none; }
.rv-nota-acao { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .rv-nota-acao a.mini-button { text-decoration: none; }
.rv-tag-mk { color: var(--cyan); border-color: var(--cyan) !important; }
/* Via Radio Dashboard: periodo do grafico de clientes (23/10/2026) */
.rv-evol-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.rv-evol-cab h3 { margin: 0; }
.rv-periodos { display: flex; gap: 6px; flex-wrap: wrap; }
.rv-periodo { border: 1px solid var(--border); background: var(--panel-2); color: var(--muted); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.rv-periodo:hover { border-color: var(--cyan); color: var(--text); }
.rv-periodo.ativo { border-color: var(--cyan); color: var(--cyan); background: color-mix(in srgb, var(--cyan) 15%, transparent); }
.pon-mod-atual td { background: color-mix(in srgb, var(--cyan) 14%, transparent); }

/* Credito da IA do Sentinela (tela WhatsApp, 23/10/2026) */
.wa-ia { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(140px, 1fr)); gap: 12px; }
.wa-ia > div { background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wa-ia span { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.wa-ia b { font-size: 24px; font-variant-numeric: tabular-nums; color: var(--text); }
.wa-ia b.ok { color: var(--green); } .wa-ia b.mid { color: var(--orange); } .wa-ia b.no { color: var(--red); }
.wa-ia small { color: var(--muted); font-size: 12px; }
.wa-ia-barra { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--border) 70%, transparent); overflow: hidden; margin: 4px 0; }
.wa-ia-barra i { display: block; height: 100%; border-radius: 999px; background: var(--green); transition: width .6s ease; }
.wa-ia-barra i.mid { background: var(--orange); } .wa-ia-barra i.no { background: var(--red); }
.wa-ia-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 12px; }
.wa-ia-form .cos-campo { min-width: 160px; }
.wa-ia-form input { border-radius: 999px; }
@media (max-width: 900px) { .wa-ia { grid-template-columns: 1fr 1fr; } }

/* Quedas agora (23/10/2026) */
.qa-topo { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 4px 0 14px; }
.qa-busca { flex: 1 1 320px; max-width: 520px; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font-size: 15px; }
.qa-busca:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 25%, transparent); }
.qa-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.qa-kpi { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.qa-kpi span { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.qa-kpi b { font-size: 28px; font-variant-numeric: tabular-nums; }
.qa-kpi.no { border-color: color-mix(in srgb, var(--red) 55%, var(--border)); } .qa-kpi.no b { color: var(--red); }
.qa-kpi.ok b { color: var(--green); } .qa-kpi.mid b { color: var(--orange); }
.qa-sec small { font-weight: 400; color: var(--muted); font-size: 12px; }
.qa-sec { font-size: 15px; margin: 18px 0 10px; color: var(--text); }
.qa-card { background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 14px; padding: 12px 16px; margin-bottom: 10px; }
.qa-card.aberto { border-left-color: var(--red); } .qa-card.voltou { border-left-color: var(--green); opacity: .9; } .qa-card.instavel { border-left-color: var(--orange); }
.qa-card header { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.qa-card header b { font-size: 16px; }
.qa-tempo { color: var(--muted); font-size: 13px; } .qa-cod { margin-left: auto; color: var(--muted); }
.qa-causa { margin: 6px 0; color: var(--orange); font-size: 13px; }
.qa-pontos { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.qa-pontos small { color: var(--muted); }
.qa-card details summary { cursor: pointer; font-weight: 600; margin-top: 6px; color: var(--cyan); }
.qa-clientes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; margin-top: 8px; }
.qa-cli { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; display: flex; flex-direction: column; min-width: 0; }
.qa-cli b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-cli small { color: var(--cyan); font-size: 12px; } .qa-cli em { color: var(--muted); font-size: 11px; font-style: normal; }
.qa-sem { color: var(--muted); font-size: 13px; margin: 6px 0 0; }
.qa-kpi small { color: var(--muted); font-size: 12px; }
.qa-tab-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; }
.qa-tab { width: 100%; border-collapse: collapse; font-size: 14px; }
.qa-tab th { text-align: left; padding: 10px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel); }
.qa-tab td { padding: 8px 12px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); vertical-align: top; }
.qa-tab tr:hover td { background: var(--panel-2); }
.qa-tab code { color: var(--cyan); }
.qa-tab small { color: var(--muted); }
.qa-semmk { color: var(--orange); font-weight: 600; }
.rv-login { color: var(--cyan); font-size: 12px; margin-left: 4px; }

/* Syslog da rede (23/10/2026) */
.sl-grade { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.sl-lista #slEquip { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-height: 70vh; overflow: auto; }
.sl-eq { text-align: left; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; color: var(--text); cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.sl-eq:hover { border-color: var(--cyan); } .sl-eq.ativo { border-color: var(--cyan); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cyan) 25%, transparent); }
.sl-eq small { color: var(--muted); font-size: 12px; }
.sl-ctl { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.sl-linhas { margin: 8px 0 0; padding: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; max-height: 68vh; overflow: auto; font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.sl-forte { color: var(--red); font-weight: 600; } .sl-acesso { color: var(--orange); }
.sl-log .qa-busca, .sl-lista .qa-busca { max-width: none; width: 100%; margin-top: 8px; }
@media (max-width: 900px) { .sl-grade { grid-template-columns: 1fr; } }
.sl-log .card-head { flex-wrap: wrap; gap: 8px; }
.sl-titulo { margin: 4px 0 2px; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.sl-titulo b { font-weight: 700; } .sl-titulo small { color: var(--muted); margin-left: 6px; }
.sl-eq b { overflow-wrap: anywhere; }
.sl-linhas { white-space: normal; }
.sl-l { display: grid; grid-template-columns: 70px minmax(0, 1fr); column-gap: 10px; padding: 5px 4px; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); }
.sl-h { color: var(--muted); font-variant-numeric: tabular-nums; }
.sl-pt { color: var(--text); font-family: var(--display, inherit); font-size: 13.5px; }
.sl-orig { grid-column: 2; color: var(--muted); font-size: 11.5px; opacity: .8; overflow-wrap: anywhere; }
.sl-cru .sl-pt { color: var(--muted); font-family: inherit; font-size: 12.5px; overflow-wrap: anywhere; }
.sl-login .sl-pt { color: var(--orange); } .sl-erro .sl-pt { color: var(--red); font-weight: 700; }
.sl-boot .sl-pt { color: var(--red); font-weight: 700; } .sl-config .sl-pt { color: var(--purple); font-weight: 600; }
.sl-queda .sl-pt { color: var(--red); } .sl-volta .sl-pt { color: var(--green); } .sl-cliente .sl-pt { color: var(--cyan); }
.sl-chk { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); margin-top: 8px; cursor: pointer; }

/* Central de avisos - sininho (23/10/2026) */
.avisos-wrap { position: relative; margin: 0 8px 10px; }
.avisos-wrap.no-topo { margin: 0 8px 0 0; }
.avisos-wrap.flutua { position: fixed; top: 12px; right: 16px; z-index: 900; }
.avisos-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); cursor: pointer; font-weight: 600; position: relative; transition: border-color .2s, box-shadow .2s; }
.avisos-btn:hover { border-color: var(--cyan); }
.avisos-num { font-style: normal; background: var(--red); color: #fff; border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center; }
.avisos-btn.tem-aviso { border-color: var(--red); animation: avisos-pisca 1.1s ease-in-out infinite; }
.avisos-btn.tem-aviso .avisos-sino { display: inline-block; animation: avisos-sino 1.1s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes avisos-pisca { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 0%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--red) 35%, transparent); } }
@keyframes avisos-sino { 0%, 60%, 100% { transform: rotate(0); } 10% { transform: rotate(18deg); } 25% { transform: rotate(-16deg); } 40% { transform: rotate(10deg); } }
.avisos-chacoalha { animation: avisos-chacoalha .5s ease-in-out 3 !important; }
@keyframes avisos-chacoalha { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .avisos-btn.tem-aviso, .avisos-btn.tem-aviso .avisos-sino, .avisos-chacoalha { animation: none !important; } }
.avisos-pop { position: absolute; top: calc(100% + 8px); right: 0; min-width: 300px; max-width: 380px; z-index: 950; background: var(--panel);
  border: 1px solid var(--border); border-radius: 16px; padding: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.avisos-wrap:not(.no-topo) .avisos-pop { left: 0; right: auto; }
.avisos-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.avisos-som, .avisos-perm { border: 1px solid var(--border); background: var(--panel-2); color: var(--text); border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.avisos-item { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; text-decoration: none; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--border); margin-bottom: 6px; }
.avisos-item:hover { border-color: var(--cyan); }
.avisos-vazio { color: var(--muted); margin: 6px 2px; }
.avisos-rodape { margin-top: 6px; } .avisos-rodape small { color: var(--muted); }

/* Rankings FiberHome - comparar o sinal (23/10/2026) */
.fh-comp .card-head { flex-wrap: wrap; gap: 10px; }
.fh-comp-ctl { display: flex; gap: 10px; align-items: center; margin-left: auto; font-size: 13px; color: var(--muted); }
.fh-comp-ctl label { display: flex; gap: 6px; align-items: center; }
.fh-cmp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 10px 0 14px; }
.fh-cmp-kpis > div { background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.fh-cmp-kpis span { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.fh-cmp-kpis b { font-size: 22px; font-variant-numeric: tabular-nums; } .fh-cmp-kpis small { color: var(--muted); font-size: 12px; }
.fh-cmp-kpis .bom b { color: var(--green); } .fh-cmp-kpis .ruim b { color: var(--red); }
.fh-cmp-bom { color: var(--green); } .fh-cmp-ruim { color: var(--red); } .fh-cmp-igual { color: var(--muted); }
.fh-cmp-h { font-size: 14px; margin: 14px 0 6px; } .fh-cmp-h small { color: var(--muted); font-weight: 400; }
.sl-rel { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 14px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; font-size: 13px; color: var(--muted); }
.sl-rel label { display: flex; gap: 6px; align-items: center; }
.sl-rel input[type=date] { border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); padding: 5px 12px; }
.sl-lib { flex-direction: column; align-items: stretch; }
.sl-lib-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.sl-lib-chip { display: inline-flex; gap: 6px; align-items: center; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 6px 4px 12px; color: var(--text); font-size: 13px; }
.sl-lib-chip button { border: 0; background: color-mix(in srgb, var(--red) 25%, transparent); color: var(--red); border-radius: 999px; width: 22px; height: 22px; cursor: pointer; font-weight: 700; }
.sl-lib-form { display: flex; flex-wrap: wrap; gap: 8px; }
.sl-lib-form input { border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); padding: 7px 14px; min-width: 200px; }


/* ===== Tema Boteco (23/10/2026; 27/10/2026: cores CLARAS iguais as do Girassol, a pedido - o escuro cansava a vista).
   Regras abaixo = copia automatica das do Girassol com o id trocado; o cenario do bar continua logo depois. ===== */
:root[data-tema="boteco"] { color-scheme: light; }
:root[data-tema="boteco"] option {
  background-color: var(--panel);
  color: var(--text);
}
:root[data-tema="boteco"] {
  color-scheme: light;
  --bg: #fff7cf;
  --panel: #fffdf0;
  --panel-2: #fff0a8;
  --border: #e5b93b;
  --text: #4d3a16;
  --muted: #876e34;
  --blue: #d99b00;
  --cyan: #efb810;
  --green: #6b8e23;
  --orange: #e38b16;
  --purple: #c18f1e;
  --pink: #e0a617;
  --red: #c85b36;
  --display: "Quicksand", "Trebuchet MS", sans-serif;
}
:root[data-tema="boteco"] option { background: #fffdf0; color: #4d3a16; }
[data-tema="boteco"] body {
  color: var(--text);
  background: radial-gradient(circle at 12% 18%, rgba(255, 218, 76, .23), transparent 24%),
              radial-gradient(circle at 88% 82%, rgba(107, 142, 35, .14), transparent 27%),
              linear-gradient(135deg, #fff9da 0%, #fff1ad 52%, #fff8d7 100%);
  overflow-x: hidden;
}
[data-tema="boteco"] body::before, [data-tema="boteco"] body::after { content: none; }
[data-tema="boteco"] .layout, [data-tema="boteco"] .login-shell { position: relative; z-index: 1; }
[data-tema="boteco"] .lateral { background: rgba(255, 253, 240, .94); border-right-color: #e5b93b; box-shadow: 5px 0 24px rgba(175, 126, 16, .12); }
[data-tema="boteco"] .lateral a { color: #74591e; }
[data-tema="boteco"] .lateral a:hover, [data-tema="boteco"] .lateral a.ativo { color: #765100; background: #fff0a8; border-color: #d99b00; }
[data-tema="boteco"] .card, [data-tema="boteco"] .kpi, [data-tema="boteco"] .filters, [data-tema="boteco"] .table-wrap, [data-tema="boteco"] .modal-caixa { background: rgba(255, 253, 240, .9); border-color: #e5b93b; box-shadow: 0 10px 28px rgba(185, 135, 23, .12); }
[data-tema="boteco"] .card h2, [data-tema="boteco"] .kpi strong, [data-tema="boteco"] .modal-caixa h2, [data-tema="boteco"] .topbar h1 { font-family: var(--display); }
[data-tema="boteco"] .topbar { border-bottom-color: #e5b93b; }
[data-tema="boteco"] .topbar h1 { color: #9b6a00; }
[data-tema="boteco"] th { background: #fff0a8; color: #765100; }
[data-tema="boteco"] td { border-bottom-color: #f3dfa0; }
[data-tema="boteco"] tbody tr:hover { background: #fff6c9; }
[data-tema="boteco"] input, [data-tema="boteco"] select, [data-tema="boteco"] textarea, [data-tema="boteco"] .table-search { background: #fffdf4; border-color: #e5b93b; color: #4d3a16; }
[data-tema="boteco"] input::placeholder, [data-tema="boteco"] textarea::placeholder { color: #a98b4d; }
[data-tema="boteco"] button, [data-tema="boteco"] .text-button, [data-tema="boteco"] .mini-button { border-color: #d99b00; color: #674900; background: linear-gradient(135deg, #ffe57a, #f4c22e); }
[data-tema="boteco"] button:hover, [data-tema="boteco"] .text-button:hover, [data-tema="boteco"] .mini-button:hover { background: #ffd85a; }
[data-tema="boteco"] .btn-ok { border-color: rgba(107, 142, 35, .45); background: rgba(107, 142, 35, .14); color: var(--green); }
[data-tema="boteco"] .btn-ok:hover { background: rgba(107, 142, 35, .26); border-color: var(--green); }
[data-tema="boteco"] .sync-badge { background: #edf5cf; border-color: #9dbb45; color: #56731c; }
[data-tema="boteco"] .pill { background: #fff0a8; color: #765100; border-color: #e5b93b; }
[data-tema="boteco"] .sinal-badge {
  font-weight: 800;
  text-shadow: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.42);
}
[data-tema="boteco"] .sinal-bom {
  color: #1f5c1a;
  background: #d9f0bd;
  border-color: #7fb654;
}
[data-tema="boteco"] .sinal-atencao {
  color: #7a4300;
  background: #ffe2a3;
  border-color: #e3a919;
}
[data-tema="boteco"] .sinal-critico {
  color: #7a2a12;
  background: #ffd2b8;
  border-color: #d97a4a;
}
[data-tema="boteco"] .sinal-sem {
  color: #6b5730;
  background: #f3e6bd;
  border-color: #d8c072;
}
/* Temas claros (13/10/2026): o campo FOCADO do cadastro/ticket (.cadastro-campo :focus) tinha fundo escuro fixo e ficava preto
   no Girassol/Flor/Gelo enquanto a pessoa digitava. Aqui ele usa as cores do proprio tema. */
:root[data-tema="boteco"] .cadastro-campo input:focus, :root[data-tema="boteco"] .cadastro-campo select:focus, :root[data-tema="boteco"] .cadastro-campo textarea:focus {
  background: var(--panel);
  color: var(--text);
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent);
}
/* Janela de vidro nos temas claros (13/10/2026): o vidro transparente sobre o fundo escurecido ficava cinza com texto marrom
   apagado. Aqui o vidro vira a cor clara do proprio tema. */
:root[data-tema="boteco"] .vidro-fundo { background: rgba(60, 45, 10, .28); }
:root[data-tema="boteco"] .vidro-caixa {
  background: color-mix(in srgb, var(--panel) 92%, transparent); border-color: var(--border);
  box-shadow: 0 24px 60px rgba(0,0,0,.22), 0 0 0 1px color-mix(in srgb, var(--cor) 35%, transparent); }
/* texto da janela de vidro mais forte nos temas claros (13/10/2026: "a escrita do glass ficou fraca") */
:root[data-tema="boteco"] .vidro-caixa { background: color-mix(in srgb, var(--panel) 98%, transparent); }
:root[data-tema="boteco"] .vidro-caixa h3 { color: var(--text); font-weight: 800; font-size: 1.3rem; }
:root[data-tema="boteco"] .vidro-caixa p { color: var(--text); opacity: 1; font-weight: 600; font-size: 1rem; }
:root[data-tema="boteco"] .vidro-caixa .vidro-sim { font-weight: 800; }
.boteco-cena { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.boteco-trupe { position: fixed; left: 0; right: 0; bottom: 0; height: 140px; z-index: 60; pointer-events: none; overflow: hidden; }
.boteco-bolha {
  position: absolute; left: var(--x); bottom: -20px; width: var(--tam); height: var(--tam); border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .55), rgba(246, 196, 69, .18) 55%, transparent 72%);
  border: 1px solid rgba(255, 233, 170, .28);
  animation: boteco-sobe var(--duracao) linear var(--atraso) infinite;
}
.boteco-copo {
  position: absolute; left: var(--x); top: var(--y); width: var(--tam); height: calc(var(--tam) * 1.33); opacity: .3;
  transform-origin: 50% 100%; animation: boteco-balanca var(--duracao) ease-in-out var(--atraso) infinite;
}
.boteco-copo .bt-espuma { animation: boteco-espuma 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
.boteco-cara {
  position: absolute; bottom: 4px; left: 0; width: var(--tam); height: calc(var(--tam) * 1.45); opacity: .9;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45));
  will-change: transform;
}
.boteco-cara.volta .boteco-ginga { scale: -1 1; }
.boteco-ginga { display: block; width: 100%; height: 100%; transform-origin: 50% 100%;
  animation: boteco-ginga var(--ginga) ease-in-out infinite alternate; }
.boteco-cara .bt-perna { transform-origin: 22px 40px; animation: boteco-passo .55s ease-in-out infinite alternate; }
.boteco-cara .bt-perna-b { animation-delay: -.55s; }
.boteco-cara .bt-braco { transform-origin: 27px 25px; animation: boteco-brinde 1.8s ease-in-out infinite alternate; }
.boteco-cara .bt-braco-livre { transform-origin: 17px 25px; animation: boteco-passo .55s ease-in-out infinite alternate-reverse; }
@keyframes boteco-sobe {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translate(var(--deriva), -55vh); }
  100% { transform: translate(0, -110vh); opacity: 0; }
}
@keyframes boteco-balanca { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateY(-4px); } }
@keyframes boteco-espuma { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.18); } }
@keyframes boteco-anda {
  0% { transform: translate(-80px, 0); } 25% { transform: translate(25vw, -14px); } 50% { transform: translate(50vw, 4px); }
  75% { transform: translate(75vw, -10px); } 100% { transform: translate(calc(100vw + 80px), 0); }
}
@keyframes boteco-anda-volta {
  0% { transform: translate(calc(100vw + 80px), 0); } 25% { transform: translate(75vw, -12px); } 50% { transform: translate(50vw, 3px); }
  75% { transform: translate(25vw, -14px); } 100% { transform: translate(-80px, 0); }
}
@keyframes boteco-ginga { 0% { transform: rotate(-11deg) translateX(-4px); } 100% { transform: rotate(11deg) translateX(4px); } }
@keyframes boteco-passo { 0% { transform: rotate(-22deg); } 100% { transform: rotate(22deg); } }
@keyframes boteco-brinde { 0% { transform: rotate(-8deg); } 100% { transform: rotate(-38deg); } }
/* Mesa no meio do rodape + 4 bancos; sentado = para de andar e de gingar, pernas pra frente, desce um pouco */
.boteco-mesa { position: absolute; left: 50%; bottom: 2px; width: 150px; height: 72px; translate: -50% 0;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45)); }
.boteco-tim { position: absolute; left: 50%; top: -34px; translate: -50% 0; font-size: 26px; opacity: 0; scale: .4; transition: opacity .25s, scale .25s; }
.boteco-mesa.brinde .boteco-tim { opacity: 1; scale: 1; }
.boteco-banco { position: absolute; left: calc(50% + var(--dx)); bottom: 2px; width: 30px; height: 26px; translate: -50% 0; }
.boteco-cara.sentado .boteco-ginga { animation: none; transform: translateY(12px); }
.boteco-cara.sentado .bt-perna { animation: none; transform: rotate(-78deg); }
.boteco-cara.sentado .bt-braco-livre { animation: none; transform: rotate(-30deg); }
.boteco-cara.brinde .bt-braco { animation: none; transform: rotate(-62deg); transition: transform .3s; }
/* Faixa "BAR MIGO" atras da mesa, com luzinhas piscando */
.boteco-faixa { position: absolute; left: 50%; bottom: 0; width: 380px; height: 120px; translate: -50% 0; opacity: .95; }
.boteco-faixa .bt-pano { transform-origin: 50% 0; animation: boteco-pano 3.5s ease-in-out infinite alternate; }
.boteco-faixa .bt-luz { animation: boteco-luz 1.2s steps(2) infinite; }
.boteco-faixa .bt-luz:nth-of-type(2n) { animation-delay: -.6s; }
@keyframes boteco-pano { 0% { transform: skewX(-1.5deg); } 100% { transform: skewX(1.5deg); } }
@keyframes boteco-luz { 0% { opacity: 1; } 100% { opacity: .25; } }
.boteco-mesa { z-index: 2; }
/* Garcom: traz a bandeja, abaixa na mesa e vai embora */
.boteco-garcom { z-index: 1; }
.boteco-garcom .boteco-ginga { animation-duration: 1.4s; }
.boteco-garcom .bt-bandeja { transform-origin: 28px 25px; transition: transform .4s; }
.boteco-garcom.servindo .boteco-ginga { animation: none; }
.boteco-garcom.servindo .bt-perna { animation: none; }
.boteco-garcom.servindo .bt-bandeja { transform: rotate(28deg) translateY(4px); }
/* Mulher brava com a carriola */
.boteco-mulher { width: calc(var(--tam) * 2.2); height: calc(var(--tam) * 2.2 * 64 / 96); z-index: 3; }
.boteco-mulher .boteco-ginga { animation: boteco-pisa .45s ease-in-out infinite alternate; }
.boteco-mulher .bt-perna { transform-origin: 18px 44px; }
.boteco-mulher .bt-roda { transform-box: fill-box; transform-origin: center; animation: boteco-roda .6s linear infinite; }
.boteco-mulher.brava .bt-roda, .boteco-mulher.brava .bt-perna { animation: none; }
.boteco-mulher.brava .boteco-ginga { animation: boteco-brava .18s linear infinite alternate; }
.boteco-mulher.com-marido .bt-marido { opacity: 1; }
.boteco-fala { position: absolute; bottom: 100%; left: 50%; translate: -50% 0; white-space: nowrap; padding: 3px 9px;
  border-radius: 10px; background: #fff; color: #7f1d1d; font: 800 12px/1.2 system-ui, sans-serif; box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
  opacity: 0; transition: opacity .2s; }
.boteco-mulher.brava .boteco-fala, .boteco-mulher.com-marido .boteco-fala { opacity: 1; }
@keyframes boteco-pisa { 0% { transform: translateY(0); } 100% { transform: translateY(-2px); } }
@keyframes boteco-brava { 0% { transform: rotate(-2deg); } 100% { transform: rotate(2deg); } }
@keyframes boteco-roda { to { transform: rotate(360deg); } }
/* Quem fica estirado esperando a carriola */
.boteco-cara.estirado .boteco-ginga { animation: none; transform: rotate(88deg) translateY(3px); }
.boteco-cara.estirado .bt-perna, .boteco-cara.estirado .bt-braco, .boteco-cara.estirado .bt-braco-livre { animation: none; }
.boteco-cara.estirado .boteco-poca { opacity: .9; transform: scaleX(1); }
.boteco-cara.estirado .boteco-tontura { animation: boteco-tonto-sem-fim 1.6s linear infinite; }
@keyframes boteco-tonto-sem-fim { 0% { opacity: 1; transform: rotate(0); } 100% { opacity: 1; transform: rotate(360deg); } }
/* Rojao do brinde: sobe e estoura (camada propria, sem pegar clique) */
.boteco-fogos { position: fixed; inset: 0; z-index: 59; pointer-events: none; overflow: hidden; }
.boteco-rojao { position: absolute; bottom: 40px; width: 4px; height: 14px; border-radius: 2px; translate: -50% 0;
  background: linear-gradient(#fff, #ffd54a 50%, rgba(251, 146, 60, 0)); animation: boteco-sobe-rojao .9s ease-out forwards; }
.boteco-faisca { position: absolute; width: 6px; height: 6px; border-radius: 50%; translate: -50% 50%;
  box-shadow: 0 0 6px currentColor; animation: boteco-estoura 1.25s ease-out forwards; }
@keyframes boteco-sobe-rojao { to { transform: translateY(calc(-1 * var(--alto))); } }
@keyframes boteco-estoura { 0% { transform: translate(0, 0) scale(1.2); opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 30px)) scale(.3); opacity: 0; } }
/* "MIGO" da camisa: quem anda pra esquerda e espelhado (scale -1), entao o texto volta a ler certo */
.boteco-cara .bt-logo { transform-box: fill-box; transform-origin: center; }
.boteco-cara.volta .bt-logo { transform: scaleX(-1); }
/* Tombo: para de andar, tropeca, cai de lado, derrama o copo (poca), fica tonto e levanta */
.boteco-cara.tombo { animation-play-state: paused; }
.boteco-cara.tombo .boteco-ginga { animation: boteco-tombo 3.2s ease-in-out forwards; }
.boteco-cara.tombo .bt-perna, .boteco-cara.tombo .bt-braco, .boteco-cara.tombo .bt-braco-livre { animation-play-state: paused; }
.boteco-poca {
  position: absolute; bottom: -2px; left: 70%; width: 70%; height: 7px; border-radius: 50%; opacity: 0;
  background: radial-gradient(ellipse at center, #f6c445 0 45%, rgba(255, 243, 207, .9) 55%, transparent 72%);
  transform: scaleX(.2); transform-origin: 0 50%;
}
.boteco-cara.volta .boteco-poca { left: auto; right: 70%; transform-origin: 100% 50%; }
.boteco-cara.tombo .boteco-poca { animation: boteco-poca 3.2s ease-out forwards; }
.boteco-tontura { position: absolute; left: 105%; bottom: 18%; font-size: calc(var(--tam) * .32); opacity: 0; }
.boteco-cara.volta .boteco-tontura { left: auto; right: 105%; }
.boteco-cara.tombo .boteco-tontura { animation: boteco-tonto 3.2s linear forwards; }
@keyframes boteco-tombo {
  0% { transform: rotate(0); }
  12% { transform: rotate(-16deg) translateX(-3px); }
  30% { transform: rotate(92deg) translateY(4px); }
  36% { transform: rotate(84deg) translateY(2px); }
  42%, 70% { transform: rotate(88deg) translateY(3px); }
  76% { transform: rotate(84deg) translateY(3px); }
  90% { transform: rotate(-8deg); }
  100% { transform: rotate(0); }
}
.boteco-cara.tombo.tras .boteco-ginga { animation-name: boteco-tombo-tras; }
.boteco-cara.tras .boteco-poca { left: auto; right: 70%; transform-origin: 100% 50%; }
.boteco-cara.volta.tras .boteco-poca { right: auto; left: 70%; transform-origin: 0 50%; }
.boteco-cara.tras .boteco-tontura { left: auto; right: 105%; }
.boteco-cara.volta.tras .boteco-tontura { right: auto; left: 105%; }
@keyframes boteco-tombo-tras {
  0% { transform: rotate(0); }
  12% { transform: rotate(14deg) translateX(3px); }
  30% { transform: rotate(-92deg) translateY(4px); }
  36% { transform: rotate(-84deg) translateY(2px); }
  42%, 70% { transform: rotate(-88deg) translateY(3px); }
  76% { transform: rotate(-84deg) translateY(3px); }
  90% { transform: rotate(8deg); }
  100% { transform: rotate(0); }
}
@keyframes boteco-poca { 0%, 28% { opacity: 0; transform: scaleX(.2); } 40% { opacity: 1; transform: scaleX(1); } 85% { opacity: .9; } 100% { opacity: 0; transform: scaleX(1.1); } }
@keyframes boteco-tonto {
  0%, 38% { opacity: 0; transform: rotate(0); }
  45% { opacity: 1; } 75% { opacity: 1; transform: rotate(540deg); } 85%, 100% { opacity: 0; transform: rotate(720deg); }
}
@media (prefers-reduced-motion: reduce) {
  .boteco-bolha, .boteco-copo, .boteco-cara, .boteco-ginga, .boteco-cara * { animation: none !important; }
  .boteco-cara, .boteco-fogos { display: none; }
}
@media (max-width: 760px) { .boteco-cara { opacity: .6; } .boteco-copo { display: none; } }

/* Consumo nas O.S. (24/10/2026) */
.cs-kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.cs-kpi.ok strong { color: var(--green); } .cs-kpi.mid strong { color: var(--orange); } .cs-kpi.no strong { color: var(--red); }
.cs-abas { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.cs-aba { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--muted);
  font-weight: 600; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.cs-aba:hover { color: var(--text); border-color: var(--cyan); }
.cs-aba.ativa { color: var(--text); border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 14%, var(--panel)); }
.cs-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cs-busca { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); min-width: 220px; }
.cs-lista { display: grid; gap: 10px; }
.cs-cartao { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: color-mix(in srgb, var(--panel-2) 70%, transparent); }
.cs-topo { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: .88rem; color: var(--muted); }
.cs-topo b { color: var(--text); font-size: .95rem; }
.cs-topo .pill { margin-left: auto; }
.cs-linha-tec { margin-top: 4px; font-size: .82rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cs-texto { margin: 8px 0; font-size: .85rem; line-height: 1.45; color: var(--text); opacity: .9; max-height: 7.5em; overflow: auto; }
.cs-texto mark { background: color-mix(in srgb, var(--cyan) 28%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }
.cs-itens { display: grid; gap: 6px; }
.cs-item { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cs-item.duvida .cs-termo { border-color: var(--orange); color: var(--orange); }
.cs-termo { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.cs-seta { color: var(--muted); }
.cs-combo { flex: 1 1 280px; width: auto; min-width: 0; }
.cs-reg-celula .cs-combo { width: min(420px, 100%); }
.cs-qtd { width: 100px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--text); }
.cs-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 8px; }
.cs-acoes small { color: var(--muted); margin-right: auto; }
.cs-baixado { display: inline-block; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--green) 16%, transparent);
  color: var(--green); font-size: .82rem; font-weight: 600; margin-right: 6px; }
.cs-mais { display: flex; justify-content: center; margin-top: 10px; }
.cs-neg td { color: var(--red); }
.cs-reg-fator { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); min-width: 180px; }
.cs-inicio { margin-top: 14px; }
.cs-tec-celula { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs-tec-celula .cs-combo { flex: 0 1 260px; }
.cs-equiv { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .85rem; white-space: nowrap; }
.cs-equiv .cs-reg-fator { min-width: 0; width: 90px; }
/* Player: item da Crunchyroll (so atalho - abre em janela propria) */
.musica-crunchy { display: grid; gap: 4px; padding: 12px; border-radius: 10px; font-size: .78rem; line-height: 1.4; color: var(--muted);
  background: linear-gradient(135deg, rgba(244, 117, 33, .22), rgba(244, 117, 33, .05)); border: 1px solid rgba(244, 117, 33, .45); }
.musica-crunchy b:first-child { color: #f47521; font-size: .9rem; }
.cad-ciente-trava { margin: 6px 0 0; padding: 8px 12px; border-radius: 10px; font-size: .8rem; line-height: 1.4;
  border: 1px dashed color-mix(in srgb, var(--orange) 60%, transparent); background: color-mix(in srgb, var(--orange) 10%, transparent); color: var(--text); }

/* Armadilha do Mundo Invertido (24/10/2026): cursor do avesso, trancos e aviso (so nos 5 min depois de escolher o tema) */
html.invertido-preso, html.invertido-preso * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='30' viewBox='0 0 26 30'%3E%3Cpath d='M24 2 L24 24 L18 18 L14 28 L10 26 L14 16 L6 16 Z' fill='%23ff2fd0' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") 24 2, auto !important;
}
.invertido-tranco { animation: invertido-tranco .45s linear; }
.invertido-tranco-forte { animation: invertido-tranco-forte .6s linear; }
@keyframes invertido-tranco {
  0%, 100% { transform: none; } 15% { transform: translate(-6px, 3px) rotate(-.6deg); } 30% { transform: translate(5px, -4px) rotate(.5deg); }
  45% { transform: translate(-4px, -2px) skewX(1.5deg); } 60% { transform: translate(6px, 3px); } 80% { transform: translate(-2px, 1px); }
}
@keyframes invertido-tranco-forte {
  0%, 100% { transform: none; filter: none; } 10% { transform: translate(-14px, 6px) rotate(-1.4deg); filter: hue-rotate(90deg); }
  25% { transform: translate(12px, -8px) rotate(1.2deg) scale(1.01); } 40% { transform: translate(-10px, -4px) skewX(3deg); filter: invert(.15); }
  55% { transform: translate(14px, 6px) rotate(.8deg); } 70% { transform: translate(-8px, 2px); filter: hue-rotate(-60deg); } 85% { transform: translate(4px, -2px); }
}
.invertido-toast { position: fixed; left: 50%; top: 18px; z-index: 99999; translate: -50% -140%; padding: 10px 18px; border-radius: 12px;
  background: #150a26; color: #ece3f7; border: 1px solid #ff2fd0; box-shadow: 0 0 22px rgba(255, 47, 208, .45); font-weight: 700;
  font-size: .9rem; pointer-events: none; transition: translate .25s ease; max-width: calc(100vw - 32px); text-align: center; }
.invertido-toast.aberto { translate: -50% 0; }
@media (prefers-reduced-motion: reduce) { .invertido-tranco, .invertido-tranco-forte { animation: none; } }

/* Devolucao de material (24/10/2026) */
.dv-form { display: grid; gap: 10px; }
.dv-linha { display: flex; flex-wrap: wrap; gap: 10px; }
.dv-cresce { flex: 1 1 260px; }
.dv-sub { margin: 4px 0 0; font-weight: 700; }
.dv-esc { margin: 0; }
.dv-itens { display: grid; gap: 6px; }
.dv-item { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dv-item input { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); }
.dv-mat { flex: 1 1 220px; min-width: 0; }
.dv-qtd { width: 80px; }
.dv-serial { flex: 0 1 200px; min-width: 0; }
.dv-foto-sn { cursor: pointer; }
.dv-acoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 6px; }
.dv-lista-itens { margin: 8px 0; padding-left: 18px; display: grid; gap: 6px; }
.dv-prod { margin-left: 8px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--cyan); background: var(--panel-2); color: var(--text); min-width: 260px; }
.dv-fotos { display: flex; flex-wrap: wrap; gap: 8px; }
.dv-fotos img { width: 110px; height: 82px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.dv-obs { width: 100%; margin-top: 6px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); }
.minimos-esc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.minimos-esc { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); color: var(--muted);
  font-weight: 700; font-size: .8rem; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.minimos-esc:hover { color: var(--text); border-color: var(--cyan); }
.minimos-esc.ativo { color: var(--text); border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 16%, var(--panel-2)); }
.minimos-esc-fixo { margin: 4px 0 10px; }
/* Aba Service (24/10/2026) */


/* Rede > Service: relacao do UNM (24/10/2026) */
.sv-unm-envio { cursor: pointer; }
.sv-unm-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.sv-ponto { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); font-size: .82em; margin: 1px 0; }
.sv-difere { color: var(--orange); border-color: var(--orange); }

/* Rede > Service: lista em fichas + editar (24/10/2026) */
.sv-kpi { font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; transition: transform .12s, border-color .12s; }
.sv-kpi:hover { transform: translateY(-2px); }
.sv-kpi.ativo { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan) inset; }
.kpi.cinza strong { color: var(--muted); }
.pill.cinza { background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); border: 1px solid color-mix(in srgb, var(--muted) 35%, transparent); }
.sv-cab, .sv-item { display: grid; grid-template-columns: minmax(220px, 1.5fr) minmax(200px, 1.2fr) minmax(130px, .7fr) minmax(220px, 1.4fr); gap: 16px; align-items: start; }
.sv-cab { padding: 6px 16px 6px 20px; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sv-lista { display: flex; flex-direction: column; gap: 8px; }
.sv-item { position: relative; padding: 14px 16px 14px 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel-2);
  transition: border-color .15s, background .15s; }
.sv-item::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--muted); }
.sv-item:hover { border-color: color-mix(in srgb, var(--cyan) 45%, var(--border)); }
.sv-item.sv-ok::before { background: var(--green); }
.sv-item.sv-errada::before, .sv-item.sv-sem_vlan::before { background: var(--red); }
.sv-item.sv-errada, .sv-item.sv-sem_vlan { background: color-mix(in srgb, var(--red) 6%, var(--panel-2)); }
.sv-item.sv-fora::before, .sv-item.sv-nao_achada::before { background: var(--orange); }
.sv-item.sv-nunca { opacity: .78; }
.sv-col { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sv-nome { font-weight: 700; line-height: 1.25; }
.sv-mono { font-family: var(--mono, ui-monospace, monospace); font-size: .8rem; color: var(--muted); word-break: break-all; }
.sv-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.sv-chip { font-size: .7rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text); white-space: nowrap; }
.sv-chip-intra { border-color: color-mix(in srgb, var(--purple) 60%, transparent); color: var(--purple); }
.sv-chip-net { border-color: color-mix(in srgb, var(--cyan) 60%, transparent); color: var(--cyan); }
.sv-chip-leve { color: var(--muted); }
.sv-chip-aviso { border-color: var(--orange); color: var(--orange); }
.sv-chip-ruim { border-color: var(--red); color: var(--red); }
.sv-obs { font-size: .8rem; color: var(--muted); padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--cyan) 7%, transparent); }
.sv-onu-pos { font-weight: 600; }
.sv-onu-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sv-onu-linha small, .sv-unm { font-size: .78rem; color: var(--muted); }
.sv-unm b { color: var(--text); }
.sv-unm b.sv-difere { color: var(--orange); }
.sv-vazio { color: var(--muted); font-style: italic; }
.sv-vlans { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px; }
.sv-vlan { font-family: var(--mono, ui-monospace, monospace); font-weight: 700; font-size: 1.05rem; padding: 2px 10px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--red) 55%, transparent); color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); }
.sv-vlan.certa { border-color: color-mix(in srgb, var(--green) 55%, transparent); color: var(--green); background: color-mix(in srgb, var(--green) 10%, transparent); }
.sv-vlan.nada { border-color: var(--border); color: var(--muted); background: none; }
.sv-vlan.esperada { border-style: dashed; border-color: var(--border); color: var(--text); background: none; }
.sv-seta { color: var(--muted); }
.sv-vlans-hoje, .sv-vlans-fim { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.sv-detalhe { font-size: .8rem; color: var(--muted); line-height: 1.35; }
.sv-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sv-nada { padding: 24px; text-align: center; }
.sv-dupla-tit { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); font-weight: 700; }
.sv-par-linha { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-top: 1px dashed var(--border); }
.sv-par-linha:first-of-type { border-top: 0; }
.sv-par-linha .sv-chip { margin-top: 2px; }
.sv-porta { display: flex; align-items: center; gap: 8px; }
.sv-porta + .sv-porta { margin-top: 6px; }
.sv-porta-n { font-size: .75rem; color: var(--muted); min-width: 52px; }
.sv-porta small { font-size: .75rem; color: var(--muted); }
.sv-porta-esperada { font-size: .75rem; color: var(--muted); margin-top: 6px; }
.sv-modal { width: min(560px, 94vw); }
.sv-modal-login { margin: -4px 0 12px; font-family: var(--mono, ui-monospace, monospace); color: var(--muted); font-size: .85rem; }
.sv-form { display: flex; flex-direction: column; gap: 14px; }
.sv-form label { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; color: var(--muted); }
.sv-form input, .sv-form textarea { padding: 9px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; }
.sv-form input:focus, .sv-form textarea:focus { outline: none; border-color: var(--cyan); }
.sv-form small { font-size: .75rem; }
.sv-tipos { display: flex; gap: 6px; flex-wrap: wrap; }
.sv-tipos button { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); cursor: pointer; font: inherit; }
.sv-tipos button.ativo { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 18%, transparent); color: var(--cyan); font-weight: 700; }
.sv-modal-quem { font-size: .75rem; color: var(--muted); margin: 0; }
@media (max-width: 980px) {
  .sv-cab { display: none; }
  .sv-item { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) { .sv-item { grid-template-columns: 1fr; } }

/* Manutencao FiberHome - antes x depois (24/10/2026) */
.fm-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.fm-form label, .fm-rot { display: flex; flex-direction: column; gap: 6px; font-size: .72rem; font-weight: 800; text-transform: uppercase; color: var(--muted); }
.fm-form input[type="text"], .fm-form textarea { border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2, var(--panel)); color: var(--text); padding: 9px 12px; font: inherit; text-transform: none; }
.fm-form select.rc-chip { width: auto; min-width: 300px; max-width: 100%; }
.fm-largo { grid-column: 1 / -1; }
.fm-acoes { display: flex; align-items: end; justify-content: flex-end; }
.fm-pons { display: flex; flex-wrap: wrap; gap: 6px; }
.fm-pon { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px !important; padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; text-transform: none !important; color: var(--text) !important; font-weight: 700 !important; }
.fm-pon input { accent-color: var(--cyan); }
.fm-pon:has(input:checked) { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 16%, transparent); }
.fm-lista { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); }
.fm-item { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; cursor: pointer;
  background: color-mix(in srgb, var(--panel-2, var(--panel)) 60%, transparent); transition: border-color .15s, transform .15s; }
.fm-item:hover { border-color: color-mix(in srgb, var(--cyan) 60%, var(--border)); transform: translateY(-1px); }
.fm-item.ativo { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan) inset; }
.fm-item.fm-aberta { border-left: 3px solid var(--orange); }
.fm-item-topo { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.fm-item-topo b { display: block; font-size: .98rem; }
.fm-item-onde { display: block; font-size: .8rem; color: var(--muted); margin-top: 2px; }
.fm-item-obs { font-size: .8rem; color: var(--muted); }
.fm-res { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; padding: 8px 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 70%, transparent); border: 1px solid var(--border); }
.fm-res > span { display: flex; flex-direction: column; gap: 1px; }
.fm-res small { font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.fm-res b { font-size: .92rem; white-space: nowrap; }
.fm-res .fm-res-ver { font-weight: 800; font-size: .86rem; justify-content: center; }
.fm-res .fm-res-ver small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.fm-res-verde { border-color: color-mix(in srgb, var(--green) 45%, var(--border)); } .fm-res-verde .fm-res-ver { color: var(--green); }
.fm-res-vermelho { border-color: color-mix(in srgb, var(--red) 45%, var(--border)); } .fm-res-vermelho .fm-res-ver { color: var(--red); }
.fm-res-amarelo { border-color: color-mix(in srgb, var(--orange) 45%, var(--border)); } .fm-res-amarelo .fm-res-ver { color: var(--orange); }
.fm-res-vazio { display: block; font-size: .8rem; color: var(--muted); text-align: center; }
.fm-passos { display: flex; gap: 0; align-items: flex-start; }
.fm-passo { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .7rem; color: var(--muted); position: relative; text-align: center; }
.fm-passo i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--border); background: var(--panel); position: relative; z-index: 1; }
.fm-passo::before { content: ""; position: absolute; top: 5px; left: -50%; width: 100%; height: 2px; background: var(--border); }
.fm-passo:first-child::before { display: none; }
.fm-passo small { font-size: .62rem; opacity: .8; }
.fm-p-ok { color: var(--text); } .fm-p-ok i { background: var(--green); border-color: var(--green); } .fm-p-ok::before { background: var(--green); }
.fm-p-medindo i { background: var(--orange); border-color: var(--orange); animation: correio-pisca 1.2s infinite; }
.fm-p-erro i { background: var(--red); border-color: var(--red); }
.fm-item-pe { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 8px; }
.fm-item-quem { font-size: .74rem; color: var(--muted); }
.fm-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.fm-x { opacity: .6; } .fm-x:hover { opacity: 1; color: var(--red); }
.fm-fotos { display: flex; flex-wrap: wrap; gap: 6px; }
.fm-foto { font-size: .74rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); }
.fm-ok { border-color: color-mix(in srgb, var(--green) 55%, transparent); color: var(--green); }
.fm-medindo { border-color: var(--orange); color: var(--orange); animation: correio-pisca 1.2s infinite; }
.fm-erro { border-color: var(--red); color: var(--red); }
.fm-espera { color: var(--muted); }
.fm-rel-ctl { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fm-rel-ctl label { display: flex; gap: 8px; align-items: center; font-size: .8rem; color: var(--muted); }
.fm-veredito { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border-radius: 12px; margin-bottom: 12px; border: 1px solid; }
.fm-veredito b { font-size: 1.4rem; letter-spacing: .04em; }
.fm-verde { border-color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.fm-vermelho { border-color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }
.fm-amarelo { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 14%, transparent); color: var(--orange); }
.fm-veredito span { color: var(--text); }
.fm-kpis { margin: 0 0 6px; }
.fm-sub { margin: 16px 0 8px; font-size: .95rem; }
.fm-det { margin-top: 12px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.fm-det summary { cursor: pointer; font-weight: 700; }
.fm-mais { color: var(--green); font-weight: 700; }
.fm-menos { color: var(--red); font-weight: 700; }
@media (max-width: 700px) { .fm-form { grid-template-columns: 1fr; } }
.fm-titulo { font-weight: 800; }
.fm-btns button:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.7); box-shadow: none; }

/* Verificacao em duas etapas com caixinhas (24/10/2026) */
.otp-icone-2fa { background: linear-gradient(145deg, rgba(45,212,191,.32), rgba(59,130,246,.24)) !important; box-shadow: 0 8px 28px rgba(45,212,191,.30), inset 0 1px 0 rgba(255,255,255,.25) !important; animation: mfa-flutua 3.2s ease-in-out infinite; }
.otp-icone-2fa svg { stroke-width: 2.6; }
@keyframes mfa-flutua { 50% { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(45,212,191,.42), inset 0 1px 0 rgba(255,255,255,.25); } }
.mfa-tempo { width: min(340px, 80%); height: 4px; margin: 4px auto 0; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.mfa-tempo span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #2dd4bf, #60a5fa); transition: width .25s linear; }
.mfa-tempo span.acabando { background: linear-gradient(90deg, #f97316, #ef4444); }
.mfa-rec { max-width: 360px; margin: 18px auto 0; text-align: left; }
.mfa-rec[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .otp-icone-2fa { animation: none; } }

/* Jogo "Meu Provedor" (24/10/2026) */
.jp-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.jp-kpis .kpi strong { font-size: clamp(1rem, 1.35vw, 1.45rem); }
.jp-k-din { --accent: var(--green); } .jp-k-cli { --accent: var(--blue); } .jp-k-rep { --accent: var(--pink); }
.jp-k-niv { --accent: var(--purple); } .jp-k-link { --accent: var(--cyan); } .jp-k-mes { --accent: var(--orange); }
.jp-barra { display: block; height: 6px; margin-top: 8px; border-radius: 6px; background: color-mix(in srgb, var(--muted) 22%, transparent); overflow: hidden; }
.jp-barra > span { display: block; height: 100%; border-radius: 6px; background: var(--accent, var(--cyan)); }
.jp-barra.ruim > span { background: var(--red); } .jp-barra.alerta > span { background: var(--orange); }
.jp-barra.prazo > span { background: color-mix(in srgb, var(--cyan) 70%, transparent); }
.jp-barra.trab > span { background: linear-gradient(90deg, var(--green), var(--cyan)); }
.jp-neg { color: var(--red) !important; } .jp-pos { color: var(--green); }
.jp-grade { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.jp-col-dir { display: grid; gap: 16px; }
.jp-lista { display: grid; gap: 8px; }
.jp-col-ch .jp-lista { max-height: 560px; overflow-y: auto; padding-right: 4px; }
.jp-ch, .jp-cargo { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel-2, var(--panel)) 70%, transparent); }
.jp-ch.andando { border-color: color-mix(in srgb, var(--green) 55%, var(--border)); }
.jp-ch.jp-rompimento { border-color: var(--red); background: color-mix(in srgb, var(--red) 14%, var(--panel)); animation: jp-pulsa 1.4s ease-in-out infinite; }
.jp-ch-ic { font-size: 1.5rem; width: 36px; text-align: center; flex: none; }
.jp-ch-info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.jp-ch-info small { color: var(--muted); font-size: .75rem; }
.jp-trab { width: 150px; flex: none; font-size: .75rem; }
.jp-cargo-btns { display: flex; gap: 6px; flex: none; }
.jp-btn { border: 1px solid color-mix(in srgb, var(--cyan) 50%, var(--border)); background: color-mix(in srgb, var(--cyan) 14%, transparent); color: var(--text);
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: transform .1s, background .15s; }
.jp-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--cyan) 28%, transparent); transform: translateY(-1px); }
.jp-btn:active:not(:disabled) { transform: scale(.96); }
.jp-btn:disabled { opacity: .4; cursor: not-allowed; }
.jp-btn-ruim { border-color: var(--red); background: color-mix(in srgb, var(--red) 22%, transparent); }
.jp-btn-fraco { padding: 7px 11px; border-color: var(--border); background: transparent; }
.jp-qtd { margin-left: 6px; padding: 1px 9px; border-radius: 999px; font-size: .8rem; background: color-mix(in srgb, var(--pink) 25%, transparent); }
.jp-dica { font-size: .78rem; color: var(--muted); margin: 0 0 10px; }
.jp-vazio { color: var(--muted); text-align: center; padding: 18px; }
.jp-cidades { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.jp-cid { display: grid; gap: 4px; padding: 12px; border-radius: 12px; border: 1px solid var(--border); position: relative; }
.jp-cid small { color: var(--muted); font-size: .74rem; }
.jp-cid.ativa { border-color: color-mix(in srgb, var(--green) 55%, var(--border)); background: color-mix(in srgb, var(--green) 9%, var(--panel)); --accent: var(--green); }
.jp-cid.rompida { border-color: var(--red); background: color-mix(in srgb, var(--red) 16%, var(--panel)); animation: jp-pulsa 1.4s ease-in-out infinite; }
.jp-cid.fechada { opacity: .85; }
.jp-cid .jp-btn { justify-self: start; margin-top: 4px; }
.jp-cid-alerta { color: var(--red); font-weight: 800; font-size: .75rem; }
.jp-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 360px; overflow-y: auto; font-size: .82rem; }
.jp-log li { display: flex; gap: 8px; padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--panel-2, var(--panel)) 60%, transparent); }
.jp-log li span { color: var(--muted); font-size: .72rem; flex: none; min-width: 52px; }
.jp-log li.bom { border-left: 3px solid var(--green); } .jp-log li.ruim { border-left: 3px solid var(--red); }
.jp-aviso { position: sticky; top: 8px; z-index: 30; margin: 0 0 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--orange);
  background: color-mix(in srgb, var(--orange) 18%, var(--panel)); font-weight: 700; }
.jp-nome-box { display: flex; gap: 8px; margin: 0 0 12px; }
.jp-nome-box input { flex: 1; max-width: 360px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); color: var(--text); padding: 8px 14px; font: inherit; }
.jp-salvo { color: var(--muted); }
.jp-flash { position: fixed; left: 50%; top: 22%; transform: translateX(-50%); z-index: 9000; padding: 18px 34px; border-radius: 18px; font-size: 1.6rem; font-weight: 900;
  color: #fff; background: linear-gradient(135deg, #22c55e, #06b6d4); box-shadow: 0 18px 50px rgba(0,0,0,.45); pointer-events: none; animation: jp-flash 2.6s ease both; }
.jp-flash.ruim { background: linear-gradient(135deg, #ef4444, #f97316); }
@keyframes jp-flash { 0% { opacity: 0; transform: translate(-50%, 20px) scale(.8); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 20% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -20px); } }
@keyframes jp-entra { from { opacity: 0; transform: translateY(6px); } }
@keyframes jp-pulsa { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 35%, transparent); } }
@media (max-width: 1200px) { .jp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .jp-grade { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .jp-ch, .jp-cid, .jp-flash { animation: none !important; } }
.jp-nome { color: var(--cyan); }

/* Meu Provedor - cena do escritorio (24/10/2026) */
.jp-cena-box { margin: 0 0 16px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: #1e293b; }
.jp-cena svg { display: block; width: 100%; height: auto; max-height: 320px; }
.jp-parede { fill: #2a3448; } .jp-cena.noite .jp-parede { fill: #1b2233; }
.jp-moldura { fill: #e5e7eb; } .jp-predio { fill: #334155; } .jp-janela { fill: #1e293b; } .jp-janela.acesa { fill: #fde68a; }
.jp-cena.noite .jp-predio { fill: #1e293b; } .jp-cena.noite .jp-janela.acesa { fill: #fcd34d; filter: drop-shadow(0 0 2px #fcd34d); }
.jp-mesa { fill: #a16207; } .jp-mesa-pe { fill: #713f12; } .jp-cadeira { fill: #111827; }
.jp-monitor { fill: #0f172a; } .jp-tela { fill: #1e3a5f; } .jp-pes.ocupado .jp-tela { fill: #38bdf8; animation: jp-tela 1.1s steps(2) infinite; }
.jp-pes.ocupado .jp-braco { animation: jp-digita .25s ease-in-out infinite alternate; transform-box: fill-box; }
.jp-pes .jp-corpo { animation: jp-respira 3s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom; }
.jp-rot { fill: #cbd5e1; font: 700 11px system-ui, sans-serif; }
.jp-rack { fill: #0b1220; stroke: #475569; stroke-width: 2; } .jp-placa { fill: #1f2937; }
.jp-led { fill: #22c55e; animation: jp-led 1.3s steps(2) infinite; }
.jp-cabo { fill: none; stroke: #475569; stroke-width: 4; stroke-linecap: round; } .jp-cabo.lotado { stroke: #7f1d1d; }
.jp-pulso { fill: #38bdf8; filter: drop-shadow(0 0 3px #38bdf8); } .jp-pulso.lotado { fill: #f87171; filter: drop-shadow(0 0 3px #f87171); }
.jp-garagem { fill: #111827; stroke: #374151; stroke-width: 2; }
.jp-van.fora { animation: jp-van 6s ease-in-out infinite; }
.jp-fone .jp-trim { fill: #f87171; font: 900 11px system-ui; opacity: 0; }
.jp-fone.tocando { animation: jp-fone .18s linear infinite; transform-box: fill-box; transform-origin: center; }
.jp-fone.tocando .jp-trim { opacity: 1; }
.jp-sirene { opacity: .25; } .jp-sirene.ligada { opacity: 1; } .jp-sirene-luz { fill: #ef4444; }
.jp-sirene.ligada .jp-sirene-luz { animation: jp-sirene .6s steps(2) infinite; }
@keyframes jp-tela { 50% { fill: #0ea5e9; } }
@keyframes jp-digita { to { transform: translateY(-2px) translateX(-2px); } }
@keyframes jp-respira { 50% { transform: scaleY(1.03); } }
@keyframes jp-led { 50% { fill: #14532d; } }
@keyframes jp-van { 0%, 8% { transform: translateX(0); opacity: 1; } 40% { transform: translateX(120px); opacity: 0; } 60% { transform: translateX(120px); opacity: 0; } 92%, 100% { transform: translateX(0); opacity: 1; } }
@keyframes jp-fone { 0% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } 100% { transform: rotate(-6deg); } }
@keyframes jp-sirene { 50% { fill: #450a0a; } }
@media (prefers-reduced-motion: reduce) { .jp-cena * { animation: none !important; } }

/* Meu Provedor - escritorio isometrico (24/10/2026) */
.jp-cena-box { background: linear-gradient(180deg, #0f172a, #1e293b); }
.jp-cena svg { max-height: 460px; }
.jp-iso-piso { fill: #2f9e8f; } .jp-cena.noite .jp-iso-piso { fill: #1f6f66; }
.jp-iso-rejunte { stroke: rgba(0,0,0,.12); stroke-width: 1; }
.jp-iso-parede-d { fill: #f4e7c8; } .jp-iso-parede-e { fill: #e8d7ad; }
.jp-cena.noite .jp-iso-parede-d { fill: #c9bc9c; } .jp-cena.noite .jp-iso-parede-e { fill: #b9ab89; }
.jp-iso-rodape { fill: #8a6a3b; }
.jp-iso-moldura { fill: #f8fafc; stroke: #94a3b8; stroke-width: 1; }
.jp-iso-placa { fill: #0f766e; stroke: #134e4a; stroke-width: 2; }
.jp-iso-letreiro { fill: #ecfeff; font: 900 17px system-ui, sans-serif; letter-spacing: .04em; }
.jp-iso-tv { fill: #22d3ee; font: 900 15px system-ui, sans-serif; } .jp-iso-tv-sub { fill: #94a3b8; font: 700 9px system-ui, sans-serif; }
.jp-iso-nome { fill: #0f172a; font: 800 10px system-ui, sans-serif; paint-order: stroke; stroke: rgba(255,255,255,.75); stroke-width: 3px; }
.jp-iso-garagem { fill: #6b7280; stroke: #fbbf24; stroke-width: 2; stroke-dasharray: 8 6; }
.jp-iso-tela { fill: #1e3a5f; }
.jp-iso-mesa.ocupado .jp-iso-tela { fill: #38bdf8; animation: jp-tela 1.1s steps(2) infinite; }
.jp-iso-mesa.ocupado .jp-iso-corpo { animation: jp-iso-trabalha .5s ease-in-out infinite alternate; }
.jp-iso-mesa .jp-iso-corpo { animation: jp-iso-respira 3s ease-in-out infinite; }
.jp-iso-van.fora { animation: jp-iso-van 7s ease-in-out infinite; }
.jp-balao { opacity: 0; transition: opacity .3s; } .jp-balao.visivel { opacity: 1; animation: jp-balao 1s ease-in-out infinite; }
.jp-balao-txt { fill: #ef4444; font: 900 16px system-ui, sans-serif; }
@keyframes jp-iso-trabalha { to { transform: translateY(-2px); } }
@keyframes jp-iso-respira { 50% { transform: translateY(-1px); } }
@keyframes jp-iso-van { 0%, 10% { opacity: 1; transform: translate(0, 0); } 40%, 65% { opacity: 0; transform: translate(60px, 30px); } 95%, 100% { opacity: 1; transform: translate(0, 0); } }
@keyframes jp-balao { 50% { transform: translateY(-4px); } }
/* escritorio evolui com o nivel: 1 garagem (concreto), 2 piso verde, 3 carpete azul, 4 madeira */
.jp-cena[data-tier="1"] .jp-iso-piso { fill: #8a8f96; } .jp-cena[data-tier="1"] .jp-iso-parede-d { fill: #cfcac4; } .jp-cena[data-tier="1"] .jp-iso-parede-e { fill: #bdb7ae; }
.jp-cena[data-tier="3"] .jp-iso-piso { fill: #3b5b8f; } .jp-cena[data-tier="3"] .jp-iso-parede-d { fill: #eef2f7; } .jp-cena[data-tier="3"] .jp-iso-parede-e { fill: #dbe3ee; }
.jp-cena[data-tier="4"] .jp-iso-piso { fill: #a5743f; } .jp-cena[data-tier="4"] .jp-iso-parede-d { fill: #fafaf9; } .jp-cena[data-tier="4"] .jp-iso-parede-e { fill: #e7e5e4; }
.jp-cena.noite .jp-iso-piso { filter: brightness(.72); } .jp-cena.noite .jp-iso-parede-d, .jp-cena.noite .jp-iso-parede-e { filter: brightness(.8); }
.jp-vapor { animation: jp-vapor 2.4s ease-in-out infinite; opacity: .7; }
.jp-iso-trofeu { fill: #fff; font: 900 10px system-ui; }
@keyframes jp-vapor { 0% { opacity: 0; transform: translateY(4px); } 40% { opacity: .8; } 100% { opacity: 0; transform: translateY(-10px); } }
/* baloes do chamado em cima do PC (24/10/2026) */
.jp-bolha { animation: jp-bolha 1.6s ease-in-out infinite; }
.jp-bolha-fundo { fill: #fff; stroke: rgba(0,0,0,.18); stroke-width: 1; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.jp-bolha-anel-fundo { fill: none; stroke: #e2e8f0; stroke-width: 3.5; }
.jp-bolha-anel { fill: none; stroke: #22c55e; stroke-width: 3.5; stroke-linecap: round; transition: stroke-dashoffset .9s linear; }
.jp-bolha-ic { font: 900 15px system-ui, "Segoe UI Emoji", "Apple Color Emoji", sans-serif; fill: #0f172a; }
.jp-bolha.espera .jp-bolha-fundo { fill: #fef2f2; stroke: #ef4444; stroke-width: 2; }
.jp-bolha.espera .jp-bolha-ic { fill: #dc2626; font-size: 16px; }
.jp-bolha.espera { animation: jp-bolha-pula .7s ease-in-out infinite; }
.jp-bolha.alerta .jp-bolha-fundo { fill: #fee2e2; stroke: #ef4444; stroke-width: 2; }
@keyframes jp-bolha { 50% { transform: translateY(-3px); } }
@keyframes jp-bolha-pula { 50% { transform: translateY(-6px) scale(1.06); } }
.jp-vermelho { margin: 0 0 12px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--red); background: color-mix(in srgb, var(--red) 16%, var(--panel)); animation: jp-pulsa 1.6s ease-in-out infinite; }
.jp-vermelho[hidden] { display: none; }
.jp-folha.ruim { color: var(--red); font-weight: 700; }
/* Meu Provedor: palco com o escritorio grande no meio e os paineis nos lados (24/10/2026) */
.jp-palco { display: grid; grid-template-columns: minmax(290px, 1fr) minmax(0, 2.3fr) minmax(320px, 1.1fr); gap: 14px; height: min(78vh, 720px); margin-bottom: 16px; }
.jp-palco > * { min-height: 0; }
.jp-lado { display: flex; flex-direction: column; min-height: 0; overflow: hidden; margin: 0; }
.jp-rola { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
.jp-col-ch .jp-lista.jp-rola { max-height: none; }
.jp-palco .jp-cena-box { margin: 0; display: flex; align-items: center; justify-content: center; }
.jp-palco .jp-cena { width: 100%; height: 100%; }
.jp-palco .jp-cena svg { width: 100%; height: 100%; max-height: none; }
.jp-abas { display: flex; gap: 6px; margin-bottom: 10px; }
.jp-aba { flex: 1; border: 1px solid var(--border); background: transparent; color: var(--muted); border-radius: 999px; padding: 7px 10px; font: inherit; font-weight: 800; font-size: .82rem; cursor: pointer; }
.jp-aba.ativa { color: var(--text); border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 16%, transparent); }
.jp-lado .jp-ch, .jp-lado .jp-cargo { padding: 8px 10px; gap: 9px; }
.jp-lado .jp-cargo { flex-wrap: wrap; }
.jp-lado .jp-cargo .jp-ch-info { flex: 1 1 150px; }
.jp-lado .jp-trab { width: 110px; }
@media (max-width: 1350px) { .jp-palco { grid-template-columns: 1fr 1fr; height: auto; } .jp-palco .jp-cena-box { grid-column: 1 / -1; order: -1; height: 460px; } .jp-lado { max-height: 520px; } }
@media (max-width: 800px) { .jp-palco { grid-template-columns: 1fr; } }
/* Meu Provedor: funcionarios com carreira (24/10/2026) */
.jp-cargo-bloco { display: grid; gap: 6px; padding-bottom: 6px; border-bottom: 1px dashed var(--border); }
.jp-func { display: flex; align-items: center; gap: 9px; padding: 7px 10px; margin-left: 18px; border-radius: 10px; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 85%, transparent); flex-wrap: wrap; }
.jp-func .jp-ch-info { flex: 1 1 140px; }
.jp-func-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: .85rem; flex: none; }
.jp-func-xp .jp-barra { margin-top: 4px; height: 5px; }
.jp-nv { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: .66rem; font-weight: 800; vertical-align: middle; margin-left: 4px; }
.jp-nv0 { background: color-mix(in srgb, var(--muted) 25%, transparent); color: var(--muted); }
.jp-nv1 { background: color-mix(in srgb, var(--cyan) 20%, transparent); color: var(--cyan); }
.jp-nv2 { background: color-mix(in srgb, var(--green) 20%, transparent); color: var(--green); }
.jp-nv3 { background: color-mix(in srgb, var(--purple) 22%, transparent); color: var(--purple); }
.jp-nv4 { background: linear-gradient(90deg, #f59e0b, #ef4444); color: #fff; }
.jp-btn-promo { border-color: #f59e0b; background: color-mix(in srgb, #f59e0b 22%, transparent); animation: jp-promo 1.2s ease-in-out infinite; }
.jp-barra.promo > span { background: linear-gradient(90deg, #f59e0b, #facc15); }
.jp-bolha.promo .jp-bolha-fundo { fill: #fffbeb; stroke: #f59e0b; stroke-width: 2; }
.jp-bolha.promo { animation: jp-bolha-pula .9s ease-in-out infinite; }
@keyframes jp-promo { 50% { box-shadow: 0 0 0 3px color-mix(in srgb, #f59e0b 35%, transparent); } }
.jp-quem { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: .66rem; font-weight: 800; background: color-mix(in srgb, var(--cyan) 18%, transparent); color: var(--cyan); } .jp-quem.campo { background: color-mix(in srgb, var(--orange) 20%, transparent); color: var(--orange); }
.jp-etapa { margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: .64rem; font-weight: 800; background: color-mix(in srgb, var(--purple) 22%, transparent); color: var(--purple); vertical-align: middle; }
.jp-ajuda-fundo { position: fixed; inset: 0; z-index: 8000; display: grid; place-items: center; padding: 16px; background: rgba(2,6,23,.6); backdrop-filter: blur(4px); }
.jp-ajuda-fundo[hidden] { display: none; }
.jp-ajuda { width: min(760px, 100%); max-height: 88vh; overflow-y: auto; padding: 22px 26px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--cyan) 40%, var(--border));
  background: color-mix(in srgb, var(--panel) 92%, transparent); box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.jp-ajuda-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.jp-ajuda-topo h2 { margin: 0; }
.jp-ajuda-passos { display: grid; gap: 9px; padding-left: 20px; margin: 8px 0 12px; line-height: 1.45; font-size: .9rem; }
/* planos e taxa de servico (24/10/2026) */
.jp-plano { display: inline-block; padding: 0 7px; border-radius: 999px; font-size: .66rem; font-weight: 800; vertical-align: middle; margin-left: 3px; white-space: nowrap; }
.jp-plano-basico { background: color-mix(in srgb, var(--muted) 22%, transparent); color: var(--muted); }
.jp-plano-familia { background: color-mix(in srgb, var(--cyan) 18%, transparent); color: var(--cyan); }
.jp-plano-gamer { background: color-mix(in srgb, var(--purple) 24%, transparent); color: var(--purple); }
.jp-plano-empresa { background: linear-gradient(90deg, #f59e0b, #ef4444); color: #fff; animation: jp-promo 1.4s ease-in-out infinite; }
.jp-taxa { font-size: .66rem; font-weight: 800; color: var(--green); margin-left: 3px; }
.jp-cid-mix { color: var(--text) !important; }
.jp-planos-linha { display: flex; flex-wrap: wrap; gap: 6px; }
.jp-planos-linha .jp-plano { animation: none; font-size: .72rem; padding: 2px 9px; }
/* Meu Provedor: escritorio 3D (24/10/2026) */
.jp3-wrap { position: relative; overflow: hidden; }
.jp3-wrap canvas { display: block; border-radius: 16px; }
.jp3-hud { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.jp3-nome { position: absolute; left: 0; top: 0; padding: 1px 7px; border-radius: 999px; font: 800 10.5px system-ui, sans-serif; color: #0f172a; background: rgba(255,255,255,.82); white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.jp3-bolha-pos { position: absolute; left: 0; top: 0; width: 44px; height: 54px; border: 0; padding: 0; background: none; pointer-events: auto; font: inherit; cursor: default; }
.jp3-bolha-pos[data-acao] { cursor: pointer; }
.jp3-bolha { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #fff; box-shadow: 0 6px 14px rgba(0,0,0,.4); animation: jp-bolha 1.6s ease-in-out infinite; }
.jp3-bolha .jp3-ic { position: relative; font: 900 18px system-ui, "Segoe UI Emoji", "Apple Color Emoji", sans-serif; color: #0f172a; }
.jp3-bolha .jp3-bico { position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; background: #fff; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.jp3-bolha .jp3-anel { position: absolute; inset: 4px; border-radius: 50%; background: conic-gradient(#22c55e var(--p, 0%), #e2e8f0 0); display: none; }
.jp3-bolha .jp3-anel::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }
.jp3-bolha.com-anel .jp3-anel { display: block; }
.jp3-bolha.espera { background: #fef2f2; outline: 2px solid #ef4444; animation: jp-bolha-pula .7s ease-in-out infinite; cursor: pointer; }
.jp3-bolha.espera .jp3-bico { background: #fef2f2; } .jp3-bolha.espera .jp3-ic { color: #dc2626; }
.jp3-bolha.promo { background: #fffbeb; outline: 2px solid #f59e0b; animation: jp-bolha-pula .9s ease-in-out infinite; cursor: pointer; }
.jp3-bolha.promo .jp3-bico { background: #fffbeb; }
.jp3-bolha.alerta { background: #fee2e2; outline: 2px solid #ef4444; } .jp3-bolha.alerta .jp3-bico { background: #fee2e2; }
.jp3-bolha-pos[data-acao]:hover .jp3-ic { transform: scale(1.15); }

/* Meu Provedor: tela de jogo - cena 3D ocupa tudo, paineis de vidro por cima (24/10/2026) */
.jp-game { position: relative; height: max(560px, calc(100vh - 150px)); border-radius: 18px; overflow: hidden; border: 1px solid var(--border); background: #0b1220; margin-bottom: 14px; }
.jp-game .jp-cena-box { position: absolute; inset: 0; margin: 0; border: 0; border-radius: 0; display: block; }
.jp-game .jp-cena { width: 100%; height: 100%; }
.jp-game .jp-cena svg { width: 100%; height: 100%; max-height: none; }
.jp-game .jp3-wrap canvas { border-radius: 0; }
.jp-hud-top { position: absolute; left: 12px; right: 12px; top: 10px; z-index: 5; pointer-events: none; }
.jp-hud-top .jp-kpis { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; justify-content: center; pointer-events: auto; }
.jp-hud-top .kpi { min-height: 0; padding: 7px 14px 7px 12px; border-radius: 999px; background: rgba(2, 6, 23, .72); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); box-shadow: 0 6px 18px rgba(0,0,0,.35); display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; min-width: 0; }
.jp-hud-top .kpi::before { display: none; }
.jp-hud-top .kpi span { font-size: .6rem; color: #94a3b8; grid-column: 1 / -1; }
.jp-hud-top .kpi strong { margin: 0; font-size: 1rem; color: #fff; }
.jp-hud-top .kpi small { margin: 0; font-size: .66rem; color: #cbd5e1; }
.jp-hud-top .kpi .jp-barra { grid-column: 1 / -1; margin-top: 4px; height: 4px; }
.jp-hud-top .kpi:hover { transform: none; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.jp-painel { position: absolute; top: 86px; bottom: 44px; width: 330px; z-index: 6; display: flex; flex-direction: column; border-radius: 16px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(2, 6, 23, .66); backdrop-filter: blur(12px); box-shadow: 0 14px 40px rgba(0,0,0,.45); padding: 10px 12px; color: #e2e8f0; min-height: 0; }
.jp-painel[hidden] { display: none; }
.jp-painel-esq { left: 12px; } .jp-painel-dir { right: 12px; width: 380px; }
.jp-painel-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.jp-painel-topo h2 { margin: 0; font-size: 1rem; }
.jp-painel .jp-dica { color: #94a3b8; }
.jp-painel .jp-rola { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
.jp-painel .jp-abas { margin-bottom: 8px; flex-wrap: wrap; }
.jp-painel .jp-aba { flex: 1 1 auto; padding: 6px 8px; font-size: .74rem; color: #cbd5e1; }
.jp-painel .jp-aba.ativa { color: #fff; }
.jp-painel-fecha { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #cbd5e1; border-radius: 999px; width: 30px; height: 30px; cursor: pointer; font: inherit; flex: none; }
.jp-painel .jp-ch, .jp-painel .jp-cargo, .jp-painel .jp-func, .jp-painel .jp-cid, .jp-painel .jp-log li { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #e2e8f0; }
.jp-painel .jp-ch-info small, .jp-painel .jp-cid small, .jp-painel .jp-log li span, .jp-painel .jp-item-onde { color: #94a3b8; }
.jp-painel .jp-cidades { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.jp-painel .fh-rank th, .jp-painel .fh-rank td { color: #e2e8f0; }
.jp-painel .jp-cargo-bloco { border-color: rgba(255,255,255,.12); }
.jp-abre { position: absolute; top: 90px; z-index: 6; border: 1px solid rgba(255,255,255,.18); background: rgba(2,6,23,.72); color: #fff; border-radius: 999px; padding: 8px 14px; font: inherit; font-weight: 800; cursor: pointer; backdrop-filter: blur(8px); }
.jp-abre[hidden] { display: none; } .jp-abre-esq { left: 12px; } .jp-abre-dir { right: 12px; }
.jp-ticker { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 5; padding: 7px 14px; border-radius: 999px; background: rgba(2,6,23,.7); border: 1px solid rgba(255,255,255,.12); color: #e2e8f0; font-size: .8rem; backdrop-filter: blur(8px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.jp-ticker .bom { color: #4ade80; } .jp-ticker .ruim { color: #f87171; }
.jp-etapa-campo { font-weight: 700; font-size: .72rem; color: var(--cyan); }
.jp-game .jp-vermelho, .jp-game .jp-aviso { position: absolute; }
@media (max-width: 1100px) { .jp-painel { width: 280px; } .jp-painel-dir { width: 300px; } }
@media (max-width: 800px) { .jp-game { height: auto; } .jp-game .jp-cena-box { position: relative; height: 380px; } .jp-painel { position: relative; top: auto; bottom: auto; left: auto; right: auto; width: auto; margin: 10px; max-height: 420px; } .jp-hud-top { position: relative; left: 0; right: 0; top: 0; padding: 8px; } .jp-ticker { position: relative; margin: 0 10px 10px; } }
.jp-comprada { opacity: .75; }
.jp-fs { top: auto; bottom: 48px; right: 12px; padding: 6px 11px; font-size: 1rem; }
.jp-game:fullscreen { height: 100vh; border-radius: 0; border: 0; }
.jp-game:fullscreen .jp-painel { top: 80px; }
.jp-painel .jp-log { max-height: none; overflow: visible; }   /* o painel ja rola: o log ocupa a altura toda (pedido do Leonardo, tela cheia) */
.jp-painel .jp-rola { overflow-x: hidden; }
.jp-painel .jp-cargo, .jp-painel .jp-func, .jp-painel .jp-ch { flex-wrap: wrap; }
.jp-painel .jp-cargo-btns { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.jp-painel .jp-btn { white-space: normal; text-align: center; }
.jp-painel .jp-abas { position: relative; padding-right: 36px; }
.jp-painel .jp-abas .jp-painel-fecha { position: absolute; right: 0; top: 0; }
.jp-painel .jp-lista.jp-rola { align-content: start; }
.jp-loja-titulo { margin: 4px 0 2px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--cyan); }
.jp-foramodo { position: static; margin: 6px auto 0; display: block; font-size: .72rem; padding: 5px 12px; pointer-events: auto; }
.jp-float { position: absolute; transform: translateX(-100%); font-weight: 900; font-size: .9rem; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,.6); animation: jp-float 1.7s ease-out forwards; }
.jp-float.mais { color: #4ade80; } .jp-float.menos { color: #f87171; animation-name: jp-float-desce; }
@keyframes jp-float { 0% { opacity: 0; transform: translateY(6px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-34px); } }
@keyframes jp-float-desce { 0% { opacity: 0; transform: translateY(-6px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(34px); } }
.jp-pausa-aviso { display: block; text-align: center; margin-top: 6px; font-size: .68rem; color: #94a3b8; pointer-events: none; }

/* Meu Provedor: pausa */
.jp-btn-pausa { top: auto; bottom: 48px; right: 62px; padding: 6px 11px; font-size: 1rem; }
.jp-pausado { position: absolute; inset: 0; z-index: 7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(2,6,23,.55); backdrop-filter: blur(3px); color: #fff; text-align: center; padding: 16px; }
.jp-pausado[hidden] { display: none; }
.jp-pausado b { font-size: 2.4rem; letter-spacing: .12em; text-shadow: 0 4px 24px rgba(0,0,0,.6); }
.jp-pausado small { max-width: 420px; color: #cbd5e1; }

/* Meu Provedor: falta de equipamento (ONU, OLT, link) */
.jp-falta-onu { position: absolute; top: 150px; left: 50%; transform: translateX(-50%); z-index: 6; width: min(470px, calc(100% - 24px)); display: flex; flex-direction: column; gap: 8px; }
.jp-falta-onu[hidden] { display: none; }
.jp-alerta-eq { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 14px; border: 2px solid #ef4444; background: rgba(69,10,10,.88); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.45); backdrop-filter: blur(8px); animation: jp-falta 1.4s ease-in-out infinite; }
.jp-alerta-eq.acabando { border-color: #f59e0b; background: rgba(66,32,6,.88); animation: none; }
.jp-alerta-eq .ic { font-size: 1.8rem; }
.jp-alerta-eq .txt { flex: 1; min-width: 200px; } .jp-alerta-eq .txt b { display: block; letter-spacing: .06em; } .jp-alerta-eq .txt small { color: #fecaca; }
.jp-alerta-eq.acabando .txt small { color: #fde68a; }
.jp-alerta-eq .bts { display: flex; gap: 6px; flex-wrap: wrap; } .jp-alerta-eq .bts small { color: #cbd5e1; }
@keyframes jp-falta { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.6), 0 10px 30px rgba(0,0,0,.45); } 50% { box-shadow: 0 0 0 10px rgba(239,68,68,0), 0 10px 30px rgba(0,0,0,.45); } }
@media (prefers-reduced-motion: reduce) { .jp-alerta-eq { animation: none; } }

/* Meu Provedor: avisos dentro da area do jogo (aparecem tambem em tela cheia) */
.jp-game .jp-aviso { top: 96px; left: 50%; transform: translateX(-50%); z-index: 9; width: min(520px, calc(100% - 24px)); margin: 0; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.jp-game .jp-vermelho { bottom: 56px; left: 50%; transform: translateX(-50%); z-index: 8; width: min(560px, calc(100% - 24px)); margin: 0; }

/* Meu Provedor: nivel das melhorias (10 quadradinhos) */
.jp-nivel-m { display: block; font-size: .62rem; letter-spacing: 1px; color: #facc15; line-height: 1.2; margin: 2px 0; }
.jp-nivel-m i { font-style: normal; color: rgba(148,163,184,.35); }

.jp3-nome.papel { border: 2px solid; }
.jp-btn-cam { top: auto; bottom: 48px; right: 112px; padding: 6px 11px; font-size: 1rem; }

/* Meu Provedor: cartoes das abas laterais - o texto nao espreme, os botoes descem pra linha de baixo quando nao cabem */
.jp-painel .jp-cargo .jp-ch-info { flex: 1 1 170px; min-width: 170px; }
.jp-painel .jp-cargo .jp-cargo-btns { max-width: 100%; justify-content: flex-start; }
.jp-painel .jp-cargo > .jp-btn { margin-left: auto; }

/* Meu Provedor: filtro da aba Equipe por cargo */
.jp-filtro-eq { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.jp-chip { border: 1px solid rgba(255,255,255,.18); background: rgba(15,23,42,.6); color: #e2e8f0; border-radius: 999px; padding: 5px 11px; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; }
.jp-chip b { margin-left: 4px; color: #94a3b8; }
.jp-chip.ativo { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 22%, transparent); color: #fff; }
.jp-chip.ativo b { color: #fff; }
.jp3-nome.depto { font-size: 11.5px; letter-spacing: .08em; padding: 3px 10px; border-radius: 6px; }

.jp-alerta-eq { position: relative; padding-right: 38px; }
.jp-alerta-x { position: absolute; top: 6px; right: 8px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.35); color: #fff; font-weight: 800; cursor: pointer; line-height: 1; }
.jp-alerta-x:hover { background: rgba(255,255,255,.2); }
.jp-ch.jp-cancelamento { border-color: var(--red); background: color-mix(in srgb, var(--red) 12%, var(--panel)); }
.jp-ch.jp-retirada { border-color: var(--orange); }
/* Meu Provedor (25/10/2026, pedido do Leonardo): clientes embaixo no meio; o +R$/-R$ do caixa fica dentro da propria ficha */
.jp-hud-baixo { position: absolute; left: 354px; right: 404px; bottom: 50px; z-index: 5; pointer-events: none; display: flex; justify-content: center; }
.jp-hud-baixo .jp-kpis { margin: 0; pointer-events: auto; display: flex; justify-content: center; }
.jp-hud-baixo .kpi { min-height: 0; padding: 7px 14px 7px 12px; border-radius: 999px; background: rgba(2, 6, 23, .72); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); box-shadow: 0 6px 18px rgba(0,0,0,.35); display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; }
.jp-hud-baixo .kpi::before { display: none; }
.jp-hud-baixo .kpi span { font-size: .6rem; color: #94a3b8; grid-column: 1 / -1; }
.jp-hud-baixo .kpi strong { margin: 0; font-size: 1rem; color: #fff; }
.jp-hud-baixo .kpi small { margin: 0; font-size: .66rem; color: #cbd5e1; }
.jp-hud-baixo .kpi:hover { transform: none; }
.jp-hud-top .jp-k-din { position: relative; }
.jp-k-din .jp-float { right: 14px; top: 2px; transform: none; font-size: .78rem; }
@media (max-width: 1100px) { .jp-hud-baixo { left: 304px; right: 324px; } }
@media (max-width: 800px) { .jp-hud-baixo { position: relative; left: 0; right: 0; bottom: auto; padding: 0 8px 8px; } }
.jp-k-din .jp-float.mais { animation-name: jp-float-curto; } .jp-k-din .jp-float.menos { animation-name: jp-float-curto-desce; top: 14px; }
@keyframes jp-float-curto { 0% { opacity: 0; transform: translateY(8px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes jp-float-curto-desce { 0% { opacity: 0; transform: translateY(-8px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(10px); } }
/* botoes da cena (camera, pausa, tela cheia) ficam fora do painel da direita quando ele esta aberto (pedido do Leonardo) */
.jp-painel-dir:not([hidden]) ~ .jp-fs { right: 404px; }
.jp-painel-dir:not([hidden]) ~ .jp-btn-pausa { right: 454px; }
.jp-painel-dir:not([hidden]) ~ .jp-btn-cam { right: 504px; }
@media (max-width: 1100px) { .jp-painel-dir:not([hidden]) ~ .jp-fs { right: 324px; } .jp-painel-dir:not([hidden]) ~ .jp-btn-pausa { right: 374px; } .jp-painel-dir:not([hidden]) ~ .jp-btn-cam { right: 424px; } }
.jp-hud-baixo { right: 560px; }
@media (max-width: 1100px) { .jp-hud-baixo { right: 480px; } }
.jp-item-alvo { animation: jp-item-alvo 1s ease-in-out infinite; }
@keyframes jp-item-alvo { 0%, 100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0); } 50% { box-shadow: 0 0 0 3px rgba(250, 204, 21, .9), 0 0 18px rgba(250, 204, 21, .6); } }
/* "+XP" subindo da cabeca dos funcionarios (Meu Provedor, 25/10/2026) */
.jp3-xp { position: absolute; transform: translate(-50%, 0); font: 900 12px system-ui, sans-serif; color: #c4b5fd; text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 8px rgba(139,92,246,.6); pointer-events: none; white-space: nowrap; animation: jp3-xp 1.7s ease-out forwards; z-index: 3; }
@keyframes jp3-xp { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.9); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 100% { opacity: 0; transform: translate(-50%, -38px) scale(1); } }
@media (prefers-reduced-motion: reduce) { .jp3-xp { animation-duration: .01s; } }
.jp-btn-nomes { top: auto; bottom: 48px; right: 162px; padding: 6px 11px; font-size: 1rem; }
.jp-painel-dir:not([hidden]) ~ .jp-btn-nomes { right: 554px; }
@media (max-width: 1100px) { .jp-painel-dir:not([hidden]) ~ .jp-btn-nomes { right: 474px; } }
.jp-btn-nomes.desligado { opacity: .5; text-decoration: line-through; }
.jp-btn-leve { top: auto; bottom: 48px; right: 212px; padding: 6px 11px; font-size: 1rem; }
.jp-painel-dir:not([hidden]) ~ .jp-btn-leve { right: 604px; }
@media (max-width: 1100px) { .jp-painel-dir:not([hidden]) ~ .jp-btn-leve { right: 524px; } }
.jp-falta-btn { top: auto; bottom: 48px; right: 262px; padding: 6px 13px; font-size: .85rem; border-color: rgba(251,191,36,.6); color: #fde68a; }
.jp-falta-btn b { color: #fff; }
.jp-est.jp-est-cheio { color: #fca5a5; font-weight: 800; }
.jp-falta-btn.grave { border-color: #ef4444; color: #fecaca; animation: jp-band-pisca 1.4s ease-in-out infinite; }
.jp-painel-dir:not([hidden]) ~ .jp-falta-btn { right: 654px; }
@media (max-width: 1100px) { .jp-painel-dir:not([hidden]) ~ .jp-falta-btn { right: 574px; } }
.jp-falta-lista { position: absolute; bottom: 92px; right: 262px; z-index: 8; width: min(420px, 46vw); max-height: 60%; overflow-y: auto; padding: 10px; border-radius: 16px; background: rgba(15,23,42,.94); border: 1px solid rgba(251,191,36,.45); box-shadow: 0 18px 40px rgba(0,0,0,.5); display: grid; gap: 8px; }
.jp-falta-lista[hidden] { display: none; }
.jp-painel-dir:not([hidden]) ~ .jp-falta-lista { right: 654px; }
@media (max-width: 1100px) { .jp-painel-dir:not([hidden]) ~ .jp-falta-lista { right: 574px; } }
.jp-falta-lista .jp-inbox-item.grave { border-color: rgba(239,68,68,.6); }
.jp-btn-leve.ligado { background: #f59e0b; color: #1f1300; box-shadow: 0 0 0 2px #fde68a inset; }
.jp-hud-baixo { right: 610px; }
@media (max-width: 1100px) { .jp-hud-baixo { right: 530px; } }
.jp-parcelas { margin-top: 6px; } .jp-parcelas summary { cursor: pointer; color: #93c5fd; font-size: .75rem; }
.jp-parcela { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: .74rem; }
.jp-parcela .jp-btn { padding: 3px 9px; font-size: .72rem; flex: none; }
.jp-kpis .kpi small .jp-est { font-style: normal; display: inline; text-transform: none; letter-spacing: 0; font-size: inherit; color: inherit; white-space: nowrap; }
/* clientes: sobe pra cima dos botoes da cena, onde cabe numa linha so */
.jp-hud-baixo { bottom: 92px; right: 404px; }
@media (max-width: 1100px) { .jp-hud-baixo { right: 324px; } }
.jp-hud-baixo .kpi small { white-space: normal; text-transform: none; letter-spacing: 0; line-height: 1.5; }
/* nao passa por cima do painel de chamados: quebra linha entre os itens (cada item continua inteiro) */
.jp-hud-baixo { max-width: min(560px, 42%); }
/* avisos minimizados: ficam piscando embaixo, ao lado dos botoes da cena (Meu Provedor, 25/10/2026) */
.jp-alerta-min { right: 40px; font-size: 1.1rem; }
.jp-bandeja { position: absolute; bottom: 48px; right: 212px; z-index: 6; display: flex; gap: 6px; flex-wrap: wrap-reverse; justify-content: flex-end; max-width: 46%; pointer-events: auto; }
.jp-painel-dir:not([hidden]) ~ .jp-bandeja { right: 604px; }
.jp-band-chip { border-radius: 999px; padding: 6px 12px; border: 1px solid rgba(251,191,36,.7); background: rgba(120,53,15,.85); color: #fde68a; font: 700 .74rem system-ui, sans-serif; cursor: pointer; white-space: nowrap; animation: jp-band-pisca 1.4s ease-in-out infinite; }
.jp-band-chip.grave { border-color: rgba(248,113,113,.8); background: rgba(127,29,29,.88); color: #fecaca; }
@keyframes jp-band-pisca { 0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0); } 50% { box-shadow: 0 0 0 3px rgba(251,191,36,.55), 0 0 16px rgba(251,191,36,.45); } }
@media (prefers-reduced-motion: reduce) { .jp-band-chip { animation: none; } }
/* Meu Provedor (25/10/2026): grupos de abas, caixa de entrada e modo automatico */
.jp-grupos { display: flex; gap: 5px; margin-bottom: 6px; padding-right: 36px; flex-wrap: wrap; }
.jp-grupo { flex: 1 1 auto; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); color: #cbd5e1; border-radius: 12px; padding: 7px 8px; font: inherit; font-weight: 800; font-size: .78rem; cursor: pointer; }
.jp-grupo.ativo { color: #fff; border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 22%, transparent); }
.jp-painel .jp-abas { padding-right: 0; }
.jp-painel .jp-abas .jp-painel-fecha { top: -42px; }
.jp-painel .jp-abas:not(:has(.jp-aba:not([hidden]))) { margin-bottom: 0; }
.jp-inbox-btn { position: absolute; top: 86px; right: 404px; z-index: 7; border-radius: 999px; padding: 7px 14px; border: 1px solid rgba(251,191,36,.6); background: rgba(2,6,23,.8); color: #fde68a; font: 800 .82rem system-ui, sans-serif; cursor: pointer; backdrop-filter: blur(8px); }
.jp-inbox-btn i { font-style: normal; font-size: .7rem; color: #fbbf24; }
.jp-inbox-btn.novo { animation: jp-band-pisca 1.4s ease-in-out infinite; }
.jp-painel-dir[hidden] ~ .jp-inbox-btn { right: 12px; }
.jp-inbox-lista { position: absolute; top: 126px; right: 404px; z-index: 8; width: min(440px, 46vw); max-height: 60%; overflow-y: auto; padding: 10px; border-radius: 16px; background: rgba(15,23,42,.94); border: 1px solid rgba(251,191,36,.45); box-shadow: 0 18px 40px rgba(0,0,0,.5); display: grid; gap: 8px; }
.jp-painel-dir[hidden] ~ .jp-inbox-lista { right: 12px; }
.jp-inbox-topo { display: flex; justify-content: space-between; align-items: center; color: #fde68a; }
.jp-inbox-topo .jp-alerta-x, .jp-inbox-item .jp-alerta-x { position: static; flex: none; }
.jp-inbox-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: rgba(120,53,15,.35); border: 1px solid rgba(251,191,36,.25); }
.jp-inbox-item .ic { font-size: 1.4rem; } .jp-inbox-item .txt { flex: 1; min-width: 0; display: grid; gap: 4px; }
.jp-inbox-item .txt b { color: #fde68a; } .jp-inbox-item .txt small { color: #e2e8f0; font-size: .74rem; }
.jp-inbox-item .bts { display: flex; flex-wrap: wrap; gap: 5px; }
.jp-auto { margin-left: auto; margin-right: 6px; border-radius: 999px; padding: 4px 10px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.05); color: #cbd5e1; font: 800 .72rem system-ui, sans-serif; cursor: pointer; }
.jp-auto.ligado { border-color: #22c55e; color: #bbf7d0; background: rgba(34,197,94,.18); }
@media (max-width: 1100px) { .jp-inbox-btn, .jp-inbox-lista { right: 324px; } }
/* Meu Provedor: escolha do modo */
.jp-modos { max-width: 720px; }
.jp-modos-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 12px 0; }
.jp-modo-card { display: grid; gap: 6px; text-align: left; padding: 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: inherit; font: inherit; cursor: pointer; }
.jp-modo-card:hover { border-color: var(--cyan); background: rgba(34,211,238,.12); }
.jp-modo-card b { font-size: 1.05rem; } .jp-modo-card small { opacity: .85; line-height: 1.35; }
.jp-modo-card.bloq { opacity: .35; cursor: not-allowed; }
.jp-relatorio .jp-ch-info { display: grid; gap: 3px; }
.jp-rel-t { margin-top: 6px; font-weight: 800; color: #e2e8f0 !important; }
.jp-rel-l { display: flex; justify-content: space-between; gap: 10px; font-size: .76rem; color: #cbd5e1; border-bottom: 1px dashed rgba(255,255,255,.08); padding: 2px 0; }
.jp-rel-l b { white-space: nowrap; }
.jp-passos { margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(34,211,238,.4); background: rgba(8,47,73,.55); display: grid; gap: 3px; font-size: .76rem; color: #e2e8f0; }
.jp-passos b { color: #67e8f9; } .jp-passos .ok { opacity: .6; text-decoration: line-through; } .jp-passos small { color: #94a3b8; }
/* Meu Provedor: ficha do funcionario (acertos, erros, advertencia) - 25/10/2026 */
.jp-func-nome { all: unset; cursor: pointer; font-weight: 800; color: inherit; border-bottom: 1px dashed rgba(148,163,184,.5); }
.jp-func-nome:hover { color: #a3e635; border-bottom-color: #a3e635; }
.jp-placar { display: block; opacity: .85; }
.jp-func.aberta { flex-wrap: wrap; background: rgba(163,230,53,.05); border-radius: 12px; }
.jp-ficha { margin-top: 8px; padding: 10px; border: 1px solid rgba(148,163,184,.25); border-radius: 12px; background: rgba(15,23,42,.55); }
.jp-ficha-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; margin-bottom: 8px; }
.jp-ficha-grade > div { background: rgba(255,255,255,.04); border-radius: 9px; padding: 6px 8px; }
.jp-ficha-grade small { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.jp-ficha-t { display: block; margin: 4px 0; font-size: .8rem; }
.jp-ficha-erros { margin: 0 0 8px; padding-left: 16px; font-size: .78rem; display: grid; gap: 3px; }
.jp-ficha-erros small { opacity: .6; margin-right: 4px; }
/* Meu Provedor: cartao de meta concluida (25/10/2026) */
.jp-trofeu { position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 9000; width: min(360px, 88vw); padding: 22px 20px 18px; text-align: center; cursor: pointer;
  border-radius: 22px; color: #fefce8; background: linear-gradient(160deg, rgba(120,53,15,.92), rgba(30,27,75,.94)); border: 2px solid #facc15;
  box-shadow: 0 0 0 6px rgba(250,204,21,.15), 0 24px 70px rgba(0,0,0,.6); overflow: hidden; opacity: 1; animation: jpTrofeuEntra .55s cubic-bezier(.2,1.6,.4,1); }
.jp-trofeu.sai { animation: jpTrofeuSai .35s ease-in both; }
.jp-trofeu > small { position: relative; letter-spacing: .14em; font-weight: 800; color: #fde68a; font-size: .72rem; }
.jp-trofeu-ic { position: relative; font-size: 3.4rem; line-height: 1.1; margin: 6px 0 2px; animation: jpTrofeuPula 1.2s ease-in-out infinite; }
.jp-trofeu b { position: relative; display: block; font-size: 1.25rem; }
.jp-trofeu p { position: relative; margin: 4px 0 10px; font-size: .86rem; opacity: .9; }
.jp-trofeu-premio { position: relative; display: inline-block; padding: 5px 12px; border-radius: 999px; background: #facc15; color: #1c1300; font-weight: 900; }
.jp-trofeu-mais { display: block; margin-top: 8px; }
.jp-trofeu-raios { position: absolute; inset: -60%; background: repeating-conic-gradient(rgba(250,204,21,.16) 0 10deg, transparent 10deg 20deg); animation: jpTrofeuGira 8s linear infinite; }
@keyframes jpTrofeuEntra { from { transform: translate(-50%, -40%) scale(.85); } to { transform: translate(-50%, -50%) scale(1); } }   /* sem opacidade 0: se a animacao nao rodar, o cartao continua visivel */
@keyframes jpTrofeuSai { to { opacity: 0; transform: translate(-50%, -60%) scale(.9); } }
@keyframes jpTrofeuPula { 50% { transform: translateY(-6px) scale(1.06); } }
@keyframes jpTrofeuGira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .jp-trofeu, .jp-trofeu-ic, .jp-trofeu-raios { animation: none; } }
.jp-frota-cont { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; padding: 6px 8px; border-radius: 10px; background: rgba(15,118,110,.14); font-size: .78rem; }
.jp-trofeu-libera { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 10px; }
.jp-trofeu-libera small { flex-basis: 100%; letter-spacing: .12em; font-weight: 800; color: #a7f3d0; font-size: .68rem; }
.jp-trofeu-libera span { padding: 3px 8px; border-radius: 999px; background: rgba(16,185,129,.22); border: 1px solid rgba(110,231,183,.5); font-size: .74rem; }

/* ===== Meu Provedor: controles mais faceis de entender (26/10/2026) ===== */
.jp-barra-baixo { position: absolute; bottom: 48px; right: 12px; z-index: 6; display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 6px; }
.jp-painel-dir:not([hidden]) ~ .jp-barra-baixo { right: 404px; }
/* tela menor com os dois paineis abertos: so os icones (o nome continua no "title" ao passar o mouse) */
@media (max-width: 1750px) { .jp-painel-dir:not([hidden]) ~ .jp-barra-baixo .jp-bb:not(.jp-falta-btn) .jp-rot { display: none; } }
@media (max-width: 1100px) { .jp-painel-dir:not([hidden]) ~ .jp-barra-baixo { right: 324px; } }
.jp-bb { position: static; display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,.18); background: rgba(2,6,23,.78); color: #fff; border-radius: 999px; padding: 6px 12px; font: inherit; font-weight: 800; font-size: .95rem; line-height: 1.1; cursor: pointer; backdrop-filter: blur(8px); }
.jp-bb:hover { border-color: rgba(103,232,249,.6); background: rgba(8,47,73,.85); }
.jp-bb .jp-rot { font-size: .7rem; font-weight: 700; color: #cbd5e1; letter-spacing: .02em; }
.jp-bb.jp-btn-leve.ligado .jp-rot { color: #1f1300; }
.jp-bb.jp-btn-nomes.desligado { opacity: .6; }
.jp-bb.jp-falta-btn { font-size: .82rem; }
.jp-barra-baixo .jp-bandeja { position: static; max-width: none; }
.jp-falta-lista { right: 12px; }
.jp-painel-dir:not([hidden]) ~ .jp-falta-lista { right: 404px; }
@media (max-width: 1100px) { .jp-painel-dir:not([hidden]) ~ .jp-falta-lista { right: 324px; } }
/* grupos do painel da direita: 5 botoes do mesmo tamanho, icone em cima */
.jp-painel .jp-grupos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) 30px; gap: 5px; padding-right: 0; margin-bottom: 8px; }
.jp-painel .jp-grupo { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; font-size: .7rem; line-height: 1.15; min-width: 0; }
.jp-painel .jp-grupo .ic { font-size: 1.2rem; line-height: 1; }
.jp-painel .jp-grupos .jp-painel-fecha { position: static; align-self: center; justify-self: center; }
/* abas do grupo: controle segmentado (fica claro que e "dentro" do grupo escolhido) */
.jp-painel .jp-abas { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 3px; gap: 3px; flex-wrap: nowrap; }
.jp-painel .jp-aba { border: 0; border-radius: 9px; padding: 6px 6px; white-space: nowrap; }
.jp-painel .jp-aba.ativa { background: color-mix(in srgb, var(--cyan) 28%, transparent); box-shadow: 0 0 0 1px var(--cyan) inset; }
.jp-painel .jp-abas:not(:has(.jp-aba:not([hidden]))) { display: none; }
/* filtros da equipe em grade (nome a esquerda, quantidade a direita) */
.jp-painel .jp-filtro-eq { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 5px; }
.jp-painel .jp-filtro-eq .jp-chip { display: flex; justify-content: space-between; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; overflow: hidden; }
.jp-info { color: #67e8f9; cursor: help; border-bottom: 1px dotted #67e8f9; font-size: .74rem; margin-left: 4px; white-space: nowrap; }
/* chamados: filtro por tipo + cartao mais compacto */
.jp-filtro-ch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 2px 0 8px; }
.jp-filtro-ch .jp-chip { display: flex; justify-content: space-between; align-items: center; gap: 4px; min-width: 0; font-size: .7rem; padding: 4px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jp-painel-esq .jp-ch-info > b { font-size: .9rem; line-height: 1.25; }
.jp-painel-esq .jp-ch { padding-top: 8px; padding-bottom: 8px; }

/* Setor de Cancelamento: abas de situacao e pendencias (26/10/2026) */
.sc-abas { margin: 0 0 10px; }
.sc-abas button.rv-aba { font: inherit; cursor: pointer; }
.sc-pend { display: inline-block; margin-top: 4px; font-size: 11px; }
.sc-vencido { color: var(--red); font-weight: 700; }
.sc-acoes { display: flex; flex-wrap: wrap; gap: 4px; min-width: 150px; }
#scEquipSugestao { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Clientes Retidos / bonus de retencao (26/10/2026) */
.ret-regra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.ret-regra i { color: var(--muted); font-style: normal; }
.ret-passo { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 80%, transparent); font-size: .86rem; }
.ret-passo b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--cyan); color: var(--bg); font-size: .75rem; }
.ret-links { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 14px; }
.ret-mk { display: grid; gap: 6px; }
.ret-mk-lista { display: grid; gap: 4px; max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: 6px;
  background: var(--panel-2); }
.ret-mk-item { display: grid; text-align: left; gap: 2px; padding: 6px 10px; border-radius: 8px; border: 1px solid transparent; background: transparent;
  color: var(--text); cursor: pointer; font: inherit; }
.ret-mk-item:hover { border-color: var(--cyan); }
.ret-mk-item small { color: var(--muted); }
.ret-abas { margin: 0 0 10px; }
.ret-abas button.rv-aba { font: inherit; cursor: pointer; }
.ret-itens { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.otp-dica { margin: -4px 0 4px; font-size: .78rem; color: var(--muted); line-height: 1.4; }
/* Meu Provedor: detalhe dos gastos e saldo liquido do mes (27/10/2026) */
.jp-rel-sub { position: relative; padding-left: 8px; font-size: .72rem; color: #aeb9c7; }
.jp-rel-sub i { font-style: normal; color: #7f8b99; font-size: .68rem; margin-left: 4px; }
.jp-gasto-barra { position: absolute; left: 8px; bottom: 0; height: 2px; max-width: calc(100% - 8px); border-radius: 2px;
  background: linear-gradient(90deg, #f87171, rgba(248,113,113,.25)); }
.jp-rel-saldo { font-size: .8rem; color: #e2e8f0; }
.jp-rel-saldo span small { display: block; color: #7f8b99; font-size: .66rem; }
.jp-rel-saldo b { font-size: .9rem; }
/* Meu Provedor: modo do CEO (27/10/2026) */
.jp-ceo-modo { display: grid; gap: 6px; margin: 10px 0; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(161,98,7,.45);
  background: linear-gradient(135deg, rgba(161,98,7,.18), rgba(15,23,42,.35)); font-size: .78rem; color: #e2e8f0; }
.jp-ceo-modo small { color: #aeb9c7; font-size: .7rem; line-height: 1.35; }
.jp-ceo-modo .jp-filtro-eq { margin: 0; }

/* Manutencao FiberHome: cores pelo significado (27/10/2026) - fixas, pra nao mudar de sentido com o tema */
:root { --fm-bom: #22c55e; --fm-ruim: #f59e0b; --fm-crit: #ef4444; }
.fm-bom { color: var(--fm-bom) !important; font-weight: 700; }
.fm-ruim { color: var(--fm-ruim) !important; font-weight: 700; }
.fm-crit { color: var(--fm-crit) !important; font-weight: 700; }
.fm-antes { color: var(--muted); font-weight: 500; opacity: .8; }
.fm-seta { font-style: normal; color: var(--muted); opacity: .7; margin: 0 2px; }
.fm-kpi strong b { font-size: 1.05em; }
.fm-kpi.fm-bom, .fm-kpi.fm-ruim, .fm-kpi.fm-crit { font-weight: inherit; }
.fm-kpi.fm-bom > span, .fm-kpi.fm-ruim > span, .fm-kpi.fm-crit > span, .fm-kpi > small { color: var(--muted) !important; font-weight: 600; }
.fm-kpi.fm-bom { border-top: 3px solid var(--fm-bom) !important; background: color-mix(in srgb, var(--fm-bom) 7%, var(--panel)); }
.fm-kpi.fm-ruim { border-top: 3px solid var(--fm-ruim) !important; background: color-mix(in srgb, var(--fm-ruim) 8%, var(--panel)); }
.fm-kpi.fm-crit { border-top: 3px solid var(--fm-crit) !important; background: color-mix(in srgb, var(--fm-crit) 8%, var(--panel)); }
.fm-sub { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; border-left: 4px solid var(--cyan);
  background: color-mix(in srgb, var(--cyan) 8%, transparent); }
.fm-sub-pon { border-left-color: var(--purple); background: color-mix(in srgb, var(--purple) 9%, transparent); }
.fm-det > summary { border-left: 4px solid var(--border); padding-left: 10px; border-radius: 6px; }
.fm-det-crit > summary { border-left-color: var(--fm-crit); color: var(--fm-crit); background: color-mix(in srgb, var(--fm-crit) 8%, transparent); }
.fm-det-ruim > summary { border-left-color: var(--fm-ruim); color: var(--fm-ruim); background: color-mix(in srgb, var(--fm-ruim) 8%, transparent); }
.fm-det-bom > summary { border-left-color: var(--fm-bom); color: var(--fm-bom); background: color-mix(in srgb, var(--fm-bom) 7%, transparent); }
.jp-k-hum { --accent: #f59e0b; } .jp-k-hum small { display: block; font-size: .68rem; }

/* Syslog: registro dos alertas de login (27/10/2026) */
.sl-alertas { margin-bottom: 16px; }
.sl-al-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.sl-al-filtros .qa-busca { flex: 1; min-width: 220px; margin: 0; }
.sl-al-tabela { max-height: 420px; overflow: auto; }
.sl-al-tabela td { vertical-align: top; }

/* Alerta de cadastro errado no MK (27/10/2026) */
.cad-al .vidro-caixa { max-width: 580px; }
.cad-al-tab { width: 100%; border-collapse: collapse; margin: 10px 0 4px; font-size: 13.5px; text-align: left; }
.cad-al-tab td { padding: 7px 8px; border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); vertical-align: top; }
.cad-al-tab td:first-child { color: var(--muted); width: 82px; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.cad-al-err { color: #ef4444; font-weight: 700; }
.cad-al-ok { color: #10b981; font-weight: 700; font-family: var(--mono); }
.cad-al-mk { font-family: var(--mono); text-decoration: line-through; opacity: .85; }
.cad-al-rod { font-size: 12px; color: var(--muted); }
.cad-al-msg { color: #ef4444; font-weight: 600; font-size: 13px; }

/* FiberHome: padrao de nome por PON revisada (27/10/2026) */
.padrao-tit { font-size: 14px; margin: 14px 0 6px; }
.padrao-ruim { color: #ef4444; font-weight: 700; }
.padrao-bom { color: #10b981; font-weight: 700; }
.padrao-pon { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin: 6px 0; }
.padrao-pon summary { cursor: pointer; }

/* Configuracao PABX (27/10/2026) */
.pabx-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; margin-bottom: 16px; }
.pabx-linha { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); }
.pabx-linha span { color: var(--muted); }
.pabx-acoes { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 12px 0 6px; }
.pabx-auto { display: flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; }
.pabx-sit { margin: 8px 0 0; font-size: .88rem; }
.pabx-ok { color: var(--green); }
.pabx-erro { color: var(--red); font-weight: 700; }
.pabx-cels { display: flex; flex-direction: column; gap: 8px; }
.pabx-cel { display: grid; grid-template-columns: 110px 1fr auto; gap: 8px; align-items: center; }

.ramais-plantao { flex: 1 1 auto; margin-left: 24px; font-size: .95rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .ramais-plantao { flex-basis: 100%; margin: 4px 0 0; white-space: normal; } }
.ramais-plantao b { color: var(--orange); }

.rv-ponto-add { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; margin: 0 0 14px; border: 1px dashed var(--border); border-radius: 14px; }

/* janela de restauro em etapas (27/10/2026) */
.rv-rest2 { max-width: 860px; }
.rv-rest2-backup { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; margin: 4px 0 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--cyan) 10%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent); }
.rv-rest2-backup span { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.rv-rest2-backup b { font-size: .95rem; }
.rv-rest2-etapa { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.rv-rest2-num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; border: 2px solid var(--cyan); color: var(--cyan); }
.rv-rest2-etapa.feito .rv-rest2-num { background: var(--green); border-color: var(--green); color: var(--bg); font-size: 0; }
.rv-rest2-etapa.feito .rv-rest2-num::after { content: "✓"; font-size: 1rem; }
.rv-rest2-corpo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rv-rest2-corpo h3 { margin: 2px 0 0; font-size: 1rem; }
.rv-rest2-corpo h3 small { font-weight: 400; color: var(--muted); font-size: .8rem; margin-left: 6px; }
.rv-rest2-titulo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.rv-rest2-grade { display: grid; grid-template-columns: 1.6fr 1fr 1fr 90px; gap: 8px; }
.rv-rest2-g2 { grid-template-columns: 1fr auto; }
.rv-rest2-campo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rv-rest2-campo span { font-size: .72rem; color: var(--muted); }
.rv-rest2-campo .rv-busca, .rv-rest2-campo .rc-chip { width: 100%; min-width: 0; flex: 0 0 auto; height: 40px; box-sizing: border-box; }
.rv-rest2-g2 .rv-busca { flex: 0 0 auto; height: 40px; }
.rv-rest2-porta { max-width: 460px; }
.rv-rest2-porta .rc-chip { max-width: none; width: 100%; }
.rv-rest2-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rv-rest2-fim { justify-content: flex-end; }
.rv-rest2-fim .rv-botao { padding-inline: 18px; }
.rv-rest2-dica { color: var(--muted); }
.rv-rest2 .rv-rest-log { margin-top: 10px; }
@media (max-width: 720px) { .rv-rest2-grade { grid-template-columns: 1fr 1fr; } .rv-rest2-largo { grid-column: 1 / -1; } }

/* Aviso do sistema: lista que abre no clique (28/10/2026) */
.aviso-sistema-lista { margin: 8px 0 10px; border: 1px solid rgba(148,163,184,.25); border-radius: 12px; background: rgba(15,23,42,.35); white-space: normal; }
.aviso-sistema-lista summary { cursor: pointer; padding: 8px 12px; font-weight: 700; color: #fbbf24; list-style: none; }
.aviso-sistema-lista summary::-webkit-details-marker { display: none; }
.aviso-sistema-lista summary::before { content: "▸ "; }
.aviso-sistema-lista[open] summary::before { content: "▾ "; }
.aviso-sistema-lista ul { margin: 0; padding: 4px 14px 10px 30px; max-height: 32vh; overflow-y: auto; }
.aviso-sistema-lista li { margin: 2px 0; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* um nome por linha; o texto inteiro aparece passando o mouse */

.fm-kpi .fm-ad { opacity: .7; font-size: .68rem; letter-spacing: .04em; }   /* legenda antes -> depois (28/10/2026) */

.fm-resumo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fm-resumo label { display: flex; gap: 6px; align-items: center; font-size: .8rem; color: var(--muted); }
.fm-kpi .fm-faixa { display: block; font-style: normal; font-size: .62rem; opacity: .6; letter-spacing: 0; text-transform: none; margin-top: 2px; }   /* faixa de sinal miuda (28/10/2026) */

/* ao abrir o relatorio a rolagem parava com o cabecalho (Baixar PDF) escondido atras da barra do topo - 28/10/2026 */
#fmRel { scroll-margin-top: 90px; }

/* Manutencao FiberHome: PONs revisadas - monitoramento (28/10/2026) */
#fmMonitor { scroll-margin-top: 90px; }
.fm-mon-resumo { margin: 4px 0 10px; color: var(--muted); }
.fm-piorou { color: var(--red); font-weight: 700; }
.fm-atento { color: var(--orange); }
.fm-melhorou { color: var(--green); }
.fm-linha-alerta td { background: color-mix(in srgb, var(--red) 9%, transparent); }
.fm-pisca { animation: fmPisca 1.2s ease-in-out infinite; }
@keyframes fmPisca { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .fm-pisca { animation: none; } }
.fm-mot { display: block; font-size: 11px; color: var(--muted); margin: 3px 0; }
.fm-hist { font-size: 11px; color: var(--muted); margin-top: 4px; }
.fm-hist summary { cursor: pointer; }
#fmMonLista .fm-cli { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#fmMonLista { overflow-x: auto; max-width: 100%; }
#fmMonLista table th, #fmMonLista table td { padding-left: 8px; padding-right: 8px; }
#fmMonLista .fm-cli { max-width: 180px; }
/* Dashboard das manutencoes (28/10/2026) */
.md-filtro .fm-resumo { justify-content: flex-start; }
.md-faixa { margin: 0 0 14px; padding: 14px 18px; border-radius: 14px; background: linear-gradient(90deg, rgba(34,197,94,.85), rgba(16,185,129,.55)); color: #fff; }
.md-faixa b { display: block; font-size: 1.35rem; }
.md-faixa span { font-size: .9rem; opacity: .95; }
.md-chart { height: 300px; }
.kpi .md-faixa-sinal { display: block; font-style: normal; font-size: 10px; color: var(--muted); margin: 2px 0 0; letter-spacing: 0; }
/* Manutencao: % ruim e PON revisada nos chips (28/10/2026) */
.fm-pon small { font-size: 10.5px; font-weight: 600; color: var(--muted); }
.fm-pon.fm-pon-ruim { border-color: color-mix(in srgb, var(--red) 55%, transparent); }
.fm-pon.fm-pon-ruim small { color: var(--red); }
.fm-pon.fm-pon-atencao small { color: var(--orange); }
.fm-pon.fm-pon-bom small { color: var(--green); }
.fm-pon.fm-pon-rev { background: color-mix(in srgb, var(--green) 14%, transparent); border-color: color-mix(in srgb, var(--green) 60%, transparent); }
.fm-pon em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--green); padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--green) 18%, transparent); }

/* PONs revisadas: tabela em grupos (logo depois / agora / mudou), cores por faixa de sinal e distancia melhor->pior (28/10/2026) */
.fm-legenda { margin: 0 0 10px; font-size: .78rem; color: var(--muted); line-height: 1.6; }
.fm-mon-scroll { overflow-x: auto; }
.fm-mon-tab .fm-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fm-mon-tab .fm-g1 { border-left: 1px solid var(--border); }
.fm-mon-tab .fm-grupo th { text-align: center; font-size: .72rem; letter-spacing: .06em; color: var(--text); border-bottom: 1px solid var(--border); }
.fm-sinal-bom { color: var(--green); }
.fm-sinal-ruim { color: var(--orange); font-weight: 600; }
.fm-sinal-critico { color: var(--red); font-weight: 700; }
.fm-dist { display: inline-block; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, currentColor 14%, transparent); }
.rv-achado { margin: 8px 0 0; padding: 6px 10px; border-radius: 10px; font-size: .78rem; color: var(--text);
  background: color-mix(in srgb, var(--cyan, #22d3ee) 12%, transparent); border: 1px solid color-mix(in srgb, var(--cyan, #22d3ee) 35%, transparent); }   /* 28/10/2026 */
.rv-sem-link { margin: 6px 0 0; padding: 5px 10px; border-radius: 10px; font-size: .78rem; font-weight: 600; color: var(--orange);
  background: color-mix(in srgb, var(--orange) 12%, transparent); }   /* PTP sem link (28/10/2026) */
.rv-sem-link.nunca { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
.rv-serv-lista { flex-wrap: wrap; gap: 8px 16px; }   /* desligar servicos em massa (28/10/2026) */
.rv-serv-lista label { display: inline-flex; gap: 6px; align-items: center; font-size: .85rem; }
/* Padrao de nome: aplicar na PON inteira (29/10/2026) */
.padrao-aplicar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0 10px; }
.padrao-aplicar small { color: var(--muted); }
.padrao-pula { color: var(--muted); }
.padrao-log { max-height: 260px; overflow: auto; white-space: pre-wrap; font-size: 12px; padding: 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 85%, transparent); border: 1px solid var(--border); margin-bottom: 10px; }
/* Padrao de nome: aviso "nome divergente" da conferencia 2x por dia (29/10/2026) */
.padrao-aviso { margin: 8px 0 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--orange) 50%, transparent);
  background: color-mix(in srgb, var(--orange) 10%, transparent); font-size: .86rem; }
.padrao-aviso ul { margin: 6px 0 0; padding-left: 18px; }
.padrao-aviso li { margin: 2px 0; }
/* Setor de Cancelamento: Equipamentos a retirar (29/10/2026) */
.eq-filtro { display: inline-flex; gap: 6px; align-items: center; font-size: .82rem; color: var(--muted); }
.eq-obs { color: var(--orange); }
/* Padrao de nome das ONUs - pagina propria (29/10/2026) */
.pn-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .pn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pn-ajuda { margin-top: 12px; font-size: .82rem; color: var(--muted); }
.pn-ajuda summary { cursor: pointer; }
.pn-ajuda p { margin: 6px 0 0; line-height: 1.5; }
.pn-hist { margin: 8px 0 4px; }
.pn-hist-tit { margin: 6px 0; font-size: .85rem; color: var(--muted); }
.pn-hist-erro td { opacity: .7; }
.pn-alertas { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.pn-alerta { display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer; padding: 10px 14px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--red) 55%, transparent); background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--text); }
.pn-alerta span { font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--red); }
.pn-alerta small { color: var(--muted); }
.pn-alerta:hover { background: color-mix(in srgb, var(--red) 18%, transparent); }
#padraoSec { scroll-margin-top: 90px; }
/* PONs revisadas compactas por OLT (29/10/2026) */
.pn-rev-olts { display: grid; gap: 10px; }
.pn-rev-olt { padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; }
.pn-rev-cab { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.pn-rev-cab small { color: var(--muted); }
.pn-rev-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pn-chip { padding: 4px 10px; border-radius: 999px; font-size: .8rem; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text); }
.pn-chip.ok { border-color: color-mix(in srgb, var(--green) 55%, transparent); background: color-mix(in srgb, var(--green) 10%, transparent); }
.pn-chip.ruim { border-color: color-mix(in srgb, var(--red) 60%, transparent); background: color-mix(in srgb, var(--red) 14%, transparent); font-weight: 700; }
.pn-chip:hover { filter: brightness(1.2); }
/* Serasa: linha informativa (pendencia interna - nao entra no aprovado/reprovado) - 29/10/2026 */
.serasa-consulta-tabela tr.serasa-linha-info td { opacity: .8; font-style: italic; }
/* Serasa: ja foi cliente MIGO? (29/10/2026) */
.serasa-migo { margin: 10px 0; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); display: grid; gap: 6px; }
.serasa-migo > small { font-size: .7rem; letter-spacing: .06em; color: var(--muted); }
.serasa-migo.alerta { border-color: color-mix(in srgb, var(--red) 60%, transparent); background: color-mix(in srgb, var(--red) 8%, transparent); }
.serasa-migo.ok, .serasa-migo.novo { border-color: color-mix(in srgb, var(--green) 50%, transparent); background: color-mix(in srgb, var(--green) 7%, transparent); }
.serasa-migo-cli { display: grid; gap: 4px; }
.serasa-migo-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.serasa-migo-bloq { color: var(--muted); }
/* Frota: mais de uma categoria na OS (29/10/2026) */
.fr-cat-linha { display: flex; gap: 6px; align-items: center; }
.fr-cat-linha select { flex: 1; min-width: 0; }
.fr-cat-extras { display: grid; gap: 6px; margin-top: 6px; }

/* ---- Via Radio: card do enlace PTP "futurista" (30/10/2026, pedido do Leonardo) ---- */
:is(.rv-enlace, .rv-fx) { --rvc: var(--muted); position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(155deg, color-mix(in srgb, var(--rvc) 9%, var(--panel)) 0%, color-mix(in srgb, var(--panel) 94%, transparent) 55%);
  border-color: color-mix(in srgb, var(--rvc) 28%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rvc) 8%, transparent), 0 10px 28px -18px color-mix(in srgb, var(--rvc) 70%, transparent);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
:is(.rv-enlace, .rv-fx).rv-borda-bom { --rvc: var(--green); } :is(.rv-enlace, .rv-fx).rv-borda-medio { --rvc: var(--orange); }
:is(.rv-enlace, .rv-fx).rv-borda-ruim { --rvc: var(--red); } :is(.rv-enlace, .rv-fx).rv-borda-neutro { --rvc: var(--muted); }
/* grade tecnica de fundo + varredura de luz */
:is(.rv-enlace, .rv-fx)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35;
  background-image: linear-gradient(color-mix(in srgb, var(--rvc) 10%, transparent) 1px, transparent 1px),
                    linear-gradient(90deg, color-mix(in srgb, var(--rvc) 10%, transparent) 1px, transparent 1px);
  background-size: 22px 22px; -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 70%); mask-image: linear-gradient(135deg, #000 0%, transparent 70%); }
:is(.rv-enlace, .rv-fx)::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--rvc) 10%, transparent), transparent); animation: rv-varre 7s ease-in-out infinite; }
@keyframes rv-varre { 0%, 60% { left: -40%; } 100% { left: 110%; } }
:is(.rv-enlace, .rv-fx):hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--rvc) 55%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rvc) 25%, transparent), 0 16px 34px -16px color-mix(in srgb, var(--rvc) 85%, transparent); }
/* cantoneiras de HUD */
.rv-enlace-ap { position: relative; }
.rv-enlace-ap::after { content: ""; position: absolute; top: -6px; right: -8px; width: 14px; height: 14px;
  border-top: 2px solid color-mix(in srgb, var(--rvc) 70%, transparent); border-right: 2px solid color-mix(in srgb, var(--rvc) 70%, transparent); border-radius: 0 6px 0 0; }
.rv-enlace-ap small { display: flex; align-items: center; gap: 8px; }
.rv-enlace-ap strong { letter-spacing: .02em; text-shadow: 0 0 18px color-mix(in srgb, var(--rvc) 35%, transparent); }
.rv-enlace-ap > span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.rv-enl-status { font-style: normal; font-size: .6rem; font-weight: 800; letter-spacing: .14em; padding: 1px 8px 1px 18px; border-radius: 999px; position: relative;
  color: var(--rvc); background: color-mix(in srgb, var(--rvc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--rvc) 35%, transparent); }
.rv-enl-status::before { content: ""; position: absolute; left: 7px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: var(--rvc); box-shadow: 0 0 8px var(--rvc); animation: rv-pisca 1.6s ease-in-out infinite; }
.rv-st-ruim::before { animation-duration: .8s; }
@keyframes rv-pisca { 50% { opacity: .25; transform: scale(.7); } }
/* feixe do enlace: trilho + pulso de dados correndo do AP pra ST */
.rv-enlace-linha { --fx: var(--cyan); }
.rv-feixe-bom { --fx: var(--green); } .rv-feixe-medio { --fx: var(--orange); } .rv-feixe-ruim { --fx: var(--red); }
.rv-enlace-linha i { position: relative; height: 3px; border-radius: 3px; overflow: visible;
  background: linear-gradient(90deg, color-mix(in srgb, var(--fx) 15%, transparent), color-mix(in srgb, var(--fx) 55%, transparent), color-mix(in srgb, var(--fx) 15%, transparent));
  box-shadow: 0 0 10px color-mix(in srgb, var(--fx) 45%, transparent); animation: none; }
.rv-enlace-linha i::before, .rv-enlace-linha i::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--fx); box-shadow: 0 0 8px var(--fx); }
.rv-enlace-linha i::before { left: -3px; } .rv-enlace-linha i::after { right: -3px; }
.rv-enlace-linha i em { position: absolute; top: 50%; left: 0; width: 26px; height: 5px; margin-top: -2.5px; border-radius: 5px;
  background: linear-gradient(90deg, transparent, var(--fx), #fff); box-shadow: 0 0 12px var(--fx); animation: rv-pacote 1.8s cubic-bezier(.5, 0, .5, 1) infinite; }
.rv-feixe-medio i em { animation-duration: 2.6s; } .rv-feixe-ruim i em { animation-duration: 3.6s; opacity: .8; }
@keyframes rv-pacote { 0% { left: -4px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 22px); opacity: 0; } }
.rv-enlace-linha b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); opacity: .8; }
/* barrinhas de sinal */
.rv-barras { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; font-style: normal; --bc: var(--muted); }
.rv-barras.rv-bom { --bc: var(--green); } .rv-barras.rv-medio { --bc: var(--orange); } .rv-barras.rv-ruim { --bc: var(--red); }
.rv-barras u { width: 4px; border-radius: 2px; background: color-mix(in srgb, var(--muted) 30%, transparent); text-decoration: none; }
.rv-barras u:nth-child(1) { height: 20%; } .rv-barras u:nth-child(2) { height: 40%; } .rv-barras u:nth-child(3) { height: 60%; }
.rv-barras u:nth-child(4) { height: 80%; } .rv-barras u:nth-child(5) { height: 100%; }
.rv-barras u.on { background: var(--bc); box-shadow: 0 0 6px color-mix(in srgb, var(--bc) 60%, transparent); }
/* CCQ em anel */
.rv-ccq { --cc: var(--green); position: relative; width: 38px; height: 38px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  background: conic-gradient(var(--cc) calc(var(--v) * 1%), color-mix(in srgb, var(--muted) 18%, transparent) 0); }
.rv-ccq::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--panel); }
.rv-ccq em, .rv-ccq small { position: relative; font-style: normal; line-height: 1; }
.rv-ccq em { font-size: .72rem; font-weight: 800; color: var(--text); margin-top: 4px; }
.rv-ccq small { font-size: .45rem; letter-spacing: .1em; color: var(--muted); margin-top: -10px; }
.rv-enlace-num { align-items: center; }
.rv-uptime { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; }
/* capacidade em barra */
.rv-cap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; font-size: .7rem; color: var(--muted); }
.rv-cap span { letter-spacing: .08em; text-transform: uppercase; font-size: .62rem; }
.rv-cap i { position: relative; height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--muted) 18%, transparent); overflow: hidden; }
.rv-cap i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: 6px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--cyan) 50%, transparent), var(--cyan)); box-shadow: 0 0 10px var(--cyan); }
.rv-cap b { color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.rv-sem-link { border-left: 3px solid var(--red); }
.rv-sem-link.nunca { animation: rv-alerta 2.4s ease-in-out infinite; }
@keyframes rv-alerta { 50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--red) 45%, transparent), 0 0 16px -4px var(--red); } }
@media (prefers-reduced-motion: reduce) {
  :is(.rv-enlace, .rv-fx)::after, .rv-enlace-linha i em, .rv-enl-status::before, .rv-sem-link.nunca { animation: none; }
  :is(.rv-enlace, .rv-fx):hover { transform: none; } }

/* Paineis e MikroTik com o mesmo visual (30/10/2026) */
.rv-fx > header { position: relative; }
.rv-fx > header::after { content: ""; position: absolute; top: -6px; right: -8px; width: 14px; height: 14px; pointer-events: none;
  border-top: 2px solid color-mix(in srgb, var(--rvc) 70%, transparent); border-right: 2px solid color-mix(in srgb, var(--rvc) 70%, transparent); border-radius: 0 6px 0 0; }
.rv-fx-topo { display: flex; align-items: center; gap: 8px; font-size: .64rem !important; letter-spacing: .1em; color: var(--muted); margin-bottom: 2px; }
.rv-fx h4 { text-shadow: 0 0 18px color-mix(in srgb, var(--rvc) 35%, transparent); letter-spacing: .02em; }
.rv-fx.rv-painel.rv-falhou, .rv-fx.rv-mk.rv-falhou { opacity: 1; border-style: solid; }
.rv-fx .rv-qtd { background: color-mix(in srgb, var(--cyan) 12%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent);
  box-shadow: inset 0 0 14px color-mix(in srgb, var(--cyan) 18%, transparent), 0 0 16px -6px var(--cyan); }
.rv-fx .rv-qtd strong { text-shadow: 0 0 12px color-mix(in srgb, var(--cyan) 70%, transparent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.rv-fx .rv-medidor em { position: relative; box-shadow: 0 0 10px -1px currentColor; }
.rv-fx .rv-medidor em.rv-bom { color: var(--green); } .rv-fx .rv-medidor em.rv-medio { color: var(--orange); } .rv-fx .rv-medidor em.rv-ruim { color: var(--red); }
.rv-fx .rv-medidor em::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 18px; border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55)); animation: rv-pisca 2.4s ease-in-out infinite; }
.rv-fx .rv-medidor b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.rv-fx footer { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .66rem; }
@media (prefers-reduced-motion: reduce) { .rv-fx .rv-medidor em::after { animation: none; } }
/* Via Radio: faixa compacta de PTP que piorou (30/10/2026) */
.rv-ptp-faixa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 14px; margin-bottom: 14px; border-radius: 14px;
  border: 1px solid var(--border); background: color-mix(in srgb, var(--panel) 90%, transparent); }
.rv-ptp-faixa.tem { border-color: color-mix(in srgb, var(--orange) 45%, var(--border)); background: color-mix(in srgb, var(--orange) 7%, var(--panel)); }
.rv-ptp-faixa-tit { font-weight: 700; font-size: .85rem; }
.rv-ptp-faixa.tem .rv-ptp-faixa-tit { color: var(--orange); }
.rv-ptp-chip { display: inline-flex; align-items: baseline; gap: 6px; border: 1px solid color-mix(in srgb, var(--orange) 45%, var(--border)); border-radius: 999px;
  padding: 4px 12px; background: color-mix(in srgb, var(--orange) 12%, transparent); color: var(--text); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.rv-ptp-chip small { font-weight: 500; color: var(--orange); }
.rv-ptp-chip:hover { background: color-mix(in srgb, var(--orange) 24%, transparent); }
.rv-ptp-faixa .rv-ptp-todos { flex-basis: 100%; margin: 0; }
.rv-ptp-faixa .rv-ptp-todos summary { cursor: pointer; font-size: .78rem; color: var(--cyan); list-style: none; }
.rv-ptp-faixa .rv-ptp-todos summary::-webkit-details-marker { display: none; }
.rv-ptp-faixa .rv-ptp-todos[open] summary { margin-bottom: 8px; }
.rv-enlace.rv-destaque { animation: rv-destaque 1.1s ease-in-out 3; }
@keyframes rv-destaque { 50% { box-shadow: 0 0 0 3px var(--orange), 0 0 30px -4px var(--orange); } }

/* Via Radio: interfaces da MikroTik como painel de portas (30/10/2026) */
.rv-portas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 215px), 1fr)); gap: 10px; }
.rv-porta { --pc: var(--muted); position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; min-width: 0;
  background: linear-gradient(160deg, color-mix(in srgb, var(--pc) 10%, var(--panel-2)), var(--panel-2) 70%);
  border: 1px solid color-mix(in srgb, var(--pc) 35%, var(--border)); transition: transform .15s, box-shadow .15s; }
.rv-porta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -12px var(--pc); }
.rv-porta-bom { --pc: var(--green); } .rv-porta-ruim { --pc: var(--red); } .rv-porta-neutro { --pc: var(--muted); }
.rv-porta-off { --pc: var(--muted); opacity: .55; } .rv-porta-desat { border-style: dashed; }
.rv-porta-topo { display: flex; align-items: center; gap: 8px; }
.rv-porta-topo strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9rem; letter-spacing: .02em; }
.rv-led { width: 9px; height: 9px; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--pc) 40%, #000); }
.rv-porta-bom .rv-led { background: var(--green); box-shadow: 0 0 8px var(--green); animation: rv-led 2.2s ease-in-out infinite; }
.rv-porta-ruim .rv-led { background: var(--red); box-shadow: 0 0 10px var(--red); animation: rv-pisca .8s ease-in-out infinite; }
@keyframes rv-led { 0%, 100% { opacity: 1; } 45% { opacity: .55; } 50% { opacity: 1; } 55% { opacity: .6; } }
.rv-porta-vel { margin-left: auto; font-size: .66rem; font-weight: 800; letter-spacing: .04em; padding: 1px 8px; border-radius: 999px; white-space: nowrap;
  color: var(--pc); background: color-mix(in srgb, var(--pc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--pc) 40%, transparent); }
.rv-porta-rot { color: var(--muted); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 1em; }
.rv-porta-tr { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 6px; font-size: .72rem; }
.rv-porta-tr span { color: var(--muted); }
.rv-porta-tr b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; min-width: 62px; text-align: right; }
.rv-porta-vazio { display: block; color: var(--muted); font-style: italic; }
.rv-porta-barra { display: block; height: 5px; border-radius: 5px; background: color-mix(in srgb, var(--muted) 16%, transparent); overflow: hidden; }
.rv-porta-barra u { display: block; height: 100%; border-radius: 5px; text-decoration: none; }
.rv-porta-barra.rx u { background: linear-gradient(90deg, color-mix(in srgb, var(--cyan) 40%, transparent), var(--cyan)); box-shadow: 0 0 8px var(--cyan); }
.rv-porta-barra.tx u { background: linear-gradient(90deg, color-mix(in srgb, var(--violet, #a78bfa) 40%, transparent), var(--violet, #a78bfa)); box-shadow: 0 0 8px var(--violet, #a78bfa); }
.rv-porta-pe { display: flex; justify-content: space-between; gap: 6px; font-size: .66rem; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding-top: 6px; border-top: 1px dashed color-mix(in srgb, var(--pc) 25%, var(--border)); }
.rv-porta-quedas.algumas { color: var(--orange); } .rv-porta-quedas.muitas { color: var(--red); font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .rv-led { animation: none !important; } }
.rv-ifs-modal { width: min(1100px, 96vw); }
.rv-ifs-modal #rvIfsCorpo { padding: 0 4px 6px; }
/* lista de clientes do painel compacta (30/10/2026): 1 cliente por linha */
.rv-lista-tabela td, .rv-lista-tabela th { padding: 5px 10px; vertical-align: middle; }
.rv-lista-cli1 { line-height: 1.3; }
.rv-lista-cli1 strong { font-size: .84rem; }
.rv-lista-cli1 small { color: var(--muted); font-size: .7rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.rv-lista-cli1 .rv-mkcli { display: block; font-size: .7rem; }
.rv-lista-tabela { max-height: 70vh; }
/* Via Radio: frequencias na mesma torre (30/10/2026) */
.rv-freq h3 { margin: 0 0 4px; }
.rv-freq-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 8px; margin-top: 10px; }
.rv-freq-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 8px 12px; border-radius: 12px;
  border: 1px solid var(--border); border-left: 3px solid var(--orange); background: color-mix(in srgb, var(--orange) 6%, var(--panel)); }
.rv-freq-sobre { border-left-color: var(--red); background: color-mix(in srgb, var(--red) 7%, var(--panel)); }
.rv-freq-item div { display: flex; flex-direction: column; min-width: 0; }
.rv-freq-item strong { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-freq-item small { font-size: .7rem; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.rv-freq-item > b { color: var(--muted); }
.rv-freq-tag { font-size: .6rem; font-weight: 800; letter-spacing: .08em; padding: 2px 7px; border-radius: 999px; color: var(--orange); border: 1px solid currentColor; }
.rv-freq-sobre .rv-freq-tag { color: var(--red); }
.rv-freq-torre { grid-column: 2 / -1; }
/* Via Radio: inventario de firmware (30/10/2026) */
.rv-fw h3 small { font-size: .72rem; font-weight: 500; color: var(--muted); margin-left: 6px; }
.rv-fw-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 10px; margin-top: 10px; }
.rv-fw-fam { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--panel-2); display: flex; flex-direction: column; gap: 8px; }
.rv-fw-tit { display: flex; flex-direction: column; gap: 2px; }
.rv-fw-tit small { color: var(--muted); font-size: .72rem; }
.rv-fw-atr { color: var(--orange); font-weight: 700; }
.rv-fw-vers { display: flex; flex-direction: column; gap: 4px; }
.rv-fw-ver summary { cursor: pointer; display: flex; justify-content: space-between; gap: 8px; padding: 3px 10px; border-radius: 999px; font-size: .78rem;
  border: 1px solid color-mix(in srgb, var(--green) 40%, var(--border)); color: var(--green); list-style: none; }
.rv-fw-ver summary::-webkit-details-marker { display: none; }
.rv-fw-ver.atr summary { border-color: color-mix(in srgb, var(--orange) 45%, var(--border)); color: var(--orange); }
.rv-fw-ver summary b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.rv-fw-ver ul, .rv-fw-velhos ul { margin: 6px 0 4px; padding-left: 18px; font-size: .76rem; display: flex; flex-direction: column; gap: 2px; }
.rv-fw-ver small, .rv-fw-velhos small { color: var(--muted); }
.rv-fw-velhos { margin-top: 10px; }
.rv-fw-velhos summary { cursor: pointer; font-size: .8rem; color: var(--orange); }
/* Via Radio: atualizar firmware (30/10/2026) */
.rv-fw-arqs { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 8px 0; }
.rv-fw-enviar { cursor: pointer; }
.rv-fw-arq { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px; font-size: .74rem;
  border: 1px solid color-mix(in srgb, var(--cyan) 40%, var(--border)); background: color-mix(in srgb, var(--cyan) 8%, transparent); }
.rv-fw-arq button { border: 0; background: none; color: var(--muted); cursor: pointer; font-weight: 700; border-radius: 50%; padding: 0 5px; }
.rv-fw-arq button:hover { color: var(--red); }
.rv-fw-jobs { flex-basis: 100%; font-size: .78rem; }
.rv-fw-jobs summary { cursor: pointer; color: var(--cyan); }
.rv-fw-jobs ul { margin: 6px 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.rv-fw-jobs small { color: var(--muted); }
.rv-fw-atualiza { margin-left: 6px; border: 1px solid color-mix(in srgb, var(--cyan) 50%, var(--border)); background: color-mix(in srgb, var(--cyan) 12%, transparent);
  color: var(--cyan); border-radius: 999px; font: inherit; font-size: .68rem; font-weight: 700; padding: 0 8px; cursor: pointer; }
.rv-fw-atualiza:hover { background: color-mix(in srgb, var(--cyan) 25%, transparent); }
.rv-fw-modal { width: min(760px, 96vw); }
.rv-fw-aviso { border: 1px solid color-mix(in srgb, var(--orange) 45%, var(--border)); background: color-mix(in srgb, var(--orange) 8%, transparent);
  border-radius: 12px; padding: 10px 14px; font-size: .84rem; }
.rv-fw-aviso ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.rv-fw-login { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 12px 0; }
.rv-fw-login label { display: flex; flex-direction: column; gap: 4px; font-size: .74rem; color: var(--muted); }
.rv-fw-login input { background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; color: var(--text); font: inherit; }
.rv-fw-login small { color: var(--muted); font-size: .7rem; }
.rv-fw-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.rv-fw-status { font-weight: 700; margin: 4px 0 8px; }
.rv-fw-log { max-height: 50vh; overflow: auto; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
  font-size: .76rem; white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* Vigia das PONs (30/10/2026) */
.pv-rodada { font-size: .78rem; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.pv-topo { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 12px 0; }
.pv-kpi { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.pv-kpi span { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pv-kpi b { font-size: 1.35rem; }
.pv-kpi small { font-size: .72rem; color: var(--muted); }
.pv-kpi.alerta { border-color: color-mix(in srgb, var(--red) 55%, var(--border)); }
.pv-kpi.alerta b { color: var(--red); }
.pv-config { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; margin-bottom: 12px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--panel) 90%, transparent); }
.pv-regra { font-size: .8rem; color: var(--muted); line-height: 1.5; flex: 1 1 420px; }
.pv-regra b { color: var(--text); }
.pv-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.pv-switch.so-ler { cursor: default; opacity: .8; }
.pv-switch input { display: none; }
.pv-switch i { width: 40px; height: 22px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); position: relative; flex: none; transition: background .15s; }
.pv-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.pv-switch input:checked + i { background: color-mix(in srgb, var(--green) 35%, transparent); border-color: var(--green); }
.pv-switch input:checked + i::after { transform: translateX(18px); background: var(--green); }
.pv-switch span { display: flex; flex-direction: column; font-weight: 700; font-size: .84rem; }
.pv-switch small { font-weight: 500; color: var(--muted); font-size: .72rem; }
.pv-filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.pv-legenda { margin: 4px 0 10px; }
.pv-eventos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 10px; }
.pv-ev { border: 1px solid var(--border); border-left: 4px solid var(--orange); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px;
  background: color-mix(in srgb, var(--orange) 6%, var(--panel)); }
.pv-ev-inteira { border-left-color: var(--red); background: color-mix(in srgb, var(--red) 8%, var(--panel)); animation: rv-alerta 2.4s ease-in-out infinite; }
.pv-ev-ok { border-left-color: var(--green); background: var(--panel); }
.pv-ev-tit { display: flex; flex-direction: column; gap: 2px; }
.pv-ev-tit span { font-size: .8rem; color: var(--muted); }
.pv-ev-num { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .78rem; color: var(--muted); }
.pv-ev-num b { color: var(--text); }
.pv-ev-bairros { color: var(--muted); font-size: .72rem; }
.pv-causa { padding: 0 8px; border-radius: 999px; border: 1px solid var(--border); font-weight: 700; }
.pv-causa-fibra { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.pv-causa-energia { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 45%, transparent); }
.pv-olt { margin-bottom: 14px; }
.pv-olt h3 { margin: 6px 0 8px; font-size: .9rem; letter-spacing: .04em; color: var(--cyan); }
.pv-olt h3 small { color: var(--muted); font-weight: 500; font-size: .74rem; }
.pv-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.pv-pon { --pc: var(--green); border: 1px solid color-mix(in srgb, var(--pc) 40%, var(--border)); border-radius: 10px; padding: 5px 8px 3px;
  background: color-mix(in srgb, var(--pc) 7%, var(--panel-2)); }
.pv-medio { --pc: var(--orange); } .pv-ruim { --pc: var(--red); } .pv-vazio { --pc: var(--muted); opacity: .6; }
.pv-ruim { animation: rv-alerta 2.4s ease-in-out infinite; }
.pv-pon-top { display: flex; justify-content: space-between; align-items: baseline; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; }
.pv-pon-top span { color: var(--pc); font-weight: 800; }
.pv-pon-top small { color: var(--muted); font-weight: 500; }
.pv-linha { width: 100%; height: 22px; display: block; }
.pv-linha polyline { fill: none; stroke: var(--pc); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: reduce) { .pv-ruim, .pv-ev-inteira { animation: none; } }
/* Quedas Ao Vivo com fibra (30/10/2026) */
.qa-tipo { display: inline-block; font-size: .64rem; font-weight: 800; padding: 0 6px; border-radius: 999px; border: 1px solid currentColor; margin-right: 4px; vertical-align: 1px; }
.qa-radio { color: var(--cyan); } .qa-fibra { color: var(--orange); }
.qa-cidade-fora { margin: 10px 0; padding: 12px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--red) 55%, var(--border));
  background: color-mix(in srgb, var(--red) 10%, var(--panel)); font-size: .88rem; animation: rv-alerta 2.4s ease-in-out infinite; }
.qa-cidade-fora b { color: var(--red); }
@media (prefers-reduced-motion: reduce) { .qa-cidade-fora { animation: none; } }
/* Contagem dos escritorios (30/10/2026) - pensada pro celular */
.ec-cidades { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 12px 0; }
.ec-cidade { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 14px; cursor: pointer; font: inherit;
  border: 1px solid var(--border); background: var(--panel); color: var(--text); }
.ec-cidade small { color: var(--muted); font-size: .72rem; }
.ec-cidade.andamento { border-color: color-mix(in srgb, var(--orange) 55%, var(--border)); }
.ec-cidade.feita { border-color: color-mix(in srgb, var(--green) 55%, var(--border)); }
.ec-cidade.feita small { color: var(--green); }
.ec-cidade.ativa { outline: 2px solid var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, var(--panel)); }
.ec-abas { display: flex; gap: 8px; margin: 6px 0 12px; }
.ec-aba { flex: 1; padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.ec-aba b { margin-left: 6px; padding: 0 8px; border-radius: 999px; background: var(--panel-2); font-size: .78rem; }
.ec-aba.ativa { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 14%, var(--panel)); }
.ec-add, .ec-eq-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.ec-eq-form { flex-direction: column; align-items: stretch; }
.ec-campo { display: flex; flex-direction: column; gap: 4px; font-size: .74rem; color: var(--muted); min-width: 0; }
.ec-campo input { background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 10px 14px; color: var(--text); font: inherit; font-size: .95rem; }
.ec-campo input:focus { outline: 0; border-color: var(--cyan); }
.ec-grow { flex: 1 1 220px; } .ec-qtd { flex: 0 0 120px; }
.ec-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ec-btn { padding: 11px 18px; font-weight: 800; }
.ec-btn-grande { width: 100%; padding: 14px; font-size: 1rem; }
.ec-btn-fecha { background: linear-gradient(90deg, var(--green), color-mix(in srgb, var(--green) 60%, var(--cyan))); color: #04140a; border: 0; }
.ec-salvo { font-size: .76rem; color: var(--muted); margin: 6px 4px; min-height: 1em; }
.ec-itens { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.ec-item { display: grid; grid-template-columns: minmax(0, 1fr) 92px auto; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--panel); }
.ec-item span { overflow-wrap: anywhere; font-size: .88rem; }
.ec-item input { width: 100%; text-align: center; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 7px 8px; color: var(--text); font: inherit; font-weight: 800; }
.ec-x { border: 0; background: none; color: var(--muted); font-weight: 800; cursor: pointer; padding: 4px 8px; border-radius: 50%; }
.ec-x:hover { color: var(--red); }
.ec-fechar { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; }
.ec-fechar small { color: var(--muted); font-size: .74rem; text-align: center; }
.ec-saldo { margin: 10px 0 18px; font-size: .82rem; }
.ec-saldo summary { cursor: pointer; color: var(--cyan); }
.ec-foto { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px; border-radius: 16px; cursor: pointer;
  border: 2px dashed color-mix(in srgb, var(--cyan) 55%, var(--border)); background: color-mix(in srgb, var(--cyan) 7%, transparent); }
.ec-foto span { font-size: 1.05rem; font-weight: 800; }
.ec-foto small { color: var(--muted); font-size: .76rem; text-align: center; overflow-wrap: anywhere; }
.ec-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ec-chip { flex: 1 1 auto; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.ec-chip.ativo { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 18%, transparent); color: var(--cyan); }
.ec-grupo { margin: 12px 0; }
.ec-grupo h3 { margin: 0 0 6px; font-size: .9rem; color: var(--cyan); }
.ec-grupo h3 small { color: var(--muted); }
.ec-eq { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); margin-bottom: 6px; font-size: .82rem; }
.ec-eq code { font-size: .78rem; }
.ec-eq small { color: var(--muted); flex: 1 1 auto; }
.ec-eq-tipo { font-weight: 800; font-size: .72rem; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); }
@media (max-width: 600px) { .ec-linha { grid-template-columns: 1fr; } .ec-qtd { flex: 1 1 100%; } .ec-add .ec-btn { width: 100%; } }
/* Cobranca (30/10/2026) */
.cb-atualizado { font-size: .76rem; color: var(--muted); }
.cb-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 12px 0; }
.cb-kpi { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.cb-kpi span { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.cb-kpi b { font-size: 1.25rem; } .cb-kpi small { font-size: .72rem; color: var(--muted); }
.cb-kpi.alerta { border-color: color-mix(in srgb, var(--orange) 55%, var(--border)); } .cb-kpi.alerta b { color: var(--orange); }
.cb-filtros { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 12px; }
.cb-busca { flex: 1 1 260px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 9px 16px; color: var(--text); font: inherit; }
.cb-chk { font-size: .8rem; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.cb-contador { font-size: .78rem; color: var(--muted); margin-left: auto; }
.cb-linha { cursor: pointer; } .cb-linha:hover td { background: color-mix(in srgb, var(--cyan) 7%, transparent); }
.cb-sem { color: var(--muted); font-style: italic; }
.cb-ac-aberto { color: var(--orange); font-weight: 700; } .cb-ac-cumprido { color: var(--green); font-weight: 700; }
.cb-ac-quebrado { color: var(--red); font-weight: 700; } .cb-ac-cancelado { color: var(--muted); }
.cb-modal { width: min(980px, 96vw); }
.cb-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; margin: 6px 0 14px; }
.cb-auto > div { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; display: flex; flex-direction: column; gap: 3px; }
.cb-auto span { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.cb-auto small { color: var(--muted); font-size: .72rem; }
.cb-ok { color: var(--green); } .cb-no { color: var(--red); } .cb-mid { color: var(--orange); }
.cb-aviso { color: var(--orange); }
.cb-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.cb-form { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; background: var(--panel); }
.cb-form h3, .cb-h3 { margin: 0; font-size: .95rem; }
.cb-h3 { margin: 16px 0 8px; }
.cb-form label { display: flex; flex-direction: column; gap: 4px; font-size: .74rem; color: var(--muted); }
.cb-form input, .cb-form textarea { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; color: var(--text); font: inherit; font-size: .88rem; }
.cb-form input[type=date] { color-scheme: dark; border-radius: 999px; }
.cb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-chip { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; font-size: .78rem; cursor: pointer; }
.cb-chip.ativo { border-color: var(--cyan); color: var(--cyan); background: color-mix(in srgb, var(--cyan) 15%, transparent); font-weight: 700; }
.cb-hist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.cb-hist-item { border: 1px solid var(--border); border-left: 3px solid var(--cyan); border-radius: 10px; padding: 7px 12px; background: var(--panel); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.cb-hist-acordo { border-left-color: var(--orange); }
.cb-hist-item small { color: var(--muted); }
.cb-hist-item p { flex-basis: 100%; margin: 2px 0 0; font-size: .84rem; }
.cb-ac-botoes { margin-left: auto; display: inline-flex; gap: 6px; }
/* Treinamento: ferramentas interativas (sub-redes, 30/10/2026) */
.bloco-aula-ferramenta { margin: 12px 0 18px; padding: 14px 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--cyan) 35%, var(--border));
  background: color-mix(in srgb, var(--cyan) 5%, var(--panel)); display: flex; flex-direction: column; gap: 10px; }
.tf-linha { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; }
.tf-linha label { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: var(--muted); }
.tf-in { background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; color: var(--text); font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem; width: 180px; }
.tf-in:focus { outline: 0; border-color: var(--cyan); }
.tf-largo { width: 220px; } .tf-curto { width: 110px; }
.tf-range { width: 260px; accent-color: var(--cyan); }
.tf-barra-n { color: var(--cyan); font-size: 1.1rem; }
.tf-bits { display: flex; flex-wrap: wrap; gap: 10px; }
.tf-octeto { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tf-dec { font-weight: 800; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tf-octeto div { display: flex; gap: 2px; }
.tf-octeto i { font-style: normal; width: 20px; height: 26px; display: grid; place-items: center; border-radius: 5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-size: .85rem; }
.tf-octeto i.rede { background: color-mix(in srgb, var(--cyan) 30%, transparent); color: var(--cyan); }
.tf-octeto i.host { background: color-mix(in srgb, var(--orange) 28%, transparent); color: var(--orange); }
.tf-azul { color: var(--cyan); } .tf-laranja { color: var(--orange); }
.tf-explica { margin: 0; line-height: 1.6; font-size: .9rem; }
.tf-erro { color: var(--red); margin: 0; }
.tf-res { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.tf-res div { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; display: flex; flex-direction: column; }
.tf-res span { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.tf-res b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1rem; }
.tf-tabela td { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; }
.tf-tabela tr.tf-destaque td { background: color-mix(in srgb, var(--cyan) 9%, transparent); }
.tf-barra-div { display: flex; height: 22px; border-radius: 8px; overflow: hidden; gap: 2px; }
.tf-barra-div span { flex: 1; opacity: .85; }
.tf-cor { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.tf-veredito { padding: 10px 14px; border-radius: 12px; font-weight: 800; }
.tf-veredito.ok { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 45%, transparent); }
.tf-veredito.no { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); border: 1px solid color-mix(in srgb, var(--red) 45%, transparent); }
.tf-pergunta { font-size: 1rem; }
/* PABX Presidente Venceslau (30/10/2026) */
.pp-erro { padding: 10px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--orange) 50%, var(--border)); background: color-mix(in srgb, var(--orange) 9%, var(--panel)); color: var(--orange); }
.pp-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 14px; margin: 12px 0; }
.pp-form { display: flex; flex-direction: column; gap: 10px; }
.pp-form label { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: var(--muted); }
.pp-form input { background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 9px 14px; color: var(--text); font: inherit; }
.pp-form small { color: var(--muted); font-size: .72rem; }
.pp-linha { flex-direction: row; flex-wrap: wrap; margin-bottom: 10px; } .pp-linha input { flex: 1 1 140px; }
.pp-lista { display: flex; flex-direction: column; gap: 6px; }
.pp-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.pp-item > div { display: flex; flex-direction: column; flex: 1; min-width: 0; } .pp-item small { color: var(--muted); }
.pp-ramal { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; color: var(--cyan); padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--cyan) 12%, transparent); }
.pp-log { display: flex; flex-direction: column; padding: 6px 10px; border-left: 3px solid var(--green); border-radius: 6px; background: var(--panel); }
.pp-log.erro { border-left-color: var(--red); } .pp-log small { color: var(--muted); }

/* 03/11/2026: ferias (mural de avisos) no calendario de plantao */
.escala-grade-ferias { display: block; margin-top: 3px; font-size: .66rem; font-weight: 700; line-height: 1.2; color: #fbbf24; }
.escala-grade-ferias.conflito { color: #f87171; }
.escala-grade-cel.ferias-conflito { box-shadow: inset 0 0 0 2px rgba(248,113,113,.75); }

/* Dashboard de Plantao (03/11/2026, so o Leonardo) */
.pd-periodo { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pd-periodo .rc-chip.ativo { background: var(--accent, #6366f1); color: #fff; border-color: transparent; }
.pd-sub { margin: 4px 0 12px; color: var(--muted); font-size: .9rem; } .pd-sub b { color: var(--text); }
.pd-aviso { color: #f59e0b; }
.pd-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 16px; }
.pd-kpi { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; position: relative; overflow: hidden; }
.pd-kpi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--f); }
.pd-kpi-top { display: flex; gap: 10px; align-items: center; } .pd-kpi-top b { display: block; font-size: .92rem; } .pd-kpi-top small { color: var(--muted); font-size: .75rem; }
.pd-ic { font-size: 1.5rem; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--f) 18%, transparent); }
.pd-num { font-size: 2.4rem; font-weight: 800; margin: 8px 0 0; color: var(--f); line-height: 1; } .pd-num small { font-size: .8rem; color: var(--muted); font-weight: 600; margin-left: 6px; }
.pd-media { font-size: .8rem; color: var(--muted); margin: 4px 0 8px; }
.pd-barra { display: flex; height: 8px; border-radius: 6px; overflow: hidden; gap: 2px; }
.pd-canais { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pd-canal { font-size: .74rem; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); font-weight: 700; } .pd-canal b { color: var(--text); }
.pd-vazio { font-size: .75rem; color: var(--muted); font-style: italic; }
.pd-quem { margin-top: 8px; font-size: .72rem; color: var(--muted); }
.pd-graf { display: grid; grid-template-columns: 1fr 1.6fr; gap: 14px; } .pd-graf .chart-wrap { height: 280px; }
@media (max-width: 900px) { .pd-graf { grid-template-columns: 1fr; } }
.pd-tabela { width: 100%; border-collapse: collapse; } .pd-tabela th, .pd-tabela td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: left; font-size: .86rem; }
.pd-tabela th { font-size: .75rem; text-transform: uppercase; letter-spacing: .3px; } .pd-tabela td small { color: var(--muted); }
.pd-n { text-align: center !important; font-weight: 700; } .pd-n.zero { color: var(--muted); font-weight: 400; } .pd-na { text-align: center !important; color: var(--muted); opacity: .4; }
.pd-tag { font-size: .7rem; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, #3b82f6 16%, transparent); color: #60a5fa; font-weight: 700; }
.pd-tag.fds { background: color-mix(in srgb, #ec4899 16%, transparent); color: #f472b6; } .pd-tag.fer { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #fbbf24; }
.pd-chip { border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: .82rem; cursor: pointer; }
.pd-chip:hover { border-color: var(--accent, #6366f1); } .pd-chip.ativo { background: linear-gradient(135deg,#6366f1,#8b5cf6); color: #fff; border-color: transparent; }

/* 04/11/2026: nome do operador destacado no alerta de cadastro com erro no MK */
.cad-al-op { display: inline-block; padding: 1px 10px; border-radius: 999px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
  background: linear-gradient(135deg, #f43f5e, #f97316); color: #fff; box-shadow: 0 0 0 2px rgba(244,63,94,.25); }

/* 04/11/2026: Cobranca - contrato do registro, encerrar cobranca, so anotacao */
.cb-ctr { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 12px; font-size: .78rem; color: var(--muted); }
.cb-ctr > span { margin-right: 4px; font-weight: 700; }
.cb-ctr-chip { display: inline-flex; flex-direction: column; align-items: flex-start; padding: 5px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; line-height: 1.2; }
.cb-ctr-chip small { font-weight: 400; color: var(--muted); font-size: .7rem; }
.cb-ctr-chip.canc { border-style: dashed; }
.cb-ctr-chip.ativo { border-color: #f59e0b; background: color-mix(in srgb, #f59e0b 16%, transparent); color: #fbbf24; }
.cb-form-enc { border-color: color-mix(in srgb, #a78bfa 45%, var(--border)); }
.cb-dica { margin: 0; font-size: .74rem; color: var(--muted); line-height: 1.35; }
.cb-chips.cb-opcional { opacity: .45; }
.cb-enc-banner { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; border: 1px solid color-mix(in srgb, #a78bfa 50%, transparent); background: color-mix(in srgb, #a78bfa 12%, transparent); border-radius: 12px; padding: 10px 14px; margin: 0 0 10px; font-size: .86rem; }
.cb-enc-banner.ok { border-color: color-mix(in srgb, #22c55e 50%, transparent); background: color-mix(in srgb, #22c55e 12%, transparent); }
.cb-enc-banner small { color: var(--muted); }
.cb-enc-tag { display: inline-block; margin-top: 3px; font-size: .7rem; font-weight: 700; color: #c4b5fd; }
.cb-hist-enc { border-left: 3px solid #a78bfa; }

.pabx-relogio { margin-left: 12px; font-size: .78rem; font-weight: 600; color: var(--muted); }
.pabx-relogio b { font-variant-numeric: tabular-nums; color: var(--cyan); font-size: .9rem; }

.cb-fora-tag { display: inline-block; margin-top: 3px; font-size: .7rem; font-weight: 700; color: #4ade80; }
.cb-tudo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 4px; }
.cb-tudo-btn { min-width: 280px; background: linear-gradient(135deg, #0ea5e9, #6366f1) !important; color: #fff !important; border: 0 !important; }
.cb-tudo small { color: var(--muted); font-size: .74rem; }

/* 04/11/2026: acesso externo dos tecnicos (VM gateway) - topo simples no lugar do menu */
.gw-topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--border); }
.gw-marca { font-weight: 800; color: var(--cyan); } .gw-quem { margin-left: auto; color: var(--muted); font-size: .85rem; }
body:has(.gw-topo) .layout { display: block; }
body:has(.gw-topo) .topbar p, body:has(.gw-topo) .topbar h1 { white-space: normal; overflow: visible; text-overflow: clip; }
@media (max-width: 520px) { .gw-topo { flex-wrap: wrap; gap: 6px 10px; } .gw-marca { font-size: .95rem; } }

/* 04/11/2026: holerite - avisar pelo WhatsApp (tela de RH) */
.hw-topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 8px 0 10px; }
.hw-lotes, .hw-filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.hw-tabela { width: 100%; border-collapse: collapse; } .hw-tabela th, .hw-tabela td { padding: 7px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; font-size: .86rem; }
.hw-tabela td small { color: var(--muted); } .hw-num { max-width: 170px; } .hw-num.hw-salvo { border-color: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.25); }
.hw-novo { color: #f59e0b; font-weight: 700; } .hw-aviso { color: #f59e0b !important; } .hw-ok { color: #22c55e !important; } .hw-erro { color: #f87171 !important; }
.hw-previa { max-width: 760px; width: 94vw; text-align: left; } .hw-msgs { max-height: 60vh; overflow: auto; display: grid; gap: 10px; margin: 10px 0; }
.hw-msg { border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; background: var(--panel-2); }
.hw-msg-topo { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .hw-msg-topo span { color: var(--muted); font-size: .85rem; }
.hw-msg pre { white-space: pre-wrap; font-family: inherit; font-size: .82rem; margin: 6px 0 0; color: var(--text); background: color-mix(in srgb, #25d366 8%, transparent); border-radius: 10px; padding: 8px 10px; }

/* 05/11/2026: troca de senha no celular - botao "Salvar e entrar" sempre visivel (tecnico nao percebia que tinha que rolar) */
@media (max-width: 640px) {
  .otp-form #salvarLink { position: sticky; bottom: 12px; z-index: 5; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
}

/* 05/11/2026: Relatorio PON - Ligar clientes */
.lc-linha { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0 10px; } .lc-rot { width: 46px; font-weight: 800; color: var(--muted); padding-top: 6px; }
.lc-pons { display: grid; gap: 6px; flex: 1; } .lc-placa { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.lc-placa-btn { background: color-mix(in srgb, var(--cyan) 12%, var(--panel)); } .lc-pon small { color: var(--muted); font-weight: 400; margin-left: 3px; }
.lc-h3 { margin: 14px 0 6px; font-size: 1rem; } .lc-tabela { width: 100%; border-collapse: collapse; }
.lc-tabela th, .lc-tabela td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; font-size: .84rem; }
.lc-sem { color: #f87171; font-weight: 700; } .lc-critico { color: #f87171; } .lc-ruim { color: #f59e0b; }