/* ============================================================
   PAINEL — Informativo Diário de Plantão
   Layout com menu lateral escuro, cartões de indicadores e gráficos.
   ============================================================ */
:root {
  --p-fundo: #f4f7fb;
  --p-lateral: #0f2038;
  --p-lateral-ativo: #1d4ed8;
  --p-card: #ffffff;
  --p-borda: #e5eaf2;
  --p-texto: #0f172a;
  --p-texto2: #64748b;
  --p-azul: #2563eb;
  --p-azul-claro: #eff6ff;
  --p-verde: #16a34a;
  --p-verde-claro: #ecfdf5;
  --p-amarelo: #f59e0b;
  --p-amarelo-claro: #fffbeb;
  --p-vermelho: #dc2626;
  --p-vermelho-claro: #fef2f2;
  --p-roxo: #7c3aed;
  --p-roxo-claro: #f5f3ff;
  --p-sombra: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .05);
}

body.painel-ativo { background: var(--p-fundo); }
.painel-shell { display: flex; min-height: 100dvh; background: var(--p-fundo); color: var(--p-texto); }

/* -------- Menu lateral -------- */
.painel-lateral {
  width: 232px; flex: 0 0 232px; background: var(--p-lateral); color: #e2e8f0;
  display: flex; flex-direction: column; padding: 18px 14px; gap: 6px;
  position: sticky; top: 0; height: 100dvh;
}
.painel-marca { display: flex; align-items: center; gap: 10px; padding: 6px 8px 20px; }
.painel-marca img { height: 40px; width: auto; border-radius: 8px; background: #fff; padding: 3px; }
.painel-marca strong { display: block; font-size: 16px; line-height: 1.1; color: #fff; }
.painel-marca span { font-size: 11px; color: #93a3bb; }
.painel-menu { display: flex; flex-direction: column; gap: 4px; }
.painel-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: 0; color: #cbd5e1; font: inherit; font-size: 14px;
  padding: 11px 12px; border-radius: 10px; cursor: pointer;
}
.painel-menu button:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.painel-menu button.ativo { background: var(--p-lateral-ativo); color: #fff; font-weight: 600; }
.painel-menu button svg { width: 18px; height: 18px; flex: 0 0 18px; }
.painel-rodape { margin-top: auto; font-size: 11px; color: #7d8ca6; padding: 12px 10px; line-height: 1.5; }

/* -------- Topo -------- */
.painel-principal { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.painel-topo {
  background: #fff; border-bottom: 1px solid var(--p-borda); padding: 12px 22px;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 40;
}
.painel-topo h1 { margin: 0; font-size: 20px; font-weight: 700; }
.painel-topo .sub { font-size: 12px; color: var(--p-texto2); }
.topo-bloco { display: flex; align-items: center; gap: 10px; padding-left: 22px; border-left: 1px solid var(--p-borda); }
.topo-bloco .rot { font-size: 11px; color: var(--p-texto2); }
.topo-bloco .val { font-size: 14px; font-weight: 700; }
.topo-icone { width: 34px; height: 34px; border-radius: 9px; background: var(--p-azul-claro); color: var(--p-azul); display: grid; place-items: center; }
.topo-dir-painel { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.painel-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--p-azul); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.painel-sino { position: relative; background: none; border: 0; cursor: pointer; color: var(--p-texto2); }
.painel-sino .badge {
  position: absolute; top: -4px; right: -6px; min-width: 17px; height: 17px; border-radius: 9px;
  background: var(--p-vermelho); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; padding: 0 4px;
}

/* -------- Conteúdo -------- */
.painel-conteudo { padding: 20px 22px 40px; display: flex; flex-direction: column; gap: 18px; }
.p-card { background: var(--p-card); border: 1px solid var(--p-borda); border-radius: 14px; box-shadow: var(--p-sombra); padding: 16px 18px; }
.p-card > h3 { margin: 0 0 14px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.p-card > h3 .icone { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--p-azul-claro); color: var(--p-azul); }
.p-grid { display: grid; gap: 16px; }
.p-kpis { grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); }
.p-3col { grid-template-columns: 1.25fr 1fr 1fr; }
.p-2col { grid-template-columns: 1fr 1.15fr; }
@media (max-width: 1180px) { .p-3col, .p-2col { grid-template-columns: 1fr; } }

.kpi { border-radius: 14px; border: 1px solid var(--p-borda); background: #fff; padding: 14px; box-shadow: var(--p-sombra); }
.kpi .top { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.kpi .ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; }
.kpi .rot { font-size: 12px; font-weight: 600; color: #334155; }
.kpi .valor { font-size: 30px; font-weight: 800; line-height: 1.1; }
.kpi .pe { font-size: 11px; color: var(--p-texto2); margin-top: 4px; }
.kpi.azul { background: var(--p-azul-claro); } .kpi.azul .ic { background: #dbeafe; color: var(--p-azul); }
.kpi.verde { background: var(--p-verde-claro); } .kpi.verde .ic { background: #d1fae5; color: var(--p-verde); }
.kpi.roxo { background: var(--p-roxo-claro); } .kpi.roxo .ic { background: #ede9fe; color: var(--p-roxo); }
.kpi.amarelo { background: var(--p-amarelo-claro); } .kpi.amarelo .ic { background: #fef3c7; color: var(--p-amarelo); }
.kpi.vermelho { background: var(--p-vermelho-claro); border-color: #fecaca; } .kpi.vermelho .ic { background: #fee2e2; color: var(--p-vermelho); }
.kpi.vermelho .valor { color: var(--p-vermelho); }

.leito-linha { display: grid; grid-template-columns: 150px 1fr 60px; gap: 14px; align-items: center; border: 1px solid var(--p-borda); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.leito-linha .nome { font-weight: 700; font-size: 13px; }
.leito-linha .nome small { display: block; font-weight: 400; color: var(--p-texto2); }
.leito-num { display: flex; gap: 18px; font-size: 12px; color: var(--p-texto2); margin-bottom: 6px; }
.leito-num b { font-size: 17px; color: var(--p-texto); margin-right: 4px; }
.barra { height: 8px; border-radius: 6px; background: #eef2f7; overflow: hidden; }
.barra span { display: block; height: 100%; border-radius: 6px; background: var(--p-azul); }
.leito-pct { font-size: 18px; font-weight: 800; text-align: right; }

.risco-flex { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.risco-lista { flex: 1 1 200px; display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.risco-lista .linha { display: grid; grid-template-columns: 14px 1fr 40px 46px; align-items: center; gap: 8px; }
.risco-lista .ponto { width: 12px; height: 12px; border-radius: 50%; }
.risco-lista .qtd { font-weight: 700; text-align: right; }
.risco-lista .pct { color: var(--p-texto2); text-align: right; }

.op-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--p-borda); border-radius: 10px; padding: 10px 12px; margin-bottom: 9px; font-size: 13px; }
.selo { font-size: 11px; font-weight: 700; padding: 5px 14px; border-radius: 8px; background: #f1f5f9; color: #475569; min-width: 56px; text-align: center; }
.selo.sim { background: var(--p-verde); color: #fff; }
.selo.nao { background: #eef2f7; color: #475569; }
.selo.num { background: #eef2f7; color: #0f172a; }

.oc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.oc-card { border-radius: 12px; padding: 12px; display: flex; align-items: center; gap: 10px; border: 1px solid transparent; }
.oc-card .n { font-size: 22px; font-weight: 800; line-height: 1; }
.oc-card .l { font-size: 11px; color: var(--p-texto2); }
.oc-card.crit { background: var(--p-vermelho-claro); border-color: #fecaca; }
.oc-card.pend { background: var(--p-amarelo-claro); border-color: #fde68a; }
.oc-card.res { background: var(--p-verde-claro); border-color: #a7f3d0; }

.p-tabela { width: 100%; border-collapse: collapse; font-size: 12px; }
.p-tabela th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--p-texto2); padding: 8px 8px; border-bottom: 1px solid var(--p-borda); font-weight: 600; }
.p-tabela td { padding: 9px 8px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.p-tabela tr:last-child td { border-bottom: 0; }
.p-tabela .vazio-td { color: var(--p-texto2); text-align: center; padding: 22px 8px; }
.chip { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; }
.chip.pendente { background: var(--p-amarelo-claro); color: #92400e; }
.chip.resolvida { background: var(--p-verde-claro); color: #166534; }
.chip.critica { background: var(--p-vermelho-claro); color: #991b1b; }
.ponto-lista { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 7px; background: var(--p-vermelho); }

.mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.mini { border: 1px solid var(--p-borda); border-radius: 12px; padding: 10px 12px; }
.mini h4 { margin: 0 0 4px; font-size: 12px; }
.mini .leg { display: flex; gap: 10px; flex-wrap: wrap; font-size: 10px; color: var(--p-texto2); margin-bottom: 4px; }
.mini .leg i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 3px; }

.p-filtros { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.p-campo { display: flex; flex-direction: column; gap: 4px; }
.p-campo label { font-size: 11px; color: var(--p-texto2); font-weight: 600; }
.p-campo input, .p-campo select, .p-campo textarea {
  font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--p-borda);
  border-radius: 9px; background: #fff; color: var(--p-texto); min-width: 140px;
}
.p-btn { font: inherit; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 9px; border: 1px solid var(--p-azul); background: var(--p-azul); color: #fff; cursor: pointer; }
.p-btn.sec { background: #fff; color: var(--p-texto); border-color: var(--p-borda); }
.p-btn.perigo { background: #fff; color: var(--p-vermelho); border-color: #fecaca; }
.p-btn:disabled { opacity: .6; cursor: progress; }
.p-acao { background: none; border: 0; color: var(--p-azul); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 5px; }
.p-acao.perigo { color: var(--p-vermelho); }
.p-aviso { font-size: 13px; color: var(--p-texto2); }
.p-status-plantao { font-size: 15px; font-weight: 800; padding: 9px 16px; border-radius: 10px; background: var(--p-verde-claro); color: #166534; }
.p-status-plantao.alerta { background: var(--p-vermelho-claro); color: #991b1b; }

.resumo-pronto { font-size: 13.5px; line-height: 1.65; color: var(--p-texto); background: #f8fafc; border: 1px solid var(--p-borda); border-radius: 10px; padding: 12px 14px; }
#mapeamento-msg.ok { color: #166534; font-size: 13px; font-weight: 600; margin-top: 10px; }
#corpo-mapeamento input[type="number"] { width: 90px; }

@media (max-width: 860px) {
  .painel-shell { flex-direction: column; }
  .painel-lateral { position: static; height: auto; width: 100%; flex: none; flex-direction: row; overflow-x: auto; padding: 10px; }
  .painel-marca { display: none; }
  .painel-menu { flex-direction: row; }
  .painel-menu button { white-space: nowrap; }
  .painel-rodape { display: none; }
  .topo-bloco { border-left: 0; padding-left: 0; }
  .oc-cards { grid-template-columns: 1fr; }
  .leito-linha { grid-template-columns: 1fr; }
}

/* -------- UTI Leitos por Turno -------- */
.uti-turnos, .uti-turnos-painel { display: flex; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.uti-turno, .painel-uti-turno { flex: 1 1 200px; background: #f8fafc; border: 1px solid var(--p-borda); border-radius: 12px; padding: 12px; }
.uti-turno h4, .painel-uti-turno h4 { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--p-texto2); text-transform: uppercase; letter-spacing: .04em; }
.leitos-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.leito-box { aspect-ratio: 1; border-radius: 8px; border: 2px solid var(--p-borda); background: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--p-texto2); transition: all .2s; }
.leito-box.ocupado { background: var(--p-vermelho); border-color: var(--p-vermelho); color: #fff; box-shadow: 0 2px 8px rgba(220, 38, 38, .3); }
.leito-resumo { margin-top: 8px; font-size: 11px; color: var(--p-texto2); text-align: center; }
.leito-linha.uti-detalhada { grid-template-columns: 1fr; }
.uti-turnos-painel { margin-top: 12px; }

/* Leitos por setor (internação) no Painel */
.setores-grid-painel { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; }
.setor-turno { background: #f8fafc; border: 1px solid var(--p-borda); border-radius: 12px; padding: 10px; }
.leitos-grid-setor { grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); }

/* UTI Leitos 10 com Diurno/Noturno (Painel) */
.leitos-grid-uti { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.leito-box-uti { aspect-ratio: 1; border-radius: 8px; border: 2px solid var(--p-borda); background: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--p-texto2); transition: all .2s; }
.leito-box-uti.ocupado-diurno { background: var(--p-azul); border-color: var(--p-azul); color: #fff; box-shadow: 0 2px 8px rgba(37, 99, 235, .3); }
.leito-box-uti.ocupado-noturno { background: var(--p-roxo); border-color: var(--p-roxo); color: #fff; box-shadow: 0 2px 8px rgba(124, 58, 237, .3); }
.leito-box-uti.ocupado-ambos { background: linear-gradient(135deg, var(--p-azul), var(--p-roxo)); border-color: var(--p-azul); color: #fff; box-shadow: 0 2px 8px rgba(37, 99, 235, .3); }
.leitos-legenda { display: flex; gap: 12px; margin-top: 8px; font-size: 11px; color: var(--p-texto2); flex-wrap: wrap; }

/* Checkbox fields */
.checkbox-campo { flex: 1 1 150px; }
.checkbox-label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; padding: 8px 10px; background: #f8fafc; border: 1px solid var(--p-borda); border-radius: 9px; }
.checkbox-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--p-azul); cursor: pointer; }
.checkbox-label:hover { background: #eff6ff; border-color: var(--p-azul); }

/* -------- Módulos liberados por usuário -------- */
.modulos-box { padding: 0 16px 6px; border-top: 1px solid var(--p-borda); }
.modulos-label { font-size: 12px; font-weight: 700; margin: 12px 0 8px; color: var(--p-texto); }
.modulos-todos { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 8px; cursor: pointer; padding: 8px 10px; background: var(--p-azul-claro); border: 1px solid var(--p-borda); border-radius: 9px; }
.modulos-todos input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--p-azul); cursor: pointer; }
.modulos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; max-height: 200px; overflow-y: auto; }
.modulos-item { display: flex; align-items: center; gap: 7px; font-size: 12px; padding: 7px 9px; background: #f8fafc; border: 1px solid var(--p-borda); border-radius: 8px; cursor: pointer; }
.modulos-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--p-azul); cursor: pointer; }
.modulos-item:hover { background: #eff6ff; border-color: var(--p-azul); }

/* -------- Risco por Turno -------- */
.risco-turnos { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.risco-turno-card { flex: 1 1 250px; background: #f8fafc; border: 1px solid var(--p-borda); border-radius: 12px; padding: 12px; }
.risco-turno-card h4 { margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* -------- Situação Operacional por Turno -------- */
.op-turnos { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.op-turno-card { flex: 1 1 200px; background: #f8fafc; border: 1px solid var(--p-borda); border-radius: 12px; padding: 12px; text-align: center; }
.op-turno-card h4 { margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* -------- Regulados -------- */
.regulado-card { background: #f8fafc; border: 1px solid var(--p-borda); border-radius: 10px; padding: 12px; text-align: left; }
.regulado-nome { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.regulado-info { display: flex; gap: 8px; flex-wrap: wrap; }

/* -------- Leitos por Setor Grid -------- */
.setores-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 12px; }
.setor-card { background: #f8fafc; border: 1px solid var(--p-borda); border-radius: 12px; padding: 12px; }
.setor-card h5 { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--p-texto2); text-transform: uppercase; }
.setor-leitos { display: grid; grid-template-columns: repeat(auto-fit, minmax(30px, 1fr)); gap: 4px; }
.setor-leito-box { aspect-ratio: 1; border-radius: 6px; border: 2px solid var(--p-borda); background: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--p-texto2); }
.setor-leito-box.ocupado { background: var(--p-vermelho); border-color: var(--p-vermelho); color: #fff; }
.setor-resumo { margin-top: 8px; font-size: 11px; color: var(--p-texto2); text-align: center; }

/* ---- Cartões de leitos (Internação / UTI) ---- */
.leitos-grupos { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; margin-top:8px }
.leitos-grupo { border:1px solid var(--p-borda, #e2e8f0); border-radius:10px; padding:10px 12px; background:#fff }
.leitos-grupo h4 { margin:0 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:var(--p-texto2, #64748b) }
.leitos-grupo h4 small { font-weight:500; text-transform:none }
.leitos-lista { display:flex; flex-wrap:wrap; gap:6px }
.leito-chk { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; border:1px solid var(--p-borda, #e2e8f0); border-radius:8px; padding:4px 8px; cursor:pointer; background:#f8fafc }
.leito-chk:has(input:checked) { background:#dbeafe; border-color:#2563eb; color:#1d4ed8 }
.leitos-rodape { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:14px; font-size:13px }