/* CidenClinic Monitor: tema escuro "centro de comando" */
:root {
  --bg: #050A14;
  --bg2: #0A1222;
  --painel: rgba(16, 26, 46, 0.72);
  --painel-forte: rgba(20, 32, 56, 0.92);
  --borda: rgba(120, 160, 220, 0.14);
  --borda-forte: rgba(120, 180, 255, 0.28);
  --texto: #E6EDF7;
  --suave: #93A4BF;
  --apagado: #5B6B85;
  --ciano: #38BDF8;
  --turquesa: #2DD4BF;
  --verde: #34D399;
  --ambar: #FBBF24;
  --vermelho: #F87171;
  --roxo: #A78BFA;
  --rosa: #F472B6;
  --whats: #25D366;
  --raio: 16px;
  --sombra: 0 10px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--texto); font-family: var(--fonte); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; overflow-x: hidden; }
a { color: var(--ciano); }
button { font-family: inherit; }

/* fundo vivo: grade + auroras */
.fundo { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(56, 189, 248, 0.12), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, rgba(167, 139, 250, 0.10), transparent 60%),
    radial-gradient(900px 700px at 50% 120%, rgba(45, 212, 191, 0.10), transparent 60%),
    var(--bg); }
.fundo::before { content: ""; position: absolute; inset: -50%;
  background-image: linear-gradient(rgba(120, 160, 220, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 160, 220, 0.05) 1px, transparent 1px);
  background-size: 48px 48px; transform: perspective(900px) rotateX(55deg) translateY(-10%); animation: grade 40s linear infinite; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); }
@keyframes grade { to { background-position: 0 48px, 48px 0; } }

/* ---------- topo ---------- */
.topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; padding: 14px 24px;
  background: linear-gradient(180deg, rgba(5, 10, 20, 0.95), rgba(5, 10, 20, 0.75)); backdrop-filter: blur(14px); border-bottom: 1px solid var(--borda); }
.marca { display: flex; align-items: center; gap: 12px; min-width: 0; }
.marca svg { width: 38px; height: 38px; flex: none; filter: drop-shadow(0 0 10px rgba(45, 212, 191, 0.55)); }
.marca .nome { font-weight: 800; letter-spacing: 0.3px; font-size: 18px; white-space: nowrap; }
.marca .nome span { background: linear-gradient(90deg, var(--turquesa), var(--ciano)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marca .sub { font-size: 11px; color: var(--suave); letter-spacing: 2.2px; text-transform: uppercase; }
.topo > * { flex: none; }
.topo > .batimento { flex: 1 1 0; width: 0; height: 36px; min-width: 80px; opacity: 0.9; }
.estado-geral { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--borda-forte); background: var(--painel); font-weight: 600; font-size: 13px; white-space: nowrap; }
.estado-geral .luz { width: 10px; height: 10px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); animation: pulsa 2s infinite; }
.estado-geral.aviso .luz { background: var(--ambar); animation-name: pulsa-ambar; }
.estado-geral.erro .luz { background: var(--vermelho); animation-name: pulsa-vermelho; }
@keyframes pulsa { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); } 70% { box-shadow: 0 0 0 12px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
@keyframes pulsa-ambar { 0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.6); } 70% { box-shadow: 0 0 0 12px rgba(251, 191, 36, 0); } 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); } }
@keyframes pulsa-vermelho { 0% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.7); } 70% { box-shadow: 0 0 0 14px rgba(248, 113, 113, 0); } 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); } }
.ao-vivo { font-size: 12px; color: var(--suave); white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.ao-vivo b { color: var(--vermelho); letter-spacing: 1.5px; font-size: 11px; display: flex; align-items: center; gap: 6px; }
.ao-vivo b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--vermelho); animation: pisca 1.2s infinite; }
.ao-vivo.parado b { color: var(--apagado); } .ao-vivo.parado b::before { background: var(--apagado); animation: none; }
@keyframes pisca { 50% { opacity: 0.2; } }
.relogio { font-family: var(--mono); font-size: 20px; font-weight: 600; color: var(--texto); letter-spacing: 1px; white-space: nowrap; }
.relogio small { display: block; font-size: 10px; color: var(--suave); letter-spacing: 1.5px; font-family: var(--fonte); text-transform: uppercase; }
.usuario { position: relative; }
.usuario > button { display: flex; align-items: center; gap: 8px; background: var(--painel); color: var(--texto); border: 1px solid var(--borda); border-radius: 999px; padding: 6px 12px 6px 6px; cursor: pointer; }
.avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12px; background: linear-gradient(135deg, var(--turquesa), var(--roxo)); color: #04111F; }
.menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; background: var(--painel-forte); border: 1px solid var(--borda-forte); border-radius: 12px; padding: 6px; box-shadow: var(--sombra); display: none; }
.menu.aberto { display: block; }
.menu button { width: 100%; text-align: left; background: none; border: 0; color: var(--texto); padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.menu button:hover { background: rgba(56, 189, 248, 0.1); }

/* ---------- grade principal ---------- */
main { padding: 20px 24px 40px; display: grid; gap: 18px; grid-template-columns: repeat(12, minmax(0, 1fr)); max-width: 1920px; margin: 0 auto; }
.cartao { background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); backdrop-filter: blur(10px); position: relative; overflow: hidden; min-width: 0; }
.cartao::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 40%); }
.cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 6px; }
.cab h2 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 2px; color: var(--suave); font-weight: 700; display: flex; align-items: center; gap: 10px; }
.cab h2 i { width: 8px; height: 8px; border-radius: 2px; background: var(--ciano); box-shadow: 0 0 12px var(--ciano); display: inline-block; }
.cab .info { font-size: 12px; color: var(--apagado); }

/* KPIs */
.kpis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.kpi { padding: 16px 18px 12px; min-height: 132px; display: flex; flex-direction: column; gap: 6px; }
.kpi .rot { font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--suave); display: flex; align-items: center; gap: 8px; font-weight: 700; }
.kpi .rot svg { width: 16px; height: 16px; }
.kpi .num { font-size: 38px; font-weight: 800; letter-spacing: -1px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.kpi .det { font-size: 12px; color: var(--suave); display: flex; gap: 10px; flex-wrap: wrap; }
.kpi .det b { color: var(--texto); font-weight: 700; }
.kpi .mini { margin-top: auto; height: 26px; }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cor, var(--ciano)); box-shadow: 0 0 16px var(--cor, var(--ciano)); }
.kpi.flash { animation: flash 1.2s ease-out; }
@keyframes flash { 0% { box-shadow: 0 0 0 1px var(--cor), 0 0 40px var(--cor); } 100% { box-shadow: var(--sombra); } }

/* cérebro */
.cerebro { grid-column: span 8; min-height: 520px; display: flex; flex-direction: column; }
.cerebro canvas { width: 100%; flex: 1; display: block; min-height: 440px; cursor: default; }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--suave); padding: 0 18px 14px; }
.legenda span { display: flex; align-items: center; gap: 6px; }
.legenda i { width: 18px; height: 3px; border-radius: 3px; display: inline-block; }
.dica { position: absolute; pointer-events: none; background: var(--painel-forte); border: 1px solid var(--borda-forte); border-radius: 10px; padding: 10px 12px; font-size: 12px; min-width: 180px; box-shadow: var(--sombra); opacity: 0; transition: opacity 0.15s; z-index: 5; }
.dica b { display: block; font-size: 13px; margin-bottom: 4px; }

/* alertas */
.alertas { grid-column: span 4; display: flex; flex-direction: column; max-height: 600px; }
.lista { overflow-y: auto; padding: 6px 12px 14px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; scrollbar-color: #24324E transparent; }
.alerta { border-radius: 12px; padding: 11px 12px 11px 14px; background: rgba(10, 18, 34, 0.7); border: 1px solid var(--borda); position: relative; animation: entra 0.5s ease-out; }
.alerta::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--ciano); }
.alerta.erro::before { background: var(--vermelho); box-shadow: 0 0 12px var(--vermelho); }
.alerta.aviso::before { background: var(--ambar); }
.alerta.info::before { background: var(--apagado); }
.alerta.erro { border-color: rgba(248, 113, 113, 0.35); background: linear-gradient(90deg, rgba(248, 113, 113, 0.08), rgba(10, 18, 34, 0.7) 60%); }
.alerta .t { font-weight: 700; font-size: 13.5px; }
.alerta .d { font-size: 12.5px; color: var(--suave); margin-top: 3px; line-height: 1.45; }
.alerta .p { font-size: 12.5px; margin-top: 5px; color: var(--texto); }
.alerta .p b { font-weight: 700; }
.alerta .q { position: absolute; right: 12px; top: 11px; font-size: 11px; color: var(--apagado); }
.vazio { text-align: center; padding: 40px 20px; color: var(--suave); font-size: 14px; }
.vazio .ok { font-size: 40px; display: block; margin-bottom: 8px; filter: drop-shadow(0 0 16px rgba(52, 211, 153, 0.6)); }
.contadores { display: flex; gap: 6px; }
.contadores span { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); }
.contadores .e { color: var(--vermelho); } .contadores .a { color: var(--ambar); }

/* feed */
.feed { grid-column: span 6; display: flex; flex-direction: column; height: 640px; }
.filtros { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 18px 10px; align-items: center; }
.filtros button { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--borda); color: var(--suave); font-size: 12px; padding: 6px 11px; border-radius: 999px; cursor: pointer; font-weight: 600; }
.filtros button.ativo { color: #04111F; background: linear-gradient(90deg, var(--turquesa), var(--ciano)); border-color: transparent; }
.filtros input { margin-left: auto; background: rgba(5, 10, 20, 0.6); border: 1px solid var(--borda); color: var(--texto); border-radius: 999px; padding: 7px 14px; font-size: 13px; width: 220px; outline: none; }
.filtros input:focus { border-color: var(--ciano); box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15); }
.item { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 11px 12px; border-radius: 12px; border: 1px solid transparent; transition: background 0.2s; }
.item:hover { background: rgba(56, 189, 248, 0.05); border-color: var(--borda); }
.item.novo { animation: entra 0.7s ease-out, brilho 2.5s ease-out; }
@keyframes entra { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes brilho { 0% { background: rgba(56, 189, 248, 0.22); box-shadow: 0 0 30px rgba(56, 189, 248, 0.25); } 100% { background: transparent; box-shadow: none; } }
.ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); color: var(--c); }
.ico svg { width: 19px; height: 19px; }
.item .t { font-weight: 650; font-size: 13.5px; line-height: 1.35; }
.item .pessoa { margin-top: 3px; font-size: 13px; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.item .pessoa b { font-weight: 700; color: #fff; }
.item .pessoa .tel { font-family: var(--mono); font-size: 12px; color: var(--ciano); }
.item .m { font-size: 11.5px; color: var(--apagado); margin-top: 3px; }
.item .lado { text-align: right; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.item .hora { font-family: var(--mono); font-size: 12px; color: var(--suave); }
.chip { font-size: 10.5px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.chip.ok { color: var(--verde); background: rgba(52, 211, 153, 0.12); }
.chip.erro { color: var(--vermelho); background: rgba(248, 113, 113, 0.14); }
.chip.aviso { color: var(--ambar); background: rgba(251, 191, 36, 0.12); }
.chip.info { color: var(--ciano); background: rgba(56, 189, 248, 0.12); }

/* gráficos */
.graficos { grid-column: span 6; display: flex; flex-direction: column; height: 640px; }
.abas { display: flex; gap: 4px; padding: 6px 18px 4px; flex-wrap: wrap; }
.abas button { background: none; border: 0; color: var(--suave); padding: 8px 12px; border-radius: 10px; cursor: pointer; font-weight: 650; font-size: 13px; position: relative; }
.abas button.ativo { color: var(--texto); background: rgba(56, 189, 248, 0.1); }
.abas button.ativo::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--turquesa), var(--ciano)); }
.grafico { flex: none; height: 440px; }
@media (max-width: 720px) { .grafico { height: 360px; } }
.resumo-graf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0 18px 16px; }
.resumo-graf div { background: rgba(5, 10, 20, 0.5); border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px; }
.resumo-graf small { display: block; font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--suave); font-weight: 700; }
.resumo-graf b { font-size: 22px; font-variant-numeric: tabular-nums; }

/* fluxos */
.fluxos { grid-column: span 8; }
.grade-fluxos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; padding: 8px 18px 18px; }
.fluxo { background: rgba(5, 10, 20, 0.55); border: 1px solid var(--borda); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden; }
.fluxo.erro { border-color: rgba(248, 113, 113, 0.5); box-shadow: 0 0 24px rgba(248, 113, 113, 0.12) inset; }
.fluxo.desligado { opacity: 0.55; }
.fluxo .n { font-weight: 650; font-size: 12.5px; line-height: 1.3; display: flex; gap: 8px; align-items: flex-start; }
.fluxo .n i { width: 9px; height: 9px; margin-top: 3px; border-radius: 50%; flex: none; background: var(--verde); box-shadow: 0 0 10px var(--verde); }
.fluxo.erro .n i { background: var(--vermelho); box-shadow: 0 0 10px var(--vermelho); animation: pisca 1s infinite; }
.fluxo.desligado .n i { background: var(--apagado); box-shadow: none; }
.fluxo .x { font-size: 11px; color: var(--suave); display: flex; justify-content: space-between; }
.barras { display: flex; gap: 2px; align-items: flex-end; height: 26px; }
.barras span { flex: 1; border-radius: 2px; background: linear-gradient(180deg, var(--turquesa), rgba(45, 212, 191, 0.25)); min-height: 2px; }
.barras span.e { background: var(--vermelho); }
.barras span.z { background: rgba(255, 255, 255, 0.06); }

/* saúde */
.saude { grid-column: span 4; }
.medidores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px 12px; }
.medidor { height: 130px; }
.servicos { padding: 4px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.servico { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 9px 12px; border-radius: 10px; background: rgba(5, 10, 20, 0.5); border: 1px solid var(--borda); }
.servico i { width: 9px; height: 9px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 10px var(--verde); }
.servico.mal i { background: var(--vermelho); box-shadow: 0 0 10px var(--vermelho); animation: pisca 1s infinite; }
.servico span { flex: 1; }
.servico small { font-family: var(--mono); color: var(--suave); font-size: 11.5px; }
.creditos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 18px 18px; }
.creditos div { border-radius: 12px; padding: 12px; background: linear-gradient(135deg, rgba(167, 139, 250, 0.12), rgba(56, 189, 248, 0.06)); border: 1px solid var(--borda); }
.creditos small { font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--suave); font-weight: 700; }
.creditos b { display: block; font-size: 24px; margin-top: 2px; }
.creditos em { font-style: normal; font-size: 11.5px; color: var(--suave); }

/* modal de administração */
.modal { position: fixed; inset: 0; background: rgba(2, 6, 14, 0.75); backdrop-filter: blur(6px); display: none; align-items: flex-start; justify-content: center; z-index: 50; padding: 60px 16px; overflow-y: auto; }
.modal.aberto { display: flex; }
.caixa { width: min(980px, 100%); background: var(--painel-forte); border: 1px solid var(--borda-forte); border-radius: 18px; box-shadow: var(--sombra); padding: 22px; animation: entra 0.3s ease-out; }
.caixa h3 { margin: 0 0 4px; font-size: 20px; }
.caixa .x { float: right; background: none; border: 0; color: var(--suave); font-size: 26px; cursor: pointer; line-height: 1; }
table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 12px; }
th { text-align: left; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--suave); padding: 8px; border-bottom: 1px solid var(--borda); }
td { padding: 10px 8px; border-bottom: 1px solid rgba(120, 160, 220, 0.07); vertical-align: middle; }
.acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.btn { background: rgba(56, 189, 248, 0.1); color: var(--ciano); border: 1px solid rgba(56, 189, 248, 0.3); border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 650; cursor: pointer; }
.btn:hover { background: rgba(56, 189, 248, 0.2); }
.btn.perigo { color: var(--vermelho); border-color: rgba(248, 113, 113, 0.35); background: rgba(248, 113, 113, 0.08); }
.etiqueta { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--suave); }
.etiqueta.v { color: var(--verde); background: rgba(52, 211, 153, 0.12); }
.etiqueta.r { color: var(--vermelho); background: rgba(248, 113, 113, 0.12); }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--painel-forte); border: 1px solid var(--borda-forte); padding: 12px 18px; border-radius: 12px; box-shadow: var(--sombra); opacity: 0; transition: all 0.3s; z-index: 60; font-size: 14px; }
.toast.ver { opacity: 1; transform: translateX(-50%); }

/* carregando */
.carregando { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); z-index: 100; transition: opacity 0.6s; }
.carregando.some { opacity: 0; pointer-events: none; }
.carregando .anel { width: 90px; height: 90px; border-radius: 50%; border: 2px solid rgba(56, 189, 248, 0.15); border-top-color: var(--ciano); border-right-color: var(--turquesa); animation: gira 1s linear infinite; box-shadow: 0 0 40px rgba(56, 189, 248, 0.25); }
.carregando p { color: var(--suave); text-align: center; letter-spacing: 2px; font-size: 12px; text-transform: uppercase; margin-top: 18px; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- telas menores ---------- */
@media (max-width: 1400px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1180px) {
  .cerebro, .alertas, .feed, .graficos, .fluxos, .saude { grid-column: 1 / -1; }
  .alertas { max-height: 460px; }
  .batimento { display: none; }
}
@media (max-width: 720px) {
  main { padding: 14px 16px 30px; gap: 14px; }
  .topo { padding: 10px 16px; gap: 10px; flex-wrap: wrap; }
  .marca .sub, .relogio small, .ao-vivo span { display: none; }
  .relogio { font-size: 15px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { min-height: 112px; padding: 12px 14px 10px; }
  .kpi .num { font-size: 28px; }
  .cerebro { min-height: 380px; } .cerebro canvas { min-height: 320px; }
  .feed, .graficos { height: 560px; }
  .filtros input { width: 100%; margin-left: 0; }
  .resumo-graf { grid-template-columns: repeat(2, 1fr); }
  .medidores { grid-template-columns: repeat(3, 1fr); }
  .item { grid-template-columns: 34px minmax(0, 1fr); }
  .item .lado { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition: none !important; } }