/* ============================================================================
   HZ STUDIOS · PAINEL · APARENCIA
   ----------------------------------------------------------------------------
   Cores transcritas do :root do index.html do site, lidas em 16/set/2026.
   Se a paleta da marca mudar, muda aqui — nao existe cor escrita fora daqui.

   AS SETE OBRIGACOES DA REGRA P7 vivem nestes estilos:
   titulo grande em toda tela · uma acao principal · nenhum icone sem rotulo ·
   confirmacao que diz o que vai acontecer · mensagem de resultado sempre ·
   um caminho so · o voltar sempre no mesmo lugar.
   ============================================================================ */
:root{
  --bg:#131314; --surface:#161618; --surface-2:#212124; --line:#26262A; --line-2:#1F1F22;
  --white:#F4F6FA; --gray:#A0A0A6; --gray-2:#8C8C92; --gray-3:#7B7B82;
  --lima:#d6fd00; --teal:#4dc6c3; --menta:#4eebcb; --roxo:#9c5fdf;
  --coral:#f18768; --ambar:#fcc86c; --rosa:#f57cb4;
  --azul:#5b9dff; --verde:#5fd38d; --vermelho:#ff6b6b; /* 25/set: as cores da Agenda */
  --papel:#ffffff; --tinta:#1b1b1e; --doc-cinza:#55555c; --doc-cinza-2:#6e6e74; --doc-linha:#d9d9de; --doc-linha-2:#ececf0; /* 02/out: o papel da cobranca (o do recibo) */
  --f-titulo:'Teko',sans-serif;
  --f-texto:'Source Sans 3',system-ui,-apple-system,Segoe UI,sans-serif;
  --r:14px; --r-sm:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--white);font-family:var(--f-texto);font-size:16px;
  line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  min-height:100vh;min-height:100dvh;
}
button,input{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--menta)}

/* ⛔ Teko SO em titulo de tela. Nunca em dado (regra P11). */
h1{font-family:var(--f-titulo);font-weight:600;text-transform:uppercase;
   letter-spacing:.01em;font-size:44px;line-height:.9;margin:0 0 6px}
@media(max-width:420px){ h1{font-size:32px} }

.sub{color:var(--gray);font-size:15.5px;margin:0 0 22px;max-width:60ch}

/* ------------------------------------------------------------------ login */
.entrada{min-height:100vh;min-height:100dvh;display:flex;align-items:center;
         justify-content:center;padding:28px 16px}
.entrada-cx{width:100%;max-width:400px}
.entrada-cx img{height:38px;width:auto;margin-bottom:28px}
/* 25/set, tarde: o logotipo oficial ANIMADO na tela de entrar — copiado do site
   (.logo-svg, animacao "eq": as barras sobem e descem como um equalizador).
   Mesma altura do logotipo de antes. Quem pede menos movimento no aparelho ve
   as barras paradas, inteiras. */
.entrada-logo{height:38px;margin-bottom:28px;display:flex;align-items:center}
.entrada-logo svg{height:100%;width:auto;max-width:100%;display:block}
.entrada-logo .lg-letra{fill:var(--white)}
.entrada-logo .lg-b{transform-box:fill-box;transform-origin:center;animation:eq 1.7s ease-in-out infinite}
.lg-lima{fill:var(--lima)} .lg-teal{fill:var(--teal)} .lg-menta{fill:var(--menta)} .lg-roxo{fill:var(--roxo)}
.lg-coral{fill:var(--coral)} .lg-ambar{fill:var(--ambar)} .lg-rosa{fill:var(--rosa)}
@keyframes eq{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){ .entrada-logo .lg-b{animation:none} }

.campo{margin-bottom:15px}
.campo label{display:block;font-size:14.5px;color:var(--gray);margin-bottom:6px;font-weight:500}
.campo input{
  width:100%;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:14px;outline:none;font-size:16px; /* 16px impede o iPhone de dar zoom */
  min-height:50px;
}
.campo input:focus{border-color:var(--menta)}
.campo input:disabled{opacity:.55}

/* REGRA C8 (03/out): o campo que falta fica vermelho NELE MESMO, em todo o painel
   (marcarFalta em app.js). O !important vence as cores proprias de cada tela
   (.agf-editor, .he-ed...): enquanto falta, o vermelho e o que manda. */
/* 04/out (print dela): o fundo era TRANSPARENTE (vermelho a 12%) e a lista aberta de um
   <select> sai desse fundo sobre BRANCO: ficou rosa-claro com letra branca, ilegivel.
   Fundo do campo vermelho = cor SOLIDA (#3a2528 = o --surface-2 com 12% de vermelho). */
input.falta,select.falta,textarea.falta{
  border-color:var(--vermelho)!important;background-color:#3a2528!important;
  box-shadow:0 0 0 2px rgba(255,107,107,.45)!important}
/* com o cursor nele, o anel do foco tambem e vermelho (verde por fora do vermelho confundia) */
input.falta:focus,select.falta:focus,textarea.falta:focus,.falta:focus-visible{outline-color:var(--vermelho)!important}
.falta:not(input):not(select):not(textarea){
  outline:2px solid var(--vermelho);outline-offset:3px;border-radius:var(--r-sm);
  background-color:rgba(255,107,107,.07)}
.falta-frase{display:flex;align-items:flex-start;gap:6px;margin:6px 0 0;
  color:#ff9b9b;font-size:14.5px;font-weight:600;line-height:1.35}
.falta-frase svg{width:17px;height:17px;flex:none;margin-top:1px;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:99px;padding:13px 24px;font-weight:600;font-size:15.5px;
  cursor:pointer;border:1px solid transparent;min-height:50px;
}
.btn:disabled{cursor:default;opacity:.6}
.btn-principal{background:var(--menta);color:#0E0E10}
.btn-principal:not(:disabled):hover{background:#6df3d8}
.btn-calmo{background:var(--surface-2);border-color:var(--line);color:var(--white)}
.btn-calmo:not(:disabled):hover{border-color:var(--gray-3)}
.largo{width:100%}

/* --------------------------------------------------------------- recados */
/* Todo estado aparece: carregando, deu certo, deu errado (regra P10). */
.recado{
  border-radius:var(--r-sm);padding:13px 15px;margin:16px 0 0;font-size:15px;
  display:flex;gap:11px;align-items:flex-start;line-height:1.5;
}
.recado svg{width:19px;height:19px;flex:none;margin-top:2px;
            stroke:currentColor;fill:none;stroke-width:1.7;
            stroke-linecap:round;stroke-linejoin:round}
.r-erro{background:rgba(241,135,104,.1);border:1px solid rgba(241,135,104,.35);color:#f7c0ad}
.r-ok{background:rgba(78,235,203,.09);border:1px solid rgba(78,235,203,.3);color:#a8f2e2}
.r-neutro{background:var(--surface-2);border:1px solid var(--line);color:var(--gray)}
.recado b{color:#fff;font-weight:600}

/* --------------------------------------------------------- girando/espera */
.girando{
  width:17px;height:17px;border:2px solid rgba(14,14,16,.28);
  border-top-color:#0E0E10;border-radius:50%;animation:gira .7s linear infinite;
}
@keyframes gira{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){ .girando{animation-duration:2.4s} }

/* ---------------------------------------------------------------- dentro */
.topo{
  position:sticky;top:0;z-index:40;background:rgba(19,19,20,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
  padding:11px 16px;display:flex;align-items:center;gap:12px;
}
.topo img{height:26px;width:auto;flex:none}
.pilula{
  margin-left:auto;background:var(--surface-2);border:1px solid var(--line);
  border-radius:99px;padding:6px 13px;font-size:12.5px;font-weight:600;
}
.pilula.adm{border-color:var(--roxo);color:#c9a8f3}
.conteudo{padding:24px 16px 60px;max-width:900px;margin:0 auto}
.cartao{background:var(--surface);border:1px solid var(--line);
        border-radius:var(--r);padding:18px;margin-bottom:14px}
.linha{padding:11px 0;border-bottom:1px solid var(--line-2)}
.linha:last-child{border-bottom:0}
.rot{color:var(--gray-2);font-size:14px;display:block;margin-bottom:2px}
.val{font-weight:500}

.esconde{display:none !important}

/* Quem usa teclado precisa enxergar onde esta. */
:focus-visible{outline:2px solid var(--menta);outline-offset:2px;border-radius:4px}

/* ==========================================================================
   CHECKLIST DO STUDIO — desenho pedido pela cliente em 21/set/2026
   --------------------------------------------------------------------------
   Regra do desenho, na ordem em que ela pediu:
     desktop ...... as secoes ficam em COLUNAS LADO A LADO, como na planilha
     tablet/celular  UMA LISTA CONTINUA, rolando ate o fim, com as secoes
                     separadas — e nao uma tabela, que nao cabe em 320px
     item danificado  a LINHA fica VERMELHA, para cobrar do cliente depois
     secao conferida  a SECAO inteira fica VERDE
   ========================================================================== */

/* celular e tablet: uma coluna, lista continua. Desktop: lado a lado. */
.cl-grade{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:900px){
  .cl-grade{grid-template-columns:repeat(auto-fit,minmax(330px,1fr));align-items:start}
}

.cl-secao{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:14px 14px 12px;transition:border-color .15s,background .15s}
.cl-secao.ok{border-color:rgba(78,235,203,.5);background:rgba(78,235,203,.055)}
/* ambar, e nao verde: o ambiente foi conferido, mas achou problema. Verde e
   ambar dizendo a mesma coisa seria o mesmo que nao dizer nada. */
.cl-secao.anotada{border-color:rgba(252,200,108,.5);background:rgba(252,200,108,.05)}

.cl-cab{display:flex;align-items:baseline;gap:9px;margin:0 0 3px}
.cl-num{font-size:13px;color:var(--gray-3);font-variant-numeric:tabular-nums;flex:none}
.cl-nome{font-family:var(--f-titulo);font-size:25px;line-height:1.05;letter-spacing:.3px;
  text-transform:uppercase;margin:0;color:var(--white)}
.cl-conta{font-size:13.5px;color:var(--gray-2);margin:0 0 10px}

/* uma linha por item: letra · nome+quantidade · campo de relato */
.cl-item{padding:9px 8px;margin:0 -8px;border-bottom:1px solid var(--line-2);
  border-left:3px solid transparent;border-radius:var(--r-sm)}
.cl-item:last-of-type{border-bottom:0}
.cl-linha1{display:flex;align-items:baseline;gap:8px}
.cl-letra{font-size:13px;color:var(--gray-3);flex:none;min-width:22px;
  font-variant-numeric:tabular-nums}
.cl-texto{font-size:15.5px;color:var(--white);flex:1}
.cl-qtd{font-size:13px;color:var(--gray-2);flex:none;
  background:var(--surface-2);border-radius:99px;padding:1px 9px;
  font-variant-numeric:tabular-nums}

/* a caixinha de descrever. Alvo alto: ela usa de pe, com o tablet na mao. */
.cl-obs{width:100%;margin-top:7px;min-height:44px;padding:10px 12px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--white);font:inherit;font-size:16px;resize:vertical}
.cl-obs::placeholder{color:var(--gray-3)}
.cl-obs:focus{border-color:var(--menta);outline:none}

/* DANIFICADO: a linha inteira fica vermelha */
.cl-item.ruim{background:rgba(241,135,104,.11);border-left-color:var(--coral)}
.cl-item.ruim .cl-texto{color:#f7c0ad;font-weight:600}
.cl-item.ruim .cl-obs{border-color:rgba(241,135,104,.5)}

/* o fecho da secao */
.cl-fecho{display:flex;align-items:center;gap:11px;margin-top:12px;padding:12px;
  min-height:50px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);cursor:pointer}
.cl-fecho input{width:24px;height:24px;flex:none;accent-color:var(--menta);cursor:pointer}
.cl-fecho span{font-size:15px;color:var(--gray)}
.cl-secao.ok .cl-fecho{background:rgba(78,235,203,.1);border-color:rgba(78,235,203,.4)}
.cl-secao.ok .cl-fecho span{color:#a8f2e2;font-weight:600}
.cl-secao.anotada .cl-fecho{background:rgba(252,200,108,.09);border-color:rgba(252,200,108,.35)}
.cl-secao.anotada .cl-fecho span{color:var(--ambar);font-weight:600}
.cl-fecho.travado{opacity:.62;cursor:not-allowed}
.cl-fecho.travado input{cursor:not-allowed}

/* barra de andamento, para ela saber onde esta e quanto falta */
.cl-andamento{position:sticky;top:0;z-index:5;background:var(--bg);
  padding:11px 0 13px;border-bottom:1px solid var(--line);margin-bottom:16px}
.cl-barra{height:9px;background:var(--surface-2);border-radius:99px;overflow:hidden}
.cl-barra i{display:block;height:100%;width:0;background:var(--menta);
  transition:width .2s;border-radius:99px}
.cl-resumo{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14.5px;margin-bottom:8px}
.cl-resumo b{color:var(--white)}
.cl-resumo .mau{color:#f7c0ad}
.cl-resumo .bom{color:#a8f2e2}

/* ==========================================================================
   A CASCA DO APLICATIVO — 21/set/2026
   --------------------------------------------------------------------------
   Pedido da cliente: "uma guia na vertical com todas essas secoes, para ela
   conseguir escolher em qual entrar com mais facilidade... igual como se fosse
   um aplicativo".

   BASEADO EM MATERIAL REAL, nao em memoria:
     · Material Design 3 (navigation rail / navigation drawer): a barra corre
       VERTICAL na lateral e fica FIXA quando a pagina rola; no celular ela
       vira gaveta que desliza.
     · Carbon (IBM): cabecalho global sempre presente + barra lateral.
     · Atlassian (side navigation): itens AGRUPADOS, com divisor e rotulo de
       grupo, para dar hierarquia sem submenu escondido.

   ATOMIC DESIGN (Brad Frost) — como isto esta organizado:
     atomos ...... as variaveis de cor e tipo no :root, .btn, .pilula, .ic
     moleculas ... .nav-item (icone + rotulo + estado), .linha (rotulo + valor)
     organismos .. .nav (a barra inteira), .topo (o cabecalho), .cl-secao
     template .... .app (a grade: barra + corpo)
     paginas ..... cada <main id="v-...">
   ========================================================================== */

/* ---------- TEMPLATE: a grade ---------- */
.app{min-height:100vh;min-height:100dvh}
.painel-corpo{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}

@media (min-width:900px){
  .app{display:grid;grid-template-columns:252px 1fr}
  .painel-corpo{min-height:100vh}
}

/* ---------- ORGANISMO: a barra lateral ---------- */
.nav{
  background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:2px;padding:16px 12px 20px;
  overflow-y:auto
}
.nav-marca{display:flex;align-items:center;gap:10px;padding:2px 8px 16px}
.nav-marca img{height:24px;width:auto}

/* rotulo de grupo (Atlassian: agrupar da hierarquia sem esconder nada) */
.nav-grupo{
  font-size:11.5px;letter-spacing:.9px;text-transform:uppercase;
  color:var(--gray-3);font-weight:600;padding:16px 10px 6px;
  border-top:1px solid var(--line-2);margin-top:6px
}
.nav-grupo:first-of-type{border-top:0;margin-top:0;padding-top:4px}

/* ---------- MOLECULA: o item de menu ---------- */
.nav-item{
  display:flex;align-items:center;gap:11px;width:100%;
  min-height:46px;padding:9px 10px;border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--gray);font:inherit;font-size:15.5px;
  text-align:left;cursor:pointer;text-decoration:none
}
.nav-item:hover{background:var(--surface-2);color:var(--white)}
.nav-item[aria-current="page"]{background:rgba(78,235,203,.12);color:#a8f2e2;font-weight:600}
/* 25/set, tarde: os icones sao DESENHO DE CONTORNO. Ate aqui faltava o
   contorno (stroke) e o navegador os pintava CHEIOS DE PRETO — quase
   invisiveis no fundo escuro, desde a V1. E, a pedido dela, cada GRUPO do menu
   ganha uma cor da paleta (contraste medido sobre a barra e sobre o item
   aberto, que tem fundo menta: lima 15,4/12,2 · coral 7,2/5,7 · teal 8,8/6,9 ·
   roxo 4,4/3,5 — o minimo para desenho e 3). O item aberto continua se
   destacando pelo fundo e pela letra. O Doctor (prova de vida) mede. */
.nav-ic{width:20px;height:20px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;font-size:16px;
  stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--gray)}
.nav-g-dia ~ .nav-item .nav-ic{color:var(--lima)}
.nav-g-studio ~ .nav-item .nav-ic{color:var(--coral)}
.nav-g-cuidados ~ .nav-item .nav-ic{color:var(--teal)}
.nav-g-adm ~ .nav-item .nav-ic{color:var(--roxo)}
.nav-g-conta ~ .nav-item .nav-ic{color:var(--gray)}
.nav-item[aria-current="page"] .nav-ic{stroke-width:2.2}
.nav-rotulo{flex:1}
.nav-tag{
  font-size:11px;letter-spacing:.3px;text-transform:uppercase;flex:none;
  color:var(--gray-3);background:var(--surface-2);border-radius:99px;padding:2px 7px
}

/* ---------- O PIN DE EXCLUSAO (dentro do Registro de alteracoes) ----------
   Caixa com borda propria: e a unica coisa nesta tela que ESCREVE em vez de
   so mostrar, e ela precisa se distinguir do resto de relance. */
.pin-caixa{
  background:var(--surface);border:1px solid rgba(252,200,108,.35);
  border-radius:var(--r);padding:16px;margin:4px 0 26px
}
.pin-tit{
  font-family:var(--f-titulo);font-size:26px;line-height:1.05;letter-spacing:.3px;
  text-transform:uppercase;color:var(--ambar);margin:0 0 6px
}
/* 24/set, noite: a lixeira no ALTO do Registro, em caixa propria (menta = voltar) */
.lx-caixa{background:var(--surface);border:1px solid rgba(78,235,203,.4);
  border-radius:var(--r);padding:16px;margin:4px 0 22px}
.lx-caixa .recado{margin-top:0}
.lx-tit{font-family:var(--f-titulo);font-size:26px;line-height:1.05;letter-spacing:.3px;
  text-transform:uppercase;color:var(--menta);margin:0 0 6px}
.pin-sub{font-size:14.5px;line-height:1.5;color:var(--gray);margin:0 0 14px}

/* ---------- ETAPA 2D: o registro POR ASSUNTO, com desfazer ----------
   24/set, noite: nasceu em colunas lado a lado. 25/set, pedido dela: uma
   CAIXA DE SELECAO — escolhe o assunto, OK, aparece so ele. No computador os
   cartoes do assunto se arrumam em grade; no celular, um embaixo do outro. */
#v-registro.conteudo{max-width:1360px}
.rg-caixa{background:var(--surface);border:1px solid rgba(156,95,223,.45);
  border-radius:var(--r);padding:16px;margin:4px 0 26px}
.rg-tit{font-family:var(--f-titulo);font-size:26px;line-height:1.05;letter-spacing:.3px;
  text-transform:uppercase;color:#c9a8f3;margin:0 0 6px}
.rg-filtros{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) auto;gap:12px;
  align-items:end;margin-bottom:12px}
.rg-filtros .campo{margin:0;min-width:0}
.rg-filtros input[type="date"]{color-scheme:dark}
.rg-filtros input,.rg-filtros select{width:100%;min-width:0}
.rg-filtros .btn{min-height:48px;min-width:88px}
@media (max-width:719px){
  .rg-filtros{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .rg-filtros .rg-assunto,.rg-filtros .btn{grid-column:1 / -1}
}
.rg-lista{display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:900px){ .rg-lista{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));align-items:start} }
.rg-h{font:700 17px/1.2 var(--f-texto);margin:4px 0 2px;color:var(--white)}
.rg-resumo{font-size:13.5px;color:var(--gray-2);margin:0 0 10px}
.rg-lista .cartao{padding:14px;margin:0}
.rg-card p{margin:0 0 6px;font-size:14.5px;line-height:1.45;overflow-wrap:anywhere}
.rg-card .rg-rotulo{font-weight:700;color:var(--white)}
.rg-card .rg-oque b{color:var(--white)}
.rg-card .rg-antes{color:var(--gray-2);text-decoration:line-through}
.rg-card .rg-meta{font-size:13px;color:var(--gray-2)}
.rg-card .rg-motivo{font-size:13px;color:var(--gray-3);margin-top:8px}
.rg-card .rg-selo{display:inline-block;font-size:12px;font-weight:600;border-radius:99px;padding:2px 9px;
  border:1px solid var(--line);color:var(--gray);margin:0 6px 6px 0}
.rg-card .rg-selo.desfeita{border-color:rgba(78,235,203,.5);color:var(--menta)}
.rg-card.desfeita{opacity:.72}
.rg-card .btn{margin-top:8px}
.rg-pin-caixa{border-top:1px solid var(--line);margin-top:10px;padding-top:8px}
.rg-pin-caixa input{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.42em;font-size:19px;text-align:center}
.pin-sub b{color:var(--white)}
/* o PIN e numero: fonte de largura fixa e espacamento largo, para ela conferir
   digito a digito o que digitou */
.pin-caixa input{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.42em;font-size:19px;text-align:center
}

/* ---------- ETAPA 3: os contatos ----------
   Cartao, e nao tabela: ela le isto no celular, e tabela de 12 colunas em
   320px vira rolagem lateral — o defeito que a regra C2 proibe. */
.ct-barra{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.ct-conta{font-size:13.5px;color:var(--gray-2);flex:1}
.ct-lista{display:flex;flex-direction:column;gap:10px}
.ct-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:14px
}
.ct-topo{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:7px}
.ct-nome{font-size:17px;font-weight:600;color:var(--white)}
.ct-quando{font-size:12.5px;color:var(--gray-3);margin-left:auto}
.ct-selo{
  font-size:10.5px;letter-spacing:.4px;text-transform:uppercase;font-weight:700;
  padding:3px 8px;border-radius:99px;
  background:rgba(78,235,203,.14);color:#a8f2e2
}
.ct-dados{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13.5px;color:var(--gray-2);
  margin-bottom:4px}
.ct-dados b{color:var(--white);font-weight:600}
.ct-dado{color:var(--gray);word-break:break-word}
.ct-msg{
  font-size:14px;line-height:1.5;color:var(--gray);margin:8px 0 0;
  padding-top:8px;border-top:1px solid var(--line-2);word-break:break-word
}

/* ---------- ETAPA 4: a ficha do contato e o WhatsApp ----------
   A ficha abre DENTRO do cartao, e nao numa tela nova: no celular, tela nova
   precisa de um "voltar", e voltar de uma lista rolada devolve a pessoa para o
   topo — ela perde onde estava (regra C1). */
.ct-abrir{
  margin-top:10px;min-height:44px;width:100%;background:transparent;
  border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--menta);font:inherit;font-size:14px;font-weight:600;cursor:pointer
}
.ct-abrir:hover{background:var(--surface-2)}

.ct-ficha{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.ct-linhas{display:flex;flex-direction:column;gap:1px;margin-bottom:12px}
.ct-linha{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 0;border-bottom:1px solid var(--line-2);font-size:14.5px
}
.ct-linha:last-child{border-bottom:0}
.ct-rot{
  flex:none;min-width:150px;font-size:11.5px;letter-spacing:.5px;
  text-transform:uppercase;color:var(--gray-3);font-weight:600
}
@media (max-width:519px){ .ct-rot{min-width:100%} }
.ct-val{flex:1;color:var(--white);word-break:break-word;min-width:120px}

/* Copiar existe porque o dedo dela nao seleciona texto num cartao sem pegar o
   cartao junto — e porque copiar a mao e onde nasce o digito trocado. */
/* 22/set: era 36px — abaixo do minimo de 44px da regra C2. O Doctor nao via
   porque so media o alvo de toque com a ficha FECHADA. Agora mede aberta. */
.ct-copiar{
  flex:none;min-height:44px;padding:0 15px;border-radius:99px;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--gray);
  font:inherit;font-size:12.5px;font-weight:600
}
.ct-copiar:hover{background:var(--surface-2);color:var(--white)}

.ct-inteira{
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:12px;margin-bottom:12px
}
.ct-inteira .ct-rot{min-width:0;display:block;margin-bottom:6px}
.ct-msg-cheia{
  margin:0 0 10px;font-size:14.5px;line-height:1.55;color:var(--gray);
  white-space:pre-wrap;word-break:break-word
}
.ct-copiado{margin:0 0 10px;font-size:13.5px}
.ct-copiado.bom{color:var(--menta)}
.ct-copiado.mau{color:var(--coral)}
.ct-zap{text-decoration:none}
.ct-semzap{
  margin:0;font-size:13.5px;line-height:1.5;color:var(--ambar);
  background:rgba(252,200,108,.07);border:1px solid rgba(252,200,108,.3);
  border-radius:var(--r-sm);padding:11px 12px
}
.ct-semzap b{color:var(--white)}

/* ---------- ETAPA 5: situacao, anotacoes e arquivo ----------
   Tablet na mao, em pe: os botoes de situacao tem 52px, acima do minimo de
   44px (regra C2 — "nas telas de campo, mais folgado"). O estado atual e dito
   em TEXTO (o proprio nome da situacao) e reforcado por cor — cor sozinha nao
   diz nada a quem nao distingue verde de ambar. */
/* 2 botoes para a executiva, 3 para a administracao ("Pedidos para apagar").
   FLEX que quebra linha, e NAO grid auto-fit: medido em 22/set, a grade
   `repeat(auto-fit,minmax(130px,1fr))` dentro do molde do painel pedia a
   largura MINIMA das 3 colunas juntas (406px) e empurrava a tela da
   administracao 118px para o lado em 320px. O flex pede so a do maior botao. */
.ct-vista{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;max-width:640px}
.ct-vista-btn{flex:1 1 130px;
  min-height:48px;border-radius:var(--r-sm);cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--gray);
  font:inherit;font-size:15px;font-weight:600
}
.ct-vista-btn[aria-pressed="true"]{
  background:rgba(78,235,203,.1);border-color:var(--menta);color:var(--white)
}

.ct-sit{
  font-size:11px;letter-spacing:.4px;text-transform:uppercase;font-weight:700;
  padding:3px 9px;border-radius:99px;border:1px solid transparent
}
.s-nova{background:rgba(214,253,0,.1);color:var(--lima)}
.s-em_conversa{background:rgba(252,200,108,.12);color:var(--ambar)}
.s-fechada{background:rgba(78,235,203,.12);color:var(--menta)}
.s-perdida{background:rgba(160,160,166,.12);color:var(--gray)}

.ct-bloco{margin:0 0 16px}
.ct-rot-bloco{display:block;min-width:0;margin:0 0 8px}
.ct-sits{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (max-width:519px){ .ct-sits{grid-template-columns:1fr 1fr} }
.ct-sit-btn{
  min-height:52px;padding:6px 8px;border-radius:var(--r-sm);cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--gray);
  font:inherit;font-size:15px;font-weight:600;line-height:1.2
}
.ct-sit-btn[aria-pressed="true"]{border-width:2px;color:var(--white)}
.ct-sit-btn[aria-pressed="true"]::before{content:"✓ "}
.ct-sit-btn.s-nova[aria-pressed="true"]{border-color:var(--lima)}
.ct-sit-btn.s-em_conversa[aria-pressed="true"]{border-color:var(--ambar)}
.ct-sit-btn.s-fechada[aria-pressed="true"]{border-color:var(--menta)}
.ct-sit-btn.s-perdida[aria-pressed="true"]{border-color:var(--gray)}
.ct-sit-btn:disabled{opacity:.6;cursor:default}

.ct-aviso{margin:8px 0 0;font-size:14px;line-height:1.5}
.ct-aviso.bom{color:var(--menta)}
.ct-aviso.mau{color:var(--coral)}
.ct-aviso.neutro{color:var(--gray)}

.ct-notas{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.ct-notas-lista{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}
.ct-notas-vazio{margin:0;font-size:14px;color:var(--gray-3)}
.ct-notas-vazio.mau{color:var(--coral)}
.ct-nota{
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:10px 12px
}
.ct-nota-texto{margin:0 0 4px;font-size:14.5px;line-height:1.55;color:var(--white);
  white-space:pre-wrap;word-break:break-word}
.ct-nota-meta{margin:0;font-size:12.5px;color:var(--gray-3);word-break:break-word}
.ct-nota-campo{
  display:block;width:100%;min-height:96px;margin:0 0 10px;padding:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--white);font:inherit;font-size:16px;line-height:1.5;resize:vertical
}
.ct-nota-campo:focus{outline:none;border-color:var(--menta)}
.ct-nota-campo:disabled{opacity:.6}

.ct-arq{border-top:1px solid var(--line);padding-top:14px;margin:14px 0 0}

/* Pedir para apagar (22/set). Coral, e nao vermelho de erro: e um pedido,
   nao um defeito — mas tem de saltar aos olhos da administracao. */
.ct-selo-apagar{background:rgba(241,135,104,.14);color:var(--coral)}
.ct-pedido{border-top:1px dashed var(--line);margin-top:14px;padding-top:14px}
.ct-pedido-feito{margin:0 0 8px;font-size:14px;line-height:1.5;color:var(--coral);word-break:break-word}
.ct-pedido-feito b{color:var(--white);font-weight:600}
.ct-pedido .ct-arq-ajuda{margin:0 0 10px}
.ct-pedido .btn + .ct-arq-ajuda{margin:8px 0 0}

/* ETAPA 6 · CADASTRAR CONTATO A MAO (so a administracao). O formulario abre no
   lugar, acima da lista. As opcoes "como chegou" e "qual studio" sao botoes e
   nao lista suspensa: escolher de uma lista aberta e UM toque (regra C2). */
.ct-novo-abrir{margin:0 0 16px;max-width:640px}
.ct-novo{
  max-width:640px;margin:0 0 20px;padding:18px 16px;
  background:var(--surface);border:1px solid var(--menta);border-radius:var(--r)
}
.ct-novo-titulo{margin:0 0 4px;font-size:19px;font-weight:700;color:var(--white)}
.ct-novo > .ct-arq-ajuda{margin:0 0 16px}
.ct-novo .ct-nota-campo{margin:0}
.cn-rot{display:block;font-size:14.5px;color:var(--gray);margin-bottom:6px;font-weight:500}
.cn-opcoes{display:flex;flex-wrap:wrap;gap:8px}
.cn-op{flex:1 1 130px;
  min-height:52px;padding:6px 10px;border-radius:var(--r-sm);cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--gray);
  font:inherit;font-size:15px;font-weight:600;line-height:1.2
}
.cn-op[aria-pressed="true"]{border:2px solid var(--menta);color:var(--white);background:rgba(78,235,203,.08)}
.cn-op[aria-pressed="true"]::before{content:"✓ "}
.cn-op:disabled{opacity:.6;cursor:default}
.cn-dica{margin:-6px 0 15px}
.cn-aceite{margin:4px 0 14px}
.cn-fechar{margin-top:10px}
.ct-selo-mao{background:rgba(160,160,166,.12);color:var(--gray)}
.ct-arq-ajuda{margin:8px 0 0;font-size:13.5px;color:var(--gray-3);line-height:1.5}

/* ---------- ETAPA 11: a copia de seguranca ----------
   Cartao por conjunto, e nao tabela: o cartao diz o NOME, o que tem dentro e
   quantas linhas vao vir, antes de ela clicar. Botao que nao diz o que faz e
   botao que ela nao usa. */
.bk-cartoes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
@media (max-width:719px){ .bk-cartoes{grid-template-columns:1fr} }
.bk-item{
  display:flex;flex-direction:column;gap:5px;text-align:left;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:14px;min-height:44px;cursor:pointer;
  color:var(--gray);font:inherit
}
.bk-item:not(:disabled):hover{border-color:var(--menta);background:var(--surface-2)}
.bk-item:disabled{opacity:.55;cursor:default}
.bk-nome{font-size:16px;font-weight:600;color:var(--white)}
.bk-desc{font-size:13.5px;line-height:1.45;color:var(--gray-2)}
.bk-conta{
  font-size:12px;letter-spacing:.4px;text-transform:uppercase;font-weight:700;
  color:var(--menta);margin-top:3px
}
.bk-nota{font-size:13.5px;line-height:1.5;color:var(--gray-2);margin:14px 0 0}

/* ---------- ETAPA 2C: o botao de apagar o rascunho devolvido ----------
   Mora dentro do recado, e nao solto na tela: so faz sentido enquanto o aviso
   "trouxe de volta o que voce preencheu" estiver ali. Alvo de 44px (C2). */
.rasc-limpar{
  display:inline-flex;align-items:center;min-height:44px;margin-top:9px;
  padding:0 16px;border-radius:99px;cursor:pointer;
  background:transparent;border:1px solid var(--line);
  color:var(--gray);font:inherit;font-size:14px;font-weight:600
}
.rasc-limpar:hover{background:var(--surface-2);color:var(--white)}

/* ---------- CHECKLIST DA PRODUCAO (dentro de "Checklist padrao") ----------
   Lista para LER, e nao para marcar: ela pede estas seis coisas ao cliente.
   Marcar aqui implicaria gravar por cliente, e isso ainda nao existe — botao
   que parece guardar e nao guarda e o defeito mais caro que existe (C1).
   -------------------------------------------------------------------------- */
.prod-tit{
  font-family:var(--f-titulo);font-size:30px;line-height:1.05;letter-spacing:.3px;
  text-transform:uppercase;color:var(--white);margin:28px 0 6px;
  padding-top:22px;border-top:1px solid var(--line)
}
.prod-lista{list-style:none;margin:14px 0 0;padding:0;display:flex;
  flex-direction:column;gap:9px;counter-reset:none}
.prod-lista li{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:12px 13px;
  font-size:15px;line-height:1.5;color:var(--gray)
}
.prod-lista li b{color:var(--white);font-weight:600}
.prod-n{
  flex:none;width:26px;height:26px;border-radius:99px;
  background:rgba(78,235,203,.14);color:#a8f2e2;
  font-size:13px;font-weight:700;display:flex;align-items:center;
  justify-content:center;margin-top:1px
}

.prod-avisos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
@media (max-width:719px){ .prod-avisos{grid-template-columns:1fr} }
.prod-card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:13px 14px}
.prod-card h3{font-size:15.5px;margin:0 0 5px;font-weight:600}
.prod-card p{margin:0;font-size:14.5px;line-height:1.5;color:var(--gray)}
.prod-card.c-ambar{border-color:rgba(252,200,108,.4);background:rgba(252,200,108,.05)}
.prod-card.c-ambar h3{color:var(--ambar)}
.prod-card.c-coral{border-color:rgba(241,135,104,.4);background:rgba(241,135,104,.05)}
.prod-card.c-coral h3{color:var(--coral)}

/* ---------- ETAPA 2B: a locacao que a conferencia identifica ---------------
   Tres campos lado a lado no computador; um embaixo do outro no celular, que
   e onde ela preenche de verdade, andando pelo studio com o tablet.
   -------------------------------------------------------------------------- */
.cl-locacao{
  display:grid;grid-template-columns:2fr 1fr;gap:12px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:14px 14px 2px;margin-bottom:16px
}
@media (max-width:719px){ .cl-locacao{grid-template-columns:1fr} }
/* 24/set: o cliente virou LISTA PARA ESCOLHER (regra H4) · 25/set (7B): a lista
   e das LOCACOES; o cliente e as diarias aparecem embaixo, vindos dela. */
.cl-ajuda{margin:6px 0 10px;font-size:13.5px;line-height:1.4;color:var(--gray)}
.cl-ajuda:empty{display:none}
#btn-cl-locacoes{margin:0 0 12px}
.cl-loc-info{grid-column:1 / -1;order:3;margin:0 0 12px;padding:10px 12px;border-radius:var(--r-sm);
  border-left:4px solid var(--verde);background:var(--surface-2);font-size:14.5px;line-height:1.5}
.cl-loc-info.cl-loc-atrasado{border-left-color:var(--vermelho)}
.ck-alerta{color:var(--vermelho)}
/* so o studio locado abre: sem locacao esperando, a lista de itens nao aparece */
.cl-fechado .cl-andamento, .cl-fechado #cl-grade, .cl-fechado #btn-salvar-cl,
.cl-fechado .cl-locacao{display:none}
#cl-nenhuma{margin:0 0 16px}
/* 25/set, noite: o que esta guardado no aparelho e NAO e da locacao da tela */
.cl-rasc-lado{margin:0 0 16px}
.cl-rasc-lista{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.cl-rasc-item{border-top:1px solid var(--line);padding-top:10px}
.cl-rasc-item p{margin:0}
.cl-rasc-item .rasc-limpar{margin-right:8px}
/* o "salvo com atraso" em 06 · Historico do studio */
.sv-atrasado{color:var(--vermelho)}
/* o lembrete no Inicio */
.ini-ck{margin:4px 0 18px;padding:14px 16px;border-radius:var(--r);border:1px solid var(--ambar);background:var(--surface)}
.ini-ck-tit{margin:0 0 8px;font-size:18px;font-weight:700;color:var(--ambar)}
.ini-ck-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ini-ck-item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;
  padding:10px 12px;border-radius:var(--r-sm);background:var(--surface-2);border-left:4px solid var(--ambar)}
.ini-ck-item.ini-ck-atrasado{border-left-color:var(--vermelho)}
.ini-ck-txt{margin:0;flex:1 1 260px;font-size:15px;line-height:1.5}
.ini-ck-abrir{min-height:44px;padding:8px 16px;flex:0 0 auto;max-width:100%;white-space:normal;text-align:center}
/* medido pelo Doctor em 25/set: a 320px o botao passava 6px da borda */
@media (max-width:480px){ .ini-ck-abrir{flex:1 1 100%} }
.termo-trava #inicio-checklists{display:none !important}

/* ---------- ETAPA 2B: a tela 06 · Historico do studio ---------- */
.sv-filtros{display:grid;grid-template-columns:2fr 1fr;gap:12px}
@media (max-width:719px){ .sv-filtros{grid-template-columns:1fr} }

.sv-select{
  width:100%;min-height:50px;padding:14px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-sm);color:var(--white);
  font:inherit;font-size:16px
}
.sv-select:focus{border-color:var(--menta);outline:none}
/* 04/out: TODA lista aberta do painel com fundo escuro e letra clara FIXOS — o Windows
   desenha as opcoes com o fundo do campo; campo transparente (vermelho da C8, o amarelo
   do contrato) deixava a lista clara com letra clara. Armadilha 33. */
select option,select optgroup{background-color:var(--surface-2);color:var(--white)}

.sv-lista{display:flex;flex-direction:column;gap:10px}

/* 06/out (banco/33): Historico do studio da adm — as abas e a busca das alteracoes */
.sv-abas{max-width:720px}
.sv-alt-ajuda{margin:0 0 14px;font-size:15px;line-height:1.55;color:var(--gray);max-width:900px}
.sv-alt-ajuda b{color:var(--white)}
.sv-alt-filtros{display:grid;grid-template-columns:2fr 1.2fr 1fr 1fr;gap:12px;align-items:end;margin:0 0 14px}
.sv-alt-filtros .campo{margin-bottom:0}
.sv-alt-filtros .sv-alt-ok{grid-column:1/-1}
@media (max-width:900px){ .sv-alt-filtros{grid-template-columns:1fr 1fr} .sv-alt-filtros .sv-alt-q{grid-column:1/-1} }
@media (max-width:480px){ .sv-alt-filtros{grid-template-columns:1fr} }
.sv-alt-lista{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.sv-alt-topo{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin:0 0 4px;font-size:14px}
.sv-alt-assunto{color:var(--menta);font-weight:700}
.sv-alt-quando{color:var(--gray)}
.sv-alt-rotulo{margin:0 0 8px;font-weight:700;font-size:16px;color:var(--white);overflow-wrap:anywhere}

/* cartao por ficha — e nao tabela. Tabela no celular vira rolagem lateral,
   e rolagem lateral e o defeito que a regra C2 proibe. */
.sv-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:14px
}
.sv-topo{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.sv-tipo{
  font-size:11px;letter-spacing:.6px;text-transform:uppercase;font-weight:700;
  padding:3px 9px;border-radius:99px;background:var(--surface-2);color:var(--gray-2)
}
.sv-card.t-checklist  .sv-tipo{background:rgba(78,235,203,.14);color:#a8f2e2}
.sv-card.t-manutencao .sv-tipo{background:rgba(252,200,108,.14);color:var(--ambar)}
.sv-card.t-compras    .sv-tipo{background:rgba(156,95,223,.16);color:#c9a6f0}
.sv-quando{font-size:12.5px;color:var(--gray-3);margin-left:auto}
.sv-cliente{font-size:17px;font-weight:600;color:var(--white)}
.sv-dados{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;color:var(--gray-2)}
.sv-dados b{color:var(--white);font-weight:600}
.sv-dano{color:var(--coral);font-weight:600}
.sv-texto{
  font-size:14px;line-height:1.5;color:var(--gray);margin:8px 0 0;
  white-space:pre-wrap;word-break:break-word
}
.sv-abrir{
  margin-top:10px;min-height:44px;width:100%;background:transparent;
  border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--menta);font:inherit;font-size:14px;font-weight:600;cursor:pointer
}
.sv-abrir:hover{background:var(--surface-2)}
.sv-itens{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.sv-item{
  display:flex;gap:10px;align-items:flex-start;
  font-size:14px;color:var(--gray);padding:5px 0;border-bottom:1px solid var(--line-2)
}
.sv-item:last-child{border-bottom:0}
.sv-est{
  flex:none;min-width:52px;font-size:10.5px;letter-spacing:.4px;
  text-transform:uppercase;font-weight:700;padding-top:2px;color:var(--gray-3)
}
.sv-item.i-dano  .sv-est{color:var(--coral)}
.sv-item.i-dano  {color:var(--white)}
.sv-item.i-falta .sv-est{color:var(--ambar)}
.sv-item.i-ok    .sv-est{color:var(--menta)}
.sv-obs{display:block;color:var(--coral);font-size:13px;margin-top:2px}
.sv-secao{
  font-size:11px;letter-spacing:.7px;text-transform:uppercase;color:var(--gray-3);
  font-weight:700;padding:10px 0 4px
}
.sv-vazio{
  text-align:center;color:var(--gray-2);font-size:15px;padding:28px 16px;
  background:var(--surface);border:1px dashed var(--line);border-radius:var(--r)
}

/* ---------- MOLECULA: "onde estamos" na lateral ----------------------------
   Pedido da cliente em 21/set: ver, sempre, onde a construcao esta e o que
   falta — sem precisar perguntar e sem abrir documento nenhum.

   Fica no TOPO da barra, antes dos grupos, porque no celular a barra e uma
   gaveta: o que importa tem de estar na primeira dobra, ja visivel quando ela
   abre. Medido em 320x480 — aparece inteiro sem rolar.

   Nenhum icone solto aqui (regra C1): tudo e palavra escrita.
   -------------------------------------------------------------------------- */
.obra{
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:11px 12px 10px;margin:0 2px 4px
}
.obra-tit{
  font-size:11px;letter-spacing:.9px;text-transform:uppercase;
  color:var(--gray-3);font-weight:600;margin-bottom:7px
}
.obra-agora{
  font-size:14.5px;line-height:1.3;color:var(--white);font-weight:600;
  margin-bottom:9px
}
.obra-agora b{color:var(--lima);font-weight:700}

/* a barra de andamento. `aria-hidden` no HTML: quem usa leitor de tela ouve a
   contagem escrita logo abaixo, que diz a mesma coisa em palavra. */
.obra-barra{
  height:5px;border-radius:99px;background:var(--line);overflow:hidden;
  margin-bottom:7px
}
.obra-barra span{display:block;height:100%;border-radius:99px;background:var(--lima)}

.obra-conta{font-size:12.5px;color:var(--gray-2);margin-bottom:2px}

/* alvo de 44px (regra C2) — ela abre isto com o dedo, no celular */
.obra-abrir{
  display:block;width:100%;min-height:44px;margin-top:4px;
  background:transparent;border:0;border-top:1px solid var(--line);
  color:var(--menta);font:inherit;font-size:13px;font-weight:600;
  text-align:left;padding:10px 0 0;cursor:pointer
}
.obra-abrir:hover{color:#a8f2e2}

.obra-lista{list-style:none;margin:8px 0 0;padding:0;display:flex;
  flex-direction:column;gap:1px}
.obra-lista li{
  display:flex;align-items:flex-start;gap:8px;
  font-size:13px;line-height:1.35;color:var(--gray-2);padding:4px 0
}
.obra-n{
  flex:none;min-width:26px;font-size:11px;font-weight:700;letter-spacing:.3px;
  color:var(--gray-3);padding-top:1px
}
.obra-lista li.e-pronta{color:var(--gray-3)}
.obra-lista li.e-pronta .obra-n{color:var(--menta)}
.obra-lista li.e-pronta .obra-nome{text-decoration:line-through;opacity:.75}
.obra-lista li.e-agora{color:var(--white);font-weight:600}
.obra-lista li.e-agora .obra-n{color:var(--lima)}

/* a palavra ao lado do estado — porque marca colorida sozinha nao e rotulo */
.obra-est{
  flex:none;font-size:10px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--gray-3);padding-top:2px
}
.obra-lista li.e-pronta .obra-est{color:var(--menta)}
.obra-lista li.e-agora  .obra-est{color:var(--lima)}

/* ---------- ORGANISMO: o cabecalho, sempre no mesmo lugar (P7) ---------- */
.topo{
  /* 21/set: z-index subiu de 30 para 55. Medido com elementFromPoint: com 30,
     o veu (z 50) ficava POR CIMA do botao do menu — o botao aparecia na tela
     mas quem tocasse nele acertava o veu. Agora o cabecalho fica acima do veu
     (55) e abaixo da gaveta (60), entao o proprio botao fecha o menu. */
  position:sticky;top:0;z-index:55;
  display:flex;align-items:center;gap:12px;
  padding:10px 16px;min-height:58px;
  background:rgba(19,19,20,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)
}
.topo img{height:22px;width:auto;flex:none}
.topo-titulo{flex:1;font-size:16px;font-weight:600;color:var(--white);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn-menu{
  width:46px;height:46px;flex:none;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--white);font-size:20px;line-height:1;cursor:pointer
}
@media (min-width:900px){ .btn-menu{display:none} .topo img{display:none} }

/* ---------- a gaveta, no celular e no tablet ---------- */
@media (max-width:899px){
  .nav{
    position:fixed;inset:0 auto 0 0;width:min(84vw,292px);z-index:60;
    transform:translateX(-102%);transition:transform .22s ease;
    box-shadow:0 0 40px rgba(0,0,0,.5)
  }
  .app.menu-aberto .nav{transform:translateX(0)}
  .veu{
    position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.55);
    opacity:0;pointer-events:none;transition:opacity .22s
  }
  .app.menu-aberto .veu{opacity:1;pointer-events:auto}
}
@media (min-width:900px){ .veu{display:none} }

/* ---------- voltar ao topo (a lista do Travelling tem 277 itens) ---------- */
.ao-topo{
  position:fixed;right:16px;bottom:16px;z-index:40;
  width:52px;height:52px;border-radius:50%;
  background:var(--menta);color:#0E0E10;border:0;font-size:22px;line-height:1;
  box-shadow:0 6px 20px rgba(0,0,0,.45);cursor:pointer;
  opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .2s,transform .2s
}
.ao-topo.aparece{opacity:1;pointer-events:auto;transform:translateY(0)}

/* ---------- PAGINA: uma secao ainda nao construida ---------- */
.emconstrucao{
  border:1px dashed var(--line);border-radius:var(--r);
  padding:22px 18px;background:var(--surface);text-align:left
}
.emconstrucao h2{font-family:var(--f-titulo);font-size:27px;margin:0 0 6px;
  text-transform:uppercase;letter-spacing:.4px}
.emconstrucao .etapa{display:inline-block;font-size:12px;letter-spacing:.5px;
  text-transform:uppercase;color:#c9a8f3;border:1px solid var(--roxo);
  border-radius:99px;padding:3px 10px;margin-bottom:12px}
.emconstrucao ul{margin:12px 0 0;padding-left:20px;color:var(--gray)}
.emconstrucao li{margin:5px 0}

/* ---------- lista de compras: marcar = FALTANDO ---------- */
.co-item{display:block;cursor:pointer}
.co-item .cl-linha1{gap:11px;align-items:center}
.co-marca{width:24px;height:24px;flex:none;accent-color:var(--coral);cursor:pointer}
.co-item.ruim .cl-texto{color:#f7c0ad;font-weight:600}
.ct-corrigir{margin:4px 0 14px}

/* ETAPA 6B · CLIENTES. O cartao e o mesmo dos contatos (.ct-card); aqui so o
   que e dele: a lista de unidades e o selo do que falta conferir. */
.kl-selo-confirmar{background:rgba(252,200,108,.12);color:var(--ambar)}
.kl-unidades{border-top:1px solid var(--line);margin-top:14px;padding-top:14px}
.kl-unidade{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:10px 12px;margin:0 0 10px;font-size:14.5px;line-height:1.5;word-break:break-word}
.kl-unidade b{color:var(--white);font-weight:600}
.kl-fonte{margin:8px 0 0;font-size:12.5px;color:var(--gray-3);word-break:break-word}
.kl-acoes .btn{margin-top:10px}

/* 24/set · TELEFONE, E-MAIL E SITE QUE SE TOCAM. Alvo de toque de 44px (C2)
   mesmo sendo texto: o dedo acerta a linha inteira, nao so as letras. */
.ct-link{display:inline-flex;align-items:center;min-height:44px;color:var(--menta);
  font-weight:600;text-decoration:underline;text-underline-offset:3px;word-break:break-all}
.ct-link:hover{color:var(--white)}

/* 24/set · EXCLUIR CLIENTE (so adm). Contorno coral: chama atencao sem
   competir com a acao principal da tela (C1). O "Excluir de vez" e cheio. */
.btn-perigo{background:transparent;border-color:rgba(241,135,104,.55);color:var(--coral)}
.btn-perigo:not(:disabled):hover{background:rgba(241,135,104,.1)}
.btn-perigo-cheio{background:var(--coral);color:#0E0E10}
.btn-perigo-cheio:not(:disabled):hover{background:#f59c82}
.kl-excluir{border-top:1px solid var(--line);margin-top:16px;padding-top:6px}
.kl-excluir .btn{margin-top:10px}
.kl-excluir-pergunta{margin:12px 0 0;font-size:14.5px;line-height:1.5;color:var(--gray)}
.kl-excluir-pergunta b{color:var(--white)}
.kl-excluir .campo{margin-top:12px}
/* 06/out (banco/34) · EXCLUIR EM TUDO (so adm): o mesmo jeito do cliente, em todo cartao */
.ex-bloco{border-top:1px solid var(--line);margin-top:14px;padding-top:4px}
.ex-bloco .btn{margin-top:10px}
.ex-bloco .ex-abrir{width:100%}
.ex-pergunta{margin:12px 0 0;font-size:14.5px;line-height:1.5;color:var(--gray)}
.ex-pergunta b{color:var(--white)}
.ex-sai{margin:8px 0 0;padding-left:20px;font-size:14.5px;line-height:1.55;color:var(--white)}
.ex-atencao{margin:10px 0 0;font-size:14.5px;line-height:1.5;color:var(--ambar);font-weight:600}
.ex-motivo{margin:12px 0 0;padding:0;border:0;display:flex;flex-direction:column;gap:8px;font-size:14.5px;line-height:1.45;color:var(--gray)}
.ex-motivo legend{padding:0;margin-bottom:6px;color:var(--white);font-weight:600}
.ex-motivo label{display:flex;gap:8px;align-items:flex-start;min-height:44px;cursor:pointer}
.ex-motivo input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--coral)}
.ex-motivo b{color:var(--coral)}
.ex-bloco .campo{margin-top:12px}
.ex-bloco .recado{margin-top:10px}
.ag-datas-lista .ex-bloco{margin-top:6px;border-top:0;padding-top:0}
/* 06/out (banco/35) · CONTRATOS, PARTE 2: o assinado */
/* 06/out: o prefixo e "cas" — "ctr-assin" ja e a area das assinaturas DENTRO do contrato (o PDF) */
.cas{border-top:1px solid var(--line);margin-top:14px;padding-top:4px;display:flex;flex-direction:column;gap:10px}
.cas .btn{margin:0}
.cas a.btn{text-decoration:none}   /* botao que e link: sem sublinhado, como os outros */
.cas-passos,.cas-feito{margin:10px 0 0;font-size:14.5px;line-height:1.5;color:var(--gray)}
.cas-passos b,.cas-feito b{color:var(--white)}
.cas-caixa{display:flex;flex-direction:column;gap:10px}
.cas-lista{margin:4px 0 0;padding-left:20px;font-size:14.5px;line-height:1.55;color:var(--gray)}
.cas-lista b{color:var(--white)}
.he-chip.ctr-assinado{background:rgba(214,253,0,.14);color:var(--lima)}

/* 24/set · O AVISO FIXO do "Checklist antes da diaria". Pedido dela: "bem
   destacado, quase um alerta, com icone piscando". Pisca devagar (1,2 s) e
   PARA para quem pediu menos movimento no aparelho. */
.alerta-fixo{display:flex;gap:14px;align-items:flex-start;margin:4px 0 22px;
  padding:16px 18px;border-radius:var(--r-sm);background:rgba(241,135,104,.13);
  border:2px solid var(--coral);color:#f7c0ad;font-size:15.5px;line-height:1.55}
.alerta-fixo b{color:#fff;font-weight:600}
.alerta-ic{width:32px;height:32px;flex:none;fill:none;stroke:var(--coral);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;animation:pisca 1.2s ease-in-out infinite}
.alerta-tit{display:block;margin-bottom:4px;color:#fff;font-weight:700;font-size:16px;
  letter-spacing:.4px;text-transform:uppercase}
@keyframes pisca{0%,100%{opacity:1}50%{opacity:.2}}
@media(prefers-reduced-motion:reduce){ .alerta-ic{animation:none} }

/* 24/set, noite · TERMO DE USO DO E-MAIL (so a executiva). Enquanto nao
   aceito, o menu mostra so o Inicio — a "segunda tela de entrada". */
.termo-trava .nav-item:not([data-ir="inicio"]), .termo-trava .nav-grupo{display:none !important}
.termo-frase{margin:8px 0 0;font-size:14.5px;line-height:1.5;color:var(--ambar)}
.termo-caixa{background:var(--surface);border:1px solid rgba(252,200,108,.4);border-radius:var(--r);
  padding:16px;margin-top:16px}
.termo-caixa.aceito{border-color:rgba(214,253,0,.55)}
.termo-pede{margin:0 0 12px;font-size:15px;color:var(--gray);line-height:1.5}
.termo-pede b{color:var(--white)}
.termo-marca{display:flex;align-items:center;gap:12px;min-height:52px;cursor:pointer;
  font-size:17px;font-weight:600;color:var(--white)}
/* 20px, o tamanho padrao de caixinha de confirmacao (pedido dela: "ficou
   enorme"). O ALVO DE TOQUE e a linha inteira (o label, 52px): tocar no texto
   tambem marca — e assim que o Doctor mede caixinha dentro de label (C2). */
.termo-marca input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--lima);cursor:pointer}
.termo-cadastro{margin:4px 0 6px}
/* 24/set, noite: o Sigilo dos dados (termo v2), junto dos 3 campos */
.termo-sigilo{margin:14px 0 6px;padding:12px 14px;border-left:3px solid var(--ambar);border-radius:6px;
  background:rgba(252,200,108,.07);font-size:14.5px;line-height:1.55;color:var(--gray)}
.termo-sigilo b{color:var(--white)}
.termo-cadastro input[type="date"]{color-scheme:dark}
.aniversario{margin:4px 0 16px;padding:14px 16px;border-radius:var(--r-sm);font-size:16px;line-height:1.5;
  background:rgba(214,253,0,.1);border:1px solid rgba(214,253,0,.5);color:#eaff8a}
.aniversario b{color:var(--lima)}
.guia{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:0 0 18px}
.guia-tit{font-family:var(--f-titulo);font-size:26px;line-height:1.05;letter-spacing:.3px;
  text-transform:uppercase;color:var(--menta);margin:0 0 8px}
.guia-lista{margin:0;padding:0 0 0 18px;display:grid;gap:6px;font-size:15px;line-height:1.5;color:var(--gray)}
@media (min-width:900px){ .guia-lista{grid-template-columns:1fr 1fr;column-gap:28px} }
.guia-lista b{color:var(--white)}
.termo-marca input:disabled{cursor:default}
.termo-v{width:30px;height:30px;flex:none;fill:none;stroke:var(--lima);stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;opacity:0;filter:drop-shadow(0 0 6px rgba(214,253,0,.7))}
.termo-caixa.aceito .termo-v{opacity:1}
.termo-caixa.aceito .termo-marca span{color:var(--lima)}

/* 24/set · o texto antes do botao das fotos no checklist */
.cl-fotos-intro{margin:6px 0 10px;font-size:15px;color:var(--gray);line-height:1.5}
.cl-fotos-intro b{color:var(--white)}

/* 06/out: Fotos e videos — o banner no topo e as regras das fotos do SITE (so o cenario) */
.fo-banner{display:block;width:100%;height:auto;aspect-ratio:1600/575;object-fit:cover;
  border-radius:var(--r);margin:0 0 18px;background:var(--surface-2)}
.fo-site{margin:0 0 26px;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.fo-site-tit{font-size:19px;font-weight:700;margin:0 0 8px;color:var(--white)}
.fo-site-txt{margin:0 0 12px;font-size:15.5px;line-height:1.55;color:var(--gray)}
.fo-site-txt b{color:var(--white)}
.fo-regras{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 12px}
@media (max-width:700px){ .fo-regras{grid-template-columns:1fr} }
.fo-regra{padding:12px 14px;border-radius:var(--r-sm);background:var(--surface-2);border-left:4px solid var(--line)}
.fo-regra.fo-sim{border-left-color:var(--verde)}
.fo-regra.fo-nao{border-left-color:var(--vermelho)}
.fo-regra-tit{margin:0 0 6px;font-weight:700;font-size:15.5px}
.fo-sim .fo-regra-tit{color:var(--verde)}
.fo-nao .fo-regra-tit{color:var(--vermelho)}
.fo-regra ul{margin:0;padding-left:20px}
.fo-regra li{margin:0 0 6px;font-size:15px;line-height:1.5;color:var(--gray)}
.fo-regra li b{color:var(--white)}
.fo-passos{margin-top:4px}
.fo-drive{text-decoration:none;border-color:var(--menta)}

/* ==========================================================================
   ETAPA 7 · AGENDA (25/set/2026) — pedidos e locacoes a esquerda, o mes a
   direita (lado a lado a partir de 1100px; no celular, um embaixo do outro).
   Cores do desenho aprovado: verde livre · azul confirmado (pago) · amarelo
   aguardando pagamento · cinza limpeza · vermelho ocupado por outro cliente.
   O dia do calendario tem >= 44px de toque a partir de 360px (regra C2).
   ========================================================================== */
.ag-grade{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
@media (min-width:1100px){ .ag-grade{grid-template-columns:minmax(340px,1fr) minmax(460px,1.3fr);align-items:start} }
.ag-tit{margin:0 0 12px;font-size:19px;font-weight:700;color:var(--white)}
.ag-abas{display:flex;gap:8px;margin:0 0 14px}
.ag-aba{flex:1;min-height:48px;padding:6px 10px;border-radius:99px;border:1px solid var(--line);background:var(--surface-2);
  color:var(--gray);font:inherit;font-weight:600;cursor:pointer}
.ag-aba[aria-selected="true"]{border-color:var(--menta);color:var(--white)}
.ag-form{max-width:none}
.ag-f-saida{margin:0 0 4px;color:var(--gray);font-size:14px}
/* 25/set, noite: o novo cadastro da locacao — o PERIODO no calendario do
   formulario (1o e ultimo dia), o jeito das diarias uma vez so, e o conferir.
   As cores sao as do calendario grande, CHEIAS (pedido dela); o escolhido e o
   menta cheio com a letra escura (contraste 12,4). */
.agf-mes{scroll-margin-top:80px;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0 8px}
.agf-mes b{font-weight:700;color:var(--white);text-align:center}
.agf-mes .btn{min-height:44px;padding:8px 12px;font-size:14px}
.agf-cal{margin-bottom:8px}
/* ".ag-d.": a regra geral do dia (.ag-d, letra branca) vem DEPOIS neste arquivo e
   ganhava — o numero saia branco sobre o menta, contraste 1,38 (o Doctor 4J pegou) */
.agf-esc,.ag-d.agf-esc{background:var(--menta);border-color:var(--menta);color:var(--bg)}
.ag-d.agf-esc .ag-rot{font-weight:600}
.agf-ini{box-shadow:inset 0 0 0 2px var(--white),inset 0 0 0 4px var(--bg)}
.agf-marcado{box-shadow:inset 0 0 0 2px var(--white),inset 0 0 0 4px var(--bg)}
.agf-limp{border:2px dashed var(--gray)}
.agf-legenda{margin-top:4px}
/* celular: a 360px, dentro da caixa do formulario, o dia ficava com 39px (medido)
   — abaixo dos 44 da regra C2. O calendario encosta na borda da caixa, o espaco
   entre os dias diminui e o dia mostra so o numero ("Escolhido" saia "Esc…"):
   a cor diz o resto, com a legenda logo abaixo e o nome inteiro no aria-label */
@media (max-width:419px){
  .ag-form{padding-left:12px;padding-right:12px}
  .agf-cal,.agf-semana{margin-left:-12px;margin-right:-12px;gap:2px}
  .agf-cal .ag-rot{display:none}
  .agf-cal .ag-d{align-items:center;justify-content:center}
}
.agf-msg{margin:6px 0 10px;font-size:14px;line-height:1.45;color:var(--gray)}
.agf-msg:empty{display:none}
.agf-msg.agf-erro{color:var(--vermelho)}
.agf-msg.agf-ok{color:var(--verde)}
.agf-per,.agf-linha{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);padding:8px 10px}
.agf-per{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.agf-per .btn,.agf-acoes .btn,.agf-extra .btn{min-height:44px;padding:8px 14px;font-size:14px}
.agf-rot{margin:2px 0 6px;font-size:14px;color:var(--gray)}
.agf-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
/* 02/out, noite: a duracao e uma so (12 h) — vira texto, nao botao */
.agf-duracao{margin:0 0 8px;font-size:15px;line-height:1.45;color:var(--white)}
.agf-chip{min-height:44px;padding:8px 14px;border-radius:99px;border:1px solid var(--line);background:var(--surface);
  color:var(--white);font:inherit;font-weight:600;cursor:pointer}
.agf-chip[aria-pressed="true"]{background:var(--menta);border-color:var(--menta);color:var(--bg)}
.agf-resumo{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}
.agf-conta{margin:0 0 2px;font-size:14.5px}
.agf-desc{margin:0 0 6px;font-size:14.5px;line-height:1.45}
.agf-dif{color:var(--ambar)}
.agf-ajustado{border-color:var(--ambar)}
.agf-ruim{border-color:var(--vermelho)}
.agf-acoes{display:flex;flex-wrap:wrap;gap:8px}
.agf-linha .agf-rot{margin:6px 0 6px}
.agf-dias{margin:0 0 4px;gap:6px}
.agf-dias .agf-chip{min-width:64px;padding:8px 10px;font-size:14px}
.agf-chip.agf-chip-dif{border-color:var(--ambar);color:var(--ambar)}
.agf-chip.agf-chip-ruim{border-color:var(--vermelho);color:var(--vermelho)}
.agf-aberto{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.agf-dias .agf-chip[aria-pressed="true"]{background:var(--menta);border-color:var(--menta);color:var(--bg)}
.agf-editor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px;margin:4px 0 8px}
.agf-editor .campo{margin-bottom:10px;min-width:0}
.agf-editor .campo input,.agf-editor .sv-select{background:var(--surface)}
@media (max-width:419px){ .agf-editor{grid-template-columns:minmax(0,1fr)} }
/* 03/out, 8a conversa (desenho da 4.52, aprovado): pre-light, filmagem e desmontagem na MESMA
   locacao — 3 colunas que "pintam" o mesmo calendario, cada atividade com a sua cor CHEIA
   (letra escura, contraste >= 4,5: roxo 4,5 · menta 13 · rosa 7,7); "✕ Tirar" grande, borda vermelha */
.ag-d.agf-pre,.ag-cor.agf-pre{background:var(--roxo);border-color:var(--roxo);color:var(--bg)}
.ag-d.agf-film,.ag-cor.agf-film{background:var(--menta);border-color:var(--menta);color:var(--bg)}
.ag-d.agf-desm,.ag-cor.agf-desm{background:var(--rosa);border-color:var(--rosa);color:var(--bg)}
.ag-d.agf-pre .ag-rot,.ag-d.agf-film .ag-rot,.ag-d.agf-desm .ag-rot{font-weight:600}
@media (min-width:1100px){ .ag-grade.ag-grade-form{grid-template-columns:minmax(0,1fr)} }
.agf-msg.agf-aviso{color:var(--ambar)}
.agf-pintando{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:0 0 10px;font-size:15px;line-height:1.45}
.agf-bola{width:14px;height:14px;border-radius:50%;flex:none;display:inline-block}
.agf-bola-pre{background:var(--roxo)} .agf-bola-film{background:var(--menta)} .agf-bola-desm{background:var(--rosa)}
.agf-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:12px;margin:0 0 12px}
.agf-col{border:2px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);padding:12px;min-width:0;cursor:pointer}
.agf-col .campo input{background:var(--surface)}
.agf-col-tit{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-weight:700;font-size:15.5px;color:var(--white)}
.agf-col-ativa.agf-col-pre{border-color:var(--roxo)} .agf-col-ativa.agf-col-film{border-color:var(--menta)} .agf-col-ativa.agf-col-desm{border-color:var(--rosa)}
.agf-pintar{width:100%;min-height:44px;margin:0 0 12px;padding:8px 12px;font-size:14.5px;border:1px solid var(--line);background:var(--surface);color:var(--white)}
.agf-col-pre .agf-pintar[aria-pressed="true"]{background:var(--roxo);border-color:var(--roxo);color:var(--bg)}
.agf-col-film .agf-pintar[aria-pressed="true"]{background:var(--menta);border-color:var(--menta);color:var(--bg)}
.agf-col-desm .agf-pintar[aria-pressed="true"]{background:var(--rosa);border-color:var(--rosa);color:var(--bg)}
.agf-ents{gap:6px;margin-bottom:8px}
.agf-ents .agf-chip{padding:8px 10px;font-size:14px}
.agf-col-sai{margin:0 0 10px;font-size:14px;color:var(--gray)}
.agf-col-per{display:flex;flex-direction:column;gap:8px}
.agf-col-vazio{margin:0;font-size:14px;color:var(--gray-2)}
.agf-col-sai.agf-col-erro{color:var(--vermelho);font-weight:600}
.agf-e-erro{grid-column:1/-1;margin:0 0 8px}
.ag-obs-campo{min-height:170px}
.ag-obs-conta{margin:4px 0 0;font-size:13.5px;color:var(--gray-2);text-align:right}
.ag-card-obs{white-space:pre-wrap}
/* 03/out, 8a: "Ver as datas de" — a lista de datas na coluna da esquerda */
.ag-cor.ag-canc{background:transparent;border:2px dashed var(--coral)}
.ag-datas-tit{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px;font-size:15px}
.ag-datas-lista{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.ag-data{width:100%;min-height:48px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;cursor:pointer;
  padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface-2);color:var(--white);font:inherit}
.ag-data:hover,.ag-data:focus-visible{border-color:var(--menta)}
.ag-data-dia{font-weight:700;font-size:15px}
.ag-data-cli{font-size:15px}
.ag-data-info{font-size:13.5px;color:var(--gray);overflow-wrap:anywhere}
.ag-data-extra{color:var(--coral)}
/* 03/out, 8a: Contratos — "Fechar" no topo, os filtros, as observacoes */
.ctr-topo{display:flex;justify-content:flex-end;margin:0 0 10px}
.ctr-topo .btn{min-height:44px;padding:8px 16px}
.ctr-filtros{max-width:none}
.ctr-filtros .ct-vista-btn{flex:1 1 150px}
.he-chip.ctr-sit-aguardando{background:rgba(252,200,108,.16);color:var(--ambar)}
.he-chip.ctr-sit-pago{background:rgba(91,157,255,.16);color:var(--azul)}
.he-chip.ctr-sit-cancelado{background:rgba(241,135,104,.16);color:var(--coral)}
.ctr-obs-ed{min-height:110px;width:100%}
.ctr-obs{white-space:pre-wrap}
.btn.agf-tirar{min-height:48px;padding:8px 16px;font-size:15px;font-weight:700;border:2px solid var(--vermelho);background:transparent;color:var(--vermelho);border-radius:var(--r-sm)}
.btn.agf-tirar:hover,.btn.agf-tirar:focus-visible{background:var(--vermelho);color:var(--bg)}
.agf-chip.agf-chip-pre{box-shadow:inset 4px 0 0 var(--roxo)} .agf-chip.agf-chip-film{box-shadow:inset 4px 0 0 var(--menta)} .agf-chip.agf-chip-desm{box-shadow:inset 4px 0 0 var(--rosa)}
.ag-obs{margin-top:14px}
.ag-card-tit{margin:0 0 6px;font-weight:700;font-size:17px;color:var(--white)}
.ag-selo{display:inline-block;font-size:12.5px;font-weight:600;border-radius:99px;padding:3px 10px;border:1px solid}
.ag-selo-conf{border-color:var(--azul);background:var(--azul);color:var(--bg)}
.ag-selo-aguard{border-color:var(--ambar);background:var(--ambar);color:var(--bg)}
.ag-card-dias{margin:10px 0 6px;padding-left:18px;font-size:14.5px}
.ag-card-dias li{margin:3px 0}
.ag-card-info{margin:4px 0;font-size:14px;color:var(--gray)}
.ag-card-choque{margin:6px 0;font-size:14px;color:var(--vermelho)}
.ag-card-meta{margin:6px 0 0;font-size:13px;color:var(--gray-3)}
.ag-card-sel{border-color:var(--menta)}
.ag-acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ag-acoes .btn{flex:1 1 150px;min-height:44px;padding:10px 16px}
.ag-cancelar{margin-top:12px}
.ag-cancelar .btn{margin-top:8px}
.ag-mes{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.ag-mes .ag-tit{margin:0;text-align:center;order:-1;flex-basis:100%}
.ag-mes .btn{min-height:44px;padding:8px 14px;font-size:14px;flex:1}
@media (min-width:600px){ .ag-mes{flex-wrap:nowrap} .ag-mes .ag-tit{order:0;flex:1 1 auto} .ag-mes .btn{flex:0 0 auto} }
.ag-legenda{list-style:none;padding:0;margin:0 0 10px;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px;color:var(--gray)}
.ag-legenda li{display:flex;align-items:center;gap:6px}
.ag-cor{width:14px;height:14px;border-radius:4px;display:inline-block;border:1px solid}
.ag-semana,.ag-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.ag-semana span{text-align:center;font-size:12.5px;color:var(--gray-3);padding:4px 0}
.ag-cal{margin-bottom:12px}
.ag-d{min-height:48px;min-width:0;padding:4px 3px;border-radius:8px;border:1px solid transparent;display:flex;
  flex-direction:column;align-items:flex-start;gap:2px;font:inherit;color:var(--white);cursor:pointer;overflow:hidden;text-align:left}
.ag-fora{visibility:hidden}
.ag-n{font-weight:700;font-size:14px}
.ag-rot{font-size:11px;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:600px){ .ag-d{min-height:64px;padding:6px} .ag-rot{font-size:12px} }
/* 25/set, tarde, pedido dela: o verde de livre fica como esta; o que tem
   marcacao e cor CHEIA, com a letra escura por cima. Contraste medido da
   letra (--bg) sobre a cor: azul 6,8 · amarelo 12,0 · cinza 7,1 · vermelho
   6,7 (minimo para ler bem: 4,5). O cinza da limpeza e o --gray: o --gray-3
   daria so 4,4. O Doctor (4J) mede a cor pintada de verdade. */
.ag-livre{background:rgba(95,211,141,.12);border-color:rgba(95,211,141,.4)}
.ag-conf,.ag-aguard,.ag-limp,.ag-choque{color:var(--bg)}
.ag-conf{background:var(--azul);border-color:var(--azul)}
.ag-aguard{background:var(--ambar);border-color:var(--ambar)}
.ag-limp{background:var(--gray);border-color:var(--gray)}
.ag-choque{background:var(--vermelho);border-color:var(--vermelho)}
.ag-d.ag-conf .ag-rot,.ag-d.ag-aguard .ag-rot,.ag-d.ag-limp .ag-rot,.ag-d.ag-choque .ag-rot{font-weight:600}
/* 25/set (Etapa 7B): a situacao dos checklists no cartao da locacao */
.ag-selo-enc{border-color:var(--verde);background:var(--verde);color:var(--bg)}
.ag-card-ck{list-style:none;margin:8px 0 4px;padding:0;font-size:14px;color:var(--gray)}
.ag-card-ck li{margin:3px 0;padding-left:12px;border-left:3px solid var(--line)}
.ag-card-ck .ag-ck-feito{border-left-color:var(--verde);color:var(--white)}
.ag-card-ck .ag-ck-pendente{border-left-color:var(--ambar);color:var(--ambar)}
.ag-card-ck .ag-ck-atrasado{border-left-color:var(--vermelho);color:var(--vermelho)}
/* com o filtro ligado: dia pago por OUTRO cliente — apagado de proposito (nao e
   deste cliente), mas nunca verde, porque nao esta livre. Letra --gray sobre
   --surface-2: contraste 6,3. */
.ag-outro{background:var(--surface-2);border:1px dashed var(--gray-3);color:var(--gray)}
.ag-filtro{margin:14px 0 4px}
.ag-filtro .ct-arq-ajuda{margin:8px 0 0}
.ag-dia-lista{margin:6px 0 0;padding-left:18px}
.ag-dia-lista li{margin:4px 0}
.ag-dia-obs{display:block;margin-top:3px;color:var(--white)}
/* o dia escolhido: aro branco com uma faixa escura por dentro — aparece
   sobre qualquer cor, clara ou escura */
.ag-sel{box-shadow:inset 0 0 0 2px var(--white),inset 0 0 0 4px var(--bg)}
.ag-hoje .ag-n{text-decoration:underline;text-underline-offset:3px}
.ag-passado{opacity:.55}

/* ======================================================= 28/set/2026
   · o GUIA DE MARKETING no Inicio
   · 02 · CHECKLIST ANTES DA DIARIA — o texto de atencao do studio escolhido
   · Clientes pessoa fisica / juridica · "ja e cliente" no contato */
.mkt{background:var(--surface);border:1px solid rgba(214,253,0,.28);border-radius:var(--r);padding:16px;margin:0 0 18px}
.mkt-txt{margin:0 0 12px;font-size:15px;line-height:1.5;color:var(--gray);max-width:70ch}
.mkt-txt b{color:var(--white)}

.ad-guia{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:0 0 18px}
.ad-intro{margin:0 0 10px;font-size:15.5px;line-height:1.5;color:var(--white)}
.ad-pontos{margin:0;padding:0 0 0 20px;display:grid;gap:8px;font-size:15px;line-height:1.5;color:var(--gray)}
.ad-pontos b{color:var(--white)}
.ad-pontos li::marker{color:var(--coral);font-weight:700}
.ad-fim{margin:12px 0 0;font-size:14.5px;line-height:1.5;color:var(--gray)}
.ad-fim b{color:var(--white)}
/* a situacao escolhida: pronto em verde, atencao em ambar (a cor diz, e o ✓ tambem) */
.cn-op.ad-sit-pronto[aria-pressed="true"]{border-color:var(--verde);background:rgba(95,211,141,.10)}
.cn-op.ad-sit-atencao[aria-pressed="true"]{border-color:var(--ambar);background:rgba(252,200,108,.10)}

.sv-card.t-antes_diaria .sv-tipo{background:rgba(241,135,104,.16);color:var(--coral)}
.sv-pronto{color:var(--verde)}
.sv-atencao{color:var(--ambar)}

.ct-pessoa{color:var(--white)}
.ct-selo-cliente{background:rgba(95,211,141,.14);color:var(--verde)}
.kl-selo-pj{background:rgba(91,157,255,.14);color:var(--azul)}
.kl-selo-pf{background:rgba(245,124,180,.14);color:var(--rosa)}
/* 02/out · Prospeccao: a situacao do e-mail no selo e no cartao */
.kl-relacao{margin-top:4px}
.kl-selo-prosp{background:rgba(214,253,0,.12);color:var(--lima)}
.kl-selo-naoquer{background:rgba(241,135,104,.14);color:var(--coral)}
.kl-prosp{margin:10px 0 4px;max-width:420px}
.kl-prosp select{width:100%;min-height:44px}
.kl-prosp-msg{margin-top:8px}
#kl-prosp-copiar-lugar .btn{margin:0 0 12px}

/* ---------- TABELA DE PRECOS · HORAS EXTRAS (02/out) ----------
   A hora extra em CORAL, como no Anexo III v3 — a mesma cor no papel e na tela. */
.pr-grade{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:14px}
@media (min-width:720px){ .pr-grade{grid-template-columns:1fr 1fr} }
.pr-grade .cartao{margin:0;min-width:0}   /* item de grade: encolhe ate 320px (Doctor 4N) */
.pr-st,.pr-tit{font-family:var(--f-titulo);font-weight:600;font-size:26px;line-height:1;margin:0 0 10px;
  text-transform:uppercase;letter-spacing:.4px;color:var(--lima)}
.pr-tit{color:var(--white)}
.pr-tit span{font-family:var(--f-texto);font-size:13px;color:var(--gray-2);text-transform:none;letter-spacing:0;margin-left:6px}
.pr-rot{font-size:13px;letter-spacing:.6px;text-transform:uppercase;color:var(--gray-2);margin:0 0 6px;font-weight:600}
.pr-val{margin:0}
.pr-val div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line-2)}
.pr-val div:last-child{border-bottom:0}
.pr-val dt{color:var(--gray)}
.pr-val dd{margin:0;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.pr-val small{display:block;font-weight:400;color:var(--gray-2);font-size:13px}
.pr-he{margin-top:12px;border:1px solid var(--coral);border-left-width:4px;border-radius:var(--r-sm);
  background:rgba(241,135,104,.08);padding:10px 12px}
.pr-he-rot{margin:0 0 4px;font-size:13px;letter-spacing:.6px;text-transform:uppercase;font-weight:700;color:var(--coral)}
.pr-he dd{color:var(--white);font-size:17px}
.pr-expl{color:var(--gray);margin:0 0 14px;max-width:70ch}
.pr-campos{display:grid;grid-template-columns:1fr;gap:0 14px}
@media (min-width:600px){ .pr-campos{grid-template-columns:1fr 1fr} }
.pr-campos .campo input{width:100%;min-height:50px}
.pr-dica{color:var(--gray-2);font-size:14px;margin:-4px 0 14px}
.pr-calc .recado{margin-top:14px}
.pr-total{display:block;margin-top:8px;font-family:var(--f-titulo);font-size:30px;line-height:1;
  font-weight:600;color:var(--lima);letter-spacing:.4px}
.pr-base{border-color:var(--coral)}
/* width:0 + min-width:100%: a tabela larga rola DENTRO da caixa e nao empurra a tela
   (medido pelo Doctor 4N a 320px: sem isto, a pagina sobrava 310px para o lado) */
.pr-rolar{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 16px;width:0;min-width:100%}
.pr-tab{width:100%;min-width:560px;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:15px}
.pr-tab th,.pr-tab td{padding:9px 8px;text-align:right;border-bottom:1px solid var(--line-2);white-space:nowrap}
.pr-tab thead th{font-size:12.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--gray-2);font-weight:600;
  vertical-align:bottom;white-space:normal}
.pr-tab .pr-l{text-align:left}
.pr-tab tr.pr-gr th{text-align:center;color:var(--lima);background:var(--surface-2);border-bottom:0}
.pr-tab tr.pr-gr th.pr-l{background:none}
.pr-tab tbody th{font-weight:600;color:var(--white)}
.pr-tab .pr-tt{color:var(--gray-2);font-size:14px}
.pr-tab tr.pr-vh td{background:rgba(241,135,104,.12);color:var(--white);font-weight:700;border-bottom:2px solid var(--coral)}
.pr-tab tr.pr-vh td:first-child{text-align:left;color:var(--coral)}
.pr-tab tbody tr:not(.pr-vh):hover td,.pr-tab tbody tr:not(.pr-vh):hover th{background:var(--surface-2)}
.pr-conta-lista{margin:0;padding-left:20px;color:var(--gray)}
.pr-conta-lista li{margin:6px 0}
.pr-conta-lista b{color:var(--white)}
#v-precos .emconstrucao{margin-top:14px}

/* ============================================ 02/out (banco/27) · A COBRANCA DE HORAS EXTRAS
   O documento tem a cara do recibo e do Anexo III (10-CONTRATO-LOCACAO/hz-doc.css): papel
   branco, cabecalho preto com o logotipo, a faixa de cores, as grades com titulo em lima.
   Na tela, as partes que mudam ficam EM DESTAQUE (fundo lima claro, borda tracejada);
   no papel (o PDF) o destaque some. Teko so no titulo do documento (C5). */
.pr-abas{max-width:none;align-items:center}
/* 03/out, 8a conversa: "Cobrar horas extras" — o subtitulo e o botao da cobranca CHEIO, colorido e maior */
.pr-subtitulo{margin:-6px 0 8px;font-family:var(--f-titulo);font-size:24px;font-weight:500;line-height:1.1;letter-spacing:.4px;color:var(--gray);text-transform:uppercase}
.ct-vista-btn.pr-btn-cobrar{flex:2 1 220px;min-height:60px;font-size:17px;font-weight:700;background:var(--lima);border-color:var(--lima);color:var(--bg)}
.ct-vista-btn.pr-btn-cobrar[aria-pressed="false"]{background:rgba(214,253,0,.14);color:var(--lima)}
.ct-vista-btn.pr-btn-cobrar[aria-pressed="true"]{background:var(--lima);border-color:var(--lima);color:var(--bg);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--lima)}
.he-nova .sv-select{width:100%;min-height:50px}
.he-editor{margin:0 0 14px}
.he-guia{color:var(--gray);margin:0 0 12px;max-width:75ch}
.he-mk{background:var(--lima);color:var(--bg);padding:1px 6px;border-radius:4px;font-weight:600}
.he-editor .recado{margin-bottom:12px}
.he-editor > .btn{margin-top:10px}
.he-folha{background:var(--surface-2);border-radius:var(--r-sm);padding:10px;margin:0 0 6px}
.he-doc{background:var(--papel);color:var(--tinta);max-width:860px;margin:0 auto;font-size:14.5px;line-height:1.45;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.he-doc table{width:100%;border-collapse:collapse}
.he-cab{background:var(--bg);color:var(--white);padding:14px 18px 12px}
.he-cab img{display:block;height:28px;width:auto}
.he-meta{margin:8px 0 0;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-2)}
.he-espectro{display:flex;height:4px}
.he-espectro i{flex:1}
.he-espectro i:nth-child(1){background:var(--ambar)} .he-espectro i:nth-child(2){background:var(--lima)}
.he-espectro i:nth-child(3){background:var(--menta)} .he-espectro i:nth-child(4){background:var(--teal)}
.he-espectro i:nth-child(5){background:var(--roxo)}  .he-espectro i:nth-child(6){background:var(--rosa)}
.he-espectro i:nth-child(7){background:var(--coral)}
.he-topo{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:10px 16px;padding:14px 18px 6px}
.he-titulo{font-family:var(--f-titulo);font-weight:600;font-size:34px;line-height:.95;text-transform:uppercase;margin:0;color:var(--bg)}
.he-subt{margin:4px 0 0;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--doc-cinza-2)}
.he-num{margin:0;border:1px solid var(--doc-linha);padding:6px 12px;text-align:right;font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--doc-cinza-2)}
.he-num b{display:block;font-size:24px;line-height:1.1;letter-spacing:.02em;color:var(--bg);font-variant-numeric:tabular-nums}
.he-num span{display:block;text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--doc-cinza)}
.he-grade{border:1px solid var(--doc-linha);margin:10px 18px 0}
.he-gt{margin:0;background:var(--bg);color:var(--lima);padding:5px 12px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.he-grade th,.he-grade td{padding:5px 11px;border-bottom:1px solid var(--doc-linha-2);vertical-align:top;text-align:left}
.he-grade tr:last-child th,.he-grade tr:last-child td{border-bottom:0}
.he-grade tbody th{width:30%;color:var(--doc-cinza);font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.he-grade small{color:var(--doc-cinza-2)}
/* 02/out: cliente sem CNPJ/CPF ou sem endereco — o aviso aparece SO na tela, nunca no papel */
.he-falta{margin:0;padding:8px 11px;background:rgba(241,135,104,.16);border-top:2px solid var(--coral);color:var(--tinta);font-size:13.5px}
.he-tab-cx{overflow-x:auto;-webkit-overflow-scrolling:touch}
.he-tab{font-variant-numeric:tabular-nums}
.he-tab thead th{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--doc-cinza);
  background:var(--doc-linha-2);padding:6px 8px;white-space:nowrap}
.he-tab td{padding:6px 8px;border-bottom:1px solid var(--doc-linha-2);white-space:nowrap}
.he-tab .he-n{text-align:right}
.he-tab .he-sub{font-weight:700}
.he-tab tr.he-sem td{color:var(--doc-cinza-2)}
.he-regra{margin:0;padding:7px 11px;font-size:12.5px;color:var(--doc-cinza);border-top:1px solid var(--doc-linha-2)}
.he-valor{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:flex-end;margin:10px 18px 0;border:1px solid var(--doc-linha);
  border-left:4px solid var(--coral);padding:8px 14px}
.he-vl{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--doc-cinza-2)}
.he-valor b{display:block;font-size:26px;line-height:1.15;color:var(--bg);font-variant-numeric:tabular-nums}
.he-valor .he-venc{font-size:20px}
.he-cond{margin:10px 18px 0;font-size:12.5px;color:var(--doc-cinza)}
.he-cond p{margin:0 0 4px;text-align:justify}
.he-cond b{color:var(--bg)}
.he-h3{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bg);
  padding-left:8px;border-left:3px solid var(--lima)}
.he-obs{margin:10px 18px 0;font-size:13.5px;white-space:pre-wrap}
.he-rodape{margin:12px 18px 0;padding:8px 0 14px;border-top:1px solid var(--doc-linha);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--doc-cinza-2)}

/* as partes que mudam: EM DESTAQUE (so na tela) */
.he-ed{background:rgba(214,253,0,.28);color:var(--tinta);border:2px dashed var(--bg);border-radius:6px;
  font:inherit;font-weight:600;min-height:44px;padding:4px 8px;max-width:100%}
.he-ed:focus{outline:3px solid var(--teal);outline-offset:1px}
.he-ed-hora{width:7.2em}
.he-ed-dia{width:10.5em}
.he-ed-sel{width:100%}
.he-ed-obs{width:100%;min-height:64px;resize:vertical;font-weight:400;white-space:normal}
.he-par{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}   /* o dia e a hora da saida, juntos */
.he-valor .he-ed-dia{font-size:17px}

/* ENQUANTO ELA EDITA, cada diaria e um cartao, em qualquer tela: com os campos de horario a
   tabela passava de 900px e empurrava a tela (Doctor 4O, 768 a 900px). O documento pronto e o
   PDF ficam em tabela (a .he-tab-cx rola sozinha se precisar). */
.he-editando .he-tab thead{display:none}
.he-editando .he-tab,.he-editando .he-tab tbody,.he-editando .he-tab tr,.he-editando .he-tab td{display:block;width:100%}
.he-editando .he-tab tr{border-bottom:2px solid var(--doc-linha);padding:4px 0}
.he-editando .he-tab td{display:flex;justify-content:space-between;align-items:center;gap:10px;white-space:normal;border-bottom:0;padding:4px 11px;text-align:right}
.he-editando .he-tab td::before{content:attr(data-r);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--doc-cinza);text-align:left}
.he-editando .he-tab td[data-r="Saída"]{flex-wrap:wrap}
.he-tab-cx{width:0;min-width:100%}
/* no celular, cada diaria vira um cartao (a tabela larga nao cabe em 360px).
   02/out (o PDF dela): SO NA TELA — no navegador dela a folha foi medida estreita e o papel saiu
   no formato de celular. O papel tem sempre a cara do documento (Doctor 4O mede a 700px). */
@media screen and (max-width:760px){
  .he-folha{padding:0;background:none}
  .he-doc{font-size:14px}
  .he-topo,.he-cab{padding-left:12px;padding-right:12px}
  .he-grade,.he-valor,.he-cond,.he-obs,.he-rodape{margin-left:10px;margin-right:10px}
  .he-titulo{font-size:28px}
  /* 320px: o e-mail e o CNPJ nao quebram e empurravam a tela 26px para o lado (Doctor 4O) —
     no celular o rotulo fica em cima e o valor embaixo, e o texto longo quebra */
  .he-grade > table > tbody > tr > th,.he-grade > table > tbody > tr > td{display:block;width:auto}
  .he-grade > table > tbody > tr > th{border-bottom:0;padding-bottom:0}
  .he-grade td{overflow-wrap:anywhere}
   .he-tab thead{display:none}
   .he-tab,   .he-tab tbody,   .he-tab tr,   .he-tab td{display:block;width:100%}
   .he-tab tr{border-bottom:2px solid var(--doc-linha);padding:4px 0}
   .he-tab td{display:flex;justify-content:space-between;align-items:center;gap:10px;white-space:normal;border-bottom:0;padding:4px 11px;text-align:right}
   .he-tab td::before{content:attr(data-r);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--doc-cinza);text-align:left}
   .he-tab td[data-r="Saída"]{flex-wrap:wrap}
}

/* a lista das cobrancas emitidas */
.he-emitidas{margin-top:14px}
.he-lista{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:900px){ .he-lista{grid-template-columns:1fr 1fr} }
.he-item{margin:0;min-width:0}
.he-item p{margin:0 0 4px}
.he-item-cod{font-weight:700;font-size:19px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.he-item-cli{color:var(--white)}
.he-item-val{color:var(--gray)}
.he-item-val b{color:var(--white)}
.he-item-acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.he-item-acoes .btn{flex:1 1 180px;margin:0}
.he-chip{font-size:13px;font-weight:700;padding:3px 10px;border-radius:999px;border:1px solid currentColor}
.he-chip.aberta{color:var(--ambar)}
.he-chip.vencida{color:var(--vermelho)}
.he-chip.paga{color:var(--verde)}
.he-confirma{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.he-confirma .btn{margin-top:8px}

/* O PDF: so o documento vai para o papel (body.he-imprimir, ligado por heImprimir) */
.he-impressao{display:none}
@media print{
  /* 02/out (achado no PDF dela): com margem na folha, o navegador escrevia a data, a hora e o endereco
     do painel (127.0.0.1…/index.html · 1/1) no alto e embaixo. Margem 0: o respiro fica DENTRO do papel. */
  @page{size:A4;margin:0}
  body.he-imprimir{background:var(--papel)}
  body.he-imprimir > *:not(#he-impressao){display:none !important}
  body.he-imprimir #he-impressao{display:block !important}
  /* 02/out: o PDF de verdade saia com a tabela CORTADA (7 de 9 colunas) e em 2 folhas —
     no papel a tabela nao rola, a letra e os espacos ficam compactos (Doctor 4O mede) */
  .he-papel{max-width:none;font-size:9pt;line-height:1.35;padding:10mm 11mm 8mm}
  .he-papel .he-cab{padding:9px 14px 8px}
  .he-papel .he-cab img{height:22px}
  .he-papel .he-meta{font-size:7pt;letter-spacing:.03em;margin-top:5px}
  .he-papel .he-topo{padding:9px 14px 2px}
  .he-papel .he-titulo{font-size:21pt}
  .he-papel .he-subt,.he-papel .he-num{font-size:7.5pt}
  .he-papel .he-num b{font-size:16pt}
  .he-papel .he-num span{font-size:8pt}
  .he-papel .he-grade,.he-papel .he-valor,.he-papel .he-cond,.he-papel .he-obs,.he-papel .he-rodape{margin-left:14px;margin-right:14px}
  .he-papel .he-grade,.he-papel .he-valor,.he-papel .he-cond,.he-papel .he-obs{margin-top:7px}
  .he-papel .he-gt{font-size:7.5pt;padding:3px 10px}
  .he-papel .he-grade > table > tbody > tr > th,.he-papel .he-grade > table > tbody > tr > td{padding:2px 9px}
  .he-papel .he-grade tbody th{font-size:7.5pt}
  .he-papel .he-tab-cx{overflow:visible;width:auto;min-width:0}
  .he-papel .he-tab thead th{font-size:6.8pt;padding:3px 4px;white-space:normal;letter-spacing:.02em}
  .he-papel .he-tab td{padding:3px 4px;font-size:8.5pt}
  .he-papel .he-regra{font-size:7.5pt;padding:4px 9px}
  .he-papel .he-valor{padding:5px 12px}
  .he-papel .he-vl{font-size:7pt}
  .he-papel .he-valor b{font-size:17pt}
  .he-papel .he-valor .he-venc{font-size:13pt}
  .he-papel .he-cond{font-size:8pt}
  .he-papel .he-h3{font-size:7.5pt}
  .he-papel .he-obs{font-size:8.5pt}
  .he-papel .he-rodape{font-size:7pt;margin-top:8px;padding:5px 0 0}
  .he-papel .he-tab{display:table;width:100%}
  .he-papel .he-tab thead{display:table-header-group}
  .he-papel .he-tab tbody{display:table-row-group}
  .he-papel .he-tab tr{display:table-row}
  .he-papel .he-tab td{display:table-cell;white-space:nowrap}
  .he-papel .he-tab td::before{content:none}
  .he-papel .he-grade,.he-papel .he-valor,.he-papel .he-cond{page-break-inside:avoid}
}

/* ============================================ 03/out, 7a conversa (banco/31) · ETAPA 8 · CONTRATOS
   O contrato usa o papel da cobranca (he-doc: cabecalho preto, faixa de cores, grades com
   titulo em lima) e acrescenta o que um contrato tem: as clausulas, as assinaturas, o Anexo
   II, e o PDF de VARIAS folhas (thead/tfoot que se repetem em cada folha — armadilha 23). */
#v-contratos{max-width:1100px}
#v-contratos .emconstrucao{margin-top:14px}
.ctr-motivo{margin:0 0 12px;max-width:860px}
.ctr-motivo label{display:block;margin-bottom:6px}
.ctr-adv{display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;background:var(--coral);color:var(--bg);
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.7;vertical-align:1px;white-space:nowrap}
.ctr-titulo{font-size:26px;line-height:1;max-width:22ch}
.ctr-quadro tbody th{width:32%}
/* o Quadro tem varios tbody (as partes que a conta troca): a linha entre eles nao some */
.ctr-quadro tbody:not(:last-child) > tr:last-child > th,.ctr-quadro tbody:not(:last-child) > tr:last-child > td{border-bottom:1px solid var(--doc-linha-2)}
.ctr-largo{width:100%}
.ctr-so-tela small,.ctr-so-tela{color:var(--doc-cinza-2)}
.ctr-datas{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:8px}
.ctr-datas label,.ctr-adic-qd label,.ctr-outros{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--doc-cinza)}
.ctr-adic{display:flex;flex-direction:column;gap:6px}
.ctr-adic-gr{margin:6px 0 0;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--doc-cinza-2)}
.ctr-adic-li{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 12px}
.ctr-adic-marca{display:flex;align-items:center;gap:10px;font-weight:400;cursor:pointer;width:100%;max-width:560px}
.ctr-adic-marca input{width:22px;height:22px;flex:none;accent-color:var(--bg)}
.ctr-adic-marca small{display:block;color:var(--doc-cinza)}
.ctr-nao-pode .ctr-adic-marca{opacity:.55;cursor:not-allowed;border-style:dotted}
.ctr-adic-qd{display:flex;flex-wrap:wrap;gap:8px 14px;padding-left:34px}
.ctr-num{width:5em;text-align:center}
.ctr-outros{margin-top:6px}
.ctr-radio{display:flex;align-items:center;gap:10px;font-weight:400;cursor:pointer}
.ctr-radio input{width:20px;height:20px;flex:none;accent-color:var(--bg)}
.ctr-assinale{width:5em;text-align:center;font-weight:700;white-space:nowrap}
.ctr-somas{width:auto !important;margin:6px 11px 8px auto;font-variant-numeric:tabular-nums}
.ctr-somas th{padding:3px 14px 3px 0;text-align:right;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--doc-cinza)}
.ctr-somas td{padding:3px 0;text-align:right;font-weight:600}
.ctr-soma-total th,.ctr-soma-total td{border-top:2px solid var(--bg);font-size:15px;color:var(--bg);padding-top:5px}
.ctr-it.ctr-abertura{margin:14px 18px 0}
.ctr-cl{margin:14px 18px 0}
.ctr-clt{margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bg);
  padding-left:8px;border-left:3px solid var(--lima)}
.ctr-it{margin:0 0 6px;text-align:justify}
.ctr-it b{color:var(--bg)}
.ctr-ul{margin:0 0 8px;padding-left:22px}
.ctr-ul li{margin:2px 0}
.ctr-mini{margin:4px 0 8px}
.ctr-mini h4.he-gt{font-size:11px}
.ctr-cl .he-tab-cx{margin:4px 0 8px;border:1px solid var(--doc-linha)}
.ctr-aviso-doc{margin:6px 0 4px;border:1px solid var(--doc-linha);border-left:4px solid var(--coral);padding:7px 12px}
.ctr-aviso-tit{margin:0 0 2px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--coral)}
.ctr-aviso-doc p:last-child{margin:0;font-size:13.5px}
.ctr-assin{margin:22px 18px 0;page-break-inside:avoid;break-inside:avoid}
.ctr-local{margin:0 0 26px}
.ctr-assin-grade{display:grid;grid-template-columns:1fr 1fr;gap:26px 36px;margin-bottom:22px}
.ctr-ass{display:flex;flex-direction:column;gap:2px;font-size:13px}
.ctr-ass-linha{display:block;border-top:1px solid var(--tinta);margin-top:38px;margin-bottom:4px}
.ctr-ass small{color:var(--doc-cinza)}
.ctr-ass-papel{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--doc-cinza-2);margin-top:2px}
.ctr-test-tit{margin:0;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--doc-cinza)}
.ctr-anexo{margin:26px 18px 0;padding-top:16px;border-top:3px solid var(--bg)}
.ctr-anexo-tit{margin:0;font-family:var(--f-titulo);font-weight:600;font-size:26px;line-height:1;text-transform:uppercase;color:var(--bg)}
.ctr-anexo .he-subt{margin-bottom:10px}
.ctr-anexo .he-rodape{margin-left:0;margin-right:0}
/* a confirmacao antes de gerar (24/set: "voce conferiu? o cliente e esse mesmo?") */
.ctr-confirma{margin:12px 0 0;border:2px solid var(--lima);border-radius:var(--r-sm);background:rgba(214,253,0,.06);padding:14px 16px}
.ctr-confirma p{margin:0 0 8px}
.ctr-conf-tit{font-weight:700;font-size:18px;color:var(--white)}
.ctr-confirma .btn{margin-top:6px}
/* a lista dos contratos */
.he-chip.ctr-subst{color:var(--gray-2)}
.ctr-velho{opacity:.78}
.ctr-mudou{margin:8px 0 0 !important;padding:8px 10px;border-left:3px solid var(--coral);background:rgba(241,135,104,.1);color:var(--white)}
.ctr-motivo-txt{margin:8px 0 0 !important;color:var(--gray);font-size:14px}
/* Tabela de precos: os precos que o contrato soma, e o "Mudar" da adm */
.pr-lista{margin-top:14px}
.pr-li-gr{margin:16px 0 4px;font-size:13px;letter-spacing:.6px;text-transform:uppercase;color:var(--gray-2);font-weight:600}
.pr-li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px 0;border-bottom:1px solid var(--line-2)}
.pr-li-txt{flex:1 1 240px;min-width:0}
.pr-li-txt b{display:block;color:var(--white);font-weight:600}
.pr-li-txt small{display:block;color:var(--gray-2);font-size:13px}
.pr-li-val{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--white)}
.pr-li-mudar{min-height:44px;margin:0}
.pr-li-caixa{flex:1 1 100%;max-width:520px}
.pr-li-caixa input{width:100%;min-height:50px}
.pr-li-caixa .btn{margin-top:8px}
.pr-li-caixa .recado{margin-top:10px}
.pr-li-caixa .recado .btn{display:block;margin-top:10px}
@media screen and (max-width:760px){
  .ctr-cl,.ctr-abertura,.ctr-assin,.ctr-anexo{margin-left:10px;margin-right:10px}
  .ctr-titulo{font-size:22px}
  .ctr-assin-grade{grid-template-columns:1fr}
  .ctr-adic-qd{padding-left:0}
}

/* O PDF DO CONTRATO: so o documento vai para o papel (body.ctr-imprimir, ligado por ctrImprimir) */
@media print{
  body.ctr-imprimir{background:var(--papel)}
  body.ctr-imprimir > *:not(#ctr-impressao){display:none !important}
  body.ctr-imprimir #ctr-impressao{display:block !important}
  /* o respiro de CADA folha: a margem da pagina e 0 (o navegador nao escreve data nem endereco)
     e o thead/tfoot da tabela de fora se repetem no alto e embaixo de toda folha */
  .ctr-pg{width:100%;border-collapse:collapse}
  .ctr-pg > thead{display:table-header-group}
  .ctr-pg > tfoot{display:table-footer-group}
  .ctr-pg > thead td,.ctr-pg > tfoot td,.ctr-pg > tbody > tr > td{padding:0}
  .ctr-pg-topo{height:13mm;box-sizing:border-box;padding:6mm 14mm 0;font-size:7pt;letter-spacing:.06em;text-transform:uppercase;color:var(--doc-cinza-2)}
  .ctr-pg-pe{height:12mm;box-sizing:border-box;padding:4mm 14mm 0;font-size:7pt;letter-spacing:.06em;text-transform:uppercase;color:var(--doc-cinza-2)}
  .ctr-papel{max-width:none;font-size:9.5pt;line-height:1.38;padding:0 10mm}
  .ctr-papel .he-cab{padding:9px 14px 8px}
  .ctr-papel .he-cab img{height:22px}
  .ctr-papel .he-meta{font-size:7pt;letter-spacing:.03em;margin-top:5px}
  .ctr-papel .he-topo{padding:9px 14px 2px;flex-wrap:nowrap}
  .ctr-papel .ctr-titulo{font-size:17pt;max-width:none}
  .ctr-papel .he-subt,.ctr-papel .he-num{font-size:7.5pt}
  .ctr-papel .he-num b{font-size:15pt}
  .ctr-papel .he-num span{font-size:8pt}
  .ctr-papel .he-gt{font-size:7.5pt;padding:3px 10px}
  .ctr-papel .he-grade th,.ctr-papel .he-grade td{padding:2px 9px}
  .ctr-papel .he-grade tbody th{font-size:7.3pt}
  .ctr-papel .he-grade,.ctr-papel .ctr-cl,.ctr-papel .ctr-abertura,.ctr-papel .ctr-assin,.ctr-papel .ctr-anexo{margin-left:4mm;margin-right:4mm}
  .ctr-papel .he-tab-cx{overflow:visible;width:auto;min-width:0}
  .ctr-papel .he-tab{display:table;width:100%}
  .ctr-papel .he-tab thead{display:table-header-group}
  .ctr-papel .he-tab tbody{display:table-row-group}
  .ctr-papel .he-tab tr{display:table-row}
  .ctr-papel .he-tab th,.ctr-papel .he-tab td{display:table-cell;font-size:8.3pt;padding:2px 6px}
  .ctr-papel .he-tab td::before{content:none}
  .ctr-papel .ctr-clt{font-size:8.5pt;margin-bottom:3px;break-after:avoid;page-break-after:avoid}
  .ctr-papel .ctr-cl{margin-top:8px}
  .ctr-papel .ctr-it{margin-bottom:3px}
  .ctr-papel .ctr-it,.ctr-papel li,.ctr-papel tr,.ctr-papel .ctr-aviso-doc,.ctr-papel .ctr-mini{break-inside:avoid;page-break-inside:avoid}
  .ctr-papel .ctr-quadro,.ctr-papel .ctr-assin{break-inside:avoid;page-break-inside:avoid}
  .ctr-papel .ctr-comp{break-inside:avoid;page-break-inside:avoid}
  .ctr-papel .ctr-aviso-doc p:last-child{font-size:8.8pt}
  .ctr-papel .ctr-assin{margin-top:14px}
  .ctr-papel .ctr-it.ctr-abertura{margin-top:8px}
  .ctr-papel .ctr-anexo{break-before:page;page-break-before:always;border-top:0;margin-top:0;padding-top:0}
  .ctr-papel .ctr-anexo-tit{font-size:17pt}
  .ctr-papel .he-rodape{font-size:7pt}
  /* no papel, sempre a cara do documento (nunca o formato de celular — 02/out, o PDF dela) */
  .ctr-papel .he-grade > table > tbody > tr > th,.ctr-papel .he-grade > table > tbody > tr > td{display:table-cell}
  .ctr-papel .ctr-assin-grade{grid-template-columns:1fr 1fr}
}

/* ---------- 08 · ROTINAS DO STUDIO (02/out, 5a conversa) ----------
   A conta das rotinas (sem dono) so ve esta secao e o "Sair". A trava e o
   banco (banco/29); isto e so para a tela nao oferecer o que nao abre. */
.conta-rotinas .nav-item:not([data-ir="rotinas"]):not(#btn-sair),
.conta-rotinas .nav-grupo:not(.nav-g-studio):not(.nav-g-conta),
.conta-rotinas .obra{display:none}
.pilula.rotinas{border-color:var(--coral);color:#f7c0ad}
.ro-quem input{color:var(--white)}
.ro-drive{text-decoration:none;margin:4px 0 6px}
.ro-drive-ajuda{margin:0 0 16px}
.ro-tit{margin:22px 0 10px;font-size:19px;font-weight:700;color:var(--white)}
.ro-situacao{display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:720px){ .ro-situacao{grid-template-columns:1fr 1fr} }
@media (min-width:1050px){ .ro-situacao{grid-template-columns:1fr 1fr 1fr} }
.ro-card{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;min-height:96px;
  padding:13px 14px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);
  border-left:5px solid var(--gray-3);color:var(--white);font:inherit;cursor:pointer}
.ro-card:hover{border-color:var(--gray-3)}
.ro-card-per{font-size:13.5px;color:var(--gray)}
.ro-card-nome{font-size:16px;font-weight:700;line-height:1.3}
.ro-card-sit{font-size:15px;font-weight:600}
.ro-card-ult{font-size:13.5px;color:var(--gray)}
.ro-em_dia{border-left-color:var(--menta)} .ro-em_dia .ro-card-sit{color:#a8f2e2}
.ro-vence_hoje{border-left-color:var(--ambar)} .ro-vence_hoje .ro-card-sit{color:var(--ambar)}
.ro-atrasada{border-left-color:var(--coral)} .ro-atrasada .ro-card-sit{color:#f7c0ad}
.ro-nunca .ro-card-sit{color:var(--gray)}
/* 06/out (12a, banco/38): o checklist antes da diaria nao tem prazo — a borda e a da marca, o texto claro */
.ro-sem_prazo{border-left-color:var(--teal)} .ro-sem_prazo .ro-card-sit{color:var(--white)}
#ad-form #ad-aviso{margin:4px 0 12px}
/* 06/out (12a): os pontos de atencao dos dois studios no alto da secao (lado a lado a partir de 900px) */
.ad-guia-secao{margin:6px 0 18px}
.ad-guia-secao .ro-tit{margin-top:8px}
.ad-guia-studios{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:900px){ .ad-guia-studios{grid-template-columns:1fr 1fr} .ad-guia-fim{grid-column:1 / -1} }
.ad-guia-studios .ad-guia{margin:0}
.ad-guia-fim .ad-fim{margin:0}
.ro-avisos{margin:12px 0 4px;padding:12px 14px;border-radius:var(--r-sm);background:rgba(241,135,104,.1);border:1px solid rgba(241,135,104,.35)}
.ro-avisos-tit{margin:0 0 6px;font-weight:700;color:var(--white)}
.ro-aviso-ext{margin:4px 0;font-size:15px;line-height:1.45;color:#f7c0ad}
.ro-aviso-ext.ro-vence_logo{color:var(--ambar)}
.ro-aviso-ext b{color:#fff}
.ro-form{margin-top:18px;padding:16px;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line)}
.ro-form .ro-tit{margin-top:0}
.ro-intro{margin:0 0 12px;font-size:15px;line-height:1.5;color:var(--gray)}
.ro-intro b{color:var(--white)}
.ro-guia{margin:0 0 14px;padding:10px 14px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);font-size:14.5px;line-height:1.5;color:var(--gray)}
.ro-guia summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--white)}
.ro-guia ul{margin:4px 0 8px;padding-left:20px}
.ro-guia b{color:var(--white)}
.ro-guia-sub{margin:10px 0 2px;font-weight:600;color:var(--white)}
.ro-secao{margin-bottom:14px}
.ro-secao-tit{margin:0 0 6px;font-size:16px;font-weight:700;color:var(--white)}
.ro-tudo-ok{margin:2px 0 10px}
.ro-linha{padding:10px 8px;margin:0 -8px;border-bottom:1px solid var(--line-2);border-left:3px solid transparent}
.ro-linha:last-child{border-bottom:0}
.ro-linha.bem{border-left-color:var(--menta)}
.ro-linha.ruim{border-left-color:var(--coral);background:rgba(241,135,104,.07)}
.ro-item{margin:0 0 8px;font-size:15.5px;line-height:1.35;color:var(--white);overflow-wrap:anywhere}
.ro-ops{display:flex;flex-wrap:wrap;gap:8px}
.ro-op{flex:1 1 110px;min-height:44px;padding:6px 10px;border-radius:var(--r-sm);cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--gray);font:inherit;font-size:15px;font-weight:600;line-height:1.2}
.ro-op[aria-pressed="true"]{color:var(--white);border-width:2px}
.ro-op[aria-pressed="true"]::before{content:"✓ "}
.ro-op-ok[aria-pressed="true"],.ro-op-feito[aria-pressed="true"]{border-color:var(--menta);background:rgba(78,235,203,.1)}
.ro-op-problema[aria-pressed="true"],.ro-op-nao_feito[aria-pressed="true"]{border-color:var(--coral);background:rgba(241,135,104,.12)}
.ro-op-nao_conferido[aria-pressed="true"]{border-color:var(--ambar);background:rgba(252,200,108,.1)}
.ro-pontos-tit{margin:10px 0 6px;font-size:14.5px;color:var(--gray)}
.ro-pontos{display:grid;gap:8px;grid-template-columns:1fr}
@media (min-width:720px){ .ro-pontos{grid-template-columns:1fr 1fr} }
.ro-ponto-cx{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ro-ponto{flex:1 1 180px;min-height:44px;padding:6px 10px;text-align:left;border-radius:var(--r-sm);cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--gray);font:inherit;font-size:14.5px;line-height:1.25}
.ro-ponto[aria-pressed="true"]{border:2px solid var(--coral);color:var(--white);background:rgba(241,135,104,.12)}
.ro-ponto-qtd-rot,.ro-qtd-rot{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--gray)}
.ro-qtd-rot{margin-top:10px}
.ro-ponto-qtd,.ro-qtd{width:64px;min-height:44px;padding:8px;border-radius:var(--r-sm);background:var(--surface);
  border:1px solid var(--line);color:var(--white);font:inherit;font-size:16px;text-align:center}
.ro-obs-linha,.ro-ext-obs{min-height:64px;margin:10px 0 0}
.ro-ext{margin-bottom:12px;padding:14px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--gray-3)}
.ro-ext.bem{border-left-color:var(--menta)}
.ro-ext.ruim{border-left-color:var(--coral)}
.ro-ext-cab{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;margin-bottom:8px}
.ro-ext-n{font-weight:700;color:var(--white)}
.ro-ext-esp{font-size:14.5px;color:var(--gray)}
.ro-ext-grade{display:grid;gap:10px;grid-template-columns:1fr 1fr}
@media (min-width:720px){ .ro-ext-grade{grid-template-columns:repeat(3,1fr)} }
.ro-ext-largo{grid-column:1 / -1}
.ro-ext-campo-rot{display:flex;flex-direction:column;gap:4px;font-size:14.5px;color:var(--gray);min-width:0}
.ro-ext-campo{width:100%;min-width:0;min-height:44px;padding:8px 10px;border-radius:var(--r-sm);background:var(--surface-2);
  border:1px solid var(--line);color:var(--white);font:inherit;font-size:16px}
.ro-ext-alerta{margin:10px 0 0;font-size:14.5px;line-height:1.45;color:#f7c0ad}
.ro-ext-alerta b{color:#fff}
.ro-ext-ver{margin:0 0 10px;padding-left:20px;font-size:14.5px;line-height:1.5;color:var(--gray)}
.ro-ext-tirar{margin-top:10px;width:100%;font-size:14.5px}
.ro-conta{margin:4px 0 10px;font-size:15px;color:var(--gray)}
.ro-conta b{color:var(--white)}
.ro-conta-prob{color:#f7c0ad;font-weight:600}
.ro-fechar{margin-top:10px}
.ro-reg-tit{margin:0 0 4px;font-size:16px;font-weight:700;color:var(--white)}
.ro-reg .ro-ver{margin-top:10px}
.ro-itens{margin-top:10px}
.ro-itens-sec{margin:12px 0 4px;font-weight:700;color:var(--white)}
.ro-itens-l{margin:3px 0;font-size:14.5px;line-height:1.45;color:var(--gray);overflow-wrap:anywhere}
.ro-itens-l b{color:var(--white)}
.ro-itens-l.ruim{color:#f7c0ad}

/* ---------- 02/out, 5a conversa (banco/30): os horarios do checklist e as cobrancas prontas ---------- */
.cl-hor-lista{display:grid;gap:10px;margin:6px 0 10px}
.cl-hor-off{opacity:.5}
.cl-hor-linha{padding:10px 12px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line)}
.cl-hor-dia{margin:0 0 8px;font-size:15px;color:var(--gray)}
.cl-hor-dia b{color:var(--white)}
.cl-hor-campos{display:grid;gap:10px;grid-template-columns:1fr 1fr}
@media (min-width:720px){ .cl-hor-campos{grid-template-columns:1fr 1.3fr 1fr} }
.cl-hor-rot{display:flex;flex-direction:column;gap:4px;font-size:14.5px;color:var(--gray);min-width:0}
.cl-hor-rot input,.cl-hor-rot select{width:100%;min-width:0;min-height:44px;padding:8px 10px;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--line);color:var(--white);font:inherit;font-size:16px}
.cl-hor-res{margin:8px 0 0;font-size:14.5px;color:var(--gray)}
.cl-hor-res:empty{display:none}
.cl-hor-res.cl-hor-ok{color:#a8f2e2}
.cl-hor-res.cl-hor-tem{color:var(--ambar);font-weight:600}
.cl-hor-res.cl-hor-erro{color:#f7c0ad}
.cl-hor-naosei{display:flex;align-items:center;gap:10px;min-height:44px;font-size:15px;color:var(--gray);cursor:pointer}
.cl-hor-naosei input{width:22px;height:22px;flex:none}
.cl-hor-total{margin:4px 0 0;font-size:15px;color:var(--gray)}
.cl-hor-total:empty{display:none}
.cl-hor-total b{color:var(--white)}
.he-prontas{border-color:rgba(252,200,108,.45)}
.he-pronta{padding:12px 0;border-bottom:1px solid var(--line-2)}
.he-pronta:last-child{border-bottom:0}
.he-pronta-cli{margin:0 0 4px;font-size:16px;color:var(--white)}
.he-pronta-val{margin:0 0 4px;font-size:15.5px;color:var(--white)}
.he-pronta-val span,.he-pronta-de{color:var(--gray);font-size:14.5px}
.he-pronta-de{margin:0 0 10px;line-height:1.45;overflow-wrap:anywhere}
.he-quase{margin:10px 0 0;font-size:14.5px;line-height:1.45;color:var(--gray)}
.he-quase b{color:var(--white)}
.cl-kit{color:var(--ambar);font-weight:600}   /* 02/out, 5a conversa: o nº do kit de acesso da sala */

/* ---------- 06/out/2026 (11a conversa, banco/36) — CONTRATOS PARTE 3: CHECK-IN + CHECK-OUT (o Anexo I) ----------
   O seletor Check-in / Check-out no alto do checklist; o kit de acesso de cada sala; quem acompanhou; a nota do
   check-in em cada item do check-out; o bloco do Anexo I no Historico; e o Anexo I preenchido no papel. */
.cl-momento{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 16px}
.cl-mom{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:64px;padding:10px 14px;text-align:left;
  border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--gray);font:inherit;font-size:14px;cursor:pointer}
.cl-mom b{font-size:17px;color:var(--white)}
.cl-mom .cl-mom-n{font-size:13.5px}
.cl-mom .cl-mom-n:empty{display:none}
.cl-mom[aria-pressed="true"]{border:2px solid var(--lima);background:var(--surface-2)}
.cl-mom[aria-pressed="true"] b::before{content:"✓ ";color:var(--lima)}
@media (max-width:420px){ .cl-momento{grid-template-columns:1fr} }
.cl-kits,.cl-quem{grid-column:1 / -1;order:4}   /* depois do quadro da locacao (.cl-loc-info, order 3) */
/* 06/out (a FOTO pegou): .campo label (display:block) e .campo input (50px de altura, enchimento) venciam as caixinhas —
   a caixa ficava ACIMA do texto. Vale tambem para o "Nao sei os horarios", que ja sofria do mesmo. */
.campo .cl-hor-naosei,.campo .cl-kits-marca{display:flex;margin-bottom:0}
.campo .cl-hor-naosei input,.campo .cl-kits-marca input{width:22px;height:22px;min-height:0;padding:0;flex:none}
.cl-kits-lista{display:grid;gap:10px;margin:6px 0 10px}
@media (min-width:900px){ .cl-kits-lista{grid-template-columns:1fr 1fr} }
.cl-kits-linha{padding:10px 12px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);min-width:0}
.cl-kits-nome{margin:0 0 8px;font-size:15px;line-height:1.4;color:var(--gray);overflow-wrap:anywhere}
.cl-kits-nome b{color:var(--ambar)}
.cl-kits-qtd{color:var(--white)}
.cl-kits-campos{display:grid;gap:10px;grid-template-columns:1fr 1fr;align-items:end}
@media (min-width:520px){ .cl-kits-campos{grid-template-columns:1fr 1fr 1.2fr} }
.cl-kits-campos .cl-hor-rot input{text-align:center}
.cl-kits-marca{display:flex;align-items:center;gap:10px;min-height:44px;font-size:15px;color:var(--white);cursor:pointer}
.cl-kits-marca input{width:22px;height:22px;flex:none}
.cl-quem input[type="text"]{width:100%;min-height:44px}
.cl-quem input:disabled{opacity:.5}
.cl-ci-nota{margin:4px 0 6px;padding:6px 10px;border-radius:var(--r-sm);background:var(--surface-2);border-left:3px solid var(--ambar);
  font-size:14px;line-height:1.4;color:var(--gray)}
.cl-ci-nota b{color:var(--ambar)}
.vs-bloco{border-top:1px solid var(--line);margin-top:12px;padding-top:10px;display:flex;flex-direction:column;gap:10px}
.vs-bloco .btn{margin:0}
.vs-bloco a.btn{text-decoration:none}
.vs-painel{display:flex;flex-direction:column;gap:10px}
.vs-res{margin:0;padding-left:20px;font-size:14.5px;line-height:1.5;color:var(--gray)}
.vs-erro{margin:6px 0 0;font-size:14.5px;color:var(--vermelho)}
.vs-p{margin:6px 0 0;font-size:14.5px;line-height:1.5}
.vas{display:flex;flex-direction:column;gap:10px}
.vas-passos,.vas-feito{margin:0;font-size:14.5px;line-height:1.5;color:var(--gray)}
.vas-passos b,.vas-feito b{color:var(--white)}
.vas-caixa{display:flex;flex-direction:column;gap:10px}
/* o documento (so vai ao papel) */
.vs-doc .vs-bl{margin:12px 18px 0}
.vs-doc .vs-h{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bg);
  border-bottom:2px solid var(--bg);padding-bottom:2px}
.vs-doc .vs-p{color:var(--tinta)}
.vs-doc .vs-novos{margin:4px 0 0;padding-left:18px}
.vs-tab{border:1px solid var(--doc-linha)}
.vs-tab th,.vs-tab td{padding:2px 7px;border-bottom:1px solid var(--doc-linha-2);text-align:left;vertical-align:top;font-size:12px}
.vs-tab th{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--doc-cinza)}
.vs-tab .vs-c{text-align:center;white-space:nowrap}
.vs-tab .vs-l{color:var(--doc-cinza-2);width:4%}
.vs-tab .vs-m-a{font-weight:700}
.vs-tab tr.vs-novo td{font-weight:700;background:var(--doc-linha-2)}   /* o dano novo: a linha inteira destacada */
.vs-tab tr.vs-novo td:first-child{box-shadow:inset 3px 0 0 var(--bg)}       /* e UMA barra, no comeco da linha (a foto pegou: era uma por celula) */
/* as salas com as MESMAS colunas, uma embaixo da outra (a foto pegou: cada sala tinha a sua largura) */
.vs-sala .vs-tab{table-layout:fixed}
.vs-sala .vs-tab th:nth-child(1){width:5%} .vs-sala .vs-tab th:nth-child(2){width:37%} .vs-sala .vs-tab th:nth-child(3){width:7%}
.vs-sala .vs-tab th:nth-child(4){width:11%} .vs-sala .vs-tab th:nth-child(5){width:13%} .vs-sala .vs-tab th:nth-child(6){width:27%}
.vs-sala .vs-tab td{overflow-wrap:anywhere}
.vs-sala{margin:8px 0 0;break-inside:avoid;page-break-inside:avoid}
.vs-sala-cab{margin:0;background:var(--bg);color:var(--white);padding:4px 10px;font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;display:flex;gap:6px;align-items:baseline}
.vs-sala-cab span{color:var(--lima)}
.vs-sala-cab i{margin-left:auto;font-style:normal;font-weight:400;font-size:9.5px;color:var(--gray-2)}
.vs-ass{break-inside:avoid;page-break-inside:avoid}
.vs-ass-g{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vs-ass-g > div{border:1px solid var(--doc-linha);padding:8px 12px 10px}
.vs-ass-t{margin:0;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.vs-ln{margin:30px 0 0;border-top:1.5px solid var(--bg);padding-top:3px;text-align:center;font-size:11px;color:var(--doc-cinza)}
@media print{
  body.vs-imprimir{background:var(--papel)}
  body.vs-imprimir > *:not(#vs-impressao){display:none !important}
  body.vs-imprimir #vs-impressao{display:block !important}
  .vs-doc{max-width:none;font-size:9pt;line-height:1.35;padding:0 8mm}
  .vs-doc .he-cab{padding:9px 14px 8px}
  .vs-doc .he-cab img{height:22px}
  .vs-doc .he-meta{font-size:7pt;letter-spacing:.03em;margin-top:5px}
  .vs-doc .he-topo{padding:9px 14px 2px}
  .vs-doc .he-titulo{font-size:17pt}
  .vs-doc .he-subt{font-size:7.5pt}
  .vs-doc .he-grade th,.vs-doc .he-grade td{padding:2px 9px;font-size:8.5pt}
  .vs-doc .vs-bl{margin:8px 4mm 0}
  .vs-doc .vs-p{font-size:8.5pt}
  .vs-tab th,.vs-tab td{font-size:7.6pt;padding:1px 5px}
  .vs-tab tr{break-inside:avoid;page-break-inside:avoid}
}

/* ================================================================ 07/out (13a, banco/39) — ETAPA 8B · FINANCEIRO
   O recibo usa o papel da cobranca de horas extras (.he-doc, .he-cab, .he-valor...); aqui so o que e dele. */
.fn-resumo{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:0 0 16px}
.fn-num{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px}
.fn-num span{display:block;color:var(--gray);font-size:13.5px;letter-spacing:.04em;text-transform:uppercase}
.fn-num b{display:block;font-size:24px;font-variant-numeric:tabular-nums;margin-top:2px}
.fn-num.atraso{border-color:var(--vermelho)}
.fn-num.atraso b{color:var(--vermelho)}
.fn-alertas{margin:0 0 16px}
.fn-alertas-lista{list-style:none;margin:0;padding:0}
.fn-alerta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;padding:10px 0 10px 12px;
  border-top:1px solid var(--line);border-left:3px solid var(--teal)}
.fn-alerta:first-child{border-top:0}
.fn-alerta span{flex:1 1 320px;line-height:1.4}
.fn-alerta.atraso{border-left-color:var(--vermelho)}
.fn-alerta.vence{border-left-color:var(--ambar)}
.fn-abas{max-width:none}
.fn-aba{margin:0 0 14px}
.fn-lista .cartao,.fn-aba .cartao{margin-bottom:12px}
.fn-loc-ct{color:var(--gray);font-weight:600}
.fn-tab{width:100%;border-collapse:collapse;color:var(--white);font-variant-numeric:tabular-nums}
/* 07/out, a FOTO: o cabecalho herdava a faixa clara do papel (.he-tab) e a tabela nao enchia o cartao */
.fn-tab thead th{color:var(--gray);background:transparent;border-bottom:1px solid var(--line);text-align:left}
.fn-tab thead th.he-n{text-align:right}
.fn-tab td{border-bottom:1px solid var(--line-2);white-space:normal;vertical-align:middle}
.fn-tab small{color:var(--gray)}
.fn-acao{text-align:right}
.fn-acao .btn{min-height:44px}
.fn-multa{display:block;color:var(--vermelho);font-size:13.5px;margin-top:4px}
.fn-rc-cod{color:var(--lima);font-weight:600;font-size:13.5px}
.fn-sem-rc{color:var(--ambar);font-size:13.5px}
.fn-tipo{color:var(--gray);font-size:14px;font-weight:600}
.fn-he{margin:10px 0 0;color:var(--gray)}
.fn-form{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.fn-form-tit{margin:0 0 10px}
.fn-form-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:4px 14px;align-items:end}
.fn-form-campos .btn{margin-top:6px}
.fn-form .recado{margin-top:10px}
.fn-form .btn{margin-top:8px}
.fn-nota-regra{border-left:3px solid var(--ambar);padding-left:12px}
.fn-nf-pedir .btn{margin-top:4px}
.fn-passos{margin:12px 0 8px;padding-left:22px;line-height:1.5}
.fn-passos li{margin:0 0 10px}
.fn-passos .btn{min-height:44px;text-decoration:none;margin-right:6px}
.fn-nf-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:4px 14px;align-items:end}
.fn-nf-feita{margin:10px 0}
.fn-nf-trocar{margin-top:10px}
.fn-nf-acr{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.fn-nf-acr input,.fn-nf-acr .sv-select{width:auto;min-height:44px}
.fn-nf .recado{margin-top:10px}
.fn-copia{width:100%;margin-top:6px;background:var(--surface-2);color:var(--white);border:1px solid var(--line);border-radius:8px;padding:8px}
.fn-pct-mudar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.fn-pct-mudar .campo{flex:0 1 240px;margin:0}
/* o documento do recibo: a declaracao, o local, a assinatura */
.fn-decl{margin:12px 18px 0;font-size:15px;line-height:1.6}
.fn-decl p{margin:0 0 8px;text-align:left}   /* 07/out, a FOTO: justificado, os campos no meio espalhavam as palavras */
.fn-ed-nome{width:min(100%,24em)}
.fn-ed-doc{width:12em}
.fn-ed-end{width:min(100%,26em)}
.fn-ed-ref{display:block;margin-top:4px}
.fn-local{margin:16px 18px 0;font-size:14.5px}
.fn-assina{margin:34px auto 0;max-width:340px;text-align:center;font-size:13px;color:var(--doc-cinza)}
.fn-assina .fn-linha{display:block;border-top:1px solid var(--tinta);margin-bottom:6px}
.fn-assina b{display:block;color:var(--tinta);font-size:13.5px}
.fn-assina span{display:block}
@media (max-width:620px){
  .fn-acao{text-align:left}
  .fn-decl{font-size:14.5px}
}
@media print{
  body.fn-imprimir{background:var(--papel)}
  body.fn-imprimir > *:not(#fn-impressao){display:none !important}
  body.fn-imprimir #fn-impressao{display:block !important}
  .fn-doc.he-papel .fn-decl{margin-left:14px;margin-right:14px;font-size:10.5pt}
  .fn-doc.he-papel .fn-local{margin-left:14px;font-size:10pt}
  .fn-doc.he-papel .fn-assina{margin-top:22mm}
}

/* ---------- ETAPA 9 · DESCADASTROS (07/out, 14a conversa, banco/40) ----------
   A secao (so a adm) e a FAIXA vermelha nos Contatos e Clientes (as duas contas: "Faixa vermelha + dados") */
.dc-conferir{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.dc-conferir .campo{flex:1 1 280px;margin:0}
.dc-conferir .btn{flex:0 1 160px}
.dc-busca-cx{max-width:640px}
.dc-lista,.dc-retornos{display:grid;grid-template-columns:1fr;gap:12px}
.dc-email{word-break:break-word}
.ct-selo.dc-selo-fora{background:rgba(255,107,107,.16);color:#ffb3b3}
.ct-selo.dc-selo-volta{background:rgba(95,211,141,.14);color:var(--verde)}
.dc-card .btn,.dc-caixa .btn{margin-top:10px}
.dc-voltou,.dc-rt-txt{margin:8px 0 0;color:var(--gray);font-size:14.5px;line-height:1.5;word-break:break-word}
.dc-voltou b,.dc-rt-txt b{color:var(--white)}
.dc-caixa{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2)}
.dc-caixa .ct-nota-campo{margin-top:6px}
.dc-pergunta{margin:0 0 10px;line-height:1.5}
.dc-pergunta b{color:var(--white)}
.dc-retornos-cx{margin-top:18px}
.dc-faixa{display:flex;gap:9px;align-items:flex-start;margin:4px 0 8px;padding:10px 12px;
  background:#3a2528;border:1px solid var(--vermelho);border-left-width:5px;border-radius:var(--r-sm);
  color:#ffd6d6;font-size:14.5px;line-height:1.45}
.dc-faixa svg{width:18px;height:18px;flex:none;margin-top:2px;stroke:var(--vermelho);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.dc-faixa b{color:#fff;font-weight:600}

/* ---------- ETAPA 12 · SEM INTERNET (07/out, 15a): a faixa logo abaixo do cabecalho (fundo SOLIDO — armadilha 33) */
.sem-net{position:sticky;top:58px;z-index:54;display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;
  padding:10px 16px;background:#3a3020;border-bottom:1px solid var(--ambar);color:#ffe6b3;font-size:14.5px;line-height:1.45}
.sem-net svg{width:18px;height:18px;flex:none;stroke:var(--ambar);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sem-net span{flex:1 1 220px}
.sem-net b{color:#fff}
.sem-net.sem-net-ok{background:#1f3328;border-bottom-color:var(--verde);color:#cdeedb}
.sem-net .btn{min-height:44px;padding:8px 16px;font-size:14.5px}

/* ---------- ETAPA 10 · PROCURAR EM TUDO (07/out, 14a conversa, banco/41) ----------
   O botao no cabecalho (icone + palavra, C1; 46 px de toque, C2), a secao e o cartao achado */
.topo-procurar{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:46px;padding:0 16px;
  border:1px solid var(--line);border-radius:99px;background:var(--surface-2);color:var(--white);
  font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.topo-procurar:hover{border-color:var(--gray-3)}
.topo-procurar svg{width:20px;height:20px;flex:none;stroke:var(--lima);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.topo-procurar[aria-current="page"]{border-color:var(--lima)}
.termo-trava .topo-procurar,.conta-rotinas .topo-procurar{display:none !important}
.bu-linha{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.bu-linha .campo{flex:1 1 280px;margin:0}
.bu-linha .btn{flex:0 1 160px}
.bu-grupos{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px}
.bu-n{display:inline-block;min-width:28px;margin-left:6px;padding:1px 9px;border-radius:99px;background:var(--surface-2);
  border:1px solid var(--line);color:var(--lima);font-size:14px;text-align:center;vertical-align:middle}
.bu-corte{margin:0 0 10px;color:var(--ambar);font-size:14px;line-height:1.45}
.bu-lista{list-style:none;margin:0;padding:0;display:grid;gap:8px}
/* 07/out, a FOTO: com o fundo surface-2 no item, o botao (btn-calmo, o MESMO fundo) sumia — o item fica no fundo
   do cartao e o botao ganha a borda mais clara (a 5A mede a diferenca de fundo e a borda) */
.bu-item{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:transparent}
.bu-item .bu-ir{border-color:var(--gray-3)}
.bu-txt{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:3px;word-break:break-word}
.bu-txt b{color:var(--white);font-weight:600}
.bu-txt span{color:var(--gray);font-size:14px;line-height:1.45}
.bu-item .btn{flex:0 1 auto;min-height:44px;padding:8px 16px;font-size:14.5px}
@media (max-width:520px){ .bu-item .btn{flex:1 1 100%} .bu-linha .btn{flex:1 1 100%} }
.bu-achado{outline:3px solid var(--lima);outline-offset:3px}
.bu-planilhas{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 12px}
.bu-planilhas .bu-planilha{flex:1 1 240px}
.bu-passos{margin:8px 0 10px;padding-left:22px;line-height:1.5}
.bu-passos li{margin:0 0 6px}
a.btn.bu-google-abrir{text-decoration:none}