/* DHC Sistema - tema preto e laranja */
:root {
  --fundo: #0b0b0c;
  --lateral: #101012;
  --cartao: #17171a;
  --cartao2: #1e1e22;
  --texto: #f3f3f4;
  --suave: #9b9ba3;
  --borda: #2b2b31;
  --marca: #ff7a00;
  --marca-escura: #e06900;
  --marca-suave: rgba(255, 122, 0, 0.14);
  --erro: #ff5a5f;
  --ok: #9bc53d;
  --verde: #8fb339;
  --vermelho: #e5484d;
  --laranja: #ff7a00;
  --neutro: #8e9bb0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  line-height: 1.5;
}

code { background: var(--cartao2); padding: 1px 6px; border-radius: 4px; color: var(--marca); }
a { color: var(--marca); }

/* ---------- Login e cadastro ---------- */
.centro { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.cartao {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 16px;
  padding: 28px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 0 0 1px rgba(255, 122, 0, 0.12), 0 10px 40px rgba(255, 122, 0, 0.08);
}
.cartao h1 { margin: 0 0 4px; font-size: 1.5rem; color: var(--marca); }
.cartao .sub { margin: 0 0 20px; color: var(--suave); font-size: 0.95rem; }

label { display: block; font-weight: 600; font-size: 0.9rem; margin: 14px 0 6px; }
.ajuda { font-weight: 400; color: var(--suave); font-size: 0.82rem; }

input, select, textarea {
  width: 100%;
  padding: 11px 12px;
  font: inherit;
  font-size: 1rem;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: #0f0f11;
  color: var(--texto);
}
input::placeholder, textarea::placeholder { color: #6d6d75; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--marca); outline-offset: 1px; border-color: var(--marca); }
input[type="time"], input[type="number"] { color-scheme: dark; }
select option { background: #17171a; color: var(--texto); }
textarea { width: 100%; }

button {
  margin-top: 20px;
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  font-weight: 700;
  color: #111;
  background: var(--marca);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
button:hover { background: #ff8f26; }
button:disabled { opacity: 0.6; cursor: wait; }
button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.mensagem { margin-top: 14px; font-size: 0.92rem; min-height: 1.2em; }
.mensagem.erro { color: var(--erro); }
.mensagem.ok { color: var(--ok); }
.rodape { margin-top: 18px; text-align: center; font-size: 0.92rem; color: var(--suave); }

/* ---------- Painel ---------- */
.painel { display: flex; min-height: 100vh; }
.lateral {
  width: 248px;
  flex: none;
  background: var(--lateral);
  border-right: 1px solid var(--borda);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lateral .logo { font-weight: 800; font-size: 1.2rem; color: var(--marca); padding: 0 10px 16px; letter-spacing: 0.02em; }
.lateral .item {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.95rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #d0d0d6;
}
.lateral button.item { width: 100%; margin: 0; background: transparent; border: 0; text-align: left; font-weight: 500; }
.lateral button.item:hover { background: #1b1b1f; }
.lateral .item.ativo, .lateral button.item.ativo { background: var(--marca-suave); color: var(--marca); font-weight: 700; box-shadow: inset 3px 0 0 var(--marca); }
.lateral .item.breve { color: #6d6d75; }
.lateral .tag { font-size: 0.7rem; background: #232328; padding: 2px 7px; border-radius: 99px; color: var(--suave); }

.conteudo { flex: 1; padding: 24px 28px; min-width: 0; }
.topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.topo h1 { margin: 0; font-size: 1.5rem; }
.topo .quem { color: var(--suave); font-size: 0.92rem; }
.topo button { width: auto; margin: 0; padding: 9px 18px; background: transparent; color: var(--texto); border: 1px solid var(--borda); }
.topo button:hover { background: var(--cartao2); border-color: var(--marca); }

/* Faixa de balões em aberto (sempre visível no topo) */
.resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 20px 0 4px; }
.kpi {
  position: relative;
  margin: 0;
  width: auto;
  text-align: left;
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 16px 18px;
  color: var(--texto);
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kpi:hover { background: var(--cartao2); border-color: var(--cor); }
.kpi::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--cor); }
.kpi-rotulo { font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--suave); }
.kpi-valor { font-size: 2.4rem; font-weight: 800; line-height: 1.1; color: var(--cor); }
.kpi-nota { font-size: 0.8rem; color: var(--suave); }
.kpi-bonus { --cor: var(--verde); }
.kpi-falta { --cor: var(--laranja); }
.kpi-emergencia { --cor: var(--vermelho); }
.kpi-agendado { --cor: var(--neutro); }
.kpi.piscando { border-color: var(--vermelho); animation: pulsar 1.2s ease-in-out infinite; }
@keyframes pulsar { 0%, 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.55); } 50% { box-shadow: 0 0 0 8px rgba(229, 72, 77, 0); } }
@media (prefers-reduced-motion: reduce) { .kpi.piscando { animation: none; } }

.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 24px; }
.bloco { background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; padding: 18px; }
.bloco h2 { margin: 0 0 6px; font-size: 1rem; }
.bloco p { margin: 0 0 6px; color: var(--suave); font-size: 0.92rem; }
.bloco .valor { font-size: 1.3rem; font-weight: 700; color: var(--marca); margin-bottom: 4px; }
.bloco h3, .coluna h3 { margin: 14px 0 4px; font-size: 0.98rem; }

.vista { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.vista > .grade { margin-top: 0; }
.vista[hidden], [hidden] { display: none !important; }
.suave { color: var(--suave); font-weight: 400; font-size: 0.9rem; }

/* Formulários e listas */
.linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.coluna { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; }
.linha input, .linha select { width: auto; flex: 1 1 150px; margin: 0; }
.linha button { width: auto; margin: 0; padding: 10px 16px; }
button.sec { background: transparent; color: var(--texto); border: 1px solid var(--borda); }
button.sec:hover { background: var(--cartao2); border-color: var(--marca); }
button.perigo { background: transparent; color: var(--erro); border: 1px solid #5a2a2c; }
button.perigo:hover { background: rgba(255, 90, 95, 0.12); border-color: var(--erro); }
.pequeno { width: auto; padding: 5px 10px; font-size: 0.82rem; margin: 0 4px 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.chip { background: var(--marca-suave); color: var(--marca); border-radius: 6px; padding: 4px 9px; font-size: 0.85rem; font-weight: 700; }
.item-lista { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.dias label { display: flex; align-items: center; gap: 4px; font-size: 0.88rem; margin: 0; font-weight: 500; }
.dias input { width: auto; flex: none; margin: 0; }
.tabela-rolagem { overflow-x: auto; margin-top: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th { color: var(--suave); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; }
th, td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.ok-txt { color: var(--ok); font-weight: 600; }
.falta-txt { color: var(--suave); }

.item-funcao { border-bottom: 1px solid var(--borda); }
.item-funcao .item-lista { border-bottom: 0; }
.item-funcao details { padding: 0 0 10px; }
.item-funcao summary { cursor: pointer; color: var(--marca); font-size: 0.88rem; font-weight: 700; letter-spacing: 0.02em; }
.item-funcao .editar-funcao { margin-top: 10px; }
.baloes { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.baloes li { display: flex; gap: 10px; align-items: baseline; font-size: 0.92rem; }
.codigo-balao { background: var(--marca-suave); color: var(--marca); border-radius: 99px; padding: 2px 10px; font-weight: 700; font-size: 0.8rem; min-width: 44px; text-align: center; }

button.balao-verde { background: var(--verde); }
button.balao-verde:hover { background: #a3c244; }
button.balao-vermelho { background: var(--vermelho); color: #fff; }
button.balao-vermelho:hover { background: #ee5b60; }
button.balao-laranja { background: var(--laranja); }
tr.tipo-bonus td:first-child { border-left: 4px solid var(--verde); }
tr.tipo-emergencia td:first-child { border-left: 4px solid var(--vermelho); }
tr.tipo-falta td:first-child { border-left: 4px solid var(--laranja); }

.modelo { margin-top: 12px; }
.modelo-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 16px; margin: 10px 0; }
.modelo-funcao { display: flex; gap: 8px; align-items: center; font-size: 0.92rem; cursor: help; margin: 0; font-weight: 500; }
.modelo-funcao input { width: auto; margin: 0; accent-color: var(--marca); }

@media (max-width: 760px) {
  .painel { flex-direction: column; }
  .lateral { width: 100%; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--borda); }
  .lateral .logo { width: 100%; }
  .conteudo { padding: 16px; }
}