/* DHC Sistema - temas: Brasa (padrão, preto e laranja), Brisa (azul e lilás claro), Coral (rosa e coral claro) */
: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;
  --campo: #0f0f11;
  --hover: #1b1b1f;
  --hover-marca: #ff8f26;
  --tag: #232328;
  --mudo: #6d6d75;
  --menu: #d0d0d6;
  --sobre-marca: #111;
  --perigo-borda: #5a2a2c;
  --esquema: dark;
  --sombra: 0 0 0 1px rgba(255, 122, 0, 0.12), 0 10px 40px rgba(255, 122, 0, 0.08);
  --fundo-pagina: var(--fundo);
}

/* Brisa: claro, azul e lilás, com cartões translúcidos */
:root[data-tema="brisa"] {
  --fundo: #eaf0ff; --fundo-pagina: linear-gradient(135deg, #dfe9ff 0%, #ece6ff 55%, #f4eefc 100%);
  --lateral: rgba(255, 255, 255, 0.72); --cartao: rgba(255, 255, 255, 0.78); --cartao2: #eef1fb;
  --texto: #1f2540; --suave: #5f6890; --borda: #d6dcf2;
  --marca: #5b6cf0; --marca-escura: #4a59d6; --marca-suave: rgba(91, 108, 240, 0.14);
  --erro: #d93a45; --ok: #2e8b57;
  --verde: #2e9e5b; --vermelho: #e5484d; --laranja: #f08a1c; --neutro: #7b87ad;
  --campo: #ffffff; --hover: #e4e9fb; --hover-marca: #7483f5; --tag: #e1e6f8; --mudo: #8c94b5; --menu: #3a4270;
  --sobre-marca: #ffffff; --perigo-borda: #f0b9bd; --esquema: light;
  --sombra: 0 10px 40px rgba(91, 108, 240, 0.15);
}

/* Coral: claro, rosa e coral */
:root[data-tema="coral"] {
  --fundo: #fff3f1; --fundo-pagina: linear-gradient(135deg, #fff1ee 0%, #ffe8ec 60%, #fff6f0 100%);
  --lateral: #ffffff; --cartao: #ffffff; --cartao2: #fff0ed;
  --texto: #3a2428; --suave: #86666c; --borda: #f3d9d6;
  --marca: #ff5a6e; --marca-escura: #e8445a; --marca-suave: rgba(255, 90, 110, 0.13);
  --erro: #d93a45; --ok: #2e8b57;
  --verde: #2e9e5b; --vermelho: #e5484d; --laranja: #f08a1c; --neutro: #a08087;
  --campo: #fffaf9; --hover: #ffe9e6; --hover-marca: #ff7587; --tag: #ffe4e0; --mudo: #b69a9f; --menu: #5a3a40;
  --sobre-marca: #ffffff; --perigo-borda: #f0b9bd; --esquema: light;
  --sombra: 0 10px 40px rgba(255, 90, 110, 0.14);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--fundo-pagina);
  background-attachment: fixed;
  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: var(--sombra);
}
.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: var(--campo);
  color: var(--texto);
}
input::placeholder, textarea::placeholder { color: var(--mudo); }
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: var(--esquema); }
select option { background: var(--cartao2); color: var(--texto); }
textarea { width: 100%; }

button {
  margin-top: 20px;
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--sobre-marca);
  background: var(--marca);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
button:hover { background: var(--hover-marca); }
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;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  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: var(--menu);
}
.lateral button.item { width: 100%; margin: 0; background: transparent; border: 0; text-align: left; font-weight: 500; }
.lateral button.item:hover { background: var(--hover); }
.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: var(--mudo); }
.lateral .tag { font-size: 0.7rem; background: var(--tag); 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(4, 1fr); gap: 10px; margin: 16px 0 4px; }
@media (max-width: 900px) { .resumo { grid-template-columns: repeat(2, 1fr); } }
.kpi {
  position: relative;
  margin: 0;
  width: auto;
  text-align: left;
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 10px 14px 10px 16px;
  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.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--suave); }
.kpi-valor { font-size: 1.9rem; font-weight: 800; line-height: 1.1; color: var(--cor); }
.kpi-nota { font-size: 0.74rem; color: var(--suave); }
.kpi-bonus { --cor: var(--verde); }
.kpi-falta { --cor: var(--laranja); }
.kpi-emergencia { --cor: var(--vermelho); }
.kpi-agendado { --cor: var(--neutro); }
.kpi-pendente { --cor: var(--laranja); }
.kpi-pdv { --cor: var(--marca); }
.kpi-setor { --cor: var(--marca); }
.kpi-concluido { --cor: var(--verde); }
.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 var(--perigo-borda); }
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 { filter: brightness(1.1); }
button.balao-vermelho { background: var(--vermelho); color: #fff; }
button.balao-vermelho:hover { background: var(--vermelho); filter: brightness(1.1); }
button.balao-laranja { background: var(--laranja); }
button.balao-verde, button.balao-laranja { color: #111; }
button.balao-verde:hover, button.balao-laranja:hover { background: inherit; filter: brightness(1.1); }
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); }

/* Os 3 pontinhos só existem no celular */
.menu-pontos, .lateral .aba-atual { display: none; }
@media (max-width: 760px) {
  .painel { flex-direction: column; }
  .lateral { position: static; height: auto; width: 100%; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--borda); }
  .lateral .logo { width: auto; padding-bottom: 0; }
  .conteudo { padding: 16px; }
  /* No celular o menu fica escondido atrás dos 3 pontinhos */
  .lateral { flex-direction: column; flex-wrap: nowrap; padding: 10px 12px; gap: 4px; }
  .lateral-topo { display: flex; align-items: center; gap: 10px; }
  .lateral .aba-atual { display: block; flex: 1; color: var(--suave); font-size: 0.95rem; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .menu-pontos { display: inline-flex; margin: 0; width: 44px; height: 44px; align-items: center; justify-content: center; font-size: 1.6rem; line-height: 1; font-weight: 800; padding: 0; background: transparent; color: var(--texto); border: 1px solid var(--borda); border-radius: 10px; }
  .lateral:not(.aberto) > .item, .lateral:not(.aberto) > .espaco { display: none; }
  .lateral .espaco { flex: none; height: 6px; }
  .lateral .item { padding: 12px 10px; }
}


/* Aparência (escolha do tema) */
.temas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 12px; }
.tema-cartao { margin: 0; width: auto; text-align: left; background: var(--cartao); color: var(--texto); border: 2px solid var(--borda); border-radius: 14px; padding: 14px; font-weight: 500; }
.tema-cartao:hover { background: var(--cartao); border-color: var(--marca); }
.tema-cartao.escolhido { border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave); }
.tema-cartao strong { display: block; font-size: 1.05rem; margin-top: 10px; }
.tema-cartao span.suave { display: block; }
.mini { height: 84px; border-radius: 8px; display: flex; overflow: hidden; border: 1px solid rgba(128, 128, 128, 0.35); }
.mini i { display: block; }
.mini .m-lat { width: 22%; }
.mini .m-cor { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.mini .m-fx { height: 14px; border-radius: 4px; }
.mini .m-pt { height: 22px; border-radius: 4px; width: 55%; }
.mini-brasa { background: #0b0b0c; } .mini-brasa .m-lat { background: #101012; } .mini-brasa .m-fx { background: #17171a; } .mini-brasa .m-pt { background: #ff7a00; }
.mini-brisa { background: linear-gradient(135deg, #dfe9ff, #ece6ff); } .mini-brisa .m-lat { background: rgba(255, 255, 255, 0.8); } .mini-brisa .m-fx { background: rgba(255, 255, 255, 0.9); } .mini-brisa .m-pt { background: #5b6cf0; }
.mini-coral { background: #fff1ee; } .mini-coral .m-lat { background: #ffffff; } .mini-coral .m-fx { background: #ffffff; } .mini-coral .m-pt { background: #ff5a6e; }
.lateral .espaco { flex: 1; }

/* Menu com ícones e ações rápidas */
.lateral .ico { display: inline-block; width: 22px; opacity: 0.85; }
.lateral .item { justify-content: flex-start; gap: 4px; }
.lateral .item .tag { margin-left: auto; }
.acoes-topo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.acoes-topo button { margin: 0; width: auto; }
.festa { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; color: #5b2a00;
  background: linear-gradient(90deg, #ffe08a, #ffb3d1, #b8e0ff); border: 2px dashed #e0457b; box-shadow: 0 2px 8px rgba(224, 69, 123, .25); }
.festa[hidden] { display: none; }
.festa-texto { display: flex; flex-direction: column; line-height: 1.2; font-size: .9rem; }
.festa-texto strong { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.festa-icone { font-size: 1.4rem; display: inline-block; animation: festejar 1.6s ease-in-out infinite; }
@keyframes festejar { 0%, 100% { transform: rotate(-12deg) scale(1); } 50% { transform: rotate(12deg) scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .festa-icone { animation: none; } }
.topo .acoes-topo .acao-principal { background: var(--marca); color: var(--sobre-marca); border: 0; padding: 9px 16px; }
.topo .acoes-topo .acao-principal:hover { background: var(--hover-marca); }
.topo .acoes-topo .acao-falta { color: var(--laranja); border-color: var(--laranja); }

/* Tela Início: central de comando */
.central { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.central .largo { grid-column: 1 / -1; }
.lista-viva { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.vazio { color: var(--suave); font-size: 0.9rem; padding: 8px 0; }
.linha-viva { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--cartao2); border-radius: 8px; border-left: 4px solid var(--neutro); font-size: 0.9rem; }
.linha-viva .grande { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.linha-viva .tempo { color: var(--suave); font-size: 0.8rem; white-space: nowrap; }
.linha-viva.t-bonus { border-left-color: var(--verde); }
.linha-viva.t-emergencia { border-left-color: var(--vermelho); }
.linha-viva.t-falta { border-left-color: var(--laranja); }
.linha-viva.n-vermelho { border-left-color: var(--vermelho); }
.linha-viva.n-laranja { border-left-color: var(--laranja); }
.linha-viva.n-ok { border-left-color: var(--verde); }
.barras { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.barra-linha { display: grid; grid-template-columns: 100px 1fr 150px; gap: 10px; align-items: center; font-size: 0.88rem; }
.barra-linha .rot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-linha .num { white-space: nowrap; text-align: right; color: var(--suave); font-size: 0.8rem; }
.barra { height: 12px; background: var(--cartao2); border-radius: 99px; overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--marca); border-radius: 99px; }
.horas { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; align-items: end; height: 130px; margin-top: 10px; }
.hora { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; font-size: 0.65rem; color: var(--suave); gap: 3px; }
.hora i { display: block; width: 100%; min-height: 2px; background: var(--marca); border-radius: 3px 3px 0 0; }
.hora.agora { color: var(--marca); font-weight: 700; }
@media (max-width: 760px) { .barra-linha { grid-template-columns: 80px 1fr 120px; } .horas { gap: 1px; } }
tr.tipo-adm td:first-child { border-left: 4px solid var(--marca); }
.linha-viva button { margin: 0; }

/* Selecionar vários e desfazer */
.barra-lote { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 4px; padding: 8px 10px; background: var(--cartao2); border-radius: 10px; }
.barra-lote .marca-todos { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; font-size: 0.88rem; }
.barra-lote input[type="checkbox"], td input[type="checkbox"], .com-caixa input[type="checkbox"] { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--marca); }
.barra-lote select { width: auto; flex: 0 1 190px; margin: 0; padding: 6px 8px; font-size: 0.88rem; }
.barra-lote button { margin: 0; }
.com-caixa { display: flex; align-items: center; gap: 10px; }
.banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; padding: 10px 14px; background: var(--marca-suave); border: 1px solid var(--marca); border-radius: 10px; font-weight: 600; }
.banner button { margin: 0; width: auto; padding: 6px 14px; }
.info-faltante { margin-top: 6px; color: var(--suave); font-size: 0.88rem; }

.chip-grande { font-size: 1.3rem; letter-spacing: 0.2em; padding: 6px 14px; }
.podios { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 8px; }
.podio { background: var(--cartao2); border-radius: 12px; padding: 12px 14px; }
.podio h3 { margin: 0 0 8px; text-transform: capitalize; font-size: 0.95rem; }
.podio-linha { display: grid; grid-template-columns: 40px 1fr auto; gap: 8px; align-items: center; padding: 4px 0; font-size: 0.92rem; }
.botao-link { display: inline-block; padding: 8px 14px; border: 1px solid var(--marca); border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 0.9rem; }

/* Telas de setor (painel) */
.bloco-destaque { margin: 12px 0; padding: 14px 16px; border: 2px dashed var(--marca); border-radius: 12px; }
.bloco-destaque h3 { margin: 0 0 6px; font-size: 1rem; }
.codigo-grande { font-size: 2.4rem; font-weight: 800; letter-spacing: 0.14em; color: var(--marca); font-variant-numeric: tabular-nums; }
.como-fazer { margin-top: 14px; }
.como-fazer summary { cursor: pointer; font-weight: 600; }
.como-fazer ol { padding-left: 20px; line-height: 1.55; }

.recolhivel > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.recolhivel > summary::-webkit-details-marker { display: none; }
.recolhivel > summary::before { content: '▸'; color: var(--marca); font-size: 1.1rem; transition: transform .15s; }
.recolhivel[open] > summary::before { transform: rotate(90deg); }
.recolhivel-titulo { font-size: 1.15rem; font-weight: 700; }
.recolhivel[open] > summary { margin-bottom: 8px; }
.recolhivel-com-desc > summary { flex-wrap: wrap; }
.recolhivel-desc { flex-basis: 100%; margin-left: 26px; font-weight: 400; font-size: 0.9rem; line-height: 1.45; }

/* Prévia da tela de setor */
.previa-caixa { margin: 14px 0; padding: 14px 16px; border: 2px solid var(--borda); border-radius: 12px; }
.previa-caixa h3 { margin: 0 0 4px; font-size: 1rem; }
.previa-moldura { width: 100%; max-width: 960px; overflow: hidden; border: 1px solid var(--borda); border-radius: 8px; background: #000; margin: 8px 0 10px; }
.previa-moldura iframe { width: 1280px; height: 720px; border: 0; transform-origin: top left; pointer-events: none; display: block; }

/* Aba Ranking piscando no dia do fechamento */
.item.piscando-aba { animation: piscar-aba 1s ease-in-out infinite; }
@keyframes piscar-aba { 0%, 100% { background: transparent; } 50% { background: var(--marca-suave, rgba(255, 122, 0, 0.25)); box-shadow: 0 0 0 2px var(--marca); } }
@media (prefers-reduced-motion: reduce) { .item.piscando-aba { animation: none; box-shadow: 0 0 0 2px var(--marca); } }
.podio-pub { margin-top: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Finalizados com foto */
.fin-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 12px; }
.fin-cartao { border: 1px solid var(--borda); border-left: 5px solid var(--neutro); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.fin-cartao.t-bonus { border-left-color: var(--verde); }
.fin-cartao.t-falta { border-left-color: var(--laranja); }
.fin-cartao.t-emergencia { border-left-color: var(--vermelho); }
.fin-foto { display: block; width: 100%; height: 170px; object-fit: cover; background: #000; }
.fin-sem-foto { height: 170px; display: flex; align-items: center; justify-content: center; color: var(--suave); background: rgba(128, 128, 128, 0.08); }
.fin-info { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; font-size: 0.92rem; }

/* Menu lateral colorido: cada aba tem a sua cor */
.lateral .item { --cor-aba: var(--marca); }
.lateral .item .ico { opacity: 1; color: var(--cor-aba); }
.lateral button.item.ativo, .lateral .item.ativo { background: color-mix(in srgb, var(--cor-aba) 16%, transparent); color: var(--cor-aba); box-shadow: inset 3px 0 0 var(--cor-aba); }
.lateral button.item:hover { background: color-mix(in srgb, var(--cor-aba) 10%, transparent); }
.item[data-aba="inicio"] { --cor-aba: #ff9f43; }
.item[data-aba="visao"] { --cor-aba: #a78bfa; }
.item[data-aba="colaboradores"] { --cor-aba: #38bdf8; }
.item[data-aba="funcoes"] { --cor-aba: #eab308; }
.item[data-aba="baloes"] { --cor-aba: #fb7185; }
.item[data-aba="finalizados"] { --cor-aba: #f472b6; }
.item[data-aba="telas"] { --cor-aba: #34d399; }
.item[data-aba="pendentes"] { --cor-aba: #f59e0b; }
.item[data-aba="setores"] { --cor-aba: #60a5fa; }
.item[data-aba="ranking"] { --cor-aba: #facc15; }
.item[data-aba="relatorios"] { --cor-aba: #2dd4bf; }
.item[data-aba="impressoras"] { --cor-aba: #94a3b8; }
.item[data-aba="equipe"] { --cor-aba: #c084fc; }
.item[data-aba="conta"] { --cor-aba: #a3e635; }
.item[data-aba="aparencia"] { --cor-aba: #f97316; }

/* Visão geral (dono) */
.vg-delta { font-size: 0.76rem; color: var(--suave); }
.vg-delta.sobe { color: var(--verde); font-weight: 700; }
.vg-delta.desce { color: var(--vermelho); font-weight: 700; }
.vg-alerta { margin: 8px 0; padding: 10px 14px; border-radius: 10px; background: rgba(229, 72, 77, 0.14); border: 1px solid var(--vermelho); color: var(--texto); font-weight: 600; }
.vg-dias { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; align-items: end; height: 190px; margin-top: 10px; }
.vg-dia { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; font-size: 0.68rem; color: var(--suave); }
.vg-dia .cols { display: flex; align-items: flex-end; gap: 2px; width: 100%; flex: 1; min-height: 0; }
.vg-dia .cols i { display: block; flex: 1; min-height: 2px; border-radius: 3px 3px 0 0; }
.vg-dia .lanc { background: var(--marca-suave); border: 1px solid var(--marca); }
.vg-dia .conc { background: var(--verde); }
.vg-dia .n { font-weight: 700; color: var(--texto); }
.vg-dia.hoje .d { color: var(--marca); font-weight: 800; }
.vg-destaque { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--borda); }
.vg-destaque:last-child { border-bottom: 0; }
.vg-destaque .pos { font-size: 1.3rem; text-align: center; }
.vg-destaque .nome { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-destaque .pts { color: var(--suave); font-size: 0.85rem; text-align: right; }
@media (max-width: 760px) { .vg-dias { gap: 2px; } .vg-dia { font-size: 0.55rem; } }

.kpi-excluido { cursor: pointer; }
.kpi-excluido:not([style]) { --cor: var(--neutro); }
.destaque-lista { animation: destaque-lista 1.8s ease; }
@keyframes destaque-lista { 0%, 60% { box-shadow: 0 0 0 3px var(--marca); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .destaque-lista { animation: none; box-shadow: 0 0 0 2px var(--marca); } }

.caixa-modelo { background: var(--cartao2); border: 1px dashed var(--borda); border-radius: 10px; padding: 12px 14px; margin: 10px 0; font-size: 0.92rem; }
.caixa-modelo textarea { margin-top: 8px; }

/* Setores / Celulares: acesso dos celulares de um lado, setores e PDVs do outro (metade e metade) */
.duas-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.duas-colunas > .bloco { min-width: 0; margin: 0; }
@media (max-width: 1100px) { .duas-colunas { grid-template-columns: minmax(0, 1fr); } }

.sem-pontos td { color: var(--suave); }

.mini-midia { width: 96px; height: 54px; object-fit: cover; border-radius: 6px; border: 1px solid var(--borda); display: block; }

/* Celular: o horário/detalhe desce para a linha de baixo em vez de espremer o nome até sumir */
@media (max-width: 640px) {
  .linha-viva { flex-wrap: wrap; row-gap: 2px; }
  .linha-viva .grande { flex: 1 1 100%; white-space: normal; }
  .linha-viva .tempo { white-space: normal; flex: 1 1 100%; }
}

/* Faixa de números compacta nas outras abas: uma linha curta em vez de 8 cartões grandes */
.resumo.compacto { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.resumo.compacto .kpi { flex-direction: row; align-items: baseline; gap: 6px; padding: 4px 10px 4px 14px; min-height: 0; border-radius: 999px; }
.resumo.compacto .kpi::before { top: 6px; bottom: 6px; }
.resumo.compacto .kpi-rotulo { font-size: 0.68rem; }
.resumo.compacto .kpi-valor { font-size: 1rem; }
.resumo.compacto .kpi-nota { display: none; }

.subbloco { margin: 0 0 18px; }
.subbloco h2 { font-size: 1.05rem; }

/* "Como funciona": título discreto, para não competir com o conteúdo */
.recolhivel > summary > .recolhivel-titulo:only-child { }
details.recolhivel > summary > .recolhivel-titulo.discreto { font-size: 0.95rem; font-weight: 500; color: var(--suave, #9aa0a6); }

/* Listas vazias mostram uma frase em vez de um espaço em branco */
#vg-setores:empty::before, #vg-tipos:empty::before, #vg-destaques:empty::before,
#vg-recentes:empty::before, #vg-horas:empty::before, #vg-dias:empty::before {
  content: 'Sem dados neste período.'; color: var(--suave, #9aa0a6); font-size: 0.95rem;
}

/* Rodízio: listas de escolha com rolagem e busca (cabe 400 colaboradores) */

.md-pts { color: #1b7f3b; font-weight: 700; white-space: nowrap; }
.rod-escolha { max-height: 260px; overflow-y: auto; border: 1px solid var(--borda, #333); border-radius: 8px; padding: 6px 10px; }
.rod-escolha label { display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; }
.rod-escolha label[hidden] { display: none; }
.rod-grupo { border: 1px solid var(--borda, #333); border-radius: 10px; padding: 12px; margin-top: 12px; }
.rod-grupo h3 { margin: 0 0 6px; }
.rod-escolha input[type="checkbox"] { width: auto; min-width: 0; flex: none; margin: 0; }

@media (max-width: 600px) {
  #rk-tabela th, #rk-tabela td { padding: 8px 5px; font-size: 13px; letter-spacing: 0; }
}

/* Aviso urgente entre setores (âmbar): cor própria, diferente da emergência (vermelho) */
.kpi-ruptura { --cor: #f5b700; }
.linha-viva.t-ruptura { border-left-color: #f5b700; }
.fin-cartao.t-ruptura { border-left-color: #f5b700; }
tr.tipo-ruptura td:first-child { border-left: 4px solid #f5b700; }
.item.piscando-urgente { animation: piscar-urgente 1s ease-in-out infinite; }
.item.piscando-urgente.atrasado { animation-duration: .6s; --urg: #e5484d; }
@keyframes piscar-urgente { 0%, 100% { background: transparent; } 50% { background: rgba(245, 183, 0, .30); box-shadow: 0 0 0 2px var(--urg, #f5b700); } }
@media (prefers-reduced-motion: reduce) { .item.piscando-urgente { animation: none; box-shadow: 0 0 0 2px var(--urg, #f5b700); } }
.avisos-passos { display: grid; gap: 12px; margin: 10px 0; max-width: 560px; }
.av-campo { display: grid; gap: 4px; }
.av-campo input[type="number"] { max-width: 120px; }
.avisos-passos > label.linha { align-items: center; gap: 10px; }
.avisos-passos input[type="checkbox"] { width: auto; flex: none; margin: 0; }

/* Cadastro só pelo RH: dono e gerente não veem o formulário nem a importação de colaboradores. */
body.so-rh #colab-form-det, body.so-rh #bloco-importar, body.so-rh #bloco-planilha-sec { display: none; }
tr.linha-erro td { background: rgba(220, 53, 69, 0.12); }

/* Quadros da Visão geral que recolhem ao clicar no título */
.titulo-recolhivel { cursor: pointer; display: flex; align-items: center; gap: 8px; user-select: none; }
.titulo-recolhivel::before { content: '▾'; color: var(--marca); font-size: 1.1rem; transition: transform .15s; }
.bloco.recolhido > .titulo-recolhivel::before { transform: rotate(-90deg); }
.bloco.recolhido > *:not(h2) { display: none !important; }
.acoes { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* QR code de instalação: cartaz na tela e na impressão */
.qr-cartaz { background: #fff; color: #000; border-radius: 12px; padding: 20px; text-align: center; max-width: 420px; margin: 12px 0; }
.qr-cartaz h3 { color: #000; margin: 0 0 10px; font-size: 1.4rem; }
.qr-cartaz canvas { max-width: 100%; height: auto; }
.qr-cartaz .ajuda { color: #444; word-break: break-all; font-size: 0.75rem; }
.qr-cartaz .qr-digite { color: #000; margin: 14px 0 4px; font-size: 1rem; font-weight: 600; }
.qr-cartaz .qr-endereco { color: #000; margin: 0; font-size: 1.15rem; font-weight: 700; word-break: break-all; font-family: ui-monospace, Consolas, monospace; letter-spacing: 0.02em; }
@media print {
  body.imprimindo-qr * { visibility: hidden !important; }
  body.imprimindo-qr #qr-cartaz, body.imprimindo-qr #qr-cartaz * { visibility: visible !important; }
  body.imprimindo-qr #qr-cartaz { position: absolute; left: 0; top: 0; width: 100%; max-width: none; margin: 0; padding: 40px; }
  body.imprimindo-qr #qr-cartaz canvas { width: 70%; }
}

/* Minha área (dono da plataforma) */
.area-larga { max-width: 1000px; margin: 0 auto; padding: 16px; }
.cabecalho-area { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }