:root {
  /* identidade Rizzi Telecom (rizzitelecom.com.br): violeta do ícone RZ + gradiente roxo do site */
  --marca: #7f00f0;
  --marca-2: #a600f4;
  --marca-rosa: #ec4899;
  --bg: #16141d;
  --panel: #1d1a26;
  --panel-2: #262230;
  --borda: #36314a;
  --texto: #eceaf2;
  --suave: #aaa5bd;
  --acento: #7f00f0;
  --link: #c4b5fd;
  --otimo: #22c55e; --atencao: #f59e0b; --critico: #ef4444;
}
/* tema claro (botão ☀/☾ no menu; fica guardado no navegador) */
:root[data-tema="claro"] {
  --bg: #f5f4f9;
  --panel: #ffffff;
  --panel-2: #f1eef8;
  --borda: #e2deeb;
  --texto: #1f1c29;
  --suave: #67627a;
  --link: #6d28d9;
  --otimo: #15803d; --bom: #4d7c0f; --atencao: #b45309; --critico: #dc2626; --sem: #6b7280;
}

* { box-sizing: border-box; }
html, body { margin: 0; font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--texto); background: var(--bg); }
a { color: var(--link); }
.menu { display: flex; align-items: center; gap: 4px; padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--borda);
  overflow-x: auto; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.menu > * { flex-shrink: 0; white-space: nowrap; }
.menu a { color: var(--suave); text-decoration: none; padding: 6px 12px; border-radius: 7px; }
@media (max-width: 1600px) { .menu { gap: 1px; } .menu a { padding: 6px 8px; font-size: 13.5px; } }
.menu a:hover { color: var(--texto); background: var(--panel-2); }
.menu a.ativo { color: var(--texto); background: var(--panel-2); font-weight: 600; }
.menu .marca { display: flex; align-items: center; gap: 8px; color: var(--texto); margin-right: 10px; padding-left: 0; }
.menu .marca:hover { background: none; }
.logo { width: 28px; height: 28px; border-radius: 50%; background: #fff url("/static/painel/rizzi-icone.webp") center / cover; color: transparent; display: grid; place-items: center; font-weight: 700; }
.menu .espaco { flex: 1; }
.menu .usuario { color: var(--suave); font-size: 12px; }
.menu .usuario a { padding: 0; }
.pagina { padding: 18px 20px 40px; max-width: 1400px; margin: 0 auto; }
h1 { font-size: 20px; margin: 0 0 4px; }
.sub { color: var(--suave); font-size: 12px; margin: 0; }
.cabecalho { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
#filtro { padding: 8px 11px; border-radius: 8px; border: 1px solid var(--borda); background: var(--panel-2); color: var(--texto); min-width: 300px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-bottom: 14px; }
.kpi { background: var(--panel); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; }
.kpi b { font-size: 22px; display: block; }
.kpi span { color: var(--suave); font-size: 12px; }
.alerta-box { background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .5); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; }
.tabela-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--borda); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borda); vertical-align: top; }
th { color: var(--suave); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; white-space: nowrap; user-select: none; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--panel-2); }
.num { text-align: right; white-space: nowrap; }
.tempo { font-weight: 700; white-space: nowrap; }
.t-recente { color: var(--critico); } .t-horas { color: var(--atencao); } .t-dias { color: var(--suave); }
.tag { display: inline-block; padding: 1px 7px; border-radius: 99px; font-size: 11px; border: 1px solid var(--borda); color: var(--suave); white-space: nowrap; }
.tag.alerta { color: var(--atencao); border-color: var(--atencao); }
.s-critico { color: var(--critico); } .s-atencao { color: var(--atencao); }
@media (max-width: 700px) { #filtro { min-width: 0; width: 100%; } .pagina { padding: 12px; } }
.filtros { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* faixa da marca no topo e botão principal com o gradiente do site */
#painel header, .menu { border-top: 3px solid var(--marca); }
.btn:not(.sec), .flutuante .btn:not(.sec) { background: linear-gradient(135deg, var(--marca), var(--marca-2)); }
.btn:not(.sec):hover { filter: brightness(1.1); }
h2 { font-size: 16px; margin: 0 0 6px; }
.btn { background: linear-gradient(135deg, var(--marca), var(--marca-2)); color: #fff; border: 0; border-radius: 7px; padding: 8px 14px; cursor: pointer; font-size: 14px; }
.btn.sec { background: var(--panel-2); border: 1px solid var(--borda); color: var(--texto); }
.btn:disabled { opacity: .6; cursor: wait; }
.linha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card-form { background: var(--panel); border: 1px solid var(--borda); border-radius: 12px; padding: 16px; max-width: 720px; margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.card-form label, .conf-form label { display: flex; flex-direction: column; gap: 4px; color: var(--suave); font-size: 13px; }
.card-form label.check, .conf-form label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--texto); }
.card-form input:not([type=checkbox]), .card-form select { background: var(--bg); color: var(--texto); border: 1px solid var(--borda); border-radius: 7px; padding: 8px 10px; font-size: 14px; }
.ok-box { background: rgba(34, 197, 94, .1); border: 1px solid rgba(34, 197, 94, .5); border-radius: 10px; padding: 10px 12px; margin-top: 12px; max-width: 720px; }
.erro-box { background: rgba(239, 68, 68, .1); border: 1px solid rgba(239, 68, 68, .5); border-radius: 10px; padding: 10px 12px; margin-top: 12px; max-width: 720px; overflow-wrap: anywhere; }
.on { color: var(--otimo); font-weight: 600; } .off { color: var(--critico); font-weight: 600; }
/* ficha */
.ficha-topo { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; margin: 6px 0 16px; }
.ficha-topo h1 { font-size: 22px; margin-bottom: 4px; }
.evento { line-height: 1.5; }
.grade-ficha { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; align-items: start; }
@media (max-width: 1000px) { .grade-ficha { grid-template-columns: 1fr; } }
.bloco { background: var(--panel); border: 1px solid var(--borda); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.bloco h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); margin: 0 0 10px; }
.resumo-ia { border-color: rgba(127, 0, 240, .45); background: linear-gradient(180deg, rgba(127, 0, 240, .07), var(--panel)); }
.resumo-ia .texto { white-space: pre-wrap; line-height: 1.65; font-size: 15px; }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 13px; }
.dl dt { color: var(--suave); } .dl dd { margin: 0; }
.evento { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--borda); }
.evento:last-child { border-bottom: none; }
.evento .quando { color: var(--suave); font-size: 12px; }
.evento .feito { margin-top: 4px; padding: 6px 8px; background: var(--panel-2); border-radius: 6px; font-size: 13px; }
.tag.chamado { color: var(--link); border-color: var(--link); } .tag.os { color: var(--atencao); border-color: var(--atencao); }
.tag.queda { color: var(--critico); border-color: var(--critico); }
.grafico svg { width: 100%; height: 120px; display: block; }
.voltar { color: var(--suave); text-decoration: none; font-size: 13px; }
a.btn { text-decoration: none; display: inline-block; }
.evento.automatico { display: none; }
.passo { font-weight: 600; margin-top: 6px; display: flex; gap: 10px; align-items: baseline; }
.provedores { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.card-form label.provedor, .conf-form label.provedor { flex-direction: row; align-items: flex-start; gap: 8px; padding: 10px; border: 1px solid var(--borda);
  border-radius: 9px; cursor: pointer; color: var(--texto); background: var(--bg); }
.card-form label.provedor:has(input:checked), .conf-form label.provedor:has(input:checked) { border-color: var(--marca); background: rgba(127, 0, 240, .12); }
.provedor span { display: flex; flex-direction: column; gap: 2px; }
.provedor small { color: var(--suave); font-size: 12px; }
#lista-modelos { background: var(--bg); color: var(--texto); border: 1px solid var(--borda); border-radius: 7px; padding: 7px; max-width: 420px; }
details summary { cursor: pointer; }
details label { margin-top: 6px; }
[hidden] { display: none !important; }
.barra { position: relative; display: flex; justify-content: space-between; padding: 6px 8px; margin-bottom: 4px; border-radius: 6px; overflow: hidden; font-size: 13px; }
.barra i { position: absolute; inset: 0 auto 0 0; background: rgba(127, 0, 240, .25); z-index: 0; }
.barra span, .barra b { position: relative; z-index: 1; }
select#dias { background: var(--panel-2); color: var(--texto); border: 1px solid var(--borda); border-radius: 7px; padding: 7px; }
.tabela-config td, .tabela-config th { padding: 6px 8px; } .tabela-config input { background: var(--bg); color: var(--texto); border: 1px solid var(--borda); border-radius: 7px; padding: 6px 8px; }
.campo-tab { background: var(--bg); color: var(--texto); border: 1px solid var(--borda); border-radius: 6px; padding: 5px 7px; max-width: 170px; }
.link-sair { background: none; border: 0; color: var(--link); cursor: pointer; padding: 0; font-size: 12px; }
.tela-entrar { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, #3a0a7a, var(--bg) 60%); padding: 16px; }
.caixa-entrar { width: 100%; max-width: 360px; background: var(--panel); border: 1px solid var(--borda); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.caixa-entrar label { display: flex; flex-direction: column; gap: 4px; color: var(--suave); font-size: 13px; }
.caixa-entrar input { background: var(--bg); color: var(--texto); border: 1px solid var(--borda); border-radius: 8px; padding: 10px; font-size: 15px; }
.logo-entrar { width: 180px; align-self: center; margin-bottom: 4px; }
.caixa-entrar h1 { text-align: center; margin: 0; } .caixa-entrar .sub { text-align: center; }
.caixa-entrar .btn { padding: 10px; font-size: 15px; }
.campo-pergunta { flex: 1; min-width: 240px; background: var(--bg); color: var(--texto); border: 1px solid var(--borda); border-radius: 8px; padding: 9px 11px; font-size: 14px; }
.msg-p { margin-top: 10px; padding: 8px 10px; background: var(--panel-2); border-radius: 10px 10px 10px 2px; font-weight: 600; }
.msg-r { margin-top: 4px; padding: 8px 10px; border-left: 3px solid var(--marca); white-space: pre-wrap; line-height: 1.6; }
.linha-lista { padding: 5px 0; border-bottom: 1px solid var(--borda); display: flex; flex-direction: column; }
.linha-lista:last-child { border-bottom: none; }
.kpi a { color: inherit; text-decoration: none; }
.dlg { background: var(--panel); color: var(--texto); border: 1px solid var(--borda); border-radius: 12px; padding: 18px; width: min(720px, 95vw); }
.dlg::backdrop { background: rgba(0, 0, 0, .55); }
.dlg select, select#f-sit, #c-tipo, #c-sit { background: var(--bg); color: var(--texto); border: 1px solid var(--borda); border-radius: 7px; padding: 7px; }
.tema-btn { background: none; border: 1px solid var(--borda); color: var(--suave); border-radius: 7px; cursor: pointer; padding: 3px 8px; font-size: 13px; }
.tema-btn:hover { color: var(--texto); }
.grade-larga { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); }
@media (max-width: 1000px) { .grade-larga { grid-template-columns: 1fr; } }
.filtros select { background: var(--panel-2); color: var(--texto); border: 1px solid var(--borda); border-radius: 7px; padding: 7px; }
.fotos-mini { display: flex; gap: 4px; flex-wrap: wrap; } .fotos-mini img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid var(--borda); }
.tag.erro { color: var(--critico); border-color: var(--critico); }
a.kpi-link { color: inherit; text-decoration: none; }
a.kpi-link:hover { border-color: var(--marca); }
.horas48 { display: flex; align-items: flex-end; gap: 1px; height: 32px; margin-top: 4px; border-bottom: 1px solid var(--borda); }
.horas48 i { flex: 1; background: var(--critico); border-radius: 1px 1px 0 0; }
.horas48-leg { display: flex; justify-content: space-between; margin-bottom: 6px; }
.dica-inst { border: 1px solid color-mix(in srgb, var(--atencao) 55%, transparent); background: color-mix(in srgb, var(--atencao) 10%, transparent);
  border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; font-size: 13px; }
.dica-inst.agora { border-color: var(--critico); background: color-mix(in srgb, var(--critico) 10%, transparent); }
.btn-planilha { font-size: 13px; padding: 7px 12px; margin-left: 8px; vertical-align: middle; text-transform: none; letter-spacing: 0; font-weight: 500; }
h3 > .btn-planilha { float: right; margin-top: -6px; font-size: 12px; padding: 4px 10px; }

/* celular: nenhuma tela rola para o lado (só as tabelas, dentro da própria caixa) */
.bloco, .grade-ficha > *, .duas > *, .grade-dupla > * { min-width: 0; }
@media (max-width: 700px) {
  .grade-ficha, .grade-larga, .duas, .grade-dupla { grid-template-columns: minmax(0, 1fr) !important; }
  .b-kpis, .kpis-g { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .bloco .texto, .bloco h3, .bloco h4 { overflow-wrap: anywhere; }
  .i-abas { flex-wrap: wrap; }
  .linha-b { grid-template-columns: minmax(0, 1fr) 56px 84px !important; gap: 8px !important; }
  .barra-h { grid-template-columns: minmax(0, 1fr) 96px !important; }
  .barra-h .sub, .linha-b .sub { overflow-wrap: anywhere; }
  .b-kpis .val { font-size: 19px !important; overflow-wrap: anywhere; } .b-kpis .val .sub { display: block; }
}