/* Lista de ramais — cores da marca Tucumann */
:root {
  --laranja: #F3801F;
  --laranja-escuro: #C9620B;
  --grafite: #2C2E31;
  --grafite-claro: #44474B;
  --linha: #EEF0F2;
  --papel: #F6F6F7;
  --texto: #1E1F21;
  --suave: #5E6268;
  --perigo: #B3261E;
  --ok: #2E7D4F;
  --cond: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --corpo: "Barlow", "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font: 16px/1.45 var(--corpo);
}
a { color: var(--laranja-escuro); }
:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.so-impressao { display: none; }

/* ---------- Topo ---------- */
.topo {
  background: var(--grafite);
  color: #fff;
  padding: 1.25rem clamp(1rem, 4vw, 2.5rem) 0;
  position: sticky;
  top: 0;
  z-index: 5;
}
.topo-linha {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: .75rem 2rem; max-width: 1280px; margin: 0 auto;
}
.marca { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.marca-nome {
  font: 700 1.6rem/1 var(--cond);
  color: var(--laranja);
  letter-spacing: .02em;
}
.logo { height: 56px; width: auto; align-self: center; display: block; }
.marca:has(.logo) h1 { padding-left: 1rem; border-left: 1px solid #5A5D62; }
.marca:has(.logo) { align-items: center; }
.topo h1 { margin: 0; font: 600 1.6rem/1 var(--cond); letter-spacing: .01em; }
.topo-info { display: flex; gap: 1.25rem; flex-wrap: wrap; font-size: .9rem; color: #C9CBCE; }
.wifi strong { color: #fff; font-weight: 600; margin-left: .3rem; user-select: all; }

.busca {
  display: flex; align-items: center; max-width: 1280px; margin: 1rem auto 0;
  position: relative; transform: translateY(50%);
}
.busca input {
  width: 100%; font: 500 1.15rem var(--corpo); padding: .85rem 3rem .85rem 1.1rem;
  border: 2px solid var(--laranja); border-radius: 10px; background: #fff; color: var(--texto);
  box-shadow: 0 6px 18px rgba(44, 46, 49, .18);
}
.busca input:not(:placeholder-shown) + kbd { display: none; }
.busca input:focus { outline: none; border-color: var(--laranja-escuro); }
.busca kbd {
  position: absolute; right: 1rem; font: 600 .8rem var(--corpo); color: var(--suave);
  border: 1px solid #C9CBCE; border-radius: 4px; padding: .05rem .4rem;
}

/* ---------- Lista pública ---------- */
.lista {
  max-width: 1280px; margin: 0 auto;
  padding: 3.5rem clamp(1rem, 4vw, 2.5rem) 2rem;
  columns: 300px 4; column-gap: 1.5rem;
}
.setor { break-inside: avoid; margin: 0 0 1.5rem; background: #fff; border-radius: 0 14px 0 0; overflow: hidden; }
.setor h2 {
  margin: 0; padding: .45rem .9rem; background: var(--laranja); color: #fff;
  font: 700 1.15rem/1.2 var(--cond); letter-spacing: .03em;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
}
.setor table { width: 100%; border-collapse: collapse; }
.setor td { padding: .32rem .9rem; vertical-align: baseline; }
.setor tbody tr:nth-child(even) { background: var(--linha); }
.setor .nome { width: 100%; }
.setor .ramal {
  font: 700 1.35rem/1 var(--cond); text-align: right; padding-right: .5rem;
  font-variant-numeric: tabular-nums;
}
.setor .direto { white-space: nowrap; font-size: .9rem; color: var(--suave); font-variant-numeric: tabular-nums; }
.setor .direto a { color: inherit; text-decoration: none; }
.setor .direto a:hover { color: var(--laranja-escuro); text-decoration: underline; }

.suporte {
  break-inside: avoid; background: var(--grafite); color: #E4E5E7; padding: 1.1rem 1.1rem 1.25rem;
  border-radius: 0 14px 0 0; margin-bottom: 1.5rem;
}
.suporte h2 { margin: 0 0 .4rem; font: 700 1.3rem/1.1 var(--cond); color: var(--laranja); }
.suporte p { margin: .5rem 0; }
.suporte a:not(.botao) { color: #fff; }
.pequeno { font-size: .88rem; }

.vazio { max-width: 640px; margin: 0 auto 3rem; padding: 0 1rem; font-size: 1.1rem; color: var(--suave); }

.rodape {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  max-width: 1280px; margin: 0 auto; padding: 1rem clamp(1rem, 4vw, 2.5rem) 2rem;
  color: var(--suave); font-size: .9rem; border-top: 1px solid #DCDDE0;
}
.rodape a { margin-left: 1.25rem; }

/* ---------- Botões e formulários ---------- */
.botao {
  display: inline-block; font: 600 1rem var(--corpo); padding: .6rem 1.15rem;
  background: var(--laranja); color: #fff; border: 0; border-radius: 8px; cursor: pointer; text-decoration: none;
}
.botao:hover { background: var(--laranja-escuro); }
.botao-sec { background: transparent; color: var(--grafite); box-shadow: inset 0 0 0 2px var(--grafite); }
.botao-sec:hover { background: var(--grafite); color: #fff; }
.botao-perigo { background: transparent; color: var(--perigo); box-shadow: inset 0 0 0 2px var(--perigo); }
.botao-perigo:hover:not(:disabled) { background: var(--perigo); color: #fff; }
.botao:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Painel administrativo ---------- */
.topo-admin { position: static; padding-bottom: 1rem; }
.menu { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.menu a { color: #E4E5E7; text-decoration: none; font-weight: 500; padding-bottom: .2rem; border-bottom: 2px solid transparent; }
.menu a:hover, .menu a[aria-current] { color: #fff; border-color: var(--laranja); }

.painel { max-width: 1280px; margin: 0 auto; padding: 1.5rem clamp(1rem, 4vw, 2.5rem) 3rem; }
.barra { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.barra h2 { margin: 0; font: 700 1.6rem var(--cond); }
.acoes { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }

.grade-admin { columns: 380px 3; column-gap: 1.5rem; }
.setor-admin thead th {
  text-align: left; font: 600 .78rem var(--corpo); color: var(--suave);
  padding: .5rem .9rem .25rem; border-bottom: 1px solid #DCDDE0;
}
.setor-admin thead th:nth-child(2) { text-align: right; padding-right: .5rem; }
.setor-admin .acoes-linha { text-align: right; white-space: nowrap; }
.link-claro { color: #fff; font: 500 .85rem var(--corpo); }
.adicionar { display: block; padding: .6rem .9rem; font-weight: 500; border-top: 1px dashed #DCDDE0; text-decoration: none; }
.adicionar:hover { background: #FFF4EA; }
.inativo { opacity: .5; }
.setor-admin.inativo h2 { background: var(--grafite-claro); }
tr.divergente { box-shadow: inset 4px 0 0 var(--perigo); }
.marca-div {
  display: block; width: fit-content; margin-top: .15rem; font: 600 .72rem var(--corpo);
  color: var(--perigo); border: 1px solid currentColor; border-radius: 4px; padding: 0 .3rem;
}

.cartao {
  background: #fff; border-radius: 0 14px 0 0; padding: 1.25rem 1.5rem 1.5rem; max-width: 720px;
  margin-bottom: 1.5rem; border-top: 4px solid var(--laranja);
}
.cartao h1, .cartao h2 { margin: 0 0 1rem; font: 700 1.5rem/1.15 var(--cond); }
.cartao-login { margin: 12vh auto 0; max-width: 420px; }
label { display: block; font-weight: 600; margin-bottom: 1rem; }
input:not([type=checkbox]), select, textarea {
  display: block; width: 100%; margin-top: .35rem; padding: .6rem .75rem;
  font: 400 1rem var(--corpo); color: var(--texto);
  border: 1px solid #B9BCC1; border-radius: 6px; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--laranja); outline-offset: 0; border-color: var(--laranja); }
.check { display: flex; gap: .5rem; align-items: center; font-weight: 500; align-self: center; }
.check input { width: 1.15rem; height: 1.15rem; accent-color: var(--laranja); }
.ajuda { display: block; font-weight: 400; font-size: .87rem; color: var(--suave); margin-top: .3rem; }
.duas-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1.25rem; }
.excluir { max-width: 720px; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }

.aviso { padding: .7rem 1rem; border-radius: 6px; margin: 0 0 1rem; max-width: 720px; }
.aviso-ok { background: #E6F2EB; color: var(--ok); }
.aviso-erro { background: #FBEAE9; color: var(--perigo); }
.aviso-atencao { background: #FFF1E3; color: #8A4200; }
.aviso-info { background: var(--linha); color: var(--texto); }

/* ---------- Celular ---------- */
@media (max-width: 560px) {
  .topo { position: static; }
  .busca kbd { display: none; }
  .topo h1 { font-size: 1.35rem; }
  .logo { height: 42px; }
  .setor .direto { font-size: .82rem; }
  .setor td { padding-left: .7rem; padding-right: .7rem; }
}

/* ---------- Impressão (A4 deitado, 3 colunas como o modelo antigo) ---------- */
@media print {
  @page { size: A4 landscape; margin: 7mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff; font-size: 8.5pt; line-height: 1.25; }
  .topo { position: static; padding: 2.5mm 4mm; background: var(--grafite); color: #fff; border-radius: 0 8px 0 0; }
  .topo h1, .marca-nome { font-size: 15pt; }
  .logo { height: 11mm; }
  .topo-info { color: #E4E5E7; font-size: 8.5pt; align-self: center; }
  .busca, .nao-imprimir, .vazio, .suporte .botao { display: none !important; }
  .lista { padding: 3mm 0 0; columns: 3; column-gap: 5mm; max-width: none; }
  .setor { margin-bottom: 3mm; border: 1px solid #DCDDE0; border-radius: 0 8px 0 0; }
  .setor h2 { font-size: 9.5pt; padding: .5mm 2.5mm; }
  .setor td { padding: .55mm 2.5mm; }
  .setor .ramal { font-size: 10pt; }
  .setor .direto { font-size: 8pt; }
  .suporte { background: #fff; color: var(--texto); border: 1px solid var(--grafite); padding: 2mm 3mm; margin: 0; border-radius: 0 8px 0 0; }
  .suporte h2 { font-size: 10.5pt; }
  .suporte .pequeno { font-size: 8pt; }
  .suporte p { margin: 1mm 0; }
  .suporte a:not(.botao) { color: var(--texto); }
  .so-impressao { display: inline; font-weight: 600; }
  .rodape { padding: 1mm 0 0; border: 0; font-size: 8pt; }
  tr[hidden], .setor[hidden] { display: revert !important; }
}