/* ============================================================
   Painel Operacional — Identidade visual Diamante Administradora
   Paleta oficial: Dourado Institucional #C9A84C · Preto Profundo #1A1A1A
                   Bege Elegante #D4C5A9 · Cinza Claro #E8E8E8 · Branco #FFFFFF
   Tipografia: Montserrat (Bold títulos · SemiBold subtítulos · Regular corpo
               · Light legendas · Medium destaques)
   ============================================================ */
:root {
  /* marca */
  --dourado: #C9A84C;
  --preto: #1A1A1A;
  --bege: #D4C5A9;
  --cinza: #E8E8E8;
  --branco: #FFFFFF;

  /* derivados para a interface (tons do Preto Profundo e transparências do Dourado) */
  --fundo: var(--preto);
  --cartao: #212121;
  --cartao-2: #262624;
  --linha: rgba(201, 168, 76, .18);
  --linha-forte: rgba(201, 168, 76, .45);
  --texto: var(--cinza);
  --texto-2: var(--bege);
  --texto-3: rgba(212, 197, 169, .55);
  --agua: var(--dourado);            /* destaque principal */

  /* cores funcionais (só para diferenciar categorias; tons sóbrios que convivem com o dourado) */
  --reclamacao: #D9725F;
  --solicitacao: #8FAAC6;
  --elogio: #8DBA8A;
  --sugestao: var(--bege);

  --os-aberta: var(--dourado);
  --os-andamento: #8FAAC6;
  --os-finalizada: #8DBA8A;

  --raio: .5vw;
  --gap: 1.1vw;
  --corte: 1.1vw;                    /* moldura angular */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  background: var(--fundo);
  color: var(--texto);
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
  overflow: hidden;
  padding: 1.4vw 1.8vw 1vw;
  gap: var(--gap);
  position: relative;
}

/* ---------- elementos gráficos de apoio: linhas diagonais (60°) ---------- */
.deco { position: fixed; pointer-events: none; z-index: 0; width: 22vw; height: 22vw; opacity: .35; }
.deco::before, .deco::after {
  content: ""; position: absolute; border: 1px solid var(--dourado); transform: rotate(45deg);
}
.deco-a { top: -15vw; left: -15vw; }
.deco-a::before { inset: 4vw; }
.deco-a::after { inset: 7vw; opacity: .5; }
.deco-b { bottom: -15vw; right: -15vw; }
.deco-b::before { inset: 4vw; }
.deco-b::after { inset: 7vw; opacity: .5; }
.topo, .grade, .rodape { position: relative; z-index: 1; }

/* ---------- topo ---------- */
.topo { display: flex; align-items: center; gap: 2vw; padding-bottom: 1vw; border-bottom: 1px solid var(--linha); }
.marca { display: flex; align-items: center; gap: 1.4vw; flex: 1; min-width: 0; }
.logo { display: flex; align-items: center; gap: .9vw; flex: none; }
.logo-simbolo { height: 2.9vw; width: auto; display: block; }
.logo-texto { height: 2.2vw; width: auto; display: block; }
.divisor { width: 1px; height: 2.6vw; background: var(--linha-forte); flex: none; }
.marca h1 {
  font-size: 1.35vw; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--bege); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ao-vivo {
  display: flex; align-items: center; gap: .6vw;
  font-size: .85vw; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--texto-3); border: 1px solid var(--linha); padding: .5vw 1.1vw;
}
.ao-vivo .ponto { width: .55vw; height: .55vw; transform: rotate(45deg); background: var(--texto-3); }
.ao-vivo.on { color: var(--dourado); border-color: var(--linha-forte); }
.ao-vivo.on .ponto { background: var(--dourado); animation: pulso 2s infinite; }
.ao-vivo.off { color: var(--reclamacao); }
.ao-vivo.off .ponto { background: var(--reclamacao); }
@keyframes pulso {
  0% { box-shadow: 0 0 0 0 rgba(201, 168, 76, .6); }
  70% { box-shadow: 0 0 0 .7vw rgba(201, 168, 76, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0); }
}

.relogio { text-align: right; }
#hora { font-size: 2.3vw; font-weight: 700; line-height: 1; color: var(--branco); }
.data { font-size: .9vw; color: var(--texto-2); font-weight: 300; margin-top: .35vw; letter-spacing: .04em; }

/* ---------- grade ---------- */
.grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1.25fr;
  grid-template-areas: "hosp hosp" "wa os";
  gap: var(--gap);
  min-height: 0;
}
.hospedagem { grid-area: hosp; }
.whatsapp { grid-area: wa; }
.manutencao { grid-area: os; }

/* Blocos com "moldura angular" (canto superior direito cortado) */
.bloco {
  --borda: var(--linha);
  background: var(--borda);
  clip-path: polygon(0 0, calc(100% - var(--corte) * 1.6) 0, 100% calc(var(--corte) * 1.6), 100% 100%, 0 100%);
  padding: 1px;
  min-height: 0; position: relative;
  transition: opacity .4s;
}
.bloco > .bloco-in {
  background: linear-gradient(160deg, #222 0%, var(--fundo) 100%);
  clip-path: inherit;
  height: 100%;
  padding: 1.3vw 1.5vw;
  display: flex; flex-direction: column; gap: 1vw;
  min-height: 0; overflow: hidden; position: relative;
}
.bloco.offline { opacity: .5; }
.aviso-offline {
  display: none; position: absolute; top: 1.3vw; right: 3vw;
  font-size: .78vw; font-weight: 600; color: var(--reclamacao); letter-spacing: .04em;
  border: 1px solid rgba(217, 114, 95, .45); padding: .3vw .7vw;
}
.bloco.offline .aviso-offline { display: block; }

/* Cabeçalho de seção — losango + título + linha dourada (padrão do manual) */
.bloco-cab { display: flex; align-items: center; gap: .8vw; }
.bloco-cab::before {
  content: ""; width: .6vw; height: .6vw; border: 1.5px solid var(--dourado); transform: rotate(45deg); flex: none;
}
.bloco-cab h2 {
  font-size: 1.05vw; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--dourado);
  white-space: nowrap;
}
.bloco-cab h2 em { font-style: normal; font-weight: 300; color: var(--texto-2); text-transform: none; letter-spacing: .02em; margin-left: .4vw; }
.bloco-cab .fio { flex: 1; height: 1px; background: linear-gradient(90deg, var(--linha-forte), transparent); }
.selo { font-size: .75vw; color: var(--texto-3); font-weight: 300; white-space: nowrap; }
.bloco.offline .selo { visibility: hidden; }

.previstos { font-size: .8vw; color: var(--texto-3); font-weight: 300; letter-spacing: .02em; }
.previstos:empty { display: none; }
.rotulo { font-size: .9vw; color: var(--texto-2); font-weight: 400; line-height: 1.3; letter-spacing: .02em; }

/* ---------- KPIs ---------- */
.kpis { position: relative; z-index: 1; display: grid; gap: var(--gap); flex: 1; min-height: 0; }
.kpi {
  background: var(--cartao-2); border: 1px solid rgba(232, 232, 232, .06);
  padding: 1vw 1.3vw; display: flex; flex-direction: column; justify-content: center; gap: .4vw;
  position: relative; overflow: hidden; min-height: 0;
}
.kpi-num { font-size: 3.9vw; font-weight: 700; line-height: 1; color: var(--branco); letter-spacing: -.01em; }
.kpi-num.duplo { display: flex; align-items: baseline; gap: .6vw; }
.kpi-num.duplo i { font-style: normal; color: var(--dourado); font-weight: 300; font-size: .6em; }
.kpi.destaque { background: linear-gradient(150deg, rgba(201, 168, 76, .16), rgba(201, 168, 76, .03)); border-color: var(--linha-forte); }
.kpi.destaque .kpi-num { color: var(--dourado); }

.kpi-num.mudou { animation: brilho 1.4s ease-out; }
@keyframes brilho {
  0% { text-shadow: 0 0 1.4vw currentColor; transform: scale(1.05); }
  100% { text-shadow: none; transform: scale(1); }
}

/* hospedagem */
.hosp-corpo { display: grid; grid-template-columns: auto 1fr; gap: 2vw; flex: 1; min-height: 0; align-items: center; }
.ocupacao { position: relative; height: 100%; aspect-ratio: 1; max-height: 15vw; display: grid; place-items: center; }
.anel { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.anel circle { fill: none; stroke-width: 10; }
.anel-fundo { stroke: rgba(201, 168, 76, .12); }
.anel-valor {
  stroke: var(--dourado); stroke-linecap: butt;
  stroke-dasharray: 527.8; stroke-dashoffset: 527.8;
  transition: stroke-dashoffset 1.2s cubic-bezier(.2, .8, .2, 1), stroke .4s;
}
.ocupacao-texto { text-align: center; position: relative; }
.ocupacao-num { font-size: 3.9vw; font-weight: 700; line-height: 1; color: var(--branco); }
.ocupacao-num small { font-size: .42em; color: var(--dourado); margin-left: .15vw; font-weight: 600; }
.ocupacao .rotulo { margin-top: .3vw; font-weight: 500; }
.ocupacao .sub { font-size: .8vw; color: var(--texto-3); font-weight: 300; margin-top: .15vw; }
.kpis-hosp { grid-template-columns: repeat(4, 1fr); height: 100%; }

/* padronagem institucional — losangos em escala reduzida, no canto do bloco */
.hospedagem .bloco-in::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 16vw; height: 7vw; pointer-events: none; opacity: .14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M11 5 L17 11 L11 17 L5 11 Z' fill='none' stroke='%23C9A84C' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 1.15vw 1.15vw;
  -webkit-mask-image: linear-gradient(135deg, transparent 30%, #000 100%);
  mask-image: linear-gradient(135deg, transparent 30%, #000 100%);
}

/* whatsapp */
.kpis-wa { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.cat-reclamacao { --cor: var(--reclamacao); }
.cat-solicitacao { --cor: var(--solicitacao); }
.cat-elogio { --cor: var(--elogio); }
.cat-sugestao { --cor: var(--sugestao); }
.cat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: .25vw; background: var(--cor); }
.cat .kpi-num { color: var(--cor); }

.distribuicao { display: flex; flex-direction: column; gap: .6vw; }
.barra { display: flex; height: .6vw; overflow: hidden; background: rgba(232, 232, 232, .06); gap: 2px; }
.barra .seg { background: var(--cor); width: 0; transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.dist-legenda { display: flex; justify-content: space-between; font-size: .85vw; color: var(--texto-2); font-weight: 300; }
.dist-legenda b { color: var(--branco); font-weight: 600; }

/* manutenção */
.kpis-os { grid-template-columns: repeat(3, 1fr); flex: 0 0 auto; height: 7.2vw; }
.os-aberta { --cor: var(--os-aberta); }
.os-andamento { --cor: var(--os-andamento); }
.os-finalizada { --cor: var(--os-finalizada); }
.os .kpi-num { color: var(--cor); }
.os { border-top: .2vw solid var(--cor); }

.urgentes {
  font-size: .9vw; font-weight: 500; color: var(--texto-2);
  border: 1px solid rgba(232, 232, 232, .08); padding: .5vw 1vw; display: flex; align-items: center; gap: .6vw;
}
.urgentes::before { content: ""; width: .5vw; height: .5vw; transform: rotate(45deg); background: var(--texto-3); flex: none; }
.urgentes b { color: var(--branco); font-weight: 700; }
.urgentes .atrasadas { color: var(--texto-2); font-weight: 400; }
.urgentes.alerta { color: var(--cinza); background: rgba(217, 114, 95, .12); border-color: rgba(217, 114, 95, .5); }
.urgentes.alerta::before { background: var(--reclamacao); }
.urgentes.alerta b { color: var(--reclamacao); }

.lista-os { list-style: none; display: flex; flex-direction: column; gap: .4vw; flex: 1; min-height: 0; overflow: hidden; }
.lista-os li {
  display: grid; grid-template-columns: 6.5vw 1fr auto auto; gap: 1vw; align-items: center;
  font-size: .9vw; padding: .45vw .8vw; border-bottom: 1px solid rgba(201, 168, 76, .12);
  animation: entrar .6s ease-out;
}
@keyframes entrar { from { opacity: 0; transform: translateY(-.4vw); } to { opacity: 1; transform: none; } }
.lista-os .num { color: var(--dourado); font-weight: 600; letter-spacing: .04em; }
.lista-os .tit { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: var(--cinza); }
.lista-os .tit .alta { color: var(--reclamacao); margin-right: .4vw; font-size: .8em; }
.lista-os .loc { color: var(--texto-2); font-weight: 300; }
.status-os {
  font-size: .72vw; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; padding: .2vw .6vw;
  border: 1px solid var(--cor); color: var(--cor);
}
.vazio { color: var(--texto-3); font-size: .9vw; padding: .5vw 0; font-weight: 300; }

/* ---------- rodapé ---------- */
.rodape { display: flex; gap: 2vw; font-size: .75vw; color: var(--texto-3); font-weight: 300; letter-spacing: .04em; align-items: center; }
.rodape .fonte { display: flex; align-items: center; gap: .5vw; }
.rodape .fonte i { width: .45vw; height: .45vw; transform: rotate(45deg); background: var(--texto-3); }
.rodape .fonte.online i { background: var(--elogio); }
.rodape .fonte.offline i { background: var(--reclamacao); }
.rodape .fonte.simulado::after { content: "simulado"; margin-left: .3vw; color: var(--dourado); font-weight: 500; }
.rodape .dir { margin-left: auto; }

@media (min-width: 1001px) and (min-aspect-ratio: 1/1) {
  .kpis-os .kpi-num { font-size: 3.3vw; }
}

/* ---------- telas menores (notebook / celular) ---------- */
@media (max-width: 1000px), (max-aspect-ratio: 1/1) {
  :root { --raio: 6px; --gap: 12px; --corte: 12px; }
  body { height: auto; overflow: auto; padding: 16px; }
  .deco { width: 200px; height: 200px; }
  .deco-a { top: -100px; left: -100px; } .deco-b { bottom: -100px; right: -100px; }
  .deco-a::before, .deco-b::before { inset: 36px; } .deco-a::after, .deco-b::after { inset: 64px; }
  .topo { flex-wrap: wrap; gap: 12px; padding-bottom: 12px; }
  .marca { flex-basis: 100%; gap: 12px; }
  .logo { gap: 8px; } .logo-simbolo { height: 30px; } .logo-texto { height: 22px; }
  .divisor { height: 26px; }
  .marca h1 { font-size: 11px; white-space: normal; }
  .ao-vivo { font-size: 10px; padding: 6px 10px; } .ao-vivo .ponto { width: 7px; height: 7px; }
  .relogio { margin-left: auto; } #hora { font-size: 22px; } .data { font-size: 11px; }
  .grade { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "hosp" "wa" "os"; }
  .bloco > .bloco-in { padding: 16px; gap: 12px; }
  .aviso-offline { position: static; font-size: 11px; padding: 4px 8px; align-self: flex-start; }
  .bloco-cab { flex-wrap: wrap; gap: 8px; } .bloco-cab::before { width: 7px; height: 7px; }
  .bloco-cab h2 { font-size: 12px; white-space: normal; } .bloco-cab .fio { min-width: 20px; }
  .selo { font-size: 10px; flex-basis: 100%; padding-left: 15px; }
  .rotulo { font-size: 12px; }
  .previstos { font-size: 11px; }
  .kpi { padding: 12px 14px; gap: 4px; }
  .kpi-num { font-size: 32px; }
  .hosp-corpo { grid-template-columns: 1fr; justify-items: center; }
  .ocupacao { width: 180px; height: 180px; max-height: none; }
  .ocupacao-num { font-size: 38px; } .ocupacao .sub { font-size: 11px; }
  .kpis-hosp { grid-template-columns: repeat(2, 1fr); width: 100%; }
  .hospedagem .bloco-in::after { display: none; }
  .cat::before { width: 3px; }
  .barra { height: 8px; }
  .dist-legenda { font-size: 12px; flex-direction: column; gap: 4px; }
  .kpis-os { height: auto; } .os { border-top-width: 2px; }
  .urgentes { font-size: 12px; padding: 8px 12px; gap: 8px; } .urgentes::before { width: 6px; height: 6px; }
  .lista-os li { grid-template-columns: 1fr auto; font-size: 12px; padding: 8px 4px; gap: 4px 8px; }
  .lista-os .num { grid-column: 1 / -1; }
  .status-os { font-size: 9px; padding: 2px 8px; justify-self: start; }
  .rodape { font-size: 11px; flex-wrap: wrap; gap: 12px; } .rodape .fonte i { width: 6px; height: 6px; }
}