/* ===========================================================================
   Painel Corrente — painel interno do Volt Studio.
   Os tokens são os do brandbook V1 (ver site/styles.css). A regra da faísca e
   a proporção vêm de lá; aqui só se aplicam a uma interface densa. A espinha
   de circuito do site não entra: num painel a barra lateral já faz esse papel
   e duas linhas verticais competiriam uma com a outra.
   =========================================================================== */

/* As fontes vivem aqui e não em ../site/ porque o painel é publicado sozinho:
   fora desta pasta não há nada. São os mesmos ficheiros do site, copiados. */
@font-face{font-family:'Archivo';font-weight:400;font-display:swap;
  src:url('assets/fontes/Archivo-400.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-weight:600;font-display:swap;
  src:url('assets/fontes/Archivo-600.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-weight:700;font-display:swap;
  src:url('assets/fontes/Archivo-700.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-weight:800;font-display:swap;
  src:url('assets/fontes/Archivo-800.woff2') format('woff2')}

:root{
  --laranja:#FF5A1F;
  --laranja-escuro:#E64A12;
  --tinta:#16181C;

  --fundo:#F8F7F5;
  --superficie:#FFFFFF;
  --cova:#F1EFEC;
  --texto:#16181C;
  --meta:#5E626A;
  --linha:#E4E1DC;
  --sombra:0 1px 2px rgba(22,24,28,.05), 0 8px 24px rgba(22,24,28,.05);

  --ok:#1B7A57;      --ok-fundo:#E4F2EC;
  --aviso:#8A5A00;   --aviso-fundo:#F6EEDD;
  --risco:#B3261E;   --risco-fundo:#F8E6E4;

  --barra:248px;
  --raio:12px;
  --t:180ms cubic-bezier(.2,.7,.3,1);
  --faisca:602.46 / 1032;
  --corpo:'Archivo', system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --fundo:#131519; --superficie:#1A1D22; --cova:#0E1013;
    --texto:#F0EEEB; --meta:#9AA0A8; --linha:#2A2E35;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
    --ok:#4FBF93;    --ok-fundo:#15291F;
    --aviso:#E0A040; --aviso-fundo:#2C2213;
    --risco:#FF8A7A; --risco-fundo:#2E1916;
  }
}
:root[data-tema="escuro"]{
  --fundo:#131519; --superficie:#1A1D22; --cova:#0E1013;
  --texto:#F0EEEB; --meta:#9AA0A8; --linha:#2A2E35;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  --ok:#4FBF93;    --ok-fundo:#15291F;
  --aviso:#E0A040; --aviso-fundo:#2C2213;
  --risco:#FF8A7A; --risco-fundo:#2E1916;
}

/* ----------------------------------------------------------------- base -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fundo); color:var(--texto);
  font-family:var(--corpo); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
svg{max-width:100%}
[hidden]{display:none !important}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--laranja); outline-offset:2px; border-radius:6px;
}
.oculto{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.simbolos{position:absolute;width:0;height:0}

/* -------------------------------------------------------------- moldura -- */
.app{display:grid; grid-template-columns:1fr; min-height:100vh}
@media (min-width:960px){
  .app{grid-template-columns:var(--barra) minmax(0,1fr)}
}

.barra{
  background:var(--superficie); border-bottom:1px solid var(--linha);
  display:flex; flex-direction:column; gap:1.4rem; padding:1.1rem 1.1rem 1.3rem;
}
@media (min-width:960px){
  .barra{
    border-bottom:0; border-right:1px solid var(--linha);
    position:sticky; top:0; height:100vh; padding:1.6rem 1.1rem;
  }
}
.marca{display:flex; align-items:center; gap:.55rem; padding:0 .35rem}
.marca svg{height:20px; width:auto; aspect-ratio:var(--faisca); fill:var(--laranja); flex:none}
.marca b{font-weight:800; font-size:1.02rem; letter-spacing:-.02em}
.marca span{
  display:block; font-weight:600; font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--meta); margin-top:.05rem;
}
.nav{display:flex; flex-wrap:wrap; gap:.2rem}
@media (min-width:960px){.nav{flex-direction:column; flex-wrap:nowrap}}
.nav a{
  display:flex; align-items:center; gap:.6rem;
  padding:.5rem .7rem; border-radius:8px; text-decoration:none; color:var(--meta);
  font-weight:600; font-size:.88rem; transition:background var(--t), color var(--t);
}
.nav a:hover{background:var(--cova); color:var(--texto)}
.nav a[aria-current="page"]{background:var(--laranja); color:var(--tinta)}
.nav__c{
  margin-left:auto; font-size:.72rem; font-weight:700;
  font-variant-numeric:tabular-nums; opacity:.7;
}
.barra__pe{margin-top:auto; display:flex; flex-direction:column; gap:.6rem}
.barra__pe p{font-size:.72rem; color:var(--meta); line-height:1.45}

/* ---------------------------------------------------------------- vista -- */
.vista{padding:clamp(1.2rem,3vw,2.2rem) clamp(1.1rem,3vw,2.2rem) 4rem; min-width:0}
.vista__topo{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:.8rem 1.4rem;
  padding-bottom:1.2rem; border-bottom:1px solid var(--linha); margin-bottom:1.5rem;
}
.vista__topo h1{
  font-weight:800; font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem);
  line-height:1.05; letter-spacing:-.026em;
}
.vista__topo p{color:var(--meta); font-size:.92rem; max-width:56ch; flex-basis:100%}
.vista__acoes{margin-left:auto; display:flex; gap:.5rem; flex-wrap:wrap}

.etiqueta{
  font-weight:600; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--meta);
}

/* --------------------------------------------------------------- botões -- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45em;
  min-height:38px; padding:.5rem 1rem; border-radius:999px;
  border:1.5px solid var(--linha); background:transparent; color:var(--texto);
  font-weight:700; font-size:.85rem; line-height:1; cursor:pointer;
  transition:background var(--t), border-color var(--t), color var(--t);
}
.btn:hover{border-color:var(--texto)}
.btn--laranja{background:var(--laranja); border-color:var(--laranja); color:var(--tinta)}
.btn--laranja:hover{background:var(--laranja-escuro); border-color:var(--laranja-escuro)}
.btn--nu{border-color:transparent; color:var(--meta); padding:.4rem .6rem; min-height:32px}
.btn--nu:hover{border-color:var(--linha); color:var(--texto)}
.btn--min{min-height:28px; padding:.25rem .55rem; font-size:.75rem; font-weight:600}

/* -------------------------------------------------------------- cartões -- */
.grelha{display:grid; gap:1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

.painel{
  background:var(--superficie); border:1px solid var(--linha);
  border-radius:var(--raio); padding:1.15rem 1.1rem 1.25rem;
}
.painel > h2{
  font-weight:600; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--meta); margin-bottom:.9rem;
}
.painel__lista{display:flex; flex-direction:column}
.painel__lista li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .6rem; padding:.55rem 0;
  border-top:1px solid var(--linha); font-size:.88rem;
}
.painel__lista li:first-child{border-top:0; padding-top:0}
.painel__lista b{font-weight:700; flex:1 1 auto; min-width:9rem}
.painel__lista b a{color:inherit}
.painel__lista time{margin-left:auto; color:var(--meta); font-size:.8rem; white-space:nowrap}
.painel__vazio{font-size:.86rem; color:var(--meta)}

.kpi__v{
  display:block; font-weight:800; font-size:2.1rem; line-height:1;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.kpi__v small{font-size:.4em; font-weight:700; color:var(--meta); margin-left:.15em}
.kpi__r{
  display:block; margin-top:.55rem; font-weight:600; font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--meta);
}
.kpi__n{display:block; margin-top:.5rem; font-size:.82rem; color:var(--meta); line-height:1.45}

/* -------------------------------------------------------------- medidor -- */
.medidor{display:flex; gap:2px; height:26px; border-radius:6px; overflow:hidden;
  background:var(--cova); border:1px solid var(--linha); margin-top:.2rem}
.medidor i{display:block; height:100%}
.medidor .m--dentro{background:var(--laranja)}
.medidor .m--fora{background:var(--risco)}
.medidor__leg{
  display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; margin-top:.6rem;
  font-size:.8rem; color:var(--meta);
}
.medidor__leg b{color:var(--texto); font-variant-numeric:tabular-nums}

/* -------------------------------------------------------------- filtros -- */
.filtros{
  display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.4rem;
  padding-bottom:1rem; border-bottom:1px solid var(--linha);
}
.filtro{display:flex; align-items:center; gap:.4rem; flex-wrap:wrap}
.filtro__r{
  font-weight:600; font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--meta);
}
.chip{
  background:transparent; color:var(--meta); border:1px solid var(--linha);
  border-radius:999px; padding:.35rem .7rem; min-height:30px;
  font-weight:600; font-size:.78rem; line-height:1; cursor:pointer;
  transition:background var(--t), color var(--t), border-color var(--t);
}
.chip:hover{border-color:var(--meta); color:var(--texto)}
.chip[aria-pressed="true"]{background:var(--laranja); border-color:var(--laranja); color:var(--tinta)}
.contagem{margin-left:auto; font-size:.8rem; color:var(--meta); font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------- kanban -- */
.kanban{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px,1fr);
  gap:.7rem; overflow-x:auto; padding:1.1rem .15rem .5rem; align-items:start;
}
.coluna{
  background:var(--cova); border:1px solid var(--linha); border-radius:10px;
  padding:.7rem .6rem; display:flex; flex-direction:column; gap:.5rem; min-height:180px;
}
.coluna.sobre{border-color:var(--laranja); background:var(--superficie)}
.coluna__topo{display:flex; align-items:baseline; gap:.5rem; padding:.1rem .25rem .35rem}
.coluna__t{font-weight:600; font-size:.66rem; letter-spacing:.13em; text-transform:uppercase}
.coluna__c{margin-left:auto; font-size:.72rem; font-weight:600; color:var(--meta);
  font-variant-numeric:tabular-nums}
.coluna__c.cheio{color:var(--risco)}
.coluna__vazio{
  font-size:.76rem; color:var(--meta); text-align:center; padding:1.2rem .4rem;
  border:1px dashed var(--linha); border-radius:8px;
}

.ficha{
  background:var(--superficie); border:1px solid var(--linha); border-radius:8px;
  padding:.65rem .7rem .7rem; display:flex; flex-direction:column; gap:.42rem;
  cursor:grab; box-shadow:0 1px 1px rgba(22,24,28,.04);
}
.ficha:active{cursor:grabbing}
.ficha.arrasta{opacity:.4}
.ficha__t{font-weight:700; font-size:.86rem; line-height:1.25; letter-spacing:-.01em}
.ficha__linha{
  display:flex; flex-wrap:wrap; gap:.3rem .6rem; align-items:center;
  font-size:.75rem; color:var(--meta); font-variant-numeric:tabular-nums;
}
.ficha__val{font-weight:700; color:var(--texto)}
.ficha__pe{
  display:flex; align-items:center; gap:.35rem; padding-top:.4rem;
  border-top:1px solid var(--linha); font-size:.75rem; color:var(--meta);
}
.ficha__pe svg{height:11px; width:auto; aspect-ratio:var(--faisca); fill:var(--laranja); flex:none}
.ficha__mover{margin-left:auto; display:flex; gap:.15rem}
.ficha__mover button{
  background:none; border:0; color:var(--meta); cursor:pointer;
  padding:.1rem .3rem; border-radius:4px; font-size:.8rem; line-height:1;
}
.ficha__mover button:hover{background:var(--cova); color:var(--texto)}
.ficha__mover button[disabled]{opacity:.3; cursor:default}

.tag{
  display:inline-flex; align-items:center; border:1px solid var(--linha);
  border-radius:5px; padding:.12rem .38rem; font-weight:600; font-size:.66rem;
  letter-spacing:.05em; text-transform:uppercase; color:var(--meta); white-space:nowrap;
}
.tag--cliente{border-style:dashed}

.estado{
  display:inline-flex; align-items:center; gap:.3rem; border-radius:5px;
  padding:.12rem .4rem; font-weight:700; font-size:.66rem; letter-spacing:.05em;
  text-transform:uppercase; white-space:nowrap;
}
.estado svg{width:9px; height:9px; flex:none}
.estado--ok{background:var(--ok-fundo); color:var(--ok)}      .estado--ok svg{fill:var(--ok)}
.estado--aviso{background:var(--aviso-fundo); color:var(--aviso)} .estado--aviso svg{fill:var(--aviso)}
.estado--risco{background:var(--risco-fundo); color:var(--risco)} .estado--risco svg{fill:var(--risco)}

/* --------------------------------------------------------------- tabela -- */
.rolo{overflow-x:auto; border:1px solid var(--linha); border-radius:var(--raio)}
table{border-collapse:collapse; width:100%; min-width:560px; background:var(--superficie)}
caption{
  text-align:left; padding:.9rem 1rem .1rem; font-weight:600; font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--meta);
}
th,td{text-align:left; padding:.72rem .95rem; border-bottom:1px solid var(--linha); font-size:.88rem}
th{
  font-weight:600; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--meta); background:var(--cova); white-space:nowrap;
}
td:first-child{font-weight:700}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{font-variant-numeric:tabular-nums; white-space:nowrap}
tbody tr.clicavel{cursor:pointer}
tbody tr.clicavel:hover{background:var(--cova)}

/* ---------------------------------------------------------------- ficha -- */
.volta{
  display:inline-flex; align-items:center; gap:.4rem; background:none; border:0;
  color:var(--meta); font-weight:600; font-size:.8rem; cursor:pointer;
  padding:.2rem 0; margin-bottom:.5rem;
}
.volta:hover{color:var(--texto)}
.dl{display:grid; gap:.55rem}
.dl div{display:flex; gap:.7rem; align-items:baseline; font-size:.88rem;
  padding-bottom:.55rem; border-bottom:1px solid var(--linha)}
.dl div:last-child{border-bottom:0; padding-bottom:0}
.dl dt{color:var(--meta); min-width:9.5rem; flex:none; font-size:.8rem}
.dl dd{margin:0; font-weight:600}

/* --------------------------------------------------------------- modal --- */
dialog{
  border:1px solid var(--linha); border-radius:var(--raio); padding:0;
  background:var(--superficie); color:var(--texto);
  width:min(100% - 2rem, 460px); box-shadow:var(--sombra);
}
dialog::backdrop{background:rgba(22,24,28,.55)}
dialog form{display:flex; flex-direction:column; gap:.9rem; padding:1.4rem}
dialog h2{font-weight:800; font-size:1.15rem; letter-spacing:-.02em}
.campo{display:flex; flex-direction:column; gap:.3rem}
.campo label{font-weight:600; font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--meta)}
.campo input,.campo select,.campo textarea{
  background:var(--fundo); border:1.5px solid var(--linha); border-radius:8px;
  padding:.55rem .7rem; font-size:.9rem; min-height:40px;
}
.campo input:focus,.campo select:focus{border-color:var(--laranja); outline:0}
.campo small{font-size:.76rem; color:var(--meta)}
.modal__pe{display:flex; gap:.5rem; justify-content:flex-end; margin-top:.3rem}

.dica{
  margin:.7rem .15rem 0; font-size:.78rem; color:var(--meta);
  display:flex; align-items:center; gap:.4rem;
}
.dica svg{height:11px; width:auto; aspect-ratio:var(--faisca); fill:var(--laranja); flex:none}

.nota{font-size:.84rem; color:var(--meta); line-height:1.5; max-width:74ch}
.sep{margin-top:1.6rem}

@media (prefers-reduced-motion: reduce){*{transition:none !important; animation:none !important}}

/* ----------------------------------------------------------- cronómetro -- */
.crono{
  border:1.5px solid var(--laranja); border-radius:10px;
  padding:.75rem .8rem .8rem; display:flex; flex-direction:column; gap:.15rem;
}
.crono__t{font-weight:700; font-size:.85rem; line-height:1.25}
.crono__c{font-size:.75rem; color:var(--meta)}
.crono__r{
  font-weight:800; font-size:1.5rem; letter-spacing:-.02em; line-height:1.1;
  font-variant-numeric:tabular-nums; margin-top:.2rem;
}
.crono__b{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.55rem}
.btn--crono{background:var(--laranja); border-color:var(--laranja); color:var(--tinta)}
.btn--crono:hover{background:var(--laranja-escuro); border-color:var(--laranja-escuro)}
.ficha__pe .btn--min{margin-left:.1rem}
[data-crono-tempo]{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------- ligação --- */
.ligacao{
  display:flex; align-items:center; flex-wrap:wrap; gap:.4rem;
  font-size:.72rem; color:var(--meta); line-height:1.4;
}
.ligacao__p{width:7px; height:7px; border-radius:999px; background:var(--meta); flex:none}
.ligacao--ligado .ligacao__p{background:var(--ok)}
.ligacao--erro{color:var(--risco)}
.ligacao--erro .ligacao__p{background:var(--risco)}
.ligacao--a-ligar .ligacao__p{background:var(--aviso)}
.ligacao__e{color:var(--risco); font-size:.7rem; flex-basis:100%}

/* --------------------------------------------------------------- aviso --- */
.aviso{
  position:fixed; left:50%; bottom:1.2rem; translate:-50% 0; z-index:40;
  background:var(--tinta); color:#F0EEEB; border-radius:999px;
  padding:.6rem 1.1rem; font-size:.85rem; font-weight:600;
  box-shadow:0 8px 30px rgba(0,0,0,.25); max-width:calc(100% - 2rem);
}

/* -------------------------------------------------------------- entrada -- */
.entrada{
  position:fixed; inset:0; z-index:50; background:var(--fundo);
  display:flex; align-items:center; justify-content:center; padding:1.5rem;
}
.entrada form{
  width:min(100%, 360px); display:flex; flex-direction:column; gap:.9rem;
  background:var(--superficie); border:1px solid var(--linha);
  border-radius:var(--raio); padding:1.8rem 1.6rem;
}
.entrada .marca{margin-bottom:.2rem}
.entrada__erro{font-size:.8rem; color:var(--risco); min-height:1.2em}

/* ------------------------------------------------------------- avatares -- */
/* Quatro matizes por ordem fixa, a repetir a partir do quinto cliente. Passam
   contraste de texto e separação para daltonismo em todos os pares, nos dois
   temas — e nunca aparecem sem o nome do cliente ao lado. */
:root{
  --av1:#1F5FBF;
  --av2:#8A5A00;
  --av3:#00875E;
  --av4:#A03A8F;
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --av1:#4E92E3; --av2:#BC862B; --av3:#2FA684; --av4:#C566AF;
  }
}
:root[data-tema="escuro"]{
  --av1:#4E92E3; --av2:#BC862B; --av3:#2FA684; --av4:#C566AF;
}

.avatar{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:26px; height:26px; border-radius:7px;
  font-weight:700; font-size:.68rem; letter-spacing:.02em; line-height:1;
  color:var(--meta); background:var(--cova); border:1px solid var(--linha);
  overflow:hidden;
}
.avatar--1{color:var(--av1); background:color-mix(in srgb, var(--av1) 12%, var(--superficie)); border-color:color-mix(in srgb, var(--av1) 34%, transparent)}
.avatar--2{color:var(--av2); background:color-mix(in srgb, var(--av2) 12%, var(--superficie)); border-color:color-mix(in srgb, var(--av2) 34%, transparent)}
.avatar--3{color:var(--av3); background:color-mix(in srgb, var(--av3) 12%, var(--superficie)); border-color:color-mix(in srgb, var(--av3) 34%, transparent)}
.avatar--4{color:var(--av4); background:color-mix(in srgb, var(--av4) 12%, var(--superficie)); border-color:color-mix(in srgb, var(--av4) 34%, transparent)}
.avatar--img{background:var(--superficie); padding:2px}
.avatar--img img{width:100%; height:100%; object-fit:contain}

.ficha__cab{display:flex; align-items:flex-start; gap:.5rem}
.ficha__cab .avatar{margin-top:.05rem}
.celula-cliente{display:flex; align-items:center; gap:.6rem}
.titulo-cliente{display:inline-flex; align-items:center; gap:.6rem}
.titulo-cliente .avatar{width:34px; height:34px; border-radius:9px; font-size:.82rem}
.painel__lista .avatar{width:22px; height:22px; border-radius:6px; font-size:.6rem}

/* --------------------------------------------------- tipo de serviço ----- */
.tag--serv{gap:.32rem; padding-left:.3rem}
.tag--serv svg{width:13px; height:13px; flex:none; opacity:.85}

/* ------------------------------------------------------------- plano ----- */
.tag--plano{gap:.35rem; padding-left:.32rem}
.niveis{display:inline-flex; gap:2px; align-items:center}
.niveis i{width:4px; height:4px; border-radius:999px; background:var(--linha); display:block}
.niveis i.on{background:var(--laranja)}

/* botão de ação do cartão: só ícone, alvo de toque inteiro mesmo assim */
.btn--icone{
  min-height:28px; min-width:28px; padding:.25rem .45rem;
  font-size:.72rem; font-weight:700; line-height:1;
  display:inline-flex; align-items:center; gap:.3rem;
}
.btn--icone[data-crono="parar"]{padding-right:.55rem}
.ficha__pe{gap:.3rem}
.ficha__pe > span:first-of-type{margin-right:auto}

/* ------------------------------------------------------- marca do cliente */
/* O logótipo entra como bloco próprio, com largura livre: duas letras num
   quadrado davam para distinguir, não para ler. */
.marca-cli{display:block; width:auto; flex:none}
.marca-cli--img{object-fit:contain; max-width:170px}
.tom--1{color:var(--av1)}
.tom--2{color:var(--av2)}
.tom--3{color:var(--av3)}
.tom--4{color:var(--av4)}
.ficha__marca{padding-bottom:.1rem}
.celula-cliente{display:flex; flex-direction:column; align-items:flex-start; gap:.3rem}
.marca-bloco{padding:.2rem 0 .9rem}
.painel__lista .marca-cli{margin-right:.15rem}

/* ------------------------------------------------------------ vista mês -- */
.mes__nav{display:flex; align-items:center; gap:.5rem}
.mes__nome{font-weight:700; font-size:.95rem; min-width:9.5rem; text-align:center}
.capacidade{
  display:flex; gap:2px; height:30px; border-radius:6px; overflow:hidden;
  background:var(--cova); border:1px solid var(--linha);
}
.capacidade i{display:block; height:100%}
.capacidade__folga{background:repeating-linear-gradient(
  45deg, var(--cova), var(--cova) 4px, var(--linha) 4px, var(--linha) 5px)}
.tom--fundo-1{background:var(--av1)}
.tom--fundo-2{background:var(--av2)}
.tom--fundo-3{background:var(--av3)}
.tom--fundo-4{background:var(--av4)}
.capacidade__leg{
  display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; margin-top:.7rem;
  font-size:.82rem; color:var(--meta);
}
.capacidade__leg span{display:inline-flex; align-items:center; gap:.4rem}
.capacidade__leg i{width:11px; height:11px; border-radius:2px; flex:none}
.capacidade__leg b{color:var(--texto); font-variant-numeric:tabular-nums}
/* Quadrada quando leva um visto, larga quando leva uma contagem: a célula dos
   posts mete cá dentro "0/12" e os 28px fixos deixavam o número a transbordar. */
.caixa{
  min-width:28px; height:28px; padding:0 .4rem; border-radius:7px; cursor:pointer;
  border:1.5px solid var(--linha); background:transparent; color:var(--meta);
  font-weight:700; font-size:.72rem; line-height:1;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.caixa:hover:not([disabled]){border-color:var(--texto); color:var(--texto)}
.caixa--feita{background:var(--ok-fundo); border-color:var(--ok); color:var(--ok)}
/* Uma linha fechada distingue-se pelo chão, não por desbotar o texto. Duas
   opacidades sobrepostas — 0,6 da linha vezes 0,45 da caixa — davam 0,27 de
   alfa e punham o visto a 1,5:1, invisível nos dois temas. Pelo mesmo motivo o
   travessão das caixas que o plano não inclui fica com a cor cheia: a 60%
   estava a 2,6:1. */
.caixa[disabled]{cursor:default; border-style:dashed}
.mes__na{color:var(--meta)}
.mes__linha--fechada{background:var(--cova)}
.aviso-linha{
  display:flex; align-items:center; flex-wrap:wrap; gap:.5rem;
  margin-top:1rem; padding:.7rem .85rem; border-radius:8px;
  background:var(--aviso-fundo); color:var(--aviso);
  font-size:.85rem; font-weight:600;
}
.aviso-linha svg{height:12px; width:auto; aspect-ratio:var(--faisca); fill:currentColor; flex:none}

/* ------------------------------------------------------- catálogo ------- */
.plano-cartao{display:flex; flex-direction:column; gap:.7rem}
.plano-cartao h2{
  font-weight:800; font-size:1.15rem; letter-spacing:-.02em;
  text-transform:none; color:var(--texto);
}
.plano-preco{display:flex; flex-direction:column; gap:.1rem; font-size:.85rem; color:var(--meta)}
.plano-preco b{
  font-weight:800; font-size:1.6rem; letter-spacing:-.03em; color:var(--texto);
  font-variant-numeric:tabular-nums; line-height:1.1;
}
.plano-inclui{display:flex; flex-direction:column; gap:.3rem}
.plano-inclui li{
  position:relative; padding-left:1rem; font-size:.85rem; color:var(--meta); line-height:1.45;
}
.plano-inclui li::before{
  content:""; position:absolute; left:0; top:.58em;
  width:5px; height:5px; background:var(--laranja); border-radius:1px;
}
.plano-pe{
  margin-top:auto; padding-top:.8rem; border-top:1px solid var(--linha);
  display:flex; align-items:center; flex-wrap:wrap; gap:.5rem;
  font-size:.82rem; color:var(--meta);
}
.campo textarea{
  background:var(--fundo); border:1.5px solid var(--linha); border-radius:8px;
  padding:.55rem .7rem; font-size:.9rem; font-family:var(--corpo); resize:vertical;
}
.campo textarea:focus{border-color:var(--laranja); outline:0}

/* ===========================================================================
   Telemóvel — iPhone 15 Pro em retrato dá 393 px de largura.

   A regra que manda aqui é uma só: nada obriga a arrastar a página para o
   lado. Isso tira duas coisas de cima da mesa — tabelas largas e quadros
   kanban lado a lado — e obriga-as a mudar de forma em vez de encolher.

   As tabelas viram cartões, uma linha por cartão, com o rótulo da coluna à
   esquerda de cada valor. Os rótulos vêm do data-rot que o app.js põe em cada
   célula: sem cabeçalho de tabela à vista, um valor sozinho não se lê.
   =========================================================================== */

/* Áreas seguras: o entalhe em cima, o indicador em baixo, e as margens
   laterais quando o telefone está deitado. */
.barra{
  padding-top:calc(1.1rem + env(safe-area-inset-top));
  padding-left:calc(1.1rem + env(safe-area-inset-left));
  padding-right:calc(1.1rem + env(safe-area-inset-right));
}
.vista{
  padding-bottom:calc(4rem + env(safe-area-inset-bottom));
  padding-left:calc(clamp(1.1rem,3vw,2.2rem) + env(safe-area-inset-left));
  padding-right:calc(clamp(1.1rem,3vw,2.2rem) + env(safe-area-inset-right));
}
@media (min-width:960px){
  .barra{padding-top:calc(1.6rem + env(safe-area-inset-top))}
}

@media (max-width:760px){
  /* ------------------------------------------------------------ moldura -- */
  .nav{gap:.3rem}
  .nav a{flex:1 1 auto; justify-content:space-between; min-height:44px}
  .marca__txt b{font-size:1rem}

  .vista__topo{gap:.6rem}
  .vista__topo h1{font-size:1.5rem}
  .vista__acoes{margin-left:0; width:100%}
  .vista__acoes .btn{flex:1 1 auto}
  .mes__nav{width:100%; justify-content:space-between}

  /* ------------------------------------------------------------ grelhas -- */
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g2,.g3,.gmod,.gdec{grid-template-columns:minmax(0,1fr)}
  .kpi__v{font-size:1.6rem}

  /* ------------------------------------------------- tabelas em cartões -- */
  .rolo{overflow-x:visible; border:0; border-radius:0}
  /* A tabela sai do modo tabela. Escondida com position:absolute, a linha de
     cabeçalho continuava a mandar na largura intrínseca da tabela e os cartões
     herdavam-na — 594 px dentro de um ecrã de 393. Em display:block não há
     largura de tabela para herdar. */
  table{display:block; width:100%; min-width:0; background:none}
  tbody{display:block; width:100%}
  caption{display:block; padding-left:0}
  thead{display:none}
  tbody tr{
    display:block; margin-bottom:.7rem; padding:.85rem .9rem;
    background:var(--superficie); border:1px solid var(--linha); border-radius:var(--raio);
  }
  tbody tr:last-child{margin-bottom:0}
  tbody td{
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:.4rem 0; border-bottom:1px solid var(--linha); text-align:right;
  }
  tbody td:last-child{border-bottom:0; padding-bottom:0}
  tbody td:first-child{padding-top:0}
  tbody td[data-rot]::before{
    content:attr(data-rot); flex:none; text-align:left;
    font-weight:600; font-size:.68rem; letter-spacing:.12em;
    text-transform:uppercase; color:var(--meta);
  }
  /* Uma célula que só tem um travessão não merece uma linha inteira. */
  .celula-cliente{align-items:flex-start}
  .mes__linha--fechada{background:var(--cova)}

  /* ------------------------------------------------------------- kanban -- */
  /* Empilhado, não lado a lado. Arrastar não funciona em toque nenhum, por
     isso o caminho aqui são as setas de cada cartão — que já existiam. */
  .kanban{grid-auto-flow:row; grid-auto-columns:auto; overflow-x:visible; padding:.9rem 0 0}
  .coluna{min-height:0}
  .coluna__vazio{padding:.7rem .4rem}
  .dica{display:none}

  .filtros{gap:.7rem}
  .contagem{margin-left:0; width:100%}

  /* --------------------------------------------------------- toque ------ */
  /* 44 px é o mínimo que um dedo acerta sem falhar. */
  .caixa{min-width:40px; height:40px}
  .chip{min-height:38px; padding:.5rem .8rem}
  .btn--min,.btn--icone{min-height:36px}
  .ficha__mover button{padding:.4rem .55rem; font-size:1rem}

  /* ------------------------------------------------------- formulários -- */
  /* Abaixo de 16 px o Safari do iPhone amplia a página ao focar o campo, e
     depois não a devolve. */
  .campo input,.campo select,.campo textarea{font-size:16px; min-height:44px}
  dialog{width:calc(100% - 1.6rem)}
  dialog form{
    max-height:calc(85dvh - env(safe-area-inset-bottom)); overflow-y:auto;
    padding:1.2rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom));
  }
  .modal__pe{position:sticky; bottom:0; background:var(--superficie); padding-top:.6rem}

  /* --------------------------------------------------------- capacidade -- */
  .capacidade{height:24px}
  .capacidade__leg{gap:.35rem .9rem; font-size:.78rem}

  /* ----------------------------------------------------------- catálogo -- */
  .plano-preco b{font-size:1.4rem}

  pre{font-size:.74rem}
}

/* Nada, em circunstância nenhuma, empurra a página para o lado. */
html,body{overflow-x:clip}

/* ------------------------------------------------------------- números -- */
/* Sem setas. Num formulário com muitos campos numéricos, o cursor passa por
   cima de um deles a meio de um scroll e o valor muda sem ninguém tocar em
   nada — e nada no ecrã diz que mudou. O bloqueio do scroll está no app.js;
   isto tira os botões, que só servem para o mesmo acidente com um clique. */
input[type="number"]{appearance:textfield; -moz-appearance:textfield}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.sem-acao{color:var(--aviso); font-weight:600}
/* O título de um cartão de negócio é o que o abre para editar. Continua a
   parecer um título — o que muda é o cursor e o sublinhado ao passar. */
.ficha__t--liga{
  background:none; border:0; padding:0; text-align:left; cursor:pointer;
  font:inherit; font-weight:700; font-size:.86rem; line-height:1.25;
  letter-spacing:-.01em; color:inherit;
}
.ficha__t--liga:hover{text-decoration:underline; text-underline-offset:2px}